Skip to main content

Crear un componente web Lightning

Nota

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.

En este paso, aprenderá a utilizar las herramientas que instaló previamente.

Crear un proyecto de Salesforce DX

Los proyectos de Salesforce DX son los pilares básicos para la interacción con una organización que utiliza la CLI de Salesforce. Los proyectos constan de varios archivos de configuración, así como del código que desee implementar. En términos de Salesforce, este código se conoce también como metadatos, que son los pilares básicos de Salesforce Platform. Si es nuevo en Salesforce, consulte la ruta Principiante de desarrollo de plataforma para obtener más información acerca de nuestro enfoque basado en metadatos.

Utilizaremos Visual Studio Code para crear un proyecto.

  1. Abra Visual Studio Code.
  2. Pulse Command + Shift + P en macOS o Ctrl + Mayús + P en Windows o Linux y, a continuación, escriba create project (crear proyecto). Seleccione SFDX: Create Project (Crear proyecto) y pulse Entrar.
  3. Deje la selección de tipo de proyecto predeterminado Standard (Estándar) tal cual y pulse Entrar.
  4. Ingrese trailhead como nombre de proyecto y pulse Entrar.
  5. Seleccione un directorio de su equipo local para almacenar el proyecto. Haga clic en Create Project (Crear proyecto).

¡Excelente! Acaba de crear su primer proyecto de Salesforce DX para trabajar con los componentes web Lightning. Visual Studio Code abrirá automáticamente el nuevo proyecto.

Autorizar Dev Hub

El siguiente paso consiste en autenticar Dev Hub. Si utiliza un Trailhead Playground, en la unidad Obtener su nombre de usuario y contraseña de Trailhead Playground encontrará información acerca de cómo obtener las credenciales necesarias para el paso siguiente.

  1. En Visual Studio Code, pulse Command + Mayús + P en un Mac, o Ctrl + Mayús + P en Windows o Linux.
  2. Ingrese sfdx.
  3. Seleccione SFDX: Authorize a Dev Hub (Autorizar un Dev Hub).
  4. Inicie sesión utilizando las credenciales de su organización Dev Hub.
  5. Haga clic en Allow (Permitir).

    Pantalla de autenticación de Dev Hub.
  6. Tras autenticarse en el navegador, la CLI recuerda sus credenciales de Dev Hub. Cuando el proceso se complete con éxito, se mostrará un mensaje similar al siguiente: 

    Mensaje que indica que la autorización de Developer Hub se realizó correctamente.

Autenticar Dev Hub es un requisito necesario para poder crear una organización borrador, que es un entorno efímero para el desarrollo en Salesforce Platform. Esto es lo que vamos a crear en el siguiente paso.

Crear una organización borrador

  1. En Visual Studio Code, pulse Command + Mayús + P en un Mac, o Ctrl + Mayús + P en Windows o Linux.
  2. Ingrese sfdx.
  3. Seleccione SFDX: Create a Default Scratch Org... (Crear una organización borrador predeterminada).
  4. Pulse Enter (Intro) para aceptar el archivo project-scratch-def.json predeterminado.
  5. Pulse Intro para aceptar el alias de organización borrador predeterminado trailhead.
  6. Pulse Intro para aceptar la duración predeterminada para la organización borrador de 7 days (7 días).

Sea paciente. La creación de una organización borrador puede tardar unos minutos. El mensaje de operación correcta tendrá este aspecto en el panel de resultados de VS Code:

17:18:11.779 sfdx force:org:create -f

config\project-scratch-def.json --setalias trailhead 

--durationdays 7 --setdefaultusername --json --loglevel fatal ended with exit code 0

Ya lo tiene todo preparado para desarrollar su primer componente web Lightning. Si desea obtener más información acerca de Salesforce DX, consulte Desarrollo de aplicaciones con Salesforce DX.

Crear un componente web Lightning

La creación de componentes web Lightning es un proceso sencillo. Por ello la CLI de Salesforce ofrece una estructura de proyecto que puede facilitarle aún más los primeros pasos.

A continuación se muestra la estructura de carpetas:

Vista del explorador de archivos de un proyecto de Salesforce DX en Visual Studio Code, que muestra los subdirectorios .sfdx, .vscode, config y force-app.

El proyecto que creamos tiene una carpeta especial force-app/main/default. Esta carpeta, que se denomina directorio de paquete, contiene todos los metadatos del proyecto de Salesforce DX. Puesto que los componentes web Lightning también son metadatos, estos se almacenan en una subcarpeta con el nombre lwc. En el próximo paso, agregaremos un componente web Lightning a esta carpeta.

Nota

También encontrará dos archivos en la carpeta lwc: .eslintrc y jsconfig.json. Los analizaremos con detalle más adelante en este mismo proyecto.

Podemos utilizar Visual Studio Code para crear un componente web Lightning, al igual que hicimos para crear el proyecto de Salesforce DX. (Podría usar la CLI de Salesforce directamente, pero ahora usaremos el terminal integrado en Visual Studio Code).

  1. Abra Visual Studio Code.
  2. Pulse Command + Shift + P en macOS o Ctrl + Mayús + P en Windows o Linux.
  3. Ingrese focus terminal (enfoque en terminal) y seleccione Terminal: Focus Terminal (enfoque en Terminal).
    Se selecciona la ficha Terminal (junto a Output [Salida]).
  4. En la ficha Terminal, ingrese sf lightning generate component -n myFirstWebComponent -d force-app/main/default/lwc --type lwc y pulse la tecla Intro.

