In this blog post, we shall learn to integrate APIs from SAP Business API Hub with our custom Fiori application. Let us integrate language conversion ML API with basic form element in Fiori application. Let’s get started.
Following are the steps that are to be performed to use the SAP ML Translation API from the business HUB
- Create Machine Learning API Sandbox Destination on SAP Cloud Platform.
- Invoke / Call the above-created destination in the UI5 app model file[neo-app.json].
- Store the unique API key in the model file of the UI5 App [json].
- Create the custom JSON file to specify the required languages.
- Specify the models [json, Languages.json] in the Manifest.json App descriptor file.
- Design the UI for the end user in [View.xml] file.
- Mention the Element texts in the i18n file.
- Get the Element text Strings that pass them to the API for translation.
Instructions to create Machine Learning API Destination on SAP Cloud Platform:
- Go to the Cloud Platform Cockpit [https://account.hanatrial.ondemand.com/cockpit/].
- Go to the Destinations.
- Click on the “New Destinations” and fill the required fields as mentioned below.
- Type: HTTP
- Description: Machine Learning APIs
- URL: https://sandbox.api.sap.com/ml
- Proxy Type: Internet
- Authentication: No Authentication
- Additional parameters:
- WebIDEEnabled = true
- Click on the Save.
An application programming interface key (API key) is a unique code that we can get from this link
[https://api.sap.com/getting-started], the SAP Leonardo Machine Learning Foundation – Functional
Services.
Then Next Step :
- Create a SAPUI5 application on the WEB IDE.
- Mention the sandbox API destination in the [neo-app.json] which created on the above step.
{
"path": "/ml-dest",
"target": {
"type": "destination",
"name": "ML_API"
},
"description": "SAP Leonardo Machine Learning API's"
}
],
"sendWelcomeFileRedirect": true,
"headerWhiteList": [
"APIKey"
]
}
Create a File (ml_apikey.json) under the “model”.
Fill with the below JSON content in the File[ml_apikey.json]:
{
"url_featureextraction": "/ml-dest/feature-extraction",
"url_similarityscoring": "/ml-dest/similarity-scoring",
"method": "POST",
"accept": "application/json",
"fileType": "zip,tar",
"mimeType": "application/x-zip-compressed,application/zip,application/octet-stream",
"APIKey":"<Provide here Unique API Key>"
}- Create the JSON File(Languages.json) under the “model” folder to specify the Languages.
Languages.json:
{
"Languages": [
{
"Code": "en",
"Name": "English"
},
{
"Code": "pt",
"Name": "Portuguese"
},
{
"Code": "fr",
"Name": "French"
},
{
"Code": "es",
"Name": "Spanish"
},
{
"Code": "hi",
"Name": "Hindi"
},
{
"Code": "zh",
"Name": "Chinese"
}
]
}
We need to specify the models in the app descriptor file (manifest.json):
"models": {
"i18n": {
"type": "sap.ui.model.resource.ResourceModel",
"settings": {
"bundleName": "ML.PRACTICE.i18n.i18n"
}
},
"ml_apikey": {
"type": "sap.ui.model.json.JSONModel",
"preload": true,
"uri": "model/ml_apikey.json"
},
"Languages": {
"type": "sap.ui.model.json.JSONModel",
"preload": true,
"uri": "model/Languages.json"
},- Write the UI code in the XML View which you want to show end-user.
View.xml:
<Page showHeader="false">
<content>
<tnt:ToolHeader>
<!--<Button icon="sap-icon://nav-back" type="Transparent" press="onNavBack"/>-->
<Label text="ML Translation" design="Bold" wrapping="false"/>
<ToolbarSpacer/>
<Label text="Languages"/>
<Select id="selectLanguages" change="OnSelect" items="{ path: 'Languages>/Languages',sorter: { path: ' Languages>Name' } }">
<core:Item key="{Languages>Code}" text="{Languages>Name}"/>
</Select>
</tnt:ToolHeader>
<f:SimpleForm id="idSimpleFormChange" editable="true" layout="ResponsiveGridLayout" title="{i18n>address}" labelSpanXL="4"
labelSpanL="3" labelSpanM="4" labelSpanS="12" adjustLabelSpan="false" emptySpanXL="0" emptySpanL="4" emptySpanM="0" emptySpanS="0"
columnsXL="2" columnsL="1" columnsM="1" singleContainerFullSize="false">
<f:content>
<Label id="idFullname" text="{i18n>Fullname}"/>
<Input id="name" value=""/>
<Label id="idAdd" text="{i18n>Address}"/>
<Input value=""></Input>
<Input value="">
<layoutData>
<l:GridData span="XL1 L2 M2 S4"/>
</layoutData>
</Input>
<Label id="idZipcode" text="{i18n>ZIPCodeCity}"/>
<Input value="">
<layoutData>
<l:GridData span="XL1 L2 M2 S4"/>
</layoutData>
</Input>
<Input value=""/>
</f:content>
</f:SimpleForm>
</content>
<footer>
<Bar id="idFooterBar">
<contentLeft>
<Button icon="sap-icon://hint" type="Ghost" press="onInfopress"/>
<ToggleButton id="idBHeaderToggle" icon="sap-icon://expand" tooltip="Show/Hide Header" type="Transparent" enabled="true" pressed="true"
press="onHeaderPress"/>
</contentLeft>
<contentRight>
<Button id="idContinue" text="{i18n>continue}" icon="sap-icon://step" press="onPressSearch" type="Emphasized"/>
<Button id="idBClear" text="{i18n>exit}" icon="sap-icon://system-exit-2" press="onPressClear" type="Transparent"/>
</contentRight>
</Bar>
</footer>
</Page>- In the i18n file given the text contains name-value pairs for each element.
Example(i18n):
title=Title
Fullname=Full name of the contact
Address=Street and number where the contact is located
ZIPCodeCity=ZIP Code and City
continue=Continue
exit=Exit
address= Address
In the controller.js file:
OnSelect: function () {
var that = this;
var i18nModel01 = that.getOwnerComponent().getModel("i18n").getResourceBundle();
var SourceText1 = i18nModel01.getText("Fullname");
var SourceText2 = i18nModel01.getText("Address");
var SourceText3 = i18nModel01.getText("ZIPCodeCity");
var SourceText4 = i18nModel01.getText("continue");
var SourceText5 = i18nModel01.getText("exit");
var SourceText6 = i18nModel01.getText("address");
var SourceID1 = "idFullname";
var SourceID2 = "idAdd";
var SourceID3 = "idZipcode";
var SourceID4 = "idContinue";
var SourceID5 = "idBClear";
var SourceID6 = "idSimpleFormChange";
var Array = [
[SourceText1, SourceID1],
[SourceText2, SourceID2],
[SourceText3, SourceID3],
[SourceText4, SourceID4],
[SourceText5, SourceID5],
[SourceText6, SourceID6]
];
if (this.getView().byId("selectLanguages").getSelectedItem().getKey() !== "en") {
if (Array) {
for (var i = 0; i < Array.length; i++) {
that._translateText(Array[i][1], Array[i][0]);}}}
else {
for (var i = 0; i < Array.length; i++) {
that.getView().byId(Array[i][1]).setText(Array[i][0]);
}
}
},
_translateText: function (FieldID, Value) {
var that = this;
var apiKey = this.getView().getModel("ml-apikey").getProperty("/APIKey");
var sLanguage = this.getView().byId("selectLanguages").getSelectedItem().getKey();
var data = JSON.stringify({
"sourceLanguage": "en",
"targetLanguages": [
sLanguage
],
"units": [{
"value": Value,
"key": "TEXT"
}]
});
var xhr = new XMLHttpRequest();
xhr.withCredentials = false;
xhr.addEventListener("readystatechange", function () {
if (this.readyState === this.DONE) {
var sTranslatedText = JSON.parse(this.responseText).units[0].translations[0].value;
that.getView().byId(FieldID).setText(sTranslatedText);
}
});
xhr.open("POST", "/ml-dest/translation/translation");
xhr.setRequestHeader("Content-Type", "application/json");
xhr.setRequestHeader("APIKey", apiKey);
xhr.send(data);
}
Output:
- Select the Language from the Select Box on the top right corner. Elements text will change accordingly.
French:
Spanish:
I hope this was a good and new learning experience for you and helped you in your implementation. If you have any questions please feel free to drop a comment below. I will be happy to answer them.
Thanks & Regards,
Prashanth
Nenhum comentário:
Postar um comentário