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

Transcript

1. FirebaseͰ
   θϩ͔ΒΞϓϦΛ࡞Δ
   
   
   Flutter Meetup Tokyo #4
   
   pixiv.inc
   @consomme72 / Tadashi Yamazaki
   

   View Slide

2. ࣗݾ঺հ
   
   
   ࢁ࡚ ਖ਼ / Tadashi Yamazaki
   Twitter: @consomme72
   ϐΫγϒגࣜձࣾ
   ΫϦΤΠλʔࣄۀ෦
   AndroidΞϓϦΤϯδχΞ
   

   View Slide

3. BOOTH
   
   
   ಉਓࢽɺάοζɺ
   ΞΫηαϦʔͳͲΛ
   खܰʹൢചͰ͖ΔαʔϏε
   ※ٕज़ॻଟ਺ൢചதʂ
   

   View Slide

4. 
   
   ࠷ۙձࣾͰ
   FlutterΛ࢖͍ͬͯΔͷͰ
   ஌ݟڞ༗
   

   View Slide

5. 
   
   Flutter x Firebase
   

   View Slide

6. https://github.com/flutter/plugins/blob/master/FlutterFire.md
   
   
   

   View Slide

7. 
   
   ؆қTumblrతΞϓϦΛ࡞Δ
   

   View Slide

8. 
   
   Setup Firebase
   

   View Slide

9. 
   
   ͍͍ͩͨެࣜʹॻ͍ͯ͋ΔͷͰ
   ཁ఺͚ͩ
   https://codelabs.developers.google.com/codelabs/flutter-firebase/
   

   View Slide

10. https://console.firebase.google.com/
    
    
    

    View Slide

11. iOS/Android྆ํͷઃఆΛߦ͏
    
    
    

    View Slide

12. Android
    
    
    ΞϓϦΛొ࿥͢Δࡍʹ
    σόοάkeystoreͷSHA-1Λొ࿥
    ʢGoogleAuthͰඞཁʣ
    

    View Slide

13. Android
    
    
    google-services.jsonɹΛ
    appҎԼʹ഑ஔ
    

    View Slide

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'
    

    View Slide

15. iOS
    
    
    ී௨ʹόϯυϧIDΛهೖ
    

    View Slide

16. iOS
    
    
    $ open ios/Runner.xcworkspace
    ͰXCodeΛىಈͯ͠
    RunnerσΟϨΫτϦʹ
    GoogleService-Info.plistɹΛ഑ஔ
    

    View Slide

17. • Firebase AuthenticationʢϢʔβʔೝূʣ
    • Google AuthenticationʢGoogleೝূʣ
    • Cloud Firestoreʢσʔλϕʔεʣ
    • Cloud Storageʢը૾อଘʣ
    
    
    ࠓճ࢖͏ػೳ
    

    View Slide

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
    

    View Slide

19. 
    
    Firebase Authentication
    

    View Slide

20. 
    
    Firebase Console Ͱ
    ࢖͍͍ͨೝূํࣜΛ
    ༗ޮʹ͓ͯ͘͠
    ࣄલઃఆ
    

    View Slide

21. 
    
    CFBundleURLTypes
    
    
    CFBundleTypeRole
    Editor
    CFBundleURLSchemes
    
    com.googleusercontent.apps.${hoge}
    
    
    
    iOS : Info.plist ʹ௥ه
    

    View Slide

22. 
    
    
    
    
    
    …
    REVERSED_CLIENT_ID
    com.googleusercontent.apps.${hoge}
    …
    
    
    GoogleServices-Info.plist ͔Βίϐϖ
    

    View Slide

23. 
    
    class _AuthScreenState extends State {
    final GoogleSignIn _googleSignIn = new GoogleSignIn(
    scopes: [
    'email'
    ]
    );
    final FirebaseAuth _firebaseAuth = FirebaseAuth.instance;
    Future _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;
    }
    

    View Slide

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()),
    )));
    },
    

    View Slide

25. 
    
    Firebase Cloud Storage
    

    View Slide

26. 
    
    Future _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;
    }
    …
    }
    

    View Slide

27. 
    
    Cloud Firestore
    

    View Slide

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 getPostList() {
    return postCollection.orderBy('order').snapshots();
    }
    …
    }
    FirestoreService::getList
    

    View Slide

29. 
    
    Future 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 data = post.toMap();
    await transaction.set(snapshot.reference, data);
    return data;
    };
    return Firestore.instance.runTransaction(handler).then((mapData) {
    return Post.fromMap(mapData);
    });
    }
    FirestoreService::createPost
    

    View Slide

30. 
    
    Future 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
    

    View Slide

31. 
    
    StreamSubscription postSubscription;
    @override
    void initState() {
    super.initState();
    _posts = new List();
    postSubscription?.cancel();
    postSubscription = db.getPostList().listen((QuerySnapshot snapshot) {
    List posts = snapshot.documents.map((snapshot) => Post.fromMap(snapshot.data)).toList();
    setState(() {
    _posts = posts;
    });
    });
    }
    getList
    

    View Slide

32. 
    
    Demo
    

    View Slide

33. 
    
    Tips?
    

    View Slide

34. 
    
    υϝΠϯࢦఆͰ
    Create
    flutter create —org ${domain}
    ※Tips
    -i ͰiOSͷݴޠࢦఆ
    -a ͰAndroidͷݴޠࢦఆ
    $ flutter create \
    --org "net.pixiv.flutter" \
    -i swift \
    -a kotlin \
    pixiv-flutter
    

    View Slide

35. 
    
    Multidex͕
    ඞཁ
    Firebaseͷplugin͕
    ΊͬͪΌϝιου਺ଟ͍ͷͰ
    MultidexͷઃఆͨͿΜඞਢ
    android {
    …
    defaultConfig {
    multiDexEnabled true
    }
    …
    }
    

    View Slide

36. • αʔόΛ༻ҙ͠ͳ͍͍ͯ͘ͷ͸ΞϓϦΤϯδχΞͱָͯ͠
    • Plugin͕ἧ͍ͬͯΔͷͰਂ͘ߟ͑ͣʹ࣮૷Ͱ͖Δ
    • ઃఆΛ๨ΕΔͱϋϚΔͷͰυΩϡϝϯτ͸͔ͬ͠ΓಡΉ
    • iOSͱAndroidͰผͷઃఆΛ͢Δ৔߹΋ଟ͍
    • ΤϥʔϩάͩͱԿ͕͓͔͍͠ͷ͔શવΘ͔Βͳ͍
    • ެࣜGithub΍StackOverflowΛۦ࢖͢Δ
    
    
    ·ͱΊ
    

    View Slide

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
    

    View Slide

38. 
    
    Thanks!
    https://github.com/consomme/sample-board-flutter
    

    View Slide