[AI線上應用實戰] Bubble.io 快速建立浮動聊天室

ECOE

發佈於資訊、程式等個房間

更新於 2024/12/26發佈於 2024/08/22閱讀時間約 2 分鐘

系列文章傳送門:

[AI線上應用實戰] 如何快速建立你的AI線上應用使用Bubble.io #Bubble.io教學

在這篇文章中，將學會如何用Bubble快速建立Floating Box

通常使用Repeating Group元件可以快速達到呈列過去訊息，但是方向會是相反的，需要使用額外插件改變方向

實際步驟

加入Chatroom Datatype:

可以創建一個Reusable element

加入RG插件，並且依照常見排版建好頁面

在Repeating Group Text的ID Attribute中，加入rg1

RG1元件的RepeatingGroups ID設定rg1

在Repeating Group的框框內，加入想要加入的內容，例如每則訊息的ID、text、Icon即可，例如，在其中加入text元件，其內容是

記得Search for需要按照日期Descending排列

此外，也可以建立workflow，監測是否有需要觸發AI，例如當用戶使用@bot的時候，就觸發OpenAI chatcompletion

想要更有系統的學習嗎?

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

ECOE的沙龍資訊、程式ECOE的沙龍Bubble.io教學

ECOE的沙龍

3會員

41內容數

留言

留言分享你的想法！

ECOE的沙龍的其他內容

[AI線上應用實戰] ToolBox Plugin 在Bubble.io前後端寫JS

在某些狀況下，難免會有一些需要高度客製化的場景、或是想要使用js(不管是自己寫還是想要使用既有的code or from chatgpt)，這時候，Toolbox Plugin 就是必學的。 Toolbox Plugin分成Server side以及Client side。兩者有細微差異

#bubble #lowcode #nocode

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

在[AI線上應用實戰] Bubble.io Plugin製作: 基礎篇我們介紹了Plugin的三種功能。然而實際製作上有很多細節要注意，在這篇文章中，將更詳細介紹如何使用Plugin建立Element元件實際案例 Fields 這個部分最簡單，會作為update(每次元件的field或元

[AI線上應用實戰] Bubble.io 用戶登入 + OAuth

如果自行撰寫應用後端，光是使用者管理就是挺麻煩的一件事。筆者之前撰寫Fastapi+OAuth+database就花上不少時間。Bubble.io可以則可以快速完成登入機制此外，我們也可以搭配OAuth，允許使用者使用第三方登入，這樣甚至可以不用在Bubble應用中，處理reset passwo

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

Bubble簡單歸簡單，但遇到想要更大的自由度的時候，處理起來的複雜度可不比自架來的好處理，雖然Bubble有強大的Plugin支援，但如果你很窮、沒有免費好用的Plugin，或是功能太冷門，只好自己寫囉。

[AI線上應用實戰] AWS Lambda + API Gateway快速架設API: 使用Python

AWS Lambda是? AWS Lambda 就像是開發者的救星，因為它是一種 Serverless 服務，意思是你不用再為架設和維護伺服器煩惱了。對於每天都忙得焦頭爛額的開發者來說，產品開發已經夠讓人抓狂了，還要處理伺服器的設定和維運(e.g. OS、Network、機器管理、防火牆)，想想就

[AI線上應用實戰] 如何快速建立你的AI線上應用使用Bubble.io #Bubble.io教學

在這系列文章中，將會深入淺出介紹，如何整合下列工具，快速建立你的AI線上應用 Bubble.io 主網站及伺服器 AWS - Lambda: 快速架設簡單邏輯的API，寫個小小的python function立刻就上線，不需要大費周章額外架backend - S3: 提供檔案存取，可透過Pr

#bubble #AI #lowcode

[AI線上應用實戰] ToolBox Plugin 在Bubble.io前後端寫JS

在某些狀況下，難免會有一些需要高度客製化的場景、或是想要使用js(不管是自己寫還是想要使用既有的code or from chatgpt)，這時候，Toolbox Plugin 就是必學的。 Toolbox Plugin分成Server side以及Client side。兩者有細微差異

#bubble #lowcode #nocode

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

在[AI線上應用實戰] Bubble.io Plugin製作: 基礎篇我們介紹了Plugin的三種功能。然而實際製作上有很多細節要注意，在這篇文章中，將更詳細介紹如何使用Plugin建立Element元件實際案例 Fields 這個部分最簡單，會作為update(每次元件的field或元

[AI線上應用實戰] Bubble.io 用戶登入 + OAuth

如果自行撰寫應用後端，光是使用者管理就是挺麻煩的一件事。筆者之前撰寫Fastapi+OAuth+database就花上不少時間。Bubble.io可以則可以快速完成登入機制此外，我們也可以搭配OAuth，允許使用者使用第三方登入，這樣甚至可以不用在Bubble應用中，處理reset passwo

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

Bubble簡單歸簡單，但遇到想要更大的自由度的時候，處理起來的複雜度可不比自架來的好處理，雖然Bubble有強大的Plugin支援，但如果你很窮、沒有免費好用的Plugin，或是功能太冷門，只好自己寫囉。

[AI線上應用實戰] AWS Lambda + API Gateway快速架設API: 使用Python

AWS Lambda是? AWS Lambda 就像是開發者的救星，因為它是一種 Serverless 服務，意思是你不用再為架設和維護伺服器煩惱了。對於每天都忙得焦頭爛額的開發者來說，產品開發已經夠讓人抓狂了，還要處理伺服器的設定和維運(e.g. OS、Network、機器管理、防火牆)，想想就

[AI線上應用實戰] 如何快速建立你的AI線上應用使用Bubble.io #Bubble.io教學

在這系列文章中，將會深入淺出介紹，如何整合下列工具，快速建立你的AI線上應用 Bubble.io 主網站及伺服器 AWS - Lambda: 快速架設簡單邏輯的API，寫個小小的python function立刻就上線，不需要大費周章額外架backend - S3: 提供檔案存取，可透過Pr

#bubble #AI #lowcode

[AI線上應用實戰] 如何快速建立你的AI線上應用 使用Bubble.io #Bubble.io教學

實際步驟

想要更有系統的學習嗎?

[AI線上應用實戰] 如何快速建立你的AI線上應用使用Bubble.io #Bubble.io教學