Skip to main content
ƚnase a nosotros en TDX, en San Francisco, o en Salesforce+ los dƭas 5 y 6 de marzo en la conferencia para desarrolladores sobre la era de agentes de IA. Registrarse ahora.

Aprender sobre las herramientas de la aplicaciĆ³n de ejemplo

Nota

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.

Archivo sfdx-project.json en GitHub

  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"
  }
}
  1. 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.
  2. 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.
  3. 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.  

Nota

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:

EjecuciĆ³n de pruebas de unidades con npm run test:unit.

  1. 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'
},
  1. 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.
  2. Haga clic en el botĆ³n Back (AtrĆ”s) de su navegador.
  3. Haga clic en los vĆ­nculos force-app, test/jest-mocks, y lightning para encontrar todas las pruebas de servicios de Lightning Web Components.
  4. Haga clic en el vĆ­nculo para abrir los contenidos del archivo navigation.js.
  5. AquĆ­ podrĆ” ver cĆ³mo algunas de las funciones exportadas proporcionadas por Lightning NavigationMixin se han simulado para utilizarlas en pruebas de Jest.
  6. 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" }
    }
]
  1. 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).

Ficha Actions (Acciones) de GitHub.

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

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 otro diferente.

Comparta sus comentarios sobre Trailhead en la Ayuda de Salesforce.

Nos encantarĆ­a conocer su experiencia con Trailhead. Ahora puede acceder al nuevo formulario de comentarios cuando quiera desde el sitio de la Ayuda de Salesforce.

MĆ”s informaciĆ³n Continuar para compartir comentarios