Skip to main content
Bring your team and maximize your impact at Dreamforce. Register three or more to unlock $999 passes.

Création d’un composant Web Lightning d’API Models

Objectifs de formation

Une fois cette unité terminée, vous pourrez :

  • Créer une classe Apex personnalisée
  • Créer un composant Web Lightning
  • Déployer un composant Web Lightning dans votre Playground IA
  • Modifier une page d’organisation avec le générateur d’application Lightning

Maintenant que vous avez configuré votre environnement, il est temps d’ajouter des fonctionnalités au composant Web Lightning. Dans cette unité, nous suivons Maria alors qu’elle crée une classe Apex personnalisée, conçoit l’interface utilisateur, ajoute du code JavaScript fonctionnel et déploie son tableau de bord d’API Models dans le Playground IA.

Exemple de cas d’utilisation pour développeur et rédacteur de documentation

Cette vidéo vous montre comment créer un composant Web Lightning qui accède à l’API Models, à l’aide d’un exemple de base semblable à celui de ce module.

Remarque

Remarque

Vous souhaitez apprendre en français ? Commencez le défi dans un Trailhead Playground en français et utilisez les traductions fournies entre crochets pour naviguer. Copiez et collez uniquement les valeurs en anglais, car les validations de défi reposent sur les données en anglais. Si vous ne réussissez pas le défi dans votre organisation en français, nous vous recommandons (1) de définir le paramètre régional sur les États-Unis, (2) de définir la langue sur l’anglais en suivant les instructions ici, puis (3) de cliquer à nouveau sur le bouton « Vérifier le défi ».

Consultez le badge Trailhead dans votre langue pour découvrir comment profiter de l’expérience Trailhead traduite.

Création de classes Apex d’API Models

  1. Dans VS Code, faites un clic droit sur le dossier classes situé sous force-app/main et sélectionnez SFDX: Create Apex Class (SDFX : créer une classe Apex). Nommez la classe DashboardController.
  2. Les nouvelles classes Apex dans VS Code comportent cinq lignes de code par défaut. Supprimez ce code par défaut. Vous n’aurez besoin d’aucun code par défaut pour ce module puisque nous fournissons des exemples de code complets pour les classes Apex et les fichiers de composants Web Lightning.
  3. Dans le fichier de classe Apex, DashboardController.cls, copiez et collez le code suivant. 
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;
        }
    }
}
  1. Enregistrez le fichier en appuyant sur Ctrl+S (Windows) ou Cmd+S (macOS).
Note

Erreur relative aux données immobilières
Vous pouvez voir une erreur indiquant qu’il n’y a pas de classe nommée HousingData. Suivez les instructions de la section suivante pour ajouter la classe HousingData. Ces données sont représentées sous forme de classe statique à des fins de démonstration.

Création d’une nouvelle classe pour les données d’ancrage

Pour que le tableau de bord de l’API Models de Maria soit fonctionnel, elle doit ancrer le LLM avec des données pertinentes du marché immobilier. Dans cette étape, nous créons une nouvelle classe et la remplissons avec des données afin qu’elle puisse être référencée par la classe DashboardController.

À des fins de démonstration, les données sont représentées par un fichier local dans le LWC. Dans une implémentation officielle de ce tableau de bord, les données seraient récupérées de manière dynamique à partir d’une API du marché immobilier.

  1. Dans VS Code, faites un clic droit sur le dossier classes et sélectionnez SFDX: Create Apex Class (SDFX : créer une classe Apex). Nommez la classe HousingData.
  2. Dans le fichier de classe Apex, HousingData.cls, copiez et collez le code suivant. 
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' +
'}';
}
  1. Enregistrez le fichier en appuyant sur Ctrl+S (Windows) ou Cmd+S (macOS).
  2. Faites un clic droit sur le dossier classes et sélectionnez SFDX: Deploy This Source to Org (SFDX : déployer cette source dans l’organisation).
  3. Dans l’onglet de sortie du terminal intégré, affichez les résultats de votre déploiement. Si la commande a été exécutée avec succès, un message indiquant que la source est déployée répertorie les quatre fichiers qui ont été chargés dans l’organisation.

Création d’un composant Web Lightning d’API Models

  1. Dans Visual Studio Code, ouvrez la palette de commandes en appuyant sur Ctrl+Maj+P (Windows) ou sur Cmd+Maj+P (macOS).
  2. Saisissez SFDX.
  3. Sélectionnez SFDX: Create Lightning Web Component (SFDX : créer un composant Web Lightning).
  4. Saisissez modelsAPIDashboard pour nommer le nouveau composant.
  5. Appuyez sur Entrée pour accepter l’emplacement par défaut, force-app/main/default/lwc.
  6. Appuyez sur Entrée.
  7. Affichez les fichiers nouvellement créés dans le dossier modelsAPIDashboard situé sous lwc.
  8. Dans le fichier HTML, modelsAPIDashboard.html, copiez et collez le code suivant. 
