Firebase Emulators are used to test our projects on the local firebase server (Emulator). It provides all the services of the Firebase Console. It is most useful for firebase functions because to use firebase functions we have to take the Blaze plan of firebase means we must have a credit card, here is a solution to this problem we can test our mobile apps on our own local device using Firebase emulator.
Step by Step Implementation
Step 1: Install Node.js and npm on your device
Install Node.js and npm to your device. You can take help with this article.
Step 2: Install Firebase-tools
Open any terminal (Command Prompt) in the system and use the following command to install firebase tools. Make sure you have an active internet connection to your system.
npm install -g firebase-tools
After installing firebase tools use the following command to check if it installed properly
firebase tools --version
Step 3: Create a Firebase Project on the firebase website
Refer to this to create a project on the firebase website.
Step 4: Log in to firebase
Use the following command in the terminal to Login into firebase via terminal.
firebase login
It will take you to the browser where you need to log in to firebase CLI.
Step 5: Initialize firebase
Now create a folder (anywhere on the disk) for using the emulator you can name it anything for the demo we named ‘GFG’ to the folder. Now open a terminal in this folder and use the following command to initialize firebase
firebase init
Then it will ask some questions and answer them like below, firstly it will ask
- ‘Are you ready to proceed?’ : use command Y
- ‘Which features do you want to set up?’ : Choose ‘Emulators'(to choose press the space button then enter)
- ‘Choose an option ‘Choose an existing project’ select the project that you had created earlier
- ‘Which firebase emulator do you want to use?’ : Select the services you want in your project (In the demo used a database emulator)
- ‘Which port do you want to use for the database emulator?’ : Press Enter
- ‘Would you like to enable the Emulator UI?’ : use command Y
- ‘Which port do you want to use for the Emulator UI (leave empty to use any available port)?’ : Press Enter
- ‘Would you like to download the emulators now?’ : use command Y
The initialization part is completed, Now we will start the emulators. Use the given command to start the emulators
firebase emulators:start
Now you will get a link where the emulators are running, Copy that link and paste it into the browser you will be able to see the local firebase console in the browser. This link will be like http://127.0.0.1:4000/
Step 6: Create an Android App
Create an android app project in android studio with empty Activity. Now Go to the tools section in android studio and select firebase there. Go to the Firebase Assistant and select Realtime Database. Here connect your app with firebase and download its dependencies of it. Now insert a button in activity_main.xml using the following code.
XML
<Button android:id="@+id/button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="send data" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> |
In MainActivity.java create the object of the Button class and link it with the button that has been created in the XML section using the findViewById() method. After that create an object of FirebaseDatabase class and an object of DatabaseReference class using the object of FirebaseDatabase. Now use method useEmulator(host, port) to use emulators in the project, here host will be “10.0.2.2” (It is a unique IP to connect the virtual device from the firebase database emulator) and the port is your port where the database emulator is running by default it is 9000. Now use traditional methods to send data to Firebase Realtime Database and it can be seen in the local console.
Java
import androidx.annotation.NonNull;import androidx.appcompat.app.AppCompatActivity; import android.os.Bundle;import android.view.View;import android.widget.Button;import android.widget.Toast; import com.google.android.gms.tasks.OnFailureListener;import com.google.android.gms.tasks.OnSuccessListener;import com.google.firebase.database.DatabaseReference;import com.google.firebase.database.FirebaseDatabase; import java.util.HashMap;import java.util.Map; public class MainActivity extends AppCompatActivity { Button button; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); button = findViewById(R.id.button); FirebaseDatabase database = FirebaseDatabase.getInstance(); // here "10.0.2.2" is special IP for using emulator // and 9000 is the port on which database emulator is running database.useEmulator("10.0.2.2", 9000); DatabaseReference dbRef = database.getReference(); HashMap<String , String> users = new HashMap<>(); users.put("name","Pranjal"); users.put("age","21"); button.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { dbRef.setValue(users) .addOnSuccessListener(new OnSuccessListener<Void>() { @Override public void onSuccess(Void unused) { Toast.makeText(MainActivity.this, "data sent", Toast.LENGTH_SHORT).show(); } }) .addOnFailureListener(new OnFailureListener() { @Override public void onFailure(@NonNull Exception e) { Toast.makeText(MainActivity.this, e.getLocalizedMessage(), Toast.LENGTH_SHORT).show(); } }); } }); }} |
Note: Always run this app on Android virtual device.
Output:
