Peter-John Welcome GDE Firebase @pjapplez Developing locally with the Firebase UI Emulator An Introduction to the Firebase UI Emulator 

Half screen photo slide if text is necessary Who I am Freelance Mobile Engineer Google Developer Expert for Firebase 

Quick Firebase History Lesson 

Syncing data in real time 

● Always had to be online ● Felt a little like you were developing in Prod. ● Teammates would be sad if you broke database ● Using up your free quota for development ● Etc. Dev Environment Cons 

● Creating dev and prod. projects ● Create separate database (RTDB) ● Using different BundleID’s and package names Some hacky solutions 

Firebase Emulator 

Emulator has been around for a while https://www.youtube.com/watch?v=tResEeK6P5I 

Firebase UI Emulator 

Firebase UI Emulator 

● Accessing databases offline ● Can now run end to end tests on CI ● Easily import and export data ● Increase in development productivity ● Unit Testing security rules ● Testing does not contribute to your quota Benefits of UI Emulator 

● Does not support all products ( Auth, Storage ) ● All triggers in cloud functions are not supported. Limitations of UI Emulator 

UI Emulator You should not try and host the emulator as a prod environment yourself instead of using the Firebase Console. 

Getting Started with the Emulator 

● Node install version 8 or greater ● JDK version 1.8 or greater ● Firebase CLI UI Emulator 

UI Emulator $ npm install -g firebase-tools $ firebase login $ firebase init $ firebase init emulators $ firebase emulators:start 

UI Emulator ( Firebase.json ) { "firestore": { "rules": "firestore.rules", "indexes": "firestore.indexes.json" }, "storage": { "rules": "storage.rules" }, "emulators": { "firestore": { "port": "8090" }, "ui": { "enabled": true, "host": "localhost", "port": 4001 }, "functions": { "port": "5001" }, "database": { "port": "9000" }, "pubsub": { "port": "8085" } } } 

UI Emulator 

UI Emulator http://Localhost:4001 

How do we interact with the Emulator 

Interacting with UI Emulator 

Interacting with UI Emulator Dependencies implementation platform('com.google.firebase:firebase-bom:25.11.0') implementation 'com.google.firebase:firebase-firestore-ktx' implementation 'com.google.firebase:firebase-functions' 

Interacting with UI Emulator Firestore private fun setUpFirebaseEmulators() { val host = "10.0.2.2" // Android Emulator localhost Firebase.firestore.useEmulator(host, 8080) Firebase.firestore.firestoreSettings = FirebaseFirestoreSettings.Builder() .setPersistenceEnabled(false) .build() } 

Demo Firestore 

Interacting with UI Emulator const functions = require('firebase-functions'); const admin = require("firebase-admin"); admin.initializeApp() exports.sayHello = functions.https.onCall ((data, context) => { const text = data.text; var db = admin.firestore(); const webDetection = JSON.parse('{"webEntities": [ {"entityId": "1", "score": 1.44225, "description": "Carnival in Rio de Janeiro" }]}'); let imageRef = db.collection('images').doc(text); imageRef.set(webDetection); }); Cloud functions js 

Interacting with UI Emulator Cloud functions Android private fun setUpFirebaseEmulators() { var functions: FirebaseFunctions = FirebaseFunctions.getInstance() functions.useEmulator(host, 5001) } fun addMessage(text: String): Task { val data = hashMapOf(...) return functions .getHttpsCallable("sayHello") .call(data) .continueWith { task -> val result = task.result?.data as String } } addMessage("polls") //Invoking the cloud function 

Interacting with UI Emulator Android 9 & above: Network security config 10.0.2.2 //In your Android manifest file 

Demo Cloud Functions 

UI Emulator There's more ● Firebase Web Hosting can be tested locally. ● Running containerized Emulator images with CLI on CI ● Emulating Pub/Sub interactions with Cloud Functions ● Realtime Database interaction ● Still able to connect to external services through emulator 

References ● https://firebase.google.com/docs/emulator-suite ● https://github.com/pjwelcome/JetExample (Android Sample) ● https://github.com/pjwelcome/GDGCloudVision (iOS Sample) ● https://github.com/firebase ● https://www.youtube.com/user/Firebase ● https://www.youtube.com/watch?v=8CR86yFmY2I&feature=emb_logo ● https://www.youtube.com/watch?v=sl_8OGI68g4&feature=emb_logo ● https://firebaseonair.withgoogle.com/events/firebase-live20 

Peter-John Welcome GDE Firebase @pjapplez Thank You!