Flutter + Firebase Speaker: Yuki Hirai GDSC Tokyo City University @yu_haruwolf 

What is Firebase? Japan 

**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 

What is Firebase? ● Mobile and Web application development platform from Google ● Backend ○ No need to build infrastructure ● →Quick and easy backend setup 

So…What is backend? ● Parts that users don't see ● Example ○ Store datas ○ Processing / Calculation ○ Connect with other services 

Hands-on Japan 

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 

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 

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 

Setup the environment Japan 

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 

Enable authentication ● Project overview pane > Build ● Authentication > Get Started > Sign-in method > Email/Password > Enable > Save. 

Enable Firestore ● Build > Firestore Database > Create database ● Start in test mode ● Choose cloud firestore location 

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 

Warning on Windows ● Search “variables” or “変数” from Start menu. 

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 

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.→ 

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. 

Develop the app! Japan 

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 

Enable main.dart to receive changes ● It’s needed to change main() in main.dart to get change notification 

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 

Let’s try to register and login! 

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 

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 

Let’s try to send the message! 

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 

Finish! 🙌 

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 

Next up … Day5 Flutter & Gemini