Tutorial Overview: Translate an HTML5 App with SAP Translation Hub
Want to get some hands-on experience with SAP Translation Hub? Our tutorial explains how to translate a simple HTML5 Web shop that has a Fiori UI.
Before You Get Started
For an overview of SAP Translation Hub, check out the documentation: SAP Translation Hub.
To avoid any compatibility issues, use a broswer that is supported by SAP Web IDE – see Opening SAP Web IDE.
Part 1: Create a Developer Account Using a Trial Account on SAP Cloud Platform and Enable the SAP Translation Hub Service
Register with SAP ID Service and create a free trial account on SAP Cloud Platform.
In the service catalog, enable the SAP Translation Hub service.
Head over to the exercise at Part 1: Create a Developer Account on the Trial Landscape and Enable SAP Translation Hub.
Part 2: Use SAP Web IDE to Create a Simple Fiori App and to Search for UI Texts
Open SAP Web IDE from your trial account on SAP Cloud Platform and import a simple HTML5 Web shop app with a Fiori UI.
Use the integrated suggestion service from SAP Translation Hub to search for new UI texts, and deploy your project to SAP Cloud Platform.
Head over to the exercise at Part 2: Use SAP Web IDE to Create a Fiori App and to Search for UI Texts.
Part 3: Create a Translation Project and Translate Your Fiori App
Use the SAP Translation Hub UI to create a new translation project, which contains metadata such as the required target languages. Use the translation project to translate the texts in the properties file that is referenced in your translation project, and edit the resulting translations. Pull the translations from the git repository to your project in SAP Web IDE.
Head over to the exercise at Part 3: Create a Translation Project and Translate Your Fiori App.
Part 4: Change Your App and Start the Translation Process for Your Fiori App Again (Optional)
Add a new Feedback button to your app, and use SAP Translation Hub to translate the new text.
Head over to the exercise at Part 4: Change Your App and Start the Translation Process for Your Fiori App Again.