Cách tạo một Project Hello World đầ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ị

1. Download và cài đặt VScodeDĩ 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.
2. Download và cài đặt Node.js versions 16.18.0 trở lênKhi 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
3. Tạo thư mục chứa source codeTạ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.
4. 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
   
   <span class="token punctuation">{</span> <span class="token property">"sap.app"</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token property">"id"</span><span class="token operator">:</span> <span class="token string">"sap.ui.name_of_application"</span><span class="token punctuation">,</span> <span class="token property">"type"</span><span class="token operator">:</span> <span class="token string">"application"</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span>

   1 2 3 4 5 6 7

   <span class="token punctuation">{</span> <span class="token property">"sap.app"</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token property">"id"</span><span class="token operator">:</span> <span class="token string">"sap.ui.name_of_application"</span><span class="token punctuation">,</span> <span class="token property">"type"</span><span class="token operator">:</span> <span class="token string">"application"</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span>

   
   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.

1. Mở terminal VScodeTrê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.
2. 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.
      
      <span class="token comment"># Cài đặt UI5 Local</span> <span class="token function">npm</span> <span class="token function">install</span> --save-dev @ui5/cli <span class="token comment"># Kiểm tra xem cài đặt thành công hay chưa</span> ui5 --help

      1 2 3 4 5 6

      <span class="token comment"># Cài đặt UI5 Local</span> <span class="token function">npm</span> <span class="token function">install</span> --save-dev @ui5/cli   <span class="token comment"># Kiểm tra xem cài đặt thành công hay chưa</span> ui5 --help

   2. Sinh ra file package.json cho project.
      
      <span class="token function">npm</span> init --yes

      1 2	<span class="token function">npm</span> init --yes

   3. Sinh ra file ui5.yaml.
      
      ui5 init

      1 2

      ui5 init

   4. Xác định framework muốn sử dụng (mình sẽ chọn SAPUI5).
      
      ui5 use sapui5@latest

      1 2	ui5 use sapui5@latest

   5. Thêm thư viện cần thiết.
      
      ui5 <span class="token function">add</span> sap.ui.core sap.m sap.ui.table themelib_sap_fiori_3 <span class="token comment"># [...]</span>

      1 2	ui5 <span class="token function">add</span> sap.ui.core sap.m sap.ui.table themelib_sap_fiori_3 <span class="token comment"># [...]</span>

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”

1. Tạo 2 file index.html và index.js trong thư mục webapp.
   1. **index.html**
      
      <span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>UI5 Beginner<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sap-ui-bootstrap<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://sdk.openui5.org/resources/sap-ui-core.js<span class="token punctuation">"</span></span> <span class="token attr-name">data-sap-ui-theme</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sap_belize<span class="token punctuation">"</span></span> <span class="token attr-name">data-sap-ui-libs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sap.m<span class="token punctuation">"</span></span> <span class="token attr-name">data-sap-ui-resourceroots</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>{<span class="token punctuation">"</span>ui5_beginner<span class="token punctuation">"</span>: <span class="token punctuation">"</span>./<span class="token punctuation">"</span>}<span class="token punctuation">'</span></span> <span class="token attr-name">data-sap-ui-onInit</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module:ui5_beginner/index<span class="token punctuation">"</span></span> <span class="token attr-name">data-sap-ui-compatVersion</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>edge<span class="token punctuation">"</span></span> <span class="token attr-name">data-sap-ui-async</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sapUiBody<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>content<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>

      1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

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

   2. index.js
      
      sap<span class="token punctuation">.</span>ui<span class="token punctuation">.</span><span class="token function">define</span><span class="token punctuation">(</span> <span class="token punctuation">[</span><span class="token string">'sap/m/Button'</span><span class="token punctuation">,</span> <span class="token string">'sap/m/MessageToast'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">Button<span class="token punctuation">,</span> MessageToast</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token string">'use strict'</span><span class="token punctuation">;</span> <span class="token keyword">new</span> <span class="token class-name">Button</span><span class="token punctuation">(</span><span class="token punctuation">{</span> text<span class="token operator">:</span> <span class="token string">'Say Hello'</span><span class="token punctuation">,</span> <span class="token function-variable function">press</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> MessageToast<span class="token punctuation">.</span><span class="token function">show</span><span class="token punctuation">(</span><span class="token string">'Hello World!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">placeAt</span><span class="token punctuation">(</span><span class="token string">'content'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>

      1 2 3 4 5 6 7 8 9 10 11 12 13 14

      sap<span class="token punctuation">.</span>ui<span class="token punctuation">.</span><span class="token function">define</span><span class="token punctuation">(</span>   <span class="token punctuation">[</span><span class="token string">'sap/m/Button'</span><span class="token punctuation">,</span> <span class="token string">'sap/m/MessageToast'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>   <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">Button<span class="token punctuation">,</span> MessageToast</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>     <span class="token string">'use strict'</span><span class="token punctuation">;</span>       <span class="token keyword">new</span> <span class="token class-name">Button</span><span class="token punctuation">(</span><span class="token punctuation">{</span>       text<span class="token operator">:</span> <span class="token string">'Say Hello'</span><span class="token punctuation">,</span>       <span class="token function-variable function">press</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>         MessageToast<span class="token punctuation">.</span><span class="token function">show</span><span class="token punctuation">(</span><span class="token string">'Hello World!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>       <span class="token punctuation">}</span><span class="token punctuation">,</span>     <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">placeAt</span><span class="token punctuation">(</span><span class="token string">'content'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>   <span class="token punctuation">}</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>

   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:

2. 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ìnhsử dụng lệnh command sau đây, dán vào TERMINAL để ứng dụng khởi động:
   ui5 serve

   1 2

   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.