Firebase 연동(Android)

Firebase를 Flutter에 연동하기 위해서는 Firebase 프로젝트를 생성해야 한다.

https://console.firebase.google.com/?hl=ko 

로그인 - Google 계정

 

위 FirebaseConsole로 접속하여 프로젝트 추가 버튼을 눌러준다.

프로젝트 명은 원하는 이름으로 설정한다.

 

애널리스틱이 필요하다면 설정을 하면 된다.

 

설정이 완료되면 Firebase를 사용할 수 있다.

 

이제 Flutter와 연동해보자.

 

톱니바퀴 버튼을 클릭하여 프로젝트 설정을 누른다.

 

들어가게 되면 위와 같은 화면이 나타난다.

 

해당 화면에서 제일 아래로 내리게 되면 위 이미지처럼 플랫폼을 추가할 수 있다.

 

여기서 안드로이드를 클릭해 준다.

 

클릭하면 위처럼 나타나는 데 여기에 만드는 앱의 패키지 명을 작성한다.

 

선택사항은 작성하지 않아도 괜찮다.

 

다음을 누르게 되면 구성 파일을 다운로드 가능한데 파일을 다운로드하여 ~/android/app 폴더에 넣어준다.

 

이제 build.gradle을 설정하면 된다.

처음은 ~/android에 있는 build.gradle을 설정해 준다.

 

buildscript {
  repositories {
    // Check that you have the following line (if not, add it):
    google()  // Google's Maven repository

  }
  dependencies {
    ...
    // Add this line
    classpath 'com.google.gms:google-services:4.3.10'

  }
}

allprojects {
  ...
  repositories {
    // Check that you have the following line (if not, add it):
    google()  // Google's Maven repository

    ...
  }
}

위처럼 classpath 'com.google.gms:google-services:4.3.10' 부분만 추가해 주면 된다.

 

다음은 ~/android/app 에 있는 build.gradle을 설정한다.

 

Flutter에 작성되어있는 apply 내용 아래에

apply plugin: 'com.google.gms.google-services'

를 추가해 준다.

또한 최 하단에 있는 dependencies에 

dependencies {
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
    implementation platform('com.google.firebase:firebase-bom:29.2.1')
    implementation 'com.google.firebase:firebase-analytics-ktx'
    implementation 'com.google.firebase:firebase-firestore-ktx'
    implementation 'com.google.firebase:firebase-core:20.1.2'
    implementation 'com.google.firebase:firebase-messaging:23.0.3'
}

위 코드를 추가해 준다.

 

위 내용에서 analytics는 애널리스틱을 사용할 때 추가하는 항목이다.

 

이렇게 설정하면 안드로이드는 기본 설정이 완료되었다.

 

이제 Flutter 설정을 해보자

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(const MyApp());
}

Firebase를 초기화해주는 코드를 작성해 준다.

 

Future<void> tokenInit() async {
  await FirebaseMessaging.instance.getToken().then((tokenData) {
    setState(() {
      token = tokenData!;
    });
  });
}

 

기기에 대한 토큰 값을 생성해 주는 코드를 작성한다.

 

전체 코드는 아래와 같다.

 

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late String token = '';

  @override
  void initState() {
    super.initState();
    tokenInit();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("Firebase Test"),
        ),
        body: Center(
            child: Column(
          children: <Widget>[
            Text("토큰 값 : $token"),
          ],
        )));
  }

  Future<void> tokenInit() async {
    await FirebaseMessaging.instance.getToken().then((tokenData) {
      setState(() {
        token = tokenData!;
      });
    });
  }
}

 

토큰이 생성된 것을 확인하였다면 토큰을 이용하여 푸시 메시지를 보내보자.

 

메시지를 보내면 

위와 같이 메시지를 받았다고 콘솔 창에 나타난다.

 

푸시 메시지가 안 나타나는 이유는 푸시 메시지를 위한 설정을 아직 하지 않았기 때문이다.