GDSC Summer Hackathon Flutter + Firebase

1. Flutter + Firebase Speaker: Yuki Hirai GDSC Tokyo City University @yu_haruwolf
2. What is Firebase? Japan
3. **Firebase Features** • Firebase is a Backend-as-a-Service (BaaS). • Provides developers with a variety of tools and services to help them develop high-quality apps. • Backed by Google, Firebase is a platform that helps you quickly develop high-quality apps, grow your user base, and earn more money. ※Generated by Gemini
4. What is Firebase? • Mobile and Web application development platform from Google • Backend ◦ No need to build infrastructure • →Quick and easy backend setup
5. So…What is backend? • Parts that users don't see • Example ◦ Store datas ◦ Processing / Calculation ◦ Connect with other services
6. Hands-on Japan
7. Today’s tasks • https://firebase.google.com/codela bs/firebase-get-to-know-flutter • Create guest book for event ◦ Web ◦ Login feature ◦ Send comments feature
8. Steps 1. Download the sample code to get started 2. Setup the Firebase project a. Authentication b. Cloud Firestore 3. Configure Firebase to Flutter project a. Add dependencies b. Install FlutterFire CLI + Setting the environment variables c. Link the project 4. Add the login feature 5. Add the sending message feature 6. Add the reading message feature
9. Download the sample code to get started • Open the folder for hackathon on VS Code • Open the Terminal, run the following command git clone https://github.com/flutter/codelabs.git flutter-codelabs • Open flutter-codelabs/firebase-get-to-know-flutter/step_02 on VS Code • Select Chrome for target platform, run lib/main.dart
10. Setup the environment Japan
11. Setup the Firebase project • Access to https://console.firebase.google.com/ • “Create a project” • Give your project a nice name ◦ An ID that does not conflict with other projects in the world is automatically set (can be manually specified) • Google Analytics is off in this time
12. Enable authentication • Project overview pane > Build • Authentication > Get Started > Sign-in method > Email/Password > Enable > Save.
13. Enable Firestore • Build > Firestore Database > Create database • Start in test mode • Choose cloud firestore location
14. Install external libraries • To use Firebase with Flutter, we have to configure dependencies and install external packages • Manage dependencies with pubspec.yaml • It can be managed with commands • To add the dependencies, run the following command flutter pub add firebase_core firebase_auth cloud_firestore provider firebase_ui_auth • To make easier to connect Flutter and Firebase, install the FluterFire CLI dart pub global activate flutterfire_cli
15. Warning on Windows • Search “variables” or “変数” from Start menu.
16. Install Firebase CLI • MacOS / Linux ◦ Just run the following command curl -sL https://firebase.tools | bash • Windows ◦ Install Node.js ◦ Run the following command npm install -g firebase-tools * It recommend to restart Visual Studio Code to apply the changes
17. Initialize Firebase CLI • Login on Firebase CLI firebase login • If you use Windows and encounter the error, the following command may work. cmd /c firebase login • Follow the instructions • If the login is successful, the screen will appear.→
18. Configure your apps • Run the following command flutterfire configure • Select the Firebase project • Select the platform which you want to support (Space to toggle, Enter to confirm) ◦ In this workshop, we select web only.
19. Develop the app! Japan
20. Create application state • Create a new file app_state.dart • app_state.dart ◦ Manage firebase api ▪ Authentication ▪ Firestore ◦ Notify changes to other widgets • Source→https://firebase.google.com/codel abs/firebase-get-to-know-flutter#4
21. Enable main.dart to receive changes • It’s needed to change main() in main.dart to get change notification
22. Integrate the authentication flow • main.dart ◦ Add GoRoute to add screens for authentication • What is GoRoute…? ◦ →https://zenn.dev/rmassu/articles/99365c37999ac6 • home_page.dart ◦ Change the button depends on ApplicationState
23. Let’s try to register and login!
24. Write message to Firestore (1/1) • Create a new file “guest_book.dart” ◦ Message Field ◦ Send Button • Edit “home_page.dart” ◦ Add “Discussion” section ◦ Add “GuestBook”(from guest_book.dart) widget
25. Write message to Firestore (2/2) • Edit “app_state.dart” ◦ Add “addMessageToGuestBook” function • Edit “home_page.dart” ◦ Make accessible to ApplicationState ◦ Change show / hide depends on loggedIn ◦ Call addMessageToGuestBook in app_state.dart
26. Let’s try to send the message!
27. Read messages • Define data structure of GuestBookMessage ◦ Variables ◦ Functions(In this case, there is no function.) • Edit “app_state.dart” ◦ Make variables for guest book messages ◦ Listen changes on Firestore • Edit “guest_book.dart” ◦ Make variables for guest book messages ◦ Show messages with for-loop
28. Finish! 🙌
29. Remaining steps in codelab • Setup security rules ◦ Limit read and write • Create yes or no response feature • Next→https://firebase.google.com/codelabs/firebase -get-to-know-flutter#7
30. Next up … Day5 Flutter & Gemini