系列文章傳送門:[AI線上應用實戰] 如何快速建立你的AI線上應用 使用Bubble.io #Bubble.io教學
Bubble簡單歸簡單,但遇到想要更大的自由度的時候,處理起來的複雜度可不比自架來的好處理,雖然Bubble有強大的Plugin支援,但如果你很窮、沒有免費好用的Plugin,或是功能太冷門,只好自己寫囉。
在這邊總結一句,Bubble Marketplace的Plugin很多都可以直接See Code甚至是Fork,都是很好的學習對象
你真的需要寫Plugin嗎?
如果只想要在網頁中插入簡單的程式邏輯,可以直接使用Html Plugin或是Javascript插件。會是更簡單的選擇
Plugin種類
Plugin有三種功能
- API calls: 可以製作會呼叫API的插件,門檻最低,適合串接各類API。使用範例: 串接OpenAI
- Element: 撰寫可在Bubble使用的元件,門檻最高,需同時了解html/css/js等知識。可以透過
instance
存取/寫入畫面元件。使用範例: 創建特殊多媒體撥放元件 - Action: 可執行server-side及client-side的背景任務。缺乏
instance
參數。使用範例: 背景轉檔
實際案例示範
進入https://bubble.io/home/plugins,選擇創建插件

撰寫一般Plugin資訊

如果需要設定像是API key之類的項目,可以在Shared裡的Additional Keys填寫

撰寫插件功能. API
設定API非常簡單,在GUI介面裡一個一個填即可

撰寫插件功能. Element篇
首先設定該Element有哪些Field (member value)

撰寫JS程式碼。剛剛設定的field value可以透過 properties.field_name
存取

撰寫插件功能. Action篇
一樣設定Field後撰寫JS Function

發布
可以直接發布或是以私人模式選擇要使用的App

發布過後,就可以在授權的APP的marketplace找到他,此外,如果有版本更新,記得也要在APP Plugin頁面主動upgrade喔

此外,如果需要邊開發邊測試,可以在左側指定要用在哪個APP進行測試,就會在指定的APP中授權一個plugin_name (testing)的插件,在plugin editor做的改動都會即時更新到APP中 (一般走"發布、升級"程序的是不會即時更新的)

測試完成之後,如果要將測試plugin替換成正式版本,可以直接使用元件的replace功能

想要更有系統的學習嗎?
歡迎至Google Books、Readmoo購買《零基礎開發AI應用: Bubble實戰指南》。在本書中我們深入淺出的教您使用Bubble平台,並結合最新最潮的AI技術,讓你輕鬆完成你的創業夢。
