Desarrollo de MobileFirst Foundation en aplicaciones Cordova

Visión general

De http://cordova.apache.org/:

Apache Cordova es una infraestructura de desarrollo móvil de código abierto. Permite utilizar tecnologías web estándar como, por ejemplo, HTML5, CSS3 y JavaScript para un desarrollo entre varias plataformas, evitando el lenguaje de desarrollo nativo de cada plataforma móvil. Las aplicaciones se ejecutan dentro de derivadores destinados a cada plataforma, y se basan en enlaces de API que siguen los estándares para acceder a los sensores de los dispositivos, a los datos y al estado de la red.

IBM Mobile Foundation proporciona un SDK en forma de varios plugins de Cordova. Aprenda a Añadir Mobile Foundation SDK a aplicaciones Cordova.

Nota: Los archivos de archivado/IPA generados mediante Test Flight o iTunes Connect para almacenar envíos/validación de aplicaciones iOS, podrían originar fallos/bloqueos en tiempo de ejecución. Consulte el blog Preparación de aplicaciones iOS para enviarlas a App Store en IBM Mobile Foundation para obtener más información.

Ir a:

• Desarrollo de aplicaciones Cordova
• API de MobileFirst
• Flujo inicial del SDK de MobileFirst
• Seguridad de aplicaciones Cordova
• Recursos de aplicación de Cordova
• Vista previa de una recurso web de una aplicación
• Implementación de código JavaScript
• Soporte de CrossWalk para Android
• Soporte de WKWebView para iOS
• Lectura adicional
• Guías de aprendizaje con las que continuar

Desarrollo de aplicaciones Cordova

Las aplicaciones desarrolladas con Cordova se pueden mejorar mediante las siguientes características y métodos de desarrollo proporcionados para Cordova:

Enganches

Los enganches de Cordova son scripts que proporcionan a los desarrolladores la posibilidad de personalizar mandatos de Cordova, permitiendo crear por ejemplo flujos de compilación personalizados.
Obtenga más información sobre los Enganches de Cordova.

Carpeta Merges

La carpeta Merges proporciona la posibilidad de tener recursos web específicos de plataforma (archivos HTML, CSS y JavaScript). Estos recursos web se despliegan durante el paso cordova prepare para el directorio nativo apropiado. Los archivos colocados bajo la carpeta merges/ remplazarán los archivos coincidentes en la carpeta www/ de la plataforma pertinente. Obtenga más información sobre la Carpeta Merges.

Plugins de Cordova

La utilización de plugins de Cordova puede proporcionar mejoras como, por ejemplo, la adición de elementos de interfaz de usuario nativos (diálogos, barras de separadores, selectores, etc.) así como funcionalidades más avanzadas como, por ejemplo, la correlación y geoubicación, la carga de contenido externo, teclados personalizados o la integración de dispositivos (cámaras, contactos, sensores etc.).

Encontrará plugins de Cordova en GitHub.com y en otros sitios web populares de plugins de Cordova como, por ejemplo, Plugreg y NPM.

Plugins de ejemplo:

• cordova-plugin-dialogs
• cordova-plug-inprogress-indicator
• cordova-plugin-statusbar

Nota: La modificación del comportamiento predeterminado de una aplicación Cordova (por ejemplo, modificando el comportamiento del botón de ir hacia atrás) cuando MobileFirst Cordova SDK se añade al proyecto, puede hacer que Google Play Store la rechace cuando la envíe. Póngase en contacto con el soporte de Google para conocer otras anomalías al enviar una aplicación a Google Play Store.

Infraestructuras de terceros

El desarrollo de aplicaciones de Cordova se puede mejorar aún más utilizando infraestructuras como, por ejemplo, Ionic, AngularJS, jQuery Mobile o Backbone entre muchas otras.

Artículos de blogs sobre la integración

• Procedimientos recomendados para crear aplicaciones Angular JS con MobileFirst Foundation 8.0
• Integración de Mobile Foundation en aplicaciones basadas en Ionic
• Integración de Mobile Foundation en aplicaciones basadas en Ionic 2

Paquetes de terceros

