Build an Uno Platform app with Azure Mobile Apps

In this article

The Uno Platform lets you create .NET UI applications for Windows, macOS, Linux, iOS, Android, and Web Assembly from a single codebase. This tutorial shows you how to add a cloud-based backend service to an Uno Platform Android mobile app by using Azure Mobile Apps and an Azure mobile app backend. You create both a new mobile app backend and a simple Todo list app that stores app data in Azure.

You must complete this tutorial before all other Uno Platform tutorials about using Azure Mobile Apps.

To complete this tutorial, you need:

• Visual Studio 2022 with the following workloads.
  • ASP.NET and web development
  • Azure development
  • .NET desktop development
  • .NET Multi-platform App UI development
• The Uno Platform for Visual Studio extension.
• An Azure account.
• The Azure CLI.
  • Sign in with az login and select an appropriate subscription before starting.
• For Android support, an Android Virtual Device with the following settings:
  • Phone: Any phone image - we use the Pixel 5 for testing.
  • System Image: Android 11 (API 30 with Google APIs)

This tutorial assumes you are using Windows and Visual Studio 2022. We recommend that you walk through the Uno Platform tutorial to become acquainted with the development process for the Uno Platform.

1. Open the azure-mobile-apps repository in your browser.

2. Open the Code drop-down, then select Download ZIP.

   

3. Once the download is complete, open your Downloads folder and locate the azure-mobile-apps-main.zip file.

4. Right-click the downloaded file, and select Extract All....

   If you prefer, you can use PowerShell to expand the archive:

   PowerShell

   C:\Temp> Expand-Archive azure-mobile-apps-main.zip
   

The samples are located in the samples folder within the extracted files. The sample for the quick start is named TodoApp. You can open the sample in Visual Studio by double-clicking the TodoApp.sln file.

To deploy the backend service, we will:

• Use Azure Resource Manager and the Azure CLI to deploy an Azure App Service and Azure SQL Database to Azure.
• Use Visual Studio to publish the service code to the newly created Azure App Service.

1. Open a terminal and change directory to the folder containing the TodoApp.sln file. This directory also contains azuredeploy.json.

2. Ensure you've signed in and selected a subscription using the Azure CLI.

3. Create a new resource group:

   Azure CLI

   az group create -l westus -g quickstart
   

   This command will create the quickstart resource group in the West US region. You can select any region that you wish, providing you can create resources there. Ensure you use the same name and region wherever they're mentioned in this tutorial.

4. Create the resources using a group deployment:

   Azure CLI

   az deployment group create -g quickstart --template-file azuredeploy.json --parameters sqlPassword=MyPassword1234
   

   Pick a strong password for your SQL Administrator password. You'll need it later on when accessing the database.

5. Once the deployment is complete, get the output variables as these hold important information you'll need later on:

   Azure CLI

   az deployment group show -g quickstart -n azuredeploy --query properties.outputs
   

   An example output will be:

   

6. Make a note of each of the values in the outputs for later use.

Open the TodoApp.sln in Visual Studio.

1. In the right-hand pane, select the Solutions Explorer.

2. Right-click the TodoAppService.NET6 project, then select Set as Startup Project.

3. On the top menu, select Build > Publish TodoAppService.NET6.

4. In the Publish window, select Target: Azure, then press Next.

   

5. Select Specific target: Azure App Service (Windows), then press Next.

   

6. If necessary, sign in and select an appropriate Subscription name.

7. Ensure View is set to Resource group.

8. Expand the quickstart resource group, then select the App Service that was created earlier.

   

9. Select Finish.

10. Once the publish profile creation process has completed, select Close.

11. Locate the Service Dependencies and select the triple-dots next to the SQL Server Database, then select Connect.

    

12. Select Azure SQL Database, then select Next.

13. Select the quickstart database, then select Next.

    

14. Fill in the form using the SQL username and password that were in the outputs of the deployment, then select Next.

    

15. Select Finish.

16. Select Close when complete.

17. Select Publish to publish your app to the Azure App Service you created earlier.

    

18. Once the backend service is published, a browser will be opened. Add /tables/todoitem?ZUMO-API-VERSION=3.0.0 to the URL:

    

Your client application needs to know the base URL of your backend so that it can communicate with it.

1. Expand the TodoApp.Data project.

2. Right-click on the TodoApp.Data project, then select Add > Class....

3. Enter Constants.cs as the name, then select Add.

   

4. Open the Constants.cs.example file and copy the contents (Ctrl-A, followed by Ctrl-C).

5. Switch to Constants.cs, highlight all text (Ctrl-A), then paste the contents from the example file (Ctrl-V).

6. Replace the https://APPSERVICENAME.azurewebsites.net with the backend URL of your service.

   namespace TodoApp.Data
   {
       public static class Constants
       {
           /// <summary>
           /// The base URI for the Datasync service.
           /// </summary>
           public static string ServiceUri = "https://demo-datasync-quickstart.azurewebsites.net";
       }
   }
   

   You can obtain the backend URL of your service from the Publish tab. Ensure you use a https URL.

7. Save the file. (Ctrl-S).

1. In the solutions explorer, expand the uno/Platforms folder.

2. Right-click the TodoApp.Uno.Mobile project and select Set as Startup Project.

3. In the top bar, select the Any CPU configuration, TodoApp.Uno.Mobile target. Select a suitable Android emulator to run the application:

   

4. Press F5 to build and run the project.

Once the app has started, you see an empty list with a text box. You can:

• Enter some text, then press the + icon to add the item.

• Set or clear the check box to mark any item as done.

• Press the refresh icon to reload data from the service.

  

Continue the tutorial by adding authentication to the app.