2024-08-17|閱讀時間 ‧ 約 8 分鐘

[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功能


    想要更有系統的學習嗎?

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

























    分享至
    成為作者繼續創作的動力吧!
    從 Google News 追蹤更多 vocus 的最新精選內容從 Google News 追蹤更多 vocus 的最新精選內容

    作者的相關文章

    ECOE的沙龍 的其他內容

    你可能也想看

    發表回應

    成為會員 後即可發表留言
    © 2024 vocus All rights reserved.