Las aplicaciones se pueden modificar utilizando paquetes de terceros para lograr requisitos como, por ejemplo, la minificación y la concatenación de recursos web de aplicaciones, entre otros. Paquetes populares para ello son:

• uglify-js
• clean-css

API de MobileFirst

Después de añadir MobileFirst Cordova SDK a una aplicación Cordova, tendrá disponible el conjunto de MobileFirst de métodos de API para ser utilizados.

Consulte la Referencia de API para obtener una lista completa de métodos de API disponibles.

Flujo inicial del SDK de MobileFirst

public class MainActivity extends CordovaActivity implements WLInitWebFrameworkListener {

@Overridepublic void onCreate(Bundle savedInstanceState){
super.onCreate(savedInstanceState);

if (!((MFPApplication)this.getApplication()).hasCordovaSplashscreen()) {
           WL.getInstance().showSplashScreen(this);
       }
   init();
   WL.getInstance().initializeWebFramework(getApplicationContext(), this);
}

<activity android:name="com.ibm.MFPLoadUrlActivity" />

public void onInitWebFrameworkComplete(WLInitWebFrameworkResult result){
if (result.getStatusCode() == WLInitWebFrameworkResult.SUCCESS) {
super.loadUrl(WL.getInstance().getMainHtmlFilePath());
   } else {
      handleWebFrameworkInitFailure(result);
   }
}

[[WL sharedInstance] initializeWebFrameworkWithDelegate:self];

Seguridad de aplicaciones Cordova

IBM Mobile Foundation proporciona características de seguridad que ayudan a proteger las aplicaciones Cordova.

Una gran parte del contenido en una aplicación entra plataformas se modifica más fácilmente por una persona no autorizada que para una aplicación nativa. Puesto que una gran parte del contenido común en una aplicación entre plataformas está en un formato legible, IBM MobileFirst Foundation proporciona características que proporcionan un mayor nivel de seguridad para sus aplicaciones Cordova entre plataformas.

Obtenga más información sobre la infraestructura de seguridad de MobileFirst

Utilice las siguientes características para mejorar la seguridad en sus aplicaciones Cordova:

• Cifrado de recursos web de sus paquetes Cordova
  Cifra el contenido en la carpeta www de su aplicación Cordova y lo descifra cuando la aplicación se instala y ejecuta por primera vez. Este cifrado hace que sea más difícil para alguien el ver o modificar el contenido en dicha carpeta mientras la aplicación está empaquetada.
• Habilitación de la característica de suma de comprobación de recursos web
  Asegura la integridad de la aplicación cuando esta se inicia al comparar el contenido con los resultados de la suma de comprobación de la línea base que se recopila la primera vez que se inicia la aplicación. Esta prueba ayuda a impedir la modificación de una aplicación que ya está instalada.
• Habilitación de FIPS 140-2
  Asegura que los algoritmos de cifrado que se utilizan para cifrar datos fijos y datos dinámicos satisfacen el estándar FIPS (Federal Information Processing Standards) 140-2.
• Fijación de certificados
  Ayuda a impedir ataques de intermediario asociando un host con su clave pública esperada.

Recursos de aplicación de Cordova

Determinados recursos son necesarios como parte de la aplicación Cordova. En la mayoría de los casos, se generan en su nombre al crear su aplicación Cordova con sus herramientas preferidas de desarrollo de Cordova. Si utiliza la plantilla de Mobile Foundation, también se proporcionan iconos y pantallas iniciales.

Se puede habilitar una plantilla de proyecto que IBM proporciona para utilizar con proyectos de Cordova que se habilitan para utilizar las características de MobileFirst. Si utiliza esta plantilla de MobileFirst, tendrá disponibles los siguientes recursos como un punto de partida. Si no utiliza la plantilla de MobileFirst, se proporcionan todos los recursos excepto los iconos y las pantallas iniciales. Añada la plantilla especificando la opción --template y la plantilla MobileFirst cuando inicialmente cree su proyecto de Cordova.

Si cambia los nombres de archivo y las vías de acceso predeterminadas de los recursos, también debe especificar dichos cambios en el archivo de configuración de Cordova (config.xml). Además, en algunos casos, puede cambiar las vías de acceso y los nombres predeterminados con el mandato mfpdev app config. Si puede cambiar los nombres y las vías de acceso con el mandato mfpdev app config, se indica en la sección sobre el recurso específico.

Archivo de configuración de Cordova (config.xml)

El archivo de configuración de Cordova es un archivo XML necesario que contiene metadatos de aplicación y que se almacena en el directorio raíz de la aplicación. El archivo se genera de forma automática al crear una aplicación Cordova. Puede modificarla para añadir propiedades personalizadas mediante el mandato mfpdev app config.

Archivo principal (index.html)

Este archivo principal es un archivo HTML5 que contiene el esqueleto de la aplicación. Este archivo carga todos los recursos web (scripts y hojas de estilo) que se necesitan para definir los componentes generales de la aplicación y para el enganche a los sucesos de documento necesarios. Encontrará este archivo en el directorio su_nombre_de_proyecto/www. El nombre de este archivo se puede cambiar con el mandato mfpdev app config.

Imagen en miniatura

La imagen en miniatura proporciona una identificación gráfica de la aplicación en MobileFirst Operations Console. Debe ser una imagen cuadrada, preferiblemente con un tamaño de 90 por 90 píxeles.
Se proporciona una imagen en miniatura predeterminada cuando se utiliza la plantilla. La imagen predeterminada se puede modificar utilizando el mismo nombre de archivo con otra imagen. El archivo thumbnail.png se encuentra en la carpeta su_nombre_de_proyecto/www/img. El nombre de este archivo o su vía de acceso se puede cambiar con el mandato mfpdev app config.

Imagen de bienvenida

La imagen de bienvenida se visualiza cuando se está inicializando la aplicación. Si utiliza la plantilla predeterminada de MobileFirst, se proporcionan imágenes de bienvenida. Estas imágenes predeterminadas se almacenan en los directorios siguientes:

• iOS: /res/screen/ios/
• Android: /res/screen/android/
• Windows: /res/screen/windows/

Se incluyen varias imágenes de bienvenida predeterminadas para las distintas visualizaciones y para iOS y Windows y para distintas versiones del sistema operativo. Es posible sustituir la imagen predeterminada que la plantilla proporciona con su propia imagen de bienvenida, o se puede añadir una imagen si no utilizó la plantilla. Cuando se utiliza la plantilla de MobileFirst para compilar su aplicación para la plataforma Android, se instala el plugin cordova-plugin-splashscreen. Cuando se integra este plugin, se visualizan las imágenes de bienvenida que Cordova utiliza en lugar de las imágenes que Mobile Foundation utiliza. Las imágenes en la carpeta con el formato screen.png están en las imágenes de bienvenida estándar de Cordova. Puede especificar las imágenes a visualizar cambiando los valores en el archivo config.xml de Cordova.

Si no utiliza la plantilla de MobileFirst, las imágenes de bienvenida predeterminadas que se visualizan son las que utiliza el plugin de Mobile Foundation. Los nombres de archivo de las imágenes de bienvenida de origen de MobileFirst predeterminadas están como splash-string.9.png.

Para obtener más información sobre la utilización de sus propias pantallas iniciales, consulte Adición de iconos y pantallas iniciales a las aplicaciones para Cordova.

Iconos de aplicación

Las imágenes predeterminadas para los iconos de aplicación se proporcionan con la plantilla. Estas imágenes predeterminadas se almacenan en los directorios siguientes:

• iOS: /res/icon/ios/
• Android: /res/icon/android/
• Windows: /res/icon/windows/

Puede sustituir la imagen predeterminada con su propia imagen. Su imagen de aplicación personalizada debe coincidir con el tamaño de la imagen de aplicación predeterminada que sustituye, y debe utilizar el mismo nombre de archivo. Se proporcionan varias imágenes predeterminadas, de acuerdo a distintas versiones de sistemas operativos y pantallas.

Para obtener más información sobre la utilización de sus propias pantallas iniciales, consulte Adición de iconos y pantallas iniciales a las aplicaciones para Cordova.

Hojas de estilo

El código de la aplicación puede incluir archivos CSS para definir la vista de la aplicación.

Las hojas de estilo se encuentran en el directorio /www/css y se copian a las siguientes carpetas específicas de cada plataforma:

• iOS: /platforms/ios/www/css
• Android: /platforms/android/assets/www/css
• Windows: /platforms/windows/www/css

Scripts

El código de la aplicación puede incluir archivos JavaScript que implementan distintas funciones de su aplicación como, por ejemplo, los componentes de interfaz de usuario interactivo, la lógica empresarial y la integración de las consultas en un segundo plano.

La plantilla proporciona el archivo JavaScript index.js y que se encuentra en la carpeta su_nombre_proyecto/www/js. Este archivo se copia a las siguientes carpetas específicas de cada plataforma:

• iOS: /platforms/ios/www/js
• Android: /platforms/android/assets/www/js
• Windows: /platforms/windows/assets/www/js

Vista previa de una recurso web de una aplicación

Obtenga una vista previa de los recursos web de una aplicación Cordova en los emuladores de iOS, Android, Windows o en los dispositivos físicos. En Mobile Foundation, hay disponibles dos opciones de vista previa dinámica adicionales: la representación de IBM MobileFirst Foundation Mobile Browser Simulator y el Navegador simple.

**Restricción de seguridad: ** Puede obtener una vista previa de los recursos web, si embargo el simulador no da soporte a todas las API de JavaScript de MobileFirst. En concreto, no hay un soporte completo al protocolo OAuth. Sin embargo, puede probar las llamadas a adaptadores con WLResourceRequest. En este caso,

• Las comprobaciones de seguridad no se ejecutan en el lado del servidor y los retos de seguridad no se envían al cliente que se ejecuta en Mobile Browser Simulator.
• Si no utiliza MobileFirst Server en un entorno de desarrollo, registre un cliente confidencial que tenga el ámbito del adaptador en su lista de ámbitos permitidos. Defina un cliente confidencial con MobileFirst Operations Console, mediante el menú Tiempo de ejecución/Valores. Para obtener más información sobre los clientes confidenciales, consulte Clientes confidenciales.

Nota: MobileFirst Server en un entorno de desarrollo incluye un cliente confidencial “test” con un ámbito permitido ilimitado (“*”). De forma predeterminada la aplicación mfpdev utiliza este cliente confidencial.

Navegador simple

La vista previa del Navegador simple, los recursos web de la aplicación se representan en el navegador de escritorio sin que sean tratados como una aplicación móvil, permitiendo una depuración sencilla de tan solo recursos web.

Mobile Browser Simulator

Mobile Browser Simulator es una aplicación web que permite probar aplicaciones Cordova simulando características del dispositivo sin la necesidad de instalar la aplicación en un emulador o dispositivo físico.

Navegadores soportados:

• Firefox versión 38 y posterior
• Chrome 49 y posterior
• Safari 9 y posterior

Vista previa

1. Desde una ventana de línea de mandatos, ejecute el mandato:

