Skip to content

Latest commit

 

History

History
128 lines (88 loc) · 6.77 KB

index.md

File metadata and controls

128 lines (88 loc) · 6.77 KB
Raw
title description author ms.service ms.topic ms.date ms.author recommendations
Build a Xamarin.Forms app with Azure Mobile Apps
Get up to speed with Xamarin.Forms and Azure Mobile Apps with our tutorial.
adrianhall
mobile-services
article
01/12/2024
adhal
false

Build a Xamarin.Forms app with Azure Mobile Apps

This tutorial shows you how to add a cloud-based backend service to a cross-platform mobile app by using Xamarin.Forms and an Azure mobile app backend. You'll 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 other Xamarin Forms tutorials using the Mobile Apps feature in Azure App Service.

Prerequisites

You can complete this tutorial on Mac or Windows. To complete this tutorial, you need:

  • Visual Studio 2022 with the following workloads.
    • ASP.NET and web development
    • Azure development
    • Mobile development with .NET
  • An Azure account.
  • The Azure CLI.
    • Sign in with az login and select an appropriate subscription before starting.
  • (Optional) The Azure Developer CLI.
  • 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)

If compiling the iOS edition of the app, you must have an available Mac:

  • Install XCode
  • Open Xcode after installing so that it can add any extra required components.
  • Once open, select XCode Preferences... > Components, and install an iOS simulator.
  • If completing the tutorial on Windows, follow the guide to Pair to Mac.

Download the sample app

[!INCLUDE Instructions to download the sample from GitHub on Windows.]

Deploy the backend to Azure

Note

If you have already deployed the backend from another quick start, you can use the same backend and skip this step.

[!INCLUDE Instructions for deploying a backend service on Windows.]

Configure the sample app

[!INCLUDE Instructions for configuring the sample code on Windows.]

Build and run the Android app

  1. In the solutions explorer, expand the xamarin-forms folder.

  2. Right-click the TodoApp.Forms.Android project and select Set as Startup Project.

  3. In the top bar, select Any CPU configuration and the TodoApp.Forms.Android target:

    Screenshot showing how to set the run configuration for a Xamarin Forms for Android app.

  4. If you see Android Emulator instead, you haven't created an Android emulator. For more information, see Android emulator setup. To create a new Android emulator:

    • Select Tools > Android > Android Device Manager.
    • Select + New.
    • Select the following options on the left-hand side:
      • Name: quickstart
      • Base Device: Pixel 5
      • Processor: x86_64
      • OS: Android 11.0 - API 30
      • Google APIs: Checked
    • Select Create.
    • If necessary, accept the license agreement. The image will then be downloaded.
    • Once the Start button appears, press Start.
    • If you're prompted about Hyper-V hardware acceleration, read the documentation to enable hardware acceleration before continuing. The emulator will be slow without enabling hardware acceleration.

    [!TIP] Start your Android emulator before continuing. You can do this by opening the Android Device Manager and pressing Start next to your chosen emulator.

  5. Press F5 to build and run the project.

Once the app has started, you'll see an empty list and a text box to add items in the emulator. You can:

  • Enter some text in the box, then press Enter to insert a new item.
  • Select an item to set or clear the completed flag.
  • Press the refresh icon to reload data from the service.

Screenshot of the running Android app.

Build and run the iOS app

Note

You MUST follow the guide to Pair to Mac. You'll receive errors when compiling or running iOS applications without a paired Mac.

  1. In the solutions explorer, expand the xamarin-forms folder.

  2. Right-click the TodoApp.Forms.iOS project and select Set as Startup Project.

  3. In the top bar, select iPhone Simulator configuration and the TodoApp.Forms.iOS target:

    Screenshot showing how to set the run configuration for a Xamarin Forms for i O S app.

  4. Select the iPhone Simulator

  5. Press F5 to build and run the project.

Once the app has started, you'll see an empty list and a text box to add items in the emulator. You can:

  • Enter some text in the box, then press Enter to insert a new item.
  • Select an item to set or clear the completed flag.
  • Press the refresh icon to reload data from the service.

Screenshot of the running i O S app showing the to do list.

Troubleshooting

The remote simulator that ships with Visual Studio 2022 is incompatible with XCode 13.3. You'll receive the following error message:

Screenshot of the error message when launching the i O S simulator.

To work around this issue:

  • Disable the remote simulator (Tools / Options / iOS Settings / uncheck Remote Simulator to Windows). When unchecked, the simulator will run on the Mac instead of on Windows. You can then interact with the simulator directly on your Mac while using the debugger, etc. on Windows.
  • Disable the remote simulator as above, so that the simulator runs on the Mac. Then use a remote desktop app to connect to the Mac desktop from Windows. Remote desktop options include Devolutions Remote Desktop Manager (fast and there’s a free version available), and VNC clients (slower and free).
  • Use a physical device to test instead of the simulator. You can obtain a free provisioning profile to complete the authentication tutorial.

Next steps

Continue the tutorial by adding authentication to the app.