Skip to main content
Register now for TDX! Join the must-attend event to experience what’s next and learn how to build it.

Erstellen einer Lightning-Webkomponente für die Models API

Lernziele

Nachdem Sie diese Lektion abgeschlossen haben, sind Sie in der Lage, die folgenden Aufgaben auszuführen:

  • Erstellen einer benutzerdefinierten Apex-Klasse
  • Erstellen einer Lightning-Webkomponente
  • Bereitstellen einer Lightning-Webkomponente in Ihrem KI-Playground
  • Bearbeiten einer Organisationsseite mit dem Lightning App Builder (Lightning-Anwendungsgenerator)

Nachdem Sie Ihre Umgebung eingerichtet haben, ist es nun Zeit, der Lightning-Webkomponente Funktionalität hinzuzufügen. In dieser Lektion begleiten wir Maria dabei, wie sie eine benutzerdefinierte Apex-Klasse erstellt, die Benutzeroberfläche gestaltet, funktionales JavaScript hinzufügt und ihr Models API-Dashboard im KI-Playground bereitstellt.

Beispielanwendungsfall aus der Dokumentation für Entwickler:

Dieses Video zeigt Ihnen anhand eines einfachen Beispiels, das dem in diesem Modul ähnelt, wie Sie eine Lightning-Webkomponente erstellen, die auf die Models API zugreift.

Hinweis

Hinweis

Lernen Sie auf Deutsch? Beginnen Sie die Aufgabe in einem Trailhead Playground in der Sprache Deutsch und verwenden Sie für die Navigation die in Klammern angegebenen Übersetzungen. Kopieren und fügen Sie nur die Angaben in Englisch ein, da zur Überprüfung der Aufgabe Daten in Englisch benötigt werden. Wenn Sie die Aufgabe in Ihrer deutschen Organisation nicht bestehen, empfehlen wir Ihnen folgende Vorgehensweise: (1) Stellen Sie das Gebietsschema auf USA um, (2) legen Sie Englisch als Sprache fest (Anweisungen dazu finden Sie hier) und (3) klicken Sie erneut auf die Schaltfläche "Check Challenge" (Aufgabe überprüfen).

Weitere Details dazu, wie Sie die übersetzte Trailhead-Umgebung optimal nutzen können, finden Sie unter dem Badge "Trailhead in Ihrer Sprache".

Erstellen von Apex-Klassen für die Models API

  1. Klicken Sie in VS Code mit der rechten Maustaste auf den Ordner classes unter force-app/main und wählen Sie SFDX: Create Apex Class (SFDX: Apex-Klasse erstellen) aus. Nennen Sie die Klasse DashboardController.
  2. Neue Apex-Klassen in VS Code enthalten fünf Zeilen Standardcode. Entfernen Sie diesen Standardcode. Sie benötigen keinen Standardcode für dieses Modul, da wir vollständige Code-Beispiele sowohl für Apex-Klassen als auch für Dateien der Lightning-Webkomponente bereitstellen.
  3. Kopieren Sie den folgenden Code und fügen Sie ihn in die Apex-Klasse-Datei DashboardController.cls ein. 
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. Speichern Sie die Datei mit der Tastenkombination Strg+S (Windows) oder Cmd+S (macOS).
Note

'Housing Data'-Fehler
Eventuell wird eine Fehlermeldung angezeigt, die besagt, dass es keine Klasse namens HousingData gibt. Folgen Sie den Anweisungen im nächsten Abschnitt, um die Klasse HousingData hinzuzufügen. Für Vorführungszwecke werden diese Daten als statische Klasse dargestellt.

Erstellen einer neuen Klasse für Kontextbildungsdaten

Damit das Models API-Dashboard von Maria funktioniert, muss sie relevante Immobilienmarktdaten zur Kontextbildung für das LLM verwenden. Bei diesem Schritt erstellen wir eine neue Klasse und füllen sie mit Daten, damit sie von der DashboardController-Klasse referenziert werden kann.

Zu Vorführungszwecken handelt es sich bei den Daten um eine lokale Datei innerhalb der LWC. Bei einer offiziellen Implementierung dieses Dashboards würden die Daten in diesem Schritt dynamisch aus einer Immobilienmarkt-API abgerufen werden.

  1. Klicken Sie in VS Code mit der rechten Maustaste auf den Ordner classes und wählen Sie SFDX: Create Apex Class (SFDX: Apex-Klasse erstellen) aus. Nennen Sie die Klasse HousingData.
  2. Kopieren Sie den folgenden Code und fügen Sie ihn in die Apex-Klasse-Datei HousingData.cls ein.
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. Speichern Sie die Datei mit der Tastenkombination Strg+S (Windows) oder Cmd+S (macOS).
  2. Klicken Sie mit der rechten Maustaste erneut auf das Verzeichnis classes und wählen Sie SFDX: Deploy Source to Org (SFDX: Quellcode in Organisation bereitstellen) aus.
  3. Sehen Sie sich in der Registerkarte "Output" des integrierten Terminals die Ergebnisse der Bereitstellung an. Wenn der Befehl erfolgreich ausgeführt wurde, werden in einer "Deployed Source"-Meldung (Bereitgestellte Quelle) die vier Dateien aufgeführt, die in die Organisation hochgeladen wurden.

