Aprender sobre las herramientas de la aplicación de ejemplo

Nota

¿Su idioma de aprendizaje es español? Comience el reto en un Trailhead Playground en español y utilice las traducciones proporcionadas entre paréntesis para navegar. Copie y pegue solo los valores en inglés, ya que las validaciones del reto se basan en los datos en inglés. Si no aprueba el reto en su organización en español, le recomendamos que (1) cambie la configuración regional a Estados Unidos, (2) cambie el idioma a inglés, siga las instrucciones descritas aquí y, a continuación, (3) vuelva a hacer clic en el botón Check Challenge (Comprobar el reto).

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, veremos las diferentes herramientas y configuraciones compartidas en la mayoría de aplicaciones de ejemplo. Lo haremos viendo las herramientas en la aplicación de ejemplo LWC Recipes. 

1. Con su navegador, vaya a github.com/trailheadapps.
2. En el icono de la aplicación LWC Recipes, haga clic en el título LWC Recipes para ir al repositorio lwc-recipes.

Configuraciones del proyecto de Salesforce

En primer lugar, conozca la configuración de proyectos de Salesforce en el archivo de configuración sfdx-project.json.

1. Haga clic en el vínculo para visualizar los contenidos de sfdx-project.json.

{
  "packageDirectories": [
    {
      "path": "force-app",
      "default": true,
      "package": "LWCRecipes",
      "versionName": "Summer '23",
      "versionNumber": "58.0.0.NEXT"
    }
  ],
  "namespace": "",
  "sourceApiVersion": "58.0",
  "sfdcLoginUrl": "https://login.salesforce.com",
  "packageAliases": {
    "LWCRecipes": "0Ho3t000000KywNCAS",
    "LWCRecipes@57.0.0-2": "04t3t000002wSUgAAM",
    "LWCRecipes@58.0.0-5": "04t3t0000037toQAAQ",
    "LWCRecipes@58.0.0-6": "04t3t0000037tozAAA",
    "LWCRecipes@58.0.0-7": "04t3t0000037tp9AAA",
    "LWCRecipes@58.0.0-8": "04t3t0000037tpEAAQ"
  }
}

2. Tenga en cuenta la configuración de packageDirectories donde puede ver que hemos configurado paquetes desbloqueados para esta aplicación. Esto contiene configuraciones para el nombre del paquete, la ruta de archivo de los metadatos para el paquete y la información de la versión.
3. Tenga en cuenta también la configuración de sourceApiVersion. Como norma, actualizamos aplicaciones de ejemplo con la versión de API para la actualización principal actual, en el archivo de configuración y todos los metadatos. Por este motivo, es posible que vea un valor diferente para sourceApiVersion.
4. Haga clic en el botón Back (Atrás) de su navegador.

A continuación, veremos cómo se configuran las herramientas de calidad de código. 

Configuración de herramientas de calidad de código

Además de las herramientas incluidas en la línea de comandos de Salesforce, utilizamos algunas herramientas que se ejecutan con npm. Por ello, a pesar de que la mayoría de proyectos no utilizan Node.js en cualquier código de Salesforce de tiempo de ejecución, tenemos package.json para importar y configurar las herramientas de desarrollador con npm.  

npm es el gestor de paquete predeterminado para Node.js. Consiste en un registro de paquete, una interfaz de línea de comando (CLI) y el sitio web npmjs.com. Generalmente se adopta para crear aplicaciones a fin de implementar herramientas de desarrollador e incluso herramientas de línea de comando de uso general, entre las que se incluyen Salesforce CLI y el marco de CLI abierto (OCLIF).

En nuestras aplicaciones de ejemplo, utilizamos la línea de comando npm con varias herramientas de desarrollador que realizan linting de código, aplicación de formato a código, pruebas de unidades y automatización de la gestión del ciclo de vida de las aplicaciones (ALM). La manera más sencilla para instalar npm es instalar Node.js, que incluye npm. Para obtener más información sobre npm, visite npmjs.com. 

1. Haga clic en el vínculo para visualizar los contenidos de package.json.
2. Tenga en cuenta que, como solo utilizamos herramientas de desarrollador, dependencies está ausente.
3. Eche un vistazo a la configuración de devDependencies, y podrá ver los paquetes que utilizamos como parte de nuestras herramientas.
4. Los paquetes generales que utilizamos son los siguientes:
   • prettier: para aplicar formato a código
   • eslint: para realizar linting de código
   • @salesforce/sfdx-lwc-jest: extensión de Jest para probar componentes web Lightning
   • husky: para ejecutar acciones que comprueban el código antes de realizar el control de la versión
