How To Build a Food Delivery App Like UberEats Using NextBillion.ai
Tags: javascript, programming, tutorial, webdev
Published: 2023-04-10 13:28:03

If you plan on building an app similar to, with a mapping component and location-based functions, you should consider using NextBillion.ai’s APIs and SDKs. 

**This content was originally posted [HERE](https://nextbillion.ai/blog/build-food-delivery-app-like-ubereats?utm_source=dev.to&utm_medium=article&utm_campaign=ubereats+like+app)**

[NextBillion.ai](https://nextbillion.ai/) is a mapping technology platform that offers APIs and SDKs for building location-based applications. With NextBillion.ai, you get access to a variety of tools, such as the Distance Matrix API, Directions API, Navigation SDK, Route Optimization API, Geofencing API, Snap-to-Road API, etc. 

This step-by-step guide will show you how to use NextBillion.ai to build a UberEats-like app.

## Prerequisites
Before we start building our app, here are a few prerequisites:

- Basic knowledge of JavaScript and Node.js
- Text editor of your choice (e.g., VS Code, Atom, Sublime, etc.)
- Node.js and NPM installed on your machine
- A NextBillion.ai account to access the required APIs and SDKs

## NextBillion.ai terminology
Here’s a quick explanation of some of the terms we’ll be using in this tutorial:

- **API key:** An API key is a unique identifier that allows you to authenticate and access NextBillion.ai APIs
- **Distance Matrix API:** The Distance Matrix API calculates the distances and times between two or more locations
- **Route Optimization API:** The [Route Optimization API](https://nextbillion.ai/route-optimization-api) helps you find the most efficient routes to cover multiple destinations

## Steps covered in this tutorial:

- Setting up NextBillion.ai
- Setting up the development environment
- Creating the app
- Integrating NextBillion.ai APIs

Let’s get started!

## Setting up NextBillion.ai

To use NextBillion.ai, you’ll need to create an account and get an API key.

- Go to the [NextBillion.ai](https://nextbillion.ai/) website and create an account
- After creating your account, go to the dashboard and click ‘API Keys’ on the left
- Click ‘Create New API Key’ to generate a new key
- Copy the key and store it in a safe place — you’ll need it later

## Setting up the development environment
Before we start coding, we need to set up our development environment.

- Open your terminal and create a new folder for your app
- Change into the new folder by typing **cd your-folder-name**
- Run **npm init** to initialize a new NPM package
- Follow the prompts to create a new package.json file for your app

## Creating the app
Now that our development environment is set up, let’s create the app.

- Create a new file called **app.js** in your app folder
- Open the file in your text editor and create a new Node.js project by requiring the necessary packages:

javascriptCopy code

```
const express = require('express');
const bodyParser = require('body-parser');
const axios = require('axios');
```
- Create a new instance of the express app:

```
const app = express();
```
- Use body-parser to parse JSON data:

```
app.use(bodyParser.json());
```
**Also read – 

[Measuring Impact of Inaccurate ETAs for an On-Demand Ride/Delivery Organization – Effective ETAs 102](https://nextbillion.ai/blog/measuring-impact-of-inaccurate-etas)**

## Integrating NextBillion.ai APIs

Now with our app set up, let’s integrate [NextBillion.ai](https://nextbillion.ai/) APIs. Here’s how to use the [Distance Matrix API](https://nextbillion.ai/distance-matrix-api) to calculate the distance and time between two locations.

Create a new API endpoint in your **app.js** file:

```
app.get('/distance', async (req, res) => {
	const origin = req.query.origin;
	const destination = req.query.destination;
	const apiKey = process.env.NEXTBILLION_API_KEY;
	const apiUrl = `https://api.nextbillion.ai/maps/api/distancematrix/json?origins=${origin}&destinations=${destination}&key=${apiKey}`;
	const response = await axios.get(apiUrl);
	const distance = response.data.rows[0].elements[0].distance.text;
	const time = response.data.rows[0].elements[0].duration.text;
	res.json({
		distance,
		time
	});
	});

```

- This code will create a new API endpoint called **/distance**; it accepts two query parameters: **origin** and **destination**
- The **apiKey** variable gets the API key we generated earlier
- The **apiUrl** variable stores the URL for the Distance Matrix API, with the **origin**, **destination** and **apiKey** query parameters added
- The **response** variable makes a request to the Distance Matrix API using the **axios** library
- The **distance** and **time** variables extract the distance and time data from the API response
- Finally, the API endpoint returns the **distance** and **time** in a JSON format

Similarly, you can use the Route Optimization API to find the most efficient delivery routes for multiple destinations.

Create a new API endpoint in your **app.js** file:

```
app.post('/optimize-route', async (req, res) => {
	const apiKey = process.env.NEXTBILLION_API_KEY;
	const apiUrl = `https://api.nextbillion.ai/maps/api/route-optimization/json?key=${apiKey}`;
	const body = {
		locations: req.body.locations
	};
	const response = await axios.post(apiUrl, body);
	res.json(response.data);
	});
```

- This code will create a new API endpoint called **/optimize-route;** it accepts an HTTP POST request with a JSON payload containing a list of locations
- The **apiKey** variable gets the API key we generated earlier
- The **apiUrl** variable stores the URL for the Route Optimization API, with the **apiKey** query parameter added
- The **body** variable creates a new JSON payload with the **locations** array extracted from the HTTP request
- The **response** variable makes a request to the Route Optimization API using the **axios** library
- Finally, the API endpoint returns the response from the Route Optimization API in a JSON format

## Final outcome
With the above API endpoints, you can now build a UberEats-like app that uses NextBillion.ai tools to calculate distances and times between locations, and find the most efficient delivery routes to cover multiple destinations.

In this tutorial, we covered the basics of using NextBillion.ai’s APIs to build location-based applications. We also went over how to set up your development environment and create a basic Node.js app that integrates NextBillion.ai APIs. With this knowledge, you can build your own location-based app using NextBillion.ai tools!