Firebaseでゼロからアプリを作る / Make app from scratch with Firebase

Transcript

1. FirebaseͰ θϩ͔ΒΞϓϦΛ࡞Δ
    Flutter Meetup Tokyo #4  pixiv.inc @consomme72 / Tadashi Yamazaki
2. ࣗݾ঺հ
    ࢁ࡚ ਖ਼ / Tadashi Yamazaki Twitter: @consomme72 ϐΫγϒגࣜձࣾ ΫϦΤΠλʔࣄۀ෦ AndroidΞϓϦΤϯδχΞ
3. BOOTH
    ಉਓࢽɺάοζɺ ΞΫηαϦʔͳͲΛ खܰʹൢചͰ͖ΔαʔϏε ※ٕज़ॻଟ਺ൢചதʂ
4. 
    ࠷ۙձࣾͰ FlutterΛ࢖͍ͬͯΔͷͰ ஌ݟڞ༗
5. 
    Flutter x Firebase
6. https://github.com/flutter/plugins/blob/master/FlutterFire.md
   
7. 
    ؆қTumblrతΞϓϦΛ࡞Δ
8. 
    Setup Firebase
9. 
    ͍͍ͩͨެࣜʹॻ͍ͯ͋ΔͷͰ ཁ఺͚ͩ https://codelabs.developers.google.com/codelabs/flutter-firebase/
10. https://console.firebase.google.com/
    
11. iOS/Android྆ํͷઃఆΛߦ͏
    
12. Android
     ΞϓϦΛొ࿥͢Δࡍʹ σόοάkeystoreͷSHA-1Λొ࿥ ʢGoogleAuthͰඞཁʣ
13. Android
     google-services.jsonɹΛ appҎԼʹ഑ஔ
14. Android
     app/build.gradle build.gradle buildscript { … dependencies { … classpath 'com.google.gms:google-services:3.2.1' … } } apply plugin: 'com.google.gms.google-services'
15. iOS
     ී௨ʹόϯυϧIDΛهೖ
16. iOS
     $ open ios/Runner.xcworkspace ͰXCodeΛىಈͯ͠ RunnerσΟϨΫτϦʹ GoogleService-Info.plistɹΛ഑ஔ
17. • Firebase AuthenticationʢϢʔβʔೝূʣ • Google AuthenticationʢGoogleೝূʣ • Cloud Firestoreʢσʔλϕʔεʣ • Cloud Storageʢը૾อଘʣ
     ࠓճ࢖͏ػೳ
18. 
     flutter: sdk: flutter # For Firebase firebase_auth: ^0.5.19 google_sign_in: ^3.0.5 cloud_firestore: ^0.7.4 firebase_storage: ^1.0.1 pubspec.yaml
19. 
     Firebase Authentication
20. 
     Firebase Console Ͱ ࢖͍͍ͨೝূํࣜΛ ༗ޮʹ͓ͯ͘͠ ࣄલઃఆ
21. 
     <key>CFBundleURLTypes</key> <array> <dict> <key>CFBundleTypeRole</key> <string>Editor</string> <key>CFBundleURLSchemes</key> <array> <string>com.googleusercontent.apps.${hoge}</string> </array> </dict> </array> iOS : Info.plist ʹ௥ه
22. 
     <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/ PropertyList-1.0.dtd"> <plist version="1.0"> <dict> … <key>REVERSED_CLIENT_ID</key> <string>com.googleusercontent.apps.${hoge}</string> … </dict> </plist> GoogleServices-Info.plist ͔Βίϐϖ
