Flutterとfirebaseを使ってモバイルアプリに挑戦してみる

 Flutterとfirebaseを使ってモバイルアプリに挑戦してみる

Flutterとfirebaseを使ってモバイルアプリを作ろうとしている話。
サンプルコード
https://github.com/nasum/flutter_firebase_playground

1d42b38276c3d2c7cc931fa444c13488?s=128

Masaya Nasu

April 02, 2018
Tweet

Transcript

  1. FlutterͱfirebaseΛ ࢖ͬͯϞόΠϧΞϓϦ ʹ௅ઓͯ͠ΈΔ Firebase Japan User Group / meetup /

    3 ಹਢཧ໵
  2. ࣗݾ঺հ • ಹਢཧ໵
 ීஈ͸Railsͱ͔Ͱ͓࢓ࣄͯ͠·͢ • Twitter : @tomato360
 GitHub: @nasum

    • Vue.js͕޷͖
  3. ࢲͱfirebase

  4. ͪΐͬͱલʹগ͠৮ͬͯͨ https://speakerdeck.com/nasum/ electrondefirebasewoshi-tutemita-jia

  5. ࠷ֶۙͼ௚ͯ͠·͢ श࡞ɿMarkdownEditor https://spellnote.com/

  6. ৽͍͠ςʔϚΛ໛ࡧத

  7. Flutter

  8. Flutter • Google੡ • ϞόΠϧΞϓϦ։ൃϑϨʔϜϫʔΫ • ΫϩεϓϥοτϑΥʔϜ • Dartʢʂʁ

  9. Flutterͱfirebase͸͍͍૊Έ߹Θͤ
 ʢݸਓͷҙݟ • Flutter • ΫϩεϓϥοτϑΥʔϜ • firebase • αʔόϨε

    • ࠷খͷ΋ͷΛ࠷଎Ͱ࡞Εͦ͏ͳΠϝʔδ
  10. ࢖༻ײΛ୳ͬͯΈΔ

  11. firebase auth buildscript { repositories { google() jcenter() } dependencies

    { classpath 'com.android.tools.build:gradle:3.0.1' classpath 'com.google.gms:google-services:3.2.0' } } android/build.gradle
  12. firebase auth apply plugin: 'com.google.gms.google-services' android/app/build.gradle

  13. firebase auth import 'package:google_sign_in/google_sign_in.dart'; import 'package:firebase_auth/firebase_auth.dart'; lib/main.dart

  14. firebase auth final FirebaseAuth _auth = FirebaseAuth.instance; final GoogleSignIn _googleSignIn

    = new GoogleSignIn(); lib/main.dart
  15. firebase auth void _handleSignIn() async { GoogleSignInAccount googleUser = await

    _googleSignIn.signIn(); GoogleSignInAuthentication googleAuth = await googleUser.authentication; FirebaseUser siginUser = await _auth.signInWithGoogle( accessToken: googleAuth.accessToken, idToken: googleAuth.idToken, ); setState(() { user = siginUser; }); } lib/main.dart
  16. firebase auth if (user != null) { displayName = new

    Text(user.displayName); email = new Text(user.email); avator = new CircleAvatar(backgroundImage: new NetworkImage(user.photoUrl)); } lib/main.dart
  17. firebase auth

  18. ग़དྷͨը໘

  19. ͪΌΜͱAnalytics΋ಈ͘

  20. firebase auth • ඞཁͳϥΠϒϥϦ • google_sign_in
 https://pub.dartlang.org/packages/google_sign_in • firebase_auth
 https://pub.dartlang.org/packages/firebase_auth

    • ίʔυྫ • https://github.com/nasum/flutter_firebase_playground/ commit/66acc51fc6d67258dfb4b0194b3dcac72ff8992a
  21. firebase auth ࢖༻ײ • FirebaseUserͷΠϯελϯεΛ࡞Ε͹OK • JS൛ͱ࢖༻ײ͸ࣅ͍ͯΔ

  22. DartͷϥΠϒϥϦͷϖʔδ

  23. cloud firestore import ‘package:cloud_firestore/cloud_firestore.dart'; QuerySnapshot snapShot = await Firestore.instance.collection(‘memo').getDocuments(); Firestore.instance

    .collection('memo') .document() .setData({'text': _inputText}); lib/main.dart
  24. cloud firestore

  25. cloud firestore void _getDocument(List<Widget> list) async { QuerySnapshot snapShot =

    await Firestore.instance.collection('memo').getDocuments(); setState(() { snapShot.documents.forEach((DocumentSnapshot ds) { SizedBox box = new SizedBox( width: 300.0, height: 50.0, child: new Card(child: new Text(ds.data['text'])), ); list.add(box); }); }); } lib/main.dart
  26. ग़དྷͨը໘

  27. cloud firestore

  28. cloud firestore

  29. cloud firestore • ඞཁͳϥΠϒϥϦ • cloud_firestore
 https://pub.dartlang.org/packages/cloud_firestore • ίʔυྫ
 https://github.com/nasum/

    flutter_firebase_playground/commit/ 16960fb4ceafe0f1ed5bc85eb388a722e4739079
  30. cloud firestoreײ૝ • ࢖༻ײ͸JSͷͱࣅ͍ͯΔ • ࠷৽ͷ0.3.2Λ࢖͏ͱίϯύΠϧग़དྷͳ͍
 ʢཁௐࠪ • Ή͠ΖFlutterͷঢ়ଶ؅ཧͰۤ࿑ͨ͠

  31. ·ͱΊ • JSಉ༷ʹDart൛΋ָʹ࢖͑Δ • FlutterͱDartʹ׳Εͳͯۤ͘࿑ͨ͠ʢ׳Εͷ໰୊ • ΫϩεϓϥοτϑΥʔϜͱαʔόϨε͸࠷ڧͳؾ ͕͍ͯ͠Δ • ΞϓϦΛͭ͘Γ͍ͨਓʹ͓קΊ͍ͨ͠૊Έ߹Θͤ

  32. αϯϓϧίʔυ • https://github.com/nasum/flutter_firebase_playground