Creación de una aplicación Xamarin.Forms con AzureCreate a Xamarin.Forms app with Azure

Nota

Visual Studio App Center admite servicios integrados de un extremo a otro fundamentales para el desarrollo de aplicaciones móviles.Visual Studio App Center supports end to end and integrated services central to mobile app development. Los desarrolladores pueden usar los servicios de compilación, prueba y distribución para configurar la canalización de integración y entrega continuas.Developers can use Build, Test and Distribute services to set up Continuous Integration and Delivery pipeline. Una vez que se ha implementado la aplicación, los desarrolladores pueden supervisar el estado y el uso de su aplicación con los servicios de análisis y diagnóstico, e interactuar con los usuarios que utilizan el servicio de Push (inserción).Once the app is deployed, developers can monitor the status and usage of their app using the Analytics and Diagnostics services, and engage with users using the Push service. Además, los desarrolladores pueden aprovechar Auth para autenticar a los usuarios y el servicio de datos para almacenar y sincronizar los datos de la aplicación en la nube.Developers can also leverage Auth to authenticate their users and Data service to persist and sync app data in the cloud.

Si está pensando en integrar servicios en la nube en su aplicación para dispositivos móviles, regístrese en App Center hoy mismo.If you are looking to integrate cloud services in your mobile application, sign up with App Center today.

Información generalOverview

En este tutorial se muestra cómo agregar un servicio de back-end basado en la nube a una aplicación móvil Xamarin.Forms mediante la característica Mobile Apps de Azure App Service como back-end.This tutorial shows you how to add a cloud-based back-end service to a Xamarin.Forms mobile app by using the Mobile Apps feature of Azure App Service as the back end. Va a crear tanto un back-end de Mobile Apps nuevo como una aplicación Xamarin.Forms simple de la lista de tareas pendientes que almacene los datos de la aplicación en Azure.You create both a new Mobile Apps back end and a simple to-do list Xamarin.Forms app that stores app data in Azure.

Completar este tutorial es un requisito previo para todos los tutoriales de Mobile Apps para aplicaciones Xamarin.Forms.Completing this tutorial is a prerequisite for all other Mobile Apps tutorials for Xamarin.Forms.

Requisitos previosPrerequisites

Para completar este tutorial, necesitará lo siguiente:To complete this tutorial, you need the following:

  • Una cuenta de Azure activa.An active Azure account. Si no dispone de ninguna cuenta, puede registrarse para obtener una versión de evaluación de Azure y conseguir hasta 10 aplicaciones móviles gratuitas que podrá seguir usando incluso después de que finalice la evaluación.If you don't have an account, you can sign up for an Azure trial and get up to 10 free mobile apps that you can keep using even after your trial ends. Para más información, consulte Obtener una evaluación gratuita de Azure.For more information, see Azure Free Trial.

  • Visual Studio Tools para Xamarin, en Visual Studio 2017 o superior, o Visual Studio para Mac.Visual Studio Tools for Xamarin, in Visual Studio 2017 or later, or Visual Studio for Mac. Consulte la página de instalación de Xamarin para obtener instrucciones.See the Xamarin installation page for instructions.

  • (opcional) Para crear una aplicación iOS, es necesario un equipo Mac con Xcode 9.0 o posterior.(optional) To build an iOS app, a Mac with Xcode 9.0 or later is required. Se puede usar Visual Studio para Mac para desarrollar aplicaciones iOS, o se puede usar Visual Studio 2017 o una versión superior (siempre y cuando el equipo Mac esté disponible en la red).Visual Studio for Mac can be used to develop iOS apps, or Visual Studio 2017 or later can be used (so long as the Mac is available on the network).

