[Linux] 跨平台 SSH Client 工具 - Termius

前言
身為一個 Windos 重度用戶來說，近期要切換到 Linux 環境開發無疑是個重大挑戰，建置 CentOS 環境的第一步必須先連到遠端的 Linux Server，同事大力推薦  Terminus ，此工具支援 mac 以及 windows 且適用於 desktop 以及 mobile 版本，重點還免費，對 Linux 新手當然是一大福音，這篇簡單紀錄 Terminus 工具的安裝與使用方式，分享給跟我對於 Linux 還在摸索的新手朋友們。

安裝 Termius

安裝傳送門 : 請點我 
Step 1 : 公司筆電是 Windows 因此下載 Termius for Windows 版本
另外也同時支援 Mobile、Mac、Linux，如果在 Windows 使用系統會同步至 mobile 版本

Step 2 : 點選取得，會開始進行下載

如果是第一次使用，會建議要求註冊帳號的動作

Step 3 : 安裝完畢之後，第一次使用會跳出介紹說明

使用 Termius

主要視窗畫面如上，畫面我覺得是相當不賴
如果不喜歡深色系的話，可以點選左上角 > Terminal，選擇自己喜歡的顏色或是字形大小

新增連線
在主視窗右下角，點選  +NEW HOST 

輸入遠端資訊資訊，名稱、IP 相關設定，輸入完畢後按下右上角 Save

新增完畢後，點擊後會跳出輸入帳號密碼

即可順利進去 Linux server

結語
好的，以上是 Termius 最簡單的操作方式，使用上相當容易上手沒太多難度，已列入我個人私藏工具之一，工具有提供更多好用的功能與說明，如果想了解更多資訊可以了解 Termius 官網介紹

Read More

[Tool] END-TO-END Test 測試工具 - Playwright

前言
過去提到 Web 自動化測試可能第一個念頭會透過 Selenium 來實現 ，今天要介紹的是一套新的 Open Source 自動化測試工具 Playwright，他是基於 Javascript 的跨瀏覽器 end to end 測試工具，目前屬於微軟眾多的 Open Source 專案之一，今天這篇文章就來推坑這款好用的工具，若有問題歡迎提出來一起討論。

介紹
Playwright 是一種 opensource 的自動化測試工具，使用 Node.js 所開發，不僅支援當今常用到的三種瀏覽器 Chrome、Firefox 以及 WebKit，還可透過簡單的設定測試在不同設備上的瀏覽器以及自定義座標與地理位置(Geo)，此外，Playwright API 支援的語言有 Javscript、TypeScript、Python 及 C#，文章提到 Playwright 使用 headless browser 以及 Devops Protocol 來執行，因此速度比 Selenium 快且穩定性較高，在使用前可以先了解一下設計的初衷，在 Playwright Github 文件的 README.md 有提到下列說明

We are the same team that originally built Puppeteer at Google, but has since then moved on. Puppeteer proved that there is a lot of interest in the new generation of ever-green, capable and reliable automation drivers. With Playwright, we'd like to take it one step further and offer the same functionality for **all** the popular rendering engines. We'd like to see Playwright vendor-neutral and shared governed.

備註 : Puppeteer 是 Playwright 的前身，其 API 與核心概念都很相似。

安裝 Playwright-cli
由於小弟手邊沒有 Mac 筆電，因此使用的是以 Windows OS 為主，如果要在 Windows 下跑 Playwright 的話需要先安裝 Node.js 及 npm，可以到 Node.js 官方網站下載 Windows 安裝應用程式，如下圖所示

安裝完畢之後，可以透過命令提示字元執行以下指令查詢是否有安裝成功

node -vC:\Users\username>node -v
v12.18.4

C:\Users\username>npm -v
6.14.6

看到兩個指令均有回覆相關資訊，及代表安裝環境成功 !
接著使用 npm 或是 yarn 在 Node.js 安裝 PlayWright (PlayWright需要 Node.js 10 或更高的版本)