5. También hemos resumido algunos comandos comunes en la configuración de scripts. En cada caso, el comando se ejecuta utilizando npm run. Por ejemplo, observe la clave de script test:unit. Puede ejecutar sus pruebas de unidades de componentes web Lightning. Para ello, ejecute npm run test:unit desde la línea de comando. Este es el aspecto que tiene:

6. Finalice su recorrido de package.json haciendo clic en el botón Back (Atrás) de su navegador.

Podrá ver cómo cada uno de estos scripts le permite ejecutar diferentes herramientas que están instaladas en el proyecto. 

Configuración de pruebas de unidades

Veamos cómo se configuran algunas de ellas. Utilizamos la biblioteca de pruebas de Jest para ejecutar pruebas de unidades de componentes web Lightning. En nuestro caso, Salesforce ha creado una extensión diseñada para LWC llamada sfdx-lwc-jest. 

1. Haga clic en el vínculo para visualizar los contenidos de jest.config.js.
2. Puede ampliar las pruebas predeterminadas que se incluyen con sfdx-lwc-jest utilizando el objeto de JavaScript moduleNameMapper. Estas extensiones de prueba se definen aquí.

moduleNameMapper: {
  /* CSS library import fix in test context. See:
  https://github.com/salesforce/sfdx-lwc-jest/issues/288) */
  '^c/cssLibrary$':
      '/force-app/main/default/lwc/cssLibrary/cssLibrary.css',
  // Jest mocks
  '^@salesforce/apex$': '/force-app/test/jest-mocks/apex',
  '^@salesforce/schema$': '/force-app/test/jest-mocks/schema',
  '^lightning/navigation$':
      '/force-app/test/jest-mocks/lightning/navigation',
  '^lightning/platformShowToastEvent$':
      '/force-app/test/jest-mocks/lightning/platformShowToastEvent',
  '^lightning/uiRecordApi$':
      '/force-app/test/jest-mocks/lightning/uiRecordApi',
  '^lightning/messageService$':
      '/force-app/test/jest-mocks/lightning/messageService',
  '^lightning/actions$':
      '/force-app/test/jest-mocks/lightning/actions',
  '^lightning/alert$':
      '/force-app/test/jest-mocks/lightning/alert',
  '^lightning/confirm$':
      '/force-app/test/jest-mocks/lightning/confirm',
  '^lightning/prompt$':
      '/force-app/test/jest-mocks/lightning/prompt',
  '^lightning/modal*':
      '/force-app/test/jest-mocks/lightning/modal'
},

3. Tenga en cuenta que la clave ^lightning/navigation$ define la ubicación de su prueba como <rootDir>/force-app/test/jest-mocks/lightning/navigation. Busquemos este código JS de prueba en el repositorio de GitHub.
4. Haga clic en el botón Back (Atrás) de su navegador.
5. Haga clic en los vínculos force-app, test/jest-mocks, y lightning para encontrar todas las pruebas de servicios de Lightning Web Components.
6. Haga clic en el vínculo para abrir los contenidos del archivo navigation.js.
7. Aquí podrá ver cómo algunas de las funciones exportadas proporcionadas por Lightning NavigationMixin se han simulado para utilizarlas en pruebas de Jest.
8. Haga clic en el botón Back (Atrás) de su navegador cuatro veces para volver al directorio raíz del proyecto.

Configuración automatizada de formato de código

Hemos visto cómo configurar la herramienta sfdx-lwc-jest. Ahora, veamos la configuración de las herramientas de formato de código de Prettier. Mientras que sfdx-lwc-jest se utiliza solo para pruebas de LWC, Prettier aplica formato a código en muchos archivos diferentes. Hemos agregado plug-ins para XML y Apex. Las reglas de aplicación de formato específicas de LWC se incluyen en Prettier.

Si vuelve a package.json, podrá ver en los scripts que hemos configurado el script de Prettier para ejecutarlo en muchos tipos de archivos diferentes en esta línea: 

"prettier": "prettier --write \"**/*.{cls,cmp,component,css,html,js,json,md,page,trigger,xml,yaml,yml}\""

Veamos cómo se configura la herramienta Prettier. Obtenga más información sobre estas configuraciones en la documentación de Prettier. 

1. Haga clic en el vínculo para abrir el archivo .prettierrc.
2. Observe los parámetros sobre cómo configurar Prettier para aplicar formato a código, como incluir comas al final o admitir comillas simples y ancho de tabulación.
3. Además, puede utilizar la clave overrides para crear reglas de análisis personalizadas. Por ejemplo, utilizamos el analizador lwc para manejar atributos de HTML entre llaves.

