■ 할 일 관리 앱 만드는 방법을 보여준다. (파이어베이스 연동)
1. 웹 브라우저에서 아래 파이어베이스 웹사이트에 접속하고 구글 계정으로 로그인한다.
▶ URL
|
1 2 3 |
https://firebase.google.com |
2. 웹 브라우저에서 아래와 같이 [시작하기] 버튼을 클릭한다.
3. 웹 브라우저에서 아래와 같이 [프로젝트 만들기] 버튼을 클릭한다.
4. 웹 브라우저에서 아래와 같이 [프로젝트 이름]을 입력하고 [계속] 버튼을 클릭한다.
5. 웹 브라우저에서 아래와 같이 [이 프로젝트에서 Google 애널리틱스 사용 설정] 스위치 항목을 끄고 [프로젝트 만들기] 버튼을 클릭한다.
6. 웹 브라우저에서 아래와 같이 [계속] 버튼을 클릭한다.
7. 웹 브라우저에서 아래와 같이 [안드로이드 아이콘]을 클릭한다.
8. [비주얼 스튜디오 코드]의 [android / app / build.gradle] 파일에서 아래와 같이 "com.example.test_app"를 복사한다.
9. 웹 브라우저에서 아래와 같이 [Android 패키지 이름] 항목에 [비주얼 스튜디오 코드]에서 복사한 문자열을 붙여넣고 [앱 등록] 버튼을 클릭한다.
10. 웹 브라우저에서 아래와 같이 [google-services.json 다운로드] 버튼을 클릭하고 [google-services.json] 파일을 다운로드한다.
11. [google-services.json] 파일을 아래와 같이 [android / app] 폴더 아래로 이동시킨다.
12. 웹 브라우저에서 아래와 같이 [다음] 버튼을 클릭한다.
13. 웹 브라우저에서 아래와 같이 [복사하기 아이콘]을 클릭한다.
14. [비주얼 스튜디오 코드]의 [android / build.gradle] 파일에서 아래와 같이 코드를 붙여넣는다.
15. 웹 브라우저에서 아래와 같이 [복사하기 아이콘]을 클릭한다.
16. [비주얼 스튜디오 코드]의 [android / app / build.gradle] 파일에서 아래와 같이 코드를 붙여넣는다.
17. 웹 브라우저에서 아래와 같이 [다음] 버튼을 클릭한다.
18. 웹 브라우저에서 아래와 같이 [콘솔로 이동] 버튼을 클릭한다.
19. 웹 브라우저에서 아래와 같이 [Cloud Firestore]를 클릭한다.
20. 웹 브라우저에서 아래와 같이 [데이터베이스 만들기] 버튼을 클릭한다.
21. 웹 브라우저에서 아래와 같이 [테스트 모드에서 시작] 라디오 버튼을 체크하고 [다음] 버튼을 클릭한다.
22. 웹 브라우저에서 아래와 같이 [사용 설정] 버튼을 클릭한다.
23. 웹 브라우저에서 아래와 같이 파이어베이스 콘솔에서 Firestore 설정이 완료된 것을 확인할 수 있다.
24. [비주얼 스튜디오 코드]의 [android / app / build.gradle] 파일에서 아래와 같이 코드를 수정한다.
25. [비주얼 스튜디오 코드]의 [pubspec.yaml] 파일에서 아래와 같이 코드를 추가한다.
26. [비주얼 스튜디오 코드]에서 아래와 같이 [Get Packages 아이콘]을 클릭한다.
27. 웹 브라우저에서 아래와 같이 [컬렉션 시작] 항목을 클릭한다.
28. 웹 브라우저에서 아래와 같이 [컬렉션 ID] 항목을 입력하고 [다음] 버튼을 클릭한다.
29. 웹 브라우저에서 아래와 같이 [자동 ID] 항목을 클릭한다.
30. 웹 브라우저에서 아래와 같이 필드를 추가하고 [저장] 버튼을 클릭한다.
31. 웹 브라우저에서 컬렉션과 문서가 생성된 것을 확인할 수 있다.
32. 아래와 같이 소스 코드를 입력한다.
▶ main.dart
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 |
import 'package:flutter/material.dart'; import 'package:cloud_firestore/cloud_firestore.dart'; void main() { runApp(TestApplication()); } class Todo { String title; bool isDone; Todo(this.title, {this.isDone = false}); } class TestApplication extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Test Application', theme: ThemeData( primarySwatch: Colors.blue, ), home: MainPage(), ); } } class MainPage extends StatefulWidget { @override _MainPageState createState() => _MainPageState(); } class _MainPageState extends State<MainPage> { TextEditingController _todoController = TextEditingController(); @override void dispose() { _todoController.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('남은 할 일'), ), body: Padding( padding: const EdgeInsets.all(8.0), child: Column( children: <Widget>[ Row( children: <Widget>[ Expanded( child: TextField( controller: _todoController, ), ), RaisedButton( child: Text('추가'), onPressed: () => _addTodo(Todo(_todoController.text)), ), ], ), StreamBuilder<QuerySnapshot>( stream: Firestore.instance.collection('todo').snapshots(), builder: (context, snapshot) { if (!snapshot.hasData) { return CircularProgressIndicator(); } final documents = snapshot.data.documents; return Expanded( child: ListView( children: documents.map((doc) => _buildItem(doc)).toList(), ), ); }), ], ), ), ); } Widget _buildItem(DocumentSnapshot snapshot) { final todo = Todo(snapshot['title'], isDone: snapshot['isDone']); return ListTile( title: Text( todo.title, style: todo.isDone ? TextStyle( decoration: TextDecoration.lineThrough, fontStyle: FontStyle.italic, ) : null, ), trailing: IconButton( icon: Icon(Icons.delete_forever), onPressed: () => _deleteTodo(snapshot), ), onTap: () => _toggleTodo(snapshot), ); } void _addTodo(Todo todo) { setState(() { Firestore.instance .collection('todo') .add({'title': todo.title, 'isDone': todo.isDone}); _todoController.text = ""; }); } void _deleteTodo(DocumentSnapshot snapshot) { Firestore.instance .collection('todo') .document(snapshot.documentID) .delete(); } void _toggleTodo(DocumentSnapshot snapshot) { Firestore.instance .collection('todo') .document(snapshot.documentID) .updateData({'isDone': !snapshot['isDone']}); } } |
33. 아래와 같이 프로그램이 실행된다.
※ 각자의 google-services.json 파일이 android / app 폴더에 존재해야 한다.
