Aprender sobre las herramientas de la aplicaciĆ³n de ejemplo
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.
- Con su navegador, vaya a github.com/trailheadapps.
- 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
.
- Haga clic en el vĆnculo para visualizar los contenidos de
sfdx-project.json
.
- 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. - 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 parasourceApiVersion
. - 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.
- Haga clic en el vĆnculo para visualizar los contenidos de
package.json
. - Tenga en cuenta que, como solo utilizamos herramientas de desarrollador,
dependencies
estĆ” ausente. - Eche un vistazo a la configuraciĆ³n de
devDependencies
, y podrĆ” ver los paquetes que utilizamos como parte de nuestras herramientas. - 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
-
- TambiĆ©n hemos resumido algunos comandos comunes en la configuraciĆ³n de
scripts
. En cada caso, el comando se ejecuta utilizandonpm run
. Por ejemplo, observe la clave de scripttest:unit
. Puede ejecutar sus pruebas de unidades de componentes web Lightning. Para ello, ejecutenpm run test:unit
desde la lĆnea de comando. Este es el aspecto que tiene:
- 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.
- Haga clic en el vĆnculo para visualizar los contenidos de
jest.config.js
. - 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Ć.
- 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. - Haga clic en el botĆ³n Back (AtrĆ”s) de su navegador.
- Haga clic en los vĆnculos force-app, test/jest-mocks, y lightning para encontrar todas las pruebas de servicios de Lightning Web Components.
- Haga clic en el vĆnculo para abrir los contenidos del archivo
navigation.js
. - AquĆ podrĆ” ver cĆ³mo algunas de las funciones exportadas proporcionadas por Lightning
NavigationMixin
se han simulado para utilizarlas en pruebas de Jest. - 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:
Veamos cĆ³mo se configura la herramienta Prettier. Obtenga mĆ”s informaciĆ³n sobre estas configuraciones en la documentaciĆ³n de Prettier.
- Haga clic en el vĆnculo para abrir el archivo
.prettierrc
. - 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.
- AdemƔs, puede utilizar la clave
overrides
para crear reglas de anƔlisis personalizadas. Por ejemplo, utilizamos el analizadorlwc
para manejar atributos de HTML entre llaves.
- 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
.
- Observe los archivos
.forceignore
,.gitignore
, y.prettierignore
. Estos definen reglas de omisiĆ³n para diferentes herramientas. - Haga clic en
.forceignore
para ver su contenido. - La API de SourceSync no realizarĆ” un seguimiento de los elementos definidos en
.forceignore
ni los sincronizarĆ”. - Tenga en cuenta que entre otros elementos de la configuraciĆ³n del proyecto no se sincroniza ningĆŗn metadato de
settings
. - 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.
- Haga clic en los vĆnculos del directorio para
.github
yworkflows
a fin de visualizar los archivos YAML en los que se encuentran los flujos de trabajo CI de GitHub. - Haga clic en el vĆnculo de
ci-pr.yml
para ver el contenido del archivo. - Mire el archivo y busque la lĆnea en la que aparezca
run:npm run prettier:verify
. - 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.
- En la parte superior de la interfaz de usuario de GitHub, seleccione la ficha Actions (Acciones).
- 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.