Getting Started with your Transport Tracker

Introduction

This solution implements asset tracking. For use in a production environment, you therefore need aGoogle Maps APIs Premium Plan license. For more information, see the Google Maps Platform Terms of Service.
The Transport Tracker consists of the following components:
Data storeFirebase Realtime Database that stores the vehicle locations, snapped to the road with theRoads API. Firebase provides realtime data synchronization to the backend and map.
Vehicle locatorAn Android app that uses the fused location provider, in the Google Play services location APIs, to report its location to the Firebase Realtime Database.
BackendThe backend built in Node.js, that processes locations from the Firebase Realtime Database and predicts travel times using the Directions API.
MapA web application that uses the Maps JavaScript API to display a styled map showing the bus locations and routes.
Administrator's overviewA web interface for administrators, giving an overview of the assets being tracked. It displays a map using the Maps Static API, with vehicle and location data from the Firebase Realtime Database.

Step 1. Get the code

Clone or download the Transport Tracker repo on GitHub.

Step 2. Set up a Firebase Realtime Database

The Transport Tracker uses a Firebase Realtime Database to communicate location updates between the various components of the server and front end applications. When the vehicle locator, or the simulator, stores the location updates in the Firebase Realtime Database, Firebase sends automatic updates to the backend, which in turn updates the front end display.
Set up your Firebase Realtime Database project:
  1. Go to the Firebase console and click Add project to create a project for your Transport Tracker.
  2. Enter a project name.
  3. Click Create Project.

Step 3. Get a Google Maps API key

Click the button below, which guides you through the process of registering a project in the Google Cloud Platform Console, activates the required Google Maps Platform and related services automatically, and generates a generic, unrestricted API key.
Make a note of the value of your API key.
During development and testing, you can use a single, unrestricted Google API key for all the Google Maps Platform in your Transport Tracker. When you are ready to move your system into production, you must create separate API keys for each type of API, so that you can secure the keys by HTTP referrer or IP address. For help, see the pre-launch checklist.

Step 4. Set up the backend

The Transport Tracker backend is an npm Node.js application. It receives realtime updates of the vehicle locations from the Firebase Realtime Database, and sets up the panel configurations for use by the frontend displays. It also includes a vehicle location simulator, so you can run the Transport Tracker without having to move Android devices around to represent your vehicles.
Follow these steps to set up the backend:
  1. Get your Firebase web app credentials:
    • Go to the Firebase console and open your Firebase project.
    • Click Add Firebase to your web app.
    • Go to the Service Accounts tab in your Firebase project's settings.
    • Click Generate New Private Key and confirm the action as prompted.
    • Firebase downloads an adminsdk JSON file containing your service account credentials. Store this file for later use.
  2. Optional: You can use Google Cloud services and the Google Cloud Shell to build and run your application:
    • Go to Google Cloud Platform console, sign in using your Google Account (Gmail or Google Apps) and create a new project.
    • Enter a name for your project, and take note of your allocated project ID.
    • Activate Google Cloud Shell from the Cloud platform console, by clicking the button at top right of the Cloud Shell toolbar.
    • The Cloud Shell window opens at the bottom of the Cloud console. This is where you can enter commands to interact with the shell. Refer to the Cloud Shell documentation for details.
  3. In Google Cloud Shell, or locally if you're not using Google Cloud, create a transport-trackerdirectory for your application, and copy across the backend directory from the cloned GitHub repo:
    mkdir transport-tracker cd transport-tracker cp <my-cloned-repo>/backend/ . cd backend
  4. Edit the file serviceAccountKey.json, and paste in your Firebase adminsdk service account credentials from the file you downloaded earlier. Hint: If you're using the Google Cloud Shell, you can use Cloud's code editor.
  5. Edit the tracker_configuration.jsonfile and add the following values:
    • mapsApiKey - your Maps API key. If you don't have one yet, follow the guide to getting an API key.
    • databaseURL - the address of your Firebase Realtime Database. You can find the URL in the Admin SDK configuration snippet on the Firebase Service Accounts tab.
    • simulation - a configuration setting that determines whether to use the vehicle simulator or real location data from the vehicle locator. While developing and testing, set this value to true.
  6. Run npm install to install your dependencies. This may take a few minutes.
  7. Run the application:
    npm run main
  8. Open your Firebase Realtime Database to see the results:

