SAP-samples/ui5-typescript-tutorial

ui5-typescript-tutorial - Learn App Development in UI5 with TypeScript

Updated 2023 tutorial for writing UI5 apps in TypeScript. A 100-minute video walkthrough of this tutorial can be found on YouTube.

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" 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 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: 🎉 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 and OpenStreetMap's "Nominatim" geolocation service.

These slides 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 (preferably 18.x or 20.x)
• A code editor supporting TypeScript development (preferably the free Microsoft Visual Studio Code, 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 lets you know what to expect.

Exercises - Get Started!

The tutorial consists of the following exercises. To start, just open the first link - you will be guided from there.

From this list, you can not only access each exercise directly, but also browse the resulting sources and run the resulting app:

• Exercise 0 - Get Prepared
• Exercise 1 - Create And Run Your Application (browse sources - run app)
• Exercise 2 - Create the Initial User Interface and Load Data (browse sources - run app)
• Exercise 3 - React on User Input (browse sources - run app)
• Exercise 4 - Use Third-Party NPM Packages (browse sources - run app)
• Exercise 5 - Create and Use a Custom Control (browse sources - run app)
• Exercise 6 - Testing (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.

References

Used APIs

• Weather: https://open-meteo.com/
  • Sample request: https://api.open-meteo.com/v1/forecast?latitude=49.31&longitude=8.64&current_weather=true
  • Sample request with forecast: https://api.open-meteo.com/v1/forecast?latitude=49.31&longitude=8.64&current_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 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 file.