$ npx playwright-cli --help

# To save as a dependency
$ npm install -D playwright-cli

使用方式
Code Page
輸入下列指令即可透過 Playwright-cli 開啟新的頁面，舉例來說我想使用 Chrome 瀏覽器來開啟小廢廢的部落格

npx playwright-cli open marcus116.blogspot.com

可以依據需求來調整要測試的瀏覽器，如果想換 webkit 瀏覽器則調整參數 open 改為 wk 即可 備註 : 實際在 windows 執行有點頓，有機會在 Mac 測測看再回報

指定 Device
如果希望測試時指定 Device 的型號，則可以透過 cli 的 --device 參數來指定想要測試的 device 型號 playwright.devices，舉例來說指定設備用 iPhone 開啟 wiki 網頁

npx playwright-cli --device="iPhone 8" open wikipedia.org

呈現畫面如下

模擬地理位置
可以指定地理位置(Geolocation)，舉例來說我希望開啟瀏覽器時定位在台北車站附近

npx playwright-cli --geolocation="25.0448717,121.5209451" open maps.google.com

呈現畫面如下

另外還支援截圖與產生 PDF 檔案的功能，詳細可以參考 playwright-cli Github 文件說明。

在 C# 使用
起手式第一步是到 nuget 下載 PlaywrighySharp 套件，目前最新的版本為 0.142

使用 Visual Studio 2019 建立 NUnit 測試專案，我們使用 Chorome 開啟 google.com 並在輸入框輸入 hello world，並加上一些條件像是開啟畫面是 1024 * 1024，headless 設定為 false，按下在下搜尋按鈕，依據此邏輯接著在 UnitTest1 輸入下列代碼

public class Tests
{
    [SetUp]
    public async Task Setup()
    {
    }

    public async Task Browser()
    {
        var playwright = await Playwright.CreateAsync();
        var browser = await playwright.Chromium.LaunchAsync(headless: false);

        return browser;
    }

    public async Task Page()
    {
        var browser = await Browser();
        var page = await browser.NewPageAsync();

        return page;
    }

    [Test]
    public async Task Search_Using_Chrome()
    {
        var page = await Page();
        await page.GoToAsync("https://www.google.com");

        await page.SetViewportSizeAsync(1024, 1024);

        // textbox : hello world
        await page.TypeAsync("input[name='q']", "hello world");

        // Click Button
        await page.ClickAsync("input[name='btnK']");
        
        // Wait 3 second
        await page.WaitForTimeoutAsync(3000);
    }
}

然後在測試總管點選測試，即可看到測試的結果如下 結果正常，大功告成打完收工 !!!

感想
以上針對新的測試工具 Playwright 套件做一些基本的介紹，另外此套工作可以也在 Docker 環境跑 Playwright 腳本，若有興趣可以參考 Running Playwright in Docker，雖然接觸此工具的時間不長但對於前景的發展感覺是很不錯的，日後有機會可以做更深獲是進一步的研究跟分享，以上如果有不清楚的地方歡迎一起討論，hope it helps !

參考
Playwright
WHY DO WE NEED END-TO-END TESTS?
Playwright (vs. Puppeteer): Cross-Browser Testing done right
What is the Microsoft Playwright Automation Tool Guide

Read More

