Instalar herramientas de desarrollo

Objetivos de aprendizaje

En este proyecto:

• Instalar las herramientas de desarrollador recomendadas para crear y trabajar con componentes web Lightning.
  
• Crear un componente web Lightning.
  
• Corregir errores en su código con las herramientas de desarrollador que se proporcionan.
  
• Configurar un formato de registro para mostrar su componente web Lightning.
  
• Habilitar Local Dev en una Salesforce org.
  

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.

Ya adquirió conocimientos sobre el modelo de programación denominado Componentes web Lightning y ahora desea crear sus propios componentes web. Primero, necesita algunas herramientas para escribir componentes web Lightning. 

Si bien es cierto que puede crear un componente web Lightning con cualquier editor de texto, no dispondrá de la asistencia que ofrecen los conjuntos de herramientas especializados. Si usted es un desarrollador de Salesforce con experiencia que busca integrar componentes web Lightning en sus aplicaciones, tendrá más éxito si incorpora ciertas herramientas nuevas en su conjunto de herramientas. Si por el contrario es nuevo en el desarrollo con Salesforce y busca dar sus primeros pasos en la creación de componentes web Lightning, seguro que le interesará familiarizarse con el conjunto de herramientas adecuado para el trabajo en proyectos de Salesforce.

Puesto que los componentes web Lightning se basan en los estándares web modernos, es lógico que las herramientas asociadas se basen en las herramientas actualmente populares entre los desarrolladores web.

Crear un nuevo Trailhead Playground

Para este proyecto, deberá crear un nuevo Trailhead Playground. Desplácese a la parte inferior de esta página, haga clic en el nombre del Playground y, luego, en Create Playground (Crear Playground). Normalmente lleva de 3 a 4 minutos crear un nuevo Trailhead Playground.

Nota: Sí, ¡realmente queremos decir un Trailhead Playground completamente nuevo! Si está utilizando una organización o un playground existentes, pueden surgir problemas para completar los pasos en este proyecto.

Configurar Salesforce CLI

Al igual que muchos otros modelos y lenguajes de programación, Salesforce incluye una interfaz de línea de comandos (CLI). Si ya utilizó alguna vez npm, Yarn, Gradle o Maven, Salesforce CLI le resultará muy familiar, con la diferencia de que está confeccionada para las tareas de desarrollo de Salesforce.

La CLI de Salesforce le permite interactuar con sus entornos de Salesforce de muchas maneras, como, por ejemplo, recuperando o enviando código, o bien interactuando con datos. La CLI consta de varios complementos. Dichos complementos proporcionan importantes funciones específicas. Por ejemplo, el complemento plugin-org ofrece la capacidad de gestionar Salesforce orgs, como crear una organización borrador.

Dato curioso: Salesforce CLI es una interfaz 100 % de código abierto. Puede consultar todo el código fuente e incluso aportar funciones nuevas. Consulte la lista de los complementos incluidos y los vínculos a sus respectivos repositorios en la página Estado de Salesforce CLI. 

Instalación

Si ya tiene la CLI de Salesforce instalada, puede omitir esta sección. Siga estos pasos o consulte la Guía de configuración de Salesforce CLI para conocer las instrucciones de instalación completas.

1. Instale la CLI desde https://developer.salesforce.com/tools/salesforcecli.
   
2. Para confirmar que esté instalada de forma adecuada la versión más reciente de la CLI, ejecute el siguiente comando desde la línea de comandos: sf update.
3. Debería ver algo similar a esto: @salesforce/cli:Updating CLI….
   

Salesforce CLI ya está listo. Eso fue fácil, ¿no?

Instalar Local Dev

Local Dev es una herramienta de Salesforce CLI que permite ejecutar una vista previa en tiempo real de sus componentes web Lightning en el navegador. La vista previa se actualiza automáticamente a medida que se realizan modificaciones en los componentes locales, de modo que no necesita implementar código ni actualizar de forma manual la página del navegador.

