[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,選擇創建插件

vocus|新世代的創作平台

撰寫一般Plugin資訊

vocus|新世代的創作平台

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

vocus|新世代的創作平台


撰寫插件功能. API

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

vocus|新世代的創作平台


撰寫插件功能. Element篇

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

vocus|新世代的創作平台

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

vocus|新世代的創作平台


撰寫插件功能. Action篇

一樣設定Field後撰寫JS Function

vocus|新世代的創作平台


發布

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

vocus|新世代的創作平台

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

vocus|新世代的創作平台

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

vocus|新世代的創作平台


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

vocus|新世代的創作平台


想要更有系統的學習嗎?

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

vocus|新世代的創作平台

























留言
avatar-img
ECOE的沙龍
4會員
44內容數
ECOE的沙龍的其他內容
2025/02/03
付費工具:Mathpix 可以用螢幕矩形截圖的方式快速將數學公式、表格轉乘latex,用於latex文件或是Markdown,但月費蠻高的 免費替代品pix2tex 原始碼: https://github.com/lukas-blecher/LaTeX-OCR 精準度比mathpix差
Thumbnail
2025/02/03
付費工具:Mathpix 可以用螢幕矩形截圖的方式快速將數學公式、表格轉乘latex,用於latex文件或是Markdown,但月費蠻高的 免費替代品pix2tex 原始碼: https://github.com/lukas-blecher/LaTeX-OCR 精準度比mathpix差
Thumbnail
2024/12/31
在購買電腦支架時,常常需要考量電腦主機的重量,一台電腦具體而言多重呢? 以筆者的主機為例 機殼: 8kg (MONTECH 君主 Air 1000 Silent 靜音版 ATX) 顯示卡: 0.753kg (GeForce RTX™ 3060 VENTUS 3X 12G OC) 主機板: 1.
2024/12/31
在購買電腦支架時,常常需要考量電腦主機的重量,一台電腦具體而言多重呢? 以筆者的主機為例 機殼: 8kg (MONTECH 君主 Air 1000 Silent 靜音版 ATX) 顯示卡: 0.753kg (GeForce RTX™ 3060 VENTUS 3X 12G OC) 主機板: 1.
2024/11/15
(詳細API參考: Advanced Reference) 使用GPU是AI研究、工程中不可或缺的一部份, VRAM 使用對於深度學習和高性能計算領域至關重要。有效分析和管理 VRAM 使用能幫助我們提升模型效率,避免不必要的記憶體(內存)溢出問題。 本文將帶你快速上手 NVIDIA 的 Nsi
Thumbnail
2024/11/15
(詳細API參考: Advanced Reference) 使用GPU是AI研究、工程中不可或缺的一部份, VRAM 使用對於深度學習和高性能計算領域至關重要。有效分析和管理 VRAM 使用能幫助我們提升模型效率,避免不必要的記憶體(內存)溢出問題。 本文將帶你快速上手 NVIDIA 的 Nsi
Thumbnail
看更多
你可能也想看
Thumbnail
說明Flutter 插件(Plugin)專案範例的架構與實際載入並執行在各平台的顯示畫面
Thumbnail
說明Flutter 插件(Plugin)專案範例的架構與實際載入並執行在各平台的顯示畫面
Thumbnail
介紹有關於一些小修改的方便插件。
Thumbnail
介紹有關於一些小修改的方便插件。
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
在這裡跟大家推薦方便的插件功能,會附上來源跟作者,並且在此篇說明該插件的介紹跟如何使用。
Thumbnail
在這裡跟大家推薦方便的插件功能,會附上來源跟作者,並且在此篇說明該插件的介紹跟如何使用。
Thumbnail
其實要為專案建立操作介面的方式很多,除了網頁之外,還能另外寫個專門的手機 APP 連線,或是乾脆升級算法,讓我們能隨口喊一聲「嘿OO!」就搞定,不過⋯
Thumbnail
其實要為專案建立操作介面的方式很多,除了網頁之外,還能另外寫個專門的手機 APP 連線,或是乾脆升級算法,讓我們能隨口喊一聲「嘿OO!」就搞定,不過⋯
Thumbnail
Blaze Beta 是GPT-4 驅動的文字轉換為Webflow 元件的工具。它使您能夠用自然語言描述UI 元件,並在Finsweet Client-First 的分類系統中為您建立可複製的Webflow 元件。
Thumbnail
Blaze Beta 是GPT-4 驅動的文字轉換為Webflow 元件的工具。它使您能夠用自然語言描述UI 元件,並在Finsweet Client-First 的分類系統中為您建立可複製的Webflow 元件。
Thumbnail
JavaScript 能做許多事,尤其透過瀏覽器的 API 或套件,我們得以悠游於巨量資料中,將資料轉換為與使用者溝通的介面,以下就來分享 15 個實用的 Vanilla JS 程式碼...
Thumbnail
JavaScript 能做許多事,尤其透過瀏覽器的 API 或套件,我們得以悠游於巨量資料中,將資料轉換為與使用者溝通的介面,以下就來分享 15 個實用的 Vanilla JS 程式碼...
Thumbnail
有沒有想過,即使沒有任何編程背景,你的創意也能在六個月內轉化成真實的App?我可以以自身經歷跟你說有了 No-Code Tool (無代碼工具) 和 AI 的幫助,這一切都是可能的!你一行 code 都不需要打,甚至也無須學習任何編程語言!沒有什麼比實踐一個自小認為不可能的任務還振奮人心的事了!
Thumbnail
有沒有想過,即使沒有任何編程背景,你的創意也能在六個月內轉化成真實的App?我可以以自身經歷跟你說有了 No-Code Tool (無代碼工具) 和 AI 的幫助,這一切都是可能的!你一行 code 都不需要打,甚至也無須學習任何編程語言!沒有什麼比實踐一個自小認為不可能的任務還振奮人心的事了!
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
有了這個插件,任何人都可以在不了解 JavaScript 的情況下,輕鬆製作點擊和觸碰遊戲。
Thumbnail
有了這個插件,任何人都可以在不了解 JavaScript 的情況下,輕鬆製作點擊和觸碰遊戲。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News