Leer en inglés

Compartir a través de

Creación de una aplicación de Xamarin.iOS

  • Artículo

Información general

En este tutorial se muestra cómo agregar un servicio back-end basado en la nube a una aplicación móvil de Xamarin.iOS mediante un back-end de aplicación móvil de Azure. Cree un nuevo back-end de aplicación móvil y una lista de tareas pendientes de simple aplicación de Xamarin.iOS que almacene los datos de la aplicación en Azure.

Completar este tutorial es un requisito previo para todos los demás tutoriales de Xamarin.iOS sobre el uso de la característica Mobile Apps en Azure App Service.

Prerrequisitos

Para completar este tutorial, debe cumplir los siguientes requisitos previos:

  • Una cuenta de Azure activa. Si no tiene una cuenta, regístrese para obtener una evaluación de Azure y obtenga hasta 10 aplicaciones móviles gratuitas que pueda seguir usando incluso después de que finalice la prueba. Para obtener más información, consulte Evaluación gratuita de Azure.
  • Visual Studio para Mac. Consulte la configuración e instalación de para Visual Studio para Mac
  • Un equipo Mac con Xcode 9.0 o posterior.

Creación de un back-end de aplicación móvil de Azure

  1. Inicie sesión en Azure Portal.

  2. Haga clic en Crear un recurso.

  3. En el cuadro de búsqueda, escriba Web App.

  4. En la lista de resultados, seleccione Web App en Marketplace.

  5. Seleccione su Suscripción y Grupo de Recursos (seleccione un grupo de recursos existente o cree uno nuevo (con el mismo nombre que su aplicación)).

  6. Elija un nombre único de la aplicación web.

  7. Elija la opción predeterminada Publicar como Código.

  8. En la pila runtime, debe seleccionar una versión de ASP.NET o Node.js. Si va a compilar un back-end de .NET, seleccione una versión en ASP.NET. De lo contrario, si tiene como destino una aplicación basada en node, seleccione una de las versiones de Node.

  9. Seleccione el sistema operativo correcto , ya sea Linux o Windows.

  10. Seleccione la región donde desea que se implemente esta aplicación.

  11. Seleccione el plan de App Service adecuado y presione Revisar y crear.

  12. En grupo de recursos, seleccione un grupo de recursos existente o cree uno nuevo (con el mismo nombre que la aplicación).

  13. Haga clic en Crear. Espere unos minutos para que el servicio se implemente correctamente antes de continuar. Observe el icono de Notificaciones (campana) en el encabezado del portal para actualizaciones de estado.

  14. Una vez completada la implementación, haga clic en la sección Detalles de implementación y, a continuación, haga clic en el recurso de tipo Microsoft.Web/sites. Se le dirigirá a la aplicación web de servicio de aplicaciones que acaba de crear.

  15. Haga clic en la hoja de Configuración en Configuración y, en la sección Configuración de la aplicación, haga clic en el botón Nueva configuración de la aplicación.

  16. En la página Agregar/Editar configuración de la aplicación, escriba Nombre como MobileAppsManagement_EXTENSION_VERSION y Valor como última versión y presione Aceptar.

Todos están configurados para usar esta aplicación web de App Service recién creada como una aplicación móvil.