Creación de un back-end de Mobile AppsCreate a new Mobile Apps back end

  1. Inicie sesión en el Azure Portal.Sign in to the Azure portal.

  2. Haga clic en Crear un recurso.Click Create a resource.

  3. En el cuadro de búsqueda, escriba Web App.In the search box, type Web App.

  4. En la lista de resultados, seleccione Web App en Marketplace.In the results list, select Web App from the Marketplace.

  5. Seleccione los valores de Suscripción y Grupo de recursos (seleccione un grupo de recursos existente o cree uno nuevo [con el mismo nombre que el de la aplicación]).Select your Subscription and Resource Group (select an existing resource group or create a new one (using the same name as your app)).

  6. Elija un valor de Nombre único de la aplicación web.Choose a unique Name of your web app.

  7. Elija la opción predeterminada Publicar como Código.Choose the default Publish option as Code.

  8. En Pila en tiempo de ejecución, debe seleccionar una versión en ASP.NET o Nodo.In the Runtime stack, you need to select a version under ASP.NET or Node. Se está creando un back-end de .NET, seleccione una versión bajo ASP.NET.If you are building a .NET backend, select a version under ASP.NET. De lo contrario, si se dirige a una aplicación basada en nodos, seleccione una de las versiones en Nodo.Otherwise if you are targeting a Node based application, select one of the version from Node.

  9. Seleccione el valor correcto de Sistema operativo (Linux o Windows).Select the right Operating System, either Linux or Windows.

  10. Seleccione el valor de Región donde quiere que se implemente esta aplicación.Select the Region where you would like this app to be deployed.

  11. Seleccione el valor adecuado de Plan de App Service y haga clic en Revisar y crear.Select the appropriate App Service Plan and hit Review and create.

  12. En Grupo de recursos, seleccione un grupo de recursos existente o cree uno nuevo (con el mismo nombre que su aplicación).Under Resource Group, select an existing resource group or create a new one (using the same name as your app).

  13. Haga clic en Create(Crear).Click Create. Espere unos minutos para que se implemente el servicio correctamente antes de continuar.Wait a few minutes for the service to be deployed successfully before proceeding. Observe el icono de notificaciones (campana) en el encabezado del portal para las actualizaciones de estado.Watch the Notifications (bell) icon in the portal header for status updates.

  14. Una vez completada la implementación, haga clic en la sección Detalles de implementación y seleccione el recurso de tipo Microsoft.Web/sites.Once the deployment is completed, click on the Deployment details section and then click on the Resource of Type Microsoft.Web/sites. Navegará a la aplicación web de App Service que acaba de crear.It will navigate you to the App Service Web App that you just created.

  15. Haga clic en la hoja Configuración bajo Configuración y en Configuración de la aplicación, haga clic en el botón Nueva configuración de la aplicación.Click on the Configuration blade under Settings and in the Application settings, click on the New application setting button.

  16. En la página Agregar o editar la configuración de la aplicación, en el campo Nombre escriba MobileAppsManagement_EXTENSION_VERSION, en el campo Valor escriba Más reciente y haga clic en Aceptar.In the Add/Edit application setting page, enter Name as MobileAppsManagement_EXTENSION_VERSION and Value as latest and hit OK.

Está listo para usar la aplicación web de App Service recién creada como una aplicación móvil.You are all set to use this newly created App Service Web app as a Mobile app.

