Las funciones y herramientas más recientes de LWC para dispositivos móviles ☁️

El objetivo de Mobile Platform Experience es facilitar que los desarrolladores tengan éxito al crear aplicaciones para dispositivos móviles. Es por eso que estamos tan emocionados de que el lanzamiento de Spring '23 esté lleno de innovaciones para hacer que sus componentes web Lightning (LWC) brillen en teléfonos móviles y tabletas. También hacen que la experiencia de desarrollo de esos LWC sea mucho más fácil. ¡Sigue leyendo para aprender más!

Resumen rápido de las innovaciones anteriores a Spring '23

En primer lugar, hagamos un resumen rápido de las herramientas, características y prácticas recomendadas de LWC para dispositivos móviles que se han publicado en versiones recientes. Puede que no los conozcas, ¡y podemos decirte que son geniales!

Si no está familiarizado con estas funciones, mire codeLive: LWC para dispositivos móviles para verlas en acción.

A continuación, sigamos hablando de las novedades de Spring '23.

Mejoras en el complemento BarcodeScanner

Los complementos de Nimbus le permiten usar capacidades nativas de dispositivos móviles en sus componentes web Lightning. Los complementos permanecen inactivos en el escritorio y cobran vida en las aplicaciones móviles. Por ejemplo, algunos clientes ya están utilizando los complementos de Nimbus para escanear códigos de barras para casos de uso como verificar el inventario de productos, etiquetar la ubicación de un trabajador de campo para una orden de trabajo del cliente, importar contactos desde un dispositivo a una cuenta de Salesforce y sincronizar eventos de calendario hacia y desde Salesforce. .

Tenemos complementos de Nimbus ya disponibles o que se están agregando actualmente a las aplicaciones creadas por Salesforce, incluida la aplicación Salesforce Mobile (con Health Cloud y Retail Experience), Salesforce Field Service y Mobile Publisher para Experience Cloud. Hemos priorizado el soporte de los diferentes casos de uso de dispositivos nativos implementados en las diferentes aplicaciones móviles en función de los comentarios de los clientes. Consulte la siguiente tabla para obtener más información.

La compatibilidad y los requisitos de los complementos de Nimbus cambian constantemente, y puede encontrar la información más actualizada en la Guía del desarrollador de LWC debajo de cada complemento.

En Summer '22, pusimos a disposición nuestro complemento BarcodeScanner. Agregamos un ejemplo de implementación a nuestra aplicación de muestra Dreamhouse y publicamos una publicación de blog sobre cómo usarla. En Spring '23, el complemento BarcodeScanner se mejoró para manejar mejor el escaneo de múltiples códigos de barras, ya que esta era una función muy solicitada por los clientes.

Las nuevas mejoras incluyen:

• Se puede habilitar un cuadro delimitador para resaltar el código de barras particular que se escaneará
• La confirmación manual permite al usuario confirmar qué código de barras/código QR escanear cuando hay varios en la vista
• La vista previa de los datos capturados permite que el escáner obtenga una vista previa de los datos capturados en el escaneo incluso antes de salir de la pantalla de escaneo

Consulte la documentación de BarcodeScanner para obtener más información.

Utilidad de cambio de tamaño de imagen para lightning-input

Hemos agregado una biblioteca de compresión y cambio de tamaño de imágenes ( mediaUtils ) que puede usar con el componente base lightning-input para mejorar el rendimiento de la carga de imágenes. Esto es especialmente importante para los dispositivos móviles. Para facilitar la comprensión de la función, hemos actualizado la implementación de nuestro carrusel de imágenes de la aplicación de muestra Dreamhouse . Ahora, el componente usa lightning-input en lugar de lightning-file-upload . Tenga en cuenta que este último es más fácil de usar si no necesita manipular las imágenes antes de cargarlas.

<dx-code-block title language="html" code-block=" «>

En el código JavaScript del componente, importamos processImage desde lightning/mediaUtils . Esto le permite manejar el cambio de tamaño y la compresión de imágenes sin escribir todo ese código usted mismo. Ver el ejemplo completo para más información.

Validación fuera de línea de LWC

Para los clientes móviles, permitir que los usuarios finales trabajen sin conexión (sin conexión a la red o conectividad limitada) es una necesidad clave. Los trabajadores de campo realizan trabajos de reparación, visitan tiendas, visitan pacientes en el hogar y más. En estos casos, necesitan hacer su trabajo independientemente de la conectividad de la red. Ahora, puede crear LWC que se ejecuten en este tipo de escenarios gracias a LWC Offline.

LWC Offline es un entorno de tiempo de ejecución avanzado para componentes web Lightning. Disponible solo para dispositivos móviles, reemplaza el tiempo de ejecución estándar de los componentes Lightning y lo aumenta con funciones diseñadas específicamente para uso móvil y sin conexión. Para admitir LWC Offline y Briefcase en la aplicación Salesforce Mobile, Salesforce App+ estuvo disponible como un programa piloto cerrado en el lanzamiento de Winter '23 y pasará a la versión beta cerrada en Spring '23. LWC sin conexión está generalmente disponible (GA) como una mejora opcional para la aplicación móvil Salesforce Field Service. Obtenga más información revisando el artículo Creación de aplicaciones móviles listas para usar sin conexión con Salesforce .