    mfpdev app preview
   

2. Seleccione una opción de vista previa:

    ? Seleccione cómo obtener una vista previa de su aplicación: (Utilice las teclas de cursor)
      navegador: representación de navegador simple
      mbs: Mobile Browser Simulator
   

3. Seleccione una plataforma para la vista previa (únicamente se visualizará la plataforma añadida):

    ❯◯ android
    ◯ ios
   

Consejo: Obtenga más información acerca de los numerosos mandatos CLI en el tutorial Utilización del CLI para administrar artefactos MobileFirst.

Vista previa en directo

El código de la aplicación (HTML, CSS y JS) puede editarse ahora en tiempo real con la vista previa en directo.
Después de realizar un cambio a un recurso, guarde el cambio y dicho cambio será reflejado de forma inmediata en el navegador.

Recarga en directo

Para obtener un efecto similar al realizar una vista previa en dispositivos físicos o en simuladores/emuladores, añada el plugin cordova-plugin-livereload. Para obtener las instrucciones de uso, consulte la página de plugins GitHub.

Ejecución de la aplicación en el emulador o en un dispositivo físico

Para emular la aplicación, ejecute el mandato Cordova CLI cordova emulate ios|android|windows. Por ejemplo:

cordova emulate ios

Para ejecutar la aplicación en un dispositivo físico, conectado a la estación de trabajo de desarrollo ejecute el mandato Cordova CLI cordova run ios|android|windows. Por ejemplo:

cordova run ios

Implementación de código de JavaScript Code

La edición de los recursos WebView es más adecuada mediante un entorno integrado (IDE) que proporciona cumplimentación automática para JavaScript.

Xcode, Android Studio y Visual Studio proporcionan funcionalidades de edición completas para Objective C, Swift, C# y Java, sin embargo, pueden estar limitadas para dar soporte a la edición en JavaScript. Para facilitar la edición de JavaScript, el proyecto de Cordova de MobileFirst contiene un archivo de definición para poder cumplimentar de forma automática elementos de API de MobileFirst.

Cada plugin Cordova de MobileFirst proporciona un archivo de configuración d.ts para cada archivo JavaScript de MobileFirst. El nombre del archivo d.ts coincide con el correspondiente nombre de archivo JavaScript y se encuentra ubicado en la carpeta del plugin. Por ejemplo, para el SDK principal MobileFirst el archivo se encuentra en: [myapp]\plugins\cordova-plugin-mfp\typings\worklight.d.ts.

Los archivos de configuración d.ts proporcionan funcionalidades de autocompletado para los IDEs con soporte TypeScript: TypeScript Playground, Visual Studio Code, WebStorm, WebEssentials, Eclipse.

Los recursos (archivos HTML y JavaScript) para WebView se encuentran en la carpeta [myapp]\www. Cuando el proyecto se compila con el mandato cordova build, o cuando se ejecuta el mandato cordova prepare, estos recursos se copian a la correspondiente carpeta www en la carpeta [myapp]\platforms\ios\www, [myapp]\platforms\android\assets\www, o [myapp]\platforms\windows\www.

Cuando abre la carpeta de aplicación principal con uno de los anteriores IDE, se conserva el contexto. El editor IDE estará ahora enlazado a los archivos d.ts relevantes y los elementos de la API MobileFirst se autocompletarán a medida que escribe.

Soporte de CrossWalk para Android

En las aplicaciones de Cordova para la plataforma Android se pueden sustituir sus WebView predeterminadas con CrossWalk WebView.

Nota: El proyecto de CrossWalk ya no está mantenido por la comunidad ni sus mantenedores. Por lo tanto, no hay ninguna opción de que haya errores o problemas en CrossWalk que puedan afectar al funcionamiento de los SDK de MobileFirst en un CrossWalk WebView. Por lo tanto, no se recomienda utilizar CrossWalk WebViews en sus aplicaciones.

Para añadirlo:

1. Desde una línea de línea de mandatos, ejecute el mandato:

