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.
Création de classes Apex d’API Models
- Dans VS Code, faites un clic droit sur le dossier classes situé sous force-app/main et sélectionnez SDFX: Create Apex Class (SDFX : créer une classe Apex). Nommez la classe
DashboardController
.
- 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.
- 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; } } }
- Enregistrez le fichier en appuyant sur Ctrl+S (Windows) ou Cmd+S (macOS).
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.
- Dans VS Code, faites un clic droit sur le dossier classes et sélectionnez SDFX: Create Apex Class (SDFX : créer une classe Apex). Nommez la classe
HousingData
.
- 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' + '}'; }
- Enregistrez le fichier en appuyant sur Ctrl+S (Windows) ou Cmd+S (macOS).
- Faites un clic droit sur le dossier classes et sélectionnez SFDX: Deploy This Source to Org (SDFX :déployer cette source dans l’organisation).
- 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
- Dans Visual Studio Code, ouvrez la palette de commandes en appuyant sur Ctrl+Maj+P (Windows) ou sur Cmd+Maj+P (macOS).
- Saisissez
SFDX
.
- Sélectionnez SFDX :. création d’un composant Web Lightning.
- Saisissez
modelsAPIDashboard
pour nommer le nouveau composant.
- Appuyez sur Entrée pour accepter l’emplacement par défaut,
force-app/main/default/lwc
.
- Appuyez sur Entrée.
- Affichez les fichiers nouvellement créés dans le dossier
modelsAPIDashboard
situé souslwc
.
- 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>
- Enregistrez le fichier en appuyant sur Ctrl+S (Windows) ou Cmd+S (macOS).
- Faites un clic droit sur le dossier
modelsAPIDashboard
et sélectionnez New File (Nouveau fichier).
- Saisissez
modelsAPIDashboard.css
comme nom de fichier.
- 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: ""; } }
- Enregistrez le fichier en appuyant sur Ctrl+S (Windows) ou Cmd+S (macOS).
- 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 }); } }
- 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.
- 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>
- Enregistrez le fichier en appuyant sur Ctrl+S (Windows) ou Cmd+S (macOS).
Déploiement sur votre Playground IA
- Faites un clic droit sur le dossier
modelsAPIDashboard
souslwc
.
- Cliquez sur SFDX : déployer cette source dans l’organisation.
- 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
- Dans Visual Studio Code, ouvrez la palette de commandes en appuyant sur Ctrl+Maj+P (Windows) ou sur Cmd+Maj+P (macOS).
- Saisissez
SFDX
.
- Sélectionnez SFDX:. Open Default Org (SFDX : ouvrir l’organisation par défaut).
Cela ouvre votre Playground IA dans un navigateur distinct.
- Cliquez sur l’icône en forme d’engrenage (
), puis sélectionnez Setup (Configuration).
- Dans la zone Quick Find (Recherche rapide), recherchez et sélectionnez Home (Accueil) dans la section Feature Settings (Paramètres de fonctionnalité).
- Pour accéder à l’accueil des vendeurs avancé, basculez le paramètre sur Inactive (Inactif).
- Dans le lanceur d’application (
), recherchez et sélectionnez Sales (Ventes).
- Cliquez sur l’icône en forme d’engrenage (
) et sélectionnez Edit Page (Modifier la page).
- Faites défiler l’écran jusqu’à la section Custom (Personnalisé) au bas de la liste Components (Composants).
- 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.
- Cliquez sur Enregistrer.
- Cliquez sur Activer.
- Cliquez sur Assign as Org Default (Attribuer par défaut pour l’organisation).
- Cliquez sur Enregistrer.
- Cliquez à nouveau sur Save (Enregistrer), puis sur le bouton retour (
) pour revenir à la page.
- Actualisez la page pour voir votre nouveau composant.
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 la puissance de l’utilisation de l’API Models pour combiner vos cas d’utilisation professionnels avec l’IA générative.