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

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

225a1d1ad7dad206b80479dd232639ed?s=47 consomme
August 28, 2018

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

225a1d1ad7dad206b80479dd232639ed?s=128

consomme

August 28, 2018
Tweet

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