Analizar su código e implementarlo en su organización

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.

Usted instaló las herramientas que le recomendamos para el desarrollo de componentes web Lightning. También copió y pegó fragmentos de código que no funciona y que sabíamos que provocarían un error en la implementación. Probablemente dirá que nunca hizo esto en la vida real, ¿verdad?

Corrección de errores de JavaScript

La tarea más importante que todo desarrollador debe ser capaz de hacer, tras buscar en la Web código que funcione, es escribir usted mismo código que funcione. A continuación, vamos a corregir los errores que introdujimos antes comenzando con el archivo de JavaScript.

1. Abra Visual Studio Code.
   
2. Haga clic en myFirstWebComponent.js.
   
3. Coloque el cursor sobre la palabra track subrayada en rojo. Esto mostrará los mensajes de error relacionados con este error específico:
   
   
   
   
4. Haga clic en la ficha Problems (Problemas) para ver todos los errores que aparecen en los archivos que están abiertos actualmente. Aparecerá algo similar a lo siguiente:
   
   
   

Tanto el archivo actual como la ficha Problems (Problemas) muestran los errores que se detectaron en su código.

El primer mensaje de error indica que se debe a un requisito del motor de componentes web Lightning. Dichos errores incluyen “LWC” seguido de un número. Si presta atención al código, verá en la primera línea que se va a importar LightningElement del motor lwc, pero sin importar track. Vamos a solucionar esto:

• Haga clic después de la palabra LightningElement (entre llaves).
  
• Ingrese track y no olvide separar las dos palabras con una coma. El código debería verse así:
  import { LightningElement, track } from 'lwc';
  
• Pulse CMD + S en macOS, o bien CTRL + S en Windows o Linux para guardar el archivo.
  

Comprobará que ambos errores desaparecerán junto con las líneas rojas.

De manera predeterminada, el IDE valida el contenido de un archivo mientras escribe. Puede configurar esta función como preferencia en Visual Studio Code para validar código mientras se escribe o después de guardar el archivo.

Pero espere, ¿por qué desaparecieron ambos errores? ¿Y por qué aparecía la cadena [eslint] antes del otro mensaje de error?

La extensión de componentes web Lightning se suministra de manera predeterminada con ESLint. ESLint es una herramienta lint de uso generalizado que permite evaluar el código en busca de errores y que ofrece mejores prácticas de codificación entre otras muchas ventajas. Salesforce ofrece reglas de ESLint preconfiguradas que puede utilizar en calidad de desarrollador de componentes web Lightning para escribir código. Si comete algún error, las reglas de lint le ayudarán a detectarlo antes de implementar el código. ¿No es increíble?

El mensaje de error anterior mostraba al final la cadena [no-undef]. Ese mensaje de error indica que definió una propiedad, en este caso, el decorador track, sin antes declararla. Esta es una de las numerosas y utilísimas reglas lint que lo ayudarán a conservar su código en buen estado y sostenible.

¿Recuerda el archivo .eslintrc que se agregó automáticamente a la carpeta de metadatos lwc? Este es el archivo de configuración que define reglas lint específicas de Salesforce:

{

   "extends": "plugin:@salesforce/eslint-config-lwc/recommended"

}

Salesforce ofrece varios conjuntos de reglas, entre los que se incluye base, recommended y extended. Puesto que estas reglas lint son específicas de un proyecto, puede utilizar otros conjuntos de reglas para distintos proyectos.

Al implementar componentes web Lightning, Salesforce valida automáticamente el código con la regla lint @salesforce/eslint-config-lwc/base. Tenga esto en cuenta si vuelve a configurar las reglas lint usted mismo.

Si desea obtener más información acerca de ESLint o de las reglas lint que ofrece Salesforce, consulte el repositorio GitHub.

Ahora que ya disponemos de un archivo JavaScript que funciona, vamos a corregir el marcado HTML de su plantilla de componentes web.

Corrección de errores de plantillas HTML

Ahora que ya corrigió los errores del archivo JavaScript, aprenderá a utilizar la característica Intellisense de Visual Studio Code en tándem con la extensión de componentes web Lightning de Salesforce.

1. Abra myFirstWebComponent.html en Visual Studio Code.
   
2. Coloque el cursor entre las llaves en blanco del atributo for:each que aparece subrayado en rojo.
   
