Obtener una vista previa de su componente con Local Dev

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.

Anteriormente en este proyecto, creó una organización borrador (alias scratchOrg), una aplicación de Lightning y un componente web Lightning (myFirstWebComponent). Ahora, ejecutará Local Dev para ver su componente en una vista previa en tiempo real de su aplicación Lightning.

Ejecutar Local Dev para una aplicación Lightning en un entorno de computadora

Con Local Dev, puede ejecutar una vista previa en tiempo real de su aplicación Lightning en un entorno de computadora o de Salesforce para dispositivos móviles (iOS o Android). La vista previa se actualiza automáticamente cuando hay modificaciones en los componentes locales, de modo que no necesita implementar código ni actualizar la página del navegador. Existen distintos indicadores de comandos para ejecutar una vista previa de la computadora, en comparación con una vista previa de un dispositivo móvil.

Obtengamos una vista previa de la aplicación Lightning Ventas en un entorno de computadora con Local Dev. La organización borrador incluye algunas aplicaciones predeterminadas que puede usar.

1. En Visual Studio Code, presione Comando + Mayús + P en macOS o Ctrl + Mayús + P en Windows o Linux, luego escriba new terminal (nuevo terminal) y seleccione Terminal: Create New Terminal (Crear nuevo terminal).
   
2. Asegúrese de tener la versión más reciente del comando Local Dev. En la ficha Terminal, escriba sf update (actualización sf) y presione Intro.
   
3. Una vez finalizada la actualización, en la misma ficha Terminal, escriba sf lightning dev app --target-org scratchOrg --device-type desktop y presione Intro.
   
4. Cuando se le solicite seleccionar una aplicación Lightning Experience para obtener una vista previa, use las teclas de flecha hasta llegar a Sales (Ventas) y, luego, presione Intro.
   

Si el comando se ejecuta correctamente, se abre una nueva ficha en el navegador con una vista previa de la página de inicio de vendedor de su organización. Local Dev está habilitado para esta organización borrador. A continuación se describen los parámetros que se utilizaron en el comando.

• --target-org define la organización de destino de la que desea ver una vista previa. Se configura este indicador como scratchOrg.
  
• --device-type define el entorno en el que se ejecuta la vista previa. Cuando se configura este indicador como desktop (computadora), se garantiza que la vista previa se ejecute en un entorno de computadora.
  

Para obtener más información sobre otros indicadores opcionales para el comando sf lightning dev app, consulte Guía del desarrollador de componentes web Lightning: Obtener una vista previa de una app Lightning (disponible al público en general).

Ahora, modifiquemos su componente y veamos cómo la vista previa de Local Dev se actualiza en tiempo real.

1. En el navegador, haga clic en la ficha Accounts (Cuentas) y abra el registro Component Developers (Desarrolladores de componentes).
   
2. En Visual Studio Code, abra myFirstWebComponent.html.
   
3. En el elemento <lightning-card>, cambie el valor de title (título) de “ContactInformation” a “Contact Information” (“Información de contacto”). Así debería verse la línea de código actualizada:
   <lightning-card title="Contact Information" icon-name="custom:custom14">
4. Presione Comando + S en macOS, o bien Ctrl + S en Windows o Linux para guardar el archivo.
   

Eche un vistazo en el navegador a la vista previa de la aplicación y observe cómo se actualiza automáticamente el título del componente conforme al cambio local. No necesitó volver a implementar su aplicación ni actualizar manualmente la página para ver la corrección.

Ejecutar Local Dev para una aplicación Lightning en un entorno de iOS (solo macOS)

Con Local Dev, puede ver su proyecto en un simulador de iOS o un emulador de Android. Echemos un vistazo a cómo ejecutar una vista previa de la misma aplicación Lightning en un entorno de iOS.

En esta sección, repasamos solamente el simulador de iOS, pero debe seguir el mismo proceso para utilizar el emulador de Android. Para obtener información sobre cómo usar Local Dev con Android Studio, consulte Emuladores de Android.

Los usuarios de Mac pueden ejecutar un simulador de iOS para Local Dev con Xcode. Si aún no tiene Xcode instalado, hágalo desde Mac App Store y complete el proceso de configuración inicial. Asegúrese de descargar los simuladores de iOS para dispositivos móviles.

Cuando termine de instalar Xcode, abra Visual Studio Code. Es hora de ejecutar su aplicación Lightning en un simulador de iPhone.

1. En Visual Studio Code, haga clic en Comando + Mayús + P y, luego, escriba new terminal (nuevo terminal) y seleccione Terminal: Create New Terminal (Crear nuevo terminal).
   
2. En la ventana del terminal nuevo, ejecute sf lightning dev app --target-org scratchOrg --device-type ios.
   
3. Cuando se le solicite seleccionar una aplicación Lightning Experience para obtener una vista previa, seleccione Sales (Ventas) y presione Intro.
   
4. Cuando se le pida seleccionar un dispositivo para usar con la vista previa, seleccione un iPhone de la lista de opciones válidas.
   
