Welcome to the Seventh Episode of the Series: Hello World OpenAI: Crafting Accurate ChatGPT-Like Custom Search for SAPUI5 Application. Till now we installed IDE, set up the environment, created a Secret Key for our OpenAI Account, tested the same using Postman, and created a NodeJs-based API Service for BTP-CF, deployed on BTP-CF & successfully tested the same, and finally created a SAPUI5 project in BAS further did & tested the changes. So, in this episode, we will consume the service in the SAPUI5 Application.

You can check all the existing & upcoming blog posts of this series via the introduction blog post available below link-

Click here

Prerequisites

• You already have an SAP BTP Trial Account & a DEV Space in BAS (Business Application Studio) [ Check Here if not already].
• You have some basic SAPUI5 Knowledge.
• You have followed the previous episodes.

Start you Service

As it is a BTP Trial account, we will have to start our Service.

Step 1: Log in to your BTP Trial Account, go to SubAccount & open your Space.

Step 2: Our App/Service may be in a Stopped state, click on the Play Button to start.

The App/Service will be started and will look like this.

So, we are all set to connect it with our UI5 Application.

Train our Service

Let’s quickly train our Service.

Step 1: Open Postman and train the Service via /add  API endpoint. [As done in Episode 4]

Use the URL of the Service Noted in Episode 5. Choose POST, add URL, and set Basic Auth and Body raw->JSON like we did in Episode 4.

{
    "entry":"IT Support"
}

We will get 201 Status & Success Message.

Step 2: Train 3 More scenarios the same way.

Travel, Finance, Need Help

Step 3: Let’s test if things are fine.via our Display API, like we did in Episode 4.

Cool, we are all set to go ahead.

Add Logic to Our Application

Step 1: Open Business Application Studio (BAS), start your DEV Space & open the same.

Step 2: Open the file OpenAI.controller.js, it should look like this initially.

Step 3: Let’s add our logic, copy & replace the controller code from below.

sap.ui.define([
    "sap/ui/core/mvc/Controller"
],
    /**
     * @param {typeof sap.ui.core.mvc.Controller} Controller
     */
    function (Controller) {
        "use strict";

        return Controller.extend("openai.openai.controller.OpenAI", {
            onInit: function () {

            },
            askAI: function () {
                var ques = this.getView().byId("chatques").getValue();
                var that = this;
                var busyDialog = new sap.m.BusyDialog();
                this.getView().addDependent(busyDialog);
                var payload = {
                   "ques" : ques
                   };
                ///
           var sURL = "https://openaiapi.[Your API Service URL].ondemand.com/askai" 
               var that = this; 
               $.ajax({ 
                   url: sURL, 
                   dataType: 'json', 
                   type: 'POST',
                   data: JSON.stringify(payload),
                   contentType: 'application/json',
                   headers: { 
                       "Content-Type": "application/json", 
                       "Access-Control-Allow-Origin": "*" ,
                       "Access-Control-Allow-Headers":"Origin, X-Requested-With, Content-Type, Accept, authorization",
                       "Access-Control-Allow-Methods": "GET,POST,DELETE,PUT,OPTIONS",
                       'Authorization': 'Basic YWRtaW46b3Vyc2VjcmV0'
                   },
                   crossDomain: true, 
                   success: function (oData) { 
                       console.log(oData);
                       that.getView().byId("chatans1a").setValue(oData[0][0]);
                       that.getView().byId("chatans1b").setValue("Matched : " + (oData[0][1]*100).toString() + " %");
                       that.getView().byId("chatans2a").setValue(oData[1][0]);
                       that.getView().byId("chatans2b").setValue("Matched : " + (oData[1][1]*100).toString() + " %");
                       that.getView().byId("chatans3a").setValue(oData[2][0]);
                       that.getView().byId("chatans3b").setValue("Matched : " + (oData[2][1]*100).toString() + " %");
                   } 
                   }) 
                ///

               }
        });
    });

Save the code. Here we are making a call to our /askai API Service and show the Top 3 matches with their % of Match.

Time to Test

Step 1: Right-click on the project & select open integrated terminal.

Step 2: Run the app via npm start.

The application will start, and you will get a pop-up to open the app in a new tab, or will be opened automatically. This is how the application should look like for now.

Step 3: Let’s try a case, type: and press Enter.

Cool, it’s showing the top 3 matches with Match Percentage.

It supports all languages, let’s try the same in German.

And it works perfectly fine.

Congratulations were all done & successfully completed our Hello World OpenAI: Crafting Accurate ChatGPT-Like Custom Search for SAPUI5 Applications Journey.

Completion

Congratulations, you have successfully gone through all 7 Episodes of our Hello World OpenAI: Crafting Accurate ChatGPT-Like Custom Search for SAPUI5 Applications Journey. We started from scratch, by setting up the environment, getting our OpenAI Key, testing it locally, Creating a NodeJs-based API service backed by OpenAI, deploying it on SAP-BTP Cloud Foundry & finally creating a SAPUI5 Application & consuming our API Service in the same. Follow me for more such technical blogs.