[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

[Tool] Redis 管理工具 - Another Redis Desktop Manager

前言
在之前推薦過 Redis 管理工具 [Redis] Redis 管理工具 - Redis Desktop Manager，方便開發者可以輕鬆的使用 GUI 工具查看或設定 Redis 的資訊，如果要下載新版使用則需要另外付費 (4.99/Month )，最近又發現另一款好用的 Redis 管理工具 Another Redis Desktop Manager，在 Github 說明如下

A faster, better and more stable redis desktop manager, compatible with Linux, windows, mac. What's more, it won't crash when loading a large number of keys.

除了支援 Windows、Linux 與 Mac 三種環境之外，語系部分還支援繁體中文說明，經過幾天的使用個人覺得不輸給 Redis Desktop Manager，今天這篇文章就來推坑這款好用的工具，若有問題歡迎提出來一起討論。

安裝
下載位置可以從 Github 頁面 Another Redis Desktop Manager 的 release 進行下載安裝檔的動作，舉例來說目前最新版本為 v1.3.5，裡面就提供各個環境的安裝檔案，如果是使用 Windows 可以選擇 Another.Redis.Desktop.Manager.1.3.5.exe 進行下載的動作

接著就是大家熟悉的安裝流程，點選下一步到完成為止

建立連線
在開啟應用程式之後，第一步就是要連線到 Redis Server，為了 Demo 方便這裡我先使用 Docker 在本機啟用 Redis，port 為預設的 6379，接著是點選左上角的 New connection，輸入要連線到的 Redis Server 內容，按下 OK 選擇下一步

Redis 資訊
與 Redis Server 建立連線成功之後，即可以看到目前 Redis 目前的資訊像是使用 Redis 使用的版本為和、記憶體的使用量，目前的連線數等資訊，另外在右下方也可以看的到目前我們存放在 Redis key 的資料數據，這些數據分別存放在哪一個 Redis 中哪一個 db 位置

Redis Console
如果習慣 command 指令的朋友，也可以在應用程式直接下指令來達到你的目的，舉例來說在 Console 輸入 Ping 則會回覆 PONG 關鍵字

新增 key & 資料
也支援在介面上新增 Redis key 與資料，舉例來說我新增一個 key 為 test 資料型態為 hash，接著可以繼續在介面上新增內容資料，這功能最近在開發新專案時很常用到，可以很方便的加入所需要的資料針對專案與 Redis 的介接與測試，不用在另外熟記指令來進行新增/調整資料的動作 (我比較懶惰...)

感想
另外還有支援繁體中文語系，進階搜尋 Redis key 與切換 dark 介面等功能，整體來說目前使用上功能蠻完善的，使用了幾天也未遇到當機或是異常 crash 等問題，對於 Redis 管理工具有需求的朋友，或許可以嘗試看看 Another Redis Desktop Manager，如果有不清楚的地方歡迎一起討論，hope it helps !

參考

AnotherRedisDesktopManager

Read More

[Git] Git Client 版本管理工具 - Fork

前言
相信開發者都聽過或正在 Git 進行版本控管，Git 是一個分散式版本控管系統，在 Windows OS 中支援 Git 的免費工具比較常見的有 TortoiseGit、SourceTree 或是 GitKraken 幾種，最近主管分享另外一套強大的且免費的 Git 版控工具 Fork，在官網上的介紹也十分簡潔有力，a fast and friendly git client for Mac and Windows ，這篇簡單紀錄 Fork 工具的安裝與基本操作，如果有疑問歡迎隨時提出來一起討論。

安裝

安裝傳送門 : 請點我 
Step 1 : 公司筆電是 Windows 因此下載 Fork for Windows 版本，如果開發筆電是 Mac OS 在 fork 也支援下載使用

Step 2 : 在安裝應用程式之前，系統會要求輸入使用者名稱與 email，作為提交 commit 時顯示使用

Step 3 : 安裝完畢之後，即會開啟 Fork 首頁

使用 

關於 fork 基本操作功能可以參考官網示意圖，對於 fork 工具介紹的非常詳細
以下就針對基本功能操作做簡單說明與介紹

切換 Theme
個人在工具使用上喜好黑色背景，因此安裝後第一件事都會先搜尋是否有暗色系背景(強迫症?)，在 fork 中調整 Theme 有提供淺色及深色兩種，可以透過 View 底下的 Theme 做調整

Clone Repository
開始介紹 fork 在電腦 Clone Repository 的方法，在開始之前需要先準備 Demo 用的 Git Repo 儲存庫，在 Github 中可以找到 sample project repository，這裡選用 githubtraining/hellogitworld 作為本次範例使用 : 傳送門

複製完 sample repo 的 url 後，點選 fork 左上角 File > Clone，將 sample repo 網址貼上後按下 clone 按鈕

即可簡單迅速地完成 clone git repo 的動作

Checkout
在開發時多少都會遇到要切換分支的動作，如果這分支之前沒有 checkout 的話，fork 的使用方式是從左邊 Remotes 點選要切換的分支名稱，在按右鍵選單中選擇 checkout origin/your_remote_repo_Name 

checkout 遠端 repo 下來到 local 端時還提供修改 repo name 的功能，按下 Track 後即可

Commit Change
其中我個人覺得蠻方便的是觀看 commot change 的功能，在點選 commit 時可以看到右方顯示針對本次 commit 詳細資訊，包含 commit 時的內容以及 sha值

點選中間的 Change 功能還可以一併顯示本次 commit 的異動紀錄，舉例來說我 merge 另外一個 branch到 feature_image 到 master，在右方就可以看到 merge 後的兩個 branch 的內容差異

Other features
上述僅列出一些功能，有些功能過於簡單像是 pull、push、commit 這裡就不在多加說明，整體在操作與使用上還蠻不錯個人覺得整體有點像 sourceTree，有興趣的人可以到官網看更多功能，目前官網有列出目前所支援 Git 的功能列表清單如下

希望透過這篇介紹，可以讓喜歡用 Git GUI Client 工具的人多一些選擇，Hope it helps :)

