Blog

How To Build a Food Delivery App Like UberEats Using NextBillion.ai

3 mins Read
March 20, 2023

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.

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:

  1. Basic knowledge of JavaScript and Node.js
  2. Text editor of your choice (e.g., VS Code, Atom, Sublime, etc.)
  3. Node.js and NPM installed on your machine
  4. 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 helps you find the most efficient routes to cover multiple destinations

Steps covered in this tutorial:

  1. Setting up NextBillion.ai
  2. Setting up the development environment
  3. Creating the app
  4. 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.

  1. Go to the NextBillion.ai website and create an account
  2. After creating your account, go to the dashboard and click ‘API Keys’ on the left
  3. Click ‘Create New API Key’ to generate a new key
  4. 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.

  1. Open your terminal and create a new folder for your app
  2. Change into the new folder by typing cd your-folder-name
  3. Run npm init to initialize a new NPM package
  4. 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.

  1. Create a new file called app.js in your app folder
  2. 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');
  
  1. Create a new instance of the express app:

const app = express();
	  
  1. 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

Integrating NextBillion.ai APIs

Now with our app set up, let’s integrate NextBillion.ai APIs. Here’s how to use the 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!

Ready to get started?

Talk to Sales