How to build an Android App using Firebase and the App Engine support play chat ?

1. 1. Click Done.
2. Click the service account you just created, under the KEYS tab, click Add Key, and then click Create new key.
3. Next to Key Type, click JSON, and then click Create to download the key.
4. Save the downloaded JSON key file for the service account to the backend service project, firebase-appengine-backend, in the src/main/webapp/WEB-INF/ directory. The filename is in the form Playchat-[UNIQUE_ID].json.
5. Edit src/main/webapp/WEB-INF/web.xml and edit the initialization parameters as follows:
   • Replace JSON_FILE_NAME with the name of the JSON key file you downloaded.
   • Replace FIREBASE_URL with the Firebase URL you noted earlier.
      

     <init-param>
       <param-name>credential</param-name>
       <param-value>/WEB-INF/JSON_FILE_NAME</param-value>
     </init-param>
     <init-param>
       <param-name>databaseUrl</param-name>
       <param-value>FIREBASE_URL</param-value>
     </init-param>
     

Enabling billing and APIs for the Cloud Platform project

In order for the backend service to run on Cloud Platform, you need to enable billing and APIs for the project. The Cloud Platform project is the same project you created in Create a Firebase project and has the same project identifier.

1. In the Cloud Platform Console, select the Playchat project.Go to the Projects page
2. Make sure that billing is enabled for your Cloud project. Learn how to confirm that billing is enabled for your project.
3. Enable the App Engine Admin API and Compute Engine API APIs.Enable the APIs

Building and deploying the backend service

The backend service in this sample uses a Docker configuration to specify its hosting environment. This customization means you must use the App Engine flexible environment instead of the App Engine standard environment.

To build the backend servlet and deploy it in the App Engine flexible environment, you can use the Google App Engine Maven plugin. This plugin is already specified in the Maven build file included with this sample.

Setting the project

For Maven to build the backend servlet correctly, you must provide it the Google Cloud Platform (GCP) project to launch the servlet resources into. The GCP project identifier and the Firebase project identifier are the same.

1. Provide the credentials that the gcloud tool uses to access GCP.
    

   gcloud auth login
   

2. Set the project to your Firebase project with the following command, replacing [FIREBASE_PROJECT_ID] with the name of the Firebase project ID you noted previously.
    

   gcloud config set project [FIREBASE_PROJECT_ID]
   

3. Verify that the project has been set by listing the configuration.
    

   gcloud config list
   

4. If this is the first time you’re using App Engine, initialize your App Engine app:
    

   gcloud app create
   

(Optional) Running the service on the local server

When you develop a new backend service, run the service locally before you deploy it to App Engine to rapidly iterate changes without the overhead of a full deployment to App Engine.

When you run the server locally, it doesn’t use a Docker configuration or run in an App Engine environment. Instead, Maven guarantees all dependent libraries are installed locally and the app runs on the Jetty web server.

1. In the firebase-appengine-backend directory, build and run the backend module locally with the following command:
    

   mvn clean package appengine:run
   

   If you have installed the gcloud command-line tool to a directory other than ~/google-cloud-sdk, add the installation path to the command as shown in the following, replacing [PATH_TO_TOOL] with your custom path.

    

   mvn clean package appengine:run -Dgcloud.gcloud_directory=[PATH_TO_TOOL]
   

2. If you are prompted Do you want the application “Python.app” to accept incoming network connections?, select Allow.

When the deployment ends, open http://localhost:8080/printLogs to verify that your backend service is running. The web page displays Inbox : followed by a 16-digit identifier. This is the inbox identifier for the servlet running on your local machine.

As you refresh the page, this identifier doesn’t change; your local server spins up a single servlet instance. This is useful for testing, because there is only one servlet identifier stored in the Firebase Realtime Database.

To shut down the local server, enter Ctrl+C.

Deploying the service to the App Engine flexible environment

