dsanchezcr / sampledeliveryservice

Sample Web App using Azure Maps, Cosmos DB, Azure App Service, Key Vault and .NET 5 with JavaScript.

Sample Delivery Service (Azure Maps Project)

Overview

The objective of this sample application is to track orders, it stores the customer information with their address, you can edit the order to change the address or marked it as completed. In the home page you can see all the pending deliveries and in the list view you get a table of the orders and a map of which orders are completed and pending. For each order you can request a route from your location to the customer's address, see the details, edit or delete the order. When you create a new order you just need to enter the address and the application automatically will get the street number, city, state and zip code. In each view you will get a map showing the address.

Description

This project is a sample delivery service application using Azure Maps Geospatial APIs to render maps in a web application. It is based on .NET 5 MVC as backend and JavaScript as front end. It connects to Azure Cosmos DB with CRUD operations to store information about orders, Azure Key Vault to store the application secrets and Azure Active Directory to authenticate users and get the token for Azure Maps. Alternative you can use shared Key authentication for Azure Maps.

The following diagram shows the services and interaction of the different components in the application:

Learn Azure Maps

Here are some resources to learn more about Azure Maps:

1. Azure Maps Overview
2. Azure Maos Documentation
3. Azure Maps Web SDK Samples

Deployment

You can use the Azure Resource Manager template called AzureDeploy.json to deploy all the Azure services you will need to run the project. Including Azure Maps, Cosmos DB, Azure App Service plan on Linux and the Key Vault.

Project Setup

After you deploy the Azure resources in your subscription you will need to follow some steps to run the application:

1. You will need an App Registration in your AAD to authenticate Azure Maps. Follow this guide for creating it.
2. You will need to create a secret in Azure Key Vault to store the Cosmos DB connection string.
3. You will need to replace the following lines in the code to include your Azure resources:
   1. Controllers > TokenController.cs > Line 22 & 23: include key vault URL and key vault secret for the Azure Maps.
   2. appsettings.json: Include Cosmos DB URL and Primary Key.
   3. Views > Shared > _layout.cshtml > Line 19: Specify Azure Maps Client Id.
   4. Startup.cs: Line 38: Update App Service URL in order to allow CORS policy in the application.
   5. Properties > launchSettings.json: For local debugging make sure Azure Key Vault URL and Azure Account are specified.

Secret Format for Azure Maps Connection String
 "RunAs=App;AppId=<App Registration Id>;TenantId=<directory>.onmicrosoft.com;AppKey=<App Secret>"

Contributing

This project welcomes contributions and suggestions. If you face an error or have a question please open an issue. Also take a look at the issues that are open to check what features are in the backlog.