Extracting and Uploading data in Cosmos DB using Azure function
In this article we will use Azure Cosmos DB to upload data about employees of an organization and then extracting same data using Azure function. By the end of this article we will have a Node.js application that will be uploading data in Cosmos DB and an simple web application (again in Node js) that will retrieve data using Azure function.
For this we need to create a SQL API account in Azure Cosmos DB. Once your account is created, you can navigate to your Azure Cosmos DB account and there you can click on Quick start which provides you a template of an application which is already configured with your Cosmos DB account so you won’t have get into the complicated details of connecting your application with Cosmos DB. We’ll choose Node.js platform, and click on “Create Items collection” which will provide an option to download a Node.js app and it will also create a default database ToDoList with collection Items. You can simply delete this database as we won’t need it. You can run your downloaded Node.js app and run it using npm install and npm start.
In this application we will create a database of an organization in Cosmos DB and have records of their employees stored in it. We will store name and rating of this employees.
Now we will make some changes into the code of our Node.js app so that it will work according to our needs.
var config = {}
config.host = process.env.HOST || <Your Cosmos DB account’s URI>;
config.authKey = process.env.AUTH_KEY || <Your Cosmos DB account’s Primary key / Secondary key>;
config.databaseId = <Your Database’s id/name>;
config.collectionId = <Your Collection’s id/name>;module.exports = config;
Now we will edit index.jade file which is in view folder of our app which is the default page you see when you run your app. We will modify this according to our requirement. First we’ll replace value of h1 with “Employee’s details” as this will be our headline. Now you can replace the values of td tag that will represents the column name of table with your desired name. Then further you can change the td tags in else block as shown in below code, this will represent name and rating value you entered for you employee. Then you can change the label of input fields with “Employee Name” and “Employee Rating” and label of submit button with “Add employee data”. You can also add even more data other than just name and rating if you want to.
extends layout
block content
h1 Employee’s details by Manager
brform(action=”/completetask”, method=”post”)
table.table.table-striped.table-bordered
tr
td Employee Name
td Employee Rating
td Date
td Delete
if (typeof tasks === “undefined”)
tr
td
else
each task in tasks
tr
td #{task.ename}
td #{task.rating}
— var date = new Date(task.date);
— var day = date.getDate();
— var month = date.getMonth() + 1;
— var year = date.getFullYear();
td #{month + “/” + day + “/” + year}
td
input(type=”checkbox”, name=”#{task.id}”, value=”#{!task.completed}”, checked=task.completed)
button.btn(type=”submit”) Update tasks
hr
form.well(action=”/addtask”, method=”post”)
label Employee Name:
input(name=”ename”, type=”textbox”)
label Employee Rating:
input(name=”rating”, type=”textbox”)
br
button.btn(type=”submit”) Add Employee Details
Now if you run your app and browse to http://localhost:3000/ you’ll be presented with following view :
If add some data then it will show up like this :
yeah… I love F.R.I.E.N.D.S
If you check out our Cosmos DB account you can see there’s already a database named company and it has Employees collection with a document of data we just entered in our Node.js app. And that’s how you can create a simple web app that connects to your Cosmos DB account and upload data in it without you have to interact with it directly.
Now we will use Azure function app to retrieve this data from Cosmos DB. First of all we need to create a function app with Javascript runtime stack. Then we can add a function in our function app by clicking on + button. Then we’ll select In-portal as our development environment and click on view more template. Since we want to access our data using HTTP request, we will select HTTP trigger and name our function whatever we want like access-data and create it. To read data from the database, we will add an input binding to our function. For this we’ll select integrate and click on new input button and choose Azure Cosmos DB from below options. If it shows Extension need to be install, then simply install it.
We’ll use “employee” as document parameter name, select new in Azure Cosmos DB account connection it will show our Cosmos DB then select it as it specify to which Cosmos DB our function is connected. We’ll specify the collection and database name as our Cosmos DB that is Employees and company and in SQL query we’ll type our query. This query can be according to your requirement, in our case we want rating or we could also get complete information of an employee by it’s name so that will be our query. And we’ll save our configurations.
Now we need to edit our code in following way :
module.exports = function (context, req) {
var employee = context.bindings.employee
if(employee){
context.res = {
body: { “Employee details “: employee },
headers: {
‘Content-Type’: ‘application/json’
}
};
}
else {
context.res = {
status: 404,
body : “No such employee found”,
headers: {
‘Content-Type’: ‘application/json’
}
};
}context.done();
};Here we’re simply checking whether an employee exist or not. If yes, then we’re getting details of that employee.
To use this function, we have to get it’s URL. We can get it by clicking on </> Get function URL. Copy and save this URL.
We need to embed this URL in a web application. So we will create one more node app and embed this function URL in our web application. Then this web application will be able to execute our Azure function.
We’ll create a Node JS application with an html file that will contain form and input field which will accept name of employee.
<!DOCTYPE html>
<html><head>
<title>Simple login</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head><body><h1>Get Employee details</h1>
<form action="/getEmployeeDetails" method="POST">
<label for="empname">Employee name:</label>
<input id="empname" size="40" autocomplete="off" name="ename">
<br>
<br>
<br>
<button type="submit" class="btn btn-primary">Search employee details</button>
</form></body></html>
You’ll get something like this :
As you can see, we’re redirecting our click action to /getEmployeeDetails. So when we’ll click “Search employee details” button it will redirect to this link. And we’re providing “ename” as name attribute to our input field.
Now we want to configure it in such a way that when we click “Search employee details” button, it will trigger our Azure function which will get the data from our Cosmos DB.
We’ll add following code in server.js file of our web app.
const bodyParser = require("body-parser");
const express = require("express");
const app = express();
var http = require('http');app.use(bodyParser.urlencoded({ extended: false }));app.get('/', (req, res) => {
res.sendFile(`${__dirname}/index.html`);
});app.post('/getEmployeeDetails', (req, res) => {
const name = req.body.ename;
res.writeHead(302,
{Location: '<Your Cosmos DB account key> + &name=' + name});
res.end();});
What we’ve done is that, we’re first extracting name value from request and we’ve added our function URL with “&name=” (because our function query Cosmos DB with name) as location and we’re attaching “name” value to this URL. SO that whenever we’ll click button it will redirect to Azure function URL with our given value.
And that’s it now you can search any employee and get back all the details like rating of that employee back from Cosmos DB using Azure Function.
