Upgrade to Pro — share decks privately, control downloads, hide ads and more …

【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

Kenichi Kambara

July 14, 2020
Tweet

More Decks by Kenichi Kambara

Other Decks in Technology

Transcript

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

    View full-size slide

  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)

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  6. • ೝূ
    • Ϋϥ΢υ࿈ܞ
    • Ϋϥογϡϩά
    • සग़ػೳͷ։ൃޮ཰޲্
    Firebase Authentication
    Cloud Firestore
    Firebase Crashlytics
    [So many features…]

    ϞόΠϧ։ൃऀ͔ΒݟͨFirebaseͷศརػೳ

    View full-size slide

  7. [ೝূ]Firebase Authentication

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

    View full-size slide

  8. [Ϋϥ΢υ࿈ܞ]Cloud Firestore

    খճΓͷར͘Ϋϥ΢υσʔλϕʔε(NoSQL)

    View full-size slide

  9. [Ϋϥογϡϩά]Firebase Crashlytics

    ϦΞϧλΠϜͷΫϥογϡϨϙʔτπʔϧ

    View full-size slide


  10. Flutter+Firebaseͷ͸͡Ίํ

    View full-size slide


  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

    View full-size slide


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

    View full-size slide


  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

    View full-size slide


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

    View full-size slide

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

    View full-size slide

  16. ToDo؅ཧΞϓϦ

    View full-size slide

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

    View full-size slide

  18. Frontend / Backend

    View full-size slide

  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]ඞཁͳೝূϓϩόΠμͷϓϥάΠϯ௥Ճ

    View full-size slide

  20. [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;
    }

    View full-size slide

  21. [Tips][Backend]ೝূઃఆ

    ɹূ໌ॻϑΟϯΨʔϓϦϯτొ࿥
    σόοά༻ɾϦϦʔε༻

    View full-size slide

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

    View full-size slide


  23. Frontend / Backend

    View full-size slide

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

    View full-size slide


  25. [Backend] σʔλߏ଄ྫ

    View full-size slide


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

    View full-size slide

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

    View full-size slide

  28. [Backend] Firestore಺Ͱͷߏ଄(ྫ)
    ϢʔβID
    collection
    document

    ToDoσʔλ

    View full-size slide

  29. [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()
    });
    }

    View full-size slide

  30. [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()
    });
    }

    View full-size slide

  31. [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();
    });
    }

    View full-size slide

  32. [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();
    });
    }

    View full-size slide


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

    View full-size slide

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

    View full-size slide


  35. ࠷৽τϐοΫ: Cloud Firestore
    %FW൛ /PU4UBCMF൛

    ϦϦʔε
    #SFBLJOH$IBOHFT΋͋Γ
    ຯݟΛ࢝ΊΔ͘Β͍͕͓͢͢Ί

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide