The following are screen captures from the completed app:
Windows Store app
Windows Phone Store app
Completing this tutorial is a prerequisite for all other Mobile Services tutorials for Windows Store and Windows Phone Store apps.
To complete this tutorial, you need the following:
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.
In the Create a Mobile Service page, select Create a free 20 MB SQL Database, select .NET runtime, then type a subdomain name for the new mobile service in the URL textbox. Click the right arrow button to go to the next page.
This displays the Specify database settings page.
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.
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 universal Windows 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 Windows under Choose platform and expand Create a new Windows Store app.
This displays the three easy steps to create a Windows Store app connected to your mobile service.
If you haven't already done so, download and install Visual Studio Professional 2013 on your local computer or virtual machine.
Under Download and run your app and service locally, select a language for your Windows Store app, then click Download.
This downloads a solution contains projects for both the mobile service and for the sample To do list application that is connected to your mobile service. Save the compressed project file to your local computer, and make a note of where you save it.
The mobile service project that you download lets you to run your new mobile service right on your local computer or virtual machine. This makes it easy to debug your service code before you even publish it to Azure.
In this section, you will test your new app against the mobile service running locally.
Browse to the location where you saved the compressed project files, expand the files on your computer, and open the solution file in Visual Studio.
In the Solution Explorer in Visual Studio, right-click your service project, click Set as StartUp Project, and then press the F5 key to build the project and start the mobile service locally.
A web page is displayed after the mobile service starts successfully.
To test the store app, right-click your client app project, click Set as StartUp Project, and then press the F5 key to rebuild the project and start the app.
This starts the app, which connects to the local mobile service instance.
In the app, type meaningful text, such as Complete the tutorial, in Insert a TodoItem, and then click Save.
This sends a POST request to the local mobile service. 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 second column in the app.
You can review the code that accesses your mobile service to query and insert data, which is found in the default.js file.
In Visual Studio, right-click the project, click Publish > Microsoft Azure Mobile Services. Instead of using Visual Studio, you may also use Git.
Sign in with Azure credentials and select your service from Existing Mobile Services. Visual Studio downloads your publish settings directly from Azure. Finally, click Publish.
4. In the Shared code project, open the default.js file, locate the code that creates a WindowsAzure.MobileServiceClient instance, comment-out the code that creates this client using localhost and uncomment the code that creates the client using the remote mobile service URL, which looks like the following:
var client = new WindowsAzure.MobileServiceClient( "https://todolist.azure-mobile.net/", "XXXXXX-APPLICATION-KEY-XXXXXX" );
The client will now access the mobile service published to Azure.
5. Press the F5 key to rebuild the project and start the app.
6. In the app, type meaningful text, such as Complete the tutorial, in Insert a TodoItem, and then click Save.
This sends a POST request to the new mobile service hosted in Azure.
7. (Optional) In a universal Windows solution, change the default start up project to the other app and press F5 again and notice that data saved from the previous step is loaded from the mobile service after the app starts.
For more information about universal Windows apps, see Supporting multiple device platforms from a single mobile service.