Create SAPUI5 Application to Test OpenAI API

[kachiever]

Welcome to the Sixth 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. So, in this episode, we will create our 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.

Create a Project in BAS

Let's start with creating a Blank Application Project in BAS.

Step 1: Click and Choose File & New Project from the Template.

Step 2: Choose Fiori and click on Start.

Step 3: Choose SAP Fiori as the template type, select basic & click Next.

Step 4: Choose None & click Next.

Step 5: Add View name, I am Choosing OpenAI, which can be anything & click Next.

Step 6: Add Module name, App Title, namespace, and click on Finish.

You should finally land here & project structure should look like this.

Test the Template Created App

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

Step 2: Let's do the npm install.

Step 3: And, do the npm update.

Step 4: And finally test run whatever was built by template 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.

Let's Build the UI

We will create a Simple UI that allows input & shows the top 3 Matches with percentages.

Step 1: Open OpenAI.view.xml, it should look like this.

Step 2: Replace it with the below Code Snippet.

<mvc:View controllerName="openai.openai.controller.OpenAI"

	xmlns:mvc="sap.ui.core.mvc" displayBlock="true"

	xmlns="sap.m"

	xmlns:grid="sap.ui.layout.cssgrid"

	xmlns:f="sap.f"

    >

	<Page id="page" title="{i18n>title}">

		<content>

			<f:GridListItem id="glt1" class="round">

				<f:layoutData>

					<grid:ResponsiveColumnItemLayoutData id="grid1" columns="20" rows="5" />

				</f:layoutData>

				<VBox id="vb1" width="100%" class="sapUiSmallMargin" wrap="Wrap">

					<Title id="txt1" text="{i18n>query}" />

					<VBox id="vb2" width="100%">

						<Label id="lb1" ></Label>

						<TextArea id="chatques" width="90%" ></TextArea>

						<Label id="lb2" ></Label>

						<Button id="b1" text="{i18n>submit}" class="invtbutton" press="askAI"  />

					</VBox>

				</VBox>

				<Label id="l1"/>

				<Label id="l2"/>

			</f:GridListItem>

			<f:GridListItem id="glt2" class="round">

				<f:layoutData>

					<grid:ResponsiveColumnItemLayoutData  id="grid2" columns="100" rows="5" />

				</f:layoutData>

				<VBox id="vb3" width="100%" class="sapUiSmallMargin">

					<Title id="t1" text="{i18n>ans}" />

					<VBox id="vb4" width="100%">

						<HBox id="hb1" width="100%">

							<TextArea id="chatans1a" width="100%" ></TextArea>

							<TextArea id="chatans1b" width="100%" ></TextArea>

						</HBox>

						<HBox id="hb2" width="100%">

							<TextArea id="chatans2a" width="100%" ></TextArea>

							<TextArea id="chatans2b" width="100%" ></TextArea>

						</HBox>

						<HBox id="hb3" width="100%">

							<TextArea id="chatans3a" width="100%" ></TextArea>

							<TextArea id="chatans3b" width="100%" ></TextArea>

						</HBox>

					</VBox>

				</VBox>

			</f:GridListItem>

		</content>

	</Page>

</mvc:View>

Step 3: Open the i18n file & code at the end from the below Code Snippet.

query=Please Enter Text

ans=Answer

submit=Submit

Step 4: Save everything, open the terminal, do npm start to run & check the changes (Just Refresh the App page if the App is already running). The App should look like this :

Congrats We are done with the UI part and will add logic  & connect our service in the Next episode.

Let’s Summarize

We created a project from  Template in BAS's DEVSpace & tinkered/created a basic UI for our requirement. Further, we tested the same in BAS. That’s all for this episode, will meet you guys in Episode 7.

Next Episode : Epidosde 7