Información general sobre el desarrollo híbrido

Objetivos de aprendizaje

Después de completar esta unidad, podrá:

• Describir dos tipos de aplicaciones híbridas
  
• Instalar Mobile SDK para el desarrollo híbrido.
  
• Crear una aplicación híbrida Mobile SDK con Cordova.
  
• Ejecutar su aplicación híbrida.
  

Nota

¿Es su idioma de aprendizaje español (LATAM)? Comience el reto en un Trailhead Playground en español (LATAM) y utilice las traducciones entre paréntesis para navegar. Copie y pegue solo los valores en inglés, ya que las validaciones del reto dependen de los datos en ese idioma. Si no aprueba el reto en su organización en español (LATAM), recomendamos que (1) cambie la configuración local a Estados Unidos, (2) cambie el idioma a inglés (según estas instrucciones) y, luego, (3) haga clic en el botón “Check Challenge” (Comprobar el reto) nuevamente.

Consulte la insignia Trailhead en su idioma para obtener más información sobre cómo aprovechar la experiencia de Trailhead en otros idiomas.

Antes de empezar

Antes de realizar los pasos de este módulo, complete los retos prácticos en Configurar las herramientas de desarrollador de Mobile SDK usando el mismo Trailhead Playground. El trabajo que haga en el reto práctico aquí se basará en el trabajo que completó en esa insignia.

• Configurar las herramientas de desarrollador de Mobile SDK
  

Concepto de desarrollo híbrido

Mobile SDK ofrece un desarrollo de aplicaciones híbrido como una alternativa entre plataformas a las aplicaciones nativas. Las aplicaciones híbridas combinan la facilidad del desarrollo de aplicaciones web HTML5 con la capacidad nativa de iOS y Android. Estas aplicaciones se ejecutan en un contenedor móvil que analiza el código de aplicaciones web y lo ejecuta como nativo. Este contenedor, basado en la tecnología Apache Cordova, permite a los desarrolladores escribir código HTML5, JavaScript y CSS. En un nivel subyacente, las aplicaciones híbridas son aplicaciones Cordova que usan el complemento Salesforce Mobile SDK.

Las aplicaciones híbridas se clasifican en dos categorías:

• Híbridas locales. Las aplicaciones híbridas locales son aplicaciones web que se ejecutan localmente en el contenedor móvil. Estas aplicaciones se desarrollan con la biblioteca force.js y almacenan sus archivos HTML, JavaScript y CSS en el dispositivo del usuario.
  
• Híbridas remotas. Las aplicaciones híbridas remotas proporcionan páginas de Visualforce mediante el contenedor móvil. Estas aplicaciones almacenan algunos o todos sus archivos HTML, JavaScript y CSS en el servidor de Salesforce.
  

Use la utilidad forcehybrid npm para crear un proyecto híbrido. A continuación, puede usar la línea de comandos de Cordova para agregar más complementos y un destino de Android o iOS. Puede incluso reutilizar una aplicación web existente simplemente copiando los archivos originales de esa aplicación en el nuevo proyecto.

Los proyectos híbridos incluyen además el contenedor de Mobile SDK para cada plataforma de destino. El contenedor es un proyecto nativo que requiere poca o ninguna configuración. Proporciona un puente en tiempo de ejecución entre la aplicación web o de Visualforce y el sistema operativo del dispositivo.

¡Empecemos! Asegúrese de haber completado la lista de insignias como requisito previo requerido en la parte superior de esta unidad. Cuando esté todo listo para seguir adelante, va a crear y explorar una aplicación local híbrida básica. A continuación, podrá analizar el uso que hace una de las aplicaciones de muestra Mobile SDK de la biblioteca force.js y obtener información acerca de las aplicaciones híbridas remotas. También adquirirá los conocimientos necesarios para depurar aplicaciones híbridas mediante las herramientas de depuración de Safari y Chrome.

¿Qué hay sobre las aplicaciones HTML5 puras?

