Compilación de una aplicación de Xamarin.Forms con Azure Mobile Apps

  • Artículo

En este tutorial, se muestra cómo agregar un servicio de back-end basado en la nube a una aplicación móvil multiplataforma mediante Xamarin.Forms y un back-end de aplicación móvil de Azure. Creará tanto un back-end de aplicación móvil nuevo como una aplicación de lista de tareas pendientes sencilla que almacene los datos de la aplicación en Azure.

Debe completar este tutorial antes que otros tutoriales de Xamarin.Forms sobre cómo usar la característica Mobile Apps en Azure App Service.

Requisitos previos

Este tutorial se puede hacer en Mac o Windows. Para completar este tutorial, necesita:

  • Visual Studio 2022 con las cargas de trabajo siguientes.
    • ASP.NET y desarrollo web
    • Desarrollo de Azure
    • Desarrollo móvil con .NET
  • Tiene una cuenta de Azure.
  • La CLI de Azure.
    • Inicie sesión con az login y seleccione una suscripción adecuada antes de empezar.
  • (Opcional) La CLI para desarrolladores de Azure.
  • Un dispositivo virtual Android, con la siguiente configuración:
    • Teléfono: cualquier imagen de teléfono: usamos el Píxel 5 para realizar pruebas.
    • Imagen del sistema: Android 11 (API 30 con API de Google)

Si compila la edición de iOS de la aplicación, debe tener un equipo Mac disponible:

  • Instalación de XCode
  • Abra Xcode después de la instalación para poder agregar los componentes adicionales requeridos.
  • Una vez abierto, seleccione XCode Preferences...>Components (Preferencias de XCode > Componentes) e instale un simulador de iOS.
  • Si completa el tutorial en Windows, siga la guía Emparejar con Mac.

Descarga de la aplicación de ejemplo

  1. Abra el repositorio azure-mobile-apps en el explorador.

  2. Abra la lista desplegable Código y, a continuación, seleccione Descargar ARCHIVO ZIP.

    Screenshot of the Code menu on GitHub.

  3. Una vez completada la descarga, abra la carpeta Descargas y busque el azure-mobile-apps-main.zip archivo.

  4. Haga clic con el botón derecho en el archivo descargado y seleccione Extraer todo....

    Si lo prefiere, puede usar PowerShell para expandir el archivo:

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

Los ejemplos se encuentran en la carpeta samples dentro de los archivos extraídos. El ejemplo del inicio rápido se denomina TodoApp. Para abrir el ejemplo en Visual Studio, haga doble clic en el TodoApp.sln archivo.

Screenshot of the file explorer for the solution.

Implementación del back-end en Azure

Nota:

Si ya ha implementado el back-end desde otro inicio rápido, puede usar el mismo back-end y omitir este paso.

Para implementar el servicio back-end, haremos lo siguiente:

  • Aprovisione un servicio App de Azure y Azure SQL Database en Azure.
  • Use Visual Studio para implementar el código de servicio en el servicio App de Azure recién creado.

Uso de la CLI para desarrolladores de Azure para completar todos los pasos

El ejemplo TodoApp está configurado para admitir la CLI para desarrolladores de Azure. Para completar todos los pasos (aprovisionamiento e implementación):

  1. Instale la CLI para desarrolladores de Azure.
  2. Abra un terminal y cambie el directorio a la carpeta que contiene el TodoApp.sln archivo. Este directorio también contiene azure.yaml.
  3. Ejecute azd up.

Si aún no ha iniciado sesión en Azure, el explorador se inicia para pedirle que inicie sesión. A continuación, se le pedirá que use una suscripción y una región de Azure. A continuación, la CLI para desarrolladores de Azure aprovisiona los recursos necesarios e implementa el código de servicio en la región de Azure y la suscripción que prefiera. Por último, la CLI para desarrolladores de Azure escribe un archivo adecuado Constants.cs .

Puede ejecutar el azd env get-values comando para ver la información de autenticación de SQL si desea acceder directamente a la base de datos.

Si ha completado los pasos con la CLI para desarrolladores de Azure, continúe con el paso siguiente. Si no desea usar la CLI para desarrolladores de Azure, continúe con los pasos manuales.

