— NIGHT 05 · 第五堂 —

Vibe Coding II:
完成與發佈

Vibe Coding II: Finalize & Publish

今晚把 App 完善、除錯、發佈上網,生成你的專屬 QR Code。完成後,你可以即時用 WhatsApp 把 App 分享給任何人。

今晚帶走🔗 已發佈的 App 連結 + 專屬 QR Code
成人在夜間完成、發佈並用手機分享應用程式
Publish · 三步發佈

從初稿到發佈,三個步驟

1

完善 App

把上堂的初稿最後修改:確認文字正確、功能可用、外觀滿意。用自然語言告訴 AI 最後的修改要求。

POE / Google AI Studio
2

發佈上網

把 AI 生成的 HTML 代碼,貼入免費發佈平台(Netlify Drop 或 GitHub Pages),得到一個真實的網址。

netlify.com/drop
3

生成 QR Code

把網址輸入免費 QR Code 生成工具,得到一個可以掃描的 QR Code,截圖存好,準備分享。

qr-code-generator.com
Debugging · 常見問題

遇到問題?這樣告訴 AI

AI 生成的代碼不一定完美,這是正常的。重要的是知道怎樣用語言告訴 AI 修改。

常見問題與修改 Prompt

📱
手機顯示版面錯亂

在手機上看,文字或按鈕的位置不對。

告訴 AI:「請優化手機版面,所有內容在手機上要垂直排列,按鈕要夠大可以用手指按。」
🎨
顏色或字體不夠好看

覺得顏色太難看,或字體不夠清楚。

告訴 AI:「請把主色改為______,按鈕顏色改為______,字體改用 Noto Sans TC。」
🔗
按鈕沒有效果

按了按鈕但什麼都沒發生。

告訴 AI:「Shop Now 按鈕按下去應該連結到 https://wa.me/85290784822,請修改。」
📏
內容太長 / 太擠

頁面太長或內容太密集,不夠清爽。

告訴 AI:「請把每個 section 的 padding 增加,讓頁面更有空間感,內容之間要有更多留白。」
QR Code · 分享你的 App

生成你的專屬 QR Code

📱

一個 QR Code,分享給所有人

App 發佈後,你會得到一個真實的網址(例如 yourapp.netlify.app)。把這個網址輸入 QR Code 生成工具,得到一個可以用手機掃描的圖片。把這個 QR Code 截圖,可以放在 LinkedIn、Instagram、CV、或直接用 WhatsApp 分享。

🔗 任何人掃描後,就可以即時看到你的 App!
90-min Flow · 課堂流程

今晚的 90 分鐘

1
10′
OPEN

展示上堂初稿,說出一個想改善的地方

每人說:「我上堂的 App,我想在今晚改善______」。設定今晚的個人目標。

2
15′
DEMO

示範:除錯 → 發佈 → QR Code

導師示範完整流程:把錯誤截圖貼回 AI 修改 → 複製 HTML → 貼入 Netlify Drop → 得到網址 → 生成 QR Code。

全程手機示範
3
25′
DO

完善 → 發佈 → QR Code

(1) 完成最後一輪修改
(2) 複製 HTML 代碼,貼入 Netlify Drop 發佈
(3) 把網址輸入 QR Code 工具,截圖存好

🎯 今晚必須完成發佈
4
15′
PEER

掃對方的 QR Code,給一個讚美

用手機掃同學的 QR Code,打開他們的 App。給一個具體讚美:「我最喜歡你 App 的______」

5
15′
REMIX

調整分享文字

修改 App 的標題和描述,令人在 WhatsApp 分享時更吸引。試試用 AI 生成一句吸引人的 App 介紹語。

6
10′
SHARE

WhatsApp 分享給家人,預告展示堂

立即把 QR Code 截圖用 WhatsApp 發給一個家人或朋友。預告:第六堂向全班展示,說明理念和功能。

第五堂完成!🎉

你的 App 已經在網上!任何人都可以掃你的 QR Code 看到它。下堂是最後一堂——向全班展示你的作品!

← 第四堂 第六堂:展示 →