Desarrollo de aplicaciones iOS de Cordova explicado desde la configuración hasta la implementación

iphone_1737513_1920

El desarrollo de aplicaciones híbridas para Android es muy sencillo, ya sea para el desarrollo o la configuración de producción. Pero personalmente, la configuración, el desarrollo y la implementación de Cordova iOS son un poco complicados.

La mayoría de los desarrolladores de aplicaciones híbridas que se encuentran en las etapas de aprendizaje no pueden explorar el proceso de desarrollo de aplicaciones híbridas de iOS simplemente porque no poseen una Mac. Y el desarrollo de aplicaciones iOS requiere iOS SDK y XCode (a diferencia del Android SDK que se ejecuta en cualquier SO de escritorio).

Por lo tanto, el objetivo de esta guía es mostrar el flujo de trabajo básico del desarrollo de aplicaciones híbridas de iOS en una Mac. De esta manera, los desarrolladores pueden ver cómo se hace incluso si no pueden desarrollar las aplicaciones.

Creando un proyecto cordova

Comience abriendo la terminal y creando un nuevo proyecto cordova (use sudo solo si tiene problemas de permisos, es decir, errores EACCESS):

sudo cordova create iosdemo cd iosdemo sudo cordova platform add ios

En el momento de redactar esta guía, la versión de la plataforma iOS de cordova es 4.3.1.

No modificaremos ningún código fuente de la aplicación, sino que simplemente continuaremos con el código de muestra predeterminado que cordova agrega automáticamente cuando ejecutamos el comando create. Sin embargo, se supone que agregaremos complementos para modificar el código en la wwwcarpeta durante el flujo de desarrollo normal.

El siguiente paso es ejecutar el comando cordova build. Esto convertirá el código de nuestra aplicación en un archivo .xcodeproj que usaremos a continuación.

sudo cordova build ios

El archivo del proyecto Xcode generado estará aquí:

[Your App Folder]/platforms/ios/[Your App Name].xcodeproj

Ahora, en el caso de Android, la firma del código se realiza utilizando el archivo Keystore que está en formato .jks. Sin embargo, en iOS se requiere que tenga una cuenta de desarrollador de Apple para distribuir aplicaciones de iOS. Esto es para que podamos generar los certificados y perfiles de aprovisionamiento necesarios para distribuir la aplicación.

Para conocer los precios y otra información sobre una cuenta de desarrollador, consulte esta página.

Creación de certificados de desarrollo

Una vez que tenga la cuenta lista, podemos continuar e iniciar sesión en su cuenta de desarrollador de Apple.

La pantalla del tablero debería verse así:

Apertura del proyecto en Xcode

Haga clic en Certificates, Identifiers & Profiles. Esto debería llevarlo a la siguiente pantalla, que de manera predeterminada muestra Certificados emitidos desde su cuenta:

Certificados, identificadores y perfiles

Los certificados iOS son principalmente de dos tipos: desarrollo o distribución. Haga clic en el botón Más (+) en la esquina superior derecha de la lista que abrirá la siguiente página:

Agregar certificado de iOS

Primero creemos un perfil de desarrollo. Seleccione Desarrollo de aplicaciones iOS y haga clic en continuar.

Esto debería llevarlo a la siguiente pantalla, donde se le pedirá que cree y cargue una Solicitud de firma de certificado o un archivo CSR.

Cargar archivo CSR

Siga las instrucciones en pantalla para generarlo y continúe. Una vez que el certificado esté listo, descárguelo en su Mac y haga doble clic en él. Esto lo agregará a Keychain Access en Mac.

Descargar certificado de desarrollo

Creación de certificados de distribución

La creación de certificados de distribución es similar al proceso de creación de certificados de desarrollo. Sin embargo, aquí seleccionamos App Store and Ad Hocde la Productionsección en Add iOS Certifcate Page:

Agregar certificado de iOS

Creación de la ID de la aplicación

Seleccionar App IDsde la Identifierssección. Esto abrirá la lista de ID de aplicaciones existentes. A continuación, haga clic en el botón Más en la parte superior derecha (+). Esto abrirá la página Registrar ID de aplicaciones de iOS .

Registrar ID de aplicaciones de iOS

Seleccione ID de aplicación explícito. La descripción de la aplicación puede ser cualquier nombre relacionado; esto es lo que se mostrará en la lista de identificación de la aplicación contra la identificación de la aplicación en particular.

