Connect the Created OpenAI API with the SAPUI5 Application

[kachiever]

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.