Giter VIP home page Giter VIP logo

react-on-demand-rides-deliveries-samples's Introduction

React Native for Web On-Demand Rides and Deliveries Sample

Architecture

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

  • a provider 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. Complete Getting Started with Fleet Engine.
  2. Run provider backend.
  3. Run both consumer mobile app and the driver mobile app. Use these to create vehicles and trips to track with the React Native Web 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.

npm install --global expo-cli

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 --legacy-peer-deps

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

In /src/utils/consts.tsx, do the following:

  • Set the PROVIDER_URL constant to the URL of your provider that was set up in Prerequisite #2.
  • Set the PROVIDER_PROJECT_ID constant to your Cloud project ID
  • Set the API_KEY constant to your Google Maps API key
// 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.
export const PROVIDER_URL = 'YOUR_PROVIDER_URL';
export const PROVIDER_PROJECT_ID = 'YOUR_PROJECT_ID';
export const API_KEY = 'YOUR_API_KEY';

Step 4 - Run the sample app

From this directory, run npm run web to start a development server. 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".

On-Demand Rides and Deliveries tracking

Important references

react-on-demand-rides-deliveries-samples's People

Contributors

noelle-jung avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

react-on-demand-rides-deliveries-samples's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.