【Online】Flutter Meetup / FlutterでFirebaseの機能を活用しよう #gdgtokyo #flutter_meetup_tokyo

【Online】Flutter Meetup(#gdgtokyo #flutter_meetup_tokyo)の発表資料です。
「FlutterでFirebaseの機能を活用しよう」

#gdgtokyo #flutter_meetup_tokyo #flutter

Transcript

1. ʲOnlineʳFlutter Meetup 2020.07.14 ਆݪ ݈Ұ (@korodroid) FlutterͰFirebaseͷػೳΛ׆༻͠Α͏
2. About me •Mobile App Development •Speeches (e.g. 8 International confs.) •Writings (e.g. 5 Dev Books) •[Official] Evangelist at NTT TechnoCross •[Private] iplatform.org Kenichi Kambara (@korodroid) 
3. •Firebaseͷศརػೳ •Flutter+Firebaseͷ͸͡Ίํ •[ຊ୊]Ϣʔεέʔεʴ։ൃTips •࠷৽τϐοΫ Introduction 
4. mBaaS = mobile Backend as a Service GoogleӡӦͷmBaaS 
5. What’s Firebase? ※ग़య: FirebaseެࣜαΠτ(Ҏ߱εϥΠυ΋ಉ༷) 
6. • ೝূ • Ϋϥ΢υ࿈ܞ • Ϋϥογϡϩά • සग़ػೳͷ։ൃޮ཰޲্ Firebase Authentication Cloud Firestore Firebase Crashlytics [So many features…]  ϞόΠϧ։ൃऀ͔ΒݟͨFirebaseͷศརػೳ
7. [ೝূ]Firebase Authentication  ෳࡶͳೝূॲཧΛόοΫΤϯυͱ؆୯ʹ౷߹Մೳ
8. [Ϋϥ΢υ࿈ܞ]Cloud Firestore  খճΓͷར͘Ϋϥ΢υσʔλϕʔε(NoSQL)
9. [Ϋϥογϡϩά]Firebase Crashlytics  ϦΞϧλΠϜͷΫϥογϡϨϙʔτπʔϧ
10.  Flutter+Firebaseͷ͸͡Ίํ
11.  ؀ڥߏங •Step1. FlutterΞϓϦͷ։ൃ؀ڥ(IDE or ΤσΟλ౳) •Step2. FirebaseϩάΠϯ&ϓϩδΣΫτ࡞੒(Webϒϥ΢β) •https://firebase.google.com/ •Step3. FirebaseͷϓϩδΣΫτઃఆ •Android/iOSΞϓϦͷొ࿥(Android:ύοέʔδ໊ɺiOS: όϯυϧID) •ߏ੒ϑΝΠϧͷऔಘ( : google-services.jsonɺ : GoogleService-Info.plist) •↑ϑΝΠϧͷ഑ஔ( : app/android഑Լ΁ɺ : Runner/Runner഑Լ΁) •ৄࡉ͸ͪ͜Β: https://firebase.google.com/docs/flutter/setup?hl=ja
12.  •Step4. Firebase؀ڥઃఆ(ར༻͢Δػೳʹ߹Θͤͯ) ؀ڥߏங Firebase Authentication Cloud Firestore
13.  •Step5. FlutterFireϓϥάΠϯͷ௥Ճˠimport௥Ճ(*.dart) ؀ڥߏங dependencies: flutter: sdk: flutter # Firebase Core firebase_core: ^0.4.5 # e.g. Firebase Authentication firebase_auth: ^0.16.1 # e.g. Cloud Firestore cloud_firestore: ^0.13.7 pubspec.yaml
14.  [Tips]FlutterFire https://firebaseopensource.com/projects/firebaseextended/flutterfire/ όʔδϣϯ৘ใˍϓϥοτϑΥʔϜରԠঢ়گ
15. Flutter+FirebaseͷϢʔεέʔεɾ։ൃTips
16. ToDo؅ཧΞϓϦ 
17. Ϣʔεέʔεᶃೝূ(Authentication) •طଘΞΧ΢ϯτ࿈ܞΛ༰қʹ࣮ݱ •ϩάΠϯͳ͠Ͱ΋ར༻Մೳʹ •ೝূ৘ใΛҰݩ؅ཧ͍ͨ͠ 
18. Frontend / Backend 
19. ೝূϓϩόΠμຖʹ࠷దͳϓϥάΠϯΛબఆ  dependencies: # Firebase Authentication firebase_auth: ^0.15.5+3 # for Google Signed-In google_sign_in: ^4.2.0 # for Facebook Authentication flutter_facebook_login: ^3.0.0 # for Twitter Authentication flutter_twitter_login: ^1.1.0 # for Apple Authentication apple_sign_in: ^0.1.0 pubspec.yaml ↑ࣗ෼͕࢖͍ͬͯΔ΋ͷ [Frontend]ඞཁͳೝূϓϩόΠμͷϓϥάΠϯ௥Ճ
20. [Frontend]Firebase+Googleೝূ(ྫ)  final FirebaseAuth _firebaseAuth = FirebaseAuth.instance; final GoogleSignIn _googleSignIn = GoogleSignIn(); Future<FirebaseUser> _signInWithGoogle() async { final GoogleSignInAccount googleUser = await _googleSignIn.signIn(); final GoogleSignInAuthentication googleAuth = await googleUser.authentication; final AuthCredential credential = GoogleAuthProvider.getCredential( idToken: googleAuth.idToken, accessToken: googleAuth.accessToken, ); final FirebaseUser user = (await _firebaseAuth.signInWithCredential(credential)).user; return user; }
21. [Tips][Backend]ೝূઃఆ  ɹূ໌ॻϑΟϯΨʔϓϦϯτొ࿥
    σόοά༻ɾϦϦʔε༻
22. Ϣʔεέʔεᶄσʔλ؅ཧ(Cloud Firestore) •Ϋϥ΢υόοΫΞοϓʹରԠ͍ͨ͠ •Android/iOS྆ରԠʹ͍ͨ͠ • ΦϑϥΠϯͰ΋࢖͍͍ͨ 
23.  Frontend / Backend
24. [Backend] σʔλߏ଄ͷઃܭ ϢʔβID ToDoσʔλ 
25.  [Backend] σʔλߏ଄ྫ
26.  [Backend] collection / document / data collection document data →ྫ)ToDoσʔλn݅ →ྫ)ToDoσʔλ಺ͷϑΟʔϧυ →ྫ)ToDoσʔλ1݅
27. [Backend] collection / documentͷ஫ҙ఺ collection document collection document document collection document 
28. [Backend] Firestore಺Ͱͷߏ଄(ྫ) ϢʔβID collection document  ToDoσʔλ
29. [Frontend] σʔλWrite(ྫ)  Future<void> _updateData(Todo todo, String userId) { return Firestore.instance .collection(COLLECTION_USERS_GROUP) .document(userId) .collection(COLLECTION_USERS_DATA) .document() .setData({ COLUMN_ICON_ID: todo.iconId, COLUMN_NOTIFICATION_ID: todo.notificationId, COLUMN_TITLE: todo.title, COLUMN_CONTENT: todo.content, COLUMN_DATE: todo.date, COLUMN_ISSTARRED: todo.isStarred, COLUMN_ISDONE: todo.isDone, COLUMN_ISREMIND: todo.isRemind, COLUMN_CREATEDAT: FieldValue.serverTimestamp() }); }
30. [Frontend] σʔλWrite(ྫ)  Future<void> _updateData(Todo todo, String userId) { return Firestore.instance .collection(COLLECTION_USERS_GROUP) .document(userId) .collection(COLLECTION_USERS_DATA) .document() .setData({ COLUMN_ICON_ID: todo.iconId, COLUMN_NOTIFICATION_ID: todo.notificationId, COLUMN_TITLE: todo.title, COLUMN_CONTENT: todo.content, COLUMN_DATE: todo.date, COLUMN_ISSTARRED: todo.isStarred, COLUMN_ISDONE: todo.isDone, COLUMN_ISREMIND: todo.isRemind, COLUMN_CREATEDAT: FieldValue.serverTimestamp() }); }
31. [Frontend] σʔλRead(ྫ)  Stream<List<Todo>> _fetchData(String userId) { return Firestore.instance .collection(COLLECTION_USERS_GROUP) .document(userId) .collection(COLLECTION_USERS_DATA) .snapshots() .map((snapshot) { return snapshot.documents.map((docs) { return Todo( id: docs.documentID, iconId: docs.data[COLUMN_ICON_ID], notificationId: docs.data[COLUMN_NOTIFICATION_ID], title: docs.data[COLUMN_TITLE], content: docs.data[COLUMN_CONTENT], date: calculateDate(docs.data[COLUMN_DATE]), isStarred: docs.data[COLUMN_ISSTARRED], isDone: docs.data[COLUMN_ISDONE], isRemind: docs.data[COLUMN_ISREMIND], ); }).toList(); }); }
32. [Frontend] σʔλRead(ྫ)  Stream<List<Todo>> _fetchData(String userId) { return Firestore.instance .collection(COLLECTION_USERS_GROUP) .document(userId) .collection(COLLECTION_USERS_DATA) .snapshots() .map((snapshot) { return snapshot.documents.map((docs) { return Todo( id: docs.documentID, iconId: docs.data[COLUMN_ICON_ID], notificationId: docs.data[COLUMN_NOTIFICATION_ID], title: docs.data[COLUMN_TITLE], content: docs.data[COLUMN_CONTENT], date: calculateDate(docs.data[COLUMN_DATE]), isStarred: docs.data[COLUMN_ISSTARRED], isDone: docs.data[COLUMN_ISDONE], isRemind: docs.data[COLUMN_ISREMIND], ); }).toList(); }); }
33.  [Tips][Backend] ϧʔϧઃఆ(ΞΫηε੍ޚ) ͋͘·Ͱྫ ೝূϢʔβͷΈSFBEXSJUFڐՄ ※ʮRule Playgroundʯ΋ಈ࡞γϛϡϨʔγϣϯʹ͓͢͢Ί
34. [Frontend] ΦϑϥΠϯରԠ Frontend Backend NoSQL Database ΦϑϥΠϯૢ࡞Մ ࣗಈಉظ 
35.  ࠷৽τϐοΫ: Cloud Firestore %FW൛ /PU
    4UBCMF൛
    
    ϦϦʔε #SFBLJOH
    $IBOHFT΋͋Γ
    ຯݟΛ࢝ΊΔ͘Β͍͕͓͢͢Ί
36. Conclusion (about Flutter+Firebase) •ΫϩεϓϥοτϑΥʔϜରԠͷ࠷ڧ૊Έ߹Θͤͷ̍ͭ •ࠓճ঺հͨ͠΋ͷҎ֎ʹ΋ັྗతͳػೳ͕ଟ਺ •Firebase׆༻Ͱු͍ͨ޻਺ΛUI/UXͳͲʹׂΓ౰ͯՄೳ 
37. •[ຊൃදͷBackendࢹ఺ͷൃදεϥΠυ] Firebase Realtime Meetup https://bit.ly/3iNEDzD •[͓͢͢Ί]Codelabs - Firebase for Flutter https://codelabs.developers.google.com/codelabs/flutter-firebase/ Reference 
38. Please let me know if you have any requests such as technical speeches, technical writings and so on. Facebook:http://fb.com/kanbara.kenichi Twitter:@korodroid LinkedIn:http://www.linkedin.com/in/korodroid Thank you so much