Uso de la nueva API BarcodeScanner en Mobile Lightning Web Components ☁️

Nuestra nueva API BarcodeScanner permite a los desarrolladores crear más rápidamente componentes web Lightning (LWC) para aplicaciones móviles de Salesforce que pueden escanear una variedad de códigos QR y de barras. Los clientes que necesitan moverse mientras escanean para rastrear el inventario o los paquetes, por ejemplo, pueden encontrar este servicio extremadamente práctico y útil. En el ciclo de lanzamiento de Summer '22, actualizamos nuestra aplicación de muestra Dreamhouse para incluir un caso de uso de ejemplo de la API de BarcodeScanner, que veremos con más detalle a continuación.

Trabajar con la API BarcodeScanner

Dreamhouse es una aplicación de muestra de bienes raíces ficticia creada con LWC que ha sido optimizada para experiencias móviles y de escritorio. Nuestro gran caso de uso de ejemplo para la API de BarcodeScanner: la empresa Dreamhouse imprime códigos QR en el letrero "En venta" de cada propiedad. Al mostrar el lugar a compradores potenciales, el corredor asignado de una propiedad puede escanear el código QR para cargar datos relevantes en la aplicación Salesforce.

Para nuestro caso de uso de ejemplo, usamos el método de escaneo único * de la API. Este enfoque permite a los usuarios escanear un solo código QR y hacer algo con los datos escaneados. Con Dreamhouse, una vez que el código QR se ha escaneado con éxito, redirigimos automáticamente al usuario a la página de detalles de la propiedad relacionada a través del servicio de navegación de Salesforce.

*Nota: BarcodeScanner API también viene con un modo de captura continua , que puede ser más adecuado para escanear varios códigos de barras seguidos sin tener que presionar repetidamente el botón de escaneo, como cuando, por ejemplo, se escanea el inventario.

El código completo del componente está disponible en GitHub . Puede ver cómo configuramos la API de BarcodeScanner en el JavaScript de nuestro componente de escáner a continuación:

Prueba manual del BarcodeScanner LWC

BarcodeScanner API funciona en LWC en la aplicación móvil Salesforce , aplicaciones publicadas a través de Mobile Publisher para Salesforce y aplicaciones publicadas a través de Mobile Publisher para Experience Cloud .

Decidimos probar nuestra nueva función BarcodeScanner a través de la aplicación móvil Salesforce, que se puede instalar en un emulador móvil o en un teléfono inteligente físico.

Para hacerlo, configuramos una organización borrador y le enviamos nuestros cambios , luego iniciamos sesión con nuestras credenciales en test.salesforce.com , donde viven las organizaciones borrador, marcando la casilla de verificación Use Custom Domain en la pantalla de inicio de sesión móvil.

También preparamos este código QR para probar nuestra aplicación (usamos el generador de códigos QR gratuito de Beaconstac , pero cualquier generador de códigos QR funcionará):

Este código QR comprende el ID de registro de la propiedad como una cadena. El código se puede adjuntar al letrero "En venta" de la propiedad para permitir una búsqueda rápida de registros.
Una vez que iniciamos sesión, apuntamos las cámaras de nuestro teléfono al código y… ¡listo! Estábamos en la página de registro de propiedad identificada con código QR en un instante. ✨

Vea la magia en acción a continuación:

[contenido incrustado]

Escribir pruebas automatizadas para funciones móviles

Después de desarrollar y probar manualmente la función de escáner de código QR, nos aseguramos de escribir pruebas unitarias automatizadas para permitir una detección más rápida de futuros cambios en el código que podrían romper su funcionalidad.

Debido a que no necesitamos preocuparnos por probar la API de BarcodeScanner en sí, nuestro primer paso fue simular su funcionalidad .

Una vez que tuvimos una "API BarcodeScanner" falsa para trabajar, estábamos listos para escribir algunas pruebas unitarias. Esto es lo que probamos para nuestro caso de uso de ejemplo:

• Si el componente del escáner de código de barras se deshabilitó correctamente cuando se vio en el escritorio. Podríamos haber ocultado el componente para escritorio en el nivel de metadatos, pero preferimos mostrarlo deshabilitado, para que los alumnos pudieran ver que el componente existe y funciona para dispositivos móviles.
• Si la clase de escáner de código de barras podría extraer correctamente los datos de un escaneo
• Si la clase de escáner de código de barras navegó correctamente al registro de propiedad relevante
• Si el componente del escáner de código de barras mostró el mensaje de error apropiado cuando el usuario canceló su escaneo
• Si el componente del escáner de código de barras mostró el mensaje de error apropiado cuando hubo un error de no cancelación

lo que viene después

Hemos agregado aún más características nuevas a la API de BarcodeScanner para permitir a los desarrolladores personalizar aún más su interfaz. En octubre, esté atento a la documentación actualizada que detalla los nuevos parámetros de BarcodeScannerOptions para personalizar la configuración, como:

• Elegir qué cámara debe usar su dispositivo con cameraFacing . La cámara trasera probablemente sea más conveniente para los usuarios que escanean con sus propios dispositivos portátiles, mientras que la cámara frontal puede ser preferible para situaciones en las que los usuarios necesitan escanear códigos en quioscos de eventos estacionarios.
• Dictar el tamaño del marco del área de escaneo dentro de la vista de la cámara con scannerSize . El tamaño puede variar desde small a x-large para satisfacer todas las necesidades de tamaño del dispositivo.
• successText visualmente el éxito de la confirmación del escaneo completado. Mensajes de texto con un ícono de marca de verificación usando showSuccessCheckMark .

Finalmente, para los casos en los que se necesita una amplia personalización de la interfaz, la próxima versión permitirá a los desarrolladores reemplazar por completo la interfaz de usuario estándar con una personalizada utilizando backgroundViewHTML , hasta la interfaz para cancelar/descartar escaneos.

¡Esperamos que esté tan emocionado como nosotros por lo mucho más rápido que será el desarrollo de los componentes del escáner de código de barras con estas próximas incorporaciones!

Aprende más

Hoy, cubrimos los conceptos básicos de qué es la API de BarcodeScanner, cuándo es posible que desee usarla y cómo conectarse desde dentro de un LWC. Para continuar con este viaje de aprendizaje, no dude en examinar los siguientes recursos para obtener más información sobre cómo trabajar con Salesforce DX y la API de BarcodeScanner.

Sobre los autores

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 .

tessa es promotora principal de desarrollo en Salesforce.

Fiona Tang es Gerente Asociada de Producto en Salesforce. Actualmente trabaja en el equipo de Mobile Platform y forma parte del programa Salesforce APM .