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

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

在[AI線上應用實戰] Bubble.io Plugin製作: 基礎篇我們介紹了Plugin的三種功能。然而實際製作上有很多細節要注意，在這篇文章中，將更詳細介紹如何使用Plugin建立Element元件

實際案例

Fields

這個部分最簡單，會作為update(每次元件的field或元件內容有任何更新就會call)、preview(editor中預覽)這兩個函數的input，並可以使用properties.field_name來存取。要注意，你沒辦法透過設定properties.field_name回傳值(需透過state)

State

任何想在bubble workflow存取的plugin回傳或狀態，都可以透過此來創建。以下圖來說，你就可以在workflow中使用plugin_element.export_root這個資料

Actions

如果想要在workflow觸發此元件的某個客製化動作，就可以設定Action，以下圖為例。你可以在workflow加入一個Action動作: plugin_element->Start (max=.., bitrate=..., ..)，要注意此時properties會是action的fields，不會是上面Fields所設定的(存取上面設定的field會undefined)

Element Code: Header

如果有使用CSS或JS套件，請在header指名

Element Code: Initialize

每次元件被載入，此處的函數會執行一次。任何想要顯示在頁面上的物件，需要加到instance.canvas裡，任何想在Update使用的，都可以放到instance.data裡

function(instance, context) {
    
    const id = "class_A"+Math.round(Math.random()*1000000) + 1;
    $(instance.canvas).append(`<div id="${id}" class="class_A"></div>`);
    element = document.getElementById(id);
    element.style.height = "100%";
    instance.data.classA_element = new ...;
}

Element Code: Update

每次元件被更新，此處的函數會執行一次。

function(instance, properties, context) {
    instance.data.classA_element.classA_element = ...
    ...
    instance.publishState('export_data', new_value);
}

Element Code: Preview

Editior Preview用，基本上與initialize八成像即可

function(instance, context) {
	const id = "class_A"+Math.round(Math.random()*1000000) + 1;
	$(instance.canvas).append(`<div id="${id}" class="class_A"></div>`);
	element = document.getElementById(id);
	element.style.height = "100%";
}

Action Code

基本上很好理解，與Update差不多，只是要注意properties會與Update的properties不同

function(instance, properties, context) {
  //Load any data 
  ...
  //Do the operation
  ...
}