參考
git fork

Read More

[Windows] 在 Windows Terminal 新增 Linux Bash Commnadline

前言
在上一篇文章 [Windows] Windows Terminal Preview 初體驗 介紹了 Windows Terminal 的基本操作與使用，其中提到在安裝完預設提供 command 為 powershell 和 cmd 命令提示字元兩種，其實在 Windows Terminal 支援多種 command line，這一篇文章就來介紹如何在 Windows Terminal Preview 新增 Bash command line 的方法。

啟用 Linux Bash Shell
如果要在 Windows Terminal 使用 Bash.exe 需要先啟用 Window OS 的 Linux Bash Shell 功能，公司筆電是使用最新版 Windows 10，因此以下就簡單介紹在 Windows 10 中如何啟用 Linux Bash 

安裝 Windows Subsystem for Linux

首先使用管理者 admin 權限開啟 powershell

接著在 powershell 輸入下列指令

Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Windows-Subsystem-Linux

安裝完畢之後會詢問是否要重新啟動電腦，選擇 y 就會進行立即重啟的動作

安裝 Ubuntu
下一步到 Windows 商店下載 Linux 子系統，在 Microsoft Store 提供多個 Linux 子系統像是 Ubuntu、OpenSUSE、SLES 可以下載，可以在 Store 輸入 Linux 就可以輕易地找到 Ubuntu，下載完畢後可以點選啟用

第一次啟用 ubuntu 會需要一點時間進行初始化設定與安裝，完畢之後會要求你輸入帳號密碼的動作

透過以上步驟，順利的完成啟用 Windows Subsystem for Linux 與 安裝 Ubuntu 的動作

新增 Command Line
在 Windows Terminal 中的設定可以透過  ⬇  中的 settings 來進行設定，按下後會請使用者選擇想要開啟設定檔的編輯器工具

在 Windows Terminal 設定檔名為 Profiles.json，要調整可以到下列路徑進行調整

userName\AppData\Local\Packages\Microsoft.WindowsTerminal_8wekyb3d8bbwe\RoamingState

找到設定檔後可以透過文字編輯器進行編輯，用 Visual Studo Code 開啟後可以看到  profiles  區塊，在 Windows Terminal 安裝完成之後 profiles 一共有兩個區塊，內容分別定義 powershell 與 cmd 兩種設定，以 powershell 為例配置設定如下

