Get started with Mobile Services
This tutorial shows you how to add a cloud-based backend service to an app using Azure Mobile Services. In this tutorial, you will create both a new mobile service and a simple To do list app that stores app data in the new mobile service.
A screenshot from the completed app is below:
Completing this tutorial requires the PhoneGap tools (v3.2+ required for Windows Phone 8 projects).
PhoneGap supports developing for multiple platforms. In addition to the PhoneGap tools themselves, you must install the tools for each platform you are targeting:
Create a new mobile service
Follow these steps to create a new mobile service.
Log into the Management Portal. At the bottom of the navigation pane, click +NEW. Expand Compute and Mobile Service, then click Create.
This displays the Create a Mobile Service dialog.
This displays the Specify database settings page. >[AZURE.NOTE]As part of this tutorial, you create a new SQL Database instance and server. You can reuse this new database and administer it as you would any other SQL Database instance. If you already have a database in the same region as the new mobile service, you can instead choose Use existing Database and then select that database. The use of a database in a different region is not recommended because of additional bandwidth costs and higher latencies.
In Name, type the name of the new database, then type Login name, which is the administrator login name for the new SQL Database server, type and confirm the password, and click the check button to complete the process.
You have now created a new mobile service that can be used by your mobile apps.
Create a new PhoneGap app
Once you have created your mobile service, you can follow an easy quickstart in the Management Portal to either create a new app or modify an existing app to connect to your mobile service.
In this section you will create a new PhoneGap app that is connected to your mobile service.
In the Management Portal, click Mobile Services, and then click the mobile service that you just created.
In the quickstart tab, click PhoneGap under Choose platform and expand Create a new PhoneGap app.
This displays the three easy steps to create a PhoneGap app connected to your mobile service.
If you haven't already done so, download and install PhoneGap and at least one of the platform development tools (Windows Phone, iOS, or Android).
Click Create TodoItem table to create a table to store app data.
Under Download and run your app, click Download.
Run your new PhoneGap app
The final stage of this tutorial is to build and run your new app.
Browse to the location where you saved the compressed project files and expand the files on your computer.
Open and run the project according to the instructions below for each platform.
- Windows Phone 8
- Windows Phone 8: Open the .sln file in the platforms\wp8 folder in Visual Studio 2012 Express for Windows Phone.
Press the F5 key to rebuild the project and start the app.
Open the project in the platforms/ios folder in Xcode.
Press the Run button to build the project and start the app in the iPhone emulator, which is the default for this project.
- In Eclipse, click File then Import, expand Android, click Existing Android Code into Workspace, and then click Next.
- Click Browse, browse to the location of the expanded project files, click OK, make sure that the TodoActivity project is checked, then click Finish.
This imports the project files into the current workspace.
From the Run menu, click Run to start the project in the Android emulator.
To be able to run the project in the Android emulator, you must define a least one Android Virtual Device (AVD). Use the AVD Manager to create and manage these devices.
After launching the app in one of the mobile emulators above, type some text into the textbox and then click Add.
This sends a POST request to the new mobile service hosted in Azure. Data from the request is inserted into the TodoItem table. Items stored in the table are returned by the mobile service, and the data is displayed in the list.
Changes to this platform project will be overwritten if the main project is rebuilt with the PhoneGap tools. Instead, make changes in the project's root www directory as outlined in the section below.
Back in the Management Portal, click the Data tab and then click the TodoItem table.
This lets you browse the data inserted by the app into the table.
Make app updates and rebuild projects for each platform
Make changes to code files in the ´www´ directory, which in this case is ´todolist/www´.
Verify that all of the target platform tools are accessible in the system path.
Open a command prompt in the root project directory, and run one of the following platform-specific commands:
Run the following command from the Visual Studio Developer command prompt:
phonegap local build wp8
Open terminal and run the following command:
phonegap local build ios
Open a command prompt or terminal window and run the following command.
phonegap local build android
Open each project in the appropriate development environment as outlined in the previous section.
You can review the code that accesses your mobile service to query and insert data, which is found in the js/index.js file.
Now that you have completed the quickstart, learn how to perform additional important tasks in Mobile Services: