Fala mestre beleza no vídeo de hoje a gente vai tá falando aqui sobre geekilent né que é uma ferramenta aí que promete que ajuda a gente no desenvolvimento de código né ele atua ali na ide né então no nosso caso que a gente vai estar usando ele no visual Studio code e dessa aula a gente vai ver ali toda a parte de configuração da extensão do Cobalt em si e de como usar ele no viascode tá então antes da gente ir para o vídeo Eu gostaria de pedir que você deixa o like no vídeo que
você se inscreva no canal e também clique no Sininho aí para o YouTube te manter sempre atualizado do nosso conteúdo e aqui na descrição também tem os links da mestre todos os links aí da Mestres para você acompanhar a gente e ver tudo que a gente tá produzindo aí em todas as plataformas tá então meu nome é jeans eu sou desenvolvedor aqui na Mestres e vamos lá para mais um conteúdo [Música] bom então eu estou aqui no site do pallet né E aqui no site é a primeira coisa que você vai precisar é de ter
uma conta no github tá e provavelmente você já tem essa conta na mas caso você não tenha você pode clicar aqui em side-up né aqui eu tô no próprio site a gente com barra Fitness barracoparte que é o site do comparativo que eu já consigo navegar para criação de conta caso você não tem tá então uma vez com a conta criada né nessa página aqui do padre a gente pode ver aqui todos os benefícios né O que que a gente faz né como que ele funciona quem usa né documentação que ele é bem interessante né
tem aqui também a questão de preços né porque o comparativo é uma ferramenta paga tá e temos aqui né muitas coisas muitos exemplos muito estatística enfim bastante coisa aqui para você tá dando uma olhada e aí para quem tem uma conta no github a gente ganha um free Fire um tempo de teste ali de 30 dias tá então quando você criou sua conta ou quando você alugou com as suas contas você nunca usou ocupar que você vai ter esses 30 dias aí para tá testando E clicando aqui no start my freestyle ele vai te Navegar
para sua conta do github né aqui eu tô num browser anônimo né na aba anônima só para a gente ver realmente aqui que como que é essa tela é porque uma vez que a gente logou fez o login né é se você clicar aqui em get copelete ele vai te navegar já para o seu github né para dentro das configurações da sua conta do github então no meu caso aqui na minha conta do clicando aqui em na parte superior direita né você pode acessar aqui as configurações e aqui dentro nós temos aqui acesso ao Cobalt
né que no seu caso vai estar aqui a opção para ativar né No meu caso aqui já está ativado eu já uso um comparat no meu dia a dia tá então você clica aí você ativa o github e uma vez ativado você já pode ir para sua ideia né no caso no nosso caso aqui a gente já pode vir para o visual Studio code e aqui no visor Você precisa fazer login login tá então se eu clicar aqui no meu perfil na parte inferior esquerda aqui a gente já pode ver que já está feito login
né da minha conta no github Tá mas caso a sua não esteja quando a gente instala a extensão do pallet ele se você não fez o login ele vai aparecer aqui no canto inferior direito Onde tá a minha webcam ele vai aparecer para fazer o login tá então acessando aqui a aba de extensões Dove a gente pode pesquisar tá e ele vai trazer aqui para gente o githug copart né Essa extensão aqui que você vai fazer a instalação tá então quando você fizer essa instalação se você não estiver logado no github vai aparecer aqui no
cantinho é para você fazer o login você clica nesse botão e ele e caso o seu browser né provavelmente o seu browser já vai estar logado ele vai redirecionar para o seu browser e aí você só dá a permissão mesmo para fazer o login tudo e ele já traz de volta para ouvir as code para você continuar o uso aí tá então feito isso né instalando a extensão e fazendo o login no github você já vai ter o seu qual pallet ativado e pronto para uso tá então eu tenho aqui nesse nosso caso aqui eu
tenho um arquivo só um arquivo java script que a gente vai estar usando aqui como exemplo né E nesse arquivo aqui a gente vai mandar ele fazer algumas coisas né a gente vai fazer o uso aqui da linguagem natural para ver ele criando as coisas e vai também ver como que ele lida com a interpretação de contexto tá então aí essa ideia de linguagem natural a gente usa comentários né então não já comentário a gente coloca com Duas Barras né então quando de barra barra alguma coisa esse isso é um comentário e nesse comentário se
eu falar aqui por exemplo que eu quero criar uma componente E se a gente ver melhor ele já a gente já tem uma sugestões aqui tá E essa sugestões já é ocupada de funcionando tá então a partir do momento que a gente instala ele ele já começa a ver tudo que a gente está escrevendo e sugerir coisas né para tudo então quando eu digitei né criar um componente olha lá o que renderiza um botão com texto clique aqui tá então se eu quiser aceitar essa sugestão eu posso clicar aqui né ou então pressionar Tab tá
e eu posso ir para a próxima ou anterior na Netflix que seria próximo a sugestão é ver sugestões diferentes então se eu clicar aqui em next Olha lá ele vai me dar uma sugestão diferente é contexto diferente Na verdade ele é deu alguma sugestões aqui né então eu posso ver outras opções e tem aqui também o complictions o painel de compressão o painel de soluções né que seria um que é uma aba né que ele abre aqui e ele vai se interessar essa soluções ele vai gerar várias soluções para esse caso que eu pedi né
para abrir o painel que nesse caso aqui ele tá ele tá gerando né a gente pode ver que quando ele tá gerando aqui na parte inferior nós temos aqui o íconezinho do qual pallet né A minha câmera tá na frente mas nesse íconezinho aqui sempre que o compadre está gerando alguma coisa ela fica girando tá Então olha lá ele já me deu sugestões aqui de componente Olha lá componente com e tal tem também a segunda sugestão aqui tem alguma sugestões um pouco quebradas ou que já tem um suíte com rotas enfim tem bastante coisa que
a gente pode fazer aqui eu não vou aceitar nenhuma dessas sugestões mas se eu quiser aceitar é só clicar aqui ó é Exception para cada soluço para cada sugestão tem o botão de aceitar aqui então se eu quisesse isso que eu clicaria aqui e ele traria para mim essa componente inteira é um componente um menu de navegação e o conteúdo da página vai ser renderizado de acordo com a Rota né o conteúdo da página vai ser renderizado dentro do componente mei então tem aqui o teve um prompt aqui e teve uma solução que o pallet
criou tá então eu não vou querer isso eu vou criar um componente eu vou querer essa do botão tá o botão clique aqui ao clicar no botão vai aparecer um alerta da mensagem Você clicou no botão tá eu vou deixar isso aqui eu vou salvar ele eu vou quebrar aqui essa linha clique aqui para ficar para a gente conseguir ver esse comentário melhor certo então feito isso né feito esses comentários ele já começa a sugerir né Aldeia entre aqui e tem aqui ó vou importar o yek e aqui ele já vai Ele já tá sugerindo
a criação de uma classe né de um botão que estende no meu caso eu não quero criar uma componente usando classe eu vou eu poderia ter especificado isso aqui no prompt né cria um componente usando e vamos ver como que ele vai se comportar com isso aqui porque uma coisa olha lá ele já vai criar aqui a função renda o click retorna um botão certo eu tô aceitando aqui só prestando tá pedindo para me exportar esse botão né então ele criou aí o botão né um único botão e quando eu clico ele aparece o alerta
né que foi o que eu pedi Tá mas enfim uma coisa que o copyliot ele é muito bom e até na própria documentação isso fica bem claro que o CoPilot ele é o pé pro Grammy né se eu voltar aqui no documentação ele é um companheiro que vai programar com você que é uma inteligência artificial então assim ele é muito interessante a gente usar ele não com essa ideia de usar sempre linguagem natural mas sim de interpretação de contexto e de supervisão tá então no meu caso aqui nesse caso aqui do botão eu fiz um
prompt né para ele fazer isso mas eu não precisava não precisaria desse prompt aqui para chegar nesse resultado é porque o próprio o culpado ele entende muito bem as coisas o contexto que a gente está escrevendo então se eu tô dentro de um projeto o react né se eu tô dentro de um arquivo JavaScript ele Analisa os diretórios Analisa os nomes que eu dou para as funções para as variáveis e analisando tudo isso ele começa a entender já o que que eu quero fazer então eu não preciso ficar escrevendo um prompt né para para ele
entender o que eu quero fazer eu só preciso mesmo fazer começar a fazer essa coisa e essa ideia da supervisão né que a gente começa a digitar a fazer as coisas e ele vai sugerir né a gente vai supervisionando fala não eu quero isso não isso eu não quero isso não é assim é E vai essa ideia de um Corrigindo o outro e aí O código vai sendo criado tá Então nesse caso aqui ele cumpriu bem o prompt né vai ter casos onde não vai ficar tão legal por exemplo nesse próprio caso aqui ele primeiro
ele sugeriu criar uma função uma classe né e a classe trabalhar com classe hoje no react já não é uma coisa tão Popular assim né e é uma coisa que eu não queria então eu falei não eu corrigi pronto mas se eu não tivesse corrigindo pronto e tivesse criado o constituting ele já entenderia né então o que eu vou tirar criar um componente que renderiza né eu vou tirar aqui quem diria o botão contexto clique aqui e eu vou apagar isso aqui tudo né eu venho aqui se ele vai sugerir na verdade a classe Olha
lá a classe né mas eu não quero classe Eu quero um corte bota e aqui ele já entende né olha lá vendo o click dá um alerta e aqui no final ele desperta para mim tá então a gente consegue fazer muita coisa sem nem precisar escrever um pronto escrever essa usar fazer o uso né da linguagem natural então o que que eu vou fazer aqui agora eu vou fazer eu vou pegar outro exemplo eu vou pedir para ele fazer para mim uma função e o mais simples um pouco para a gente ver funcionando fazendo outras
coisas né que vocês vão componente então por exemplo aqui eu não vou nem usar a linguagem natural eu só vou fazer mesmo como se eu fosse escrever a função e a gente vai ver o que como que o corpo se comporta então eu vou criar aqui uma função eu vou chamar essa função de get e use repositores Pronto ele já começa né sugerindo aqui um recuar Mas eu não quero recuar eu vou querer mesmo criar função get Na verdade eu vou melhorar o nome da função olha lá o que que eu vou fazer eu vou
chamar aqui get repositores from bye e username certo e que quando eu criar a função ele vai já entende e olha lá vai me dar um retorno de um fete Olha lá eu dei o nome dessa função né para pegar os repositórios no github BIOS usando através do nome do usuário e ele já me retornou uma função Não fat que não é de point do hit Hub né barra e user barra e usernem/h para pegar os repositórios daquele usuário né com aquele username e aquele converte a resposta para Jason e mapeia tá mapeando pregando só
os nomes dos repositórios tá então com isso aqui eu já consigo extrair os nomes dos repositórios Que tal pessoa vai ter né tal e username vai ter então ele ele supôs né através do nome da função que eu dei que eu queria fazer isso né e não tá errado né pode a gente pode considerar que eu queria realmente fazer isso então aqui no final se eu vier aqui e executar um executar essa função né e vou passar o meu e os ername né aqui com ponto eu vou dar um ponto bem para pegar essas repositórios
e fazer um consolog né logar e no console os repositórios que eu tenho na minha conta tá então se eu abrir aqui o terminal tá aqui no terminal eu vou executar esse script né usando o node né index.js e executando esses script Olha lá eu tenho a lista Aí dos meus repositórios né então a gente pode ver que é um é uma função um jornal né ela funciona tá correto o código e foi tudo gerado através aí do contexto que eu estou né Então dessa forma a gente consegue e criando coisas e assim como na
verdade o contexto que ele tá muito pobre né Eu só tenho um arquivo JavaScript eu só tenho um arquivo JavaScript e eu comecei a escrever uma função do nada né Então realmente ele vai é sugerir algumas coisas não tão precisas mas de acordo o projeto cresce de acordo você vai usando também ocupar-te as coisas vão ficando melhores né e ele entende muito bem padrões é uma coisa que o comparativo é muito bom também então se você tá no arquivo ou numa pasta ali do projeto Onde existe um certo padrão de código ele vai começar a
seguir aquele padrão e sugerir coisas dentro daquele padrão tá então é muito interessante é muito útil e evita muito escrita de código repetitivo né porque ele entende que tá você sempre vai ter que por exemplo de backing né o controlo é chamar o serviço né então ele já entende isso ele já entende aquela nomenclatura e ele já vai sempre que eu criar um controle né ele vai entender e vai gerar para mim essa sugestão muito de uma forma muito precisa Tá certo então aqui para esse vídeo Tá eu vou parar por aqui é porque realmente
aqui a gente vai ficar devendo esse exemplo mais complexo né porque a gente precisa de um projeto maior para estar fazendo isso mas a ideia geral eu acredito que foi repassada aí Tá certo então para esse vídeo aí é isso eu espero que eu tenha ajudado qualquer dúvida pode estar deixando um comentário logo abaixo e é isso aí muito obrigado e até a próxima [Música]