How to use API translate of SAP Leonardo?

user_10161972 0
Viewed 280

I need help with API translation of SAP Leonardo. I building a translation app for studing, and following the documentation a create the method translate:

translate: function () {
            //Create JSON Model with URL
            var oModel = new sap.ui.model.json.JSONModel();

            var langTo = this.getView().byId("idTo").getSelectedKey();
            var langFrom = this.getView().byId("idFrom").getSelectedKey();

            var textOld = this.getView().byId("idOldText").getValue();

            //API Key for API Sandbox
            var sHeaders = {
                "Content-Type": "application/json",
                "APIKey": "My api Key"
            };

            //Available Security Schemes for productive API Endpoints
            //OAuth 2.0

            //sending request
            //API endpoint for API sandbox 
            var oData = {
                "sourceLanguage": langTo,
                "targetLanguages": [
                    langFrom
                ],
                "units": [{
                    "value": textOld,
                    "key": "ANALYZE_SALES_DATA"
                }]
            };

            oModel.loadData("https://sandbox.api.sap.com/ml/translation/translation", oData, true, "POST", null, false, sHeaders);

            //Available API Endpoints
            //https://mlfproduction-machine-translation.cfapps.eu10.hana.ondemand.com
            //https://mlfproduction-machine-translation.cfapps.us10.hana.ondemand.com

            //You can assign the created data model to a View and UI5 controls can be bound to it. Please refer documentation available at the below link for more information.
            //https://sapui5.hana.ondemand.com/#docs/guide/96804e3315ff440aa0a50fd290805116.html#loio96804e3315ff440aa0a50fd290805116

            //The below code snippet for printing on the console is for testing/demonstration purpose only. This must not be done in real UI5 applications.
            oModel.attachRequestCompleted(function (oEvent) {
                var oData = oEvent.getSource().oData;
                // console.log(oData);
            });

        }

I used two selectBox for to get language keys both calls "idTo" and "idFrom". And I used too a input for get a text will be translate with id "idOldText". But nothing happen. the oData value always empty in the last instruction. I'm used SAP WEBIDE and I guess that it is not need configure IDE for to use the API.

Someone can help me?

sapui5 javascript
1 Answers

it would be helpful if you provide the error from your console. But I already have a feeling that this ends up in a cross site request, and thus will be blocked because of using a full qualified URL. Also your header whitelist is maybe missing.

Do it like this and it should work:

1) create a destination in SAP CP

enter image description here

2) create a new sapui5 project in SAP WebIDE and adapt neo-app.json by addin a new destination path and header whitelist your request headers

{
    "welcomeFile": "/webapp/index.html",
    "routes": [{
        "path": "/resources",
        "target": {
            "type": "service",
            "name": "sapui5",
            "entryPath": "/resources"
        },
        "description": "SAPUI5 Resources"
    }, {
        "path": "/test-resources",
        "target": {
            "type": "service",
            "name": "sapui5",
            "entryPath": "/test-resources"
        },
        "description": "SAPUI5 Test Resources"
    }, {
        "path": "/ml-dest",
        "target": {
            "type": "destination",
            "name": "sapui5ml-api"
        },
        "description": "ML API destination"
    }],
    "sendWelcomeFileRedirect": true,
    "headerWhiteList": [
        "APIKey", "Accept", "Content-Type"
    ]
}

3) add your method and post the request || possible issues in your version: JSON object and request headers

onInit: function () {

    var oModel = new sap.ui.model.json.JSONModel();

    var sHeaders = {
        "Content-Type": "application/json",
        "Accept": "application/json",
        "APIKey": "<<yourAPIKey>>"
    };

    var oData = {
        "sourceLanguage": "en",
        "targetLanguages": [
            "de"
        ],
        "units": [{
            "value": "I would like to analyze my sales data.",
            "key": "ANALYZE_SALES_DATA"
        }]
    };

    var ODataJSON = JSON.stringify(oData);

    oModel.loadData("/ml-dest/translation/translation", ODataJSON, true, "POST", null, false, sHeaders);
    oModel.attachRequestCompleted(function (oEvent) {
        var oData = oEvent.getSource().oData;
        console.log(oData.units[0].translations[0]);
    });

}

4) get a successful response object when loading your app :-)

enter image description here

References used:

user_9093880
Related