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

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

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

#gdgtokyo #flutter_meetup_tokyo #flutter

97a7f7899e0df28c3636b8d44bbe6578?s=128

Kenichi Kambara

July 14, 2020
Tweet

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൛ /PU4UBCMF൛  ϦϦʔε #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