Compartir a través de

Compilación de una aplicación .NET MAUI con Azure Mobile Apps

  • Artículo

Nota

Este producto se retira. Para obtener un reemplazo de proyectos con .NET 8 o posterior, consulte la biblioteca datasync de Community Toolkit.

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

Debe completar este tutorial antes de otros tutoriales de .NET MAUI mediante la característica Mobile Apps en Azure App Service.

Prerrequisitos

Para completar este tutorial, necesita lo siguiente:

  • de Visual Studio 2022 con las cargas de trabajo siguientes:
    • ASP.NET y desarrollo web
    • Desarrollo de Azure
    • Desarrollo móvil con .NET
  • 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 de para desarrolladores de Azure.
  • 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)
  • Un Equipo Mac disponible (para compilar y ejecutar la versión de iOS):
    • Instalación de XCode
    • Abra Xcode después de la instalación para que pueda agregar cualquier componente adicional necesario.
    • Una vez abierto, seleccione Preferencias de XCode...>Componentese instale un simulador de iOS.
    • Siga la guía para Emparejar con Mac.

Se requiere un equipo mac para compilar la versión de iOS.

Puede completar este tutorial en Mac o Windows.

Descarga de la aplicación de ejemplo

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

  2. Abra la lista desplegable Código de y seleccione Descargar archivo ZIP.

    Captura de pantalla del menú Código en GitHub.

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

  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 ejemplos 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 archivo TodoApp.sln.

Captura de pantalla del explorador de archivos de la solución.

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 una instancia de Azure App Service y Azure SQL Database en Azure.
  • Use Visual Studio para implementar el código de servicio en la instancia de Azure App Service recién creada.

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 archivo TodoApp.sln. 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 Constants.cs adecuado.

Puede ejecutar el comando azd env get-values 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 archivo TodoApp.sln. Este directorio también contiene azuredeploy.json.

  2. Asegúrese de que ha iniciado sesión y ha 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 grupo de recursos quickstart 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 administrador de SQL. 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:

    Captura de pantalla de los resultados de la línea de comandos.

  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 Explorador de soluciones.

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

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

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

    Captura de pantalla de la ventana de selección de destino.

  5. Seleccione Destino específico: azure App Service (Windows)y presione Siguiente.

    Captura de pantalla de la ventana de selección de destino específica.

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

  7. Asegúrese de que Vista está establecido en grupo de recursos.

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

    Captura de pantalla de la ventana de selección de App Service.

  9. Seleccione Finalizar.

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

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

    Captura de pantalla que muestra la selección de configuración del servidor S Q L.

  12. Seleccione azure SQL Databasey, después, seleccione Siguiente.

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

    Captura de pantalla de la ventana de selección de la base de datos.

  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.

    Captura de pantalla de la ventana de configuración de la base de datos.

  15. Seleccione Finalizar.

  16. Seleccione Cerrar cuando haya finalizado.

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

    Captura de pantalla que muestra el botón Publicar.

  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:

    Captura de pantalla que muestra la salida del explorador después de publicar el servicio.

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 archivo Constants.cs se creó automáticamente y puede omitir este paso.

  1. Expanda el proyecto de TodoApp.Data.

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

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

    Captura de pantalla de cómo agregar el archivo Constants.cs al proyecto.

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

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

  6. Reemplace el https://APPSERVICENAME.azurewebsites.net por 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 desde la pestaña Publicar . Asegúrese de usar una dirección URL de https.

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

Compilación y ejecución de la aplicación de Android

  1. En el explorador de soluciones, expanda la carpeta maui.

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

  3. En la barra superior, seleccione un emulador de Android adecuado:

    Captura de pantalla que muestra cómo establecer la configuración de ejecución de una aplicación dot net maui para Android.

  4. Si no hay emuladores de Android disponibles, debe crear uno. Para obtener más información, consulte configuración del emulador de Android. Para crear un nuevo emulador de Android:

    • Seleccione Tools>Android>Android Device Manager.
    • 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: comprobado
    • 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 Hyper-V aceleración de hardware, 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.

    Propina

    Inicie android emulator antes de continuar. Para ello, abra android Device Manager 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. Puedes:

  • 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.

Captura de pantalla de la aplicación android en ejecución que muestra la lista de tareas pendientes.

Compilación y ejecución de la aplicación de Windows

  1. En el explorador de soluciones, expanda la carpeta maui.

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

  3. En la barra superior, seleccione máquina Windows.

    Captura de pantalla que muestra cómo establecer la configuración de ejecución para una aplicación dot net maui para Windows.

  4. 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. Puedes:

  • 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.

Captura de pantalla de la aplicación de Windows en ejecución que muestra la lista de tareas pendientes.

Pasos siguientes

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