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

dvdrothen

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.

FazerBem

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

lcmatosj

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

dvdrothen

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?

lcmatosj

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.

dvdrothen

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.

dvdrothen

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

lcmatosj

dvdrothen
ficou show! Enfim!!!! Liberdade!!!

lcmatosj

sempre bom se inspirar

dvdrothen

lcmatosj
Adicinei algo:

Entrada HTML está na categoria Formulário
CSS está em Estrutura do código

lcmatosj

Show de bola, parabéns!!! Mas seia pedir muito colocar atributos?

dvdrothen

lcmatosj
Adicionei os atributos:

Adicionado também as tags:

FazerBem

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

FazerBem
Ainda não é possível mudar o head da página

FazerBem

seria possivel agora crir um botao assim abaixo ?

FazerBem

dvdrothen ao clicar em formulario nao abre os blocos

dvdrothen

FazerBem
Aperta Ctrl +F5 e limpa o cache do seu navegador

FazerBem

e a pergunta anterior caixa pesquisar tem como

FazerBem

aqui

Mikael

FazerBem Cara, esse botão em específico eu acho que não há como no Bootblocks tradicional
O que daria pra fazer é fazer um botão desses no Photoshop, importar no Bootblocks e usar como botão que direciona pra uma caixinha de pesquisa

lcmatosj

FazerBem
mas um botão assim? descentralizado? ou é uma entrada de texto?
eufaço assim!

lcmatosj

FazerBem

dvdrothen

Não sei. De qual biblioteca esse componente é?

FazerBem

dvdrothen kkkkkkk
nao sei queria saber tb kkkkk

bem vamos la, pesquisando aqui cai nisso abaixo, dai pensei por que perguntar , por nao perguntar, dai pergunto !

https://stackoverflow.com/questions/67863963/how-to-make-a-outlined-input-with-floating-label-with-custom-css

Próxima página »