Heads up: If your joining us here, this is Exercise 2 of 3 in the SAP Cloud Platform Technical Academy (Canadian Roadshow & SAP Blogs Edition). That means these tutorials or “exercises” are extremely well-documented and will walk you through every step with screenshots and instructions.
Summary of Exercise:
In this exercise you'll import your high-fidelity prototype from SAP BUILD in SAP Web IDE. You'll incorporate UI Logic to the Controller to advance your prototype into a full-functioning responsive application. The application will be able to communicate with API's on the SAP Cloud Platform, prompt users with Dialog Alerts, and translate texts from English to 7 (seven) different languages. You'll also deploy your application to run on the SAP Cloud Platform, which will then be accessible via a simple URL.
What will you use?
- SAP Cloud Platform
- SAP Web IDE
What will you learn?
- Controller implementation for the SAPUI5 Model-View-Controller concept
- Dropdown List control
- Button-press
- REST API Handling
- Import a project into the SAP Web IDE Workspace
- Navigate through the SAP API Business Hub
- Generate an API Key from the SAP API Business Hub
- Application Testing in SAP Web IDE
- Deploy a HTML5 Application to SAP Cloud Platform
Result
Let's get started!
First, we need to access SAP Web IDE from our Services in the SAP Cloud Platform Cockpit.
From the left-hand side menu, Select Services and filter to the DevOps category. Select Web IDE. Do not select SAP Web IDE, Multi-Cloud Version.
The Multi-Cloud Version is based on a more capable and scalable open-source server-side foundation, and offers advanced features that are not available in the regular SAP Web IDE version. (If you would like to learn more about it, select here).
Once you've selected Web IDE, you'll see the service overview page. Simply select Go to Service to launch Web IDE.
Import your SAP BUILD prototype into SAP Web IDE
Now that you're in SAP Web IDE, you'll notice a few options down the left-hand side of the screen. You're currently on the Welcome screen. Below the Welcome (House) button, you have your Development (Workspace, </>), Learning Center, and Preferences.
For this exercise we'll do our work from Development (</>). Select </>.
Navigate to File > Import > From File System.
This will open the file explorer for your personal computer. Select our renamed SAP BUILD .ZIP file named sapTranslate.zip.
Ensure your import is as follows:
File: sapTranslate.zip
Import to: /sapTranslate
Extract Archive: ✓ (Checked)
Select OK.
Once your import is complete, you'll notice the sapTranslate folder under the larger Workspace folder. This means the .ZIP file has imported the structure of your application (which was created in SAP BUILD) and established it in SAP Web IDE.
Add onto the Controller
Incredible! That means you created 90% of your application already without writing a single line of code! Well, that ends here. Let's open the controller of the application under the sub-folder called controller. Open tranlateui.controller.js.
If you noticed, the controller is called "translateui". Remember, we gave it that name in SAP BUILD when we renamed the page template. That change cascaded down into the structure of this application and is reflected in the view and controller.
You're now going to add all of the remaining logic to your application. Create a few spaces between return BaseController.extend("generated.app.controller.translateui", { and handleRouteMatched: function(oEvent) { (between line 7 and 8).
Paste or write the following code to your controller:
/*New Stuff*/
translateButtonPressed: function() {
var self = this;
var aLangName = ["German", "Spanish (Spain)", "French (France)", "Italian", "Japanese",
"Portuguese (Brazil)", "Chinese (Simplified)"
];
var aLangCode = ["de", "es", "fr", "it", "ja", "pt", "zh"];
var oldText = this.getView().byId("OldText").getValue();
var newLang = this.getView().byId("NewLang").getSelectedItem();
if (newLang !== null) {
//var oldLangCode = aLangCode[aLangName.indexOf(oldLang.mProperties.text)];
var newLangCode = aLangCode[aLangName.indexOf(newLang.mProperties.text)];
var data =
"{\r\n \"sourceLanguage\":en,\r\n \"targetLanguages\": [\r\n " + newLangCode +
" \r\n ],\r\n \"units\": [\r\n {\r\n \"value\":\"" + oldText + "\"\r\n }\r\n ]\r\n}";
var xhr = new XMLHttpRequest();
xhr.withCredentials = true;
xhr.addEventListener("readystatechange", function() {
if (this.readyState === this.DONE) {
sap.m.MessageToast.show("Translated!");
self.getView().byId("NewText").setValue(JSON.parse(this.responseText).units[0].translations[0].value);
}
});
//setting request method
xhr.open("POST", "https://sandbox.api.sap.com/translationhub/api/v1/translate");
//adding request headers
xhr.setRequestHeader("Content-Type", "string");
xhr.setRequestHeader("Accept", "application/json; charset=utf-8");
xhr.setRequestHeader("APIKey", "YOUR_API_KEY");
//sending request
xhr.send(data);
} else {
var dialog = new sap.m.Dialog({
title: 'Missing Language',
type: 'Message',
state: 'Error',
content: new sap.m.Text({
text: "Please select a language."
}),
beginButton: new sap.m.Button({
text: 'OK',
press: function() {
dialog.close();
}
}),
afterClose: function() {
dialog.destroy();
}
});
dialog.open();
}
},
/*End of New Stuff*/After you paste/write the code, open the context menu (by right-clicking anywhere on the code) and select Beautify to clean up your code structure.
One thing to note: We've added sensitive information, such as the endpoint URL and the API Key directly into the controller. In a typical enterprise application, we would leverage Destinations under Connectivity, from the SAP Cloud Platform Cockpit.
Connectivity destinations are part of SAP Cloud Platform Connectivity and are used for the outbound communication of a cloud application to a remote system. They contain the connection details for the remote communication of an application. Connectivity destinations are represented by symbolic names that are used by on-demand applications to refer to remote connections. The result is an object that contains customer-specific configuration details, such as the URL of the remote system or service, the authentication type, and the relative credentials. This is much more secure than our method. Due to time constraints of the in-person Workshop, we leverage the non-recommended and less secure route to save time.
Add our API Key from the SAP API Business Hub
Without closing SAP Web IDE, open a new tab in your browser, and navigate to api.sap.com. This is the SAP API Business Hub. The SAP API Business Hub is a Web-based application, a one-stop shop for all cloud integration content. You can also find sample apps, documentation, and links to demos.
We're going to generate an API Key that will allow our application to communicate with the SAP API. An application programming interface key (API key) is a code passed in by computer programs calling an application programming interface (API) to identify the calling program, its developer, or its user to the Web site.
Select Browse (with the magnifying glass icon next to it) in the middle-left side of your screen. It will open the list of all available APIs, Integration Flows (iFlows), and sample apps. Simply search "translate".
Select the "SAP Translation Hub". This will take you to the overview page of the REST API (ensure you're signed in by selecting Login on the top-right corner of your screen)
From the Artifacts tab, select "SAP Translation Hub" again.
Now, on this screen you will see a key icon on the top-right. By selecting that icon, you will be able to generate your API Key to use this API in your application. Select the Key icon.
Copy API Key; we will use it in the next step.
Navigate back to your SAP Web IDE window > controller sub-folder (in sapTranslate) >open translateui.controller.js. Find the part of your controller that requires "YOUR_API_KEY" (possibly on line 37). Paste the API Key in between the open/close quotes.
Your controller is now complete. We'll now build on top of our View.
Reference your Controller in the View
Now that we've added the remaining logic, we need to link it to the different parts of the view. What's the view? The view is the part of our application the end-user sees. For example, the Input field, a Dialog Alert, the target Language from the Dropdown List, and the translated text. These are all parts of the application that the end-user sees and uses to operate the application.
Navigate to the view sub-folder and open translateui.view.xml.
We're going to be linking the View to the Controller by adding IDs to specific controls in the application. For example, our application has target text that needs translating, a language in needs to be translated to, a Button to trigger the call to the REST API, and finally the result (the translated texts).
To start, let's add the following ID to our Input control (possibly on line 15). This is the control where the end-user enters the text that requires translation. It's also the control with the Placeholder, "What would you like to translate?".
id="OldText"
Next, let's add the following ID to our ComboBox (also known as the Dropdown List, possibly on line 23). This is the control that will allow the end-user to select their target language.
id="NewLang"
We'll now add the following ID to our other Input box (possibly on line 34). This is where the translated text will appear.
id="NewText"
Lastly, we'll add the following ID to our Button (possibly on line 40). We're adding the power to our Button that will allow it to initiate a call to the REST API with the text that needs to be translated, then return the translated text to us. We're also allowing the button to detect whether the user has selected a language when they select "Translate". If they haven't, then our application will alert them with a Dialog Alert box.
press="translateButtonPressed"
Test your SAP Translate application in SAP Web IDE
Congratulations! You've completed your SAP Translate application. But before we deploy it, it's important that we test it. SAP Web IDE has a built-in application testing feature.
Select your sapTranslate folder in your Development Workspace. Once it's selected, in the top toolbar on your screen, select Run > Run As > Web Application.
Select testFLPService.html.
Now, SAP Web IDE will open a simulated version of your application in sandbox in a new tab/window.
Feel free to test out its features (including the Dialog Alert box when you don't select a language). It's important to know everything works before we deploy it to the SAP Cloud Platform.
Deploy your SAP Translate application to the SAP Cloud Platform
Your app works - great! Now we can deploy it. Close the testing window and navigate back to SAP Web IDE. Open the context menu (by right-clicking on the sapTranslate folder). Select Deploy > Deploy to SAP Cloud Platform.
Verify your information and the Activate box is checked. Select Deploy.
If all is successful, you should see the message "Successfully Deployed". Select Open the active version of the application.
This is open the live URL to your application. Feel free to test it on your desktop and mobile. Because we used the Responsive page template in SAP BUILD during Exercise #1, our application will automatically resize based on the screen's resolution.
Optional: Where to find your application's URL from the SAP Cloud Platform Cockpit
From the SAP Cloud Platform Cockpit, select Applications > HTML Applications from the left-hand side menu.
You'll see a list of all of your deployed HTML5 applications, including saptranslate. Select saptranslate. Once selected, you find the Application URL.
Congratulations- you've completed Exercise #2! Next, learn how to create, configure, and register your application to a SAP Fiori Launchpad.
- SAP Managed Tags:
11 Comments
