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

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

在某些狀況下，難免會有一些需要高度客製化的場景、或是想要使用js(不管是自己寫還是想要使用既有的code or from chatgpt)，這時候，Toolbox Plugin 就是必學的。

Toolbox Plugin分成Server side以及Client side。兩者有細微差異

Client Side

首先，要先在頁面裡加入js2bubble元件。

設定以下參數:

• bubble_fn_suffix: 在你JS script要回傳結果給其他bubble元件的時候，callbubble_fn_[bubble_fn_suffix](result)。這樣就可以在APP的其他地方使用javascripttoBUbble.value來使用js回傳的結果(Publish value必須被勾起來)。
• Trigger event: 如果勾選，JS呼叫bubble_fn_[bubble_fn_suffix](result)時，可以另起呼叫一個workflow
• Multiple Outputs: 如果勾選，可以使用bubble_fn_[bubble_fn_suffix]({output1: ..., output2: ...,})的方式回傳，使得可以使用javascripttoBUbble.output1等

接下來就可以在workflow中使用`run javascript:

var a = 10;
var b = 15;
result = a + b;
bubble_fn_add(result);
// or
bubble_fn_add({output1: ..});

之後如果要在其他地方使用js script的結果，可以使用像是javascripttoBUbble.output1來取得。

如果勾取Trigger Event, 就可以另設計一個workflow被呼叫

Server Side:

基本上更簡單，直接加入Server script模塊。

值得注意的是，script 必須以以下方式撰寫，否則會出錯。(不可以直接return，要把return包在一個function裡後呼叫該function)

var func(argument){
	....
	return ...;
}

func(argument);

想要更有系統的學習嗎?

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