Las aplicaciones HTML5 usan tecnologías web estándar (normalmente, HTML5, JavaScript y CSS) para distribuir las aplicaciones mediante un navegador web móvil. Esta estrategia de “escritura única y ejecución múltiple” para el desarrollo móvil permite crear aplicaciones móviles multiplataforma que funcionan en múltiples dispositivos. Aunque los desarrolladores pueden crear aplicaciones sofisticadas con HTML5 y JavaScript por sí solos, quedan algunos retos. Por ejemplo, la gestión de las sesiones, el almacenamiento seguro sin conexión y el acceso a funciones nativas de dispositivos pueden suponer problemas.

Esta ruta no trata el desarrollo HTML5 puro.

Comparación de arquitecturas de desarrollo nativas y multiplataforma

En la siguiente tabla se muestra una comparación de los diversos escenarios de desarrollo.

Creación de una aplicación conectada

Importante: El módulo Fundamentos de Salesforce Mobile SDK, que incluye instrucciones para las aplicaciones conectadas, es un requisito para completar este módulo. No puede completar el reto de esta unidad sin crear antes una aplicación conectada.

Para establecer la conexión con el servicio de Salesforce, cada aplicación móvil requiere una aplicación conectada de Salesforce. Una aplicación conectada autoriza la aplicación para comunicarse con Salesforce y acceder de forma segura a las API de Salesforce.

Después de crear y guardar su aplicación conectada, revise los detalles.

• Copie los valores de URL de devolución de llamada y Clave de consumidor. Use estos valores para configurar la autenticación en su aplicación.
  
• Las aplicaciones de Mobile SDK no utilizan la pregunta secreta del consumidor, por lo que puede ignorar este valor.
  

Creación de una aplicación híbrida

Importante:

Si todavía no configuró las herramientas requeridas para Mobile SDK, complete el módulo de Trailhead Configurar las herramientas de desarrollador de Mobile SDK.

1. En una ventana de terminal o en el símbolo del sistema de Windows, escriba forcehybrid create.
   
2. Ingrese los siguientes valores en los mensajes que se muestran:
   

• Plataforma: Una de las siguientes: ios, android o ios,android
  
• Tipo de aplicación: hybrid_local
  
• Nombre de aplicación: MyTrailHybridLocal
  
• Nombre de paquete: com.mytrail.hybrid
  
• Nombre de organización: MyTrail, Inc.
  
• Directorio de resultados: TrailHybridApps
  

El comando forcehybrid create genera errores en algunos dispositivos Windows. Para solucionar este error, ejecute cordova plugin add salesforce-mobilesdk-cordova-plugin@v11.1.0 --force. Este problema se solucionará con el lanzamiento de Mobile SDK 12.0.

3. ¡Felicitaciones! ¡Acaba de crear una aplicación híbrida local! La secuencia de comandos imprime el nombre del directorio en la pantalla cuando finaliza la creación del proyecto. Por ejemplo: “Su proyecto de aplicación está listo en <nombre directorio proyecto>.” Cuando reciba un mensaje de la línea de comandos en el que se indica que el proyecto está listo, actualice el nuevo proyecto para reflejar la configuración de la aplicación conectada.
   
4. En su directorio del proyecto, abra el archivo www/bootconfig.json en un editor de texto compatible con UTF-8 y actualice las propiedades siguientes:
   

• remoteAccessConsumerKey: este valor es un marcador de posición predeterminado. En una aplicación real, reemplace este valor por la clave del consumidor de su aplicación conectada.
  
• oauthRedirectURI: este valor es un marcador de posición predeterminado. En una aplicación real, reemplace este valor por la URL de devolución de llamadas de su aplicación conectada.
  

5. En el símbolo del sistema, cambie a la carpeta raíz de la aplicación y ejecute cordova prepare.
   

Importante: Tras realizar cualquier cambio en la carpeta www/ a nivel de raíz, asegúrese de ir al símbolo del sistema y ejecute cordova prepare desde la carpeta raíz de la aplicación. Este comando copia sus cambios en las carpetas específicas de la plataforma. Por ejemplo:

cd ~/<your local path>/TrailHybridApps
cordova prepare

