https://github.com/sap-samples/ui5-typescript-tutorial
Tutorial for building UI5 applications with TypeScript.
https://github.com/sap-samples/ui5-typescript-tutorial
open-source openui5 sample sample-code sapui5 typescript ui5
Last synced: 6 months ago
JSON representation
Tutorial for building UI5 applications with TypeScript.
- Host: GitHub
- URL: https://github.com/sap-samples/ui5-typescript-tutorial
- Owner: SAP-samples
- License: apache-2.0
- Created: 2021-12-17T19:18:58.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2025-03-07T14:06:11.000Z (7 months ago)
- Last Synced: 2025-03-30T04:09:48.627Z (7 months ago)
- Topics: open-source, openui5, sample, sample-code, sapui5, typescript, ui5
- Language: TypeScript
- Homepage: https://sap.github.io/ui5-typescript/
- Size: 5.03 MB
- Stars: 87
- Watchers: 29
- Forks: 19
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ui5-typescript-tutorial - Learn App Development in UI5 with TypeScript
[](https://api.reuse.software/info/github.com/SAP-samples/ui5-typescript-tutorial)
Updated 2023 tutorial for writing UI5 apps in TypeScript. A 100-minute video walkthrough of this tutorial can be found on [YouTube](https://www.youtube.com/watch?v=CRKNIiXZN6U).
## Overview
This brief (~2 hours) tutorial introduces developers to *using TypeScript for UI5 application development*. It is a TypeScript introduction, not a UI5 introduction. The tutorial includes:
- Creating a basic application from the TypeScript template using the ["Easy UI5"](https://github.com/SAP/generator-easy-ui5) generator,
- TypeScript coding in regular UI controllers,
- Testing
as well as advanced topics like
- Custom control development and
- Using third-party libraries
> This tutorial is **NOT** meant to create an impressive shiny app, but to teach the most important practical TypeScript knowledge with the least possible coding effort.
You learn way *more* than in the [original 2022 tutorial](https://github.com/SAP-samples/ui5-typescript-tutorial/tree/main_2022) in probably *less* time with *far less* coding. The resulting app, however, is hence also far less impressive than the one resulting from the previous tutorial. Just to have expectations managed.
Significant changes/improvements regarding UI5's TypeScript support since the summer 2022 version of this tutorial are explicitly marked with: :tada: **NEW**.
The developed app simply displays the current weather for the location entered by the user. To do so, it uses the free weather service [Open Meteo](https://open-meteo.com) and [OpenStreetMap's "Nominatim" geolocation service](https://nominatim.openstreetmap.org/ui/about.html).
[These slides](https://sap-samples.github.io/ui5-typescript-tutorial/resources/2023-07-06_UI5con-TypeScript-Workshop.pdf) were used at UI5con 2023 to give a short intro on TypeScript and the UI5 setup for using it.
## Requirements
### Technical Requirements
* A current version of [Node.js](https://nodejs.org/) (preferably 18.x or 20.x)
* A code editor supporting TypeScript development (preferably the free [Microsoft Visual Studio Code](https://code.visualstudio.com/), as it was used to create the tutorial)
### Required Knowledge
* You need some Javascript knowledge to avoid blind copy&paste without knowing what's going on.
* You should have some UI5 knowledge, 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](https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html) lets you know what to expect.
## Exercises - Get Started!
The tutorial consists of the following exercises. To start, just [open the first link](exercises/ex0/) - you will be guided from there.
From this list, you can not only access each exercise directly, but also also browse the resulting sources and run the resulting app:
* [Exercise 0 - Get Prepared](exercises/ex0/)
* [Exercise 1 - Create And Run Your Application](exercises/ex1/) (*[browse sources](exercises/ex1/com.myorg.myapp) - [run app](https://sap-samples.github.io/ui5-typescript-tutorial/exercises/ex1/)*)
* [Exercise 2 - Create the Initial User Interface and Load Data](exercises/ex2/) (*[browse sources](exercises/ex2/com.myorg.myapp) - [run app](https://sap-samples.github.io/ui5-typescript-tutorial/exercises/ex2/)*)
* [Exercise 3 - React on User Input](exercises/ex3/) (*[browse sources](exercises/ex3/com.myorg.myapp) - [run app](https://sap-samples.github.io/ui5-typescript-tutorial/exercises/ex3/)*)
* [Exercise 4 - Use Third-Party NPM Packages](exercises/ex4/) (*[browse sources](exercises/ex4/com.myorg.myapp) - [run app](https://sap-samples.github.io/ui5-typescript-tutorial/exercises/ex4/)*)
* [Exercise 5 - Create and Use a Custom Control](exercises/ex5/) (*[browse sources](exercises/ex5/com.myorg.myapp) - [run app](https://sap-samples.github.io/ui5-typescript-tutorial/exercises/ex5/)*)
* [Exercise 6 - Testing](exercises/ex6/) (*[browse sources](exercises/ex6/com.myorg.myapp) - [run app](https://sap-samples.github.io/ui5-typescript-tutorial/exercises/ex6/)*)
If you want to download the code for all the exercises, you can either [download the entire repository as zip file](https://github.com/SAP-samples/ui5-typescript-tutorial/archive/refs/heads/main.zip) and find the content in there below "ui5-typescript-tutorial-main/exercises/ex1/com.myorg.myapp" etc., or you can clone the [repository](https://github.com/SAP-samples/ui5-typescript-tutorial) using git.
The resulting app after each exercise can also be [run from this page](https://sap-samples.github.io/ui5-typescript-tutorial). It includes additional links to unoptimized versions of the app, which can be used to debug the original TypeScript sources.
## References
### Used APIs
- Weather: https://open-meteo.com/
- Sample request: https://api.open-meteo.com/v1/forecast?latitude=49.31&longitude=8.64¤t_weather=true
- Sample request with forecast: https://api.open-meteo.com/v1/forecast?latitude=49.31&longitude=8.64¤t_weather=true&hourly=temperature_2m,relativehumidity_2m,windspeed_10m
- Geolocation: https://nominatim.openstreetmap.org/ui/about.html
### Other References
- https://www.windy.com is a nice site to find locations with different wind directions
## How to obtain support
This repository is provided as-is, without any support guarantees. However, you are welcome to report issues via the [Issues](../../issues) tab and we'll see what we can do to fix them.
## License
Copyright (c) 2023 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](LICENSES/Apache-2.0.txt) file.