"trailingComma": "none",
"singleQuote": true,
"tabWidth": 4,
"overrides": [
    {
        "files": "**/lwc/**/*.html",
        "options": { "parser": "lwc" }
    },
    {
        "files": "*.{cmp,page,component}",
        "options": { "parser": "html" }
    }
]

4. Haga clic en el botón Back (Atrás) de su navegador para volver al directorio raíz.

Reglas de omisión

Muchas herramientas le permiten crear excepciones para los archivos en los que se ejecutan. Las herramientas como Git, Prettier, ESLint y Salesforce CLI necesitan saber qué archivos pueden ignorar. Veamos uno de los archivos de configuración. 

Al desarrollar un proyecto de Salesforce, se rastrea el código fuente de algunas organizaciones (organizaciones de borrador), lo que significa que una API realiza un seguimiento de los cambios realizados localmente y en la organización. Por ello, la sincronización entre la organización y el proyecto local puede realizarse de forma automática utilizando sf project deploy start o sf project retrieve start. Cualquier parte de su proyecto que no desee que se sincronice de forma automática se configura en un archivo llamado .forceignore. 

1. Observe los archivos .forceignore, .gitignore, y .prettierignore. Estos definen reglas de omisión para diferentes herramientas.
2. Haga clic en .forceignore para ver su contenido.
3. La API de SourceSync no realizará un seguimiento de los elementos definidos en .forceignore ni los sincronizará.
4. Tenga en cuenta que entre otros elementos de la configuración del proyecto no se sincroniza ningún metadato de settings.
5. Haga clic en el botón Back (Atrás) de su navegador para volver al directorio raíz.

Acciones de GitHub

Las herramientas adecuadas también le permiten invocar este procedimiento de forma automática en procesos CI/CD. En nuestras aplicaciones de ejemplo, utilizamos acciones de GitHub para automatizar el uso de estas herramientas a medida que el código se combina y se mueve entre las ramas. Vamos a averiguar dónde están estos archivos y veamos cómo utilizan las herramientas. También veremos el historial de ejecución de estas acciones en nuestro repositorio. 

Las acciones de GitHub son una función integrada en GitHub para definir el proceso CI/DC completo en GitHub. Sin embargo, las herramientas de desarrollador de Salesforce son agnósticas en relación con las herramientas CI/DC. Asegúrese de leer la documentación, que hace referencia a otros repositorios de proyectos de ejemplo en caso de que tenga preferencia por otra herramienta CI/DC. 

1. Haga clic en los vínculos del directorio para .github y workflows a fin de visualizar los archivos YAML en los que se encuentran los flujos de trabajo CI de GitHub.
2. Haga clic en el vínculo de ci-pr.yml para ver el contenido del archivo.
3. Mire el archivo y busque la línea en la que aparezca run:npm run prettier:verify.
4. Este es el punto en el proceso CI en el que Prettier realiza comprobaciones para ver si el código se atiene a las reglas de aplicación de formato específicas de esta configuración.
5. En la parte superior de la interfaz de usuario de GitHub, seleccione la ficha Actions (Acciones).

6. La lista de todos los flujos de trabajo de acciones de GitHub está a la izquierda. Haga clic en CI para ver todas las veces que el flujo de trabajo se ha ejecutado.

Ahora ya ha realizado un recorrido por la configuración de herramientas en el repositorio de GitHub lwc-recipes. Ya está listo para profundizar en el uso de herramientas en cualquiera de las aplicaciones de ejemplo. Mantenemos la configuración de las herramientas lo más uniforme posible. Sin embargo, en algunos casos, algunas aplicaciones utilizan una configuración diferente. Obtenga más información sobre estas aplicaciones completando los otros proyectos en esta ruta.

Algunos conceptos sobre el código abierto de Salesforce

El equipo de relaciones de desarrolladores de Salesforce ha desarrollado los ejemplos encontrados en la organización trailheadapps github y los ha mantenido. Se han creado siguiendo prácticas recomendadas. Todas nuestras aplicaciones muestran las herramientas que se ajustan a lo que se espera de un proyecto del mundo real.

Una vez que haya explorado estas aplicaciones de ejemplo, le animamos a que indague más y obtenga más información sobre código de los equipos de Salesforce. Puede encontrar código abierto en la página web Code Samples and SDKs.

No comprobaremos su trabajo en este paso. Haga clic en Verify step to earn 100 points (Verificar paso para obtener 100 puntos) para completar el proyecto.