發表文章

🚀 我的第一次 Vibe Coding 體驗：和 ChatGPT 一起從 0 開始寫程式

圖片
這次是我第一次嘗試 Vibe Coding —— 用 ChatGPT 直接討論、規劃、撰寫、修正一個完整的應用程式。 整個過程就像是和一位隨時在線、耐心又懂技術的「虛擬夥伴」一起開發。 💬 1. 從需求討論開始 一開始，我在 ChatGPT 上描述想做的應用功能，它很快就幫我輸出了一份 完整的程式規格書 ，包含前後端架構、功能流程和資料設計。 這個階段的體驗很像是跟 PM 或系統設計師開會，從模糊想法變成具體可執行的藍圖。 🧩 2. 技術選型：Tauri + SQLite ChatGPT 根據需求建議我採用 Tauri + SQLite 組合，理由清楚又合理： Tauri 可以包成桌面應用程式，體積小、效能佳 SQLite 適合離線、單機的資料儲存 這對我來說也是第一次完整實作這種組合，算是一次實際學習新技術的好機會。 ⚙️ 3. 安裝開發套件與組態設定 這一段特別 "有趣" 。 我完全是 照著 ChatGPT 的指示一步步下指令安裝套件 、設定專案環境。 中途遇到錯誤？ 我直接把錯誤訊息貼回去，它立即分析並教我怎麼修。 這樣的互動真的比查 Stack Overflow 還快又準。 🧑‍💻 4. 建立與執行最小可行程式 當環境準備好後，ChatGPT 開始帶我一步步 在 VS Code 中建立檔案、貼入原始碼 。 每個階段都能立即編譯、執行，快速看到成果。 最棒的是，每當遇到 Bug，我只要複製錯誤訊息回給 ChatGPT，它就立刻指出問題、修正程式。 感覺就像隨身攜帶一位結合 Tech Lead + Debug 助手 的 AI 導師。 🔄 5. 當 ChatGPT 與本機程式「脫線」的時候 後來發現 ChatGPT 的上下文無法持續追蹤我電腦裡的最新程式內容，導致修改越來越難同步。 於是我改用 VS Code 的 Codex 模式 ，讓 AI 直接在本機端編輯程式碼。 這樣就能即時看見修改效果，不再需要手動貼來貼去。 🧭 6. Codex 開發與版本管理 在 Codex 模式下開發、測試功能都更順暢。 當功能測試完善後，我會 將原始碼簽入 GitHub ，確保每次修改都有版本控制。 這樣可以避免下一次修改意外覆蓋或破壞現有功能，也方便後續維護與協作...
閱讀完整內容

MAUI 發行 Android 產生 APK/AAB 檔案

圖片
在 Visual Studio 2022 Preview 新增任一 MAUI 專案，包括： .NET MAUI App .NET MAUI Blazor 以下說明三個步驟產生 APK/AAB 檔案。 A. 建立 Key Store 檔案 選單 > VIEW > Terminal > Developer PowerShell keytool -genkey -v -keystore myapp.keystore -alias key -keyalg RSA -keysize 2048 -validity 10000 檔案總管可看到 myapp.keystore 檔案 B. 專案設定 Keystore (1) 專案檔 > 右鍵 > Property > Android > Package Signing (2) 勾選 Sign the .APK file using the following keystore details. (3) 瀏覽選取上述 keystore 檔案 (4) 輸入密碼 (5) 輸入別名 (6) 輸入密碼 C. 發行 App (1) 設定方案組態 Release (2) 模擬器選擇 Android (3) 專案 > 右鍵 > Publish 完成後，可以在 專案目錄\bin\Release\net6.0-android 目錄下可以看到 AAB 與 APK 檔案。 ***--Signed.aab --> 上架 Google Play 需要上傳這個檔案。 ***--Signed.apk --> 可以提供讓 Android 手機下載，手動安裝 APP。 參考連結 文章 : Publish a .NET MAUI app for Android - .NET MAUI | Microsoft Docs 影片 : Create a Signed and Publishable .NET MAUI Android App in VS2022
閱讀完整內容

MAUI 更換應用程式圖示與轉場圖片

圖片
MAUI 預設的應用程式圖示 (App Icon) 與轉場圖片 (Splash) ，如下兩圖： Visual Studio MAUI 專案檔可以找到對應程式圖示與轉場圖片的 SVG 檔案名稱，最簡易更換圖片的方式，將欲更換的 SVG 檔案 XML 內容直接貼上。 應程式圖示主圖示檔案 \Resources\AppIcon\appiconfg.svg 應程式圖示背景檔案  \Resources\AppIcon\appicon.svg 轉場圖片檔案 Splash\splash.svg 不建議更換檔案名稱。 若將原檔案刪除，再新增同檔名的檔案，需要調整各檔案的 Build Action 與 Copy to Output Directory 應程式圖示主圖示檔案 應程式圖示背景檔案 轉場圖片檔案 修改後成果 實作參考原始碼 MyBasicLab/MauiChangeIcon at main · robinli/MyBasicLab (github.com) SVG 線上檢視工具程式 SVG Viewer - View, save, and optimize SVGs
閱讀完整內容

Blazor 發行後用戶端自動更新