{
    "acrylicOpacity" : 0.5,
    "background" : "#012456",
    "backgroundImage" : "D:/Marcus/iron_man.jpg",
    "closeOnExit" : true,
    "colorScheme" : "Campbell",
    "commandline" : "powershell.exe",
    "cursorColor" : "#FFFFFF",
    "cursorShape" : "bar",
    "fontFace" : "Fira Code",
    "fontSize" : 14,
    "guid" : "{61c54bbd-c2c6-5271-96e7-009a87ff44bf}",
    "historySize" : 9001,
    "icon" : "ms-appx:///ProfileIcons/{61c54bbd-c2c6-5271-96e7-009a87ff44bf}.png",
    "name" : "Windows PowerShell",
    "padding" : "0, 0, 0, 0",
    "snapOnInput" : true,
    "startingDirectory" : "%USERPROFILE%",
    "useAcrylic" : false
} 

重要的項目為 name、guid、commandline 等設定，說明如下

• guid : 每組 commandline 定義屬於自己專用且不能重複的 guid 
• name : 顯示在 Windows Terminal  +  中顯示的名字
• commandline  : 執行的 commandline

其餘像是 font 字型、字體大小、背景圖都可以針對各自 commandline 需求做調整，另外在 Windows Terminal 中修改是即時的，調整完 json 內容會即時更新正在使用的 Windows Terminal 視窗，透過以上得知在 Windows Terminal 如何定義 commandline 之後，如果要新增新的 commandline 就可以複製一份來調整，在調整上述提到的 guid、name、commandline 等值即可完成，以新增 Linux Bash 為例配置文件如下

{
    "acrylicOpacity" : 0.75,
    "closeOnExit" : true,
    "colorScheme" : "Campbell",
    "commandline" : "bash.exe",
    "cursorColor" : "#FFFFFF",
    "cursorShape" : "bar",
    "fontFace" : "Consolas",
    "fontSize" : 10,
    "guid" : "{9acb9455-ca41-5af7-950f-6bca1bc9722f}",
    "historySize" : 9001,
    "icon" : "ms-appx:///ProfileIcons/{9acb9455-ca41-5af7-950f-6bca1bc9722f}.scale-100.png",
    "name" : "Linux Bash Shell",
    "padding" : "0, 0, 0, 0",
    "snapOnInput" : true,
    "startingDirectory" : "%USERPROFILE%",
    "useAcrylic" : true
} 

新增 Python

{
    "acrylicOpacity" : 0.75,
    "closeOnExit" : true,
    "colorScheme" : "Campbell",
    "commandline" : "py.exe",
    "cursorColor" : "#FFFFFF",
    "cursorShape" : "bar",
    "fontFace" : "Consolas",
    "fontSize" : 10,
    "guid" : "{1850e97f-16dc-4281-9ea9-0100c4e852c5}",
    "historySize" : 9001,
    "icon" : "C:/Users/marcus/AppData/Local/Programs/Python/Python37/Lib/test/imghdrdata/python.png",
    "name" : "Python",
    "padding" : "0, 0, 0, 0",
    "snapOnInput" : true,
    "startingDirectory" : "%USERPROFILE%",
    "useAcrylic" : true
} 

最後要小小提醒的是在編輯 Profiles.json 檔時需多加留意格式，如果對於 json 格式不熟悉可以到現在 json 格式檢查網站進行確認後再貼上，如果格式錯誤會造成讀取異常，可以看到下列畫面

在重新開啟 Windows Terminal，在點擊右上方的  +  後就可以透過看到新增的 commandline 

透過以上簡單的幾個步驟就完成在 在 Windows Terminal 新增 Linux Bash，希望有幫助到有需要的朋友 :)

參考

終於來了！實測 Windows 10 更新後，安裝使用Bash on Ubuntu on Windows
How to Install Linux Bash Shell on Windows 10

Read More