Crear un componente web Lightning de API de modelos

Objetivos de aprendizaje

Después de completar esta unidad, podrá:

Crear una clase de Apex personalizada.
Crear un componente web Lightning.
Implementar un componente web Lightning en su Playground con IA.
Modificar una organización con Lightning App Builder.

Ahora que ha configurado su entorno, es el momento de agregar funcionalidad al componente web Lightning. En esta unidad, siga a Maria a medida que crea una clase de Apex personalizada, diseña la interfaz de usuario, agrega JavaScript funcional e implementa su panel de API de modelos al Playground con IA.

Caso de uso de ejemplo de escritura de documentación para desarrolladores

En este vídeo se muestra cómo crear un componente web Lightning que acceda a la API de modelos mediante el uso de un ejemplo básico similar al de este módulo.

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.

Crear clases de Apex de API de modelos

En VS Code, haga clic con el botón derecho en la carpeta classes (clases) que podrá encontrar en force-app/main y seleccione SFDX: Create Apex Class (SFDX: Crear clase de Apex). Póngale a la clase el nombre DashboardController.
Las nuevas clases de Apex en VS Code contienen cinco líneas de código predeterminado. Elimine el código predeterminado. No necesitará el código predeterminado para este módulo, ya que proporcionamos muestras de código completas tanto para los archivos de clases de Apex como para los de componentes web Lightning.
En el archivo de clase de Apex DashboardController.cls, copie y pegue el siguiente código.

public with sharing class DashboardController {
    @AuraEnabled
    public static String createChatGenerations(String input) {
        String fileContent = HousingData.jsonString;
        // Escape double quotes, newlines, and carriage returns within the JSON string
        String escapedFileContent = HousingData.jsonString
        .replace('\\', '\\\\') // Escape backslashes
        .replace('"', '\\"')   // Escape double quotes
        .replace('\n', '\\n')  // Escape newlines
        .replace('\r', '\\r'); // Escape carriage returns


        // Construct the input string
        String instructions = '[{"role": "user", "message": "Summarize the sample housing data as if you were a real estate broker. Housing Data: ' + escapedFileContent + '"}]';
        

        // Deserialize the file content into a list of ChatMessage objects
        List<DashboardController.ChatMessage> messages = (List<DashboardController.ChatMessage>) JSON.deserialize(
            instructions,
            List<DashboardController.ChatMessage>.class
        );


        // Instantiate the API class
        aiplatform.ModelsAPI modelsAPI = new aiplatform.ModelsAPI();


        // Prepare the request and body objects
        aiplatform.ModelsAPI.createChatGenerations_Request request = new aiplatform.ModelsAPI.createChatGenerations_Request();
        aiplatform.ModelsAPI_ChatGenerationsRequest body = new aiplatform.ModelsAPI_ChatGenerationsRequest();


        // Specify model
        request.modelName = 'sfdc_ai__DefaultGPT35Turbo';


        // Create a list to hold chat messages
        List<aiplatform.ModelsAPI_ChatMessageRequest> messagesList = new List<aiplatform.ModelsAPI_ChatMessageRequest>();


        // Loop through the input messages and create message requests
        for (ChatMessage msg : messages) {
            aiplatform.ModelsAPI_ChatMessageRequest messageRequest = new aiplatform.ModelsAPI_ChatMessageRequest();
            messageRequest.content = msg.message != null ? msg.message : ''; // Handle null message
            messageRequest.role = msg.role != null ? msg.role : 'user'; // Handle null role
            messagesList.add(messageRequest);
        }


        // Set the messages in the request body
        body.messages = messagesList;


        // Set the request body and model name
        request.body = body;


        String response = '';


        try {
            // Call the API and get the response
            aiplatform.ModelsAPI.createChatGenerations_Response apiResponse = modelsAPI.createChatGenerations(
                request
            );


            // Check that we have a non-null response
            if (
                apiResponse?.Code200?.generationDetails?.generations != null &&
                !apiResponse.Code200.generationDetails.generations.isEmpty()
            ) {
                // Set the variable from the response
                response = apiResponse.Code200.generationDetails.generations[0]
                    .content;
            } else {
                // Handle the case where response is null
                response = 'No content generated';
            }


        // Handle error
        } catch(aiplatform.ModelsAPI.createChatGenerations_ResponseException e) {
            System.debug('Response code: ' + e.responseCode);
            System.debug('The following exception occurred: ' + e);


            // Add error to the output
            response = 'Unable to get a valid response. Error code: ' + e.responseCode;
        }


        return response;
    }
    

    public class ChatMessage {


        public String role;
        public String message;


        public ChatMessage() {
        }


        public ChatMessage(String role, String message) {
            this.role = role;
            this.message = message;
        }
    }
}