   cordova plugin add cordova-plugin-crosswalk-webview
   

   Este mandato añadirá CrossWalk WebView a la aplicación.
   Internamente, MobileFirst Cordova SDK ajustará la actividad del proyecto Android para utilizarlo.

2. Compile el proyecto ejecutando el mandato:

   cordova build
   

Soporte de WKWebView para iOS

El UIWebView predeterminado utilizado en las aplicaciones Cordova iOS pueden sustituirse con WKWebView de Apple.
Para añadirlo, ejecute el siguiente mandato desde una ventana de línea de mandatos: cordova plugin add cordova-plugin-wkwebview-engine.

Obtenga más información acerca del plugin Cordova WKWebView.

Actualización: Cuando se utiliza el plugin cordova-plugin-wkwebview-engine en la aplicación Cordova se genera el error Las solicitudes entre orígenes solo están soportadas para HTTP y se produce un error de actualización directa. Para solucionarlo, su aplicación requiere un plugin adicional denominado cordova-plugin-wkwebviewxhrfix. Puede encontrar el defecto aquí.

Lectura adicional

Obtenga más información acerca de Cordova:

• Visión general de Cordova
• Procedimientos recomendados, realización de pruebas, depuración, consideraciones y mantenimiento de Cordova
• Iniciación con el desarrollo de las aplicaciones de Cordova

Guías de aprendizaje con las que continuar

Empiece con añadiendo MobileFirst SDK a la aplicación Cordova, y revise las funciones MobileFirst provistas en la sección Todos los tutoriales.