• Tutoriais

  • Como criar componentes com IA (gerador de código com ia)

Neste tutorial vou mostrar como você pode gerar código com IA (Inteligência Artificial) no Bootblocks.
Obs1: Está em modo de teste, ela pode cometer erros.
Obs2: No momento está disponível apenas para HTML. (no futuro vamos pretendemos inserir no javascript também).

Limites atuais de instruções:
Nível Grátis: 5 Instruções / 24h
Nivel PRO: 100 instruções / 24h
Nível Premium 250 instruções / 24h

Vamos lá:
Clique no ícone de código ao lado do botão HTML:

Depois, na parte de instruções, escreva instruções claras e obgetivas como
"Crie um botão verde com bordas arredondadas e escrito Olá". Depois clique em "Gerar com IA":

Aguarde alguns instantes e o código será gerado para dentro da área do editor:

Nesta etapa, você pode alterar o código manualmente ou inserir uma nova instrução como "agora arredonde as bordas do botão".

Depois de ter o código, clique no botão copiar e o código será copiado.
Agora vá em estrutura do código e selecione um dos blocos de inserir HTML:

Depois na categoria Texto, arraste um bloquinho de texto e cole o código gerado dentro dele:

O resultado poderá ser visto no simulador:

Espero que gostem dessa nova atualização e que possamos usar o poder da Inteligência Artificial para tirar nossos aplicativos do papel.

    Eu testei, e é realmente muito bom, parabéns! No entanto, a manutenção pode se tornar um desafio. Preciso de mais espaço, pois o campo de texto é bastante limitado. Ter acesso aos outros elementos seria um grande avanço! Isso certamente resolveu o problema para o nosso amigo! haha

      lcmatosj pois o campo de texto é bastante limitado.

      Realmente.. isso é do blockly mesmo. Tentei fazer um no estilo textarea mas pelo que vi não tem no blockly.

      lcmatosj Ter acesso aos outros elementos seria um grande avanço!

      Poderia dar um exemplo?

            dvdrothen

            Vamos considerar o elemento "div", que possui classes e IDs, correto? Seria possível criar um bloco onde pudéssemos escolher o nome do elemento e adicionar seus atributos, como:

            Elemento: input

            Atributos: name="login", type="text", value="matos"

            Elemento: a

            Atributos: href="http://www.google.com.br", id="site"

            Assim como no caso do "div", podemos incluir a classe e o ID, mas também ter um campo para inserir o nome do elemento e seus atributos. Os atributos podem ser especificados em forma de lista.

                lcmatosj
                é um pouco complexo de fazer.. os elementos ja devem estar pre criados..
                por exemplo um elemento do tipo a precisa abrir e fechar (<a></a>) e já um input type text não...
                o bloco vai precisar de uma lista com cada um deles preformados e tratar conforme o usuário selecionar..
                vou pensar em uma forma de fazer aqui.

                  Consegui um bloco maior para inserir o HTML.
                  Acho que vou substituir aquele do javascript por um desses também:

                    7 dias depois

                    eu gostei muito desse post aqui, acho que estaria dentro daquilo que eu vinha pedindo a vc Deivid, seria isso mesmo ?
                    Ou seja a possibilidade de incluir aquilo que tenho que fazer manualmente apos subir o projeto a plataforma.

                    pois essa foi a maneira de manter constante ativo , em algumas paginas apenas, a possibilidade do cliente ATIVAR ou DESATIVAR o recebimento de mensagens do One Signal, ficando assim sempre no canto inferior direito o SININHO de Inscricao do Onesignal.

                          var onesignal_user_id = "";
      var OneSignal = window.OneSignal || [];
      OneSignal.push(function() {
        OneSignal.init({
          appId: "MINHA ID ONESIGNAL",
          safari_web_id: "web.onesignal.auto.4c35e1cb-920a-4e68-be7d-eea8363a1cf4",
  notifyButton: {
    text: {
        'tip.state.unsubscribed': 'Cancelar as Notificações',
        'tip.state.subscribed': "Você está Inscrito nas Notificações",
        'tip.state.blocked': "Você bloqueou notificações",
        'message.prenotify': 'Clique para assinar as notificações',
        'message.action.subscribed': "Obrigado por se inscrever!",
        'message.action.resubscribed': "Você está Inscrito nas Notificações",
        'message.action.unsubscribed': "Você não receberá notificações novamente",
        'dialog.main.title': 'Gerenciar Notificações do site',
        'dialog.main.button.subscribe': 'ASSINAR INSCRIÇÃO',
        'dialog.main.button.unsubscribe': 'CANCELAR INSCRIÇÃO',
        'dialog.blocked.title': 'Desbloquear notificações',
        'dialog.blocked.message': "Siga estas instruções para permitir notificações:"
    },
    enable: true,
  },
        });
        OneSignal.getUserId(function(userId) {
            onesignal_user_id = userId;
        });
      });
    </script>

                      dvdrothen neste caso aqui qual seria o ID deste Botao OLá, para que eu pudesse chamar ele la no JS?

                        seria possivel agora crir um botao assim abaixo ?

                        e a pergunta anterior caixa pesquisar tem como