Build hybrid apps with Cosmosdb + Ionic

I was at the Global Azure Bootcamp recently concluded last week, one of the participant came and asked me, “Hey what is Cosmos DB” I casually responded “Well, that’s Microsoft’s globally distributed, massively scalable, horizontally partitioned, low latency, fully indexed, multi-model NoSQL database”. The immediate question came after that was whether it supports hybrid applications. In this blog I will be explaining how to leverage the features of cosmos db when you’re building hybrid applications.

Ionic framework is an open source library of mobile-optimized components in JavaScript, HTML, and CSS. It provides developers with tools for building robust and optimized hybrid apps which works on Android,IOS and web.  Ionic comes with very native-styled mobile UI elements and layouts that you’d get with a native SDK on iOS or Android.

Let’s see how to build Hybrid application with Ionic and Cosmosdb

PreRequisites:

You need to have npm and node installed on your machine to get started with Ionic.

Step 1: Make sure you’ve installed ionic in your machine with the following command,

ionic -v

Step 2: Install Ionic globally

if it’s not installed, install it by using the command

npm i -g ionic

Step 3: Create a new ionic project

Ionic start is a command to create a new ionic project. You pass in the directory name to create, and the template to use. The template can be a built-in one (tabs, blank) or can point to a GitHub URL.

The aim is to create a simple ToDo application which displays lists of tasks, and user should be able to add new tasks.

Lets create a blank project with the command

 ionic start cosmosdbApp tabs

You will see a new project getting created.

Step 4: Run the ionic app

You can run the app with a simple command by navigating to the folder and then run

Ionic serve

This starts a local web server and opens your browser at the URL, showing the Ionic app in your desktop browser. Remember, ionic is just HTML, CSS and JavaScript!

It will open the application in the default browser with the default app.

If you’re stuck at any point you can refer to my slides on How to get started with Ionic and follow the steps.

https://slides.com/sajeetharansinnathurai/ionicnsbm#/10

Step 5: Create the cosmosdb account on azure portal,

We need to create an cosmosdb account and use the Endpoint and SecretKey in our application. You can follow the

Blog on how to create it from the azure portal

https://sajeetharan.com/2018/03/26/wear-out-the-features-of-azure-cosmosdb-with-aspnetcore-application/

Create a database named “ToDoList” and containeras “Items“.

Once created, lets go back to the application.

Step 6: Lets add Cosmosdb SDK to the project

To consume the Cosmosdb service in the application we need to add the Azure Cosmos Javascript SDK to the project. This can be done with the command

npm i @azure/cosmos

Step 7:  You need to create an interface/model which will be used to save/retrieve the objects from the cosmosdb

Step 8: You need to add two pages home and todo page , home to display the lists of items inside the containerand todo page to add a new item. These two pages can be generated insdie the module with the command,

ionic g page home

Ionic g page todo

Step 9: We need to add a service to embed the logic to communicate with the cosmosdb you can create a new service inside the module as,

ionic g service cosmos

As we need to make use of the available methods inside the @azure/cosmos You can import cosmos with the line,

import * as Cosmos from “@azure/cosmos”;

Now make use of all the available functions in the SDK to add,delete,update items in the cosmosdb.

Step 8: To make application compatible with android/ios , run the following command,

Ionic cordova build ios/android

If you want to make the development faster, you could try building your ionic application with capacitor as well.

Now your hybrid application uses cosmosdb as a backend, with this demo you know how to use cosmosdb as a database for your hybrid application. I hope you should be able to create more applications in the future with cosmosdb and ionic.

You can check the demo application source code from here.

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.