Aprende a usar Salesforce Lightning Out

En este artículo, exploraremos el mundo de la funcionalidad Lightning Out de Salesforce. Aprenderemos a aprovecharla para crear aplicaciones que reflejen la estética de Salesforce, pero alojadas fuera de Salesforce. Encontrarás una guía paso a paso, complementada con un tutorial detallado en video, para ayudarte a crear una página pública de cancelación de suscripción alojada fuera de Salesforce.

Estas son nuestras 5 conclusiones clave:

• Lightning Out permite crear aplicaciones con la misma apariencia y experiencia de uso que Salesforce, pero alojadas fuera de Salesforce.
• Puedes usar componentes de Aura o Visualforce, pero este tutorial se enfoca en el uso de Lightning Web Components.
• El tutorial te guía en la creación de una página pública de cancelación de suscripción alojada en GitHub Pages que actualiza o crea registros en Salesforce.
• Debes asegurarte de tener los atributos correctos en tu aplicación o contenedor de dependencias de Aura y agregar tu Lightning Web Component recién creado como recurso de dependencia de Aura.
• Es importante agregar la página alojada a la configuración de CORS en Salesforce y usar registros de depuración del usuario invitado para probar y depurar la aplicación.

No es ningún secreto que Lightning Out existe desde hace tiempo y se ha usado para crear aplicaciones con la misma apariencia y experiencia de uso que Salesforce mediante el uso directo de componentes (en lugar de solo aplicarles estilos), pero alojadas fuera de Salesforce. Aunque puedes usar componentes de Aura o Visualforce, no he visto muchos tutoriales que utilicen Lightning Web Components, así que decidí crear uno.

‍

En este video, creamos una página pública de cancelación de suscripción alojada fuera de Salesforce (GitHub Pages) para actualizar o crear registros en Salesforce. El video incluye más detalles, pero estos son los pasos:

1. Habilita Experiencias digitales en tu organización (Comunidades)
2. Crea tu aplicación o página de Lightning Web Component, alójala dentro de Salesforce y pruébala primero (pestaña, botón, etc.)
3. Crea un sitio de comunidad en blanco (no una página)
4. Crea tu aplicación o contenedor de dependencias de Aura con los atributos correctos
5. Asegúrate de agregar tu Lightning Web Component recién creado como recurso de dependencia de Aura
6. Crea el archivo HTML que alojarás fuera de Salesforce, usa los parámetros correctos para las funciones JS y usa la URL de la comunidad para la biblioteca JS de Lightning Out.
7. Crea una página en GitHub Pages o en cualquier sitio donde puedas alojar el archivo HTML
8. Agrega la página creada a la configuración de CORS en Salesforce
9. Usa registros de depuración del usuario invitado para nuestro caso de uso, de modo que puedas probar y depurar la aplicación
10. ¡Implementa las dependencias de Salesforce con Blue Canvas!

¡Y gracias, Atlas, por este tutorial en video! (Atlas es desarrollador de Salesforce en EMPAUA y moderador en SFXD . Comparte lo que ha aprendido a lo largo de sus años de experiencia en la comunidad de Salesforce. Puedes leer más artículos suyos en SalesforceBen , y síguelo Twitter. )

Conceptos básicos de Salesforce Lightning Out

Salesforce Lightning Out es un framework único que permite a los desarrolladores utilizar componentes Lightning fuera de la plataforma Salesforce. Estos componentes se pueden integrar en cualquier aplicación web, sin importar su stack tecnológico, lo que amplía considerablemente su versatilidad. En esencia, Lightning Out actúa como un puente que permite la comunicación entre Salesforce y plataformas externas.

Los beneficios y usos potenciales de Lightning Out son numerosos. Una de sus principales ventajas es la reutilización. Los desarrolladores pueden crear un componente una sola vez y utilizarlo en múltiples plataformas, lo que aumenta la eficiencia. Lightning Out también ofrece una interfaz de usuario uniforme entre aplicaciones, lo que mejora la experiencia de usuario.

Requisitos previos para usar Salesforce Lightning Out

