[VisualStudio] PlantUML - 在 Visual Studio Code 繪製 UML 圖

前言
最近團隊主管開始要求團隊的文件，對於既有的系統的或是代碼，一直沒有比較清楚的架構圖或是說明的文件來定義各模組之間依賴關係，都是透過較資深的同事口耳相傳或是有看過代碼的人做傳承，但這種方式還是有比較大的風險，可能每個人理解的內容經過幾個世代口耳相傳後認知可能會有所差異，因此最近花了蠻多時間在整理既有系統相關文件，整理中可能會用架構圖循序圖、流程圖加上文字來說明。自己過去在畫循序圖可能會用 Visual Paradigm Online 或是 websequencediagrams 等工具，PlantUML 是 open source 免費且使用文字來定義互動的 UML 模型溝通方式，個人使用上覺得挺好用的，省掉了使用軟體畫圖調整位置的時間，今天這篇文章就來推坑這款好用的工具，若有問題歡迎提出來一起討論。

安裝
首先，官方說明文件有提到可以使用 PlantUml Demo Site 在線上 Render 需要的 UML 圖，如果希望在本機使用的話，可以從 Visual Studio Code 中的 Extensions 進行安裝， 在 Extensions 搜尋框輸入關鍵字 PlantUML，接著按下旁邊的 install 即可進行安裝的動作，

接著要在本機環境 Render，需要先安裝 Java，如果是 Mac 環境輸入以下指令

• brew cask install java
• brew install graphviz

如果在 Windows 請開啟 cmd.exe 輸入下列指令

• @"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"
• choco install plantuml

備註:如果電腦環境沒有安裝 Java 的話，可以到 這裡 下載 Java 安裝檔

透過以上步驟，即可完成 PlantUML 在 Visual Studio Code 的安裝。

使用
Sequence Diagram
安裝完畢之後可以開始使用 PlantUML，在 Visual Studio Code 新增 demo.puml 檔案，檔案內容參考 demo site 中提供的範例內文，貼在新增的檔案中

@startuml
Bob -> Alice : hello world
@enduml

按下右鍵選擇 Preview Current Diagram 選項，右邊就會出現所定義範例 UML Sequence Diagram

UseCase Diagram

@startuml

(First usecase)
(Another usecase) as (UC2)
usecase UC3
usecase (Last\nusecase) as UC4

@enduml

在 Visual Studio Code 中 Render 之後就會像下方的方式呈現

除了以上的 Demo 的兩種常見的 UML 圖之外，PlantUML 還另外支援以下 UML diagram

• Sequence diagram
• Usecase diagram
• Class diagram
• Activity diagram
• Component diagram
• State diagram

若對以上不同的 Diagram 有興趣的大大們，歡迎參考官網說明 自行試試看 :)

貼心功能
另外花了很多時間整理好 Diagram 之後，接下來要處理的是將辛苦畫好的圖片產出，PlantUML 提供一個很方便的功能自動將產出物 Export 到 url，個人覺得此功能十分貼心可以省下很多時間，這裡也就直接使用官方示意來說明
輸出圖片

產生 URL

感想
以上針對 PlantUML 套件做一些基本的介紹，整體使用上感覺算是挺方便的，也謝謝強者同事賈米斯推薦又學到一套好用的 Tool，如果有不清楚的地方歡迎一起討論，hope it helps !

參考
官方網站
marketplace
用筆記也可以管理專案(一)：PlantUML

Read More

[VisualStudio] Visual Studio Code 實用套件 - REST Client

前言
有 API 開發經驗的人相信都使用過 Postman 來模擬使用端發出的 Request 進行測試，今天要介紹另一套工具與 Postman 相似 - REST CLIENT，根據官網的敘述如下

REST Client allows you to send HTTP request and view the response in Visual Studio Code directly.

Rest Client 套件讓開發者可以在 Visual Studio 中發送 HTTP Request 請求並看 Response 結果，這篇就介紹 REST CLIENT 的基本使用方式，若有問題或是錯誤的地方歡迎網路的高手大大給予指導。

安裝
在 Visual Studio 安裝十分簡單，搜尋 REST CLIENT 後點選 install 即可

使用
接著在 Visual Studio Code 中新增檔案，在檔案中輸入測試網址 https://example.com/comments/1，右下角 Language Mode 選擇  HTTP  模式，可以看到網址列上方出現  Send Request  的灰色按鈕，可以選擇使用滑鼠點擊 Send Request 或是用快速鍵 Ctrl + Alt + R 執行，在 Visual Studio 右邊區塊會呈現 Response 結果，左下角則可以看到本次 Request 的執行時間與對方 Server 回傳 Reponse 內容大小

或者可以選擇發送的 RFC2616 標準的請求，以下為發送 Post 且指定 contentType 為 json 的請求範例

POST https://example.com/comments HTTP/1.1
content-type: application/json

{
    "name": "Marcus blog",
    "time": "Wed, 21 Mar 2019 18:27:50 GMT"
}

如果包含多個請求可以透過  ###  來分開

Generate Code
另外一個強大的功能是 Generate Code Snippet ，可以將輸入測試的 HTTP 請求轉化為不同程式語言，目前支援轉換的語言為 C、C#、Go、Java、Javascript、Node.js...等主流程式語言都支援，官方的示意如下

