Skip to content

googlemaps/angular-on-demand-rides-deliveries-samples

Repository files navigation

Release Tests/Build

Contributors License StackOverflow Discord

Angular On-Demand Rides and Deliveries Sample

Description

This repository contains the source code for an Angular sample web app for on-demand rides and deliveries.

Requirements

Architecture

In order to run the full end-to-end journey sharing use case, you need 4 components:

  • Provider backend as it can be utilized by Android, iOS, and JavaScript client samples.
  • Driver app (Android | iOS)
  • Consumer app (Android | iOS)
  • 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.

Usage

  1. Fully complete the Prerequisites section of Getting Started with Fleet Engine.
  2. Make sure the provider backend is up and running.
  3. 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.

Usage

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.

Step 2 - Populate ./node_modules

This will install all packages declared in package.json of the sample project to make sure all dependencies are properly installed.

npm install

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

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

  • Set the PROVIDER_URL constant 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.
const PROVIDER_URL = 'YOUR_PROVIDER_URL';
  • Add your API key to the Google Maps JavaScript API Loader initialization:
const loader = new Loader({
  // Replace with your API key
  apiKey: 'YOUR_API_KEY',
  ...
});
  • Add the Cloud project ID to the FleetEngineTripLocationProvider initialization:
this.locationProvider =
  new google.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, run ng serve to start a development server. Navigate to http://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".

Documentation

Contributing

Contributions are welcome and encouraged! If you'd like to contribute, send us a pull request and refer to our code of conduct and contributing guide.

Terms of Service

This library uses Google Maps Platform services. Use of Google Maps Platform services through this library is subject to the Google Maps Platform Terms of Service.

This library is not a Google Maps Platform Core Service. Therefore, the Google Maps Platform Terms of Service (e.g. Technical Support Services, Service Level Agreements, and Deprecation Policy) do not apply to the code in this library.

Support

This library is offered via an open source license. It is not governed by the Google Maps Platform Support [Technical Support Services Guidelines, the SLA, or the Deprecation Policy. However, any Google Maps Platform services used by the library remain subject to the Google Maps Platform Terms of Service.

This library adheres to semantic versioning to indicate when backwards-incompatible changes are introduced. Accordingly, while the library is in version 0.x, backwards-incompatible changes may be introduced at any time.

If you find a bug, or have a feature request, please file an issue on GitHub. If you would like to get answers to technical questions from other Google Maps Platform developers, ask through one of our developer community channels. If you'd like to contribute, please check the contributing guide.

You can also discuss this library on our Discord server.