This brief (~1-2-hours) tutorial introduces developers to UI5 application development in TypeScript. It includes creating a basic application from the TypeScript template using the "easy-UI5" generator, TypeScript coding in regular UI controllers, as well as advanced topics like custom control development and using third-party libraries.
The technical requirements to follow the tutorial are:
- A current version of Node.js
- A code editor supporting TypeScript development (preferably the free Microsoft Visual Studio Code, which was used to create the tutorial)
Required knowledge:
- You should have basic Javascript knowledge to avoid blind copy&paste without knowing what's going on
- Basic UI5 knowledge is beneficial, as this tutorial focuses on the TypeScript side of things.
- TypeScript knowledge is not required. If interested, having a quick look e.g. at this brief TypeScript intro for JavaScript developers might let you know what to expect.
The tutorial consists of the following exercises. To start, just open the first link - you will be guided from there.
From the list, you can not only access each exercise directly, but also also browse the resulting sources and run the resulting app:
- Exercise 0 - Getting Started
- Exercise 1 - Create And Run Your Application (browse sources - run app)
- Exercise 2 - Create the Initial User Interface and set up Routing (browse sources - run app)
- Exercise 3 - Add Translated UI Texts (browse sources - run app)
- Exercise 4 - Enhance the User Interface and Use Formatters (browse sources - run app)
- Exercise 5 - Create a Second View (browse sources - run app)
- Exercise 6 - Load Incidence History Data (browse sources - run app)
- Exercise 7 - Create and Use a Custom Control (browse sources - run app)
- Exercise 8 - Using NPM Packages (browse sources - run app)
- Exercise 9 - Beautifying the Chart (browse sources - run app)
If you want to download the code for all the exercises, you can either download the entire repository as zip file and find the content in there below "ui5-typescript-tutorial-main/exercises/ex1/com.myorg.myapp" etc., or you can clone the repository using git.
The resulting app after each exercise can also be run from this page. It includes additional links to unoptimized versions of the app, which can be used to debug the original TypeScript sources.
As the Covid topic has been in global focus of attention for a long time now, the purpose of the application developed in this tutorial is to display Covid infection incidence data.
It uses an open-source API for the German Covid data to display the incidence for all states of Germany on the overview page and a line chart with the incidence history of the selected state on a detail page.
In Germany (and thus in the app), the commonly used term "incidence" is defined as: "number of detected infections per 100.000 persons within 7 days".
A fallback copy of the data ensures that the tutorial can still be used when the API no longer works.
This repository is provided as-is, without any support guarantees. However, you are welcome to report issues via the Issues tab and we'll see what we can do to fix them.
Copyright (c) 2022 SAP SE or an SAP affiliate company. All rights reserved. This project is licensed under the Apache Software License, version 2.0 except as noted otherwise in the LICENSE file.
The files inside the backup_data directory are created by the API copyright by Marlon Lückert and licensed under the CC-BY-4.0 license.