Creación de una conexión de base de datos y configuración del proyecto de cliente y servidorCreate a database connection and configure the client and server project

  1. Descargue los inicios rápidos del SDK de cliente para estas plataformas:Download the client SDK quickstarts for the following platforms:

    iOS (Objective-C)iOS (Objective-C)
    iOS (Swift)iOS (Swift)
    Android (Java)Android (Java)
    Xamarin.iOSXamarin.iOS
    Xamarin.AndroidXamarin.Android
    Xamarin.FormsXamarin.Forms
    CordovaCordova
    Windows (C#)Windows (C#)

    Nota

    Si usa el proyecto de iOS, debe descargar "azuresdk-iOS-*.zip" de la versión más reciente de GitHub.If you use the iOS project you need to download "azuresdk-iOS-*.zip" from latest GitHub release. Descomprima y agregue el archivo MicrosoftAzureMobile.framework a la raíz del proyecto.Unzip and add the MicrosoftAzureMobile.framework file to the project's root.

  2. Tendrá que agregar una conexión de base de datos o conectarse a una conexión existente.You will have to add a database connection or connect to an existing connection. Primero, determine si podrá crear un almacén de datos o usar uno existente.First, determine whether you’ll create a data store or use an existing one.

    • Crear un nuevo almacén de datos: Si va a crear un almacén de datos, eche un vistazo a esta guía de inicio rápido:Create a new data store: If you’re going to create a data store, use the following quickstart:

      Inicio rápido: Introducción a las bases de datos únicas en Azure SQL DatabaseQuickstart: Getting started with single databases in Azure SQL Database

    • Origen de datos existente: Siga estas instrucciones si quiere usar una conexión de base de datos existenteExisting data source: Follow the instructions below if you want to use an existing database connection

      1. Formato de cadena de conexión de SQL Database - Data Source=tcp:{your_SQLServer},{port};Initial Catalog={your_catalogue};User ID={your_username};Password={your_password}SQL Database Connection String format - Data Source=tcp:{your_SQLServer},{port};Initial Catalog={your_catalogue};User ID={your_username};Password={your_password}

        {your_SQLServer} : nombre del servidor; lo encontrará en la página de información general de la base de datos y suele tener la forma de “nombre_de_servidor.database.windows.net”.{your_SQLServer} Name of the server, this can be found in the overview page for your database and is usually in the form of “server_name.database.windows.net”. {port} : el puerto suele ser 1433.{port} usually 1433. {your_catalogue} : nombre de la base de datos.{your_catalogue} Name of the database. {your_username} : nombre de usuario para acceder a la base de datos.{your_username} User name to access your database. {your_password} : contraseña para acceder a la base de datos.{your_password} Password to access your database.

        Más información sobre el formato de cadena de conexión SQLLearn more about SQL Connection String format

      2. Agregue la cadena de conexión a su aplicación móvil. En App Service, puede administrar las cadenas de conexión para la aplicación mediante la opción Configuración del menú.Add the connection string to your mobile app In App Service, you can manage connection strings for your application by using the Configuration option in the menu.

        Para agregar una cadena de conexión:To add a connection string:

        1. Haga clic en la pestaña Configuración de la aplicación.Click on the Application settings tab.

        2. Haga clic en [+] Nueva cadena de conexión.Click on [+] New connection string.

        3. Deberá proporcionar valores para Nombre, Valor y Tipo para la cadena de conexión.You will need to provide Name, Value and Type for your connection string.

        4. En Nombre, escriba MS_TableConnectionStringType Name as MS_TableConnectionString

        5. El valor debe ser la cadena de conexión que formó en el paso anterior.Value should be the connecting string you formed in the step before.

        6. Si va a agregar una cadena de conexión a una base de datos de SQL Azure, elija SQLAzure en tipo.If you are adding a connection string to a SQL Azure database choose SQLAzure under type.

  3. Azure Mobile Apps tiene varios SDK para back-ends de .NET y Node.js.Azure Mobile Apps has SDKs for .NET and Node.js backends.

    • Back-end de Node.jsNode.js backend

      Si va a usar la aplicación de inicio rápido de Node.js, siga estas instrucciones.If you’re going to use Node.js quickstart app, follow the instructions below.

      1. En Azure Portal, vaya a Tablas fáciles y verá esta pantalla.In the Azure portal, go to Easy Tables, you will see this screen.

        Nodo de tablas fáciles

      2. Asegúrese de que la cadena de conexión SQL ya está agregada en la pestaña Configuración. Después, active la casilla Reconozco que esta acción sobrescribirá el contenido del sitio web y haga clic en el botón Crear tabla TodoItem.Make sure the SQL connection string is already added in the Configuration tab. Then check the box of I acknowledge that this will overwrite all site contents and click the Create TodoItem table button.

        Configuración del nodo de tablas fáciles

      3. En Tablas fáciles, haga clic en el botón + Agregar.In Easy Tables, click the + Add button.

        Botón Agregar del nodo de tablas fáciles

      4. Cree una tabla TodoItem con acceso anónimo.Create a TodoItem table with anonymous access.

        Agregar tabla del nodo de tablas fáciles

    • Back-end de .NET.NET backend

      Si va a usar la aplicación de inicio rápido de .NET, siga estas instrucciones.If you’re going to use .NET quickstart app, follow the instructions below.

      1. Descargue el proyecto de servidor .NET de Azure Mobile Apps desde el repositorio azure-mobile-apps-quickstarts.Download the Azure Mobile Apps .NET server project from the azure-mobile-apps-quickstarts repository.

      2. Compile el proyecto de servidor .NET localmente en Visual Studio.Build the .NET server project locally in Visual Studio.

      3. En Visual Studio, abra el Explorador de soluciones, haga clic con el botón derecho en el proyecto ZUMOAPPNAMEService, elija Publicar y verá la ventana Publish to App Service.In Visual Studio, open Solution Explorer, right-click on ZUMOAPPNAMEService project, click Publish, you will see a Publish to App Service window. Si está trabajando en Mac, puede ver otras formas de implementar la aplicación aquí.If you are working on Mac, check out other ways to deploy the app here.

        Publicación de Visual studio

      4. Seleccione App Service como destino de publicación y haga clic en Seleccionar existente. Después, seleccione Publicar en la parte inferior de la ventana.Select App Service as publish target, then click Select Existing, then click the Publish button at the bottom of the window.

      5. Primero tendrá que iniciar sesión en Visual Studio con su suscripción de Azure.You will need to log into Visual Studio with your Azure subscription first. Seleccione Subscription, Resource Group y luego el nombre de la aplicación.Select the Subscription, Resource Group, and then select the name of your app. Cuando esté listo, haga clic en Aceptar. Se implementará el proyecto de servidor de .NET que tiene localmente en el back-end de App Service.When you are ready, click OK, this will deploy the .NET server project that you have locally into the App Service backend. Cuando termine la implementación, se le redirigirá a http://{zumoappname}.azurewebsites.net/ en el explorador.When deployment finishes, you will be redirected to http://{zumoappname}.azurewebsites.net/ in the browser.

Ejecución de la solución Xamarin.FormsRun the Xamarin.Forms solution

Para abrir la solución, se necesita Visual Studio Tools para Xamarin (consulte las instrucciones de instalación de Xamarin).The Visual Studio Tools for Xamarin are required to open the solution, see the Xamarin installation instructions. Si las herramientas ya están instaladas, siga estos pasos para descargar y abrir la solución:If the tools are already installed, follow these steps to download and open the solution:

Visual Studio (Windows y Mac)Visual Studio (Windows and Mac)

  1. Vaya a Azure Portal y diríjase a la aplicación móvil que ha creado.Go to the Azure portal and navigate to the mobile app that you created. En la hoja Overview, busque la dirección URL que es el punto de conexión público de la aplicación móvil.On the Overview blade, look for the URL which is the public endpoint for your mobile app. Por ejemplo, el nombre de sitio para el nombre de mi aplicación "test123" será https://test123.azurewebsites.net.Example - the sitename for my app name "test123" will be https://test123.azurewebsites.net.

  2. Abra el archivo Constants.cs en esta carpeta - xamarin.forms/ZUMOAPPNAME.Open the file Constants.cs in this folder - xamarin.forms/ZUMOAPPNAME. El nombre de la aplicación es ZUMOAPPNAME.The application name is ZUMOAPPNAME.

  3. En la clase Constants.cs, reemplace la variable ZUMOAPPURL con el punto de conexión público anterior.In Constants.cs class, replace ZUMOAPPURL variable with public endpoint above.

    public static string ApplicationURL = @"ZUMOAPPURL";

    se convierte enbecomes

    public static string ApplicationURL = @"https://test123.azurewebsites.net";

  4. Siga estas instrucciones para ejecutar los proyectos de Android o Windows y, si hay un equipo Mac en red disponible, el proyecto de iOS.Follow the instructions below to run the Android or Windows projects; and if there is a networked Mac computer available, the iOS project.

(Opcional) Ejecución del proyecto de Android(Optional) Run the Android project

En esta sección, ejecutará el proyecto de Xamarin.Android.In this section, you run the Xamarin.Android project. Puede omitir esta sección si no está trabajando con dispositivos Android.You can skip this section if you are not working with Android devices.

Visual StudioVisual Studio

  1. Haga clic con el botón derecho en el proyecto de Android (Droid) y, después, seleccione Establecer como proyecto de inicio.Right-click the Android (Droid) project, and then select Set as StartUp Project.

  2. En el menú Compilar, seleccione Administrador de configuración.On the Build menu, select Configuration Manager.

  3. En el cuadro de diálogo Administrador de configuración, active las casillas Compilar e Implementar junto al proyecto de Android, y asegúrese de que el proyecto de código compartido tenga activada la casilla Compilar.In the Configuration Manager dialog box, select the Build and Deploy check boxes next to the Android project, and ensure the shared code project has the Build box checked.

  4. Para compilar el proyecto e iniciar la aplicación en un emulador de Android, presione la tecla F5 o haga clic en el botón Iniciar.To build the project and start the app in an Android emulator, press the F5 key or click the Start button.

Visual Studio para MacVisual Studio for Mac

  1. Haga clic con el botón derecho en el proyecto de Android y, después, seleccione Establecer como proyecto de inicio.Right-click the Android project, and then select Set As Startup Project.

  2. Para compilar el proyecto e iniciar la aplicación en un emulador de Android, seleccione el menú Ejecutar y, luego, Iniciar depuración.To build the project and start the app in an Android emulator, select the Run menu, then Start Debugging.

En la aplicación, escriba un texto significativo, como Aprender Xamarin, y seleccione el botón del signo más ( + ).In the app, type meaningful text, such as Learn Xamarin, and then select the plus sign (+).

Aplicación de tareas pendientes de Android

Esta acción envía una solicitud POST al nuevo back-end Mobile Apps hospedado en Azure.This action sends a post request to the new Mobile Apps back end that's hosted in Azure. Los datos de la solicitud se insertan en la tabla TodoItem.Data from the request is inserted into the TodoItem table. El back-end de Mobile Apps devuelve los elementos almacenados en la tabla y los datos se muestran en la lista.Items that are stored in the table are returned by the Mobile Apps back end, and the data is displayed in the list.

Nota

El código al que accede el back-end de Mobile Apps se encuentra en el archivo de C# TodoItemManager.cs del proyecto de código compartido de la solución.The code that accesses your Mobile Apps back end is in the TodoItemManager.cs C# file of the shared code project in the solution.

(Opcional) Ejecución del proyecto de iOS(Optional) Run the iOS project

En esta sección, ejecutará el proyecto de Xamarin.iOS para dispositivos iOS.In this section, you run the Xamarin.iOS project for iOS devices. Puede omitir esta sección si no está trabajando con dispositivos iOS.You can skip this section if you are not working with iOS devices.

Visual StudioVisual Studio

  1. Haga clic con el botón derecho en el proyecto de iOS y, después, seleccione Establecer como proyecto de inicio.Right-click the iOS project, and then select Set as StartUp Project.

  2. En el menú Compilar, seleccione Administrador de configuración.On the Build menu, select Configuration Manager.

  3. En el cuadro de diálogo Administrador de configuración, active las casillas Compilar e Implementar junto al proyecto de iOS, y asegúrese de que el proyecto de código compartido tenga activada la casilla Compilar.In the Configuration Manager dialog box, select the Build and Deploy check boxes next to the iOS project, and ensure the shared code project has the Build box checked.

  4. Para compilar el proyecto e iniciar la aplicación en el emulador de iPhone, seleccione la tecla F5.To build the project and start the app in the iPhone emulator, select the F5 key.

Visual Studio para MacVisual Studio for Mac

  1. Haga clic con el botón derecho en el proyecto de iOS y, después, seleccione Establecer como proyecto de inicio.Right-click the iOS project, and then select Set As Startup Project.

  2. En el menú Ejecutar, seleccione Iniciar depuración para compilar el proyecto e iniciar la aplicación en el emulador de iPhone.On the Run menu, select Start Debugging to build the project and start the app in the iPhone emulator.

En la aplicación, escriba un texto significativo, como Aprender Xamarin, y seleccione el botón del signo más ( + ).In the app, type meaningful text, such as Learn Xamarin, and then select the plus sign (+).

Aplicación de tareas pendientes de iOS

Esta acción envía una solicitud POST al nuevo back-end Mobile Apps hospedado en Azure.This action sends a post request to the new Mobile Apps back end that's hosted in Azure. Los datos de la solicitud se insertan en la tabla TodoItem.Data from the request is inserted into the TodoItem table. El back-end de Mobile Apps devuelve los elementos almacenados en la tabla y los datos se muestran en la lista.Items that are stored in the table are returned by the Mobile Apps back end, and the data is displayed in the list.

Nota

El código al que accede el back-end de Mobile Apps se encuentra en el archivo de C# TodoItemManager.cs del proyecto de código compartido de la solución.You'll find the code that accesses your Mobile Apps back end in the TodoItemManager.cs C# file of the shared code project in the solution.

(Opcional) Ejecución del proyecto de Windows(Optional) Run the Windows project

En esta sección, ejecutará el proyecto de Plataforma universal de Windows (UWP) de Xamarin.Forms para dispositivos Windows.In this section, you run the Xamarin.Forms Universal Windows Platform (UWP) project for Windows devices. Puede omitir esta sección si no está trabajando con dispositivos Windows.You can skip this section if you are not working with Windows devices.

Visual StudioVisual Studio

  1. Haga clic con el botón derecho en cualquier proyecto de UWP y, luego, seleccione Establecer como proyecto de inicio.Right-click any the UWP project, and then select Set as StartUp Project.

  2. En el menú Compilar, seleccione Administrador de configuración.On the Build menu, select Configuration Manager.

  3. En el cuadro de diálogo Administrador de configuración, active las casillas Compilar e Implementar junto al proyecto de Windows, y asegúrese de que el proyecto de código compartido tenga activada la casilla Compilar.In the Configuration Manager dialog box, select the Build and Deploy check boxes next to the Windows project that you chose, and ensure the shared code project has the Build box checked.

  4. Para compilar el proyecto e iniciar la aplicación en un emulador de Windows, presione la tecla F5 o haga clic en el botón Iniciar (que debe poner Equipo Local).To build the project and start the app in a Windows emulator, press the F5 key or click the Start button (which should read Local Machine).

Nota

El proyecto de Windows no se puede ejecutar en macOS.The Windows project cannot be run on macOS.

En la aplicación, escriba un texto significativo, como Aprender Xamarin, y seleccione el botón del signo más ( + ).In the app, type meaningful text, such as Learn Xamarin, and then select the plus sign (+).

Esta acción envía una solicitud POST al nuevo back-end Mobile Apps hospedado en Azure.This action sends a post request to the new Mobile Apps back end that's hosted in Azure. Los datos de la solicitud se insertan en la tabla TodoItem.Data from the request is inserted into the TodoItem table. El back-end de Mobile Apps devuelve los elementos almacenados en la tabla y los datos se muestran en la lista.Items that are stored in the table are returned by the Mobile Apps back end, and the data is displayed in the list.

Aplicación de tareas pendientes de UWP

Nota

Encontrará el código con el que se accede al back-end de Mobile Apps en el archivo de C# TodoItemManager.cs del proyecto de biblioteca de clases portable de la solución.You'll find the code that accesses your Mobile Apps back end in the TodoItemManager.cs C# file of the portable class library project of your solution.

solución de problemasTroubleshooting

Si tiene problemas para compilar la solución, ejecute el administrador de paquetes NuGet y actualice a la versión más reciente de Xamarin.Forms y, en el proyecto de Android, actualice los paquetes de compatibilidad de Xamarin.Android.If you have problems building the solution, run the NuGet package manager and update to the latest version of Xamarin.Forms, and in the Android project, update the Xamarin.Android support packages. Puede que los proyectos de inicio rápido no incluyan las versiones más recientes.Quickstart projects might not always include the latest versions.

Tenga en cuenta que todos los paquetes de soporte a los que se hace referencia en el proyecto Android deben tener la misma versión.Please note that all the support packages referenced in your Android project must have the same version. El paquete NuGet para Azure Mobile Apps tiene una dependencia Xamarin.Android.Support.CustomTabs para la plataforma Android, por lo que si el proyecto usa paquetes de compatibilidad más recientes, debe instalar este paquete con la versión requerida directamente para evitar conflictos.The Azure Mobile Apps NuGet package has Xamarin.Android.Support.CustomTabs dependency for Android platform, so if your project uses newer support packages you need to install this package with required version directly to avoid conflicts.