Creación de una conexión de base de datos y configuración del proyecto de cliente y servidor

  1. Descargue las guías de inicio rápido del SDK de cliente para las siguientes plataformas:

    iOS (Objective-C)
    iOS (Swift)
    Android (Java)
    Xamarin.iOS
    Xamarin.Android
    Xamarin.Forms
    Córdoba
    Windows (C#)

    Nota

    Si usa el proyecto de iOS, debe descargar "azuresdk-iOS-*.zip" de versión más reciente de GitHub. Descomprima y agregue el archivo MicrosoftAzureMobile.framework a la raíz del proyecto.

  2. Tendrá que agregar una conexión de base de datos o conectarse a una conexión existente. En primer lugar, determine si va a crear un almacén de datos o usar uno existente.

    • Crear un nuevo almacén de datos: si va a crear un almacén de datos, use el siguiente inicio rápido:

      Inicio rápido: Introducción a bases de datos individuales en Azure SQL Database

    • origen de datos existente: siga las instrucciones siguientes si desea usar una conexión de base de datos existente.

      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}

        {your_SQLServer} Nombre del servidor, se puede encontrar en la página de información general de la base de datos y normalmente está en forma de "server_name.database.windows.net". {port} normalmente 1433. {your_catalogue} Nombre de la base de datos. {your_username} Nombre de usuario para acceder a la base de datos. {your_password} Contraseña para acceder a la base de datos.

        Más información sobre el formato de cadena de conexión de SQL

      2. Agregue la cadena de conexión a su aplicación móvil En el servicio de aplicación, puede administrar cadenas de conexión para su aplicación mediante la opción Configuración en el menú.

        Para agregar una cadena de conexión:

        1. Haga clic en la pestaña configuración de la aplicación.

        2. Haga clic en [+] Nueva cadena de conexión.

        3. Deberá proporcionar Nombre, Valor y Tipo para su cadena de conexión.

        4. Escriba nombre como MS_TableConnectionString

        5. El valor debe ser la cadena de conexión que formó en el paso anterior.

        6. Si vas a agregar una cadena de conexión a una base de datos de SQL Azure, elige SQLAzure en tipo.

  3. Azure Mobile Apps tiene SDKs para .NET y Node.js backends.

    • Node.js backend

      Si va a usar Node.js aplicación de inicio rápido, siga las instrucciones siguientes.

      1. En Azure Portal, vaya a Tablas fáciles, verá esta pantalla.

        Tablas fáciles de Node

      2. Asegúrese de que la cadena de conexión de SQL ya se ha agregado en la pestaña Configuración. A continuación, active la casilla de Reconozco que esto sobrescribirá todo el contenido del sitio y haga clic en el botón Crear tabla TodoItem.

        Configuración de tablas fáciles del nodo

      3. En Easy Tables, haga clic en el botón + Añadir.

        Botón para añadir tablas fáciles de nodo

      4. Cree una tabla de TodoItem con acceso anónimo.

        Nodo Tablas Fáciles Añadir Tabla

    • backend de .NET

      Si va a usar la aplicación de inicio rápido de .NET, siga las instrucciones que se indican a continuación.

      1. Descargue el proyecto de servidor .NET de Azure Mobile Apps desde el repositorio azure-mobile-apps-quickstarts.

      2. Compile el proyecto de servidor .NET localmente en Visual Studio.

      3. En Visual Studio, abre el Explorador de Soluciones, haz clic con el botón derecho en el Proyecto ZUMOAPPNAMEService, luego haz clic en Publicar , y verás una ventana Publish to App Service. Si está trabajando en Mac, consulte otras formas de implementar la aplicación aquí.

        Publicación de Visual Studio

      4. Seleccione Servicio de aplicaciones como destino de publicación, luego haga clic en Seleccionar Existentey, a continuación, haga clic en el botón Publicar en la parte inferior de la ventana.

      5. Primero deberá iniciar sesión en Visual Studio con la suscripción de Azure. Seleccione el Subscription, Resource Groupy, a continuación, seleccione el nombre de la aplicación. Cuando estés listo, haz clic en Aceptar, se implementará el proyecto de servidor .NET que tienes localmente al back-end de App Service. Cuando finalice la implementación, se le redirigirá a http://{zumoappname}.azurewebsites.net/ en el explorador.

Ejecución de la aplicación Xamarin.iOS

  1. Abra el proyecto de Xamarin.iOS.

  2. Vaya al portal de Azure y navegue a la aplicación móvil que creó. En la hoja Overview, busque la dirección URL que es el punto de conexión público de la aplicación móvil. Ejemplo: el nombre de sitio de mi aplicación "test123" será https://test123.azurewebsites.net.

  3. Abra el archivo QSTodoService.cs en esta carpeta - xamarin.iOS/ZUMOAPPNAME. El nombre de la aplicación es ZUMOAPPNAME.

  4. En la clase QSTodoService, reemplace la variable ZUMOAPPURL por el punto de conexión público arriba.

    const string applicationURL = @"ZUMOAPPURL";

    se convierte en

    const string applicationURL = @"https://test123.azurewebsites.net";

  5. Presione la tecla F5 para implementar y ejecutar la aplicación en un emulador de iPhone.

  6. En la aplicación, escriba texto significativo, como Completar el tutorial y, a continuación, haga clic en el botón + .

    Los datos de la solicitud se insertan en la tabla TodoItem. El back-end de la aplicación móvil devuelve los elementos almacenados en la tabla y los datos aparecen en la lista.

    Nota

    Puede revisar el código que accede al back-end de la aplicación móvil para consultar e insertar datos, que se encuentran en el archivo de ToDoActivity.cs C#.