Para los desarrolladores que crean LWC que deberían funcionar sin conexión, pueden aprovechar nuestro complemento VS Code ESLint más nuevo, eslint-plugin-lwc-graph-analyzer . Este validador utiliza el analizador estático de Komaci, que lo ayuda a asegurarse de que las dependencias de código y los datos que necesita su componente puedan prepararse cuando hay una conexión de red disponible, haciendo que el componente y sus datos estén disponibles sin conexión cuando la red tiene conectividad limitada o nula. Con el complemento instalado, obtiene comentarios instantáneos sobre la preparación sin conexión a medida que construye sus LWC. El validador también proporciona punteros a las descripciones de los errores de validación y cómo solucionarlos. Para obtener más información sobre la instalación y el uso del complemento ESLint para VSCode, consulte la Guía para desarrolladores móviles sin conexión .

Arnés de prueba móvil para aplicaciones fuera de línea

Mobile Offline Test Harness (Test Harness, para abreviar) es una aplicación liviana de prueba y depuración que puede instalar en su emulador de Android o simulador de iOS. Con la aplicación Test Harness, puede confirmar que sus LWC funcionan como se esperaba antes de que estén listos para la prueba de integración dentro de una aplicación móvil de Salesforce habilitada sin conexión (Salesforce Field Service y Salesforce App+ a partir de hoy). El arnés de prueba incluye:

• Un flujo de aplicaciones rápido y conveniente centrado en el lanzamiento de acciones rápidas de LWC con un SObject seleccionado
• Una cola de borrador dedicada para ver el estado de las operaciones de modificación de datos pendientes
• Una consola de depuración integrada en la aplicación para obtener una vista amplia de las tareas en curso y una inspección granular de los mensajes de registro
• Recargas de aplicaciones inmediatas y bajo demanda para reiniciar rápidamente y volver a ejecutar sus últimos cambios de código LWC
• La capacidad de adjuntar depuradores de navegador para ver más errores y advertencias específicos del desarrollador desde la vista web de LWC

Test Harness se ejecuta en una versión constantemente compatible de LWC Offline, por lo que puede esperar tiempos de respuesta rápidos y un entorno de prueba y depuración siempre actualizado.

Para obtener más información sobre la instalación y el uso del arnés de prueba móvil sin conexión, consulte la guía Desarrollar LWC listos para usar sin conexión con el arnés de prueba móvil sin conexión .

UTAM para Móvil

El modelo de automatización de pruebas de interfaz de usuario (UTAM) se basa en el popular patrón de diseño del modelo de objeto de página que se usa comúnmente en las pruebas de interfaz de usuario. Para usar UTAM, un desarrollador debe crear un objeto de página para cada componente de la interfaz de usuario para encapsular las interacciones en un solo lugar. UTAM proporciona una gramática JSON para escribir objetos de página y un compilador para generar código ejecutable en Java o JavaScript.

El equipo de Salesforce Mobile está trabajando en estrecha colaboración con UTAM para ayudarlo a realizar pruebas de interfaz de usuario en dispositivos móviles. Hoy, puede usar el nuevo inspector móvil de UTAM para identificar objetos de página para dispositivos móviles. Cuando escribe una prueba para una página nativa de una aplicación híbrida de Salesforce Mobile, a menudo es confuso saber qué objetos de página usar. El inspector móvil de UTAM le presenta el conjunto apropiado de objetos de página para la página que está navegando actualmente e identifica qué elementos de página se ven afectados por los métodos en un objeto de página seleccionado.

Próximamente, mejoraremos esta experiencia con herramientas en VSCode para ayudarlo a agregar pruebas UTAM para sus componentes web Lightning en dispositivos móviles.

Empieza ahora

¡Vaya, eso fue mucho! Esperamos que haya disfrutado de esta publicación de blog y que esté ansioso por usar todas esas nuevas capacidades para crear LWC para dispositivos móviles fácilmente y lograr la mejor experiencia de usuario para sus usuarios de dispositivos móviles. Para obtener más información, consulte la Guía del desarrollador de LWC para obtener información sobre todas las herramientas disponibles para la experiencia del desarrollador móvil, o vea los últimos videos, blogs, podcasts e insignias de senderos en el LWC para el Centro de desarrollo móvil .

Sobre los autores

Sue Berry es directora de gestión de productos en Salesforce, donde se centra en Salesforce Mobile. Actualmente está trabajando en Salesforce Mobile SDK y las nuevas herramientas móviles que se presentan en este blog. Lleva más de 15 años creando herramientas para desarrolladores. @suzetteaberry

Alba Rivas trabaja como Principal Developer Advocate en Salesforce. Actualmente se enfoca en el desarrollo de Lightning Web Components y Slack. Puedes seguirla en Twitter @AlbaSFDC .