Editando apps com BubbleScript

Os agentes editam um app Bubble alterando seus arquivos BubbleScript, verificando o resultado e aplicando a alteração verificada ao Bubble.

Comece pela área relevante do app

Uma tarefa normalmente envolve uma ou mais pastas no workspace clonado.

• Use pages, reusable-elements ou mobile-views para alterações na interface.

• Use a pasta workflows dentro de uma página ou elemento reutilizável para workflows de frontend.

• Use backend-workflows para workflows no lado do servidor.

• Use data-types para campos e regras de privacidade.

• Use option-sets para opções fixas do app.

• Use api-connector para grupos e chamadas do API Connector.

Um agente pode pesquisar nesses arquivos para acompanhar as referências antes de fazer qualquer alteração.

Edite um nó existente

Os nós existentes têm identidades estáveis que conectam o código-fonte BubbleScript ao Bubble.

Por exemplo, um botão existente pode ter um ID e um nome de exibição separado:

button("save-task-button", {
  name: "Button save task",
  layout: {
    height: "fit",
    width: "fill",
  },
  properties: {
    text: staticText("Save task"),
  },
})

O agente pode alterar o nome, o layout ou as propriedades mantendo save-task-button. Manter o ID instrui o Buildprint a atualizar o elemento Bubble existente em vez de criar outro.

Crie uma interface

Os elementos da interface ficam aninhados em uma página, elemento reutilizável ou visualização para dispositivos móveis.

group("task-card", {
  name: "Group task card",
  layout: {
    container: "column",
    rowGap: "12px",
    width: "fill",
    height: "fit",
    padding: "24px",
  },
  children: [
    text("task-title", {
      name: "Text task title",
      properties: {
        text: staticText("Create the proposal"),
      },
    }),
    button("complete-task", {
      name: "Button complete task",
      properties: {
        text: staticText("Mark as complete"),
      },
    }),
  ],
})

A matriz children representa a árvore de elementos e a ordem deles no Bubble. Layout, aparência, tipografia, propriedades e condições são agrupados separadamente para deixar clara a finalidade de cada um.

Adicione comportamento responsivo

As condições podem alterar configurações compatíveis quando uma expressão Bubble é verdadeira.

conditions: [
  condition({
    when: currentPageWidth().lessThanOrEqual(600),
    layout: {
      padding: "12px",
      width: "fill",
    },
  }),
]

Essa condição reduz o preenchimento quando a largura da página é de 600 pixels ou menos. As configurações de condição disponíveis dependem do nó que está sendo editado.

Edite workflows

Cada workflow tem seu próprio arquivo e contém um evento seguido por uma lista ordenada de ações.

import {
  elementClicked,
  hideElement,
  showElement,
} from "@buildprint/bubblescript";

export default elementClicked("Button save task", {
  actions: [
    hideElement({ element: "Group task form" }),
    showElement({ element: "Text task saved" }),
  ],
});

Alterar a ordem da matriz actions altera a ordem de execução no Bubble. As entradas de eventos e ações podem usar expressões BubbleScript.

Edite a estrutura de dados

Os tipos de dados e os conjuntos de opções são editados como declarações de código-fonte.

import {
  dataType,
  dataTypeRef,
  optionSetRef,
} from "@buildprint/bubblescript";

export default dataType("Task", {
  fields: [
    { display: "Title", type: "text" },
    { display: "Owner", type: dataTypeRef("User") },
    { display: "Status", type: optionSetRef("Task Status") },
  ],
});

Um agente pode adicionar campos, atualizar nomes e tipos e adicionar regras de privacidade. Os IDs dos campos existentes devem ser mantidos quando um campo for alterado.

Preserve configurações não compatíveis

Algumas configurações existentes do Bubble aparecem como rawBubble(...) ou dentro de uma propriedade raw.

O agente deve preservar esse conteúdo, a menos que a tarefa exija alterá-lo e o significado esteja claro. Remover conteúdo bruto pode remover a configuração correspondente do Bubble.

Verifique e aplique a alteração

O agente verifica o código-fonte editado antes de enviá-lo ao Bubble.

buildprint check pages/Dashboard/page.ts
buildprint check
buildprint apply

Uma verificação direcionada fornece feedback rápido para um arquivo. Uma verificação completa valida o workspace e mostra as alterações planejadas no Bubble. Em seguida, buildprint apply compila o BubbleScript verificado em JSON do Bubble e o aplica à ramificação selecionada.