When you run the backend service in the App Engine flexible environment, App Engine uses the configuration in /firebase-appengine-backend/src/main/webapp/Dockerfiles to build the hosting environment that the service runs in. The flexible environment spins up several servlet instances and scales them up and down to meet demand.

• In the firebase-appengine-backend directory, build and run the backend module locally with the following command:
  
   

  mvn clean package appengine:deploy
  

   

  mvn clean package appengine:deploy -Dgcloud.gcloud_directory=[PATH_TO_GCLOUD]
  

As the build runs, you see the lines “Sending build context to Docker daemon…”. The previous command uploads your Docker configuration and sets it up in the App Engine flexible environment.

When the deployment ends, open https://[FIREBASE_PROJECT_ID].appspot.com/printLogs, where [FIREBASE_PROJECT_ID] is the identifier from Create a Firebase project. The web page that displays Inbox : followed by a 16-digit identifier. This is the inbox identifier for a servlet running in the App Engine flexible environment.

As you refresh the page, this identifier periodically changes as App Engine spins up multiple servlet instances to handle incoming client requests.

Adding Firebase and Google Play Services to the Android app

The client app uses the Firebase Realtime Database to store and sync messages and to record user-event logs. The client app uses Google Play Services to authenticate users with their Google account.

1. In Android Studio, select Tools > SDK Manager.
2. Select the SDK Tools tab.
3. Select Google Play services if it’s not already selected.
4. Click OK to install it.
5. Select File > Open… and choose the firebase-android-client directory.
6. Wait for the Gradle project information to finish building. If you are prompted to use the Gradle wrapper, click OK.
7. The changes to the project- and app-level build.gradle files that you noted in Create a Firebase project have already been made in the sample code.

Running and testing the Android app

1. In Android Studio, with the firebase-android-client project open, select Run > Run ‘app’.
2. Select a device or emulator running Android 6.0 with Google APIs as your test device.
3. When the app is loaded onto the device, sign in with your Google Account.
4. Click the menu to the left of the PlayChat title and select the books channel.
5. Enter a message.
6. When you do, the Playchat app stores your message in the Firebase Realtime Database. Firebase synchronizes the data stored in the database across devices. Devices running Playchat will display the new message when a user selects the books channel.

Verifying the data

After you’ve used the Playchat app to generate some user events using the Playchat app, you can verify that the servlets are registering as listeners and collecting user-event logs.

Open the Firebase Realtime Database for your app, where [FIREBASE_PROJECT_ID] is the identifier from Create a Firebase project.

https://console.firebase.google.com/project/[FIREBASE_PROJECT_ID]/database/data

At the bottom of the Firebase Realtime Database, under the /inbox/ data location, there is a group of nodes prefixed by client- and followed by a randomly generated key that represents a user’s account login. The last entry in this example, client-1240563753, is followed by a 16-digit identifier of the servlet currently listening to log events from that user, in this example 0035806813827987.

Immediately above, under the /inbox/ data location, are servlet identifiers for all currently assigned servlets. In this example, only one servlet is collecting logs. Under /inbox/[SERVLET_IDENTIFIER] are the user logs written by the app to that servlet.

Open the App Engine page for your backend service at https://[FIREBASE_PROJECT_ID].appspot.com/printLogs, where [FIREBASE_PROJECT_ID] is the identifier from Creating a Firebase project. The page displays the identifier for the servlet that recorded the user events you generated. You can also see the log entries for those events below the servlet’s inbox identifier.

Exploring the code

The Playchat Android app defines a class, FirebaseLogger, that it uses to write user-event logs to the Firebase Realtime Database.

import com.google.cloud.solutions.flexenv.common.LogEntry;
import com.google.firebase.database.DatabaseReference;
import com.google.firebase.database.FirebaseDatabase;
/*
 * FirebaseLogger pushes user event logs to a specified path.
 * A backend servlet instance listens to
 * the same key and keeps track of event logs.
 */
class FirebaseLogger {
    private final DatabaseReference logRef;

    FirebaseLogger(String path) {
        logRef = FirebaseDatabase.getInstance().getReference().child(path);
    }

