AI 寫程式：打造你的數位工具
退休城邦・02/25
柏燁
6 年程式教學經驗，曾任樂高競賽教練征戰國際。
- ‣Vibe Coding 教學，指導超過 500 位非工程背景學員
- ‣受邀至 104 人力銀行演講
- ‣前往淡江大學、台北大學授課分享
課程介紹
1. 互動式遊戲
今日心情語錄
每天一句暖心語錄，為你的心情加油
點擊按鈕，為您挑選一句話
透過互動遊戲，可以做到
製作遊戲
我想要做一款跟「A」有關的互動遊戲，遊戲的類型是「B」。至於細節的部分，像是題目跟內容你先幫我想。 另外我需要在遊戲中加入我的宣傳連結，連結是「C」，還有就是測驗的數據要記得幫我建立 Canva Sheet，這樣才能將資料存起來
（示範連結：https://brickverse.com.tw）
在發布之前
Site address (URL) 與 Subpath
Site address (URL)
brickverse.my.canva.site
Subpath
brickverse.my.canva.site/drink
brickverse.my.canva.site/food
brickverse.my.canva.site/travel
發布 設定網站地址 發布
填入你的品牌名稱，例如：
brickversenikeadidas
Site address 只有第一次要設定，設定完之後就不能改了
現在你已經會基礎 Vibe Coding ，而且還能用 Canva Sheet 存取資料了
關鍵字：Canva Sheet
除了做互動遊戲外，還能...
女士剪髮
包含洗髮、剪髮、吹整造型
男士剪髮
包含洗髮、剪髮、吹整造型
孩童剪髮
12歲以下適用
設計師指定
指定資深設計師服務
參考 Prompt
活動報名頁
我要做一個活動報名頁面，可以收集報名者的姓名、電子郵件、手機號碼，還有報名場次。報名資訊要透過 Canva Sheet 管理。 以下是我要補充的報名資訊 ---
美業服務
我要做一個美業服務的資訊展示頁面，可以展示服務項目、價格，並且可以讓顧客填寫預約表單。我的官方 LINE 是：「」 另外我的服務項目細節是 ---
中場休息 10 分鐘
下一節：行政數據清理
2. 行政數據清理
系統數據：提供的資料是完整且複雜的。
我需要的：寄送資料只需要姓名跟 Email。
上傳檔案
寫一個 HTML 網站，讓人可以上傳 xlsx 檔案，並且要把表格內容呈現出來
檢查點
將檔案上傳，確認內容都能正確顯示
清理資料
現在除了顯示原始資料外，我需要清理資料，我只需要保留「」跟「」
檢查點
確認資料清理功能正常，不需要的欄位已移除
新增下載按鈕
需要一個可以讓人下載的按鈕，可以下載清理後的 xlsx 檔
檢查點
確認下載按鈕功能正常，可以成功下載清理後的檔案
這個程式寫完後的兩個問題
雲端
Gemini、ChatGPT
地端
自己的電腦
建立資料夾
my-project
└─index.html
將 Gemini 產生的程式碼下載成 index.html
實作技巧
實戰練習
示範要清理的資料與清理成果
要實作出範例成果
資料整理需求
自主實作時間
2-21 跟 2-22 有參考答案。建議先自己實作，如果有需要，點開後面的參考答案
每次只做一個功能，做完後立即上傳檔案，確認成果正確再進行下一步
1. 上傳檔案
寫一個 HTML 的網站，可以上傳 xlsx，並且把數據顯示出來
點擊查看
2. 拿掉不要的表頭
移除表格中的「交易時間」跟「訂單編號」的欄位
點擊查看
3. 電話修正
如果「連絡電話」是空的，那要寫「缺」。另外在格式上，「連絡電話」要從 09XXXXXXXX 要改為 09XX-XXX-XXX
點擊查看
4. 數據統計
需要統計數據，包含購買人數以及銷售總金額
點擊查看
5. 下載檔案
需要有一個按鈕，可以用來下載清理過後的檔案
點擊查看
以往的做法
使用 Excel 公式進行複製貼上
- 手動選取並複製到新工作表
- 每次都要重複相同步驟
- 容易出錯且耗時
現在的做法
使用 Vibe-Coding 自動化處理
- 上傳檔案即可一鍵完成資料清理
- 可重複使用，節省時間
- 減少人為錯誤
Vibe Coding 除了做常見 APP 外，用來做客製化的資料處理也很實用
而且市場上不可能會有客製化的微型 APP 完全符合你的需求
總結
開始嘗試做各種客製化的 APP 產品吧