Información general sobre el desarrollo híbrido

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)? En esta insignia, las validaciones de los retos prácticos de Trailhead funcionan en inglés. Entre paréntesis se incluyen las traducciones a modo de referencia. En su instancia de Trailhead Playground, asegúrese de (1) cambiar la configuración local a los Estados Unidos, (2) cambiar el idioma a inglés, y (3) copiar y pegar solo los valores en inglés. Siga las instrucciones que figuran aquí.

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

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! Para completar el desafío al final de esta unidad, debe haber completado el proyecto "Instalar las herramientas de desarrollador del Mobile SDK". Si no lo completó, complete ese proyecto para asegurarse de que su entorno de desarrollo está correctamente configurado. Cuando esté preparado, podrá crear y explorar el mundo de las aplicaciones locales híbridas básicas. 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.

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.

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.

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

• 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