Neste tutorial vou ensinar a criar sua primeira extensão para o Bootblocks.
A extensão vai alterar a cor de fundo de algum texto no nosso aplicativo.
O código que vamos usar para isso foi testado no site playcode.io:
Clique aqui para ver
Comece acessando o Criador de Extensões:
Primeiro vamos adicionar um nome do nosso bloco que será marcador_texto
Agora vamos adicionar o nome dentro do bloco, para isso vamos na categoria Input e arrastamos o bloco dummy input para dentro do bloco principal:
Agora vamos em Field e arrastamos a entrada text para dentro do bloco dummy input:
Digitamos o nome do bloco ali para que apareça aos usuários:
Note que as alterações começam a aparecer na aba preview
Para que o bloco seja encaixável em outros, selecione a opção top + bottom connections:
Agora vamos adicionar uma entrada do tipo "texto" que será a entrada do ID do componente que estará em HTML:
Deste vez arrastamos o bloco value input para dentro (abaixo) do bloco principal
Vá em Field e arraste um bloco de texto para dentro dele e coloque "ID do Texto", esta será a entrada do id:
No campo NAME colocamos o nome da entrada, que será "ID_TEXTO":
Faça o mesmo processo, mas agora para selecionar a cor. Deve ficar assim:
Voce pode mudar a cor do bloco usando a propriedade colour:
Agora que ja temos o bloco (parte visual) montada, vamos criar o código dele. Copie o código gerado na aba "Código do Bloco" e cole em um editor de código como o VScode ou Notepad++
Vou usar o VScode, mas você pode usar outro se quiser.
O código gerou duas váriáves, que são value_id_texto e value_cor_texto que são as váriáveis que usaremos para obter o id do componente e o código hexadeximal.
Um código simples para alterar a cor de fundo de um texto em javascript é esse:
let texto = document.getElementById('meu_texto');
texto.style.backgroundColor = "#51d119"
onde meu_texto é o id do elemento e #51d119 é a cor em código hexadecimal.
Portanto nosso código da extensão deve concatenar com as variáveis que o bloco gerou.
O código final do bloco ficará assim:
DICA: Use o ChatGPT para criar o código do bloco ou a extensão Codeium (Grátis) ou Copilot (paga) para auxilhar no VScode.
Copie todo o código do bloco e cole novamente no Criador de Extensões e depois clique em teste
Na aba de Teste adicione os blocos de texto usando a aba lateral das categorias para colocar algum id fictício e também a cor, deve ficar assim:
Note que o código gerado é igual ao que criamos antes, isso significa que a extensão vai funcionar corretamente.
Agora basta clicar em Download da Extensão e dar um nome para ela. Depois vamos subir e testar no bootblocks:
Subindo e testando no Bootblocks:
Resultado:
Se você tiver algum erro ou problema ao criar, pode colocar suas dúvidas aqui e logo estaremos respondendo