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 -vtrong terminal.
Vì mình đã cài đặt nodejs version 18.15.0 nên khi chạy lệnh
node -vmì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 terminalMộ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.
-
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 -
Sinh ra file
package.jsoncho project.npm init --yes -
Sinh ra file
ui5.yaml.ui5 init -
Xác định framework muốn sử dụng (mình sẽ chọn SAPUI5).
ui5 use sapui5@latest -
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.htmlvàindex.jstrong thư mụcwebapp.-
**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.jssap.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:
-
-
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 serveKhi 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 ở port8080trênlocalhost.Việc tiếp theo là test thử chương tình bằng cách truy cập đường dẫn
http://localhost:8080bằ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.