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
   

   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