3. Presione Ctrl + barra espaciadora. Se abrirá el menú desplegable de Intellisense.
   
   
   
4. Seleccione contact (contacto) y pulse Intro para insertar contact (contacto).
   
5. Agregue una s para pluralizar la palabra: contacts (contactos).
   
6. A continuación, agregue este atributo a la etiqueta div marcada en rojo: key={contact.Id}.
   
7. Pulse CMD + S en macOS, o bien CTRL + S en Windows o Linux para guardar el archivo.
   

Su código debería tener un aspecto similar a éste:

<lightning-card title="ContactInformation" icon-name="custom:custom14">

   <div class="slds-m-around_medium">

      <template for:each={contacts} for:item="contact">

         <div key={contact.Id}>

            {contact.Name}, {contact.Title}

         </div>

      </template>

   </div>

</lightning-card>

Mientras corregía el código, ha podido ver dos cosas.

La primera de ellas es el uso de la función Intellisense en expresiones del marcado HTML. La extensión de componentes web Lightning incluye Intellisense, lo que significa que si agrega otras propiedades o funciones a su archivo JavaScript, estas estarán automáticamente disponibles en el archivo de la plantilla. ¡Esto supone un ahorro de tiempo increíble!

La segunda es que ha podido probar la validación directa del código o en este caso, del marcado. Sucede exactamente lo mismo que en el archivo JavaScript. De este modo, si le falta un atributo obligatorio, el IDE se lo indicará.

También dispondrá de la función Intellisense en todos los componentes Lightning base de su archivo de plantilla. Cuando comience a escribir <lightning, se mostrará una lista como esta.

Además, cuando sitúe el cursor sobre el marcado existente, la extensión le proporcionará información enriquecida acerca del componente base seleccionado.

Los mensajes de advertencia sobre código o tokens pueden aparecer por una instalación obsoleta de la CLI de Salesforce. El código de componente generado por la CLI tiene el mismo nivel de actualización que la instalación de la CLI. SLDS Validator (parte del paquete de extensiones de Salesforce) indica si hay código obsoleto, por lo que una CLI antigua probablemente arroje más advertencias.

Para esta insignia, puede desestimar las advertencias de token de diseño porque no le impedirán completar los pasos. No obstante, fuera del contexto de la insignia, deberá investigar todos los mensajes de advertencia y mantener la CLI de Salesforce actualizada.

Implementar y configurar nuevos componentes web Lightning

Ahora que ya corrigió todo el código, es el momento de enviar los metadatos locales a su organización borrador.

1. Para implementar los metadatos en su organización, ingrese este comando en la ficha Terminal:
   sf project deploy start.
   
2. Pulse Entrar.
   

Tras enviar correctamente los metadatos a su organización borrador, podrá agregar el componente al formato de registro de cuenta.

1. Para abrir la organización borrador predeterminada, ingrese este comando en la ficha Terminal:
   sf org open
   
2. Pulse Entrar.
   

Ahora vamos a configurar la página del registro de cuenta.

1. Desde el Iniciador de aplicación (), busque y seleccione Sales (Ventas).
   
2. Haga clic en la ficha Accounts (Cuentas), luego haga clic en New (Nueva) para crear una cuenta. Ingrese Component Developers (Desarrolladores de componentes) en Account Name (Nombre de la cuenta) y, a continuación, haga clic en Save (Guardar).
   
3. Haga clic en el icono de engranaje ( ) y seleccione Edit Page (Modificar página) para abrir el Generador de aplicaciones Lightning.
   
4. Arrastre el componente myFirstWebComponent a la página.
   
5. Haga clic en Save (Guardar) y, a continuación, haga clic en Activate (Activar).
   
6. Haga clic en Assign as Org Default (Asignar como predeterminado de la organización), luego haga clic en Next (Siguiente) y, por último, en Save (Guardar).
   
7. Haga clic en Back (Atrás) () para regresar al registro de cuenta.
   

¡Ya está! Este proyecto le mostró cómo instalar y utilizar las herramientas de desarrollador recomendadas para el desarrollo de componentes web Lightning. Además, también aprendió a copiar y pegar código con errores (cosa que deberá evitar en el futuro).

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 la galería de muestras de Trailhead y las recetas de componentes web Lightning para ver más ejemplos y aprender código que puede ayudarlo a desarrollar componentes web Lightning increíbles.