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.

Peter-John Welcome

October 09, 2020
Tweet

More Decks by Peter-John Welcome

Other Decks in Technology

Transcript

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

    View Slide

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

    View Slide

  3. Quick Firebase History
    Lesson

    View Slide

  4. Syncing data in real time

    View Slide

  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

    View Slide

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

    View Slide

  7. Firebase Emulator

    View Slide

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

    View Slide

  9. Firebase UI Emulator

    View Slide

  10. Firebase UI Emulator

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  14. Getting Started with
    the Emulator

    View Slide

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

    View Slide

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

    View Slide

  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"
    }
    }
    }

    View Slide

  18. UI Emulator

    View Slide

  19. UI Emulator
    http://Localhost:4001

    View Slide

  20. How do we interact
    with the Emulator

    View Slide

  21. Interacting with UI Emulator

    View Slide

  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'

    View Slide

  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()
    }

    View Slide

  24. Demo Firestore

    View Slide

  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

    View Slide

  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 {
    val data = hashMapOf(...)
    return functions
    .getHttpsCallable("sayHello")
    .call(data)
    .continueWith { task ->
    val result = task.result?.data as String
    }
    }
    addMessage("polls") //Invoking the cloud function

    View Slide

  27. Interacting with UI Emulator
    Android 9 & above: Network security config



    10.0.2.2


    //In your Android manifest file
    ....
    android:networkSecurityConfig="@xml/network_security_config" />

    View Slide

  28. Demo Cloud Functions

    View Slide

  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

    View Slide

  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

    View Slide

  31. Peter-John Welcome
    GDE Firebase
    @pjapplez
    Thank You!

    View Slide