用 ASP.NET Core 寫桌面 GUI 應用程式 - Electron.NET

用 ASP.NET Core 寫桌面 GUI 應用程式

三不五時難免有寫桌面 GUI 程式的需求，總讓我天人交戰。雖然寫 WPF 難不倒我，但網頁才是我累積超過一萬小時的拿手絕活。組 XAML 搞 INotifyPropertyChanged 邊查邊寫滿頭大汗之際 我總忍不住碎念，要是能用 Web 寫多好？ Select/Input/Button 搭 Vue.js MVVM 不用三分鐘就能搞定，何以此刻我身困淺灘遭蝦戲？(國劇甩頭)

簡單說，限定 WPF 而不能用 ASP.NET 寫程式，就像逼我用筷子吃手扒雞，說多彆扭就多彆扭，手扒雞就是戴手套抓著吃才是王道呀!

之前我嘗試過用 Windows Form/WPF 跑 NancyFX WebAPI，再用 SPA 寫介面的土砲玩法，但 SPA 對我畢竟比 MVC/Razor Page 複雜且陌生，因此 Electron.NET 這種解決方案，對我猶如天使下凡。DOS

Electron 是 Github 開發的開源框架，其原理是用 Node.js 當後端，Chromium 當前端，包成可跨 Windows、Mac、Linux 平台的桌面 GUI 程式，這幾年橫掃開發界的 Visual Studio Code 即是大家最耳熟能詳的應用。而 Electron.NET 則是整合 Electron 與 ASP.NET Core，讓 .NET 開發者可以用 ASP.NET Core 寫成 Electron 應用程式。

最近想開個 Side Project 寫 GUI Git 小工具自用，索性當成 Electron.NET 的練習題材，照著文件試做出第一個 Electron 程式，過程順暢到令人驚喜，以下是步驟筆記，備忘兼分享。

1. 先用 Visual Studio 建立 ASP.NET Core 3.1 專案，網路上範例多半是用 MVC，理論上只要 ASP.NET Core 都行，我是選 Razor Pages：
   
2. 開啟 NuGet Manager Console，下指令 Install-Package ElectronNET.API
   
3. 接著修改 Program.cs，using ElectronNET.API，CreateHostBuilder() 在 UseStartup<Startup>() 之後加上 .UseElectron(args)：
   
4. 再來修改 Startup.cs，Configure() 後方加入 Task.Run(async () => await Electron.WindowManager.CreateWindowAsync();，開啟 ASP.NET Core 的同時也啟動 Electron Window：
   
5. 在 DOS 或 Cmder 視窗執行

   dotnet tool install ElectronNET.CLI -g
   electronize init
   electronize start
   

   ElectronNET.CLI 只需安裝一次，之後可省。electronize init 是在專案加入 electron.manifest.json 設定檔，每個專案只需執行一次。
   
   至於 electronize start 耗時較久，首次執行時需透過 npm 下載安裝 Electron 必要套件，經過漫長等待，我看到 ASP.NET Core 在 8001 Port 執行的訊息：
   
   不是吧？ASP.NET Core Razor Pages 就這麼被包在 Electron 裡執行起來了，我一點心理準備也沒有，居然半個茶包都不用射就成功了，我感動到要熱淚盈眶惹：
   
6. 下一步是將專案編譯成 EXE 檔，才算真正完成 ASP.NET Core 的桌面程式化。指令為 electronize build /target win
   
   在這裡我遇到小亂流，編譯出現 Path must be a string. Received undefined ...\npm-cache\18748\node_modules\electron-builder\out\cli\cli.js Unexpected token { 錯誤。爬文查到類似案例說跟 node.js 版本有關，查了一下我的版本在 8.11.3，最新版為 12.16.2，不囉嗦馬上更新，錯誤即告消失：
   
7. 編譯結果在 bin\Desktop 目錄下，是個 GitSidekick Setup 1.0.0.exe 安裝檔，而 win-unpacked 子目錄下有 GitSidekick.exe，點選執行可以看到 ASP.NET Core 在 Electron 中跑，Skr...
   

就醬，我又解鎖一件新武器，以後可以盡情用 ASP.NET Core 寫桌面程式，敲開勳~

Electron 好威呀! .NET 萬歲~