Una identificación de aplicación es una cadena en el formato AB11A1ABCD.com.mycompany.myapp donde AB11A1ABCD es el prefijo de identificación de la aplicación, que es por defecto la identificación del equipo y com.mycompany.myapp es la identificación del paquete que es única para cada aplicación.

Se recomienda que el ID del paquete esté en una cadena de estilo de nombre de dominio inverso. Por ejemplo, la empresa MYCOMPANY puede tener dos aplicaciones (App1 y App2). Por lo tanto, la URL HTTP de cada aplicación suele ser app1.mycompany.com y app2.mycompany.com. Por lo tanto, los ID de paquete para cada aplicación serán com.mycompany.app1 y com.mycompany.app2

A continuación, seleccione cualquier servicio de la lista de verificación que necesite utilizar en su aplicación, como notificaciones automáticas, billetera, etc. A continuación, haga clic en continuar y confirme los detalles y finalmente registre la identificación de la aplicación.

Agregar dispositivos a su cuenta de desarrollador

Seleccione Allde la Devicessección. Esto abrirá la lista de dispositivos ya agregados a su cuenta de desarrollador de Apple. Solo estos dispositivos pueden ejecutar la aplicación durante el desarrollo.

Para agregar un nuevo dispositivo, haga clic en el botón Más en la parte superior derecha (+). Se mostrará la siguiente pantalla:

agregar pantalla de dispositivo

Aquí, el nombre puede ser cualquier nombre fácilmente comprensible, por ejemplo, iPhone 5s ABC Pvt Ltd. El UDID del dispositivo es la identificación única asociada con cada dispositivo Apple.

Para encontrar el UDID de un dispositivo, siga estos pasos:

  1. Conecta el dispositivo a tu Mac.
  2. Abra la aplicación Información del sistema ubicada en la carpeta / Aplicaciones / Utilidades.
  3. Seleccione USB en Hardware en la columna de la izquierda.
  4. A la derecha, seleccione el dispositivo conectado en Árbol de dispositivos USB. El ID del dispositivo, o "Número de serie", aparece a continuación.

Una vez que haya ingresado el UDID y el nombre del dispositivo, haga clic en continuar, luego confirme los detalles y regístrese.

Creación de un perfil de aprovisionamiento de desarrollo

Para crear un perfil de aprovisionamiento de desarrollo, haga clic en Perfiles de aprovisionamiento -> Todos. Esto debería mostrar todos los perfiles, desarrollo y distribución. A continuación, haga clic en el botón Más en la parte superior derecha (+) Esto debería mostrar la siguiente página:

Crear un perfil de aprovisionamiento de desarrollo

Aquí seleccione iOS App Developmenty haga clic en continuar. En el menú desplegable que se muestra, seleccione la ID de la aplicación que creamos anteriormente y continúe.

Siguiente Se muestra una lista de verificación de certificados de la que podemos seleccionar uno o varios. Estos son certificados de desarrollo y no de distribución. El perfil de aprovisionamiento generado se vinculará a estos certificados.

Al hacer clic en Continuar, se muestra una lista de verificación de dispositivos. Seleccione uno, varios o todos. Solo los dispositivos seleccionados podrán ejecutar la aplicación utilizando este perfil de aprovisionamiento.

A continuación, después de hacer clic en continuar, ingrese el nombre del perfil de aprovisionamiento y descargue el archivo .mobileprovision generado.

Notas : es el mismo proceso para crear su perfil de aprovisionamiento de distribución Adhoc. También es muy similar crear su perfil de aprovisionamiento de distribución de la AppStore, excepto en el que no seleccionamos dispositivos, ya que la aplicación estará disponible públicamente a través de la AppStore.

Ahora que tenemos todo lo que necesitamos, podemos continuar generando el ipa real usando Xcode.

El comando de compilación de Cordova convierte el código de nuestra aplicación en un proyecto xcode. Usando Xcode creamos un archivo .ipa que es la aplicación real que se instalará.

Antes de seguir adelante, toque dos veces en ambos Certificados para agregarlos a su llavero.

Continuando en Xcode

A continuación, toque dos veces el archivo .xcodeproj que debería abrirlo en Xcode. (Utilice la última versión de Xcode; he utilizado Xcode 8.3.2).

Apertura del proyecto en Xcode

La pantalla de Xcode debería parecerse a la anterior.

Haga clic en el nombre de la aplicación en la esquina superior izquierda de la ventana. Esto abrirá la vista detallada en el lado derecho.

Configuración del proyecto

Luego haga clic en Objetivos-> Nombre de la aplicación:

objetivos

Esto mostrará la siguiente pestaña de detalles:

