ʲOnlineʳFlutter Meetup 2020.07.14 ਆݪ ݈Ұ (@korodroid) FlutterͰFirebaseͷػೳΛ׆༻͠Α͏

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)

•Firebaseͷศརػೳ •Flutter+Firebaseͷ͸͡Ίํ •[ຊ୊]Ϣʔεέʔεʴ։ൃTips •࠷৽τϐοΫ Introduction

mBaaS = mobile Backend as a Service GoogleӡӦͷmBaaS

What’s Firebase? ※ग़య: FirebaseެࣜαΠτ(Ҏ߱εϥΠυ΋ಉ༷)

• ೝূ • Ϋϥ΢υ࿈ܞ • Ϋϥογϡϩά • සग़ػೳͷ։ൃޮ཰޲্ Firebase Authentication Cloud Firestore Firebase Crashlytics [So many features…] ϞόΠϧ։ൃऀ͔ΒݟͨFirebaseͷศརػೳ

[ೝূ]Firebase Authentication ෳࡶͳೝূॲཧΛόοΫΤϯυͱ؆୯ʹ౷߹Մೳ

[Ϋϥ΢υ࿈ܞ]Cloud Firestore খճΓͷར͘Ϋϥ΢υσʔλϕʔε(NoSQL)

[Ϋϥογϡϩά]Firebase Crashlytics ϦΞϧλΠϜͷΫϥογϡϨϙʔτπʔϧ

Flutter+Firebaseͷ͸͡Ίํ

؀ڥߏங •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

•Step4. Firebase؀ڥઃఆ(ར༻͢Δػೳʹ߹Θͤͯ) ؀ڥߏங Firebase Authentication Cloud Firestore

•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

[Tips]FlutterFire https://firebaseopensource.com/projects/firebaseextended/flutterfire/ όʔδϣϯ৘ใˍϓϥοτϑΥʔϜରԠঢ়گ

Flutter+FirebaseͷϢʔεέʔεɾ։ൃTips

ToDo؅ཧΞϓϦ

Ϣʔεέʔεᶃೝূ(Authentication) •طଘΞΧ΢ϯτ࿈ܞΛ༰қʹ࣮ݱ •ϩάΠϯͳ͠Ͱ΋ར༻Մೳʹ •ೝূ৘ใΛҰݩ؅ཧ͍ͨ͠

Frontend / Backend

ೝূϓϩόΠμຖʹ࠷దͳϓϥάΠϯΛબఆ 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]ඞཁͳೝূϓϩόΠμͷϓϥάΠϯ௥Ճ

[Frontend]Firebase+Googleೝূ(ྫ) final FirebaseAuth _firebaseAuth = FirebaseAuth.instance; final GoogleSignIn _googleSignIn = GoogleSignIn(); Future _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; }

[Tips][Backend]ೝূઃఆ ɹূ໌ॻϑΟϯΨʔϓϦϯτొ࿥ σόοά༻ɾϦϦʔε༻

Ϣʔεέʔεᶄσʔλ؅ཧ(Cloud Firestore) •Ϋϥ΢υόοΫΞοϓʹରԠ͍ͨ͠ •Android/iOS྆ରԠʹ͍ͨ͠ • ΦϑϥΠϯͰ΋࢖͍͍ͨ

Frontend / Backend

[Backend] σʔλߏ଄ͷઃܭ ϢʔβID ToDoσʔλ

[Backend] σʔλߏ଄ྫ

[Backend] collection / document / data collection document data →ྫ)ToDoσʔλn݅ →ྫ)ToDoσʔλ಺ͷϑΟʔϧυ →ྫ)ToDoσʔλ1݅

[Backend] collection / documentͷ஫ҙ఺ collection document collection document document collection document

[Backend] Firestore಺Ͱͷߏ଄(ྫ) ϢʔβID collection document ToDoσʔλ

[Frontend] σʔλWrite(ྫ) Future _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() }); }

[Frontend] σʔλWrite(ྫ) Future _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() }); }

[Frontend] σʔλRead(ྫ) Stream> _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(); }); }

[Frontend] σʔλRead(ྫ) Stream> _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(); }); }

[Tips][Backend] ϧʔϧઃఆ(ΞΫηε੍ޚ) ͋͘·Ͱྫ ೝূϢʔβͷΈSFBEXSJUFڐՄ ※ʮRule Playgroundʯ΋ಈ࡞γϛϡϨʔγϣϯʹ͓͢͢Ί

[Frontend] ΦϑϥΠϯରԠ Frontend Backend NoSQL Database ΦϑϥΠϯૢ࡞Մ ࣗಈಉظ

࠷৽τϐοΫ: Cloud Firestore %FW൛ /PU4UBCMF൛ ϦϦʔε #SFBLJOH$IBOHFT΋͋Γ ຯݟΛ࢝ΊΔ͘Β͍͕͓͢͢Ί

Conclusion (about Flutter+Firebase) •ΫϩεϓϥοτϑΥʔϜରԠͷ࠷ڧ૊Έ߹Θͤͷ̍ͭ •ࠓճ঺հͨ͠΋ͷҎ֎ʹ΋ັྗతͳػೳ͕ଟ਺ •Firebase׆༻Ͱු͍ͨ޻਺ΛUI/UXͳͲʹׂΓ౰ͯՄೳ

•[ຊൃදͷBackendࢹ఺ͷൃදεϥΠυ] Firebase Realtime Meetup https://bit.ly/3iNEDzD •[͓͢͢Ί]Codelabs - Firebase for Flutter https://codelabs.developers.google.com/codelabs/flutter-firebase/ Reference

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