Cách tạo một Project Hello Wold đầu tiên với SAPUI5

1. Mở đầu

Trong bài viết này mình sẽ hướng dẫn mọi người cách để setup môi trường và chạy thử một ứng dụng “Hello World” với SAP UI5 bằng Visual studio code (VScode) mà không gặp lỗi thiếu folder lúc chạy lệnh ui5 init khi làm theo hướng dẫn của UI5 document

2. Chuẩn bị

Download và cài đặt VScode

Dĩ nhiên rồi, đây là trình chỉnh sửa và soạn thảo code giúp chúng ta tương tác với mã nguồn (source code) của ứng dụng một cách trực tiếp, giúp việc mở file, quản lý file và các thư mục trở nên dễ dàng hơn.
Download và cài đặt Node.js versions 16.18.0 trở lên

Khi cài đặt xong chúng ta cần kiểm tra xem node version đã đúng chưa để kiểm tra kết quả bằng lệnh node -v trong terminal.

Vì mình đã cài đặt nodejs version 18.15.0 nên khi chạy lệnh node -v mình được thông báo là đang sử dụng node version 18.15.0
Tạo thư mục chứa source code

Tạo một thư mục với tên là ui5_beginner để làm thư mục chính chứa các file của ứng dụng.

Tiếp theo chúng ta cần mở thư mục vừa mới tạo (ui5_beginner) bằng VScode.
Tạo một thư mục với tên là webapp bên trong thư mục ui5_beginner , webapp sẽ chứa một tập tin manifest.json.

Coppy đoạn mã này và dán vào tập tin manifest.json
```
{
	"sap.app": {
		"id": "sap.ui.name_of_application",
		"type": "application"
	}
}
```
Sau khi hoàn thành các bước trên thì chúng ta sẽ được cấ trúc thư mục như vầy.

3. Khởi tạo ứng dụng UI5

Sau hàng loạt các bước setup phức tạp bằng tay bên trên thì giờ đây chúng ta chỉ cần mở terminal của VScode lên và coppy paste thôi :3.

Mở terminal VScode

Trên cửa sổ VScode. chọn terminal > new terminal

Một Tab với tên là TERMINAL sẽ được hiển thị bên dưới cửa sổ VScode.
Chạy lệnh command để khởi tạo UI5 app.

Coppy các command sau theo thứ tự từ trên xuống để dán vào terminal và ấn Enter.
1. Cài đặt ui5.
```
# Cài đặt UI5 Local
npm install --save-dev @ui5/cli

# Kiểm tra xem cài đặt thành công hay chưa
ui5 --help
```
2. Sinh ra file package.json cho project.
```
npm init --yes
```
3. Sinh ra file ui5.yaml.
```
ui5 init
```
4. Xác định framework muốn sử dụng (mình sẽ chọn SAPUI5).
```
ui5 use sapui5@latest
```
5. Thêm thư viện cần thiết.
```
ui5 add sap.ui.core sap.m sap.ui.table themelib_sap_fiori_3 # [...]
```

4. Chạy ứng dụng

Các bước setup, cài đặt đã xong giờ chúng ta sẽ làm cho ứng dụng hiển thị message “Hello World” khi ấn vào nút “Say Hello”

Tạo 2 file index.html và index.js trong thư mục webapp.

**index.html**

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>UI5 Beginner</title>
	<script id="sap-ui-bootstrap"
		src="https://sdk.openui5.org/resources/sap-ui-core.js"
		data-sap-ui-theme="sap_belize"
		data-sap-ui-libs="sap.m"
		data-sap-ui-resourceroots='{"ui5_beginner": "./"}'
		data-sap-ui-onInit="module:ui5_beginner/index"
		data-sap-ui-compatVersion="edge"
		data-sap-ui-async="true">
	</script>
</head>
<body class="sapUiBody" id="content"></body>
</html>

index.js

sap.ui.define(
  ['sap/m/Button', 'sap/m/MessageToast'],
  function (Button, MessageToast) {
    'use strict';

    new Button({
      text: 'Say Hello',
      press: function () {
        MessageToast.show('Hello World!');
      },
    }).placeAt('content');
  }
);

Sau khi tạo xong 2 file này thì cấu trúc thư mục của chúng ta sẽ hiển thị như sau:

Untitled

Chạy ứng dụng trên localhost.

Mọi thứ đã sẵn sàng để chạy, bước cuối cùng là chạy và test thử chương trình

sử dụng lệnh command sau đây, dán vào TERMINAL để ứng dụng khởi động:
```
ui5 serve
```
Khi chạy xong terminal báo là Server started . Tức là chương trình của chúng ta đã được khởi tạo ở port 8080 trên localhost.

Việc tiếp theo là test thử chương tình bằng cách truy cập đường dẫn http://localhost:8080 bằng trình duyệt web bất kỳ.

Khi ấn vào nút “Say Hello” thì một Popup với message “Hello World” hiện lên. vậy là chúng ta đã thành công khởi tạo 1 chương trình “Hello World” đơn giản với SAPUI5 rồi.

5. Tổng kết

Vậy là vừa rồi mình đã hướng dẫn mọi người Tạo một ứng dụng đơn giản với SAPUI5 mà không gặp lỗi thiếu file trong quá trình cài đặt và khởi động ứng dụng. Ở bài viết sau mình sẽ giới thiệu kỹ hơn về cấu trúc thư mục và từng file như manifest.json, index.html và index.js , nhiệm vụ của chúng là gì và chúng liên kết với nhau ra sao.

SAP ABAP

1. Mở đầu

2. Chuẩn bị

3. Khởi tạo ứng dụng UI5

4. Chạy ứng dụng

5. Tổng kết

Mục lục