[AI線上應用實戰] Bubble.io Workflow以及Backend Workflow

[AI線上應用實戰] Bubble.io Workflow以及Backend Workflow

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

系列文章傳送門:[AI線上應用實戰] 如何快速建立你的AI線上應用 使用Bubble.io #Bubble.io教學


在使用Bubble.io時,想要讓網頁動起來、具有某些動作邏輯(e.g. 當使用者點擊按鈕,就將使用者登入),就必須依靠撰寫Workflow。

Workflow的操作非常直白,每個元件也可以透過Attribute選單中的Add/Edit Workflow輕鬆加入對應的workflow。


基本Workflow使用

[比較簡單日後來補]

注意事項(這篇文章的精華、筆者的血淚)

使用Bubble io的workflow時,有諸多官方文件沒有提或是你也懶得看的注意事項,與她視覺化呈現給開發者的感受相當不同,要多加注意

1. 事件執行順序

raw-image

這絕對是最坑人之一,表面上workflow有標註Step,但事實上,每個step並不一定照著你指定的順序進行。實際規則如下

  • Frontend Workflow(每個page自己的workflow)原則上按順序進行,但是後者不會等到前者completed就會直接開始。除非後者有使用到Response of Step ... ,來限制前步驟必須有結果才能被後者用到。(筆者稱之為有序non-blocking ASAP動作執行)
  • 如果一個Frontend Workflow有使用任一個Backend workflow,該Backend workflow會立刻在該Frontend Workflow執行時,盡可能地立刻被執行,但如果input有Response of Step ...則會等待該結果。(無序non-blocking ASAP動作執行)
  • 當一個Workflow A使用custom event時,如果custom event有另起Workflow B,則必定先完成Workflow B
  • 前一個step對元件進行state的更新時,後面的step如果有讀取該元件的state,不保證該state會是更新後的狀態。(更新有夠慢原則)



實際案例

  • 使用audio recorder,創建以下workflow: 當按下停止按鈕,stop recorder,play recorder's saved audio url。如果這樣寫很高機率撥出的音樂會是前一次錄下而不是當下錄下的。


2. 沒有If-else敘述

這對會寫程式的開發者來說很困擾,目前已知可行的替代方案是設立兩個workflow,並使用only when來控制,缺點是容易造成程式冗餘,需善用custom event return value來避免


想要更有系統的學習嗎?

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

raw-image




































avatar-img
ECOE的沙龍
3會員
41內容數
留言
avatar-img
留言分享你的想法!
ECOE的沙龍 的其他內容
在這篇文章中,將學會如何用Bubble快速建立Floating Box 通常使用Repeating Group元件可以快速達到呈列過去訊息,但是方向會是相反的,需要使用額外插件改變方向 實際步驟 加入Chatroom Datatype: 可以創建一個Reusable element
在某些狀況下,難免會有一些需要高度客製化的場景、或是想要使用js(不管是自己寫還是想要使用既有的code or from chatgpt),這時候,Toolbox Plugin 就是必學的。 Toolbox Plugin分成Server side以及Client side。兩者有細微差異
在[AI線上應用實戰] Bubble.io Plugin製作: 基礎篇我們介紹了Plugin的三種功能。然而實際製作上有很多細節要注意,在這篇文章中,將更詳細介紹如何使用Plugin建立Element元件 實際案例 Fields 這個部分最簡單,會作為update(每次元件的field或元
如果自行撰寫應用後端,光是使用者管理就是挺麻煩的一件事。筆者之前撰寫Fastapi+OAuth+database就花上不少時間。Bubble.io可以則可以快速完成登入機制 此外,我們也可以搭配OAuth,允許使用者使用第三方登入,這樣甚至可以不用在Bubble應用中,處理reset passwo
Bubble簡單歸簡單,但遇到想要更大的自由度的時候,處理起來的複雜度可不比自架來的好處理,雖然Bubble有強大的Plugin支援,但如果你很窮、沒有免費好用的Plugin,或是功能太冷門,只好自己寫囉。
AWS Lambda是? AWS Lambda 就像是開發者的救星,因為它是一種 Serverless 服務,意思是你不用再為架設和維護伺服器煩惱了。對於每天都忙得焦頭爛額的開發者來說,產品開發已經夠讓人抓狂了,還要處理伺服器的設定和維運(e.g. OS、Network、機器管理、防火牆),想想就
在這篇文章中,將學會如何用Bubble快速建立Floating Box 通常使用Repeating Group元件可以快速達到呈列過去訊息,但是方向會是相反的,需要使用額外插件改變方向 實際步驟 加入Chatroom Datatype: 可以創建一個Reusable element
在某些狀況下,難免會有一些需要高度客製化的場景、或是想要使用js(不管是自己寫還是想要使用既有的code or from chatgpt),這時候,Toolbox Plugin 就是必學的。 Toolbox Plugin分成Server side以及Client side。兩者有細微差異
在[AI線上應用實戰] Bubble.io Plugin製作: 基礎篇我們介紹了Plugin的三種功能。然而實際製作上有很多細節要注意,在這篇文章中,將更詳細介紹如何使用Plugin建立Element元件 實際案例 Fields 這個部分最簡單,會作為update(每次元件的field或元
如果自行撰寫應用後端,光是使用者管理就是挺麻煩的一件事。筆者之前撰寫Fastapi+OAuth+database就花上不少時間。Bubble.io可以則可以快速完成登入機制 此外,我們也可以搭配OAuth,允許使用者使用第三方登入,這樣甚至可以不用在Bubble應用中,處理reset passwo
Bubble簡單歸簡單,但遇到想要更大的自由度的時候,處理起來的複雜度可不比自架來的好處理,雖然Bubble有強大的Plugin支援,但如果你很窮、沒有免費好用的Plugin,或是功能太冷門,只好自己寫囉。
AWS Lambda是? AWS Lambda 就像是開發者的救星,因為它是一種 Serverless 服務,意思是你不用再為架設和維護伺服器煩惱了。對於每天都忙得焦頭爛額的開發者來說,產品開發已經夠讓人抓狂了,還要處理伺服器的設定和維運(e.g. OS、Network、機器管理、防火牆),想想就