Pulse Ctrl + S en Windows o Comando + S en macOS para guardar el archivo.

Error de datos inmobiliarios
Es posible que aparezca un error en el que se indica que no hay ninguna clase que se llame HousingData. Siga las instrucciones de la siguiente sección para agregar la clase HousingData. Estos datos se representan como clase estática con fines de demostración.

Crear una clase nueva para nutrir datos

Para que el panel de API de modelos de Maria sea funcional, debe nutrir el LLM con datos del mercado inmobiliario. En este paso, crearemos una nueva clase y la rellenaremos con datos para que la clase DashboardController pueda consultarla.

Con fines de demostración, los datos estarán en un archivo local dentro del componente web Lightning. En una implementación oficial de este panel, los datos de este paso se recuperarían de forma dinámica de una API del mercado inmobiliario.

En VS Code, haga clic con el botón derecho en la carpeta classes (clases) que y seleccione SFDX: Create Apex Class (SFDX: Crear clase de Apex). Póngale a la clase el nombre HousingData.
En el archivo de clase de Apex HousingData.cls, copie y pegue el siguiente código.

public class HousingData {
    public static final String jsonString = '{\n' +
'[' +
'  {\n' +
'    "County": "Adams",\n' +
'    "Sales (SAAR)": 130,\n' +
'    "% Change by quarter": 8.3,\n' +
'    "% Change by year": -7.1,\n' +
'    "Building Permits": 12,\n' +
'    "% Change by year (Building Permits)": -25.0,\n' +
'    "Median Price ($)": 318100,\n' +
'    "% Change by year (Median Price)": 6.9,\n' +
'    "Median Buyer HAI": 83.7,\n' +
'    "First-time Buyer HAI": 59.7\n' +
'  },\n' +
'  {\n' +
'    "County": "Benton",\n' +
'    "Sales (SAAR)": 3060,\n' +
'    "% Change by quarter": 2.3,\n' +
'    "% Change by year": -16.2,\n' +
'    "Building Permits": 447,\n' +
'    "% Change by year (Building Permits)": 42.4,\n' +
'    "Median Price ($)": 426900,\n' +
'    "% Change by year (Median Price)": 0.3,\n' +
'    "Median Buyer HAI": 81.8,\n' +
'    "First-time Buyer HAI": 58.4\n' +
'  },\n' +
'  {\n' +
'    "County": "Chelan",\n' +
'    "Sales (SAAR)": 760,\n' +
'    "% Change by quarter": -3.8,\n' +
'    "% Change by year": -16.5,\n' +
'    "Building Permits": 115,\n' +
'    "% Change by year (Building Permits)": 74.2,\n' +
'    "Median Price ($)": 563500,\n' +
'    "% Change by year (Median Price)": 15.8,\n' +
'    "Median Buyer HAI": 52.5,\n' +
'    "First-time Buyer HAI": 37.5\n' +
'  },\n' +
'  {\n' +
'    "County": "Clark",\n' +
'    "Sales (SAAR)": 4830,\n' +
'    "% Change by quarter": -19.0,\n' +
'    "% Change by year": -34.3,\n' +
'    "Building Permits": 698,\n' +
'    "% Change by year (Building Permits)": -16.1,\n' +
'    "Median Price ($)": 531500,\n' +
'    "% Change by year (Median Price)": 5.8,\n' +
'    "Median Buyer HAI": 72.9,\n' +
'    "First-time Buyer HAI": 52.0\n' +
'  },\n' +
'  {\n' +
'    "County": "Columbia",\n' +
'    "Sales (SAAR)": 80,\n' +
'    "% Change by quarter": 0.0,\n' +
'    "% Change by year": -11.1,\n' +
'    "Building Permits": 2,\n' +
'    "% Change by year (Building Permits)": -86.7,\n' +
'    "Median Price ($)": 228300,\n' +
'    "% Change by year (Median Price)": -13.2,\n' +
'    "Median Buyer HAI": 166.9,\n' +
'    "First-time Buyer HAI": 119.1\n' +
'  },\n' +
'  {\n' +
'    "County": "Franklin",\n' +
'    "Sales (SAAR)": 1030,\n' +
'    "% Change by quarter": 3.0,\n' +
'    "% Change by year": -16.3,\n' +
'    "Building Permits": 138,\n' +
'    "% Change by year (Building Permits)": 29.0,\n' +
'    "Median Price ($)": 426900,\n' +
'    "% Change by year (Median Price)": 0.3,\n' +
'    "Median Buyer HAI": 90.7,\n' +
'    "First-time Buyer HAI": 64.7\n' +
'  },\n' +
'  {\n' +
'    "County": "Garfield",\n' +
'    "Sales (SAAR)": 0,\n' +
'    "% Change by quarter": "NA",\n' +
'    "% Change by year": "NA",\n' +
'    "Building Permits": 0,\n' +
'    "% Change by year (Building Permits)": "NA",\n' +
'    "Median Price ($)": 268000,\n' +
'    "% Change by year (Median Price)": 14.9,\n' +
'    "Median Buyer HAI": 104.1,\n' +
'    "First-time Buyer HAI": 74.3\n' +
'  },\n' +
'  {\n' +
'    "County": "Grays Harbor",\n' +
'    "Sales (SAAR)": 1660,\n' +
'    "% Change by quarter": 0.0,\n' +
'    "% Change by year": -19.4,\n' +
'    "Building Permits": 69,\n' +
'    "% Change by year (Building Permits)": -6.8,\n' +
'    "Median Price ($)": 351300,\n' +
'    "% Change by year (Median Price)": 7.6,\n' +
'    "Median Buyer HAI": 71.1,\n' +
'    "First-time Buyer HAI": 50.7\n' +
'  },\n' +
'  {\n' +
'    "County": "Jefferson",\n' +
'    "Sales (SAAR)": 480,\n' +
'    "% Change by quarter": -5.9,\n' +
'    "% Change by year": -12.7,\n' +
'    "Building Permits": 31,\n' +
'    "% Change by year (Building Permits)": 24.0,\n' +
'    "Median Price ($)": 650000,\n' +
'    "% Change by year (Median Price)": 16.4,\n' +
'    "Median Buyer HAI": 43.2,\n' +
'    "First-time Buyer HAI": 30.9\n' +
'  },\n' +
'  {\n' +
'    "County": "King",\n' +
'    "Sales (SAAR)": 18520,\n' +
'    "% Change by quarter": -0.1,\n' +
'    "% Change by year": -21.1,\n' +
'    "Building Permits": 3110,\n' +
'    "% Change by year (Building Permits)": 4.7,\n' +
'    "Median Price ($)": 931000,\n' +
'    "% Change by year (Median Price)": 13.4,\n' +
'    "Median Buyer HAI": 58.6,\n' +
'    "First-time Buyer HAI": 41.8\n' +
'  },\n' +
'  {\n' +
'    "County": "Kitsap",\n' +
'    "Sales (SAAR)": 3680,\n' +
'    "% Change by quarter": -0.8,\n' +
'    "% Change by year": -20.0,\n' +
'    "Building Permits": 400,\n' +
'    "% Change by year (Building Permits)": -49.0,\n' +
'    "Median Price ($)": 532200,\n' +
'    "% Change by year (Median Price)": 5.6,\n' +
'    "Median Buyer HAI": 76.0,\n' +
'    "First-time Buyer HAI": 54.2\n' +
'  },\n' +
'  {\n' +
'    "County": "Kittitas",\n' +
'    "Sales (SAAR)": 960,\n' +
'    "% Change by quarter": 6.7,\n' +
'    "% Change by year": -13.5,\n' +
'    "Building Permits": 85,\n' +
'    "% Change by year (Building Permits)": -15.0,\n' +
'    "Median Price ($)": 521700,\n' +
'    "% Change by year (Median Price)": -5.1,\n' +
'    "Median Buyer HAI": 49.3,\n' +
'    "First-time Buyer HAI": 35.2\n' +
'  },\n' +
'  {\n' +
'    "County": "Lewis",\n' +
'    "Sales (SAAR)": 970,\n' +
'    "% Change by quarter": -6.7,\n' +
'    "% Change by year": -26.5,\n' +
'    "Building Permits": 110,\n' +
'    "% Change by year (Building Permits)": 80.3,\n' +
'    "Median Price ($)": 413000,\n' +
'    "% Change by year (Median Price)": 5.7,\n' +
'    "Median Buyer HAI": 72.0,\n' +
'    "First-time Buyer HAI": 51.4\n' +
'  },\n' +
'  {\n' +
'    "County": "Mason",\n' +
'    "Sales (SAAR)": 1010,\n' +
'    "% Change by quarter": -4.7,\n' +
'    "% Change by year": -18.5,\n' +
'    "Building Permits": 93,\n' +
'    "% Change by year (Building Permits)": 31.0,\n' +
'    "Median Price ($)": 391200,\n' +
'    "% Change by year (Median Price)": 1.9,\n' +
'    "Median Buyer HAI": 89.0,\n' +
'    "First-time Buyer HAI": 63.5\n' +
'  },\n' +
'  {\n' +
'    "County": "Okanogan",\n' +
'    "Sales (SAAR)": 360,\n' +
'    "% Change by quarter": -2.7,\n' +
'    "% Change by year": -29.4,\n' +
'    "Building Permits": 57,\n' +
'    "% Change by year (Building Permits)": 29.5,\n' +
'    "Median Price ($)": 369400,\n' +
'    "% Change by year (Median Price)": 29.6,\n' +
'    "Median Buyer HAI": 68.4,\n' +
'    "First-time Buyer HAI": 48.8\n' +
'  },\n' +
'  {\n' +
'    "County": "Pierce",\n' +
'    "Sales (SAAR)": 9780,\n' +
'    "% Change by quarter": -2.4,\n' +
'    "% Change by year": -25.6,\n' +
'    "Building Permits": 629,\n' +
'    "% Change by year (Building Permits)": -17.1,\n' +
'    "Median Price ($)": 547800,\n' +
'    "% Change by year (Median Price)": 4.5,\n' +
'    "Median Buyer HAI": 72.5,\n' +
'    "First-time Buyer HAI": 51.7\n' +
'  },\n' +
'  {\n' +
'    "County": "San Juan",\n' +
'    "Sales (SAAR)": 220,\n' +
'    "% Change by quarter": 0.0,\n' +
'    "% Change by year": -8.3,\n' +
'    "Building Permits": 23,\n' +
'    "% Change by year (Building Permits)": 43.8,\n' +
'    "Median Price ($)": 737500,\n' +
'    "% Change by year (Median Price)": -13.2,\n' +
'    "Median Buyer HAI": 41.4,\n' +
'    "First-time Buyer HAI": 29.6\n' +
'  },\n' +
'  {\n' +
'    "County": "Skagit",\n' +
'    "Sales (SAAR)": 1420,\n' +
'    "% Change by quarter": -6.0,\n' +
'    "% Change by year": -24.9,\n' +
'    "Building Permits": 169,\n' +
'    "% Change by year (Building Permits)": 70.7,\n' +
'    "Median Price ($)": 553100,\n' +
'    "% Change by year (Median Price)": 6.7,\n' +
'    "Median Buyer HAI": 53.9,\n' +
'    "First-time Buyer HAI": 38.4\n' +
'  },\n' +
'  {\n' +
'    "County": "Snohomish",\n' +
'    "Sales (SAAR)": 7740,\n' +
'    "% Change by quarter": -2.5,\n' +
'    "% Change by year": -23.1,\n' +
'    "Building Permits": 1060,\n' +
'    "% Change by year (Building Permits)": 20.7,\n' +
'    "Median Price ($)": 737700,\n' +
'    "% Change by year (Median Price)": 6.4,\n' +
'    "Median Buyer HAI": 69.1,\n' +
'    "First-time Buyer HAI": 49.3\n' +
'  },\n' +
'  {\n' +
'    "County": "Spokane",\n' +
'    "Sales (SAAR)": 6010,\n' +
'    "% Change by quarter": 2.6,\n' +
'    "% Change by year": -13.4,\n' +
'    "Building Permits": 736,\n' +
'    "% Change by year (Building Permits)": -31.7,\n' +
'    "Median Price ($)": 426500,\n' +
'    "% Change by year (Median Price)": 4.8,\n' +
'    "Median Buyer HAI": 74.9,\n' +
'    "First-time Buyer HAI": 53.5\n' +
'  },\n' +
'  {\n' +
'    "County": "Stevens",\n' +
'    "Sales (SAAR)": 690,\n' +
'    "% Change by quarter": -1.4,\n' +
'    "% Change by year": -2.8,\n' +
'    "Building Permits": 50,\n' +
'    "% Change by year (Building Permits)": 31.6,\n' +
'    "Median Price ($)": 303600,\n' +
'    "% Change by year (Median Price)": 10.4,\n' +
'    "Median Buyer HAI": 92.4,\n' +
'    "First-time Buyer HAI": 66.0\n' +
'  },\n' +
'  {\n' +
'    "County": "Wahkiakum",\n' +
'    "Sales (SAAR)": 80,\n' +
'    "% Change by quarter": -11.1,\n' +
'    "% Change by year": 14.3,\n' +
'    "Building Permits": 5,\n' +
'    "% Change by year (Building Permits)": 25.0,\n' +
'    "Median Price ($)": 417000,\n' +
'    "% Change by year (Median Price)": 1.1,\n' +
'    "Median Buyer HAI": 71.3,\n' +
'    "First-time Buyer HAI": 50.9\n' +
'  },\n' +
'  {\n' +
'    "County": "Walla Walla",\n' +
'    "Sales (SAAR)": 560,\n' +
'    "% Change by quarter": 1.8,\n' +
'    "% Change by year": -11.1,\n' +
'    "Building Permits": 40,\n' +
'    "% Change by year (Building Permits)": -45.2,\n' +
'    "Median Price ($)": 418700,\n' +
'    "% Change by year (Median Price)": 3.1,\n' +
'    "Median Buyer HAI": 68.2,\n' +
'    "First-time Buyer HAI": 48.7\n' +
'  },\n' +
'  {\n' +
'    "County": "Whatcom",\n' +
'    "Sales (SAAR)": 2460,\n' +
'    "% Change by quarter": 0.8,\n' +
'    "% Change by year": -16.9,\n' +
'    "Building Permits": 279,\n' +
'    "% Change by year (Building Permits)": 16.2,\n' +
'    "Median Price ($)": 650600,\n' +
'    "% Change by year (Median Price)": 12.0,\n' +
'    "Median Buyer HAI": 50.7,\n' +
'    "First-time Buyer HAI": 36.2\n' +
'  },\n' +
'  {\n' +
'    "County": "Yakima",\n' +
'    "Sales (SAAR)": 1710,\n' +
'    "% Change by quarter": -2.3,\n' +
'    "% Change by year": -18.6,\n' +
'    "Building Permits": 82,\n' +
'    "% Change by year (Building Permits)": -33.3,\n' +
'    "Median Price ($)": 341600,\n' +
'    "% Change by year (Median Price)": 1.7,\n' +
'    "Median Buyer HAI": 82.3,\n' +
'    "First-time Buyer HAI": 58.7\n' +
'  },\n' +
'  {\n' +
'    "County": "Statewide",\n' +
'    "Sales (SAAR)": 77990,\n' +
'    "% Change by quarter": -2.3,\n' +
'    "% Change by year": -21.5,\n' +
'    "Building Permits": 9229,\n' +
'    "% Change by year (Building Permits)": -6.4,\n' +
'    "Median Price ($)": 626100,\n' +
'    "% Change by year (Median Price)": 9.3,\n' +
'    "Median Buyer HAI": 63.1,\n' +
'    "First-time Buyer HAI": 45.0\n' +
'  }\n' +
']\n' +
'}';
}

Pulse Ctrl + S en Windows o Comando + S en macOS para guardar el archivo.
Vuelva a hacer clic con el botón derecho en la carpeta classes (clases) y seleccione SFDX: Deploy This Source to Org (SFDX: Implementar este código fuente en la organización).
En la ficha Output (Resultados) de la ventana terminal integrada, revise los resultados de su implementación. Si el comando se ha ejecutado correctamente, aparecerá el mensaje Deployed Source (Fuente implementada) con los cuatro archivos que se han cargado en la organización.