Bolt.new AI 教學 ( AI 網頁開發工具)

Bolt.new AI 教學 ( AI 網頁開發工具)

Bolt.new 是一個 AI 網頁開發平台,利用 StackBlitz WebContainer 技術,只需撰寫簡單提示詞,即可自動運行複雜的應用程序。

🔗 工具連結:https://bolt.new/

Bolt.new AI 工具簡介

最後更新於 2024 年 10 月 14 日 – by Lazy Kar

Bolt.new 是一個 AI 網頁開發平台,利用 StackBlitz 的 WebContainer 技術,用戶只需撰寫簡單的提示詞,Bolt.new 即可自動運行、編輯和部署複雜的全端應用程序。

整個過程都在瀏覽器中完成,支援所有主流的 JavaScript 函式庫和 Node 套件,不需額外安裝軟體及本地安裝,可以看做是 V0 和 Replit 的結合體。

Bolt.new 提供免費版及付費版。免費版有限度使用,由 Sonnet 3.5 提供支持,具有 200K 上下文窗口。

Bolt.new 最新支援直接開啟 GitHub Repository,執行內容並進行直接提問、修改、繼續編碼等。

Bolt.new 特點

1. 完整的開發環境

Bolt․new 提供一鍵部署的功能,可直接部署到 Netlify 和 Cloudflare,無需登錄或配置複雜的憑證資訊。

2. 全端開發流程

透過簡單提示指令 (Prompt),即可產生功能齊全的全端應用程序,包括前後端、資料庫。從 UI 到網站上線,一條龍服務,無需單獨配置伺服器或雲端服務。

3  即時預覽和生成程式碼

提供預覽效果,以及程式碼和程式碼編輯功能。

4. 修復程式碼

Bolt.new 能夠即時偵測程式碼錯誤並修復。

如何使用 Bolt.new  

1. 開始項目

進入 Bolt.new 網站,在文字輸入框中撰寫簡單的提示詞,例如 「Start a blog with Astro」。

Bolt.new 支援上傳文件和提示詞增強,點擊「✨ 增強」圖標,AI 可以增強提示詞。

完成後,點撃「➡️」。

Bolt.new AI 教學

2. 編輯與優化

Bolt.new 運行應用完成後,在上方提供程式碼及頁面預覽選項,供用戶即時切換程式碼及預覽。

通過 Bolt.new 的編輯功能,用戶可以直接在瀏覽器中更改程式碼。Bolt.new AI 還提供即時回饋,幫助用戶優化和改進程式碼。

在下方輸入框輸入文字提示詞,可以繼續優化頁面或應用程式。

Bolt.new AI 程式碼優化教學

3. 部署應用

完成應用程式建置後,右上方點撃「Deploy」,即可一鍵部署到 Netlify。

Bolt․new 支援應用程式直接部署到 Netlify 和 Cloudflare。

4. 最新支援直接開啟 GitHub Repository

現在只需在 GitHub URL 前新增 bolt.new 即可直接開啟 GitHub Repository。不過,此功能處於測試階段,目前小到中型的 Repository 較易成功。

以 Music Player Github “https://github.com/codewithsadee/music-player” 為例GitHub URL 加入 bolt.new,如下圖,點撃鍵盤「Enter」,Bolt.new 會直接開啟 GitHub Repository。

然後就可以直接在瀏覽器中直接執行 GitHub Repository 內容,並進行提問、修改、繼續編碼等。

Bolt,new 最新支援直接開啟 GitHub Repository

小編 Lazy Kar 用後感:

Bolt.new 界面簡單易用,不懂程式碼,亦可以通過對話形式製作網頁、To Do List、計算機等,還可以一鍵部署。

不過 Bolt.new 不儲存對話,關閉頁面後,所有對話會消失,不可以返回之前的版本。

Bolt.new 教學視頻:

Bolt.new 開啟 GitHub Repository 教學

👉  Stackblitz Webcontainers

👉  Bolt.new Github

👉  Bolt.new

────⋆⋅☆⋅⋆──────⋆⋅☆⋅⋆─────

Lazy Kar 精選  AI 工具系列:  

👉 學生必備實用 AI 工具

👉 創業必備實用 AI 工具

────⋆⋅☆⋅⋆──────⋆⋅☆⋅⋆─────

延伸閱讀:  

👉 推薦 5 個免費好用的 AI Logo 設計生成器

👉 推薦 5 款 3D 模型建模 AI 工具

👉 7 個好用 AI 圖片轉影片生成器

👉 推薦 8 個免費好用 AI 音樂生成工具

👉 AI 自動生成資訊圖表 Infographic

==========================

不想錯過最新科技資訊? 訂閱 👉 Pulse AI 電子報

✅ 快速掌握最新 AI 工具、科技趨勢及品牌應用!

✅ 免費訂閱,節省資料搜集時間!

✅ 加快學習如何運用 AI,減低被淘汰機會!

✅ 每周幾分鐘,工作、學習更高效!

👉 先閱讀往期 Pulse AI 電子報,再決定!

==========================

Similar Posts