Android: Developing Locally with the Firebase UI Emulator

This is a talk given at Droidcon EMEA and Devfest UK & Ireland about the Firebase UI emulator on Android.

Transcript

1. Peter-John Welcome GDE Firebase @pjapplez Developing locally with the Firebase UI Emulator An Introduction to the Firebase UI Emulator
2. Half screen photo slide if text is necessary Who I am Freelance Mobile Engineer Google Developer Expert for Firebase
3. Quick Firebase History Lesson
4. Syncing data in real time
5. • 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
6. • Creating dev and prod. projects • Create separate database (RTDB) • Using different BundleID’s and package names Some hacky solutions
7. Firebase Emulator
8. Emulator has been around for a while https://www.youtube.com/watch?v=tResEeK6P5I
9. Firebase UI Emulator
10. Firebase UI Emulator
11. • 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
12. • Does not support all products ( Auth, Storage ) • All triggers in cloud functions are not supported. Limitations of UI Emulator
13. UI Emulator You should not try and host the emulator as a prod environment yourself instead of using the Firebase Console.
14. Getting Started with the Emulator
15. • Node install version 8 or greater • JDK version 1.8 or greater • Firebase CLI UI Emulator
16. UI Emulator $ npm install -g firebase-tools $ firebase login $ firebase init $ firebase init emulators $ firebase emulators:start
17. 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" } } }
18. UI Emulator
19. UI Emulator http://Localhost:4001
20. How do we interact with the Emulator
21. Interacting with UI Emulator
22. 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'
23. 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() }
24. Demo Firestore
25. 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
26. Interacting with UI Emulator Cloud functions Android private fun setUpFirebaseEmulators() { var functions: FirebaseFunctions = FirebaseFunctions.getInstance() functions.useEmulator(host, 5001) } fun addMessage(text: String): Task<String> { val data = hashMapOf(...) return functions .getHttpsCallable("sayHello") .call(data) .continueWith { task -> val result = task.result?.data as String } } addMessage("polls") //Invoking the cloud function
27. Interacting with UI Emulator Android 9 & above: Network security config <?xml version="1.0" encoding="utf-8"?> <network-security-config> <domain-config cleartextTrafficPermitted="true"> <domain includeSubdomains="false">10.0.2.2</domain> </domain-config> </network-security-config> //In your Android manifest file <application .... android:networkSecurityConfig="@xml/network_security_config" />
28. Demo Cloud Functions
29. 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
30. 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
31. Peter-John Welcome GDE Firebase @pjapplez Thank You!