Step 5. Create the map

The Transport Tracker's primary display is a web application showing a styled map from the Maps JavaScript API with markers indicating the locations of the tracked vehicles, retrieved from the Firebase Realtime Database. Panels on the map show the routes and departure times.
Follow these steps to set up the map:
  1. Create a transport-tracker-map directory for your application on your server, and copy across all the files from the map directory in the cloned repo:
    cd transport-tracker-map cp <my-cloned-repo>/map/ .
  2. Edit the index.html file, find the <script> element at the bottom of the file, and replaceYOUR_API_KEY with your Google Maps API key. If you don't have an API key yet, follow theguide to getting an API key.
  3. Go to the Firebase console and open your project, then click Add Firebase to your web app. Copy the config object that appears on the Firebase console. The config object contains the Firebase authentication values that you need in the next step.
  4. Edit the js/index.js file and populate the firebaseConfig object with the Firebase authentication fields and values from the config object that you copied in the previous step. See the Firebase documentation for more information.
  5. Run npm install to install your dependencies.
  6. Run the application:
    npm run main

Step 6. Set up the vehicle locator Android app

The vehicle locator is an Android app that sends location updates to the Firebase Realtime Database.
Follow these steps to build and run the Android app:
  1. Create a new Android development project:
    • In Android Studio, choose File > New > Import project.
    • Go to your cloned repo and open the android directory in Android Studio.
  2. Connect your app to Firebase using the Firebase Assistant:
    • In Android Studio, click Tools > Firebase to open the Assistant window.
    • Click to expand one of the listed features (for example, Analytics), then click the provided tutorial link (for example, Log an Analytics event).
    • Click Connect to Firebase.
    • Go back to Android Studio and enter your project details in the Connect to Firebase dialog that opens there.
    • Select Choose an existing Firebase or Google project, then select your Transport Tracker project.
    • Click Connect to Firebase, and watch the messages in the Android Studio status bar.
    • When the process is complete, a message appears in the Android Studio event log: "Firebase project created and connected locally to module: app." Notice the new google-services.json file in your project's app directory.
    • For more information, see the documentation on the Firebase Assistant.
  3. Alternatively, you can connect your app to Firebase manually:
    • Go to the Firebase console and open the project you created above.
    • Click Add Firebase to your Android app, and follow the prompts.
    • Download and save the google-services.json file as directed.
    • For more information, read the Firebase documentation.
  4. Build and run your app. You should see the Transport Tracker startup screen on your Android device, as shown in the screenshot on this page.
Add one or more users to Firebase, so that you can authenticate them to your app:
  1. Go to the Firebase console and open the project you created above.
  2. Enable email and password as an authentication method:
    • Click Authentication, then Set up sign-in method.
    • Click Email/Password, then Enable and Save.
  3. Click Add user and specify a valid email address and a password. Take note of the password, because the user needs it to authenticate to your vehicle locator app.
To start tracking on the Android device, enter the following information on the vehicle locator screen:
  • Transport ID: A recognizable short identification code for the vehicle you're tracking. This ID appears on the administrator's overview map to indicate the location of the vehicle. For example, use the license plate number of each vehicle as the transport ID.
  • Email: The email address corresponding to a user created in the Firebase user management console.
  • Password: The password recorded in Firebase for the above user.
Tap Start Tracking. You should see an update in the notification area on your Android device indicating that the Transport Tracker is tracking the device.

Step 7. Set up the administrator's overview

The administrator's overview is a web interface for administrators, showing a summary of the assets being tracked. It displays a map using the Maps Static API, with vehicle and location data from the Firebase Realtime Database.
Follow these steps to set up the administrator's overview:
  1. Create a transport-tracker-admin directory for your application on your server, and copy across all the files from the admin directory in the cloned repo:
    cd transport-tracker-admin cp <my-cloned-repo>/admin/ .
  2. Get your Firebase authentication details:
    • Go to the Firebase console and open your project.
    • Click Add Firebase to your web app.
  3. Edit the main.jsfile:
    • Paste your Maps API key into the value for mapsApiKey. If you don't have an API key yet, follow the guide to getting an API key.
    • Paste your Firebase API key into firebaseApiKey and the URL of your Firebase Realtime Database into firebaseDatabaseURL.