Para empezar a trabajar con Lightning Out, necesitas conocimientos prácticos de JavaScript y Apex, así como una comprensión básica de los componentes Lightning de Salesforce.

En cuanto a los permisos, necesitas el permiso 'Modificar todos los datos' en tu cuenta de Salesforce para crear y configurar Lightning Out.

Guía paso a paso para usar Salesforce Lightning Out

Veamos cómo usar Salesforce Lightning Out.

Crea un componente Lightning para usarlo con Lightning Out

Primero, debes crear un componente Lightning. Desde la Consola de desarrollador de Salesforce, ve a 'Archivo' > 'Nuevo' > 'Componente Lightning', ingresa un nombre y haz clic en 'Enviar'. Escribe el código de tu componente en el editor disponible.

Cómo configurar una aplicación de dependencias de Lightning Out

A continuación, crea una aplicación de dependencias de Lightning Out: una aplicación Lightning que declara dependencias de componentes Lightning. Desde la Consola de desarrollador, ve a 'Archivo' > 'Nuevo' > 'Aplicación Lightning', asigna un nombre a la aplicación y haz clic en 'Enviar'.

En el código de la aplicación, incluye 'ltng:outApp' como interfaz y 'ltng:require' para enumerar las dependencias, que en este caso serían tu componente Lightning.

Cómo implementar tu componente Lightning en un sitio web externo

Para desplegar tu componente Lightning, agrega unas líneas de JavaScript al código de tu sitio web externo. Este JavaScript inicializará el framework de componentes Lightning de Salesforce y mostrará tu componente Lightning.

Cómo gestionar el intercambio de datos con Salesforce

Para intercambiar datos entre tu componente Lightning y Salesforce, puedes usar Apex. Crea un controlador Apex con métodos para recuperar o actualizar datos. En tu componente Lightning, agrega el atributo 'controller' que haga referencia a tu controlador Apex.

Solución de problemas comunes con Salesforce Lightning Out

Al trabajar con Lightning Out, podrías encontrar problemas como un componente que aparece en blanco en tu página web o datos que no se recuperan o actualizan. Una causa común de estos problemas son las configuraciones incorrectas o los errores en el código JavaScript. Asegúrate de haber seguido las instrucciones correctamente y revisa tu código a fondo.

Para resolver problemas, utiliza las herramientas de desarrollador del navegador, en particular la consola para los errores de JavaScript y la pestaña de red para los problemas de solicitudes y respuestas.

Técnicas avanzadas y mejores prácticas

La optimización del rendimiento de Lightning Out implica administrar los datos de manera eficiente. Minimiza las consultas de datos, usa paginación para conjuntos de datos grandes y aprovecha el almacenamiento en caché del lado del cliente.

Asegúrate de que tu sitio web externo utilice HTTPS para mantener una comunicación segura con Salesforce. Además, no expongas datos confidenciales en tus componentes Lightning.

Al programar, utiliza un enfoque de diseño modular para que tus componentes sean reutilizables y fáciles de administrar. Sigue las mejores prácticas de Salesforce para desplegar Lightning Out, como realizar pruebas en todas las plataformas de destino antes del despliegue.

Ejemplos de casos de uso de Salesforce Lightning Out

Un excelente ejemplo real del uso de Lightning Out es la integración de un CRM de Salesforce con un sitio externo de comercio electrónico. El componente Lightning 'Agregar al carrito' se puede integrar en el sitio de comercio electrónico para ofrecer actualizaciones del inventario en tiempo real.

En este caso, Lightning Out permitió una integración fluida entre ambas plataformas, mejoró la experiencia de usuario y agilizó el flujo de datos.

Aprovecha el poder de Salesforce Lightning Out con Blue Canvas

En esta era digital, la capacidad de integrar plataformas y reutilizar código es invaluable. Salesforce Lightning Out ofrece esta capacidad y abre nuevas posibilidades tanto para desarrolladores como para empresas.

Como hemos visto, Salesforce Lightning Out ofrece una amplia variedad de beneficios. Desde la reutilización de código y mejores capacidades de integración hasta una mejor experiencia de usuario, es una herramienta que permite a desarrolladores y empresas llevar su estrategia digital al siguiente nivel.

