sap-samples / ui5-typescript-tutorial Goto Github PK

View Code? Open in Web Editor NEW

75.0 30.0 17.0 5.15 MB

Tutorial for building UI5 applications with TypeScript.

Home Page: https://sap.github.io/ui5-typescript/

License: Apache License 2.0

JavaScript 11.68% TypeScript 62.00% HTML 26.33%

sample sample-code ui5 openui5 sapui5 typescript open-source

ui5-typescript-tutorial's Introduction

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 also browse the resulting sources and run the resulting 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

ui5-typescript-tutorial's People

Contributors

Stargazers

Watchers

Forkers

hardl hjudgesac etiiir jimixkartin azzamkilic fabionascimento isabella232 jeroenroels tobiashofmann pannisoft-reforce reforceconsulting ricardomarcondes bpawanchand raviji madapepmindset yns-jns duclc2301

ui5-typescript-tutorial's Issues

Error: env.lookup(...).filter is not a function

Hello everyone,

I'm trying to create new project using ts-app but when I installed with yo easy-ui5 ts-app , I got the error env.lookup(...).filter is not a function like pic below. I used node version 21.2.0 and easy-ui5 version 3.6.3

So, I can't know how to fix that. If you know how to fix, please share me. Thank you so much!

Issue to run script karma in ex6

Hi,