Esta función está disponible de manera general para las aplicaciones Lightning Experience (computadora y aplicación de Salesforce para dispositivos móviles). También puede habilitar Local Dev para organizaciones borrador. Por el momento, se encuentra en versión beta para sitios Lightning Web Runtime de Experience Cloud.

Instalación

Debe instalar Salesforce CLI para poder instalar Local Dev. Luego, en la línea de comandos, ejecute lo siguiente a fin de instalar Local Dev para una organización de sandbox o borrador:

sf plugins install @salesforce/plugin-lightning-dev@prerelease

Si tiene una organización de producción que se lanzará próximamente, debe instalar la instancia más reciente de Local Dev con el siguiente comando en la línea de comandos: sf plugins install @salesforce/plugin-lightning-dev@latest.

Sin embargo, para este proyecto de Trailhead, en su lugar debe instalar la versión de prelanzamiento.

Ahora vayamos a la siguiente herramienta que debe utilizar como nuevo desarrollador de componentes web Lightning: el IDE.

Descargar y configurar Visual Studio Code

Visual Studio Code es el editor de código directo de los desarrolladores de Salesforce. Se trata de una herramienta gratuita de código abierto que está disponible para Windows, Linux y macOS. Visual Studio Code es un IDE muy popular entre los desarrolladores web. También es un IDE eficiente para la creación de componentes web Lightning y Salesforce ofrece extensiones gratuitas para Visual Studio Code que le permiten simplificar aún más su experiencia de desarrollo. También se ofrece el Salesforce Extension Pack. El paquete de extensiones ofrece herramientas increíbles para el desarrollo en Lightning Platform e incluye herramientas que permiten trabajar con Apex, Visualforce e incluso un Replay Debugger. 

Siga estas instrucciones para instalar Visual Studio Code y el paquete de extensiones de Salesforce. 

1. Descargue e instale la versión más reciente de Visual Studio Code para su sistema operativo. Si ya instaló Visual Studio Code, no es necesario volver a instalarlo.
   
2. Inicie Visual Studio Code.
   
3. Haga clic en Extensions (Extensiones) () en la barra lateral.
   
4. Busque el paquete Salesforce Extension Pack y haga clic en Instalar. Si ya lo instaló, solo haga clic el botón Reload (Volver a cargar).
   
   
5. Pulse Command + Shift + P en MacOS o Ctrl + Mayús + P en Windows o Linux para abrir la paleta de comandos. En la paleta de comandos, escriba sfdx para mostrar una lista inicial de comandos disponibles.
   

¡Listo! Instaló todas las herramientas que necesita para el desarrollo de su primer componente web Lightning.

Activar Developer Hub

Para este proyecto, utilizará su Trailhead Playground como Developer Hub y creará un componente web Lightning en una organización borrador. Pero antes vamos a explicar qué es un Developer Hub y una organización borrador.

Una organización borrador es un entorno de Salesforce exclusivo, configurable y a corto plazo que puede lanzar rápidamente al iniciar un nuevo proyecto, una nueva ramificación de función o una prueba de función.

Un Developer Hub (Dev Hub) es la organización principal de Salesforce que usted y su equipo utilizan para crear y gestionar sus organizaciones borrador.

Tras activar Dev Hub en su organización, no podrá desactivarlo.

1. Inicie su Trailhead Playground.
   
2. Haga clic en Setup (Configuración) () y seleccione Setup (Configuración).
   
3. En Setup (Configuración), ingrese Dev Hub en el cuadro de búsqueda rápida y, a continuación, seleccione Dev Hub.
   
4. Haga clic en el control deslizante para activar Dev Hub.
   

Eso es todo. Configuró Dev Hub con los componentes web Lightning habilitados y descargó, instaló y configuró las herramientas necesarias. En el próximo paso, utilizará estas herramientas para crear su primer componente web Lightning.