Designing and Deploying a Cloud Application

Using Azure

A. Juturu1, D. Yoon

2

1,2 CIS Department, University of Michigan - Dearborn, Dearborn, Michigan, USA

Contact: dhyoon@unich.edu

Abstract – In this paper we will demonstrate the process of

designing and deploying a cloud application in Microsoft

Azure. The cloud application called “One Click Contact

Saver Application” is designed and implemented using MVC

and deployed in Azure. Clients may register and access the

service thru Azure.

Keywords: Cloud Application, Client, Server, MVC, IIS

1 Introduction

A great deal of work has been done on cloud computing

in general [1]. However programming clouds remains a big

challenge. Microsoft has come up with the cloud control

system called Azure [2] which controls and manages various

aspects of programming and managing clouds based on its

Internet Information System (IIS). In this paper, we will

demonstrate how to design, deploy and manage a cloud

application using Azure [5, 6].

Fig. 1 A Cloud [1]

2 Hosting the Web Application in

Microsoft Azure

Azure is a widely used software system developed by

Microsoft Corporation and intended to develop the modern

cloud applications of any size and complexity, to run the

.NET applications and store the data not on the users’

computers, but at the computing clouds. It provides a way to

host websites as easily as possible. It contains managed

services, pre-built templates, integrated tools which makes

easier to build mobile, enterprise, IOT applications. It

provides storage on the cloud for hosting, running and

maintaining the applications. The simplicity of Azure makes

any user to be more productive. It will just take few minutes

to host your websites in Azure.

Azure cloud system has a wide range of benefits:

Center the title (horizontally) on the page. Leave

approximately 1 centimeter (0.4- inches) between the title

and the name and address of yourself (and of your co-

authors, if any.) Type name(s) and address(s) in 11 points

and center them (horizontally) on the page. Note that authors

are advised not to include their email addresses.

It is a global platform for integration and data sharing

with great productivity, less complexity and of low cost.

It supports wide range of programming languages and

operating systems, tools and devices, frameworks and

databases.

It also supports cross platform applications to run

smoothly and securing the data well.

Azure provides ability to effectively develop and run

wide variety of modern applications, and store data.

Provides two main services - SQL and NoSQL for

analyzing and understanding your data.

2.1 Steps to Host the Web Application

Creating a Web App in App Service

What is a web app? In App Service, a web app is the

computer resource that Azure provides for hosting a website

or web application. These resources may be on shared or

dedicated virtual machines. Our code runs in a managed VM

that is isolated from other customers. The framework used to

develop the application is .Net MVC architecture [3,4]. It

maintains the application framework for us. It includes

deployment of the code, content files, binaries and their

respective directory structure, to the root directory in Azure.

Why to use web app? Web apps provides key features

such as high availability, multiple languages and frameworks,

provides security, visual studio integration.

110 Int'l Conf. e-Learning, e-Bus., EIS, and e-Gov. | EEE'18 |

ISBN: 1-60132-474-X, CSREA Press ©

1. Creating the New Resource Group

2. Creating the Database

Take the connection string as follows.

3. Application in Visual Studio

Applications developed in various platforms and using

various IDE’s can be deployed in Azure. Here, we have

developed our application using .net framework, MVC

architecture in visual studio [3].

4. Publish the Application

Build the application successfully, publish the

application in release mode.

We can publish the application in a few ways such as

creating a File system, deploying the application directly to

azure, through FTP etc.

Int'l Conf. e-Learning, e-Bus., EIS, and e-Gov. | EEE'18 | 111

ISBN: 1-60132-474-X, CSREA Press ©

In general, when we host the application in IIS, we

publish the application using file system. Here, I have

deployed the application directly to Azure web apps to the

resource group we have created in step 2 called as

“OneClickContactSaver”

In this step, we can create our own profile names,

import the published file or host the application in azure.

While deploying to azure, user name and password are

created automatically and the destination URL will be

suggested automatically. Once connection validation is

successful, we can further proceed to the next step.

5. In the database section, give the connection string

which we got from step3.

112 Int'l Conf. e-Learning, e-Bus., EIS, and e-Gov. | EEE'18 |

ISBN: 1-60132-474-X, CSREA Press ©

Place this connection string, in the database entities

section and replace the user name and password which has

been created while creating database in Azure.

6. Preview the settings

And finally published the application successfully and we can

access our application through the URL

http://contactsaver.azurewebsites.net/

3 Application Overview Screenshots

3.1 Login / Sign up page

3.2 Users page

3.3 Adding New User / Sign up Page

Int'l Conf. e-Learning, e-Bus., EIS, and e-Gov. | EEE'18 | 113

ISBN: 1-60132-474-X, CSREA Press ©

3.4 Home Screen after Login

3.5 Contacts Page

3.6 Search Page by Contact Name

3.7 Search Page by Group Name

3.8 Groups Page

3.9 Send Email

3.10 Send Message

3.11 Email to a Group

3.12 Message to a Group

114 Int'l Conf. e-Learning, e-Bus., EIS, and e-Gov. | EEE'18 |

ISBN: 1-60132-474-X, CSREA Press ©

3.13 Logout

4 Conclusions

“OneClick Contact Saver” is a web application

designed and developed to store the huge number of contacts

without any storage limitation and at free of cost. It can be

used to send emails to a specific contact or a group of

contacts or a set of contacts assigned to a specific group at a

time within few seconds. It also provides a privilege to send

messages to a contact number or a set of contact numbers at a

time. In this application, User can save n no. of contacts, edit

the existing contacts and delete the contacts. All the contacts

stored are highly safe and secure as this application is hosted

in Azure, which is one of the best cloud operating system in

the world. User can add multiple groups and assign the

contacts to these groups. Multiple users can access the

application at a time without any performance degradation

and every user signed up with this application has a user

name and password which is protected. The users logged in to

the application can see the contacts, groups saved by them

and the search functionality implemented helps the users to

search the contact either by the contact name or by the group

name they are assigned to. This search functionality helps the

user a lot, as the user can store huge number of contacts with

his/her login. Users can logout from this application so that

their data cannot be misused by others.

OneClick Contact Saver is developed following the best

coding standards and using one of the standard development

frameworks in the current technology.

5 References

[1] https://en.wikipedia.org/wiki/Cloud_computing

[2] Roger Jennings, Cloud Computing with the Windows

Azure Platform, Wrox, 2009.

[3] https://www.asp.net/mvc/overview For Asp.Net MVC

[4] http://www.tutorialsteacher.com/mvc/asp.net-mvc-

tutorials --- For Asp.Net MVC

[5] https://docs.microsoft.com/en-us/azure/app-service-

web/web-sites-deploy -- For Azure services

[6] https://docs.microsoft.com/en-us/azure/app-service-

web/app-service-web-overview --- For Web App Services in

Azure

[7] https://docs.microsoft.com/en-

us/aspnet/core/tutorials/first-mvc-app/ --- For MVC

[8] https://www.w3schools.com/bootstrap/ --- For all

Bootstrap

[9] http://www.conceptdraw.com/examples/microsoft-

azure --- For exploring Azure

[10] https://www.theodinproject.com/courses/html5-and-

css3 --- For Html, CSS

[11] http://www.conceptdraw.com/How-To-

Guide/microsoft-azure --- For exploring Azure

[12] http://www.html5andcss3.org/ --- For Html5 and Css3

[13] A. Juturu, “One Click Contact Saver Application,” MS

Project Report, University of Michigan – Dearbron, Summer,

2017

Int'l Conf. e-Learning, e-Bus., EIS, and e-Gov. | EEE'18 | 115

ISBN: 1-60132-474-X, CSREA Press ©