
Bubble 可以說歐美的創業家、新創公司都非常喜歡的 No-Code 工具平台,也是建立 Web App 的首選工具。本篇將向你介紹 Bubble 提供了哪些功能?以及可以使用它製作什麼樣的App。我們也會將 Bubble 的 low code 編程方法與傳統的 Web App 開發進行比較,並且分析 Bubble 的優缺點給大家。
什麼是 Bubble?
Bubble 是一個無代碼可視化編程工具,也是一個 CMS 平台。跟所有的 No-code 工具相同,透過網頁的拖放界面即可建立專案。Bubble 也適合有一定程度的開發者,但它最主要吸引的點是那些不了解 Coding 卻想要製作一個 App 的新創家。

Bubble.io 的特色
Bubble 有超多的功能,但這篇只會針對它的重點功能來替大家講解:
- 用戶界面生成器:使用 Bubble 的 UI 構建器即可將 text 、圖像、icon、地圖、影片和其他常見 UI 元素等視覺元素拖放到其畫布中,且跟 Webflow 相同,它包含了自動化的響應式設計。
- 託管平台:使用拖放式 UI 構建器構建應用程序後,Bubble 會負責為你部署和託管。跟 Webflow 相同,它會自動儲存且能夠讓專案恢復到任何時間點。Bubble 也能夠輕易的擴展網站,它有提供服務器指標的圖表,像是頁面瀏覽量和服務器容量使用情況,因此你會知道自己的網站何時需要升級。
而 Bubble 作為一個平台的唯一缺點是不能在自己的服務器上託管用 Bubble 製作的App,也就是只能透過 Bubble來託管。
- 插件:可以將 Web 上各種工具的功能集成到你的 App 中,例如:如果你希望用戶使用他們的 Facebook 帳戶登錄,可以使用 Facebook 插件來實現。
- 同時協作:Bubble 允許最多 40 個協作者共同編輯網站或是應用程式,他對於團隊編輯非常友好。
可以用 Bubble 來做什麼?
由於其靈活性,可以使用 Bubble 構建任何類型的 Web App,除了原生App之外。
- CRUD App:這是允許用戶建立、讀取、更新和刪除數據的應用程序。今天的大多數應用程序實際上只是添加了不同功能的 CRUD 應用程序。因此有了構建 CRUD 應用程序的能力,基本上可以構建各種功能。這些應用程序像是 Amazon 或 YouTube。從本質上講,它們實際上只是 CRUD app 而已。
- Realtime App:這是可讓用戶通過聊天、音樂、影像通話或共享界面進行實時交流或協作。這些應用程序像是 Facebook Messenger、Discord 和 Slack。
- API 連接的 App:使用 Bubble,可以構建利用網路上的第三方 API 的應用程序。像是處理支付的 Stripe 或者處理搜索的 Algolia,透過串接 API 訪問的可能性是無窮無盡的。
- 響應式 App:無論在什麼設備上查看這些 App,都是非常適合的。利用 Bubble 來建立的 App 基本上都可以自動化響應式的畫面。

- Web App:這是可以添加到你的主螢幕以便於訪問的 Web App,像是路易莎的黑卡、比較早期的 line pay 等。

這邊可以查看使用 Bubble 構建的 APP 案例。
Bubble 不能做什麼 App?
- 原生 App:Bubble 沒辦法建立能夠在 Android 或 iOS 上運行、下載的 App。但若真的很製作一個 App 怎麼辦?唯一可行的選擇是建立 Web App 或者使用 React Native、Flutter 或 Cordova 等工具將 Web App 包裝在 Web 視圖中。
- 遊戲 App: 若你想要打造一個複雜圖形且需要大量算圖的遊戲 APP,那 Bubble 不太適合,畢竟 Bubble 是專門用於建立 Web APP,最多只能建立簡單的點選益智遊戲而已。
Bubble 的無代碼編程與傳統的 Web App開發差異?
我們將根據以下指標來比較 Bubble 與傳統 Web App 開發方式:
- 控制代碼和數據
- 開發速度
- 開發成本
- 運營成本
控制代碼和數據
Bubble 具有數據導出功能,允許通過 CSV 文件導出用戶建立的數據。唯一的缺點是一切都在 Bubble 的平台上運行,所以你不能真正導出你的應用程序並在其他地方運行它。Bubble 保證在開源許可下發布你的應用程序的源代碼。
使用傳統的 Web 開發,可以控制一切,因為源代碼是從頭開始編寫的,並且託管在你選擇的服務器上。
開發速度
Bubble 雖然提供了通過拖放界面構建 Web 應用程序所需的所有工具,使得開發過程比傳統的 Web 開發更快。但它還帶有一個學習曲線,這取決於你想要構建的東西。如果它是一個簡單的單頁應用程序,只做一兩件事,它可能需要幾個小時來學習。但是,如果它是一個相當複雜的應用程序,預計要投入一到三個月,然後才能變得足夠高效以快速構建應用程序。
使用傳統的 Web 開發,學習技術和工具可能需要至少三個月的時間。但根據各種因素,它很容易需要六個月到一年的時間。
總體而言,開發速度主要取決於開發者的經驗水平。如果你是一個完全的新手,Bubble 會更快。如果你已經有一些開發經驗,通過傳統路線構建你的應用程序通常會更快。沒錯!你的開發經驗可能會對使用 Bubble 構建應用程序的許多概念絕對會有所幫助。
開發成本
使用 Bubble,你幾乎可以自己構建應用程序,即使之前沒有經驗。Bubble 提供了大量免費資源來學習如何構建不同類型的應用程序。當然,你可以聘請其他人為你做這件事。但是使用 Bubble 的主要目的就是通過自己進行開發來降低開發成本。
對於傳統的 Web 開發,因為涉及到困難的編碼,在大多數的情況下必須聘請 Web 開發人員來開發你的App。
與傳統開發相比,使用 Bubble 開發應用程序的相關開發成本顯著降低。
營運成本
Bubble 有提供免費的個人計劃,可以讓準備利用 Bubble 來建立 App的企業家來提供一段學習及準備的時間,等你準備好啟動 App 後,必須切換到專業或生產計劃。
看下方的費用表可以試算一下,請一位開發工程師的薪水跟訂閱 Bubble 的方案對於營運成本來說會是相當大一筆差異。

Bubble 有一個稱為“單位”的概念,它基本上是為擴展而保留的服務器容量。一旦你的 App 獲得一定數量的活躍用戶,就需要額外的單位。可以看到每個計劃都有分配給它的總文件存儲分配,如果你的 App 存儲了大量用戶上傳的媒體,可能會更快地達到上限。而安裝的插件若有支援媒體儲存的服務,也需要額外服插件的訂閱費用。
另一方面,雖然透過傳統方式運行 App 的服務器有些每月只需 5 美元。唯一的缺點是你必須從頭開始設置所有內容 —— 例如 Web 服務器、數據庫和隊列服務器。實際上並不會只是每月支付 5 美元,因為還必須引入文件存儲、錯誤報告和部署服務。這些很容易增加總運行成本。
總而言之,營運成本的費用與運行你的 App 相關的成本將在很大程度上取決於你需要引入的服務和需要的服務器容量。!