Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Android: Developing Locally with the Firebase UI Emulator

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.

7cfaab5ac5113201604c3ad16d9a293b?s=128

Peter-John Welcome

October 09, 2020
Tweet

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!