You're all set!

To start developing, please head over to our developer documentation.

Activate the Google Maps JavaScript API and related APIs

To get you started we'll guide you through the Google Developers Console to do a few things first:

  1. Create or choose a project
  2. Activate the Google Maps JavaScript API and related APIs
  3. Create appropriate keys
Continue

Getting Started with your Transport Tracker

The Transport Tracker is a set of applications that tracks a range of moving assets (typically vehicles, such as buses or delivery trucks) and visualizes them on a map. The solution is based on the shuttle bus tracker at Google I/O 2016 and 2017. The code is open sourced on GitHub. You can download it and customize it to suit your needs.

Introduction

This solution implements asset tracking. For use in a production environment, you therefore need a Google Maps APIs Premium Plan license. For more information, see the Google Maps APIs Terms of Service.

The Transport Tracker consists of the following components:

Data store A Firebase Realtime Database that stores the vehicle locations, snapped to the road with the Google Maps Roads API. Firebase provides realtime data synchronization to the backend and map.
Vehicle locator An Android app that uses the fused location provider, in the Google Play services location APIs, to report its location to the Firebase Realtime Database.
Backend The backend built in Node.js, that processes locations from the Firebase Realtime Database and predicts travel times using the Google Maps Directions API.
Map A web application that uses the Google Maps JavaScript API to display a styled map showing the bus locations and routes.
Administrator's overview A web interface for administrators, giving an overview of the assets being tracked. It displays a map using the Google Static Maps 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 API Console, activates the required Google Maps APIs and related services automatically, and generates a generic, unrestricted API key.

Get a 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 APIs 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-tracker directory 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 Google 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 replace YOUR_API_KEY with your Google Maps API key. If you don't have an API key yet, follow the guide 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 Google Static Maps 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.

Next steps

When you're ready to deploy your system to a production environment, take a look at the pre-launch checklist.

Enviar comentarios sobre…

Transport Tracker Solution
Transport Tracker Solution
¿Necesitas ayuda? Visita nuestra página de asistencia.