今晚把 App 完善、除錯、發佈上網,生成你的專屬 QR Code。完成後,你可以即時用 WhatsApp 把 App 分享給任何人。
把上堂的初稿最後修改:確認文字正確、功能可用、外觀滿意。用自然語言告訴 AI 最後的修改要求。
POE / Google AI Studio把 AI 生成的 HTML 代碼,貼入免費發佈平台(Netlify Drop 或 GitHub Pages),得到一個真實的網址。
netlify.com/drop把網址輸入免費 QR Code 生成工具,得到一個可以掃描的 QR Code,截圖存好,準備分享。
qr-code-generator.comAI 生成的代碼不一定完美,這是正常的。重要的是知道怎樣用語言告訴 AI 修改。
在手機上看,文字或按鈕的位置不對。
告訴 AI:「請優化手機版面,所有內容在手機上要垂直排列,按鈕要夠大可以用手指按。」覺得顏色太難看,或字體不夠清楚。
告訴 AI:「請把主色改為______,按鈕顏色改為______,字體改用 Noto Sans TC。」按了按鈕但什麼都沒發生。
告訴 AI:「Shop Now 按鈕按下去應該連結到 https://wa.me/85290784822,請修改。」頁面太長或內容太密集,不夠清爽。
告訴 AI:「請把每個 section 的 padding 增加,讓頁面更有空間感,內容之間要有更多留白。」App 發佈後,你會得到一個真實的網址(例如 yourapp.netlify.app)。把這個網址輸入 QR Code 生成工具,得到一個可以用手機掃描的圖片。把這個 QR Code 截圖,可以放在 LinkedIn、Instagram、CV、或直接用 WhatsApp 分享。
🔗 任何人掃描後,就可以即時看到你的 App!每人說:「我上堂的 App,我想在今晚改善______」。設定今晚的個人目標。
導師示範完整流程:把錯誤截圖貼回 AI 修改 → 複製 HTML → 貼入 Netlify Drop → 得到網址 → 生成 QR Code。
全程手機示範(1) 完成最後一輪修改
(2) 複製 HTML 代碼,貼入 Netlify Drop 發佈
(3) 把網址輸入 QR Code 工具,截圖存好
用手機掃同學的 QR Code,打開他們的 App。給一個具體讚美:「我最喜歡你 App 的______」
修改 App 的標題和描述,令人在 WhatsApp 分享時更吸引。試試用 AI 生成一句吸引人的 App 介紹語。
立即把 QR Code 截圖用 WhatsApp 發給一個家人或朋友。預告:第六堂向全班展示,說明理念和功能。
你的 App 已經在網上!任何人都可以掃你的 QR Code 看到它。下堂是最後一堂——向全班展示你的作品!