23. 
     class _AuthScreenState extends State<AuthScreen> { final GoogleSignIn _googleSignIn = new GoogleSignIn( scopes: [ 'email' ] ); final FirebaseAuth _firebaseAuth = FirebaseAuth.instance; Future<FirebaseUser> _signIn() async { GoogleSignInAccount account = await _googleSignIn.signIn(); GoogleSignInAuthentication authentication = await account.authentication; FirebaseUser user = await _firebaseAuth.signInWithGoogle( accessToken: authentication.accessToken, idToken: authentication.idToken, ); return user; }
24. 
     child: new FlatButton( child: const Text('Sign in'), color: Colors.blue, textColor: Colors.white, onPressed: () { _signIn() .then((user) { Navigator.pushReplacement(context, new MaterialPageRoute( builder: (context) => new TimelineScreen() )); } ) .catchError((e) => Scaffold.of(context).showSnackBar(new SnackBar( content: new Text(e.toString()), ))); },
25. 
     Firebase Cloud Storage
26. 
     Future<void> _send(String body) async { Uri imageUrl; int time = DateTime.now().millisecondsSinceEpoch; String uuid = Uuid().v4(); if (_image != null) { StorageUploadTask uploadTask = FirebaseStorage.instance .ref() .child('image') .child(uuid + '-' + time.toString()) .putFile(_image); imageUrl = (await uploadTask.future).downloadUrl; } … }
27. 
     Cloud Firestore
28. 
     import 'dart:async'; import 'package:cloud_firestore/cloud_firestore.dart'; import 'package:sampleboard/model/post.dart'; final CollectionReference postCollection = Firestore.instance.collection('posts'); class FirestoreService { Stream<QuerySnapshot> getPostList() { return postCollection.orderBy('order').snapshots(); } … } FirestoreService::getList
29. 
     Future<Post> createPost(String body, String image, int order) { final TransactionHandler handler = (Transaction transaction) async { final DocumentSnapshot snapshot = await transaction.get(postCollection.document()); final Post post = new Post(snapshot.documentID, body, image, order, 0); final Map<String, dynamic> data = post.toMap(); await transaction.set(snapshot.reference, data); return data; }; return Firestore.instance.runTransaction(handler).then((mapData) { return Post.fromMap(mapData); }); } FirestoreService::createPost
30. 
     Future<dynamic> updatePost(Post post) { final TransactionHandler handler = (Transaction transaction) async { final DocumentSnapshot snapshot = await transaction.get(postCollection.document(post.id)); await transaction.update(snapshot.reference, post.toMap()); return {'updated': true}; }; return Firestore.instance.runTransaction(handler).then((result) { return result['updated']; }); } FirestoreService::updatePost
31. 
     StreamSubscription<QuerySnapshot> postSubscription; @override void initState() { super.initState(); _posts = new List(); postSubscription?.cancel(); postSubscription = db.getPostList().listen((QuerySnapshot snapshot) { List<Post> posts = snapshot.documents.map((snapshot) => Post.fromMap(snapshot.data)).toList(); setState(() { _posts = posts; }); }); } getList
32. 
     Demo
33. 
     Tips?
34. 
     υϝΠϯࢦఆͰ Create flutter create —org ${domain} ※Tips -i ͰiOSͷݴޠࢦఆ -a ͰAndroidͷݴޠࢦఆ $ flutter create \ --org "net.pixiv.flutter" \ -i swift \ -a kotlin \ pixiv-flutter
35. 
     Multidex͕ ඞཁ Firebaseͷplugin͕ ΊͬͪΌϝιου਺ଟ͍ͷͰ MultidexͷઃఆͨͿΜඞਢ android { … defaultConfig { multiDexEnabled true } … }
36. • αʔόΛ༻ҙ͠ͳ͍͍ͯ͘ͷ͸ΞϓϦΤϯδχΞͱָͯ͠ • Plugin͕ἧ͍ͬͯΔͷͰਂ͘ߟ͑ͣʹ࣮૷Ͱ͖Δ • ઃఆΛ๨ΕΔͱϋϚΔͷͰυΩϡϝϯτ͸͔ͬ͠ΓಡΉ • iOSͱAndroidͰผͷઃఆΛ͢Δ৔߹΋ଟ͍ • ΤϥʔϩάͩͱԿ͕͓͔͍͠ͷ͔શવΘ͔Βͳ͍ • ެࣜGithub΍StackOverflowΛۦ࢖͢Δ
     ·ͱΊ
37. • Flutter Firestore example - Firebase Firestore CRUD with ListView - grokonez • https://grokonez.com/flutter/flutter-firestore-example-firebase-firestore-crud- operations-with-listview • Flutter Institute — Firebase Firestore • https://flutter.institute/firebase-firestore/
     References
38. 
     Thanks! https://github.com/consomme/sample-board-flutter