Create a Windows app

Overview

This tutorial shows you how to add a cloud-based backend service to a Universal Windows Platform (UWP) app. For more information, see What are Mobile Apps. The following are screen captures from the completed app:

Completed desktop app
Running on a desktop.

Completed phone app
Running on a phone

Completing this tutorial is a prerequisite for all other Mobile App tutorials for UWP apps.

Prerequisites

To complete this tutorial, you need the following:

  • An active Azure account. If you don't have an account, you can sign up for an Azure trial and get up to 10 free mobile apps that you can keep using even after your trial ends. For details, see Azure Free Trial.
  • Visual Studio Community 2015 or a later version.
Note

If you want to get started with Azure App Service before you sign up for an Azure account, go to Try App Service. There, you can immediately create a short-lived starter mobile app in App Service—no credit card required, and no commitments.

Create a new Azure Mobile App backend

Follow these steps to create a new Mobile App backend.

  1. Log in at the Azure Portal.
  2. Click +NEW and type Mobile Apps in Search the marketplace. Select Mobile Apps Quickstart and click Create.

    Azure Portal with Mobile Apps Quickstart highlighted

  3. For the Resource Group, select an existing resource group, or create a new one (using the same name as your app.)
  4. Click Create. Wait a few minutes for the service to be deployed successfully before proceeding.

You have now provisioned an Azure Mobile App backend that can be used by your mobile client applications. Next, you will download a server project for a simple "todo list" backend and publish it to Azure.

Configure the server project

  1. Back in the Mobile App backend, click Settings > Quick start > your client platform.
  2. Under Create a table API, select Node.js for Backend language. Accept the acknowledgment and click Create TodoItem table. This creates a new TodoItem table in your database. Remember that switching an existing backend to Node.js will overwrite all contents! To create a .NET backend instead, follow these instructions.

Download and run the client project

Once you have configured your Mobile App backend, you can either create a new client app or modify an existing app to connect to Azure. In this section, you download a UWP app template project that is customized to connect to your Mobile App backend.

  1. Back in the Quick start blade for your Mobile App backend, click Create a new app > Download, then extract the compressed project files to your local computer.

    Download Windows quickstart project

  2. (Optional) Add the UWP app project to the same solution as the server project. This makes it easier to debug and test both the app and the backend in the same Visual Studio solution, if you choose to do so. To add a UWP app project to the solution, you must be using Visual Studio 2015 or a later version.
  3. With the UWP app as the startup project, press the F5 key to deploy and run the app.
  4. In the app, type meaningful text, such as Complete the tutorial, in the Insert a TodoItem text box, and then click Save.

    Windows quickstart complete desktop

    This sends a POST request to the new mobile app backend that's hosted in Azure.

  5. (Optional) Stop the app and restart it on a different device or mobile emulator.

    Windows quickstart complete phone

    Notice that data saved from the previous step is loaded from Azure after the UWP app starts.

Next steps

  • Add authentication to your app
    Learn how to authenticate users of your app with an identity provider.
  • Add push notifications to your app
    Learn how to add push notifications support to your app and configure your Mobile App backend to use Azure Notification Hubs to send push notifications.
  • Enable offline sync for your app
    Learn how to add offline support your app using an Mobile App backend. Offline sync allows end-users to interact with a mobile app—viewing, adding, or modifying data—even when there is no network connection.