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

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

ECOE-avatar-img
發佈於資訊、程式 個房間
更新於 發佈於 閱讀時間約 4 分鐘

系列文章傳送門:[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,選擇創建插件

raw-image

撰寫一般Plugin資訊

raw-image

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

raw-image


撰寫插件功能. API

設定API非常簡單,在GUI介面裡一個一個填即可

raw-image


撰寫插件功能. Element篇

首先設定該Element有哪些Field (member value)

raw-image

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

raw-image


撰寫插件功能. Action篇

一樣設定Field後撰寫JS Function

raw-image


發布

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

raw-image

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

raw-image

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

raw-image


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

raw-image


想要更有系統的學習嗎?

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

raw-image

























avatar-img
ECOE的沙龍
3會員
41內容數
留言
avatar-img
留言分享你的想法!
ECOE的沙龍 的其他內容
AWS Lambda是? AWS Lambda 就像是開發者的救星,因為它是一種 Serverless 服務,意思是你不用再為架設和維護伺服器煩惱了。對於每天都忙得焦頭爛額的開發者來說,產品開發已經夠讓人抓狂了,還要處理伺服器的設定和維運(e.g. OS、Network、機器管理、防火牆),想想就
在這系列文章中,將會深入淺出介紹,如何整合下列工具,快速建立你的AI線上應用 Bubble.io 主網站及伺服器 AWS - Lambda: 快速架設簡單邏輯的API,寫個小小的python function立刻就上線,不需要大費周章額外架backend - S3: 提供檔案存取,可透過Pr
隨著科技的發展,程式代寫已成為一個快速增長的市場。從簡單的程式到複雜的專案開發,程式代寫的範圍極為廣泛。這篇文章討論了選擇代寫服務的原因以及一元賣場詐騙的相關議題。
當提到程式和代寫,多數人可能會立刻想到學生尋找代寫作業的情境,或者是專業人士為某一專案尋找代寫程式的服務。不過,當你真正涉入這個領域,你會驚訝地發現:程式代寫的價格範圍實在是天差地遠,從幾百到數十萬都有。但是,為什麼會有如此大的價差呢?
在代寫產業迅速增長的背景下,代寫公司和類似服務通過現代通訊工具提供快速便捷的學術作品代寫。然而,這種方便背後存在風險。代寫論文違法且可能導致學位撤銷,而代寫程式存在抄襲和低質量風險。建議學生識別合法、誠信的商家,關注價格、評價、溝通和賣家背景等要素,並避免違規行為,確保學術誠信和作業品質。
AWS Lambda是? AWS Lambda 就像是開發者的救星,因為它是一種 Serverless 服務,意思是你不用再為架設和維護伺服器煩惱了。對於每天都忙得焦頭爛額的開發者來說,產品開發已經夠讓人抓狂了,還要處理伺服器的設定和維運(e.g. OS、Network、機器管理、防火牆),想想就
在這系列文章中,將會深入淺出介紹,如何整合下列工具,快速建立你的AI線上應用 Bubble.io 主網站及伺服器 AWS - Lambda: 快速架設簡單邏輯的API,寫個小小的python function立刻就上線,不需要大費周章額外架backend - S3: 提供檔案存取,可透過Pr
隨著科技的發展,程式代寫已成為一個快速增長的市場。從簡單的程式到複雜的專案開發,程式代寫的範圍極為廣泛。這篇文章討論了選擇代寫服務的原因以及一元賣場詐騙的相關議題。
當提到程式和代寫,多數人可能會立刻想到學生尋找代寫作業的情境,或者是專業人士為某一專案尋找代寫程式的服務。不過,當你真正涉入這個領域,你會驚訝地發現:程式代寫的價格範圍實在是天差地遠,從幾百到數十萬都有。但是,為什麼會有如此大的價差呢?
在代寫產業迅速增長的背景下,代寫公司和類似服務通過現代通訊工具提供快速便捷的學術作品代寫。然而,這種方便背後存在風險。代寫論文違法且可能導致學位撤銷,而代寫程式存在抄襲和低質量風險。建議學生識別合法、誠信的商家,關注價格、評價、溝通和賣家背景等要素,並避免違規行為,確保學術誠信和作業品質。