Cree recursos en Azure.

  1. Abra un terminal y cambie el directorio a la carpeta que contiene el TodoApp.sln archivo. Este directorio también contiene azuredeploy.json.

  2. Asegúrese de haber iniciado sesión y seleccionado una suscripción mediante la CLI de Azure.

  3. Cree un nuevo grupo de recursos:

    az group create -l westus -g quickstart

    Este comando crea el quickstart grupo de recursos en la región Oeste de EE. UU. Puede seleccionar cualquier región que desee, siempre que pueda crear recursos allí. Asegúrese de usar el mismo nombre y región dondequiera que se mencionen en este tutorial.

  4. Cree los recursos mediante una implementación de grupo:

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

    Elija una contraseña segura para la contraseña de SQL Administración istrator. Lo necesitará más adelante al acceder a la base de datos.

  5. Una vez completada la implementación, obtenga las variables de salida, ya que contienen información importante que necesita más adelante:

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

    Una salida de ejemplo es:

    Screenshot of command line results.

  6. Anote cada uno de los valores de las salidas para su uso posterior.

Publicación del código de servicio

Abra el TodoApp.sln en Visual Studio.

  1. En el panel derecho, seleccione el Explorador de soluciones.

  2. Haga clic con el botón derecho en el TodoAppService.NET6 proyecto y seleccione Establecer como proyecto de inicio.

  3. En el menú superior, seleccione Compilar>Publicar TodoAppService.NET6.

  4. En la ventana Publicar , seleccione Destino: Azure y, a continuación, presione Siguiente.

    Screenshot of the target selection window.

  5. Seleccione Destino específico: App de Azure Servicio (Windows) y presione Siguiente.

    Screenshot of the specific target selection window.

  6. Si es necesario, inicie sesión y seleccione un nombre de suscripción adecuado.

  7. Asegúrese de que View está establecido en Grupo de recursos.

  8. Expanda el quickstart grupo de recursos y, a continuación, seleccione la instancia de App Service que se creó anteriormente.

    Screenshot of the app service selection window.

  9. Seleccione Finalizar.

  10. Una vez completado el proceso de creación del perfil de publicación, seleccione Cerrar.

  11. Busque las dependencias del servicio y seleccione los puntos triples junto a la base de datos de SQL Server y, a continuación, seleccione Conectar.

    Screenshot showing the S Q L server configuration selection.

  12. Seleccione Azure SQL Database y, a continuación, seleccione Siguiente.

  13. Seleccione la base de datos de inicio rápido y, a continuación, seleccione Siguiente.

    Screenshot of the database selection window.

  14. Rellene el formulario con el nombre de usuario y la contraseña de SQL que estaban en las salidas de la implementación y, a continuación, seleccione Siguiente.

    Screenshot of the database settings window.

  15. Seleccione Finalizar.

  16. Seleccione Cerrar cuando haya finalizado.

  17. Seleccione Publicar para publicar la aplicación en el servicio App de Azure que creó anteriormente.

    Screenshot showing the publish button.

  18. Una vez publicado el servicio back-end, se abre un explorador. Agregue /tables/todoitem?ZUMO-API-VERSION=3.0.0 a la dirección URL:

    Screenshot showing the browser output after the service is published.

Configuración de la aplicación de ejemplo

La aplicación cliente debe conocer la dirección URL base del back-end para que pueda comunicarse con ella.

Si usó azd up para aprovisionar e implementar el servicio, el Constants.cs archivo se creó automáticamente y puede omitir este paso.

  1. Expanda el TodoApp.Data proyecto.

  2. Haga clic con el botón derecho en el TodoApp.Data proyecto y seleccione Agregar>clase....

  3. Escriba Constants.cs como nombre y seleccione Agregar.

    Screenshot of adding the Constants.cs file to the project.

  4. Abra el archivo y copie el Constants.cs.example contenido (Ctrl-A, seguido de Ctrl-C).

  5. Cambie a Constants.cs, resalte todo el texto (Ctrl-A) y pegue el contenido del archivo de ejemplo (Ctrl-V).

  6. Reemplace por https://APPSERVICENAME.azurewebsites.net la dirección URL de back-end del servicio.

    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";
    }
}

    Puede obtener la dirección URL de back-end del servicio en la pestaña Publicar . Asegúrese de usar una dirección URL https .

  7. Guarde el archivo. (Ctrl-S).

