Colin's Blog
[flutter] Firebase Database와 플러터를 이용한 영어 학습 애플리케이션 만들기

개요

이번 프로젝트에서는 플러터(Flutter)와 Firebase Database를 사용하여 영어 학습 애플리케이션을 만들어 보겠습니다. Firebase Database는 데이터 저장 및 실시간 동기화를 제공하는 클라우드 호스팅 데이터베이스입니다. 플러터는 구글에서 개발한 UI 프레임워크로, 단일 코드베이스에서 안드로이드 및 iOS 애플리케이션을 개발할 수 있습니다.

준비 사항

Firebase 연동하기

  1. 프로젝트 생성 후 Firebase에 로그인합니다.
  2. Firebase 콘솔에서 ‘프로젝트 추가’를 클릭하여 새 프로젝트를 생성합니다.
  3. 생성한 프로젝트로 이동한 후 ‘프로젝트 설정’ 메뉴로 이동합니다.
  4. ‘프로젝트 설정’에서 ‘앱 추가’를 클릭하여 Android 앱을 추가합니다.
  5. ‘앱 등록’ 화면에서 패키지 이름을 입력하고 ‘등록’ 버튼을 클릭합니다.
  6. 다운로드한 ‘google-services.json’ 파일을 프로젝트의 ‘android/app’ 디렉터리에 저장합니다.
  7. ‘android/app/build.gradle’ 파일을 열고 dependencies 부분에 다음 줄을 추가합니다: 
    implementation 'com.google.firebase:firebase-database:20.0.0'
  8. ‘android/build.gradle’ 파일을 열고 아래쪽에 다음 코드를 추가합니다: 
    classpath 'com.google.gms:google-services:4.3.4'
  9. 터미널에서 flutter pub get 명령어로 종속성을 다운로드합니다.

애플리케이션 개발하기

  1. 플러터 프로젝트를 생성합니다.
  2. 필요한 패키지를 pubspec.yaml 파일에 추가합니다: 
    dependencies:
  flutter:
 sdk: flutter
  firebase_database: ^7.0.0
  3. main.dart 파일을 열고 다음 코드를 작성합니다: ```dart import ‘package:flutter/material.dart’; import ‘package:firebase_database/firebase_database.dart’;

void main() { runApp(MyApp()); }

class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: HomePage(), ); } }

class HomePage extends StatefulWidget { @override _HomePageState createState() => _HomePageState(); }

class _HomePageState extends State { final databaseReference = FirebaseDatabase.instance.reference();

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

@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(‘English Learning App’), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ RaisedButton( child: Text(‘Get data from Firebase’), onPressed: () { databaseReference.once().then((DataSnapshot snapshot) { print(‘Data: ${snapshot.value}’); }); }, ), RaisedButton( child: Text(‘Set data to Firebase’), onPressed: () { databaseReference.set(‘Hello, Firebase!’); }, ), ], ), ), ); } } ```

  1. 애플리케이션에서 Firebase 데이터베이스에 접근하여 데이터를 읽고 쓸 수 있습니다. 예시에서는 ‘Get data from Firebase’ 버튼을 누를 때 데이터를 가져오고, ‘Set data to Firebase’ 버튼을 누를 때 데이터를 설정합니다.

실행하기

  1. 터미널에서 프로젝트 디렉터리로 이동한 후 flutter run 명령어로 애플리케이션을 실행합니다.
  2. 애플리케이션이 실행되면 ‘Get data from Firebase’ 버튼을 눌러 Firebase 데이터베이스로부터 데이터를 가져올 수 있습니다.
  3. ‘Set data to Firebase’ 버튼을 눌러 Firebase 데이터베이스에 데이터를 설정할 수 있습니다.

이제 당신은 Firebase Database와 플러터를 이용하여 간단한 영어 학습 애플리케이션을 개발할 수 있습니다. Firebase Database를 활용하여 애플리케이션의 데이터를 클라우드에서 쉽게 관리할 수 있습니다.

더 많은 기능과 세부 설정에 대해서는 Firebase Database 문서를 참고하세요. Happy coding!

© 2018 Colin. All rights reserved.