[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
留言分享你的想法!
avatar-img
ECOE的沙龍
3會員
41內容數
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
大家好,我是一名眼科醫師,也是一位孩子的媽 身為眼科醫師的我,我知道視力發展對孩子來說有多關鍵。 每到開學季時,診間便充斥著許多憂心忡忡的家屬。近年來看診中,兒童提早近視、眼睛疲勞的案例明顯增加,除了3C使用過度,最常被忽略的,就是照明品質。 然而作為一位媽媽,孩子能在安全、舒適的環境
Thumbnail
大家好,我是一名眼科醫師,也是一位孩子的媽 身為眼科醫師的我,我知道視力發展對孩子來說有多關鍵。 每到開學季時,診間便充斥著許多憂心忡忡的家屬。近年來看診中,兒童提早近視、眼睛疲勞的案例明顯增加,除了3C使用過度,最常被忽略的,就是照明品質。 然而作為一位媽媽,孩子能在安全、舒適的環境
Thumbnail
我的「媽」呀! 母親節即將到來,vocus 邀請你寫下屬於你的「媽」故事——不管是紀錄爆笑的日常,或是一直想對她表達的感謝,又或者,是你這輩子最想聽她說出的一句話。 也歡迎你曬出合照,分享照片背後的點點滴滴 ♥️ 透過創作,將這份情感表達出來吧!🥹
Thumbnail
我的「媽」呀! 母親節即將到來,vocus 邀請你寫下屬於你的「媽」故事——不管是紀錄爆笑的日常,或是一直想對她表達的感謝,又或者,是你這輩子最想聽她說出的一句話。 也歡迎你曬出合照,分享照片背後的點點滴滴 ♥️ 透過創作,將這份情感表達出來吧!🥹
Thumbnail
大數據時代下,企業為了提升工作效率、節省工作流程,以及降低營運成本,開始導入相關流程系統(如:Workflow、BPM),想藉此簡化業務流程,掌握企業營運的每個進程,但很多人都難以說明 Workflow 和 BPM之間的主要區別,究竟 Workflow 與 BPM 兩者之間的差異是什麼?
Thumbnail
大數據時代下,企業為了提升工作效率、節省工作流程,以及降低營運成本,開始導入相關流程系統(如:Workflow、BPM),想藉此簡化業務流程,掌握企業營運的每個進程,但很多人都難以說明 Workflow 和 BPM之間的主要區別,究竟 Workflow 與 BPM 兩者之間的差異是什麼?
Thumbnail
如何使用Game CI 提供的Github Action 將建置專案自動化
Thumbnail
如何使用Game CI 提供的Github Action 將建置專案自動化
Thumbnail
其實要為專案建立操作介面的方式很多,除了網頁之外,還能另外寫個專門的手機 APP 連線,或是乾脆升級算法,讓我們能隨口喊一聲「嘿OO!」就搞定,不過⋯
Thumbnail
其實要為專案建立操作介面的方式很多,除了網頁之外,還能另外寫個專門的手機 APP 連線,或是乾脆升級算法,讓我們能隨口喊一聲「嘿OO!」就搞定,不過⋯
Thumbnail
在搞清楚事件委託前必須先了解什麼是事件傳遞機制(Event Propagation),也就是捕獲(capture)跟冒泡(bubble),聽起來好像很難但是我昨天看完彭彭的直播課程(17:00開始)後就懂了!我寫成文章幫助記憶,也希望能幫助到大家,然後希望我面試會被考到。
Thumbnail
在搞清楚事件委託前必須先了解什麼是事件傳遞機制(Event Propagation),也就是捕獲(capture)跟冒泡(bubble),聽起來好像很難但是我昨天看完彭彭的直播課程(17:00開始)後就懂了!我寫成文章幫助記憶,也希望能幫助到大家,然後希望我面試會被考到。
Thumbnail
執行以上程式碼,然後看到了這個結果: 為什麼「延遲0秒」的函式寫在上方,但在console印出的結果,它還是被排在第二順位? 利用AC教材提供的youtube演講連結一窺究竟: 演講提供了更多JS的細節概念,身為JS新手的我還在消化,但若針對教案提出的問題來回答,加上利用google大神查到MDN的
Thumbnail
執行以上程式碼,然後看到了這個結果: 為什麼「延遲0秒」的函式寫在上方,但在console印出的結果,它還是被排在第二順位? 利用AC教材提供的youtube演講連結一窺究竟: 演講提供了更多JS的細節概念,身為JS新手的我還在消化,但若針對教案提出的問題來回答,加上利用google大神查到MDN的
Thumbnail
前言 這是第一次寫技術文章,但其實應該也只能說是蒐集很多資料並學習如何透過自己的話解釋的內容,並不能像其他大神可能分享一些很酷的技術,目標就單純是為了完成最後一週的作業(如下)。 走入非同步之前 執行環境(Execution Context) 執行環境堆疊 (Execution stack)
Thumbnail
前言 這是第一次寫技術文章,但其實應該也只能說是蒐集很多資料並學習如何透過自己的話解釋的內容,並不能像其他大神可能分享一些很酷的技術,目標就單純是為了完成最後一週的作業(如下)。 走入非同步之前 執行環境(Execution Context) 執行環境堆疊 (Execution stack)
Thumbnail
跟很多喜欢 All-in-one 的朋友相反,我非常反对此观点,为此写了 放弃纠结、拥抱妥协,重器轻用就是高效 来聊聊这个误区。 本次想跟大家聊聊我的 Workflowy 使用观,如果你没有注册过 Workflowy,可使用 此邀请链接注册,你和我都会增加 250个节点。 写在前面 📷 📷
Thumbnail
跟很多喜欢 All-in-one 的朋友相反,我非常反对此观点,为此写了 放弃纠结、拥抱妥协,重器轻用就是高效 来聊聊这个误区。 本次想跟大家聊聊我的 Workflowy 使用观,如果你没有注册过 Workflowy,可使用 此邀请链接注册,你和我都会增加 250个节点。 写在前面 📷 📷
Thumbnail
正在執行開發的進度,往往是還沒解決這個又來下一個,頓時覺得人生怎麼不是樸實無華,而是好難。
Thumbnail
正在執行開發的進度,往往是還沒解決這個又來下一個,頓時覺得人生怎麼不是樸實無華,而是好難。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News