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

閱讀時間約 1 分鐘

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
















    1會員
    16Content count
    留言0
    查看全部
    發表第一個留言支持創作者!
    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
    隨著科技的發展,程式代寫已成為一個快速增長的市場。從簡單的程式到複雜的專案開發,程式代寫的範圍極為廣泛。這篇文章討論了選擇代寫服務的原因以及一元賣場詐騙的相關議題。
    當提到程式和代寫,多數人可能會立刻想到學生尋找代寫作業的情境,或者是專業人士為某一專案尋找代寫程式的服務。不過,當你真正涉入這個領域,你會驚訝地發現:程式代寫的價格範圍實在是天差地遠,從幾百到數十萬都有。但是,為什麼會有如此大的價差呢?
    在代寫產業迅速增長的背景下,代寫公司和類似服務通過現代通訊工具提供快速便捷的學術作品代寫。然而,這種方便背後存在風險。代寫論文違法且可能導致學位撤銷,而代寫程式存在抄襲和低質量風險。建議學生識別合法、誠信的商家,關注價格、評價、溝通和賣家背景等要素,並避免違規行為,確保學術誠信和作業品質。
    你可能也想看
    Thumbnail
    重點摘要: 1.9 月降息 2 碼、進一步暗示年內還有 50 bp 降息 2.SEP 上修失業率預期,但快速的降息速率將有助失業率觸頂 3.未來幾個月經濟數據將繼續轉弱,經濟復甦的時點或是 1Q25 季底附近
    Thumbnail
    近期的「貼文發佈流程 & 版型大更新」功能大家使用了嗎? 新版式整體視覺上「更加凸顯圖片」,為了搭配這次的更新,我們推出首次貼文策展 ❤️ 使用貼文功能並完成這次的指定任務,還有機會獲得富士即可拍,讓你的美好回憶都可以用即可拍珍藏!
    Thumbnail
    在現今以及未來的工作中,AI 技能將扮演關鍵角色。為了滿足這一需求,許多頂尖科技公司和大學提供了免費的線上 AI 課程,讓有興趣進修、提升能力的讀者可以選擇適合自己的課程。
    Thumbnail
    隨著ChatGPT問世以來,AI持續在不同領域上發揮作用。虛擬人已能代理人類完成特定任務,是新興科技從工具擴展至落地應用服務的關鍵產物。 透過觀察AI如何賦能Web3的發展,以及觀測各種國際創新應用案例,請參加此免費研討會,了解「虛擬人應用發展趨勢」和「從AI賦能Web3新興應用看發展趨勢」二個議題
    撰文:左手 有在投資的大家都知道,這一年來各個AI股都飆漲了好一大波,緯創,廣達,鴻海,美股的NVDA, SMCI等。 那到底現在手上還有貨的我們,該下車了嗎? 手上沒貨的我們,是否還能上車,抑或是等待可能發生的回檔或是大跌。 以下是雙手的分析
    Thumbnail
    文、圖/阿物科技提供   根據 Google 官方最新的公告,2024年第一季將為全球 1% 的 Chrome 使用者淘汰第三方Cookie,而第三季起將全面逐步停止支援。對於目前全球市占率超過6成的 Chrome 來說,至少會有超過3000萬個用戶,將在第一季受影響。   身處 C
    Thumbnail
    探索 8 種 NoCode 自動化工具應用,涵蓋從表單回覆、Facebook Ads 數據同步,到商機資料 AI 分析及資料庫異動通知。提高客服效率、優化內容管理,並透過 Webhook 實現數據即時更新,有效提升工作流程效率和數據準確性,幫助提升業務創新與競爭力。
    Thumbnail
    「慢讀好食刻」精選116本「食」用美學,主要是由「全國公共圖書館巡迴展」所推出關於美味飲食、健康瘦身、AI農業應用、農產品銷售經濟相關好書書單,探討主題相當多元有趣,個人在一次圖書館取書日常時,剛好看到的好消息分享給大家!
    Thumbnail
    最近stable diffusion要塞入太多的model,非常佔用空間,所以找了免費每天也有100點的 tensor.art 這網站試試看,馬上可以反應,做出來的效果我展示如下 這邊有無數的新帖子跟model可以嘗試,又不會耗損電腦資源,每天100點非常的夠用了。
    Thumbnail
    AI正在改變商業運作,尤其在客戶服務、營銷、運營、人力資源和金融服務等領域。聊天機器人和語音助理提供即時支援;數據分析助力營銷個性化和需求預測;自動化履歷篩選加速招聘;金融領域則看到更精確的信用評估和投資建議。隨著技術進步,AI在商業中的應用將持續擴展。
    Thumbnail
    我想這6個月你我都被AI的新聞淹沒! AI寫作感覺很輕鬆,但是根據我這5個月實踐的經驗,AI寫作方面還是有很多限制。 但知道AI的極限,還是很有幫助加速我們寫文章的流程! 實踐AI寫作5個月,這是我發現AI「能」與「不能」的3個秘密:
    Thumbnail
    ☆2019美國「鸚鵡螺圖書獎」獲獎書籍☆ ☆普立茲獎得主《第六次大滅絕》作者 伊麗莎白‧寇伯特激賞之書☆ ☆亞馬遜書店逾兩百則評價,讀者平均四點六顆星好評推薦☆ ➢➢嚴峻的氣候與環境挑戰當前,全球糧食危機迫在眉睫, 想要繼續餵飽全世界,就得在傳統與與創新間找出「第三條路」!
    Thumbnail
    重點摘要: 1.9 月降息 2 碼、進一步暗示年內還有 50 bp 降息 2.SEP 上修失業率預期,但快速的降息速率將有助失業率觸頂 3.未來幾個月經濟數據將繼續轉弱,經濟復甦的時點或是 1Q25 季底附近
    Thumbnail
    近期的「貼文發佈流程 & 版型大更新」功能大家使用了嗎? 新版式整體視覺上「更加凸顯圖片」,為了搭配這次的更新,我們推出首次貼文策展 ❤️ 使用貼文功能並完成這次的指定任務,還有機會獲得富士即可拍,讓你的美好回憶都可以用即可拍珍藏!
    Thumbnail
    在現今以及未來的工作中,AI 技能將扮演關鍵角色。為了滿足這一需求,許多頂尖科技公司和大學提供了免費的線上 AI 課程,讓有興趣進修、提升能力的讀者可以選擇適合自己的課程。
    Thumbnail
    隨著ChatGPT問世以來,AI持續在不同領域上發揮作用。虛擬人已能代理人類完成特定任務,是新興科技從工具擴展至落地應用服務的關鍵產物。 透過觀察AI如何賦能Web3的發展,以及觀測各種國際創新應用案例,請參加此免費研討會,了解「虛擬人應用發展趨勢」和「從AI賦能Web3新興應用看發展趨勢」二個議題
    撰文:左手 有在投資的大家都知道,這一年來各個AI股都飆漲了好一大波,緯創,廣達,鴻海,美股的NVDA, SMCI等。 那到底現在手上還有貨的我們,該下車了嗎? 手上沒貨的我們,是否還能上車,抑或是等待可能發生的回檔或是大跌。 以下是雙手的分析
    Thumbnail
    文、圖/阿物科技提供   根據 Google 官方最新的公告,2024年第一季將為全球 1% 的 Chrome 使用者淘汰第三方Cookie,而第三季起將全面逐步停止支援。對於目前全球市占率超過6成的 Chrome 來說,至少會有超過3000萬個用戶,將在第一季受影響。   身處 C
    Thumbnail
    探索 8 種 NoCode 自動化工具應用,涵蓋從表單回覆、Facebook Ads 數據同步,到商機資料 AI 分析及資料庫異動通知。提高客服效率、優化內容管理,並透過 Webhook 實現數據即時更新,有效提升工作流程效率和數據準確性,幫助提升業務創新與競爭力。
    Thumbnail
    「慢讀好食刻」精選116本「食」用美學,主要是由「全國公共圖書館巡迴展」所推出關於美味飲食、健康瘦身、AI農業應用、農產品銷售經濟相關好書書單,探討主題相當多元有趣,個人在一次圖書館取書日常時,剛好看到的好消息分享給大家!
    Thumbnail
    最近stable diffusion要塞入太多的model,非常佔用空間,所以找了免費每天也有100點的 tensor.art 這網站試試看,馬上可以反應,做出來的效果我展示如下 這邊有無數的新帖子跟model可以嘗試,又不會耗損電腦資源,每天100點非常的夠用了。
    Thumbnail
    AI正在改變商業運作,尤其在客戶服務、營銷、運營、人力資源和金融服務等領域。聊天機器人和語音助理提供即時支援;數據分析助力營銷個性化和需求預測;自動化履歷篩選加速招聘;金融領域則看到更精確的信用評估和投資建議。隨著技術進步,AI在商業中的應用將持續擴展。
    Thumbnail
    我想這6個月你我都被AI的新聞淹沒! AI寫作感覺很輕鬆,但是根據我這5個月實踐的經驗,AI寫作方面還是有很多限制。 但知道AI的極限,還是很有幫助加速我們寫文章的流程! 實踐AI寫作5個月,這是我發現AI「能」與「不能」的3個秘密:
    Thumbnail
    ☆2019美國「鸚鵡螺圖書獎」獲獎書籍☆ ☆普立茲獎得主《第六次大滅絕》作者 伊麗莎白‧寇伯特激賞之書☆ ☆亞馬遜書店逾兩百則評價,讀者平均四點六顆星好評推薦☆ ➢➢嚴峻的氣候與環境挑戰當前,全球糧食危機迫在眉睫, 想要繼續餵飽全世界,就得在傳統與與創新間找出「第三條路」!