Angular On-Demand Rides and Deliveries Sample

Architecture

In order to run the full end-to-endjourney sharinguse case, you need 4 components:

• aprovider backend as it can be utilized by Android, iOS, and JavaScript client samples.
• a driver app (Android|iOS)
• a consumer app (Android|iOS)
• a web app (included in this repository)

The consumer and driver mobile apps communicate with the provider backend. The web app also communicates with the provider backend to request authentication tokens. The provider backend communicates with the Fleet Engine.

Prerequisites

1. Please fully completeGetting Started with Fleet Engine.
2. Please make sure theprovider backend is up and running.
3. Please make sure a consumer mobile app and a driver mobile app are running. Use these to create vehicles and trips to track with the Angular sample app.

Getting started

Step 1 - Download and install dependencies

These dependencies are needed to run the sample app. If you have them installed already you can skip these steps below.

• Download & install node fromhttps://nodejs.org/en/download/

• Download & install Angular CLI:

  npm install -g @angular/cli
  

Step 2 - Populate./node_modules

This will install all packages declared inpackage.jsonof the sample project to make sure all dependencies are properly installed.

npm install

Step 3 - Add API key and other metadata (required)

Insrc/app/journey-sharing-google-map/journey-sharing-google-map.component.ts,do the following:

• Set thePROVIDER_URLconstant to the URL of your provider that was set up in Prerequisite #2.

// Replace 'YOUR_PROVIDER_URL' with the URL of your provider. See
// https://github.com/googlemaps/java-on-demand-rides-deliveries-stub-provider
// for instructions on how to set up a provider.
constPROVIDER_URL='YOUR_PROVIDER_URL';

• Add your API key to the Google Maps JavaScript API Loader initialization:

constloader=newLoader({
// Replace with your API key
apiKey:'YOUR_API_KEY',
...
});

• Add the Cloud project ID to theFleetEngineTripLocationProviderinitialization:

this.locationProvider=
newgoogle.maps.journeySharing.FleetEngineTripLocationProvider({
// Replace 'PROVIDER_PROJECT_ID' with the project ID of the Cloud
// project that has Local Rides and Deliveries API enabled.
projectId:'PROVIDER_PROJECT_ID',
...
});

Step 4 - Run the sample app

From this directory, runng serveto start a development server. Navigate tohttp://localhost:4200/.The app will automatically reload if you change any of the source files.

Step 5 - Start tracking a trip

Enter a trip ID for a trip you created (Prerequisite #3) in the Trip ID input field and click "Find trip".

Important references

• Installing Cloud SDK
• Transportation SDKs - JavaScript SDK Setup