在 REST CLIENT 官方介紹有提供更多強大的功能與使用情境，像是也支援 cURL 語法、自定義請求的變數、設定 SSL與儲存 Response 資訊等好用的功能，這裡就不在做更多說明有興趣可以到官方 GitHub 了解。

感想
感謝強者同事介紹這麼好用的工具，自己在了解 REST CLIENT 功能時想到如果有了 Generate Code 功能，或許可以將使用 REST CLIENT 測試 API  的請求，轉化為單元測試的代碼 (如果懶得自己寫的話 XD)，這樣也可以省下寫代碼的時間，加入情境測試對於程式碼更有保護，也提供各位在測試 API 時有不一樣的選擇  :)

參考
REST Client
[VSCode插件推荐] REST Client: 也许是比Postman更好的选择

Read More

[VisualStudio] VSCode - Failed to create file handle : 程序無法存取檔案，因為檔案正由另一個程序使用

問題 
最近強者同事大推使用 Visual Studio Code，不管是用編輯 Markdown 或是開發 C# 後端都是十分好用，也分享不少好用的套件與工具，但這兩天在使用 Visual Studio Code 關閉時都會跳出 'Failed to create file handle: 程序無法存取檔案，因為檔案正由另一個程序使用) ，這篇就就針對此問題的解決方式做簡單分享，若是有不清楚或是錯誤的地方歡迎討論予糾正。

解決方法
異常發生時畫面如下

根據錯誤訊息提供的線索，異常原因是因為應用程式無法存取檔案，因為被別的程式正在使用的緣故，發生問題當下立刻開啟工作管理員，確認是否有 Visual Studio Code 未關閉的狀況，但事情發生當下並未發現任何相關應用程式，好的，宣告猜測失敗 ! 再接再厲繼續看下一個線索，失敗時有 Log 記錄其錯誤訊息，資料夾在  C:\User\yourName\AppData\Local\Temp\vscode-inno-updater-1555079909.log  ，開啟後資訊如下

Apr 12 22:38:29.294 INFO Starting: C:\Users\marcustung\AppData\Local\Programs\Microsoft VS Code\Code.exe, true
Apr 12 22:38:29.299 INFO Checking for running Code.exe processes... (attempt 1)
Apr 12 22:38:29.321 INFO Code.exe is running, wait a bit
Apr 12 22:38:29.821 INFO Checking for running Code.exe processes... (attempt 2)
Apr 12 22:38:29.871 INFO Code.exe is running, wait a bit
Apr 12 22:38:30.372 INFO Checking for running Code.exe processes... (attempt 3)
Apr 12 22:38:30.422 INFO Code.exe is not running
Apr 12 22:38:30.423 INFO Checking for possible conflicting running processes... (attempt 1)
Apr 12 22:38:30.469 INFO Inno Updater v0.7.1
Apr 12 22:38:30.470 INFO Starting update, silent = true
Apr 12 22:38:30.600 INFO do_update: "C:\\Users\\marcustung\\AppData\\Local\\Programs\\Microsoft VS Code\\Code.exe", _
Apr 12 22:38:30.600 INFO move_update: "C:\\Users\\marcustung\\AppData\\Local\\Programs\\Microsoft VS Code\\unins000.dat", _
Apr 12 22:38:30.601 INFO Reading directory: "C:\\Users\\marcustung\\AppData\\Local\\Programs\\Microsoft VS Code"
Apr 12 22:38:30.602 INFO Get file handle: "C:\\Users\\marcustung\\AppData\\Local\\Programs\\Microsoft VS Code\\api-ms-win-core-console-l1-1-0.dll" (attempt 1)
.....這行不斷重複省略
Apr 12 22:39:32.656 INFO Get file handle: "C:\\Users\\marcustung\\AppData\\Local\\Programs\\Microsoft VS Code\\Code.exe" (attempt 16)
Apr 12 22:39:51.487 ERRO Failed to create file handle: 程序無法存取檔案，因為檔案正由另一個程序使用。

看完似乎發現針對 Code.exe 一直進行卡住關係，在透過此關鍵字詢問 Google 大神，發現 Windows update failed: Access is denied #47841 討論串中情境相似，部分異常的用戶提到環境是 Windows 10 且升級到 1809 版本，有些人說是瀏覽器 Vivaldi 緣故，也有人懷疑是 Windows Defender 關係，但陸續都有人跳出來反駁這些說法，遺憾的是文章最後並未找到真正問題團隊會在繼續追蹤，文末最後建議是關閉 Visual Studio Code 自動更新機制，關閉方式如下
Step 1 : File > Preferences > Settings
Step 2 : search 區域輸入 update > Enable Windows Background Updates 不勾選

在重新開啟關閉 Visual Studio Code 就不會在跳出點擊下一步，會開始偵測異常問題

感想
曾經有找過朋友幫忙確認根本問題，但在討論中提到升級到 Windows 10 版本 1809 可能會有發生此問題朋友就立馬拒絕了，原因是原本好好的為什麼要故意把開發環境弄壞(好像蠻有道理的?)，希望此懸案有一天可以水落石出，找出真相 !!!

參考
Windows update failed: Access is denied #47841 

Read More