[Música] Fala galera beleza Pedrinho da Nasa aqui especialista até automação e marketing e no vídeo especial de hoje eu vou trazer para vocês uma funcionalidade interessante para grupos a menção de participantes né vou trazer duas modalidades a menção tradicional onde a gente marca os nomes dos participantes e a segunda menção fantasma que a gente vai precisar fazer uma pequena alteração uma injeção no código para que a gente marque as pessoas todas em uma mensagem tá mesmo que ali a gente não chame o arroba delas para você que me acompanha quero deixar meu muito obrigado para
você que tá chegando hoje seja muito bem vindo e muito bem-vindo ao canal da comunidade zdg galera como de costume vou mostrar a solução funcionando vou trazer o passo a passo códigos na página de apoio só que antes de continuar já deixa um like esperto compartilha esse vídeo na comunidade deixa um comentário para mim é todas essas ações são muito importantes para esquentar esse vídeo levar ele para mais gente tá quando você interage com o vídeo o YouTube entende que esse conteúdo é relevante ele acaba levando esse vídeo para mais pessoas Então beleza sem mais
pelo menos vamos fazer aqui a interação que eu quero mostrar para vocês tá basicamente tenho esse número tá que está conectado api esses outros dois números estão no grupo ele mexam né e eu vou fazer três testes para vocês o primeiro deles é ali a chamada mais simples que é marcando todos os participantes pela arroba coloquei aqui acho que foi padrão a chamada então depois eu vou passar para vocês da minha lógica é quando a gente coloca ali a interação para escutar mensagem ou interação Quando é a mensagem enviada um gatilho para chamar isso de
outra pessoa tá agora eu vou trazer os exemplos primeiro exemplo o próprio número conectado api vai chamar a ação então chama o padrão ele pega todas as pessoas do grupo e marca todo mundo tá vendo foi marcado beleza outra formato que eu tenho aqui atenção que o botei a palavra atenção nesse aqui é uma chamada mais interessante atenção isso mesmo onde ele vai deixa eu pegar aqui ele vai marcar as pessoas de uma mensagem fantasma né ou seja manda mensagem as pessoas são marcadas sem chamar o arroba Então vou chamar atenção Ele vai chamar as
mensagens para mim ó tá vendo ó já foi marcando a galera assim com marcações Beleza então ele mandou duas mensagens marcou aqui nessa imagem e na mensagem a terceira é a partir de um usuário então a mensagem vem ali de uma pessoa externa para ativar eu deixei aqui para ativar foi o aviso tá gatilho aviso então vou mandar o aviso de um terceiro número conectado aqui ao grupo que está dentro do grupo para chamar esse gatilho para o bote tá então manda o aviso ela já chamou a mensagem fantasma tá vendo aí tem uma mensagem
foi chamada Aqui ó a mensagem foi enviada a partir desse gatilho externo e as pessoas no grupo foram marcadas Beleza então basicamente isso que eu vou ensinar vocês a fazer primeiro vou trazer a instalação padrão que é chamada ali pelo arroba e o segundo nós vamos partir para menção fantasma onde a gente vai fazer uma injeção de um código ali tá bom então vou aqui fechar as telinhas que nós não vamos utilizar mais e agora vamos partir aqui para o código para instalação daquilo que a gente precisa vou deixar isso aqui conectado que é o
que está conectado a pi para a gente pegar alguma referência que seja necessário ao longo da explicação beleza galerinha para fazer isso você vai estar lá no World get na sua máquina aqui né links na página de apoio para você instalar você pode utilizar o note 16 vai funcionar para você tranquilamente 14 também funciona instala os dois as duas soluções no seu PC e vamos instalar api como é que a gente instala a pi você vai lá no teu desktop né cria aqui uma pastinha chamada zdg vamos chamar ela de zdg tá dentro dessa pastinha
zdg a gente cria alguns arquivos tá que ali vão ser a gente vai precisar dos arquivos vou deixar esses arquivos para download na página de apoio Tá mas seria de basicamente um arquivo chamado aqui vamos lá vamos lá a gente vai precisar de html né ainda que o HTML a gente vai precisar de um pack de Jason a gente vai precisar do arquivo JavaScript para rodar que vai ser o bote cdg grupos chamei de grupos mencheon JS quem mais nós vamos precisar de algumas imagens tá que são as imagens que estão sendo enviadas aqui na
conversa prédio funcionar no código vou deixar para vocês então vou pegar elas aqui ó elas estão aqui vou pegar na pasta que eu tô rodando o projeto que é o bote os edgman deixa eu pegar esse aqui ó vai ser um dois três tá bom legal Vamos precisar dessas imagens Quem mais quem vai precisar vai estar na página de apoio vamos precisar dos ícones o ícone roda sem o ícone mais para ele ficar ali executar vocês vão ver que ele traz um íconezinho de conectado tá então isso aqui é legal a gente ter e que
mais que a gente vai precisar aqui tal tal ainda que você HTML eu acho que é isso aqui só só isso aqui tá vou pegar aqui o código O código vai estar disponível na página de apoio depois eu vou comentar com vocês as principais os principais pontos até porque esse código não fica disponível eternamente na página de apoio né se você tiver chegando tarde nesse vídeo Provavelmente você vai ter que copiar da explicação que eu vou trazer no vídeo ou você terá que entrar na comunidade GG para fazer o download dele tá bom mas seguindo
o vídeo aqui com a minha explicação você também vai ser capaz de instalar tá você não vai conseguir pegar e colar dependendo do momento que você tiver chegando ao vídeo o pack de Jason eu vou pegar aqui desse projeto que já tem um vídeo gravado para você escrito tá bem filtrado com que a gente precisa que é isso aqui ó beleza ó as imagens essas cinco arquivos estão para download na página de apoio só baixar jogar na pasta para funcionar ah cheguei tarde não consegui fazer o download das imagens coloca três imagens um dois e
três png com esse nome dentro da pasta tá para funcionar Que não vai quebrar aplicações não vai encontrar o arquivo não vai conseguir mandar mensagem beleza criou os arquivos que que você vai fazer você vai instalar api como é que a gente instala abre o Git CMD tá depois de instalar alguém que CMD Navega até o teu desktop Navegue até a pasta zdg e vai rodar que que ele vai fazer ele vai instalar essas dependências localmente no seu PC né ou seja o bote vai funcionar dentro da sua máquina se você quiser aprender como colocar
isso na nuvem para fornecer comercialmente ou quiser inclusive é aprimorar teus conhecimentos em apis automações ter acesso a mais sistemas aí é suporte grupo de alunos tem até a comunidade CTG também é a maior comunidade aí do Brasil do tema que eu trago aqui no meu canal não existe outra comunidade como essa né lá eu tô de segunda a sexta dando os plantões de dúvidas ao vivo né tô segunda a sexta das 6 às 7 todo dia no telegram sem contar o suporte que você vai ter lá dos outros usuários também né do nosso suporte
oficial que tá o dia todo para tirar suas dúvidas Então tem dúvida que aprimorar quer aprender a rentabilizar teu conhecimento né vai para comunidades igreja que é um investimento que vale muito a pena depois de ser instalado você vai rodar o nude bote cdg grupos eu vou parar o meu aqui ó porque aí ele vai executar na mesma porta beleza ele vai executar ele dizendo aplicação rodando na porta 8000 O que que você vai entrar você entra aqui no teu local Roxo tudo tiver certinho ele vai trazer essa imagem traz o QR Code leu QR
Code você já tá pronto para mandar esses comandos tá bem os comandos a partir do número Conectado e comandos de fora tá bom então essa instalação é padrão nessa instalação ele já vai funcionar a chamada do padrão tá antes da gente passar pela construção aqui dessa lógica para você fazer a chamada da da marcação fantasma Você vai precisar fazer uma alteração no arquivo tá bom é esse arquivo é a gente vai pegar a referência dele aqui dentro desse link tá que é um pr aqui que foi feito lá na peido Pedro Lopes com essa esse
provavelmente né solicitado eu não sei se isso aqui foi depreciado tiraram acho que eles tiraram isso da api Tá mas com essa alteração que eu vou te ensinar a fazer você consegue rever ela que já viva ela dentro do seu código então o que você vai encontrar dentro da pasta de módulos tá então você vai navegar aqui ó dentro do seu arquivo tá dentro da sua pastinha aqui ó de modo você vai achar lá Whats JS ele tem aqui um arquivo na pasta src chamada clight JS edita isso aqui né aqui dentro o que que
nós vamos fazer você vai encontrar essa linha 744 tá aqui ó abaixo dessa linha 744 você vai injetar esse verdinho isso aqui é um purequest quer dizer que é uma pessoa tá mandando uma modificação para p.i e solicitando ao desenvolvedor que é coloque isso na pay dele é uma melhoria então a melhoria da EPI então ele manda essa solicitação essa sugestão E aí o dono da pia é aprova ou não aprovou entrando e aprovou não entra tá mas você seguindo as orientações do Pr ou seja Verde adiciona vermelho retira tá você consegue chamar a função
para o seu código então vamos lá ó jogamos aqui embaixo do let esse pedacinho de código e ele traz aqui para a gente também na linha 754754 que é essa aqui ó ele tá mostrando para gente vermelhinho vermelhinho deleta e Joga o verde no lugar então deleta vermelho joga Verde no lugar fez essa alteração no teu Clint JS você já vai ser capaz de chamar tá bom a menção do atenção e a menção do aviso agora gente muita atenção o que comigo eu vou explicar esse código dentro do visual Studio code que vai ficar melhor
de enxergar as coreszinhas agora eu vou trazer a lógica para você né E se você tiver chegando tarde não conseguiu copiar esse código ele vai estar você vai conseguir criar ele a partir da minha explicação aqui agora tá bom então a primeira coisa que a gente tem aqui ó chamada das bibliotecas que a gente vai usar na nossa pi função de delay para mandar uma mensagem depois de determinado segundo ele manda outra mensagem serviço Express né que faz a conexão ali é mostra as informações essas informações que você vê no local roxo QR Code aquela
imagemzinha para você conectar ela é feita aqui pelo nosso serviço de Express cliente criação da conexão tá então esse aqui que traz para a gente parâmetros da configuração isso QR Code vai aparecer de uma maneira ou de outra né se vai ter o Chrome dentro não tá então são parâmetros para criação da conexão certo é mais uma informação ele tinha a Live do klight e aqui é o evento de som ali a gente os eventos que enviam para o nosso index HTML QR Code aquelas informações do celular conectado desconectado todas as mensagens vão aparecendo ali
embaixo né isso aqui é um negócio que eu vou até tirar depois no código deixar para vocês é porque ele tá listando assim que eu conecto lista para mim aí dia do grupo ó é um projeto de grupos que tem na comunidade a gente usa isso aqui para pegar ele de grupo né Então tá aqui sobrando depois eu vou tirar Tá mas então não é importante que vai ser importante isso aqui é só essa parte aqui ó tá se você copiar esse aqui você não precisa copiar não ele vende quente falha a gente ter desconecte
então tudo que vai ser falado lá tma que tá tendo esse aí ó agora nós temos Ah isso aqui também é importante serve ali sim tá é aquele que vai exportar o serviço né o nosso serviço vai estar rodando na parte 8 mil Então a partir disso aqui ele mostra nosso serviço na parte 8000 onde a gente acessou com local rústico aqui beleza o grupo livre não vou explorar esse arquivo da comunidade lá dentro a gente fala sobre isso não é interessante para esse projeto dois eventos Clinton mestre ele vai se ativado sempre que você
criar a mensagem então eu criei uma mensagem a partir do meu número atenção Ele chamou a ação apenas Messenger quer dizer que são mensagens que são enviadas que passam pela api Então dentro dessa eu aviso então o meu número oficial mandou ele aviso e aí ele chamou o trailer Tá bom então essa é a diferença entre meça de cliente e o Messenger vamos começar pelo mestre Então quer dizer que se eu mandar a palavra aviso lá dentro do grupo não sendo do meu número que está conectado a peido segundo número ele vai chamar isso aqui
para mim que que ele faz ele primeiro busca as informações do chat do grupo né que a mensagem que vai ser enviada tá setada aqui dentro dessa variável mensagem né então ali ó que que ele tá dizendo ó fala Pessoal vocês estão Prestes clicando no link tal né então essa mensagem ele tem duas imagens setadas localmente São imagens que estão na pasta tá então essas imagens que estão na pasta aqui ó um dois três elas levam este caminho né o caminho Raiz um png raiz dois png aí que ele diz ah se o chat é
um grupo aqui você pode até colocar mais checagem se o chat ou grupo se o Messenger quem está enviando a mensagem é a pessoa autorizada ou seja deste grupo é tal aí você chama o Trigger e envia mensagem né aí que que ele vai fazer ele chama seria a Live tá dos participantes faz um map ali pega todo as ideias dos participantes e vai mandar primeiro ele manda a imagem depois a imagem depois de três segundos o texto que que ele fez ó imagem imagem 3 segundos o texto Beleza então isso é quando alguém chama
o Trigger enviando a mensagem para pay segundo detalhe mestre Ou seja você ativando a chamada fantasma é a marcação fantasma ou padrão a partir de mensagens que sai do seu próprio dispositivo que está conectado a ti aqui a chamada padrão que é aquela chamada que eu não gosto muito acho ela bem é bem feia né ele vai e marca todo mundo ó todas as pessoas que estão no grupo foram marcadas E aí ele chama atenção né então ele faz isso com esse pedaço de código né Ele vai fazendo um push de todos os participantes e
envia esta chamada padrão funciona aqui para baixo também se você colocar no Messenger alguém mandar padrão ele vai chamar e funciona sem a injeção no cliente JS se você alterar ou não alterar o cliente JS a padrão funciona para você fazer a fantasma que você precisa fazer injeção no client JS seguindo o PR dessa pessoa que se chama quem fez esse pé Rafael ofc PFC Brasileiro é Brasileiro brasileiro é tá E aí chamando a atenção assim que eu envia a palavra a atenção né cadê Vamos pegar uma atenção ó atenção até Era um modelo que
eu usei na aula de waticket lá tá até com um capsulado aqui não era para estar para comunidade de comunidades e DG aí beleza que que ele faz mesma coisa do messenger quando é do mestre do mestre mesmo mesmo padrão né então ele pega cria mensagem chama o objeto da imagem frontal do caminho a imagem do caminho 3 se o chat é grupo Pode adicionar outras outras variar grupo isso aí dentro do chat é tal se quem tá criando é você ou você pode colocar várias checagens aqui é você né e o que que tem
diferente que a gente usa meça de cliente e o Messenger o Messenger Create quando a gente vai usar o send message a gente usa para Messenger two Ou seja é para onde a gente está enviando quando a gente vai usar o klight apenas metas a gente usa o Messenger esse detalhe é importante tá no evento de Messenger a gente utiliza o Messenger from no evento de mestre de cliente a gente utiliza o Messenger two tá isso aqui é esse pedaço agora foi um pouco mais complexo para quem não tem informação de Epi né então é
trouxe um resumo tá mas se você quer entender mais esse universo vai ser eu quero botar a mão nesse código aí quer entender todos esses elementos que o Pedrinho tá mostrando que você tá mostrando aí pedindo esse vídeo quero né mesmo que eu não saiba nada de programação eu quero aprender isso aqui tô disposto a meter a mão no código mesmo assistir as aulas entra na comunidades e DG que você com toda certeza absoluta vai aprender a manipular esses elementos vai aprender a criar interações ainda muito mais interessante do que essa na hora você tem
diversos temas para download com auto potencial de rentabilidade e Garanta você que mesmo que você não seja programador você vai conseguir aí uma renda extra explorando todo o poder que existe nessas apistemas aí de automação forte abraço beijo no coração de todos fiquem com Deus qualquer dúvida é só chamar tamo junto Pedro