detalles del objetivo

Haga clic en general, que debería mostrar esto:

Detalles generales

Desmarque la casilla de verificación Administrar firmas automáticamente.

Esto debería mostrar el siguiente error, indicando que AppNAme requiere un perfil de aprovisionamiento:

error de perfil

A continuación, en Firma (depuración), haga clic en el menú desplegable Perfil de aprovisionamiento y seleccione la opción de importación de perfil . En el cuadro de diálogo de selección de archivos que aparece, navegue hasta la ruta donde se descarga el perfil de aprovisionamiento de desarrollo y selecciónelo. Tendrá una extensión de .mobileprovision.

Después de seleccionar eso, el error debería desaparecer y debería mostrar Equipo como el Nombre del equipo en su cuenta de desarrollador de Apple y el Nombre del certificado de firma.

Haga lo mismo para la sección Firma (lanzamiento), pero en el cuadro de diálogo de selección de archivos seleccione el Perfil de distribución Ad Hoc.

Ahora que los pasos de firma de código están hechos,

  • ejecutar la aplicación directamente en el dispositivo
  • ejecutar la aplicación en un simulador
  • generar un archivo ipa para su distribución
  • cargar la aplicación en la tienda de aplicaciones

Ejecutando la aplicación directamente en el dispositivo

Para ejecutar la aplicación en un dispositivo, conecte el dispositivo a la Mac a través de USB. Luego, en la esquina superior izquierda de la lista de dispositivos, seleccione el dispositivo conectado y haga clic en el botón ejecutar o reproducir (botón triangular negro):

ejecutar dispositivo ejecutar dispositivo

El estado de la construcción se mostrará en la barra de estado en la parte superior de la ventana. Si todo va bien, la aplicación debería estar instalada en el dispositivo y debería cargarse automáticamente en un tiempo.

Nota : los pasos son los mismos para ejecutar la aplicación en un simulador. Pero en lugar de un dispositivo real, usamos los simuladores de iPhone y iPad disponibles de la lista de dispositivos.

Genere un archivo ipa para su distribución

Este enfoque se puede realizar en caso de que necesite distribuir la aplicación al equipo de pruebas, etc. Sin embargo, el dispositivo que utilicen debe tener un UDID presente en el perfil de aprovisionamiento.

En el menú Xcode, seleccione Product-> Clean, luego Product-> Archive. Aparece el organizador de archivos y muestra el nuevo archivo.

organizador de archivos ios

En el panel lateral derecho, seleccione la opción Exportar y aparecerá una lista de opciones.

Para distribuir su aplicación a los usuarios con dispositivos designados, seleccione "Guardar para implementación ad hoc". La aplicación estará firmada con código con el certificado de distribución.

Para distribuir su aplicación para pruebas internas, seleccione "Guardar para implementación de desarrollo". La aplicación estará firmada con código con su certificado de desarrollo.

Exportación del organizador de archivos de iOS como ad hoc

En el cuadro de diálogo que aparece, elija un equipo en el menú emergente y haga clic en Elegir.

ios exportar seleccionar equipo

A continuación, aparece el cuadro de diálogo de selección de dispositivo. Seleccione Todos los dispositivos o dispositivos específicos y haga clic en Siguiente.

A continuación, se muestra el cuadro de diálogo de revisión. Aquí mostrará el certificado de firma y el perfil de aprovisionamiento utilizado para generar la compilación. Revise y haga clic en siguiente. Finalmente, se muestra el archivo guardado como una ventana emergente para seleccionar la ubicación en el sistema de archivos para almacenar el archivo de la aplicación exportado.

La aplicación se exporta como archivo .ipa`.

Para ejecutar este archivo en el dispositivo, simplemente tóquelo dos veces para abrirlo en iTunes.

Luego, conecta tu dispositivo (esto debería mostrar un pequeño ícono de dispositivo en la esquina superior izquierda de la ventana de iTunes). Al tocarlo, se mostrará el resumen del dispositivo, como aplicaciones, música, etc.en el dispositivo. Seleccione la pestaña de aplicaciones y, en el panel izquierdo, seleccione la aplicación que se instalará y haga clic en instalar. Espere a que se complete el proceso y haga clic en Aplicar. Esto debería instalar el archivo ipa en su dispositivo.

Para depurar la aplicación:

  1. abrir Safari
  2. abre la aplicación en el dispositivo
  3. en la barra de menú de Safari, seleccione Develop --> Your Device Name --> Your App.

¡Eso es todo amigos!