<template>
    <div
        class="slds-var-m-around_medium slds-grid slds-grid_vertical slds-box slds-theme_default">
        <h1><font size="3"><b>Housing Market Dashboard</b></font>
        </h1>
        <!-- Chat messages container -->
        <div
        class="slds-scrollable_y"
        style="height: 440px"
        lwc:ref="chatContainer"
        >
            <!-- Iterate over each message in the messages array -->
            <template for:each={messages} for:item="message">
                <div key={message.id} class="slds-var-m-around_small">
                    <!-- If the message is from the assistant -->
                    <div class="custom-chat-message_inbound slds-var-p-around_small">
                        <div class="slds-chat-message__body">
                            <div class="slds-chat-message__text">{message.text}</div>
                        </div>
                    </div>
                </div>
            </template>
        </div>
    <!-- Loading indicator -->
    <template lwc:if={isLoading}>
        <div class="loading-container slds-var-m-around_small">
            <div class="loading-text">
                Analyzing data… One moment.
            </div>
        <div class="loading-indicator"></div>
        </div>
    </template>
        <!-- Send button -->
    <div class="slds-grid slds-grid_vertical-align-center send-button-container">
        <div class="slds-col slds-size_1-of-4">
            <lightning-button
            label="Analyze"
            variant="brand"
            onclick={handleSendMessage}
            disabled={isLoading}
            ></lightning-button>
        </div>
    </div>
    </div>
</template>
  1. Enregistrez le fichier en appuyant sur Ctrl+S (Windows) ou Cmd+S (macOS).
  2. Faites un clic droit sur le dossier modelsAPIDashboard et sélectionnez New File (Nouveau fichier).
  3. Saisissez modelsAPIDashboard.css comme nom de fichier.
  4. Dans le fichier CSS, modelsAPIDashboard.css, copiez et collez le code suivant. 
.custom-chat-message_inbound {
    border-radius: 10px;
    max-width: 100%;
    background-color: #f3f2f2;
    align-self: flex-start;
}
.custom-chat-message_outbound {
  border-radius: 10px;
  max-width: 100%;
  background-color: #0070d2;
  color: white;
  align-self: flex-end;
}
.send-button-container {
  padding-top: 10px;
  padding-bottom: 1px;
}
.custom-textarea {
  width: 100%;
}
.loading-indicator {
  width: 50px;
  height: 25px;
  overflow: hidden;
  vertical-align: middle;
  position: relative;
}
.loading-indicator::after {
  content: "";
  display: inline-block;
  width: 50px;
  height: 50px;
  overflow: hidden;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: loading 1s infinite steps(7);
}
@keyframes loading {
  0% {
    content: ".";
  }
  12.5% {
    content: "..";
  }
  25% {
    content: "...";
  }
  37.5% {
    content: ".....";
  }
  50% {
    content: "......";
  }
  62.5% {
    content: "........";
  }
  75% {
    content: "............";
  }
  87.5% {
    content: "";
  }
}
  1. Enregistrez le fichier en appuyant sur Ctrl+S (Windows) ou Cmd+S (macOS).
  2. Dans le fichier JavaScript, modelsAPIDashboard.js, copiez et collez le code suivant. 
import { LightningElement, track } from "lwc";
import createChatGenerations from "@salesforce/apex/DashboardController.createChatGenerations";
export default class HousingMarket extends LightningElement {
  @track housingData = [];
  @track isLoading = false;
  @track error;
  @track messages = []; // Initialize messages
  connectedCallback() {
    this.fetchHousingMarketData();
  }
  // Get Housing Market Data
  fetchHousingMarketData() {
    this.isLoading = true;
    createChatGenerations()
      .then((result) => {
        console.log(result);
        this.error = undefined;
      })
      .catch((error) => {
        this.error = error;
        this.housingData = [];
      })
      .finally(() => {
        this.isLoading = false;
      });
  }
  // Handle analyze button click
  handleSendMessage() {
    this.isLoading = true; // Show loading indicator
    // Call Apex method to fetch chat response
    createChatGenerations()
      .then((result) => {
        const assistantMessageObj = {
          id: this.messages.length + 1,
          text: result,
          role: "assistant",
          isUser: false,
        };
        this.messages = [...this.messages, assistantMessageObj]; // Add assistant message to messages array
      })
      .catch((error) => {
        console.error("Error fetching bot response", JSON.stringify(error));
      })
      .finally(() => {
        this.isLoading = false; // Hide loading indicator
      });
  }
}
  1. Enregistrez le fichier en appuyant sur Ctrl+S (Windows) ou Cmd+S (macOS).