La utilidad forcehybrid ya hizo su parte del trabajo. Si ingresó “android” para la plataforma, ahora tiene un proyecto Cordova con una subcarpeta platforms/android/ que puede abrir en Android Studio. Si establece “Plataforma” en “ios”, se incluye una subcarpeta platforms/ios/ que contiene un espacio de trabajo de Xcode. Si establece “Plataforma” en “ios,android”, se incluyen un espacio de trabajo de iOS y un proyecto de Android.

No obstante, ¡no cree el proyecto todavía! Aún queda bastante trabajo por hacer.

1. Vuelva a la ventana de terminal o de símbolo del sistema.
   
2. cd en el directorio de proyectos de su aplicación.
   
3. (Opcional, solo Mac) Para agregar una segunda plataforma “después del proceso”:
   

• Para agregar la compatibilidad con iOS, escriba:
  

  cordova platform add ios@5.1.1

• Para agregar la compatibilidad con Android, escriba:
  

  cordova platform add android@8.1.0

Acerca de los complementos de Cordova

Para mejorar la funcionalidad básica de las aplicaciones híbridas, los desarrolladores suelen incluir complementos de Cordova de terceros. En sus propias aplicaciones, puede incluir complementos externos mediante la llamada a cordova plugin add plug-in_name, seguida de cordova prepare.

Para agregar otros complementos a una aplicación forcehybrid que incluye un proyecto de Android, elimine y vuelva a agregar el complemento de Salesforce más adelante. Este paso no se aplica a las aplicaciones forcehybrid solo para iOS. Aquí se incluye un ejemplo:

cordova plugin add cordova-plugin-contacts
cordova plugin add cordova-plugin-statusbar
cordova plugin remove com.salesforce
cordova plugin add https://github.com/forcedotcom/SalesforceMobileSDK-CordovaPlugin --force

Importante: No llame nunca a cordova plugin add para otros complementos proporcionados por Mobile SDK. Estos complementos se incluyen automáticamente en los proyectos de forcehybrid.

Obtención de asistencia

¿Está viendo resultados inesperados? Dado que el modelo híbrido depende de elementos móviles que no podemos controlar, se pueden obtener resultados impredecibles. El mejor recurso para hacer preguntas es la Trailblazer Community de Mobile SDK.

Ejecutar la aplicación híbrida

Ahora que la aplicación está configurada por completo, vamos a ejecutarla en Xcode (para aplicaciones iOS) o en Android Studio (para aplicaciones Android).

Ejecutar la aplicación en iOS

Para ejecutar la aplicación en Xcode:

1. En Xcode, seleccione File | Open (Archivo | Abrir).
   
2. Navegue hasta el directorio platforms/ios/ en el directorio de la nueva aplicación.
   
3. Haga doble clic en el archivo <nombre aplicación>.xcodeworkspace.
   
4. Haga clic en el botón Run (Ejecutar) de la esquina superior izquierda o pulse COMMAND-R.
   

Ejecutar la aplicación en Android

Para ejecutar la aplicación en Android Studio:

1. En la pantalla de bienvenida, seleccione Import project (Eclipse ADT, Gradle, etc.) (Importar proyecto [Eclipse ADT, Gradle, etc.]). O bien, si Android Studio ya se está ejecutando, seleccione File | New | Import Project (Archivo | Nuevo | Importar proyecto).
   
2. Seleccione <su_directorio_proyecto>/platforms/android y haga clic en OK (Aceptar). Si se le pide que use el contenedor de Gradle, acepte esta solicitud.
   
3. Una vez finalizada la creación, seleccione el destino de android y haga clic en Run ‘android’ (Ejecutar ‘android’) en el menú o la barra de herramientas.
   
4. Seleccione un dispositivo Android conectado o un emulador.
   

Después de iniciar sesión en Salesforce, la aplicación muestra una lista de usuarios de su organización.

Importante: Si Android Studio ofrece actualizar su versión del contenedor de Gradle, acepte la oferta. Una vez finalizado el proceso, Android Studio vuelve a importar el proyecto automáticamente.

Recursos

• Documentación de Cordova 3.5
• Inicio rápido de aplicaciones híbridas
• Desarrollo en HTML5 e híbrido
• https://github.com/forcedotcom/SalesforceMobileSDK-Shared