[AI線上應用實戰] Bubble.io Plugin製作: 基礎篇

系列文章傳送門:[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功能