{"id":20484806,"url":"https://github.com/sap-samples/ui5-typescript-tutorial","last_synced_at":"2025-04-06T05:15:54.999Z","repository":{"id":38822409,"uuid":"439437556","full_name":"SAP-samples/ui5-typescript-tutorial","owner":"SAP-samples","description":"Tutorial for building UI5 applications with TypeScript.","archived":false,"fork":false,"pushed_at":"2025-03-07T14:06:11.000Z","size":5279,"stargazers_count":87,"open_issues_count":0,"forks_count":19,"subscribers_count":29,"default_branch":"main","last_synced_at":"2025-03-30T04:09:48.627Z","etag":null,"topics":["open-source","openui5","sample","sample-code","sapui5","typescript","ui5"],"latest_commit_sha":null,"homepage":"https://sap.github.io/ui5-typescript/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SAP-samples.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-12-17T19:18:58.000Z","updated_at":"2025-03-21T19:06:32.000Z","dependencies_parsed_at":"2023-01-30T03:16:02.331Z","dependency_job_id":"47d7be4e-ca35-4885-8a92-7ea489496859","html_url":"https://github.com/SAP-samples/ui5-typescript-tutorial","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SAP-samples%2Fui5-typescript-tutorial","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SAP-samples%2Fui5-typescript-tutorial/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SAP-samples%2Fui5-typescript-tutorial/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SAP-samples%2Fui5-typescript-tutorial/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SAP-samples","download_url":"https://codeload.github.com/SAP-samples/ui5-typescript-tutorial/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247436286,"owners_count":20938533,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["open-source","openui5","sample","sample-code","sapui5","typescript","ui5"],"created_at":"2024-11-15T16:25:50.418Z","updated_at":"2025-04-06T05:15:54.978Z","avatar_url":"https://github.com/SAP-samples.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ui5-typescript-tutorial - Learn App Development in UI5 with TypeScript\n\n[![REUSE status](https://api.reuse.software/badge/github.com/SAP-samples/ui5-typescript-tutorial)](https://api.reuse.software/info/github.com/SAP-samples/ui5-typescript-tutorial)\n\nUpdated 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).\n\n## Overview\n\nThis 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:\n- Creating a basic application from the TypeScript template using the [\"Easy UI5\"](https://github.com/SAP/generator-easy-ui5) generator,\n- TypeScript coding in regular UI controllers,\n- Testing\n\nas well as advanced topics like\n- Custom control development and \n- Using third-party libraries\n\n\u003e 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.\u003cbr\u003e\nYou 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.\n\nSignificant changes/improvements regarding UI5's TypeScript support since the summer 2022 version of this tutorial are explicitly marked with: :tada: **NEW**.\n\nThe 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).\n\n[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.\n\n## Requirements\n\n### Technical Requirements\n\n* A current version of [Node.js](https://nodejs.org/) (preferably 18.x or 20.x)\n* 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)\n\n### Required Knowledge\n\n* You need some Javascript knowledge to avoid blind copy\u0026paste without knowing what's going on.\n* You should have some UI5 knowledge, as this tutorial focuses on the TypeScript side of things.\n* 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.\n\n## Exercises - Get Started!\n\nThe tutorial consists of the following exercises. To start, just [open the first link](exercises/ex0/) - you will be guided from there.\n\nFrom this list, you can not only access each exercise directly, but also also browse the resulting sources and run the resulting app:\n* [Exercise 0 - Get Prepared](exercises/ex0/)\n* [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/)*)\n* [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/)*)\n* [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/)*)\n* [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/)*)\n* [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/)*)\n* [Exercise 6 - Testing](exercises/ex6/) (*[browse sources](exercises/ex6/com.myorg.myapp) - [run app](https://sap-samples.github.io/ui5-typescript-tutorial/exercises/ex6/)*)\n\nIf 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.\u003cbr\u003e\n\nThe 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.\n\n## References\n\n### Used APIs\n\n- Weather: https://open-meteo.com/\n  - Sample request: https://api.open-meteo.com/v1/forecast?latitude=49.31\u0026longitude=8.64\u0026current_weather=true\n  - Sample request with forecast: https://api.open-meteo.com/v1/forecast?latitude=49.31\u0026longitude=8.64\u0026current_weather=true\u0026hourly=temperature_2m,relativehumidity_2m,windspeed_10m\n- Geolocation: https://nominatim.openstreetmap.org/ui/about.html\n\n\u003c!--  NOT USED RIGHT NOW\n### Weather interpretation codes\nSee https://open-meteo.com/en/docs/dwd-api#weathervariables\n\nCodes seem to be a subset of *\"Present weather reported from a manned weather station\"* (https://marswiki.jrc.ec.europa.eu/agri4castwiki/images/a/ad/WMO_306_VolI1_en.pdf, page 414).\n\nInterpretation:\n- 0\tClear sky\n- 1, 2, 3\tMainly clear, partly cloudy, and overcast\n- 45, 48\tFog and depositing rime fog\n- 51, 53, 55\tDrizzle: Light, moderate, and dense intensity\n- 56, 57\tFreezing Drizzle: Light and dense intensity\n- 61, 63, 65\tRain: Slight, moderate and heavy intensity\n- 66, 67\tFreezing Rain: Light and heavy intensity\n- 71, 73, 75\tSnow fall: Slight, moderate, and heavy intensity\n- 77\tSnow grains\n- 80, 81, 82\tRain showers: Slight, moderate, and violent\n- 85, 86\tSnow showers slight and heavy\n- 95 *\tThunderstorm: Slight or moderate\n- 96, 99 *\tThunderstorm with slight and heavy hail\n--\u003e\n### Other References\n- https://www.windy.com is a nice site to find locations with different wind directions\n\n## How to obtain support\n\nThis 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.\n\n## License\n\nCopyright (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.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsap-samples%2Fui5-typescript-tutorial","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsap-samples%2Fui5-typescript-tutorial","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsap-samples%2Fui5-typescript-tutorial/lists"}