[Droidcon EMEA]Effective Flutter Apps Development with Firebase & Tips

It is my presentation file on DroidconEMEA 2020.

#Droidcon
#dcEMEA
#Flutter
#mobile

Transcript

1. Effective Flutter Apps Development with Firebase & Tips Kenichi Kambara (@korodroid) 9 October, 2020
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) 
3. •Introduction •Get Started with Flutter&Firebase •Use Cases & Development Tips •Development Acceleration Overview
4. mBaaS by Google [mobile Backend as a Service] 
5. What’s Firebase? ref. Firebase Official Site(https://firebase.google.com) 
6. • Authentication • Cloud Integration • Crash log • and others…  Features mobile developers want
7. Firebase Authentication Cloud Firestore Firebase Crashlytics [So many features…]  • Authentication • Cloud Integration • Crash log • and others… Features Firebase provide
8. Firebase Authentication  Easily add Sign-In feature to our Apps
9. Cloud Firestore  Flexible and Scalable (NoSQL)
10. Firebase Crashlytics  Crash reporting tool
11. Get Started with Flutter&Firebase
12. Setup (Step 1/5) •Install Development Tools (Android Studio/VSCode/Emacs) ref. https://firebase.google.com/docs/flutter/setup 
13. Setup (Step 2/5) •Install Flutter SDK git clone https://github.com/flutter/flutter.git •Install Flutter & Dart Plugins Example on Android Studio 
14. •Login to Firebase Console & Create a Firebase Project •https://firebase.google.com/ •Project Settings with Firebase •Register the Android/iOS app (Android:Package nameɺiOS: Bundle ID) •Get a configuration file( : google-services.jsonɺ : GoogleService-Info.plist) •Copy the file ( : into app/androidɺ : into Runner/Runner)  ref: https://firebase.google.com/docs/flutter/setup?hl=ja Setup (Step 3/5)
15. •Configuration for each feature  Setup (Step 4/5) Firebase Authentication Cloud Firestore
16. •Add FlutterFire plugin -> add import (*.dart)  Setup (Step 5/5) pubspec.yaml ref: https://firebase.google.com/docs/flutter/setup?#add_flutterfire_plugins 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
17.  [Tips]FlutterFire https://firebaseopensource.com/projects/firebaseextended/flutterfire/ Platform Support info for each Firebase feature
18. Use Cases & Development Tips
19. ToDo app 
20.  %FNP
21. Use Case 1: Authentication (Firebase Authentication) •Integration with existing account •Service available without login •Centralized management of User Credials 
22. Frontend / Backend 
23. Choosing the appropriate plugin for each auth  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 <- Definition in my app [Frontend]Add each Auth Provider plugin
24. [Frontend]Google Authentication (e.g.)  final FirebaseAuth _auth = FirebaseAuth.instance; final GoogleSignIn _googleSignIn = GoogleSignIn(); Future<FirebaseUser> 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 _auth.signInWithCredential(credential)).user; return user; }
25. Tips [Backend]Authentication Settings  ɹ$FSUJpDBUF
    'JOHFSQSJOU
    GPS
    %FCVH3FMFBTF
26. Use case 2: Data Management(Cloud Firestore) •Support cloud backup •Support Android&iOS • Support offline 
27.  Frontend / Backend
28.  %FNP
29.  %FNP
30. [Backend] Data Structure on Cloud Firestore User ID [n] Todo Data [m] 
31.  [Backend] Data Structure (e.g.)
32.  [Backend] Collection / Document / Data collection document data ->ToDo Data: m ->ToDo Data: 1 ->Each column for ToDo Data: 1
33. [Backend] Important notice about Collection & Document collection document collection document document collection document 
34. [Backend] Data Structure on Cloud Firestore User ID ToDo Data collection document 
35. [Frontend] Writing Data (e.g.)  Future<void> _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() }); }
36.  Future<void> _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() }); } [Frontend] Writing Data (e.g.)
37.  Stream<List<Todo>> _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(); }); } [Frontend] Reading Data (e.g.)
38.  Stream<List<Todo>> _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(); }); } [Frontend] Reading Data (e.g.)
39.  [Backend] Rules (Access Control)
40.  [Backend] Rules (Access Control) ྫ ࢦఆ೔·Ͱ͸ FH
    3FBE8SJUF
    1FSNJTTJPO
    
    GPS
    "VUIPSJ[FE
    6TFS FH
    3FBE8SJUF
    1FSNJTTJPO
    CFGPSF
    UIF
    TQFDJpFE
    EBUF
41. Tips [Backend] Rules Playground  •get •create Authenticated or not •update •delete
42. [Frontend] Offline Support FrontEnd BackEnd NoSQL Database Offline Support Auto Sync 
43. Development Acceleration
44. • Avoiding boilerplates • Utilizing useful templates Speed Up for our Coding
45.  class MainPage extends StatelessWidget { @override Widget build(BuildContext context) { return Container(); } } e.g. Stateless Widget
46. e.g. Stateful Widget  class SubPage extends StatefulWidget { @override _SubPageState createState() => _SubPageState(); } class _SubPageState extends State<SubPage> { @override Widget build(BuildContext context) { return Container(); } }
47.  class AnimPage extends StatefulWidget { @override _AnimPageState createState() => _AnimPageState(); } class _AnimPageState extends State<AnimPage> with SingleTickerProviderStateMixin { AnimationController _controller; @override void initState() { _controller = AnimationController(vsync: this); super.initState(); } @override void dispose() { _controller.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return Container(); } } e.g. Animation
48. So many boilerplates Any Solutions?
49.  Live Templates
50.  stless/stfull/stanim+[Tab] Key Live Templates %FNP
51. Only 8 templates Any other solutions?
52.  Flutter Snippets
53.  Flutter Snippets
54. One more…
55. To improve UI & UX 
56.  Select Widget & ALT+ENTER Code Assistant Feature %FNP
57. Conclusion (about Flutter+Firebase) •One of the most greatest approach on Cross platform •So many attractive features besides this talk •Can be allocated the extra cost for improving UI/UX 
58. •Codelabs - Firebase for Flutter https://codelabs.developers.google.com/codelabs/flutter-firebase/ • Firebase Authentication https://firebase.google.com/docs/auth • Cloud Firestore https://firebase.google.com/docs/firestore Reference 
59. 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