[GDG 대전] Flutter에 Firebase 한스푼 - GDG Flutter Festival

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

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

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

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

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

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

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

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

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

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번 슬라이드에서 생성한 파이어베이스 프로젝트 선택

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) {
…
…
});

6.1 메시지 작성을 위한 보안 규칙 설정
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /guestbook/{entry} {
allow read: if true;
allow write: if true;
}
}
}

6.2 메시지 작성을 위한 보안 규칙 설정
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;
}
}
}

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

7.1 출석 체크를 위한 보안 규칙 설정
…
match /attendees/{userId} {
allow write: if true;
}
}
}

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

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

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

Hands-on
😎😎😎
😎😎😎
😎😎😎

[GDG 대전] Flutter에 Firebase 한스푼 - GDG Flutter Festival

More Related Content

Similar to [GDG 대전] Flutter에 Firebase 한스푼 - GDG Flutter Festival (12)

More from DEVELOPER.NET (11)

[GDG 대전] Flutter에 Firebase 한스푼 - GDG Flutter Festival