Esto creará los archivos necesarios para su primer componente web Lightning.

Estructura de directorios de metadatos con la carpeta del componente web Lightning ampliada.

A continuación se describen los parámetros que se utilizaron en el comando.

  • -n define el nombre de la carpeta del componente web Lightning y de sus archivos.
  • -d define el directorio de destino en el que se debería crear el componente web Lightning. El directorio de destino debe tener el nombre lwc.
  • --type especifica que desea crear un componente web Lightning.
Nota

Como pudo ver, utilizar la CLI de Salesforce en su proceso de desarrollo es realmente sencillo. Si prefiere utilizar Visual Studio Code para el desarrollo, haga clic con el botón derecho en la carpeta lwc, o abra la paleta de comandos en Visual Studio Code. Ambas opciones ofrecen la opción SFDX: Create Lightning Web Component (Crear componente web Lightning), que invoca la CLI de Salesforce.

Agregar código y metadatos a su primer componente web Lightning

Veamos a continuación los archivos que forman parte de los componentes web Lightning. Para ello, va a copiar y pegar código HTML, JavaScript y XML que tenemos preparado para usted. Comenzaremos con el archivo myFirstWebComponent.js-meta.xml.

  1. Abra la carpeta myFirstWebComponent, que acaba de crear en la subcarpeta lwc.
  2. Haga clic en myFirstWebComponent.js-meta.xml.
  3. Sustituya el contenido del archivo XML con el marcado XML siguiente:

    <?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
   <apiVersion>51.0</apiVersion>
   <isExposed>true</isExposed>
   <targets>
       <target>lightning__AppPage</target>
       <target>lightning__RecordPage</target>
       <target>lightning__HomePage</target>
   </targets>
</LightningComponentBundle>
  4. Pulse CMD + S en macOS, o bien CTRL + S en Windows o Linux para guardar el archivo.

El archivo que acabamos de actualizar es el archivo de definición de metadatos. Dicho archivo contiene varios elementos de configuración que controlan, por ejemplo, la ubicación de la interfaz de usuario de Salesforce en la que se puede agregar con el Generador de aplicaciones Lightning (destinos). Puede obtener más información acerca de las opciones de configuración de metadatos en la documentación.

A continuación, actualizamos el archivo JavaScript de su componente web Lightning.

Nota

El marcado HTML y el código JavaScript que va a copiar y pegar tienen algunos errores. Por lo tanto, no se preocupe por las líneas rojas serpenteantes que puedan aparecer. Más adelante en el proyecto podrá resolver los errores con las funciones de Visual Studio Code combinadas con la extensión de componentes web Lightning de Salesforce.

  1. En Visual Studio Code, haga clic en myFirstWebComponent.js.
  2. Sustituya todo el contenido del archivo por este código:

    import { LightningElement } from 'lwc';
export default class MyFirstWebComponent extends LightningElement {
    @track
    contacts = [
        {
            Id: 1,
            Name: 'Amy Taylor',
            Title: 'VP of Engineering',
        },
        {
            Id: 2,
            Name: 'Michael Jones',
            Title: 'VP of Sales',
        },
        {
            Id: 3,
            Name: 'Jennifer Wu',
            Title: 'CEO',
        },
    ];
}
  3. Pulse CMD + S en macOS, o bien CTRL + S en Windows o Linux para guardar el archivo.

Tras guardar el archivo, notará varias cosas de inmediato.

  • La palabra anotada @track aparece subrayada con una línea roja ondulada.
  • El color del archivo de JavaScript en el explorador cambia a rojo.

    Archivo de JavaScript abierto con errores resaltados.
Nota

Según su configuración, puede que vea un solo error.

Ambas cosas indican que hay algo en el código de JavaScript que está mal. Como buen desarrollador, seguro que se siente tentado de resolver los problemas de inmediato.

Pero por ahora, vamos a ignorar estos errores. En su lugar, agregue el marcado HTML al archivo de plantilla de componentes web.

  1. En Visual Studio Code, haga clic en myFirstWebComponent.html.
  2. Inserte este marcado entre las etiquetas <template></template> existentes:

    <lightning-card title="ContactInformation" icon-name="custom:custom14">
   <div class="slds-m-around_medium">
      <template for:each={} for:item="contact">
         <div>
            {contact.Name}, {contact.Title}
         </div>
      </template>
   </div>
</lightning-card>
  3. Pulse CMD + S en macOS, o bien CTRL + S en Windows o Linux para guardar el archivo.

Nuevamente, verá indicios de que hay algo en el marcado HTML que está mal.

Archivo de plantilla HTML abierto con el error de la línea 4 resaltado.

Por ahora, esto también vamos a ignorarlo.

En circunstancias normales, el siguiente paso sería implementar el proyecto en su organización. Sin embargo, el código está plagado de errores, por lo que la implementación sería un fiasco. En la vida real, puede que se encuentre con implementaciones con errores o no. Por ello es importante que preste atención a todos los errores que se muestran en el IDE y que los corrija de inmediato.

En el próximo y último paso, corregimos el código.

Comparta sus comentarios de Trailhead en la Ayuda de Salesforce.

Nos encantaría saber más sobre su experiencia con Trailhead. Ahora puede acceder al nuevo formulario de comentarios en cualquier momento en el sitio de Ayuda de Salesforce.

Más información Continuar a Compartir comentarios