5. Cuando se le requiera descargar e instalar la aplicación de Salesforce para dispositivos móviles escriba y, luego, presione Intro.
   

Así es como se podría ver la salida del terminal cuando el comando Local Dev se ejecuta correctamente.

sf lightning dev app --target-org scratchOrg --device-type ios
? Which Lightning Experience App do you want to use for the preview? Sales
✔ Requirements (0.444 sec)
  ✔ PASSED: Checking macOS Environment (0.000 sec)
  ✔ PASSED: Checking Xcode (0.029 sec)
    › Xcode installed: Xcode 16.2 Build version 16C5032a
  ✔ PASSED: Checking Supported Simulator Runtime (0.414 sec)
    › One or more supported simulator runtimes are configured for iOS: iOS 17.0 iOS 18.2
? Which device do you want to use for the preview? iPhone 15 Pro, iOS 17
Booting device iPhone 15 Pro, iOS 17.0.0, DCF7AD98-FAC7-4267-A546-14A80F874209... done
Installing self-signed certificate... done
? Salesforce Mobile App isn’t installed on your device. Do you want to download and install it? yes
Preparing to download... done
Installing app com.salesforce.chatter... done
terminating app com.salesforce.chatter... done

La aplicación de Salesforce debería abrirse automáticamente en el simulador de iPhone. Acepte Terms of Use (Términos de uso) de la aplicación. Luego, el simulador debería mostrar la página de inicio de sesión de Salesforce.

Siga estos pasos para abrir su organización borrador en la aplicación.

1. En la esquina superior derecha del simulador, haga clic en Settings (Configuración) () para abrir el menú Choose Connection (Elegir conexión).
   
2. En el menú Choose Connection (Elegir conexión), haga clic en Add (Agregar) () para agregar un nuevo host.
   
3. El dominio del campo Host debería ser la URL de su organización borrador. Para encontrar esta URL puede ejecutar sf org display user --target-org scratchOrg en una ventana de terminal de VS Code.
   
4. Copie la URL de instancia desde la salida del terminal y péguela en el campo Host de su simulador, de esta manera:
   
   
5. Luego, en la esquina superior derecha del simulador de iOS, haga clic en Done (Listo) para agregar el nuevo dominio y regresar a la página de inicio de sesión de Salesforce.
   
6. En el campo Username (Nombre de usuario), copie y pegue el valor de Username (Nombre de usuario) de la salida del terminal en el Paso 3. El nombre de usuario debe tener el formato valor-prueba@ejemplo.com.
   
7. A fin de obtener una contraseña para este nombre de usuario, en el terminal de VS Code, escriba sf org generate password --target-org scratchOrg y presione Intro.
   
8. De la salida del terminal, copie la contraseña y péguela en el campo Password (Contraseña) del simulador de iOS y, luego, haga clic en Log In to Sandbox (Iniciar sesión en Sandbox).
   
9. De ser necesario, ingrese el código de verificación que se envió a la dirección de email especificada.
   
10. Si la aplicación le solicita acceso a su organización, seleccione Allow (Permitir).
    
    

Ahora, debería ver la aplicación de Salesforce en su simulador de iOS. Naveguemos a la cuenta Component Developer (Desarrollador de componentes) en la aplicación Sales (Ventas) para poder ver Local Dev en acción.

1. En la esquina inferior derecha de la aplicación, haga clic en Menu (Menú) y, luego, seleccione Accounts (Cuentas).
   
2. En Recent Accounts (Cuentas recientes), haga clic en Component Developers (Desarrolladores de componentes). Debería ver su LWC myFirstWebComponent en la página.
   
3. En Visual Studio Code, abra myFirstWebComponent.html.
   
4. En el elemento <lightning-card>, cambie el valor de title (título) de “Contact Information” (“Información de contacto”) a “Contact Info” (“Info de contacto”). Así debería verse la línea de código actualizada:
   <lightning-card title="Contact Info" icon-name="custom:custom14">
5. Presione Comando + S en macOS, o bien Ctrl + S en Windows o Linux para guardar el archivo.
   

Ahora vuelva a observar el simulador de iOS para asegurarse de que el título del componente se haya actualizado automáticamente. ¿Ve lo rápido que puede iterar en sus componentes con Local Dev?

¡Ya está! En este proyecto instaló y usó las herramientas recomendadas para el desarrollo de componentes web Lightning. Copió y pegó código con errores (algo que deberá evitar en el futuro). Usó Local Dev para acceder a una vista previa en tiempo real de los cambios en su componente web Lightning en un entorno de computadora. Si es usuario de Mac, también utilizó Local Dev para obtener una vista previa del componente en un entorno de iPhone.

No podemos revisar su trabajo en una organización borrador, pero puede hacer clic en Verify Step (Verificar paso) para obtener la insignia. A continuación, consulte las aplicaciones de muestra de Trailhead y las recetas de componentes web Lightning para ver más ejemplos de código y aprender sobre cómo desarrollar componentes web Lightning excelentes.

Recursos

• Trailhead: Configurar las herramientas de desarrollador de Salesforce para dispositivos móviles para componentes web Lightning