Welcome to your learning journey to develop evolved Web apps with SAPUI5. This repository contains the code for all units of the openSAP course Evolved Web Apps with SAPUI5 (ui52). Please follow the setup instructions below to get started.
Note: The solutions for our predecessor course Developing Web Apps with SAPUI5 (ui51) have been moved to branch ui51.
In the master branch, you can find:
w[x]u[y]: Solutions to all the course exercises (each course unit is located in a separate folder, e.g.: w3u4 = week 3 unit 4).demo: Content that is shown throughout the course units, but not an essential part of the course exercises.import: Files that you have to import for certain exercises. We will give you instructions in the course exercises.
In the gh_pages branch you can find:
Rufus.js: Our friendly assistant to check your exercise coding. Onboarding instructions can be found below.movies: The Find Movies app resulting from the exercises in week 2.orders: The Browse Orders app resulting from the exercises in weeks 3 and 4.
You can import this repository to SAP Web IDE or run it standalone. Choose the scenario that fits your needs:
-
Right-click on your workspace, and choose Git > Clone Repository.
-
In the dialog Clone Git Repository, enter the URL
https://github.com/SAP/openSAP-ui5-course.git. -
In the Git Ignore System Files dialog, choose Do it later.
-
A folder
openSAP-ui5-courseis added to your workspace. -
Open the index.html file to get a searchable list of course exercises
-
In the
webappfolder for the unit your choice (e.g.w2u3\webapp), right-click on theindex.htmlormockServer.htmlfile, and choose Run > Run as Web Application to browse the course exercises.
- Clone this repository to your local machine:
git clone https://github.com/SAP/openSAP-ui5-course.git- Go to the repository, and install the UI5 Build and Development Tooling as well as other dependencies to run the course repository:
npm install- Run a local webserver to browse the course exercises. A browser window displaying all available units will open automatically.
Note: The repository is using OpenUI5 npm packages - with week 3 we add SAPUI5-exclusive controls which will not run in this scenario. You can switch the bootstrap to our SAUPUI5 CDN to make them work:
https://ui5.sap.com/resources/sap-ui-core.js
Rufus, your personal assistant, will join you on your learning journey. He can help you complete the coding exercises and find errors in your code.
To onboard him, add the following line to your HTML entry point (e.g. index.html, mockServer.html, flpSandbox.html) at the end of the <head> tag:
<script src="https://SAP.github.io/openSAP-ui5-course/Rufus.js"></script>You will see Rufus in the the lower left area of your app. Activate him, and select a course unit you would like to check. In "Week 1 - Unit 6: Getting Ready for the Course Exercises", we will give you more information on this.
Nerd facts: Rufus is implemented in UI5 as an OPA plugin and runs automated integration tests to check your exercises. Have a look at the source code if you'd like to find out more.
-
Locate the folder
w[x]u[y]that contains the result of the course unit you are working on in this repository.-
If you want to reset the whole exercise, first backup your
webappfolder by right-clicking on the project and choosing Edit > Rename. -
If you want to start from a specific exercise, first create a new project folder by right-clicking on the workspace and selecting New > Folder
-
-
Copy the files or folders of the exercise you wish over to your current project folder as needed. Make sure you don't overwrite files you want to keep.
-
Run the app to verify that the reset worked as expected: Right-click on the
index.html, and choose Run > Run as Web Application.
If you spot any issues with the code or if you find a bug, please create an issue or a pull request, and we will take care of it.
Thank you,
The course team
All example code in this repository is licensed under the Apache Software License, Version 2.0 except as noted otherwise in the LICENSE file.