in ex6, when running "npm run karma" one get the following error message and the OPA test fails:
2024-06-26 19:52:58.544000 Unable to load the component with the name: com.myorg.myapp
Opa timeout after 15 seconds
This is what Opa logged:
Executing OPA check function on controls null - sap.ui.test.Opa5
Check function is:
function() {
if (!mPromiseState.started) {
mPromiseState.started = true;
oPromise.then(function () {
mPromiseState.done = true;
}, function (error) {
mPromiseState.errorMessage = "Error while waiting for promise scheduled on flow" +
(error ? ", details: " + getErrorMessage(error) : "");
});
}
if (mPromiseState.errorMessage) {
throw new Error(mPromiseState.errorMessage);
} else {
return !!mPromiseState.done;
}
} - sap.ui.test.Opa5
Result of check function is: false - sap.ui.test.Opa5
Callstack:
at MainPage._schedulePromiseOnFlow (http://localhost:9876/base/webapp/resources/sap/ui/test/Opa.js:682:16)
at oStartComponentOptions.success (http://localhost:9876/base/webapp/resources/sap/ui/test/Opa5.js:201:42)
at oOptionsPassedToOpa.success (http://localhost:9876/base/webapp/resources/sap/ui/test/Opa5.js:852:24)
at MainPage. (http://localhost:9876/base/webapp/resources/sap/ui/test/Opa.js:612:24)
at opaCheck (http://localhost:9876/base/webapp/resources/sap/ui/test/Opa.js:54:18)
at internalWait (http://localhost:9876/base/webapp/resources/sap/ui/test/Opa.js:48:3)
at http://localhost:9876/base/webapp/resources/sap/ui/test/Opa.js:103:4
Callstack:
at MainPage.iStartMyUIComponent (http://localhost:9876/base/webapp/resources/sap/ui/test/Opa5.js:205:9)
at Object. (http://localhost:9876/base/webapp/test/integration/HelloJourney.js:12:19)
at Object. (http://localhost:9876/base/webapp/resources/sap/ui/test/opaQunit.js:239:21)
at runTest (http://localhost:9876/base/webapp/resources/sap/ui/thirdparty/qunit-2.js:1457:30)
at Test.run (http://localhost:9876/base/webapp/resources/sap/ui/thirdparty/qunit-2.js:1443:6)
at http://localhost:9876/base/webapp/resources/sap/ui/thirdparty/qunit-2.js:1635:12
at Object.advance (http://localhost:9876/base/webapp/resources/sap/ui/thirdparty/qunit-2.js:1120:26) - Opa sap.ui.test.Opa

Please let me know in case you are able to solve tjis.
Thanks and regards,
Marie

Exercise 8: Chart is not displayed

Hi Andreas,
thank you very much for this excellent tutorial. I've learned a lot in it and code completion for UI5 in Visual Studio Code is a great help. In particular I appreciate the precise explanations and the background given. However I do not believe that anyone can do the tutorial in 1-2- hours, besides perhaps an android.

I found one thing ...
After I completed exercise 8, the chart was not displayed for me. The reason was that the line import { chart } from "chart.js"; in the file src/control/LineChart.ts needs to be changed, e.g. into import chart from 'chart.js/auto'; according to https://www.chartjs.org/docs/latest/getting-started/integration.html#bundlers-webpack-rollup-etc .

Better is

// See https://www.chartjs.org/docs/latest/getting-started/integration.html#bundlers-webpack-rollup-etc
// import Chart from 'chart.js/auto';
import { Chart, registerables } from 'chart.js';
Chart.register(...registerables);

The problem occurs for "ui5-tooling-modules": "^0.3.0", but not for "ui5-tooling-modules": "^0.1.3"

Kind regards,
Martin
: )

Failed to resolve dependencies

Hi,
I cannot run exercise 8 due to the error

[rl-reuse_tool-4] Violation against OSS Rules of Play

A violation against the OSS Rules of Play has been detected.

Rule ID: rl-reuse_tool-4
Explanation: Is it compliant with REUSE rules? No

Find more information at: https://sap.github.io/fosstars-rating-core/oss_rules_of_play_rating.html

Problems with the include of axios

Hello my problem has only marginally something to do with the example.
The problem is this:
I am trying to include Axios as npm package.
i installed it with npm install axios -D and included it with import axios from 'axios';
This works also so far.
But the ui5-tooling-module delivers the node version and not the browser version.

So my app crashes because require is not found.

What can i do?

thanks in advance

OPenAI API integration fails

Hello ,

I was following all the exercises related to TS and UI5 and it was really a very . I was able to quickly understand . However, when I am trying to apply few variations to the provided exercises especially ex4 I was trying to make use of third-party API of openai in my application and followed the steps to include UI5 tooling , and also by enhancing the ui5.yaml file by adding custom task and custom middleware. However, when I executed the locahost:8080/resources/core.js it says couldn't find the provided resource. Below is the sample code

Error

Can some one help me here

Thanks
Pavan

manifest.json not found

Hi! I followed the whole tutorial and it was awesome! Thanks!

The only problem I faced was the GET manifest.json which is return with a 404 Not Found. The Chrome console shows this message:

It's not needed to call IconPool.insertFontFaceStyle to insert font-face for the predefined icon font SAP-icons because the font-face is included in the library.css of sap.ui.core -

The files not found were:

My package.json is:

{
	"name": "com.myorg.myapp",
	"version": "1.0.0",
	"description": "UI5 Application: com.myorg.myapp",
	"license": "Apache-2.0",
	"scripts": {
		"clean": "rimraf dist coverage",
		"build": "ui5 build --clean-dest",
		"build:opt": "ui5 build self-contained --clean-dest --all",
		"start": "ui5 serve --port 8080 -o index.html",
		"start-cdn": "ui5 serve --port 8080 -o index-cdn.html",
		"start:dist": "npm start -- --config ui5-dist.yaml",
		"start:dist-cdn": "npm run start-cdn -- --config ui5-dist.yaml",
		"ts-typecheck": "tsc --noEmit",
		"lint": "eslint webapp",
		"karma": "karma start",
		"karma-ci": "karma start karma-ci.conf.js",
		"karma-ci-cov": "karma start karma-ci-cov.conf.js",
		"test": "npm run lint && npm run karma-ci-cov"
	},
	"devDependencies": {
		"@sapui5/types": "1.117.0",
		"@typescript-eslint/eslint-plugin": "^5.61.0",
		"@typescript-eslint/parser": "^5.61.0",
		"@ui5/cli": "^3.3.1",
		"@ui5/ts-interface-generator": "^0.7.0",
		"eslint": "^8.44.0",
		"karma": "^6.4.2",
		"karma-chrome-launcher": "^3.2.0",
		"karma-coverage": "^2.2.1",
		"karma-ui5": "^3.0.3",
		"karma-ui5-transpile": "^0.3.22",
		"nominatim-client": "^3.2.1",
		"rimraf": "^5.0.1",
		"typescript": "^5.1.6",
		"ui5-middleware-livereload": "^0.8.4",
		"ui5-tooling-modules": "^3.0.4",
		"ui5-tooling-transpile": "^0.7.17"
	}
}

NPM version: 9.6.7
Node.js version: 18.17.0
On creating the project I consciously selected the "UI5" rather than "OpenUI5" which I think is irrelevant.
Could you help me?

UPDATES:

1 - I figured it out that the problem happens only through npm run start. Running npm run start:dist after build the project everything went wright, all manifest.json could be reached by GET. The problem is probably related to the UI5 dev server. I'm scouring the internet but no success yet.

`ModuleError: Failed to resolve dependencies` (`npm`, `zod`)

Hi,
I want to use zod along with the UI5. Therefore, I tried to go with the exercise 4.
What steps have I done?

Installed zod: npm install zod --save-dev (also tried as a normal dependency, not a dev one, but no difference).
Installed ui5-tooling-modules: npm install ui5-tooling-modules --save-dev
Edited the ui5.yaml as described in the exercise (full contents of the file below).
Imported zod into a TypeScript file.
Started the project with npm run start.

devDependencies in package.json:

"devDependencies": {
  "@babel/eslint-parser": "7.14.7",
  "@sap-ux/eslint-plugin-fiori-tools": "^0.2.0",
  "@sap-ux/ui5-middleware-fe-mockserver": "2",
  "@sap/ux-ui5-tooling": "1",
  "@sapui5/ts-types-esm": "~1.108.22",
  "@typescript-eslint/eslint-plugin": "^5.59.0",
  "@typescript-eslint/parser": "^5.59.0",
  "@ui5/cli": "^3.0.0",
  "eslint": "7.32.0",
  "eslint-plugin-fiori-custom": "2.6.7",
  "typescript": "^5.1.6",
  "ui5-tooling-modules": "^3.0.7",
  "ui5-tooling-transpile": "^3.2.0",
  "zod": "^3.22.2"
},

ui5.yaml:

# yaml-language-server: $schema=https://sap.github.io/ui5-tooling/schema/ui5.yaml.json

specVersion: "3.1"
metadata:
  name: XXX
type: application
server:
  customMiddleware:
    - name: ui5-tooling-modules-middleware
      afterMiddleware: compression
    - name: fiori-tools-proxy
      afterMiddleware: compression
      configuration:
        ignoreCertError: true # If set to true, certificate errors will be ignored. E.g. self-signed certificates will be accepted
        ui5:
          path:
            - /resources
            - /test-resources
          url: https://ui5.sap.com
        backend:
          - path: /sap
            url: XXX
            client: "XXX"
            destination: XXX
    - name: fiori-tools-appreload
      afterMiddleware: compression
      configuration:
        port: 35729
        path: webapp
        delay: 300
    - name: ui5-tooling-transpile-middleware
      afterMiddleware: compression
      configuration:
        debug: true
        excludePatterns:
          - /Component-preload.js
    - name: fiori-tools-preview
      afterMiddleware: fiori-tools-appreload
      configuration:
        component: XXX
        ui5Theme: sap_horizon
builder:
  customTasks:
    - name: ui5-tooling-modules-task
      afterTask: replaceVersion
      configuration:
        addToNamespace: true
    - name: ui5-tooling-transpile-task
      afterTask: replaceVersion
      configuration:
        debug: true

zod usage:

import { z } from "zod";

export const oCommiAreas = z.object({
  Area: z.string().max(30),
  Arbpl: z.string().max(8),
  AreaDescr: z.string().max(40),
  Target: z.number().int(),
});

export type CommiAreas = z.infer<typeof oCommiAreas>;

I get the following error in the browser's Dev Tools:
Uncaught (in promise) ModuleError: Failed to resolve dependencies of '.../controller/MainView.controller.js'

The sources of the page in the Dev Tools look like this. There is no zod.js file anywhere.

According to zod.dev, zod has "zero dependencies" and "works in Node.js and all modern browsers".
Could you please help me with this issue?

ERROR: "watch:ts" exited with 1.

Hi @akudev .
Thanks for the tutorial but when I try to run generated project I am getting an error:

Syntax error in file name, folder or ...
ERROR: "watch:ts" exited with 1.
Screenshot attached.

Maybe problem in updated packages version ?
"devDependencies": { "@babel/cli": "^7.16.0", "@babel/core": "^7.16.0", "@babel/preset-env": "^7.16.4", "@babel/preset-typescript": "^7.16.0", "@openui5/ts-types-esm": "1.103.0", "@types/jquery": "3.5.1", "@typescript-eslint/eslint-plugin": "^5.6.0", "@typescript-eslint/parser": "^5.6.0", "@ui5/cli": "^2.14.1", "babel-preset-transform-ui5": "^7.0.5", "eslint": "^8.4.1", "npm-run-all": "^4.1.5", "typescript": "^4.5.3", "ui5-middleware-livereload": "^0.5.8" },

ex8: Chart is not a constructor

Hi,

I cannot run exercise 8 on a fresh install due to the error

Uncaught (in promise) TypeError: Chart is not a constructor at _constructor._onAfterRendering [as onAfterRendering] (LineChart.ts:65:18) at Element._handleEvent (Element.js?eval:342:22) at finalizeRendering (RenderManager.js?eval:1275:16) at flushInternal (RenderManager.js?eval:1360:4) at RenderManager.render (RenderManager.js?eval:1510:4) at NavContainer.to (NavContainer.js:828:9) at TargetHandler._applyNavigationResult (TargetHandler.js:324:20) at TargetHandler.navigate (TargetHandler.js:100:32) at constructor.<anonymous> (Targets.js:36:26)

Steps to reproduce:

Clone repo
Run npm i inside ex8
Run npm start

When changing the default import to a named import import { Chart } from "chart.js/auto"; a new error is thrown:

Uncaught (in promise) Error: "line" is not a registered controller. at Registry._get (auto.js:6643:17) at Registry.getController (auto.js:6589:21) at Chart.buildOrUpdateControllers (auto.js:8294:46) at Chart.update (auto.js:8328:37) at Chart.<anonymous> (auto.js:8099:48) at Chart._doResize (auto.js:481:14) at Chart._resize (auto.js:8177:20) at Chart.resize (auto.js:8156:16) at attached (auto.js:8692:16) at Chart.bindResponsiveEvents (auto.js:8704:11)

[rl-vulnerability_alerts-1] Violation against OSS Rules of Play

The OSPO bot created this issue by mistake - It did not have enough priviledge to check the vulnerability alerts, So I am closing this issue now. Sorry for any inconvenience.

Improvement: add `@openui5/ts-types-esm` to separate `types` section in the `tsconfig.json`

The generator-ui5-ts-app will also be updated for this!

Getting error in exercise 1 - ui5-typescript-tutorial

Hi Guys,

I went through the wonderful youtube video by @akudev and trying to do the exercise at this page :

https://github.com/SAP-samples/ui5-typescript-tutorial/tree/main/exercises/ex1

I did a yo check and it looks all good.

Yeoman Doctor
Running sanity checks on your system

✔ No .bowerrc file in home directory
✔ Global configuration file is valid
✔ NODE_PATH matches the npm root
✔ No .yo-rc.json file in home directory
✔ Node.js version
✔ npm version
✔ yo version

Everything looks all right!

I tried adding additional permissions ( I'm on. a Mac ) but still get the same error

3 ) Node version v18.17.0 .

Error:

Error [ERR_MODULE_NOT_FOUND]: Cannot find package '/Users/sakiv/.npm/generator-easy-ui5/plugin-generators//SAP-samples/ui5-typescript-tutorial_generator/node_modules/chalk/' imported from /Users/sakiv/.npm/generator-easy-ui5/plugin-generators//SAP-samples/ui5-typescript-tutorial_generator/generators/app/index.js
at new NodeError (node:internal/errors:405:5)
at legacyMainResolve (node:internal/modules/esm/resolve:233:9)
at packageResolve (node:internal/modules/esm/resolve:874:14)
at moduleResolve (node:internal/modules/esm/resolve:936:20)
at defaultResolve (node:internal/modules/esm/resolve:1129:11)
at nextResolve (node:internal/modules/esm/loader:163:28)
at ESMLoader.resolve (node:internal/modules/esm/loader:835:30)
at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18)
at ModuleWrap. (node:internal/modules/esm/module_job:77:40)
at link (node:internal/modules/esm/module_job:76:36)