Live Charts Using Azure Cosmos DB, Azure Functions, SignalR And WPF - Part I

Introduction

This article series is aimed at teaching you how to use Cosmos DB trigger and HttpTrigger in an Azure function to create a serverless app that can broadcast the data to clients using SignalR. The client can be a desktop/web/mobile client. For this article, I will be using a simple desktop client created using WPF with Material Design. To follow along please make sure you have an Azure account. If you don't have it already you can create one for free by visiting Cloud Computing Services | Microsoft Azure.

This article is part 1 of the series and is aimed at teaching the readers how to create a resource group, a new Azure Cosmos DB, a new Container, add sample items to the DB, and view the data on Data Explorer. You don't need any IDE (like Visual Studio or SSMS) for this article.

Step 1 - Create a new Resource Group

Navigate to Portal.azure.com and login with your Azure credentials (if you don't have Azure account you can create one for free) and click on Resource Group

Click on Create button to create a new resource group

A resource group is like a container that has resources that share the same lifecycle, permissions, and policies. Give a name in Resource group textbox and click on Review+Create button

Finally, click on Create button to create a new resource group. This resource group will hold the cosmos DB, Azure function, and Azure SignalR.

If the resource group is created successfully, it can be viewed in the Resource Group List which can be accessed by clicking the resource group icon on the home page.

Step 2: Add a new Azure Cosmos DB to the resource group

Click on the resource group (LiveCharts in our case) to open the resource group window and click on Create button

In the search box type "cosmos" and select "Azure Cosmos DB" from the list of suggestions that appear

Click on Create button

You can choose one of 6 available API options. We will be using Core (SQL) for the purpose of this tutorial

Make sure the resource group is LiveCharts (or your own resource group), Enter Account Name (you can give any name you want), choose a location and change the capacity mode to serverless

Keep clicking next button till you reach the Review+Create page and click on Create button

If deployment is successful you will see a screen like this. Congratulations! Your new cosmos db is ready to be used, click on Go to resource button to go to your cosmos db

Step 3: Add a new Container (table) to Cosmos DB

Azure Cosmos DB is a NOSQL Db so there are no relational databases here. Containers are the equivalent to tables and data is stored in JSON format. Each record is called Items.

Start by choosing a platform (we will choose .NET for the purpose of this demo) and click on Create 'Items' Container button

Once the Container is created you will see a screen like this and click on Data Explorer on the left menu to access your newly created container

Azure creates a container called ToDoList by default for you. Delete the database by clicking the three dots next to container name and create a new container by clicking New Container option on the top menu

 

When you click new container it will give you a window like this. Choose a container name and database name.

Once your database is created you will see a screen like this. There are 5 important things to look for 

1. Database Name (OrderDB)

2. Container Name (Order)

3. Items (Just below container name. Click on this to open Items tab)

4. Items tab (This will list all your items. Notice Edit filter button and query there)

5. Rightmost pane to show the data

Right now there is no item in our container. Lets start by adding one. Click on New Item menu link 

Add some key value pairs on the right most pane and click save

Add a few more following the same step as above. All the items in your container is listed under items tab. Click on any item to see its data

Summary

At the end of this article, you should have an azure resource group and an Azure Cosmos DB with a new container and some sample items hosted on the Azure cloud. You should also know how to access the data explorer and write SQL-like queries to query the data. The next article in this series will teach you how to create an Azure function using VS 2019 and deploy it to Azure Cloud. 

Thanks for reading and please stay tuned for the next article.

Links for next parts: Part 2, Part 3, Part 4, Part 5, Part 6