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

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 posterior, 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. Visual Studio para Mac se puede usar para desarrollar aplicaciones de iOS o Visual Studio 2017 o versiones posteriores puede usarse (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

Para crear un nuevo back-end de Mobile Apps, haga lo siguiente:To create a new Mobile Apps back end, do the following:

  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 Mobile Apps.In the search box, type Mobile Apps.

    Azure Portal con inicio rápido de Mobile Apps resaltadoAzure portal with Mobile Apps Quickstart highlighted

  4. En la lista de resultados, seleccione Inicio rápido de Mobile Apps y, después, seleccione Crear.In the results list, select Mobile Apps Quickstart, and then select Create.

  5. Elija un nombre de aplicación único.Choose a unique App name. También formará parte del nombre de dominio de la instancia de App Service.This will also be part of the domain name for your App Service.

  6. 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).

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

Ya ha configurado un back-end de aplicación móvil que pueden usar sus aplicaciones móviles.You have now set up a Mobile App back-end that your mobile applications can use. Después, va a descargar un proyecto de servidor para un back-end de lista de tareas sencillo y lo publicará en Azure.Next, you download a server project for a simple to-do list back end and then publish it to Azure.

Configuración del proyecto de servidorConfigure the server project

Para configurar el proyecto de servidor para que use el back-end de Node.js o. NET, haga lo siguiente:To configure the server project to use either the Node.js or .NET back end, do the following:

  1. Haga clic en el botón App Services, seleccione sucesivamente el back-end de Mobile Apps, Inicio rápido y la plataforma de cliente (iOS, Android, Xamarin, Cordova).Click the App Services button, select your Mobile Apps back end, select Quickstart, and then select your client platform (iOS, Android, Xamarin, Cordova).

    Azure Portal con inicio rápido de Mobile Apps resaltado

  2. Si no hay configurada ninguna conexión de base de datos, cree una haciendo lo siguiente:If a database connection is not configured, create one by doing the following:

    Azure Portal con Mobile Apps: conexión a la base de datos

    a.a. Cree una nueva instancia y un nuevo servidor de SQL Database.Create a new SQL database and server. Puede que tenga que dejar el campo del nombre de la cadena de conexión en el valor predeterminado MS_TableConnectionString para completar el paso 3 siguiente.You may need to leave the connection string name field to the default value of MS_TableConnectionString in order to complete step 3 below.

    Azure Portal con Mobile Apps: creación de una nueva base de datos y un nuevo servidor

    b.b. Espere hasta que se haya creado correctamente la conexión de datos.Wait until the data connection is successfully created.

    Notificación de Azure Portal de la creación correcta de conexión de datos

    c.c. La conexión de datos debe haberse creado correctamente.Data connection must be successful.

    Notificación de Azure Portal: "Ya tiene una conexión de datos"

  3. En 2. Crear una API de tabla, seleccione Node.js para Lenguaje de back-end.Under 2. Create a table API, select Node.js for Backend language.

  4. Acepte la confirmación y seleccione Crear tabla TodoItem.Accept the acknowledgment, and then select Create TodoItem table. Esta acción crea una nueva tabla de elementos pendientes en la base de datos.This action creates a new to-do item table in your database.

    Importante

    El cambio de un back-end existente a Node.js sobrescribe todo el contenido.Switching an existing back end to Node.js overwrites all contents. Para crear un back-end de .NET en su lugar, consulte Trabajar con el SDK del servidor back-end de .NET para Mobile Apps.To create a .NET back end instead, see Work with the .NET back-end server SDK for Mobile Apps.

Descarga y ejecución de la solución Xamarin.FormsDownload and run 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 StudioVisual Studio

  1. Vaya a Azure Portal.Go to the Azure portal.

  2. En la hoja Configuración de la aplicación móvil, haga clic en Inicio rápido (en Implementación) > Xamarin.Forms.On the settings blade for your Mobile App, click Quickstart (under Deployment) > Xamarin.Forms. En el paso 3, haga clic en Crear una nueva aplicación en caso de que no esté seleccionado.Under step 3, click Create a new app if it's not already selected. A continuación, haga clic en el botón Descargar .Next click the Download button.

    Esta acción permite descargar un proyecto que contiene la aplicación cliente que está conectada a la aplicación móvil.This action downloads a project that contains a client application that's connected to your mobile app. Guarde el archivo comprimido del proyecto en el equipo local y anote dónde lo guardó.Save the compressed project file to your local computer, and make a note of where you save it.

  3. Extraiga el proyecto que ha descargado y luego ábralo en Visual Studio.Extract the project that you downloaded, and then open it in Visual Studio.

    Proyecto extraído en Visual Studio

  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.

Visual Studio para MacVisual Studio for Mac

  1. Vaya a Azure Portal.Go to the Azure portal.

  2. En la hoja Configuración de la aplicación móvil, haga clic en Inicio rápido (en Implementación) > Xamarin.Forms.On the settings blade for your Mobile App, click Quickstart (under Deployment) > Xamarin.Forms. En el paso 3, haga clic en Crear una nueva aplicación en caso de que no esté seleccionado.Under step 3, click Create a new app if it's not already selected. A continuación, haga clic en el botón Descargar .Next click the Download button.

    Esta acción permite descargar un proyecto que contiene la aplicación cliente que está conectada a la aplicación móvil.This action downloads a project that contains a client application that's connected to your mobile app. Guarde el archivo comprimido del proyecto en el equipo local y anote dónde lo guardó.Save the compressed project file to your local computer, and make a note of where you save it.

  3. Extraiga el proyecto descargado y, después, ábralo en Visual Studio para Mac.Extract the project that you downloaded, and then open it in Visual Studio for Mac.

    Proyecto extraído en Visual Studio para Mac

  4. Siga las instrucciones para ejecutar los proyectos de Android o iOS.Follow the instructions below to run the Android or iOS projects.

(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 de Azure Mobile Apps tiene la dependencia Xamarin.Android.Support.CustomTabs para la plataforma Android, por lo que si el proyecto usa paquetes de soporte más recientes, tiene que instalar este paquete con la versión necesaria 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.

Pasos siguientesNext steps