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.
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.
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.
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.
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.
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.
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)
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.
4) Back in http://manage.windowsazure.com , click the Data tab and then click TodoItems table.
This lets us browse data inserted by app into table.