Crear la aplicación de geolocalización con Salesforce CLI
Objetivos de aprendizaje
- Describir cómo se usa la CLI para crear una clase de Apex.
- Describir cómo se usa el comando de CLI para crear un componente de Aura.
¿Qué estamos creando?
Crearemos nuestra función, la aplicación de geolocalización, escribiendo el código de forma local y, luego, lo sincronizaremos con nuestra organización borrador donde podemos probarla. Estudiaremos los contenidos de Apex y varios componentes de Aura.
Para no perder el enfoque en Salesforce CLI y las organizaciones borrador, le proporcionaremos el código para una aplicación de geolocalización que utiliza componentes de Aura.
Este diagrama muestra una visión general de alto nivel de las interacciones del componente:
Este diseño ayuda a que su aplicación sea flexible y más fácil de mantener. A medida que su aplicación y los requisitos de negocios evolucionan, puede reemplazar el componente que muestra los datos sin adaptar el componente que consulta los datos. Este diseño también le permite reutilizar estos componentes de manera independiente en otras aplicaciones.
- El componente de búsqueda de cuenta llama una acción del lado de servidor para buscar cuentas.
- El método de Apex devuelve los resultados de la búsqueda con SOSL.
- El componente de búsqueda de cuenta desencadena un evento en el que notifica otros componentes de los datos.
- Los componentes que gestionan el evento muestran los datos al usuario.
Crear el controlador de Apex de búsqueda de cuenta
En este paso, crea un controlador de Apex que permite que sus componentes de Aura recuperen una lista de cuentas con su información de ubicación. Las clases de Apex están almacenadas en una carpeta denominada classes
en la carpeta force-app/main/default
de su proyecto de Salesforce DX. Puede usar la CLI para generar rápidamente una nueva clase de Apex.
- Desde el directorio del proyecto
geolocation
(geolocalización), ejecute este comando desde la raíz de su proyecto. - Abra
force-app/main/default/classes/AccountSearchController.cls
y reemplace el código generado por este código. A continuación, guarde el archivo. - Ahora, implemente (sincronice) el código nuevo en la organización borrador predeterminada que creó en la unidad anterior.
project deploy start
se ve así:
El resultado del comando
Crear el evento de Aura de cuentas cargadas
Cuando usamos el principio de diseño de responsabilidad única delegamos la visualización de los resultados de la búsqueda desencadenando un evento gestionado por los componentes de mapa de la cuenta y lista de cuentas que se crearon en pasos posteriores.
- Cree el evento en la carpeta aura.
- Abra
force-app/main/default/aura/AccountsLoaded/AccountsLoaded.evt
y reemplace el contenido por este código. A continuación, guarde el archivo. - Implemente su código nuevo en la organización borrador.
project deploy start
se ve así:
El resultado del comando
Crear el componente de Aura de búsqueda de cuenta
A continuación, vamos a repetir gran parte de este proceso para crear un componente AccountSearch. Los archivos del componente de Aura están agrupados en paquetes que se almacenan en carpetas dentro de la carpeta force-app/main/default/aura
. Tal como sucede con las clases de Apex, puede generar un componente de Aura desde la línea de comandos.
- Cree el componente en la carpeta
aura
: Como puede ver, se crearon todos los campos obligatorios. - Abra
force-app/main/default/aura/AccountSearch/AccountSearch.cmp
y reemplace su contenido por el siguiente código. A continuación, guarde el archivo. Este componente tiene un campo de entrada para que el usuario ingrese términos de búsqueda, como la dirección o el nombre de la cuenta, y registra los controladores de evento cuando se inicializa el componente o se modifica el término de búsqueda.
- Abra
force-app/main/default/aura/AccountSearch/AccountSearchController.js
y reemplace su contenido por el siguiente código. A continuación, guarde el archivo. El controlador del lado del cliente gestiona el evento de inicialización de componentes y cuándo se modifica el término de búsqueda. Llama al archivo de asistente para realizar la búsqueda según la entrada del usuario.
- Abra
force-app/main/default/aura/AccountSearch/AccountSearchHelper.js
y reemplace su contenido por el siguiente código. A continuación, guarde el archivo. - Implemente la fuente nueva en la organización borrador.
Crear el componente de Aura de lista de cuentas
A continuación, creamos un componente de Aura que muestra cuentas en una tabla de datos. Para saber qué datos mostrar, se suscribe al evento c:AccountsLoaded
que creó en un paso anterior.
- Cree el componente en la carpeta
aura
. - Abra
force-app/main/default/aura/AccountList/AccountList.cmp
y reemplace su contenido por el siguiente código. A continuación, guarde el archivo. Este componente escucha el evento AccountsLoaded y muestra los datos del evento en una tabla. A medida que el usuario busca y encuentra distintos resultados, la lista se actualiza en consecuencia.
- Abra
force-app/main/default/aura/AccountList/AccountListController.js
y reemplace su contenido por el siguiente código. A continuación, guarde el archivo. La funciónonAccountsLoaded
del controlador del lado del cliente transforma los datos del evento en el formato esperado por el componente<lightning:datatable>
. La funciónonRowAction
navega hacia el registro de cuenta de la fila con la que interactuó el usuario.
- Implemente el código nuevo en la organización borrador.