Rendons notre composant disponible à partir de différentes pages Lightning Experience en ajoutant ces cibles au fichier de métadonnées.

  1. Dans le fichier XML, modelsAPIDashboard.js-meta.xml, copiez et collez le code suivant. 
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>61.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
        <target>lightning__RecordPage</target>
    </targets>
</LightningComponentBundle>
  1. Enregistrez le fichier en appuyant sur Ctrl+S (Windows) ou Cmd+S (macOS).

Déploiement sur votre Playground IA

  1. Faites un clic droit sur le dossier modelsAPIDashboard sous lwc.
  2. Cliquez sur SFDX: Deploy This Source to Org (SFDX : déployer cette source dans l’organisation).

Menu contextuel.

  1. Dans l’onglet de sortie du terminal intégré, affichez les résultats de votre déploiement. Si la commande a été exécutée avec succès, un message indiquant que la source est déployée répertorie les quatre fichiers qui ont été chargés dans l’organisation.

Modifier la page dans le Générateur d'applications Lightning

  1. Dans Visual Studio Code, ouvrez la palette de commandes en appuyant sur Ctrl+Maj+P (Windows) ou sur Cmd+Maj+P (macOS).
  2. Saisissez SFDX.
  3. Sélectionnez SFDX: Open Default Org (SFDX : ouvrir l’organisation par défaut).
    Cela ouvre votre Playground IA dans un navigateur distinct.
  4. Cliquez sur l’icône en forme d’engrenage (), puis sélectionnez Setup (Configuration).
  5. Dans la zone Quick Find (Recherche rapide), recherchez et sélectionnez Home (Accueil) dans la section Feature Settings (Paramètres de fonctionnalité).
  6. Pour accéder à l’accueil des vendeurs avancé, basculez le paramètre sur Inactive (Inactif).
  7. Dans la recherche rapide, recherchez et sélectionnez Lightning App Builder (Générateur d’application Lightning).
  8. Cliquez sur New (Nouveau) pour créer une page Lightning. La page d’accueil Sales (Ventes) existante dans un Trailhead Playground est verrouillée et ne peut pas être modifiée ; vous devez donc en créer une autre et la définir comme page d’accueil par défaut de l’organisation.
  9. Sélectionnez Page d’Accueil, puis cliquez sur Suivant.
  10. Saisissez Home_Page_Default comme libellé, puis cliquez sur Next (Suivant).
  11. Sélectionnez une présentation, telle que Standard Home Page (Page d’accueil standard), puis cliquez sur Done (Terminé). La nouvelle page s’ouvre dans Lightning App Builder.
  12. Faites défiler l’écran jusqu’à la section Custom (Personnalisé) au bas de la liste Components (Composants).
  13. Faites glisser le composant Web Lightning modelsAPIDashboard de la zone Custom (Personnalisé) de la liste Lightning Components (Composants Lightning) vers le haut de la zone de dessin de la page.
  14. Cliquez sur Enregistrer.
  15. Lorsqu’un message vous invite à activer la page, cliquez sur Activate (Activer).
  16. Sélectionnez l’onglet Org Default (Valeur par défaut pour l’organisation), cliquez sur Assign as Org Default (Attribuer par défaut pour l'organisation), puis sur Save (Enregistrer).
  17. Cliquez à nouveau sur Save (Enregistrer) pour confirmer.
  18. Dans le lanceur d’applications, recherchez et sélectionnez Sales (Ventes) pour afficher votre nouvelle page d’accueil avec le composant Web Lightning de l’API Models.

Félicitations ! Vous avez créé votre premier composant Web Lightning d’API Models.

DreamHouse Realty dispose désormais d’un composant de tableau de bord directement sur la page d’accueil des ventes. Grâce à ce tableau de bord, l’équipe de vente peut rester au courant des tendances actuelles du marché immobilier et mieux comprendre les besoins de ses acheteurs. Cet exemple de composant est très simpliste, mais avec cette implémentation, vous pouvez voir tout l’intérêt de l’API Models pour combiner vos cas d’utilisation professionnels avec l’IA générative.

Ressources

Partagez vos commentaires sur Trailhead dans l'aide Salesforce.

Nous aimerions connaître votre expérience avec Trailhead. Vous pouvez désormais accéder au nouveau formulaire de commentaires à tout moment depuis le site d'aide Salesforce.

En savoir plus Continuer à partager vos commentaires