fleetbase / navigator-app

GPS and Order Management Mobile App for Drivers built with React Native

Open source navigation and fleetbase order management for drivers/agents.

fleetbase.io | @fleetbase_io | Discord

Table of Contents

• About
• Prerequisites
• Installation
  • Configure Environment
• Running in Simulator
  • Run the app in iOS Simulator
  • Run the app in Android Simulator
• Navigation using Mapbox
• Documentation
• Roadmap

About

Fleetbase Navigator is an open source navigation and order management app for drivers and agents using Fleetbase. This app is fully customizable and supports QR code scanning, digital signatures, and routing and navigation for agents. Drivers will be able to update activity to orders on the run as they complete job. Drivers can also manage their wallet and view earnings, and Navigator also provides a schedule view for a comprehensive view of the drivers tasks for the day.

Prerequisites

• Yarn or NPM
• React Native CLI
• Xcode 12+
• Android Studio

Installation

Installation and setup is fairly quick, all you need is your Fleetbase API Key, and a few commands and your app will be up and running in minutes. Follow the directions below to get started.

Run the commands below; first clone the project, use npm or yarn to install the dependencies, then run npx pod-install to install the iOS dependencies. Lastly, create a .env file to configure the app.

git clone [email protected]:fleetbase/navigator-app.git
cd navigator-app
yarn
npx pod-install
touch .env

Configure Environment

Below is the steps needed to configure the environment. The first part covers collecting your required API keys.

1. Get your API Keys;
2. If you don't have a Fleetbase account already proceed to the Fleetbase Console and click "Create an account", complete the registration form and you will be taken to the console.
3. Once you're in the Fleetbase console select the "Developers" button in the top navigation. Next, select API Keys from the menu in the Developers section, and create a new API key. Copy your secret key generated, you'll need it later.
4. Once you have both required API keys open your .env file.

In your .env file supply your Fleetbase API secret key, and additionally you will need a Google Maps API Key. Lastly, you'll also need to supply your app/bundle identifier, and an APP_NAME key.

Your .env file should look something like this once you're done.

# .env
APP_NAME=
APP_IDENTIFIER=io.navigator.app
APP_LINK_PREFIX=navigator://
FLEETBASE_HOST=https://127.0.0.1:8000
FLEETBASE_KEY=

Running in Simulator

Once you have completed the installation and environment configuration, you're all set to give your app a test-drive in the simulator so you can play around.

Run the App in iOS Simulator

npx react-native run-ios

Run the App in Android Simulator

npx react-native run-android

Documentation

See the documentation webpage.

If you would like to make contributions to the Fleetbase Javascript SDK documentation source, here is a guide in doing so.

Roadmap

• COMING SOON