Desarrollar la aplicación de geolocalización con Salesforce CLI
Objetivos de aprendizaje
- Describir el procedimiento de uso de la CLI para crear una clase de Apex.
- Describir el procedimiento de uso del comando de la CLI para crear un componente Aura.
¿Qué vamos a desarrollar?
Vamos a desarrollar nuestra función, la aplicación de geolocalización. Para ello, vamos a escribir código de forma local y luego sincronizarlo con nuestra organización borrador, donde podrá probarlo. Todo esto lo haremos con Apex y varios componentes de Aura.
Para mantener el enfoque en Salesforce CLI y las organizaciones borrador, vamos a facilitarle el código de una aplicación de geolocalización que utiliza componentes de Aura.
En este diagrama se muestra una visión general de las interacciones entre componentes:
Con este diseño, su aplicación es flexible y más fácil de mantener. A medida que la aplicación y las necesidades de la empresa evolucionan, puede reemplazar el componente que muestra los datos sin tener que reestructurar el componente que consulta los datos. Además, este diseño permite reutilizar los componentes de forma independiente en otras aplicaciones.
- El componente Account Search (Búsqueda de cuenta) activa una acción del servidor para buscar cuentas.
- El método Apex devuelve los resultados de búsqueda de SOSL.
- El componente Account Search (Búsqueda de cuenta) activa un evento que notifica a otros componentes de los datos.
- Los componentes que gestionan el evento muestran los datos al usuario.
Crear el controlador de búsqueda de cuenta de Apex
En este paso, debe crear un controlador de Apex que permita a los componentes de Aura recuperar una lista de cuentas con información de su ubicación. Las clases de Apex se guardan en una carpeta denominada classes
en la carpeta force-app/main/default
de su proyecto de Salesforce DX. Puede usar la CLI para crear rápidamente una nueva clase de Apex.
- Desde el directorio del proyecto
geolocation
(geolocalización), ejecute este comando desde la raíz del proyecto. - Abra el archivo
force-app/main/default/classes/AccountSearchController.cls
y sustituya el código creado por este código. Luego guarde el archivo. - Implemente, es decir, sincronice, el código nuevo en su organización borrador predeterminada que creó en la unidad anterior.
project deploy start
debería ser algo parecido a esto:
El resultado del comando
Crear el evento de Aura cargado con cuentas
Teniendo en cuenta el principio de diseño de responsabilidad única, delegamos la visualización de los resultados de búsqueda mediante la activación de un evento que gestionan los componentes Account Map (Mapa de cuentas) y Account List (Lista de cuentas) que ha creado en pasos anteriores.
- Cree el evento en la carpeta "aura".
- Abra el archivo
force-app/main/default/aura/AccountsLoaded/AccountsLoaded.evt
y sustituya el contenido por este código. Luego guarde el archivo. - Implemente el nuevo código en la organización borrador.
project deploy start
debería ser algo parecido a esto:
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 de tipo AccountSearch. Los archivos de componentes Aura se agrupan en paquetes, que se almacenan en carpetas dentro de la carpeta force-app/main/default/aura
. De forma similar a las clases de Apex, puede crear un componente Aura desde la línea de comandos.
- Cree el componente en la carpeta
aura
. Como verá, se crean todos los archivos necesarios. - Abra el archivo
force-app/main/default/aura/AccountSearch/AccountSearch.cmp
y sustituya el contenido por el siguiente código. Luego guarde el archivo. Este componente contiene un campo de entrada para que el usuario introduzca términos de búsqueda, como el nombre o la dirección de la cuenta, y registra los controladores de eventos cuando se inicializa el componente o cambia el término de búsqueda.
- Abra el archivo
force-app/main/default/aura/AccountSearch/AccountSearchController.js
y sustituya el contenido por el siguiente código. Luego guarde el archivo. El controlador del cliente gestiona el evento de inicialización del componente y los casos en los que cambia el término de búsqueda. Este llama al archivo auxiliar para realizar la búsqueda en función de los datos que introduzca el usuario.
- Abra el archivo
force-app/main/default/aura/AccountSearch/AccountSearchHelper.js
y sustituya el contenido por el siguiente código. Luego guarde el archivo. - Implemente el nuevo código fuente en la organización borrador.
Crear el componente de Aura de lista de cuentas
A continuación, vamos a crear un componente Aura que muestre las cuentas en una tabla de datos. Para saber qué datos se deben mostrar, se suscribe al evento c:AccountsLoaded
que creó en un paso anterior.
- Cree el componente en la carpeta
aura
. - Abra el archivo
force-app/main/default/aura/AccountList/AccountList.cmp
y sustituya el contenido por el siguiente código. Luego guarde el archivo. Este componente escucha el evento AccountsLoaded y muestra sus datos en una tabla. La lista se actualiza a medida que el usuario busca y encuentra distintos resultados.
- Abra el archivo
force-app/main/default/aura/AccountList/AccountListController.js
y sustituya el contenido por el siguiente código. Luego guarde el archivo. La funciónonAccountsLoaded
del controlador del cliente transforma los datos del evento en el formato que espera el componente<lightning:datatable>
. La funciónonRowAction
permite navegar hasta el registro de la cuenta de la fila con la que interactúa el usuario.
- Implemente el nuevo código en la organización borrador.
Recursos
- Documentación de Salesforce: Referencia de comandos de Salesforce CLI
- Documentación de Salesforce: Guía del desarrollador de Salesforce DX
- Visual Studio Marketplace: Salesforce Extensions for VS Code (Visual Studio Marketplace: extensiones de Salesforce para Visual Studio Code)
- Vídeo de Salesforce: Salesforce CLI: Harnessing the Power of Salesforce Through the Command Line (Salesforce CLI: aprovechando la potencia de Salesforce con la línea de comandos)