    public void log(String tag, String message) {
        LogEntry entry = new LogEntry(tag, message);
        logRef.push().setValue(entry);
    }
}

When a new user logs in, Playchat calls the requestLogger function to add a new entry to the /inbox/ location in the Firebase Realtime Database and set a listener so Playchat can respond when a servlet updates the value of that entry, accepting the assignment.

When a servlet updates the value, Playchat removes the listener and writes the “Signed in” log to the servlet’s inbox.

/*
 * Request that a servlet instance be assigned.
 */
private void requestLogger(final LoggerListener loggerListener) {
    final DatabaseReference databaseReference = FirebaseDatabase.getInstance().getReference();
    databaseReference.child(IBX + "/" + inbox).addListenerForSingleValueEvent(new ValueEventListener() {
        public void onDataChange(@NonNull DataSnapshot snapshot) {
            if (snapshot.exists() && snapshot.getValue(String.class) != null) {
                firebaseLoggerPath = IBX + "/" + snapshot.getValue(String.class) + "/logs";
                fbLog = new FirebaseLogger(firebaseLoggerPath);
                databaseReference.child(IBX + "/" + inbox).removeEventListener(this);
                loggerListener.onLoggerAssigned();
            }
        }

        public void onCancelled(@NonNull DatabaseError error) {
            Log.e(TAG, error.getDetails());
        }
    });

    databaseReference.child(REQLOG).push().setValue(inbox);
}

On the backend service side, when a servlet instance starts, the init(ServletConfig config) function in MessageProcessorServlet.java connects to the Firebase Realtime Database and adds a listener to the /inbox/ data location.

When a new entry is added to the /inbox/ data location, the servlet updates the value with its identifier, a signal to the Playchat app that the servlet accepts the assignment to process logs for that user. The servlet uses Firebase transactions to ensure that only one servlet can update the value and accept the assignment.

/*
 * Receive a request from a client and reply back its inbox ID.
 * Using a transaction ensures that only a single servlet instance replies
 * to the client. This lets the client know to which servlet instance
 * send consecutive user event logs.
 */
firebase.child(REQLOG).addChildEventListener(new ChildEventListener() {
  public void onChildAdded(DataSnapshot snapshot, String prevKey) {
    firebase.child(IBX + "/" + snapshot.getValue()).runTransaction(new Transaction.Handler() {
      public Transaction.Result doTransaction(MutableData currentData) {
        // Only the first servlet instance writes its ID to the client inbox.
        if (currentData.getValue() == null) {
          currentData.setValue(inbox);
        }
        return Transaction.success(currentData);
      }

      public void onComplete(DatabaseError error, boolean committed, DataSnapshot snapshot) {}
    });
    firebase.child(REQLOG).removeValue();
  }
  // ...
});

After a servlet has accepted an assignment to process a user’s event logs, it adds a listener that detects when the Playchat app writes a new log file to the servlet’s inbox. The servlet responds by retrieving the new log data from the Firebase Realtime Database.

/*
 * Initialize user event logger. This is just a sample implementation to
 * demonstrate receiving updates. A production version of this app should
 * transform, filter, or load to another data store such as Google BigQuery.
 */
private void initLogger() {
  String loggerKey = IBX + "/" + inbox + "/logs";
  purger.registerBranch(loggerKey);
  firebase.child(loggerKey).addChildEventListener(new ChildEventListener() {
    public void onChildAdded(DataSnapshot snapshot, String prevKey) {
      if (snapshot.exists()) {
        LogEntry entry = snapshot.getValue(LogEntry.class);
        logs.add(entry);
      }
    }

    public void onCancelled(DatabaseError error) {
      localLog.warning(error.getDetails());
    }

    public void onChildChanged(DataSnapshot arg0, String arg1) {}

    public void onChildMoved(DataSnapshot arg0, String arg1) {}

    public void onChildRemoved(DataSnapshot arg0) {}
  });
}