Creación de una aplicación iOS

  • Artículo

Información general

En este tutorial se muestra cómo agregar Azure App Service Mobile Apps, un servicio back-end basado en la nube, a una aplicación de iOS. El primer paso es crear un nuevo back-end para dispositivos móviles en Azure. Después, es preciso descargar una sencilla aplicación iOS de lista de tareas de ejemplo que almacena datos en Azure.

Para completar este tutorial, es preciso tener un Mac y una cuenta de Azure

Creación de un nuevo back-end de Aplicaciones móviles 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 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]).

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

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

  8. En Pila en tiempo de ejecución, debe seleccionar una versión en ASP.NET o Nodo. Se está creando un back-end de .NET, seleccione una versión bajo ASP.NET. De lo contrario, si se dirige a una aplicación basada en nodos, seleccione una de las versiones en Nodo.

  9. Seleccione el valor correcto de Sistema operativo (Linux o Windows).

  10. Seleccione el valor de Región donde quiere que se implemente esta aplicación.

  11. Seleccione el valor adecuado de Plan de App Service y haga clic en Revisar y crear.

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

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

  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. Navegará a la aplicación web de App Service que acaba de crear.

  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.

  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.

Está listo para usar la 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 los inicios rápidos del SDK de cliente para estas plataformas:

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

    Nota

    Si usa el proyecto de iOS, debe descargar "azuresdk-iOS-*.zip" de la 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. Primero, determine si podrá crear un almacén de datos o usar uno existente.

    • Creación de un 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 únicas 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; 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”. {port}: el puerto suele ser 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 SQL

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

        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 valores para Nombre, Valor y Tipo para la cadena de conexión.

        4. En Nombre, escriba MS_TableConnectionString

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

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

  3. Azure Mobile Apps tiene varios SDK para back-ends de .NET y Node.js.

    • Back-end de Node.js

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

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

        Nodo de tablas fáciles

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

        Configuración del nodo de tablas fáciles

      3. En Tablas fáciles, haga clic en el botón + Agregar.

        Botón Agregar del nodo de tablas fáciles

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

        Agregar tabla del nodo de tablas fáciles

    • Back-end de .NET

      Si va a usar la aplicación de inicio rápido de .NET, siga estas instrucciones.

      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, 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. Si está trabajando en Mac, puede ver otras formas de implementar la aplicación aquí.

        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.

      5. Primero tendrá que iniciar sesión en Visual Studio con su suscripción de Azure. Seleccione Subscription, Resource Group y luego el nombre de la aplicación. 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. Cuando termine la implementación, se le redirigirá a http://{zumoappname}.azurewebsites.net/ en el explorador.

Ejecución de la aplicación iOS

  1. Abra el proyecto de cliente descargado mediante Xcode.

  2. Vaya a Azure Portal y diríjase a la aplicación móvil que ha creado. En la hoja Overview, busque la dirección URL que es el punto de conexión público de la aplicación móvil. Por ejemplo, el nombre de sitio para el nombre de mi aplicación "test123" será https://test123.azurewebsites.net.

  3. Para proyectos Swift, abra el archivo ToDoTableViewController.swift en esta carpeta: ZUMOAPPNAME/ZUMOAPPNAME/ToDoTableViewController.swift. El nombre de la aplicación es ZUMOAPPNAME.

  4. En el método viewDidLoad(), reemplace el parámetro ZUMOAPPURL por el punto de conexión público anterior.

    let client = MSClient(applicationURLString: "ZUMOAPPURL")

    se convierte en

    let client = MSClient(applicationURLString: "https://test123.azurewebsites.net")

  5. Para proyectos de Objective-C, abra el archivo QSTodoService.m en esta carpeta: ZUMOAPPNAME/ZUMOAPPNAME. El nombre de la aplicación es ZUMOAPPNAME.

  6. En el método init, reemplace el parámetro ZUMOAPPURL por el punto de conexión público anterior.

    self.client = [MSClient clientWithApplicationURLString:@"ZUMOAPPURL"];

    se convierte en

    self.client = [MSClient clientWithApplicationURLString:@"https://test123.azurewebsites.net"];

  7. Presione el botón Ejecutar para compilar el proyecto e iniciar la aplicación en el simulador de iOS.

  8. En la aplicación, haga clic en el icono con el signo más (+), escriba texto que tenga sentido, como Completar el tutorial y, luego, haga clic en el botón para guardar. Esto envía una solicitud POST al back-end de Azure implementado anteriormente. El back-end inserta los datos de la solicitud en la tabla SQL TodoItem y devuelve información acerca de los elementos recién almacenados a la aplicación móvil. La aplicación móvil muestra estos datos en la lista.

    Aplicación de inicio rápido que se ejecuta en iOS