Compilar y ejecutar la aplicación Android

  1. En el explorador de soluciones, expanda la xamarin-forms carpeta .

  2. Haga clic con el botón derecho en el proyecto TodoApp.Forms.Android y seleccione Establecer como proyecto de inicio.

  3. En la barra superior, seleccione Cualquier configuración de CPU y el destino TodoApp.Forms.Android :

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

  4. Si ve Android Emulator en su lugar, no ha creado un emulador de Android. Para obtener más información, consulte Configuración del emulador de Android. Para crear un nuevo emulador de Android:

    • Seleccione Herramientas>Android>Administrador de dispositivos.
    • Seleccione + Nuevo.
    • Seleccione las siguientes opciones en el lado izquierdo:
      • Nombre: quickstart
      • Dispositivo base: Píxel 5
      • Procesador: x86_64
      • SO: Android 11.0 - API 30
      • API de Google: Activada
    • Seleccione Crear.
    • Si es necesario, acepte el contrato de licencia. A continuación, se descargará la imagen.
    • Una vez que aparezca el botón Iniciar , presione Iniciar.
    • Si se le solicita la aceleración de hardware de Hyper-V, lea la documentación para habilitar la aceleración de hardware antes de continuar. El emulador será lento sin habilitar la aceleración de hardware.

    Sugerencia

    Inicie android emulator antes de continuar. Para ello, abra el Administrador de dispositivos android y presione Iniciar junto al emulador elegido.

  5. Presione F5 para compilar y ejecutar el proyecto.

Una vez iniciada la aplicación, verá una lista vacía y un cuadro de texto para agregar elementos en el emulador. Puede:

  • Escriba algún texto en el cuadro y presione Entrar para insertar un nuevo elemento.
  • Seleccione un elemento para establecer o borrar la marca completada.
  • Presione el icono de actualización para volver a cargar los datos del servicio.

Screenshot of the running Android app.

Compilar y ejecutar la aplicación iOS

Nota:

Debe seguir la guía para emparejar con Mac. Recibirá errores al compilar o ejecutar aplicaciones iOS si no tiene un equipo Mac emparejado.

  1. En el explorador de soluciones, expanda la xamarin-forms carpeta .

  2. Haga clic con el botón derecho en el proyecto TodoApp.Forms.iOS y seleccione Establecer como proyecto de inicio.

  3. En la barra superior, seleccione i Teléfono Configuración del simulador y el destino TodoApp.Forms.iOS:

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

  4. Seleccione el simulador de i Teléfono

  5. Presione F5 para compilar y ejecutar el proyecto.

Una vez iniciada la aplicación, verá una lista vacía y un cuadro de texto para agregar elementos en el emulador. Puede:

  • Escriba algún texto en el cuadro y presione Entrar para insertar un nuevo elemento.
  • Seleccione un elemento para establecer o borrar la marca completada.
  • Presione el icono de actualización para volver a cargar los datos del servicio.

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

Solución de problemas

El simulador remoto que se incluye con Visual Studio 2022 no es compatible con XCode 13.3. El siguiente mensaje de error aparecerá:

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

Para evitar este problema:

  • Deshabilite el simulador remoto (Herramientas/ Opciones / iOS Configuración / desactive El simulador remoto en Windows). Cuando se desactiva, el simulador se ejecutará en mac en lugar de en Windows. A continuación, puede interactuar con el simulador directamente en el equipo Mac mientras usa el depurador, etc. en Windows.
  • Deshabilite el simulador remoto como se ha indicado anteriormente para que el simulador se ejecute en el equipo Mac. A continuación, use una aplicación de escritorio remoto para conectarse al escritorio mac desde Windows. Entre las opciones de Escritorio remoto se incluyen Devoluciones del Administrador de Escritorio remoto (rápido y hay una versión gratuita disponible) y clientes de VNC (más lentos y gratuitos).
  • Use un dispositivo físico para probar en lugar del simulador. Puede obtener un perfil de aprovisionamiento gratuito para completar el tutorial de autenticación.

Pasos siguientes

Continúe con el tutorial agregando autenticación a la aplicación.