Erstellen einer Lightning-Webkomponente für die Models API

  1. Öffnen Sie in Visual Studio Code die Befehlspalette, indem Sie unter Windows Strg+Umschalt+P oder unter macOS Befehl+Umschalt+P drücken.
  2. Geben Sie SFDX ein.
  3. Wählen Sie SFDX: Create Lightning Web Component (Lightning-Webkomponente erstellen) aus.
  4. Geben Sie als Namen der neuen Komponente modelsAPIDashboard ein.
  5. Drücken Sie die Eingabetaste, um den Standardwert force-app/main/default/lwc zu übernehmen.
  6. Drücken Sie die Eingabetaste.
  7. Sehen Sie sich die neu erstellten Dateien im Ordner modelsAPIDashboard unter lwc an.
  8. Kopieren Sie den folgenden Code und fügen Sie ihn in die HTML-Datei modelsAPIDashboard.html ein. 
<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. Speichern Sie die Datei mit der Tastenkombination Strg+S (Windows) oder Cmd+S (macOS).
  2. Klicken Sie mit der rechten Maustaste auf den Ordner modelsAPIDashboard und wählen Sie New File (Neue Datei) aus.
  3. Geben Sie modelsAPIDashboard.css als Dateinamen ein.
  4. Kopieren Sie den folgenden Code und fügen Sie ihn in die CSS-Datei modelsAPIDashboard.css ein.
.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. Speichern Sie die Datei mit der Tastenkombination Strg+S (Windows) oder Cmd+S (macOS).
  2. Kopieren Sie den folgenden Code und fügen Sie ihn in die JavaScript-Datei modelsAPIDashboard.js ein. 
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. Speichern Sie die Datei mit der Tastenkombination Strg+S (Windows) oder Cmd+S (macOS).

Nun sorgen wir dafür, dass unsere Komponente von verschiedenen Lightning Experience-Seiten aus verfügbar ist, indem wir diese Ziele zur Metadatendatei hinzufügen.

  1. Kopieren Sie den folgenden Code und fügen Sie ihn in die XML-Datei modelsAPIDashboard.js-meta.xml ein. 
<?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. Speichern Sie die Datei mit der Tastenkombination Strg+S (Windows) oder Cmd+S (macOS).

Bereitstellen Ihres KI-Playgrounds

  1. Klicken Sie mit der rechten Maustaste auf den Ordner modelsAPIDashboard unter lwc.
  2. Klicken Sie auf SFDX: Deploy This Source to Org (SFDX: Diese Quelle in der Organisation bereitstellen).

Kontextmenü

  1. Sehen Sie sich in der Registerkarte "Output" des integrierten Terminals die Ergebnisse der Bereitstellung an. Wenn der Befehl erfolgreich ausgeführt wurde, werden in einer "Deployed Source"-Meldung (Bereitgestellte Quelle) die vier Dateien aufgeführt, die in die Organisation hochgeladen wurden.

Bearbeiten einer Seite im Lightning App Builder (Lightning-Anwendungsgenerator)

  1. Öffnen Sie in Visual Studio Code die Befehlspalette, indem Sie unter Windows Strg+Umschalt+P oder unter macOS Befehl+Umschalt+P drücken.
  2. Geben Sie SFDX ein.
  3. Wählen Sie SFDX: Open Default Org (Standardorganisation öffnen) aus.
    Dadurch wird Ihr KI-Playground in einem separaten Browserfenster geöffnet.
  4. Klicken Sie auf das Zahnradsymbol (””) und wählen Sie Setup aus.
  5. Suchen Sie im Feld "Quick Find" (Schnellsuche) nach Home (Startseite) im Abschnitt "Feature Settings" (Funktionseinstellungen) und wählen Sie diesen Eintrag aus.
  6. Schalten Sie die Einstellung bei "Advanced Seller Home (Erweiterte Verkäuferstartseite)" auf Inactive (Inaktiv).
  7. Suchen Sie im App Launcher (””) nach Sales (Vertrieb) und wählen Sie diesen Eintrag aus.
  8. Klicken Sie auf das Zahnradsymbol (“”) und wählen Sie Edit Page (Seite bearbeiten) aus.
  9. Blättern Sie zum Abschnitt "Custom" (Benutzerdefiniert) am Ende der Liste "Components" (Komponenten).
  10. Ziehen Sie die Lightning-Webkomponente 'modelsAPIDashboard' aus dem Bereich "Custom" (Benutzerdefiniert) der Liste "Lightning Components" (Lightning-Komponenten) an den Anfang des Zeichenbereichs.
  11. Klicken Sie auf Speichern.
  12. Klicken Sie auf Activate (Aktivieren).
  13. Klicken Sie auf Assign as Org Default (Als Organisationsstandard zuweisen).
  14. Klicken Sie auf Speichern.
  15. Klicken Sie erneut auf Save (Speichern) und anschließend auf die Schaltfläche "Back" (Zurück) (””), um zur Seite zurückzukehren.
  16. Aktualisieren Sie die Seite, um die neue Komponente anzuzeigen.

Herzlichen Glückwunsch zur Erstellung Ihrer ersten Lightning-Webkomponente mit der Models API!

DreamHouse Realty verfügt jetzt über eine Dashboard-Komponente direkt auf der "Sales Home Page" (Startseite für den Vertrieb). Mit diesem Dashboard kann sich das Vertriebsteam über aktuelle Trends auf dem Immobilienmarkt auf dem Laufenden halten und die Bedürfnisse seiner Hauskäufer besser verstehen. Diese Beispielkomponente ist sehr einfach gehalten, aber mit dieser Implementierung können Sie die Leistungsfähigkeit der Models API bei der Kombination Ihrer Geschäftsanwendungsfälle mit generativer KI erkennen.

Ressourcen

Teilen Sie Ihr Trailhead-Feedback über die Salesforce-Hilfe.

Wir würden uns sehr freuen, von Ihren Erfahrungen mit Trailhead zu hören: Sie können jetzt jederzeit über die Salesforce-Hilfe auf das neue Feedback-Formular zugreifen.

Weitere Infos Weiter zu "Feedback teilen"