안녕하세요. GDG 발표자로 참여하게 된 안재영입니다. 요즘 핫한 기술이죠? Flutter와 Firebase를 같이 사용하는 간단한 튜토리얼을 여러분들과 함께 진행해보도록 하겠습니다.

1. 플러터에 파이어베이스 한스푼
Jae Young Ahn
@goodahn

2. Table of Contents 🐦
1. Firebase Overview
🚩 Firebase가 뭔지 조금 알아!
1. Hands-on
🚩 Firebase 연동이 두렵지 않아!

3. 인증, 데이터베이스, 푸시 알람, 스토리지 등의 기능을 제공해주는
관리형 개발 플랫폼
Firebase?
https://firebase.google.com/docs?authuser=0&hl=ko

4. 인증, 데이터베이스, 푸시 알람, 스토리지 등의 기능을 제공해주는
관리형 개발 플랫폼
Firebase?
https://firebase.google.com/docs?authuser=0&hl=ko

5. Simple Meetup App
- 간단한 채팅 기능을
위한 Firebase 설정

6. https://github.com/goodahn/tutorial-firebase-with-flutter

7. 1. 정상적으로 실행되는지 확인하기

8. 2. Firebase 프로젝트 생성하기
● https://console.firebase.google.com/
● “프로젝트 추가 버튼” 클릭
● “Google 애널리틱스 사용 설정” off

9. 3. “이메일/비밀번호” 인증 기능 활성화
● “Build(빌드)”탭에서 “Authentication” 클릭
● “Sign-in method”의 “Email/Password” 사용

10. 4. Cloud Firestore 기능 활성화
● “Build(빌드)”탭에서 “Cloud Firestore” 클릭
● “Create database(데이터베이스 만들기)” 클릭
● “Start in test mode(테스트 모드에서 시작)” 클릭
● 다중 지역 “asia-northeast3” 선택

11. 5. firebase 관련 라이브러리 설치 및 설정
// 프로젝트 루트 디렉토리에서 다음 명령어 실행
flutter pub add firebase_core
flutter pub add firebase_auth
flutter pub add cloud_firestore
flutter pub add provider
dart pub global activate flutterfire_cli
flutterfire configure // 4번 슬라이드에서 생성한 파이어베이스 프로젝트 선택

12. 6. 메시지 작성을 위한 보안 규칙 설정
https://firebase.google.com/docs/firestore/security/rules-conditions?hl=ko&authuser=0
// lib/main.dart
_guestBookSubscription = FirebaseFirestore.instance
.collection('guestbook')
.orderBy('timestamp', descending: true)
.snapshots()
.listen((snapshot) {
…
…
});

13. 6.1 메시지 작성을 위한 보안 규칙 설정
https://firebase.google.com/docs/firestore/security/rules-conditions?hl=ko&authuser=0
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /guestbook/{entry} {
allow read: if true;
allow write: if true;
}
}
}

14. 6.2 메시지 작성을 위한 보안 규칙 설정
https://firebase.google.com/docs/firestore/security/rules-conditions?hl=ko&authuser=0
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /guestbook/{entry} {
allow read: if request.auth.uid != null;
allow write:
if request.auth.uid == request.resource.data.userId
&& "name" in request.resource.data
&& "text" in request.resource.data
&& "timestamp" in request.resource.data;
}
}
}

15. 7. 출석 체크를 위한 보안 규칙 설정
// lib/main.dart
_attendingSubscription = FirebaseFirestore.instance
.collection('attendees')
.doc(user.uid)
.snapshots()
.listen((snapshot) {
…
});

16. 7.1 출석 체크를 위한 보안 규칙 설정
rules_version = '2';
service cloud.firestore {
…
match /attendees/{userId} {
allow read: if true;
allow write: if true;
}
}
}

17. 7.2 출석 체크를 위한 보안 규칙 설정
rules_version = '2';
service cloud.firestore {
…
match /attendees/{userId} {
allow read: if true;
allow write: if request.auth.uid == userId
&& "attending" in request.resource.data;
}
}
}

18. 8. 메시지 오른쪽에 삭제 버튼 추가하기
# lib/main.dart
// TODO: 메시지 옆에 삭제 버튼을 삽입해보세요.

19. 9. 삭제 버튼 눌렀을 때, 메시지 삭제시키기
# lib/main.dart
// TODO: 메시지가 눌렸을 때, 실제 firestore의 다큐멘트를 지우는 코드를 작성해보세요!

20. Hands-on
😎😎😎
😎😎😎
😎😎😎