A medida que te familiarices con el alcance de las capacidades de Lightning Out, también te recomendamos explorar herramientas que te ayuden a desplegar y sincronizar metadatos de Salesforce entre tus distintas organizaciones de Salesforce. En Blue Canvas ofrecemos Herramientas de implementación de Salesforce que te ayuda a comparar y sincronizar metadatos entre sandboxes en minutos. Si necesitas más ayuda con la implementación o quieres conocer mejor estas funciones, no dudes en contactar a nuestro equipo de Blue Canvas hoy.

‍

--------

Preguntas frecuentes

¿Qué es Salesforce Lightning Out?

• Salesforce Lightning Out es un framework único que permite a los desarrolladores usar componentes Lightning fuera de la plataforma Salesforce. Estos componentes se pueden integrar en cualquier aplicación web, sin importar su stack tecnológico, lo que aumenta significativamente su versatilidad. En esencia, Lightning Out funciona como un puente que permite la comunicación entre Salesforce y plataformas externas.

¿Cuáles son los beneficios de usar Salesforce Lightning Out?

• Uno de los principales beneficios de Lightning Out es la reutilización. Los desarrolladores pueden crear un componente una sola vez y usarlo en múltiples plataformas, lo que mejora la eficiencia. Lightning Out también ofrece una interfaz de usuario uniforme entre aplicaciones y, con ello, mejora la experiencia de usuario. Además, permite una integración fluida entre Salesforce y otras plataformas, lo que agiliza el flujo de datos y las operaciones.

¿Qué requisitos previos necesito para usar Salesforce Lightning Out?

• Para empezar a trabajar con Lightning Out, necesitas conocimientos prácticos de JavaScript y Apex, así como una comprensión básica de los componentes Lightning de Salesforce. En cuanto a los permisos, necesitas el permiso 'Modificar todos los datos' en tu cuenta de Salesforce para crear y configurar Lightning Out.

¿Cómo creo un componente Lightning para usarlo con Lightning Out?

• Puedes crear un componente Lightning desde la Consola de desarrollador de Salesforce. Ve a 'Archivo' > 'Nuevo' > 'Componente Lightning', ingresa un nombre y haz clic en 'Enviar'. Luego puedes escribir el código de tu componente en el editor disponible.

¿Cómo puedo solucionar problemas comunes con Salesforce Lightning Out?

• Podrían presentarse problemas como un componente que aparece en blanco en tu página web o datos que no se recuperan o actualizan. Estos problemas suelen deberse a configuraciones incorrectas o errores en el código JavaScript. Puedes resolverlos con las herramientas de desarrollador del navegador, en particular la consola para los errores de JavaScript y la pestaña de red para los problemas de solicitudes y respuestas.

¿Cómo puedo optimizar el rendimiento de Lightning Out?

• La optimización del rendimiento de Lightning Out implica administrar los datos de manera eficiente. Minimiza las consultas de datos, usa paginación para conjuntos de datos grandes y aprovecha el almacenamiento en caché del lado del cliente. Además, asegúrate de que tu sitio web externo utilice HTTPS para mantener una comunicación segura con Salesforce.

¿Puedes dar un ejemplo de uso de Salesforce Lightning Out?

• Un ejemplo real del uso de Lightning Out es integrar un CRM de Salesforce con un sitio externo de comercio electrónico. El componente Lightning 'Agregar al carrito' se puede integrar en el sitio de comercio electrónico para ofrecer actualizaciones del inventario en tiempo real. Este uso de Lightning Out permite una integración fluida entre ambas plataformas, mejora la experiencia de usuario y agiliza el flujo de datos.

¿Cómo puede Blue Canvas ayudar con Salesforce Lightning Out?

• Blue Canvas ofrece un sólido conjunto de herramientas y un equipo de profesionales con experiencia para ayudarte a implementar y optimizar Salesforce Lightning Out. Pueden guiarte durante todo el proceso, desde la configuración inicial y el despliegue hasta la resolución de problemas y la optimización, para que aproveches al máximo Lightning Out según tus necesidades específicas.