Creación de una aplicación Xamarin.iOSCreate a Xamarin.iOS app

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.iOS con un back-end de Aplicaciones móviles de Azure.This tutorial shows you how to add a cloud-based backend service to a Xamarin.iOS mobile app by using an Azure mobile app backend. Creará tanto un back-end de aplicación móvil nuevo como una aplicación Xamarin.iOS simple de la lista de tareas pendientes que almacene los datos de la aplicación en Azure.You create both a new mobile app backend and a simple Todo list Xamarin.iOS app that stores app data in Azure.

Completar este tutorial es un requisito previo para todos los demás tutoriales de Xamarin.iOS sobre cómo usar la característica Mobile Apps en Azure App Service.Completing this tutorial is a prerequisite for all other Xamarin.iOS tutorials about using the Mobile Apps feature in Azure App Service.

Requisitos previosPrerequisites

Para completar este tutorial, debe cumplir los siguientes requisitos previos:To complete this tutorial, you need the following prerequisites:

Creación de un nuevo back-end de Azure Mobile AppCreate an Azure Mobile App backend

Siga estos pasos para crear un back-end de Mobile App.Follow these steps to create a Mobile App backend.

  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.

Configuración del proyecto de servidorConfigure the server project

Ahora ha aprovisionado un back-end de aplicación móvil de Azure que puede usarse por las aplicaciones del cliente móvil.You have now provisioned an Azure Mobile App backend that can be used by your mobile client applications. Después, descargue un proyecto de servidor para un back-end de "lista de tareas" sencillo y publíquelo en Azure.Next, download a server project for a simple "todo list" backend and publish it to Azure.

Para configurar el proyecto de servidor para que use el back-end de Node.js o. NET, siga los pasos que se indican a continuación.Follow the following steps to configure the server project to use either the Node.js or .NET backend.

  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 aplicación Xamarin.iOSDownload and run the Xamarin.iOS app

  1. En el equipo Mac, abra el Azure Portal en una ventana del explorador.Open the Azure portal in a browser window.

  2. En la hoja de configuración de la aplicación móvil, haga clic en Introducción > Xamarin.iOS.On the settings blade for your Mobile App, click Get Started > Xamarin.iOS. 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.

    Se descarga una aplicación cliente que se conecta a su back-end móvil.A client application that connects to your mobile backend is downloaded. 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 Xamarin Studio (o Visual Studio).Extract the project that you downloaded, and then open it in Xamarin Studio (or Visual Studio).

  4. Presione la tecla F5 para compilar el proyecto e iniciar la aplicación en el emulador de iPhone.Press the F5 key to build the project and start the app in the iPhone emulator.

  5. En la aplicación, escriba texto significativo, como Aprender Xamarin, y haga clic en el botón +.In the app, type meaningful text, such as Learn Xamarin, and then click the + button.

    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 aplicación móvil devuelve los elementos almacenados en la tabla y los datos se muestran en la lista.Items stored in the table are returned by the mobile app backend, and the data is displayed in the list.

Nota

Puede revisar el código que obtiene acceso al back-end de aplicación móvil para consultar e insertar datos en el archivo de C# QSTodoService.cs.You can review the code that accesses your mobile app backend to query and insert data in the QSTodoService.cs C# file.

Pasos siguientesNext steps