這是Jerry 2021年的第 15 篇文章，也是汪子熙公眾號總共第 286 篇原創文章。

Jerry 之前寫過一篇文章介紹一個免費的雲開發工具：Cloud Shell，這個工具其實就是在瀏覽器裡使用的遠端 Linux Shell 環境，預裝了 Java，npm，git，nodejs，docker 等常用的開發和部署工具。

本文介紹另一個在瀏覽器裡使用的線上 IDE .

Jerry 所在的團隊，使用 Visual Studio Code 進行 SAP Spartacus 的 TypeScript 開發。

除了 Visual Studio Code 之外，StackBlitz 是另一個我們團隊經常使用的線上 IDE：

StackBlitz 無需註冊，使用 Github 賬號即可登入。其介面風格和 Visual Studio Code 極為相似，支援前端三駕馬車 Angular，React 和 Vue 專案的建立，包含 Web 專案線上開發，自動管理專案依賴，自動編譯，頁面效果實時預覽等實用功能。

[此處插入動畫]

StackBlitz 一個典型的使用場景：Jerry 在開發過程中發現某個 Angular 功能點，沒有按照我期望的方式工作。顯然是我使用的方法不對，我想尋求團隊內 Angular 大佬的幫助。

簡單地把我遇到問題的程式碼和錯誤截圖發給大佬們，顯然是一種不禮貌的做法。僅僅憑藉靜態程式碼和錯誤提示遠遠不夠，最好能提供一個大佬能夠在其本地方便地復現問題的環境：StackBlitz 就是一個比較好的選擇。

於是我在 StackBlitz 裡建立一個簡單的 Angular 工程，把我遇到的問題在這個 Angular 工程裡復現，然後通過下圖的 Share 按鈕，將專案 url 發生給團隊大佬。對方在瀏覽器裡開啟該 url，就可立即復現我的問題。

StackBlitz 能否作為 SAP UI5 開發的線上 IDE 呢？Jerry 簡單試了試，雖然 StackBlitz 無法像原生支援 Angular，React 和 Vue 那樣支援 SAP UI5，但仍然可以用來做一些簡單的 SAP UI5 應用的驗證工作，比如測試某些 SAP UI5 控制元件的行為。

之前 Jerry 的文章一個用於SAP UI5學習的腳手架應用，沒有任何後臺API的依賴介紹的腳手架應用，執行在 nodejs express 框架上。同樣，我們可以把這個腳手架應用遷移到 StackBlitz 上。

看一個實際的使用 SAP UI5 腳手架應用的需求。

下圖是 SAP Spartacus 使用者編輯頁面，每個使用者可以分配若干個角色，除了點選下圖紅色每種角色對應的圓角正方形框之外，點選綠色的文字框，也需要能選中對應的角色。

這是一個 Accessibility 的需求，為了確保使用者在螢幕尺寸較小的移動裝置上，也能毫不費力的勾選某個角色。

現在我想驗證 SAP UI5 的 Checkbox 控制元件，是否也同樣具有該 Accessibility 功能，即點選 Checkbox 的文字本身，也能選中該 Checkbox.

StackBlitz 中新建一個基於 HTML/JS/CSS 的 Static 專案：

把下圖的27行程式碼貼上到 StackBlitz 正中的 HTML 編輯器裡去：

螢幕最右邊區域中，StackBlitz 的嵌入伺服器，會自動把 index.html 的內容渲染出來。

渲染出的 SAP UI5 頁面裡，我看到了期望出現的 Customer Checkbox，並且點選 Customer 文字，發現前面的小勾也自動被勾上了，說明 SAP UI5 的 Checkbox 控制元件，和 Spartacus 一樣，也滿足 Accessibility 的需求。

檢視渲染出的 HTML 原始碼可知道實現原理：sap.m.Checkbox 在執行時會渲染出 div( role 為 checkbox ) 和 label 元素，label 元素的 for 屬性的值，等於 div 元素的 id，從而建立起二者的繫結關係。瀏覽器即可確保，label 被點選時，其關聯到的 role 為 checkbox 的 div 元素也自動被選中。

遺憾的是，通過 StackBlitz 嚮導建立的 Static Web 專案，只支援載入 HTML/CSS/JS/JSON 型別的資源，而 SAP UI5 XML 檢視，因為其格式為 xml，無法正常被 StackBlitz 載入。因此，在 StackBlitz 裡進行 SAP UI5 開發，只能使用基於 JavaScript 的檢視型別。

如果有朋友找到在 StackBlitz 裡使用 SAP UI5 XML 檢視的辦法，歡迎分享給大家。

當然，大家也可以嘗試 Visual Studio Code 這些和 SAP UI5 相關的 Extensions，感謝閱讀。

更多閱讀

更多Jerry的原創文章，盡在："汪子熙":

介紹一個能開發簡單SAP UI5應用的線上IDE：StackBlitz

相關文章