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

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

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

Requisitos previos

Para completar este tutorial, necesita:

Puede completar este tutorial en Mac o Windows. Se requiere un sistema windows para compilar y ejecutar la versión Windows plataforma universal (UWP). Se requiere un equipo Mac para compilar la versión de iOS.

Descarga del proyecto de inicio rápido de Xamarin.Forms

El proyecto de inicio rápido de Xamarin.Forms se encuentra en la carpeta del repositorio samples/xamarin-formssamples/xamarin-forms GitHub aplicación. Puede descargar el repositorio como un archivo ZIP y, acontinuación, desempaquetarlo. Los archivos se crearán en la azure-mobile-apps-main carpeta .

Una vez descargado, abra un terminal y cambie el directorio a la ubicación de los archivos.

Implementación del servicio de back-end

Para implementar el servicio de inicio rápido, primero inicie sesión en Azure con la CLI de Azure:

az login

Se abrirá un explorador web para completar la autorización.

Si es necesario, seleccione una suscripción.

Crear un grupo de recursos

Use lo siguiente para crear un grupo de recursos:

az group create -l westus -n zumo-quickstart

Este comando crea un grupo de recursos llamado zumo-quickstart que contendrá todos los recursos que creemos. Reemplace westus por otra región si no tiene acceso a la región westus, o si prefiere una región más cercana a su ubicación.

Implementación del back-end en Azure

El servicio se compone de los siguientes recursos:

  • Un plan de hospedaje de Azure App Service en el plan Gratis.
  • Un sitio web hospedado dentro del plan de hospedaje de Azure App Service.
  • Un servidor de Azure SQL.
  • Una base de datos de Azure SQL en el nivel Básico (incurre en costos).

La base de datos de Azure SQL es el único recurso que incurre en costos. Para obtener información detallada, vea Precios.

Para implementar los recursos, escriba los siguientes comandos:

cd samples/nodejs
az deployment group create -n ZumoQuickstart -g zumo-quickstart --template-file ./azuredeploy.json

Una vez completado, ejecute el siguiente comando para ver las salidas:

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

Este comando muestra información sobre la implementación que necesita para desarrollar la aplicación móvil. El nombre de usuario y la contraseña de la base de datos son útiles para acceder a la base de datos a través de Azure Portal. A continuación se usa el nombre del servicio de aplicaciones y el punto de conexión público se inserta en el código más adelante.

Por último, implemente el servidor de Azure Mobile Apps en el servicio de aplicaciones creado:

az webapp deployment source config-zip -g zumo-quickstart --name zumo-XXXXXXXX --src ./zumoserver.zip

Reemplace zumo-XXXXXXXX por el nombre del servicio de aplicaciones; se muestra en la lista de salidas. En unos 2 o 3 minutos, el servidor de Azure Mobile Apps estará listo para usarse. Puede usar un explorador web para confirmar que el back-end funciona. Apunte el explorador web al punto de conexión público y anexe /tables/TodoItem (por ejemplo, https://zumo-XXXXXXXX.azurewebsites.net/tables/TodoItem). El explorador mostrará un error sobre un parámetro X-ZUMO-VERSION que falta si el servidor funciona correctamente.

Eliminación de los recursos

Ahora que ha completado el tutorial de inicio rápido, puede eliminar los recursos con az group delete -n zumo-quickstart.

El tutorial consta de tres partes (incluida esta sección). No elimine los recursos antes de completar el tutorial.

Configuración del proyecto de inicio rápido de Xamarin.Forms

Abra la ZumoQuickstart solución en Visual Studio (ubicado en samples/xamarin-forms ). Busque el proyecto ZumoQuickstart compartido. Edite la Constants.cs clase para reemplazar por la dirección URL de BackendUrl back-end. Por ejemplo, si la dirección URL de back-end era https://zumo-abcd1234.azurewebsites.net , el archivo tendría el siguiente aspecto:

namespace ZumoQuickstart
{
    /// <summary>
    /// Constants used to configure the application.
    /// </summary>
    public static class Constants
    {
        /// <summary>
        /// The base URL of the backend service within Azure.
        /// </summary>
        public static string BackendUrl { get; } = "https://zumo-abcd1234.azurewebsites.net";
    }
}

Guarde el archivo.

Ejecución de la aplicación Android

Haga clic con el botón derecho ZumoQuickStart.Android en el proyecto y seleccione Establecer como inicio ZumoQuickStart.Android. El botón "Iniciar" de la cinta de opciones superior mostrará un emulador de Android. Asegúrese de que la opción Cualquier configuración de CPU está seleccionada y se muestra un emulador de Android adecuado:

Configuración de Android

Presione F5 para compilar y ejecutar el proyecto. El emulador de Android se iniciará, Visual Studio instalará la aplicación y, por último, se iniciará la aplicación.

Escriba texto en el campo Agregar nuevo elemento y presione Entrar o haga clic en el botón Agregar elemento. El elemento se agrega a la lista. Haga clic en el elemento para establecer o borrar la marca "completado".

Inicio rápido de Android

Ejecución de la aplicación iOS

Nota

Si está ejecutando Visual Studio en Windows, DEBE seguir la guía emparejar con Mac. Recibirá errores al compilar o ejecutar aplicaciones iOS sin un equipo Mac emparejado.

Haga clic con el botón derecho ZumoQuickStart.iOS en el proyecto y seleccione Establecer como inicio ZumoQuickStart.iOS. El botón "Iniciar" de la cinta de opciones superior mostrará un dispositivo iOS. Asegúrese de que la configuración de iPhoneSimulator está seleccionada:

Configuración de iOS

Presione F5 para compilar y ejecutar el proyecto. Se iniciará el simulador de iOS, Visual Studio instalará la aplicación y, por último, se iniciará la aplicación. Si ya ha ejecutado la versión de Android, se mostrarán los elementos que escribió al ejecutar la aplicación.

Escriba texto en el campo Agregar nuevo elemento y presione Entrar o haga clic en el botón Agregar elemento. El elemento se agrega a la lista. Haga clic en el elemento para establecer o borrar la marca "completado".

Inicio rápido de iOS

Ejecución de la aplicación para UWP

Nota

Debe usar Visual Studio en Windows ejecutar la versión de UWP de la aplicación.

Haga clic con el botón derecho en el proyecto y seleccione Establecer como ZumoQuickStart.UWPZumoQuickStart.UWP. Se mostrará el botón "Iniciar" en la cinta de opciones superior. Seleccione la configuración x86 y la máquina local:

Configuración de UWP

Presione F5 para compilar y ejecutar el proyecto. Si selecciona:

Inicio rápido para UWP

Pasos siguientes

Continúe para implementar la sincronización de datos sin conexión.