圖片
  前言 目前 Blazor 改版發行後，用戶端可能會繼續操作上一版的程式，直到網頁重新整理才能取得新版本程式，由於無法逐一通知使用者改版，最好能自動偵測改版並自動更新。這功能或許未來 Blazor 核心即可解決，在那之前自己先動手改善。 [ Blazor Auto Refresh Update ] 範例提供以下三種 Blazor 型態發行新版程式時，瀏覽器(用戶端)可以自動重新整理網址取得新版程式。 Blazor Server App Blazor WebAssembly App Blazor WebAssembly App + PWA 主要是參考 Blazor Train 教學影片 [ Handling App Updates: Carl Franklin's Blazor Train Ep 60 ]， 將 .NET 5.0 改版為 .NET 6.0，另外 PWA 專案中增加一個訊息畫面。 開發環境 Visual Studio 2022 .NET 6.0 預設的 Blazor 範本 追蹤程式碼 取得原始碼 [ Blazor Auto Refresh Update ] 👈GitHub 程式碼修改細節，可以透過 Find in Files 輸入:  Auto Refresh Update Tip 檢視所有程式碼片段。 發行程序 Blazor Server App  不用修改任何檔案。 Blazor WebAssembly App  發行新版本需要修改 appsettings.json 版本編號。 appsettings.json Index.razor (非必要) Blazor WebAssembly App + PWA  發行新版本需要修改以下檔案內的版本編號。 appsettings.json Toolbar.razor service-worker.published.js Index.razor (非必要) 參考資源 Blazor Train 教學影片 [ Handling App Updates: Carl Franklin's Blazor Train Ep 60 ] 👈YouTube
閱讀完整內容

使用 T-SQL 計算帳齡分析 Aging Analysis Report

圖片
需求說明 常見帳齡分析的報表例如：客戶帳齡分析、產品庫存呆滯天數分析...等。  舉例一組簡化的客戶發票資料，包括單號、日期、金額，  欲將發票資料依天數組距加總統計，得到客戶帳齡分析，  如下圖。    原始資料  交易資料中必要欄位有：  一個日期欄位 : 用來計算與指定日期相差幾天  一個數值欄位 : 用來各組距彙總時的數值  DECLARE @SourceData AS TABLE (DOCNO varchar (16), TRANS_DATE date , AMOUNT int ) insert into @SourceData(DOCNO, TRANS_DATE, AMOUNT) select DOCNO= '2021011501' , TRANS_DATE= convert ( date , '2021-01-15' ),AMOUNT=300 union select DOCNO= '2021052601' , TRANS_DATE= convert ( date , '2021-05-26' ),AMOUNT=400 union select DOCNO= '2021060701' , TRANS_DATE= convert ( date , '2021-06-07' ),AMOUNT=300 union select DOCNO= '2021060801' , TRANS_DATE= convert ( date , '2021-06-08' ),AMOUNT=400 union select DOCNO= '2021060901' , TRANS_DATE= convert ( date , '2021-06-09' ),AMOUNT=700 union select DOCNO= '2021071001' , TRANS_DATE= convert ( date , '2021-07-10' ),AMOUNT=800 union select DOCNO= '2021071101' , ...
閱讀完整內容

使用 Excel 計算帳齡分析 Aging Analysis Report

圖片
需求說明  常見帳齡分析的報表例如：客戶帳齡分析、產品庫存呆滯天數分析...等。  舉例一組簡化的客戶發票資料，包括單號、日期、金額，  欲將發票資料依天數組距加總統計，得到客戶帳齡分析，  如下圖。  原始資料  交易資料中必要欄位有：  一個日期欄位 : 用來計算與指定日期相差幾天  一個數值欄位 : 用來各組距彙總時的數值    定義天數組距  0 ~ 30 : 表示 0 天至 30 天  31 ~ 60 : 表示 31 天至 60 天  以此類推     計算步驟  1. 延伸原始資料  (1) Age / 天數 :  計算交易資料 [日期] 與指定日期相差幾天  (2) 天數組距 :  由 [Age / 天數] 對應組距名稱    公式如下 D38 = DATEVALUE($B$ 35 )-DATEVALUE(B38) E38 = VLOOKUP(D38,$A$27:$C$31,3,TRUE)  2. 依照組距加總數值  利用 Excel 函式 SUMIF 產生各組距的加總。  公式如下 A62 = SUMIF($E$38:$E$56,A61,$C$38:$C$56)  B62 = SUMIF($E$38:$E$56,B61,$C$38:$C$56)  相關連結 下載範例 Excel 檔案 使用 T-SQL 計算帳齡分析 Aging Analysis Report    
閱讀完整內容

T-SQL Two Dimension Pivot Table

圖片
將原始資料  select BRAND='ASUS', QTY=1, AMT=200 union all select BRAND='BENQ', QTY=1, AMT=200 union all select BRAND='ASUS', QTY=1, AMT=200 union all select BRAND='BENQ', QTY=1, AMT=200 union all select BRAND='MSI', QTY=1, AMT=200 依各品牌匯總數量、金額，做出以下的統計表 解決方法 1 - Group By 加條件式  select ASUS_QTY = SUM(IIF(Src.BRAND='ASUS', Src.QTY, 0)) , ASUS_AMT = SUM(IIF(Src.BRAND='ASUS', Src.AMT, 0)) , BENQ_QTY = SUM(IIF(Src.BRAND='BENQ', Src.QTY, 0)) , BENQ_AMT = SUM(IIF(Src.BRAND='BENQ', Src.AMT, 0)) , MSI_QTY = SUM(IIF(Src.BRAND='MSI', Src.QTY, 0)) , MSI_AMT = SUM(IIF(Src.BRAND='MSI', Src.AMT, 0)) from( select BRAND='ASUS', QTY=1, AMT=200 union all select BRAND='BENQ', QTY=1, AMT=200 union all select BRAND='ASUS', QTY=1, AMT=200 union all select BRAND='BENQ', QTY=1, AMT=200 union all select BRAND='MSI', QTY=1, AMT=200 ) Src 解決方法 2 - Pivot Table  做多維度 Pivot Table ...
閱讀完整內容