Restaurant Review Creator With Build Apps & Open AI

In this blog you will learn how to create a no-code application using the SAP Build Apps and Open AI.

While creating a project in Build Apps with OData Backend – Northwind, “Product” names surprised me. These humorous names such as “Chai”, “Tofu”, and “Ikura” inspired me to create a project with Build Apps and Open AI.

This application enables access to OData backend entity and integration with “Restaurant review creator” open AI. When the user enters review key words, the OpenAI gives an enhanced customer review.

Prerequisites

• Access to the SAP Build Apps sandbox system.

Create an App with SAP Build from Sandbox lobby

Open the Sandbox within the SAP Build lobby to create an application by selecting select “Web & Mobile Application.Newly created app opens a skeleton project with a page, a tile component, and a text component.

Now let’s create connection to Northwind OData backend.

Create an OData backend connection.

Open the Data tab and under SAP Build Apps Classic data entities, Click on Create Data Entity and select OData integration., select Base URL as Northwind OData Service  on the left enable Products entity and select list and Click Save Data Resources and Save the backend configuration.

Create a Front end  UI

After setting up the backend, let’s create the front end UI that will fetch business data.

Firstly, from UI Canvas, select “Headline” and edit the Content/title to “Restaurants” from PROPERTIES tab and delete “text” box. Later drag and drop List item from LISTS to page layout.

Select list item from UI canvas, and select Variable and add a new data variable, click on “+” ADD DATA VARIABLE  and select “Products” from the popup list of entities which we selected during backend configuration, Data variable type is “Collection of data records” as we are doing a list, Save and move back to VIEW view

Select the list and from PROPERTIES, click on the binding icon which says “Repeat with” and select “Data variable” and select “Products1” and click SAVE. From PROPERTIES, Click on Primary label to bind it to data item products name, to do so select Data Item in repeat, which gives current index items and shows all the properties. Let’s select ProductName from “Select repeat data property” and click SAVE
Now repeat the same steps for Secondary label and select “SupplierID” and Click SAVE.

Now let’s create a details page to view details of a list item – Restaurant’s detail page.

In the upper left corner, click on the name of the current page and click on ADD NEW PAGE and give a page name as “Restaurant detail, Delete all the components on the page, Select Variables and let’s create a Page Parameter as “productid” (variables that are required to pass when navigating to a particular page)

Now click on DATA VARIABLE, to add new data variable and select the pre-populated “Products” and select “Data Variable Type” to “Single data record”. The desirable record is based on “ProductID”, so unselect the “X” for “ProductID” and assign the Page Parameter to get the record.

Select Formula and enter -> NUMBER(params.ProductID) and SAVE the formula. Now click on VIEW and drag and drop a “list view, From PROPERTIS, Select Primary label and bind it to “Data and Variable” by selecting Products1 – > “PoductName” and Products1 – > “SupplierID” and SAVE

Navigation between pages

From the upper left corner, click on the current page and select the “Restaurants” page. Select the list component and open the logic pane. Connect an Open Page flow function to tap the event. Here Build Apps automatically picks up the page there is only only one page – “Restaurants Details”. Select the “ProductID” page parameter and pass the formula as -> STRING(repeated.current.ProductID) and SAVE.After launching the app, these are the final pages: Restaurant and Restaurants Details

 Now it’s time to add Open AI integration to the project,

Configure a REST API direct integration connection.

Open DATA tab Under SAP Build Apps Classic data entities, Click on Create Data Entity and select REST API direct integration with below details

Click on CREATERECORD(POST) and add Relative path: v1/completions

Now let’s configure SCHEMA from API docs, by default it uses get schema, but here we need a POST schema. Select “Custom schema” for both request and response from drop down and add properties as “model”, “prompt”, and “max tokens” with these values and SAVE.

Now let’s add APP VARIABLE – Variable name: APIKEY

Initial value: Bearer XXXXXXXXXX

Note: Initial value is set to OPEN API KEY, this key can make calls to any OPENAI APIs. To get the key, create an account at OpenAI and generate the key by selecting “Create new secret key”.

To test the Schema Select CREATE RECORD and click on TEST, bind the authorization key which is created as APP VARIABLE. Click on the bind icon for Authorization and select Data and Variable. Then, select App variable and select APIKEY. Finally, SAVE the configuration.

Let’s add Chat Completion API to UI

Let’s .add Open AI, Let’s drag and drop a Text field and add “Component display name as “ Review” to put the review and Button with label as “Write Review” add “Component display name as “Submit”

To a flow logic elect “Write Review”, From Component tab drag and drop “Create records” and connect the flow and from PROPERTIES, click on Resource name and select “OPENAICompletion” the data entity and click SAVE

To bind the app variable, click on Authorization bind icon and select Data and Variable and App variable and select APIKEY and click SAVE. Click on Record properties bind icon and select Object with properties and for prompt bind with a formula as -> “Write a restaurant review based on these notes:Name:” + data.Products1.ProductName and Click SAVE

Now it’s time to add a page variable as “Review” and Variable value Type as “Text”. Click SAVE. From View, select Text box and bind the text content to page variable “Review”.

To add logic from VIEW, select “Write Review” and click from Logic pane, drag and drop Set page variable and connect the top flow from create record to set page variable. Select Set page variable and by default Variable name is set to “Review”. Now bind the Assigned value to formula as -> outputs[“Create record”].response.choices[0].text. Click SAVE. Let’s launch the app to see how it looks

We are almost there, Now let’s drag and drop Input field and enter label  as “View Keywords”and Placeholder text as “Enter Keywords here..”. Now let’s add Page Variable with Variable name as “reviewkeywords” and value type to Text and Click SAVE.  Click on VIEW, select input field and bind the value by clicking Value X and select Data and Variable. Select Page variable and select “reviewkeywords”

Now let’s a formula, select “Write Review” button. From Logic pane, select “create record” and click on “Record properties” – Custom object and click on Formula icon and append to the exiting formula with “notes” and “keywords”.

Formula – “Write a restaurant review based on these notes:Name:” + data.Products1.ProductName+”\n keywords:” + pageVars.reviewkeywords

Yay…  we have a no code application created within few minutes which provides enhanced restaurant reviews..

Disclaimer:
SAP notes that posts about potential uses of generative AI and large language models are merely the individual poster’s ideas and opinions, and do not represent SAP’s official position or future development roadmap. SAP has no legal obligation or other commitment to pursue any course of business, or develop or release any functionality, mentioned in any post or related content on this website.