iT邦幫忙

2025 iThome 鐵人賽

DAY 7
0

做完之後怎麼變成自己的?

只在網頁上面玩太無趣了吧

⚠️資訊安全: 如果使用到API KEY 等 ,需注意部屬環境的安全性,切勿公開API key

你可能會想,這東西只在網頁上用能幹嘛
那讓我來告訴你

在電腦本地部屬

可以看到右上的部屬中,有下載這個選項
https://ithelp.ithome.com.tw/upload/images/20250921/20176017yvj9GP4fah.png

下載後你會獲得一個壓縮檔 ⬇️
https://ithelp.ithome.com.tw/upload/images/20250921/20176017rMW12VVjas.png

解壓縮後可以使用 VScode 等工具打開
打開後會有以下檔案
https://ithelp.ithome.com.tw/upload/images/20250921/2017601771mEeADAFP.png
我們可以直接看 README.md 裡面有寫啟動方式
幫你翻譯:

執行並部署你的 AI Studio 應用程式
這裡包含在本地執行你的應用程式所需的一切。
在本地執行
先決條件: Node.js
安裝依賴套件:
npm install
在 .env.local 檔案中,將 GEMINI_API_KEY 設定為你的 Gemini API 金鑰
執行應用程式:
npm run dev

雲端部屬

https://ithelp.ithome.com.tw/upload/images/20250921/20176017YGrav3cDHo.png
可以看到右上的部屬中,有 Github 與 Deploy 兩個選項

https://ithelp.ithome.com.tw/upload/images/20250921/20176017SRd7QrWCbo.png
可以選擇推上 Github 用 Github pages 部屬或者選擇 Deploy 使用 Google cloud 部屬
這樣可以快速架設你的成品在外網,也可以完成小型靜態網頁。
有關 Github pages 部屬教學,有問題的話可以在下方留言,我會解答

Google cloud 部屬的部分可以看這個影片:
https://www.youtube.com/watch?v=Ji3mg3HwiE4&list=WL

運用其他 AI 轉換設計語言

可以使用 AI Agent 或者普通AI,如 Gemini,最好使用 Canvas 功能輔助
AI 在有範本程式碼的情況下,轉換的成功率會比較高。


上一篇
Day 6 - 在 Google AI Studio 量產天氣 Web APP Part2
系列文
Android 不會只更新 UI ! 用 Vibe Coding ? 加速打造 Al-native App7
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言