X
11Jan

Microsoft Azure : Mobile Services - HTML with JavaScript

 


Overview


We will add cloud-based backend service to HTML app using Azure Mobile Services. We will create both new mobile service and simple To do list app that stores app data in new mobile service.

 


Pre-requisites


The following are required to complete:

 We must have one of the following web servers running on our local computer:

  • On Windows: IIS Express. IIS Express is installed by the Microsoft Web Platform Installer.
  • On MacOS X: Python, which should already be installed.
  • On Linux: Python. We must install latest version of Python.

 

We can use any web server to host app, but these are web servers that are supported by downloaded scripts.

  • Web browser that supports HTML5.
  • Azure account.

 


Create new mobile service


Follow these steps to create new mobile service.

1)    Log into http://manage.windowsazure.com . At bottom of navigation pane, click +NEW. Expand Compute and Mobile Service, then click Create.

This displays Create a Mobile Service dialog.

 

1

 

2

 

2)    In Create a Mobile Service dialog, select Create a free 20 MB SQL Database, select JavaScript runtime and then type subdomain name for new mobile service in URL textbox. Click right arrow button to go to next page.

This displays Specify database settings page.

 

3

 

NOTE: We create a new SQL Database instance and server. We can reuse this new database and administer it as we would any other SQL database instance. If we already have a database in same region as new mobile service, we can instead choose Use existing Database and then select that database. The use of database in a different region is not recommended because of additional bandwidth costs and higher latencies.

 

3)    In Name, type name of new database, then type Login name, which is administrator login name for new SQL Database server, type and confirm the password and click the check button to complete process.

 

4

 

5

 

We have now created new mobile service that can be used by our mobile apps.

 


Create new HTML app


Once we have created our mobile service, we can follow easy quick start in Azure classic portal to either create new app or modify existing app to connect to our mobile service.

In this section we will create new HTML app that is connected to our mobile service.

1)    In http://manage.windowsazure.com , click Mobile Services and then click mobile service that we just created.

 

5

 

2)    In quickstart tab, click Windows under Choose platform and expand Create a new HTML app.

This displays 3 easy steps to create and host HTML app connected to our mobile service.

 

3)    Click Create TodoItems table to create table to store app data.

4)    Under Download and run your app, click Download.

 

6

 

This downloads website files for sample To do list application that is connected to our mobile service. Save the compressed file to our local computer, and make note of where we save it.

 

5)    In Configure tab, verify that localhost is already listed in the Allow requests from host names list under Cross-Origin Resource Sharing (CORS). If it's not, type localhost in Host name field and then click Save.

 

IMPORTANT: If we deploy the quick start app to a web server other than localhost, we must add host name of web server to Allow requests from host names list.

 

7

 


Host and run our HTML app


We will host and run our new app on our local computer.

1)    Browse to location where we saved compressed project files, expand files on our computer and launch one of following command files from server subfolder.

  • launch-windows (Windows computers)
  • launch-mac.command (Mac OS X computers)
  • launch-linux.sh (Linux computers)

 

8

 

NOTE: On a Windows computer, type R when PowerShell ask us to confirm that we want to run the script. Our web browser might warn us to confirm that we want to run script. Our web browser might warn us to not run the script because it was downloaded from the internet. When this happens, we must request that browser proceed to load script.

 

This starts a web server on our local computer to host new app.

 

2)    Open URL http://localhost:8000 in web browser to start app.

3)    In app, type meaningful text, such as Complete the tutorial, in Enter new task and then click Add.

This sends POST request to new mobile service hosted in Azure. Data from request is inserted into TodoItem table. Items stored in table are returned by mobile service and data is displayed in second column in app.

 

NOTE: We can review code that accesses our mobile service to query and insert data, which is found in the page.js file.

 

9

 

4)    Back in http://manage.windowsazure.com , click the Data tab and then click TodoItems table.

 

10

 

This lets us browse data inserted by app into table.

 

Related

Azure Blob Storage: The PowerShell Way!

Hi folks!Great to see you again.This blog post is purely based on Azure Blob Storage: The PowerShell...

Read More >

Create a Windows Server 2012 R2 VM using ARM in Azure PowerShell

Hi Folks,In this Blog Post we will learn how to create an Azure ARM Virtual Machine using Azure Powe...

Read More >

Continuous Integration/ Continuous Deployment VSTS

Following the below steps you can build and deploy your ASP.NET  app to Azure from either Visua...

Read More >

How to Sync On-premise AD with Windows Azure AD using Azure AD Connect tool

 Azure AD is a service that provides identity and access management capabilities in the cloud. ...

Read More >

Creating a Point-to-Site Connectivity using Azure Resource Manager

Configure a Point-to-Site connectivity to a VNet using PowerShell (ARM Mode)Task 1: Create a Self-Si...

Read More >

How to Create an Azure Virtual Network by using a Deployment Template

Hello Folks!In this Blog post, we will try to learn how to create an Azure V-Net using an ARM templa...

Read More >

Locking VMs and Resources Groups with Azure Resource Manager using Azure PowerShell

Hello Folks!In this blog post we will be talking about locking down your Azure Resources with Azure ...

Read More >

Microsoft Azure: Implementing Internet Facing Load Balancers using Azure Resource Manager

Howdy Folks!I was exploring Network Load Balancer in Azure Resource Manager and found out that you c...

Read More >

Microsoft Azure Stack : Power of Azure in our datacentre

Why Azure Stack?Microsoft Azure Stack is a new hybrid cloud platform product that enables our organi...

Read More >

Microsoft Azure : Mobile Services - Xamarian.Android with .Net

NOTE: Microsoft Azure recommends Azure App Service Mobile Apps for all new mobile backend deployment...

Read More >

Share

Comments

I read your blog, this is really very informative and knowledgeable. Thanks for sharing this blog.
12/12/2020 12:04:33 PM | Reply
the way you written is also good, you covered up all the points which i searching for & I am impressed by reading this article. Keep writing and sharing educational article like this which can help us to grow our knowledge.
11/27/2020 9:15:07 PM | Reply

Post a Comment

Try DevOpSmartBoard Ultimate complete Azure DevOps End-to end reporting tool

Sign Up

  • Recent
  • Popular
  • Tag
Tags
Monthly Archive
Subscribe
Name

Text/HTML
Text/HTML
Contact Us
  • *
  • *