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ó.

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. Un proyecto consta de varios archivos de configuración locales y del código que desea 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.

Para crear un proyecto:

  1. Abra Visual Studio Code.
  2. Presione Comando + Mayús + P en macOS o Ctrl + Mayús + P en Windows o Linux, y, luego, escriba create project (crear proyecto).
  3. Seleccione SFDX: Create Project (Crear proyecto) y pulse Entrar.
  4. Deje la selección de tipo de proyecto predeterminado Standard (Estándar) tal cual y pulse Entrar.
  5. Ingrese trailhead como nombre de proyecto y presione Intro.
  6. 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 abre automáticamente el nuevo proyecto.

Ventana emergente de Visual Studio Code que muestra el mensaje de creación de proyecto completada correctamente.

Autorizar Dev Hub

El paso siguiente es autorizar un 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. Escriba trailheadOrg como alias de la organización y presione Intro.
  5. Inicie sesión utilizando las credenciales de su organización Dev Hub.
  6. Haga clic en Allow (Permitir).
    La solicitud Allow Access (Permitir acceso) con los botones Deny (Denegar) o Allow (Permitir).
  7. 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:
    El mensaje de estado dice lo siguiente: SFDX: Authorize a Dev Hub successfully ran (La autorización de un Dev Hub se ejecutó correctamente). Origen: Integración de Salesforce CLI.

Autorizar un 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.

Habilitar Local Dev

Antes de crear una organización borrador, habilite Local Dev en el archivo de configuración JSON de su proyecto. Siga estos pasos.

  1. En el proyecto de SFDX, abra el archivo config/project-scratch-def.json.
  2. En la sección lightningExperienceSettings del archivo, agregue la clave "enableLightningPreviewPref" y configúrela como true (verdadero).
  3. Guarde el archivo.

Así debería estar anidado su código:

{
  "orgName": "My Company",
  "edition": "Developer",
  "features": ["EnableSetPasswordInApi"],
  "settings": {
    "lightningExperienceSettings": {
      "enableS1DesktopEnabled": true,
      "enableLightningPreviewPref": true
    },
    "mobileSettings": {
      "enableS1EncryptedStoragePref2": false
    }
  }
}
Nota

El proceso de habilitación de Local Dev para una organización de sandbox es diferente. Requiere algunos ajustes en Setup (Configuración), sobre lo que puede aprender aquí.

Crear una organización borrador

  1. En Visual Studio Code, haga clic en Comando + Mayús + P en macOS o Ctrl + Mayús + P en Windows o Linux, luego escriba focus terminal (enfoque en terminal) y seleccione Terminal: Focus Terminal (Enfoque en terminal).
  2. En el terminal, escriba sf org create scratch --definition-file config/project-scratch-def.json --alias scratchOrg --target-dev-hub trailheadOrg y presione Intro.
    Este comando de CLI crea una organización borrador con su archivo project-scratch-def.json y el alias scratchOrg. Tenga paciencia. La creación de una organización borrador puede tardar unos minutos. Debería ver este resultado en su terminal si la organización borrador se crea correctamente.
    El comando summary muestra la identificación de la organización, el nombre de usuario, el alias, el tiempo transcurrido y “Your scratch org is ready” (Su organización borrador está lista).

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 de su proyecto de Salesforce DX actual. 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. En Visual Studio Code, haga clic en Comando + Mayús + P en macOS o Ctrl + Mayús + P en Windows o Linux, luego escriba focus terminal (enfoque en terminal) y seleccione Terminal: Focus Terminal (Enfoque en terminal).
  3. 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 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.

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>
   <targetConfigs>
       <targetConfig targets="lightning__AppPage">
           <supportedFormFactors>
               <supportedFormFactor type="Small" />
               <supportedFormFactor type="Large" />
           </supportedFormFactors>
       </targetConfig>
       <targetConfig targets="lightning__RecordPage">
           <supportedFormFactors>
               <supportedFormFactor type="Small" />
               <supportedFormFactor type="Large" />
           </supportedFormFactors>
       </targetConfig>
       <targetConfig targets="lightning__HomePage">
           <supportedFormFactors>
               <supportedFormFactor type="Small" />
               <supportedFormFactor type="Large" />
           </supportedFormFactors>
       </targetConfig>
   </targetConfigs>
</LightningComponentBundle>
  4. Presione Comando + 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. Presione Comando + 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 nombre del archivo de JavaScript en el explorador cambió 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. Presione Comando + 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 no se completaría correctamente. 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 paso, corregiremos el código.

Verificar paso

+100 puntos

Completará esta/este proyecto en su propia organización de prácticas. Haga clic en Iniciar para empezar a trabajar, o haga clic en el nombre de su organización para seleccionar una diferente.

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