[Imersão Dev com Gemini] Finalizando o projeto com GitHub e Deploy

Yes! Estamos na quinta aula da imersão. Você gostou dessa, Rafa? Gostei do "Yes". E a aula de hoje está incrível porque vamos começar a interagir com quem vai usar a aplicação. Isso é muito legal. Não faz sentido criar uma aplicação que só nós sabemos mexer ou tem que ficar, igual o exemplo, abrindo o console para poder ver algo. E se você chegou na quinta aula, você está de parabéns. Por quê? Você está muito próximo de receber o seu certificado da Alura com o Google Gemini. Olha que incrível. Para que você tenha acesso ao seu certificado,

você precisa acessar o Gemini através do link que está aqui embaixo. Beleza? Hoje, o que vamos fazer, Rafa? Quando eu clico no botão Pesquisar, aparecem os atletas que temos da nossa base. O ponto é, eu quero digitar algo aqui, por exemplo, Rebeca. Rebeca. Clicar em Pesquisar e, de fato, só buscar conteúdos relacionados ao meu interesse. No caso, por exemplo, exibir aqui a Rebeca Andrade ou digito "Skatista Brasileira" ou "Skate" e aparece informações da Rayssa e assim por diante. Como já mexemos na lógica de aparecer todas as informações, vamos precisar interagir o JavaScript com o HTML.

A primeira coisa que precisamos fazer é ir lá no nosso código HTML e encontrar qual é a tag, qual é o elemento que representa a nossa barra de pesquisa, não é, Gui? E qual é? Você lembra? De cabeça, não lembro. Deixa eu pegar. No nosso código, a partir da linha 15 do main, temos "Digite o nome do atleta" ou do esporte, podemos alterar isso depois. E tem aqui o botão para a gente pesquisar. Provavelmente é esse input da linha 17, que é o input que queremos colocar. Na aula passada, o que fizemos? Pegamos um determinado

elemento. Uma seção. Vou dar um Alt + Z, só para visualizar na tela. Pegamos um determinado elemento e retornamos para o HTML essa informação. Agora, é um pouco diferente. Por quê? Queremos pegar o que digitarmos nesse input e, de alguma forma, manipular os resultados para depois retornar o que queremos. Exatamente. Como fazer isso, Rafa? Sei que é algo relacionado a esse input. Exatamente, Gui. A primeira coisa, lembrando o que fizemos na aula passada, foi criar um id para essa nossa tag. Assim, conseguimos chamá-la no JavaScript. O que você acha de criar um id? Legal. É

parecido com o anterior. Exatamente. Eu acho que o nome dele podia ser campo pesquisa. Campo-pesquisa? Isso. Agora, copiamos o nome campo-pesquisa e levamos para o JavaScript. Beleza. No JavaScript, o que usamos para poder referenciar essa tag? Primeiro, criamos uma variável para guardar o valor da tag inteira e aí também utilizamos o document.getElementById. Vamos fazer isso também para esse nosso campo de pesquisa. Eu vou fazer na linha 5. Eu pulei, vou precisar de uma variável. Qual o nome dessa variável? Pode ser campo pesquisa. Mas tem um detalhe aqui no JavaScript. No HTML, não utilizamos letra maiúscula

para poder criar ids, para criar classes, elementos. Mas no JavaScript, existe outro padrão que utilizamos bastante quando vamos escrever uma palavra para criar uma variável. Mas esse nome tem duas palavras, que será campo pesquisa tudo junto. Mas é campo e pesquisa, numa palavra só, utilizamos para a segunda palavra a letra maiúscula. Então, é "campoPesquisa". O P será maiúsculo. Certo. Deixa eu fazer um teste? Vou colocar aqui, campo-pesquisa, minúsculo. O JavaScript já não entende o que é isso. Exatamente. Não aceita caracteres especiais no meio do nome da variável. Não se separa dessa forma. Escreve desse jeito

um pouco estranho. E, por curiosidade, tem um nome para esse padrão, sabia, Gui? Tem um nome. Chamamos de Camel Case. Posso abrir uma aba do Google para pesquisar isso? Pergunta para o Gemini. Ele vai, com certeza, explicar de uma forma legal. O que é camel case em linguagens de programação? Camel case em linguagens de programação. É uma explicação. Camel case é uma convenção de escrita muito utilizada na programação para nomear variáveis, funções, classes e outros elementos de código. Então, entra naquilo, não é, Rafa? Palavras unidas. Mais de uma palavra, não utilizamos espaço. E a primeira

letra de cada palavra, exceto a da primeira, é maiúscula. Isso é um padrão. Inclusive, Gui, só para conseguirmos visualizar, além do que o Gemini trouxe, visualmente captamos melhor a ideia de por que camel case seria o case em formato de camelo. Então, a brincadeira é essa da imagem, porque o camelo tem a corcova no meio das costas. Você começa com a palavra baixinha. E a segunda palavra seria onde chega nas costas do camelo, a corcova. Legal. E não existe só esse padrão. Observando aqui, existem outras formas. Cada linguagem de programação vai possuir um jeito de

nomear variáveis. Variáveis, funções, para cada coisa, assim, diferente, temos um padrãozinho. Excelente. Então, no JavaScript, utilizamos o padrão camel case. Uma dúvida, mas por que fazemos isso? Por que, por exemplo, eu preciso passar duas palavras, não tem como deixar sempre uma palavra? Se eu volto aqui e escrevo campo, qual que é o problema de eu colocar com o nome campo? Existe a possibilidade de fazer isso. Nada te impede, porque você escolhe, você podia variar, escrever A, B, C, E, o que você quiser. O problema, na verdade, é que não será só você que vai ler

esse código, e não apenas isso, você pode pegar esse projeto daqui a três meses, e aí você não vai lembrar. Que campo? Campo do quê, sabe? É importante ser sempre muito descritivo, ser muito claro, para, na hora que você for dar uma manutenção no seu código, você consiga entender ou outra pessoa consiga. Então, entra no mundo das boas práticas, que estamos seguindo na imersão toda, e variáveis autoexplicativas ajudam A entender melhor o código. Olha, que curioso, legal. Não é apenas o código funcionar, é funcionar seguindo boas práticas de programação. As variáveis com nomes que façam

sentido, às vezes eu preciso de uma variável que tenha dois nomes ou três palavras unidas, o campo pesquisa de não sei o quê, algo assim, pesquisar na base de conhecimento de não sei o quê. Vai ter um padrão para escrever com essa estrutura. Talvez, fechando o meu cochete da curiosidade do Camel Case, para a galera não ficar chateada conosco, Com 1 corcova só, é o dromedário, mas o nome do padrão é Camel Case, E é isso. Dromedário. É verdade, muito bom. Rafa, é o que você falou. Tem o campoPesquisa, criei uma variável para ele, e

se eu quero algo do HTML, eu escrevo o document. É o document, o .getElementById que já conhecíamos, já criamos esse ID. Agora, entre os parênteses, vamos utilizar o ID do campo, que é o campo-pesquisa mesmo. Exato. Mas agora, temos apenas um detalhe. Aqui, estamos pegando a tag inteira. Conseguimos ver? Conseguimos. Dê um console.log, boa ideia. No campoPesquisa? Lembrando que o campoPesquisa só vai funcionar no momento em que eu clicar… Vou deixar o Inspecionar aberto. Lá no console, que nunca funciona de primeira, sempre na segunda, na terceira, na quarta. No campo console, vou clicar em pesquisar.

Ele trouxe tudo. Input type, exatamente como temos lá no HTML. Exatamente. O que eu vou fazer agora será digitar algo aqui. Vou digitar "Luciano". Pode ser, Luciano? Vamos nessa. Luciano. Você é atleta de qual modalidade, Luciano? De… Ouvir rock progressivo. Pink Floyd. Vi que você gosta bastante. Legal. Vou clicar em Pesquisar. E apareceu aqui. O input inteiro, exatamente como temos no HTML, Rafa. Exatamente. O que estamos fazendo no nosso JavaScript? Estamos pegando a nossa tag e colocando o valor da tag dentro de uma variável, que é o campoPesquisa. Mas não queremos apenas a tag. Não

vamos usar a tag em si. Vamos utilizar o valor que estamos inserindo dentro dessa tag. E o que, na verdade, precisamos fazer para poder pegar o valor? Lá no nosso JavaScript, vamos apenas colocar .value no final. E o valor. Falando assim, o que esse valor representa? Quando estamos no nosso HTML, lembra que temos a tag De abertura e a tag que fecha? O valor será o que está inserido dentro. Isso que escrevemos no campo de pesquisa será o que vamos colocar dentro dessa tag. Vamos dar uma olhada no que vai acontecer. Você é atleta do

Brasil de qual esporte olímpico, Rafa? Eu sou de musculação. Da musculação? Então, beleza. Vou clicar em Pesquisar. Apareceu Rafa. Vou pegar alguém da plateia. Raul, você pratica qual esporte? Guitarra olímpica. Vou pesquisar Raul. Tudo que estamos digitando está funcionando. Ele está pegando o que colocamos dentro do quadradinho, que é o que queremos, interagir com quem mexe na aplicação. Agora, temos um segundo desafio, que é o seguinte. Precisamos pegar esse conteúdo que foi digitado, seja Rafa, Luciano, Raul, o que a pessoa digitar, e esse valor precisa, de alguma forma, ser comparado com o conteúdo que temos

lá na nossa base de conhecimento. Por quê? Como está, estamos exibindo sempre tudo. Eu não quero tudo. Quero exibir só o que a pessoa busca. Exatamente. E como fazemos isso? Precisamos lembrar qual é todo o passo a passo que está acontecendo dentro do nosso programa. Primeiro de tudo, o que fazemos? Vamos recomeçar. Entramos na nossa página como se estivéssemos na 1ª vez, só para recapitular o que está acontecendo. Nada está aparecendo. A primeira coisa que precisamos fazer É escrever o que queremos na barra de pesquisa. E clicamos no botão Pesquisar. Lembrando que, quando clicamos no

botão Pesquisar, o nosso HTML tem lá o atributo onClick. Esse atributo onClick está chamando aquela função que criamos dentro do JavaScript chamada pesquisar. Quando clicamos no onClick, essa função é chamada e todo o bloco de código dentro das chaves é executado uma vez, porque clicamos só uma vez no onClick. Então, é aí, nesse bloco de código, que vamos precisar criar a nossa lógica de comparação. Vamos pegar a nossa lista de objetos Que criamos naquele outro arquivo de dados que estamos chamando na lógica do JavaScript e comparar com o que está escrito dentro do campo de

pesquisa. Como conseguimos fazer essa comparação? Precisamos fazer uma condicional. Se, dentro da nossa lista de objetos, houver algum objeto que tenha o título que seja igual ao que escrevemos dentro do campo de pesquisa, então, vamos, de fato, poder mostrar essa lista, esse objeto aí que é igual ao que escrevemos. Primeiro de tudo, precisamos aprender como se faz essa condicional. Uma pergunta, Luciano. Eu tenho a sensação que conseguimos comparar um texto para ver se um texto faz parte ou ele está presente em outro lugar, parece algo comum. Isso. Não é uma prática em que vamos ter

que desenvolver toda a lógica do zero. Provavelmente já existe, igual vimos, o console.log que já mostra. Exatamente. As linguagens de programação, e o JavaScript não é diferente, já trazem algumas funções, alguns métodos que vão nos ajudar a fazer a chamada manipulação de string. O que seria manipulação de string? São essas atividades que precisamos fazer com os dados em texto Para comparar se eles são iguais, se eles são diferentes, ou se uma palavra está contida dentro de um texto maior, que é exatamente o que nos ajudaria a fazer agora. Na prática, o que você conseguiria fazer,

se a nossa variável é o dado.titulo, a princípio, sem se preocupar em fazer condição ou algo assim, a forma de checar se uma palavra está dentro do título seria escrever, se puder pôr uma linha abaixo, só para construir como ficaria essa definição. Dentro do for mesmo? Pode ser, só para escrever e depois ajustamos a escrita. Seria dado.titulo, que é o campo da estrutura que queremos fazer a busca, E existe um método chamado includes, que é, basicamente, eu quero saber se a informação entre os parênteses depois do includes está dentro da informação do título. É .includes?

É .includes, aí você abre e fecha parênteses, abre e fecha as aspas, que você quer procurar um texto, e a informação que você colocar entre essas aspas, o JavaScript vai procurar se está dentro desse campo título. No nosso caso, já temos esse campo, que é o campoPesquisa, que é o valor que temos. Exatamente. Poderia, como já temos uma variável, vou colocar o campoPesquisa. Isso daqui vai falar assim, se o título inclui o que está no campo da pesquisa, aí eu quero fazer algo. Isso. Se não incluir, aí eu não quero fazer. Se você quiser visualizar

esse passo em específico, acho que você podia gravar na console o resultado dessa checagem, que basicamente o JavaScript vai devolver para você verdadeiro ou falso, true ou false. Se a informação está dentro, ele vai retornar dessa checagem do includes Um valor true, e se não estiver dentro, ou seja, a palavra não existe dentro do título, ele vai retornar um valor false. Legal, vamos lá. Vamos inspecionar. Deixa eu tirar um zoom, que acho que aí ele melhora. Vou colocar, por exemplo, a Rayssa. Boa. Vou em Pesquisar. Ele deu Rayssa, que foi o que eu digitei, aí

ele deu um true e dois falsos. Perfeito. E faz sentido. Porque a nossa lista tem três objetos, Cada objeto tem um título, que é o nome das três atletas, e Rayssa só está dentro de um. Ele vem como true no objeto, que é da Rayssa Leal, mas o for vai continuar percorrendo toda a lista, e para os outros dois objetos, sem Rayssa no título, vem como false. Legal. Da mesma forma, se você quiser fazer outro teste, por exemplo, procurar por Rafa, como você fez nos primeiros testes. É essa Rafa ou a Rafa das Olimpíadas mesmo?

A Rafa, a nossa atleta, Rafaela com dois L's. Rafaella com dois L's. Aí agora, como nós não temos um título que contenha a palavra Rafaella, então você vai ter três falsos. Dá para fazer outro teste, eu vou colocar para pesquisar a Rebeca. Aí, o que vai acontecer? Vai dar falso, falso e o último, verdadeiro. Isso aí. Atualizando a página, pesquisando por Rebeca, clico em Pesquisar, ele deu dois falsos e um verdadeiro. Vou fazer o oposto, vou colocar Beatriz, vai dar o primeiro, falso, o segundo, verdadeiro e o terceiro é falso. Então, atualizando aqui, Beatriz, Pesquisar,

aí deu, false, true, false. Ficou legal, deu para entender essa ideia. Conseguimos criar uma fórmula para saber se tem certo texto em outro tipo de texto, nesse título. Ele está nos mostrando verdadeiro e falso. Mas eu ainda não sei como é que eu faço para só pegar o resultado que eu quero buscar. Isso, exatamente. Essa é a parte que entramos na condicional. Acho que podemos escrever primeiro em um comentário, Em português, e aí depois vamos montando essa condicional. Em português seria se no dado título includes o campo de pesquisa, pesquisa, então será executado aí todo

o bloco de código, vamos criar o novo elemento HTML para o resultado. Aí ele faz algo. Exatamente. Só se incluir, então temos até aquele… provavelmente vai usar chaves, com um espacinho. Isso. Exatamente. E agora, para, de fato, colocar uma condição, eu preciso colocar algum sinal? Sim, vamos colocar toda a condição dentro de um parênteses, para agrupar o que estamos querendo dizer. Nesses parênteses, vamos colocar o dado.titulo includes. Vou até escrever de novo para praticar. dado.titulo.includes. Exatamente como fizemos no console.log, anteriormente. Se incluir no título o campo de pesquisa, abrimos novamente, E aí tudo o que

tiver dentro dessas chaves será executado, caso essa condição seja verdadeira. Que legal. Vou tirar esses comentários do console, fez sentido, deu para entender. Se o título tem o conteúdo que pesquisamos no campo de pesquisa, o que eu queria fazer era tudo isso. Eu queria pegar o resultado, todo esse conteúdo aqui, da linha 20 até onde fecha a linha 28. Exatamente. Pode colocar tudo dentro do if. Vou dar um "Ctrl+X", ele cria um novo elemento, Vou colocar ele aqui, "Ctrl+V", esse comentário, cria um novo elemento do resultado, passamos lá para cima depois. Vou colocar aqui o

comentário só para ter tudo certo. Cria um novo elemento. Maravilha. Recapitulando o que está acontecendo. Primeiro, fazemos o loop, estamos percorrendo a lista e verificando com o nosso if, com a nossa condicional, se o primeiro título do primeiro objeto que tem na nossa lista, que é a Rayssa, está incluindo o que digitamos no campo de pesquisa, Então vamos criar o elemento HTML e vamos exibir na tela. Se não tiver, nada vai acontecer. Todo esse código desde a linha 18 até a linha 25 não vai aparecer, não vamos criar um elemento HTML. Para a Rebeca não

vamos colocar o elemento HTML, não vai aparecer na nossa tela. Vamos testar, não é, Gui? Que da hora! Ficou muito legal, vamos ver. Aí, só reforçando, Gui, como vimos no console log antes, o que o includes faz é devolver true ou false, ou seja, verdadeiro ou falso. E o que o if faz é trabalhar com o resultado verdadeiro ou falso. Se o resultado é verdadeiro, ele executa o código, se não for, se for falso, ele ignora essas linhas e vai em frente. Que legal. Vamos lá, vamos executar isso aqui, vou pesquisar, por exemplo, a Rebeca,

vou em Pesquisar, nossa, agora ficou chique, só apareceu a Rebeca. Exatamente. Que da hora! Vamos ver, não estou botando tanta fé assim, Rayssa, Pesquisar. Aparece a Rayssa, perfeito. E se eu colocar só Bia? Bia, não escrevi Beatriz e clicar em Pesquisar? Cliquei, apareceu Bia Souza. Bom, está funcionando, conforme vamos digitando os atletas, Entretanto, tem um ponto que é curioso. Rafa, se eu não digito nada, não digitei nada, eu clico em Pesquisar, ele mostra todos os atletas. Vamos precisar tomar uma decisão sobre regras de negócio da nossa aplicação e tem dois pontos que eu já estou…

Estou pensando no futuro. Vamos imaginar que eu tenha 30 mil atletas em um banco de dados, integrando com outros bancos, a aplicação cresceu, talvez isso seja perigoso, eu devolver todos os atletas. Se eu tenho 3, 30 atletas, acho que até dá. A minha sugestão seria talvez fazer o seguinte, se não digitei nada, deixei um espaço em branco, E clico em Pesquisar, ele não me mostra nada. Para não ter que navegar em todos os dados. Perfeito. Mas mostrar todos os dados não está errado também. Não, como você falou, é uma regra de negócio, fica a sua

escolha o que você prefere para o seu projeto, se você prefere mostrar ou não. Acho interessante a escolha de não mostrar, justamente porque, às vezes, a pessoa esbarra no "Enter". Acha que digitou e não digitou, acha que fez a pesquisa correta e só está mostrando tudo. É interessante você aí de casa pensar em qual seria a lógica Para poder determinar se está vazio, se não está, o que é incluir o vazio, o que não é, como que faz essa verificação, de fato. Olha, eu tenho uma ideia do que eu faria. Você ensinou o if, eu

faria o seguinte: eu criaria um if aqui para falar assim, vou colocar em comentário: se o campoPesquisa for... Não vazio, como que eu falo? Se ele for um string, né? Se for uma string sem nada, se for uma string que não tenha nada. Acho que você colocou dois "ses". "Se o campo pesquisa for uma string sem nada." Fica mais claro. Se o campo pesquisa for uma string sem nada. Isso. Se o campoPesquisa for... Tira o "se" antes do "for". É isso, agora eu entendi, é muito if na cabeça. Aí, beleza. Eu acho que eu faria

algo assim: se ele for vazio, aí eu não quero mostrar nada. Exatamente. O if eu sei fazer, é o if, a condição será algo, e o que queremos fazer estará entre chaves. Exatamente. Vou dar um "Enter". Como eu verifico, por exemplo, se o campoPesquisa for uma string vazia? Então, aqui nesse caso, podemos verificar se ele é igual a uma string vazia. Uma string sem nada, ou seja, sem texto. Aqui entra um ponto interessante da sintaxe de linguagem de programação, do JavaScript em especial, que você usou um igual. Lembra? Mais em cima, ali na linha 5

e na linha 3, usamos um igual quando queremos atribuir um valor para a variável. Quando queremos testar, usamos dois sinais de igual. Quando queremos comparar um valor. Não estamos atribuindo valor, estamos comparando os valores. Exatamente. Aí usa dois iguais. Isso. Se o campo pesquisa for... For igual, é literalmente for igual. Ah, tá. Então, se ele for igual a um p ali.. Um p, não. Se ele for igual a uma string vazia... Não tem nada dentro das aspas. Não tem espaço, nada. Certo. Aí o ponto é: eu não quero executar mais nada. Eu não quero pegar

o resultado, fazer o resto das verificações e tudo mais. Como eu faço isso? Então, quando estamos lidando com funções, lembrando que a função é aquela Pesquisar, que quando nós clicamos no onClick, ela é chamada, executa todo o bloco de código. Existe uma palavrinha que mostra que aqui vamos finalizar essa função. Não vamos mais executar qualquer código que esteja para baixo. E essa palavrinha é o return. Então, se entrarmos aí dentro dessa condicional, se o if e tudo que estiver dentro do if no parênteses for verdadeiro, Vamos executar o tal do return. E aí, o que

está para baixo, "inicializa uma string vazia", a partir ali do let resultados, criar o HTML, nada disso será executado, porque nós finalizamos a função ali em cima. Eu acho que essa é a melhor forma de não precisar carregar nada, montar HTML nenhum. Nós só finalizamos a execução e não pesquisa. Não mostra nada, já que está vazio. Você pode testar e vamos ver como fica no seu código. Legal, não digitei nada. Clico em pesquisar. Realmente, não aparece nada. Aí, talvez, para melhorar a experiência de quem está utilizando a sua aplicação, Antes do return, você pode escrever

alguma coisa na tela. Hum, legal. Gostei da ideia. Escrever, tipo, informar: Ó, nenhum resultado foi encontrado. Isso, exatamente. Aí, como que fizemos para escrever na tela mais abaixo, na função? Atribuímos um valor para a tag section usando o método... Perdão, usando o parâmetro innerHTML. Vamos fazer o mesmo da linha 34, mas na linha 9. Tá, section.innerHTML. Aí, eu vou atribuir um determinado valor. Isso, aí é a mensagem que você quiser que apareça na tela. "Busca vazia", "nenhum atleta foi encontrado". O que você preferir, fica a seu critério. Beleza, vamos testar agora como ficou? Vamos lá.

Eu vou digitar aqui. Não vou digitar nada, vou clicar em pesquisar. Nada foi encontrado. Perfeito. Maravilha, eu gostei. Tá muito mais claro. Aí, por curiosidade, e vocês que estão em casa e quiserem fazer esse teste também, percebe que lá no seu código, você está especificamente testando se o campo de busca está vazio. Se você colocar qualquer informação lá dentro, se você apertar a barra de espaço, se você pôr uma letra, se você pôr um número, essa condição não vai mais ser satisfeita, porque o valor não vai mais ser vazio, entendeu? Então, provavelmente, eu teria que

usar alguma... Outra forma para fazer essa verificação, porque, querendo ou não, existe o espaço ali, ele vai montar, a Rayssa Leal tem espaço... Entendi. Então, fica aí o desafio para você tentar pensar em resolver dessa forma. Não digitou nada, clicou em pesquisar, ele vai mostrar daquela forma. Exatamente. Eu acho que uma coisa também que podemos adicionar no nosso projeto, só para deixar ele um pouco melhor, é que pode não ter alguma palavra dentro do título. Por exemplo, você quer pesquisar sobre "judoca" ao invés de pesquisar por Beatriz. Será que não podemos fazer aquela verificação e

o "judoca" está na descrição e não apenas no título? Porque queremos, talvez, encontrar a Beatriz, mas podemos não saber escrever o nome dela, queremos pesquisar por Judoca mesmo. Envolver todos os judocas que tem na base. - Exato. - Isso seria muito legal. Pegar por gênero, por esporte, eu acho que seria interessante. Só para não ficarmos presos ao título. E eu acho que eu sei fazer isso, hein? É? Quero ver. Olha só, fizemos assim: se o título do objeto que estamos vendo inclui esse campo, aí colocamos o resultado. Isso. Eu precisaria, de alguma forma - eu

falei na empolgação -, mas eu precisaria, de alguma forma... Você tem ideia, isso é importante! Eu queria ver isso aqui: se a descrição do objeto que temos Inclui o que estamos pesquisando. Perfeito, perfeito. Mas aí já temos um if. Como vamos fazer outro if dentro do if? Ao invés de fazer dois ifs - poderíamos fazer ifs aninhados - mas podemos utilizar, dentro dos nossos parênteses, fazer um if: Se "o dado do título incluir o que está escrito no campo da pesquisa for verdadeiro" OU "o dado da descrição incluir o que tiver no campo de pesquisa".

.includes... Ah, Rafa, então acho que eu consegui. campoPesquisa. Exatamente. Mas o "ou" não deu certo. O "ou" em português não faz sentido nenhum aí. No JavaScript, para representar o "ou", utilizamos duas barras. Que é... Isso, exatamente. Essas duas barrinhas. Uma paredinha, isso aí. Duas paredinhas. Então, se o primeiro for verdadeiro, já vai. Se isso ou aquilo. Ou os dois. Pode ser que os dois sejam verdadeiros, também vai funcionar. Tá, então se uma coisa ou a outra for verdadeira... Se pelo menos uma dessas duas coisas for verdadeira. É, exatamente. Eu acho que você de casa entendeu.

Vamos lá, gente. Vamos pesquisar. Vamos pesquisar agora "judoca". Pesquisar. Apareceu a Beatriz Souza. Se eu digitar, por exemplo, "skate". Não, só "skat". Apareceu a Rayssa Leal. Você nem escreveu "skate", você escreveu "skate" só com o "t" e ele foi. E ele achou. Ó, "medalha" deu a Beatriz Souza. "Conquistou a medalha de ouro, inspirando novas gerações de atletas." Deixa eu ver só como que está o da Rebeca, para pesquisar com base nela. Aqui temos um problema, pessoal. Eu fui digitar "Rebeca" e eu digitei em minúsculo, e ele não trouxe a Rebeca. Mas na nossa base tem

uma Rebeca. Então, eu tenho que digitar "Rebeca" exatamente, com letra maiúscula. Isso é uma experiência ruim. Porque o atleta está lá na nossa base de conhecimento. Mas o seu usuário não tem obrigação de saber como está escrito lá na fonte da verdade da informação. Imagina, eu falo assim "ah, Luciano e Rafa, eu criei uma aplicação, mas você tem que digitar certinho, senão, não vai funcionar." Pois é. A minha mãe, por exemplo, tem o hábito de escrever tudo em letra maiúscula. Então, para ela, não funcionaria. Mas ela está falando boazinha ou ela está brigando com você?

Normalmente, ela não está gritando. Ah, entendi. Então, temos que pensar em alguma forma de digitar "rebeca", Independentemente da letra maiúscula ou minúscula. Se eu faço isso aqui, por exemplo, "REBECA", e pesquiso, ele também não acha. Exatamente. Então, o que podemos fazer nessa situação? Podemos pegar o título da nossa atleta e a descrição e transformar tudo em letra minúscula. Não apenas isso. Nós também transformamos o que escrevermos ali no campo de pesquisa em letra minúscula. Assim, tudo é letra minúscula ou letra maiúscula. Tanto faz. O que você acha melhor de transformar? Acho que tudo minúsculo. Transformamos

tudo em minúsculo. E aí, conseguimos comparar, de fato, os caracteres da forma correta. O "azinho" com "azinho" e não maiúsculo e minúsculo no meio. Ótimo. Gostei da ideia. Vamos deixar tudo minúsculo para não ter esse problema. Então, é o seguinte. O que eu poderia fazer é pegar o campoPesquisa E atribuir o valor dele com o campoPesquisa de novo, mas agora com letras minúsculas. Exato. Letras minúsculas. E não existe isso aqui. Ele não sabe o que é letras minúsculas porque está em português. Não. O que utilizamos é o .toLowerCase. Para letras minúsculas. Aqui, camelCase? Lower, assim?

Case. Isso, exatamente. E aí abre e fecha parênteses. Tá. Aí, aqui ele deixou... Usando esse toLowerCase, ele vai colocar o conteúdo que digitamos com letra minúscula. Aí, o que estamos fazendo é: No campo de pesquisa, não importa se a pessoa fez com maiúscula ou minúscula, vai ficar tudo minúsculo. Exato. Então, tenho o valor do campoPesquisa com letra minúscula, o que eu gostaria de fazer é pegar tanto o título como a descrição e deixá-los também com letra minúscula. Exato. Então, precisamos fazer essa transformação ali dentro do for. Para isso, podemos criar uma variável para cada coisa.

Então, uma nova variável para o título e aí uma nova variável para a descrição. Dentro do for? Então, quando estamos trabalhando declarando as variáveis, criando aquele let e aí a damos o nome para a variável e damos o valor para ela, não é ideal declararmos toda vez que entramos no loop do for. Então, podemos declarar as duas variáveis antes de entrar no for, e aí depois apenas mudamos o valor conforme vai mudando o objeto. Exato. Vou colocar, por exemplo, let titulo. Isso. Vai ser igual a nada. É igual você fez com "resultados". E o let

descricao será igual a nada também. É. Isso. Aí aqui dentro que, de fato, temos acesso às informações do objeto... Coloca só os pontos e vírgulas lá para ficar bonitinho. É verdade. Vamos lá. Ponto e vírgula, ponto e vírgula. E aqui dentro, vamos fazer o seguinte. Eu vou pegar o título e vou falar que esse título que temos será igual ao dado, objeto, .título, .toLowerCase. Abre e fecha parênteses. E fazemos o mesmo para o descrição. Vai ser igual ao dado.descricao.toLowerCase. O legal é que fazemos isso antes... Você pegou o método errado. É o método errado. toLowerCase.

O legal é que fazemos isso antes da verificação, porque aí quando chega ali no nosso if, tanto o título quanto a descrição, quanto o campo de pesquisa, todos já estão com letra minúscula, e aí a verificação vai funcionar de uma forma bem melhor. Aqui como eu já tenho o dado com a modificação, eu posso alterar aqui o dado.título só para título, E ali o dado.descricao só para descricao. Isso aí. - Vamos testar? - Vamos. Indo lá no nosso código, eu vou digitar, por exemplo, "rebeca", e pesquisar. Apareceu a Rebeca Andrade. Perfeito. Maravilha. Vamos colocar "JUDOCA",

tudo com letra maiúscula. E ele mostra lá a Bia. E se eu coloco, por exemplo, "SKATE", pode até colocar uma maiúscula ou uma minúscula aí, agora não importa a forma que for escrita. Eu acho que é "skatista", talvez. É skatista. Eu vou colocar, por exemplo, "Leal". Vou fazer isso aqui: "LeAL". Uma coisa que eu acho que vale, como estávamos colocando ali no skate, seria legal aparecer a Rayssa Leal se escrêvessemos "skate". Podemos adicionar no nosso objeto, por exemplo, algumas palavras relacionadas, como se fossem tags, entendeu? Então, quando montamos os nossos objetos, com o título, descrição,

o link também, às vezes você coloca palavras relacionadas e você usa isso apenas ali na parte de pesquisa também. Eu acho que isso é um desafio interessante Para poder deixar ainda mais legal essa pesquisa no banco de conhecimento. - Vamos fazer isso? - Vamos! Então, a primeira coisa, vamos lá no nosso arquivo de dados.js. E vamos criar um novo atributo, opa, vírgula, e aqui tags. Lembrando que eu preciso de tags para as três atletas, para toda a nossa base. Coitada da galera que faz um monte de base. Fala a verdade. Ah, mas aí dá para

pedir para o Gemini. Ah, é para o Gemini! É o nosso assistente preferido. Coloquei aqui a tag nas três e vamos lá. O que podemos pôr para a Rayssa? A ideia é ter uma string com várias palavras dentro. Então, por exemplo, skate, fada, sk8, por exemplo. Acho que está bom. Da Bia, o que colocamos? Judô. Judo, sem acento. Vou colocar judoca. - Judoca já tem na descrição. - Vou colocar judoka com K. E na Rebeca? Deixa eu ver, a Rebeca é ginasta. "Ginástica", porque está "ginasta" só. Ginástica, ginastica sem acento, o que mais? Ouro, que

ela ganhou o ouro também. Fechou. Beleza. Agora, vamos precisar, de alguma forma, deixar o conteúdo que digitamos também com letra minúscula Para fazer essa comparação. Vou criar uma let tags lá no nosso arquivo de apps.py. Vou falar que ele será igual a uma string vazia. E aqui, vamos falar assim... Um ponto e vírgula lá no 19. Ponto e vírgula. Obrigado, Luciano. Verdade. E aqui, vou colocar assim: tags é igual ao objeto que temos, dados, .tags.toLowerCase. Quase eu cliquei no errado. Aí, eu vou falar para ele também: OU nas tags. Se as tags... Se incluir o

campoPesquisa, aí ele vai fazer essa busca. Vamos ver se agora o "skate" funciona para a Rayssa, por exemplo. É um pecado não funcionar, né, Rafa? Perfeito. E o legal é que não aparecem as tags, como não criamos nenhum elemento no HTML para inserir, ela fica vazia. Está ali no nosso objeto, dentro dos dados, no JavaScript, mas não está aparecendo na tela porque não criamos nada no HTML. Sem palavras. Cara, ficou muito legal. É uma palavra que não está na descrição e conseguimos buscar. É muito louco porque a sensação que eu tenho é que... A minha

cabeça agora é assim: muitas coisas que acontecem em uma aplicação, num software, numa página web, às vezes nem estamos vendo. Por trás. Muita coisa. E essa lógica pode funcionar para qualquer domínio, qualquer área que as pessoas tenham criado seus dados. Por exemplo, se as pessoas estão trabalhando com música, você pode mostrar na tela, por exemplo, só o nome do artista e o nome da música ou a letra da música, mas por trás, no seu código JavaScript, você pode estar buscando por estilo, por nacionalidade, por idioma da letra. Ou seja, vai da sua criatividade como você

quer enriquecer a sua busca na base de conhecimento. - Legal, muito bacana. - É, isso aí. Acho que um ponto que podemos pensar também é assim. Se eu coloco, por exemplo, o tênis. Que temos o tênis de mesa, tem o tênis mesmo. Eu não sei a diferença do tênis de mesa para o outro tênis. Como assim? É que é o tênis de mesa e o outro, não sei o nome. É só tênis. Tem vários estilos, né? Aí, por exemplo, temos no de mesa o Calderano e a Bia Haddad também. Isso aí. O ponto é que

eu não tenho essas informações. E quando eu clico em pesquisar, não temos nada. E pensando naquela ideia que quando não digitamos nada, clicamos em Pesquisar, mostramos "nada encontrado". Se digitamos algo, mesmo colocando com letra minúscula, não foi encontrado na nossa base, seria legal mostrar essa mensagem. Se você buscar, por exemplo, "Pink Floyd", que não tem nada a ver com a nossa base. Exatamente. Pink Floyd. É assim, Rafa, que escreve Pink Floyd? Isso. Pink Floyd. Não tem nada a ver. Vou colocar outra banda que você gosta, Luciano. Rush. Espero que seja assim que escreve. Deve ser.

Beleza. Não tem nada, não aparece. Seria legal exibir alguma mensagem também. A mensagem, ela só aparece "não foi encontrado", porque estamos verificando se é igual ao vazio. Nesse caso, "rush" não é vazio, então não vai aparecer essa mensagem. Então também podemos fazer uma verificação, pensando que se não for incluso, então é tipo, esse negócio do .includes não acontecer, também exibimos alguma mensagem. - Isso aí. - Boa. Bom, então vou fazer o seguinte, Rafa. Se conferimos o campo pesquisa, ele não está vazio, alguém digitou "rush" lá, por exemplo. Deixamos esse campo com letra minúscula, percorremos toda

a nossa base de conhecimento e nada foi encontrado, seria legal se exibíssemos a mensagem. Como eu posso fazer isso? Eu pensei inicialmente que seria um if. Isso. Vai ter uma condição que vamos verificar, por exemplo... Se nada foi encontrado. Se não encontramos nada, aí exibimos a mensagem. Perfeito. Eu só não sei fazer essa condição aqui, Luciano. Como poderíamos pensar? Bom, podemos seguir na mesma lógica que construímos para o resultado positivo, ou seja, para quando encontrar algo. Nós decidimos na aula de ontem que íamos usar uma variável chamada resultados para agregar todo o resultado que está

sendo composto dinamicamente com a informação da base e no final, lá na linha 40 e algo, mais para baixo, na linha 46, você coloca todos os resultados dentro da seção HTML. O que podemos fazer para seguir essa lógica, para manter a mesma linha de pensamento no código, é testar agora se essa variável resultados está vazia e se ela estiver, colocamos a nossa mensagem de "atleta não encontrado" ou "informação não encontrada" dentro da variável, que aí não precisamos modificar o resto do código, entendeu? Tá, vou falar assim: se resultado for igua-igual a vazio, podemos fazer isso

ou, seguindo essa ideia da sintaxe, uma forma de construir algo parecido seria: Você pode deletar as aspas duplas e os sinais de igual e colocar um sinal de exclamação na frente do "resultados". Se eu não tenho resultado. Isso, exatamente. Você está dando a orientação para o JavaScript de que você está querendo dizer: Se "resultados" não tiver nada, se "resultados" não existir, faça essa ação, tome essa ação. Legal, aí nesse caso eu vou mudar os resultados, ele vai receber um determinado texto. Isso, a mensagem que você quer passar. Pode ser a mesma do "p". "Nada foi

encontrado." Entre as tags p. Nada foi encontrado. Aqui, fazendo tudo ao contrário, volta. Com vocês é assim também, pessoal, ou só comigo? - É, acho que é só com você. - Só comigo? Tá. [risos] Então, beleza. Vamos testar isso aqui para ver. Vou digitar "tênis". Clico em Pesquisar. Nada foi encontrado. Maravilha. Lembrando que, pensando no que ele acabou de ensinar para nós, Que podemos colocar aquela exclamação para verificar se não tem, podemos só testar lá em cima. Lembra que também colocamos que não tem? E se não tiver valor? E se esse campoPesquisa não tiver valor?

E se ele for negativo? Ele for falso? O que pode acontecer? Não digitei nada. Clico em Pesquisar. Nada foi encontrado. Exatamente. É legal porque, assim, aos poucos deixamos o nosso código padronizado. Sempre que estamos fazendo essa verificação, então seria: se não tem o campoPesquisa, aí fala que não foi encontrado. Ou se eu não tenho resultados, fala que nada foi encontrado. Talvez, só para dar uma ideia para a galera, Gui, algo que podemos fazer até para facilitar a nossa vida quando estamos analisando um possível problema do código, poderíamos deixar as mensagens um pouco diferentes para saber

quando é uma mensagem da busca vazia e quando é uma mensagem de informação não encontrada. Perfeito! O que poderíamos colocar aqui no campo vazio? Campo de pesquisa. Ah, você pode manter o "nada foi encontrado" e coloca um ponto: "Você não enviou uma palavra de busca" ou "Você não buscou por um atleta". Isso, algo assim. Atleta ou esporte. Isso. Eu acho que quando falamos de atleta ou esporte, eu pensei até em mudar o placeholder aqui. Que é aquele textinho que aparece, "Digite o nome do atleta". Digite o nome do atleta ou esporte. É que agora nós

temos as tags! Nossa, está ficando muito legal. Vamos lá. Aqui no placeholder, na linha 17, "digite o nome do atleta ou esporte". Digita o nome do atleta ou esporte, clique em pesquisar. Nada foi encontrado, precisa digitar o nome do atleta. Se digito, por exemplo, "tênis", uma tag ou algo que não está na nossa base. Clique em pesquisar, nada foi encontrado. Ótimo. Gostei muito dessa ideia. Próximo desafio que temos é pegar todo esse código e mostrar para nossos amigos, nossos familiares. Compartilhar. Como vamos fazer isso? Nós vamos utilizar o GitHub! Mas isso não é um curso

de GitHub. O que acontece? Aqui na descrição desse vídeo, desta aula, vamos ter um link com o passo a passo para que você crie uma conta no GitHub e que você saiba os primeiros comandos. Tenha uma ideia de como fazer. Lembrando que dentro da plataforma da Alura, nós temos cursos relacionados a Git e GitHub. Vou abrir só para dar uma olhada. Curso de DevOps, Git e GitHub compartilhando e colaborando em projetos, GitHub para gerentes, formações essenciais de devs, curso de Git e GitHub dominando controle de versões... Um monte de coisa. Galera, tem muita coisa bacana

para aprender na plataforma da Alura sobre esse assunto. O ponto central é: por que esse código está funcionando no meu computador? Porque eu tenho todos os arquivos que são necessários para que ele funcione. Eu tenho os arquivos de script, tenho o HTML, o CSS e os dados. De alguma forma, preciso pegar todo esse código e colocar em um local. E esse local, que geralmente, usamos para compartilhar projeto é o GitHub. Lembrando que se você submeter o seu projeto para a premiação, para tentar o prêmio da Imersão Dev com o Google Gemini, É importante que você

suba o seu projeto no GitHub. Então, essa etapa que vamos fazer aqui, quero que você também faça em casa. Legal? Eu já criei uma conta no GitHub, vou acessar aqui. Esse é o meu repositório do GitHub. Você está convidado, se quiser me seguir aqui no GitHub. E o que vamos fazer? Essa telinha... Eita, cliquei errado. Beleza. Vamos precisar criar um local para carregar os nossos projetos, para subir todo o código que temos no nosso projeto, o HTML, o CSS, os arquivos de script, Aqui no GitHub. Para isso, vou clicar aqui em "Repositórios", o repositório será

como se fosse uma pasta. Lembra no início do curso? Criamos uma pasta chamada "imersão"? Vamos fazer o mesmo. Vou criar uma pasta. Então, tem aqui o botão "New". Posso clicar nesse botão "New". E está aqui, cria um novo repositório. Preciso dar um nome para esse repositório. O que vocês sugerem? Olimpíadas? Acho que era o nome do nosso projeto. O title que a gente colocou no HTML. Vamos chamar de "olimpiadas". Com as outras configurações, não precisamos nos preocupar. Você pode colocar uma descrição, pode várias coisas, mas o principal é definir ele como público ou privado. Então,

se você quer que outras pessoas acessem, por exemplo, você vai compartilhar o seu projeto com a gente, ou vai mandar para alguma pessoa, tem que deixar público! Essa é a primeira opção ali da bolinha azul. A gente recomenda que seja público. Porque vamos postar isso. Ao longo do tempo, na sua jornada com desenvolvimento, pode ser que tenha projetos que você vai desenvolver, Que ainda não está pronto ou você está desenvolvendo com um time de forma privada, aí você vai realmente deixar ele privado. E você pode adicionar pessoas para ajudar. Mas agora será público. Vou criar

esse repositório. Ele criou. Quando ele cria, tem uma tela com um monte de coisa escrita. Pessoal, fica tranquilo. Não precisamos, nesse momento, saber o que está acontecendo aqui, o que são todas as etapas. Existe um botão que ele fala assim: "Get Started". Comece por aqui, em inglês. Podemos criar um arquivo novo ou podemos fazer upload dos arquivos que existem. É exatamente isso que eu quero. Vou clicar nesse segundo link. Upload de arquivos que existem. Abre uma segunda tela na qual eu posso escolher os arquivos. Vou lá na minha área de trabalho. Então, eu venho no

projeto "imersao". Tenho esses quatro arquivos. Vou selecionar os quatro. Clicar e arrastar para essa tela. Um detalhe que você mostrou é: você não está arrastando uma pasta. Você arrastou diretamente os arquivos. Porque o repositório, como você falou, ele já é como se fosse uma pasta. Se você colocar a pasta aí para as pessoas acessarem, e ainda vai estar lá outra pasta para depois chegar nos arquivos... São detalhes, mas que pegam às vezes. Isso aí. Muito bom. Subi os arquivos. E vou clicar nessa opção "Commit". O commit nada mais é do que uma versão de salvamento.

A gente salvou, subimos os arquivos. Pode dar nome, pode não dar nome ali. E parece que temos os nossos arquivos dentro do Git. O ponto agora é que preciso pegar esses arquivos E visualizar o meu projeto. Existe uma aplicação na qual conseguimos fazer isso de forma muito rápida, muito simples, que chama-se "Vercel". E ele fala assim: Build and deploy. O que seria o "build and deploy"? Você vai construir suas aplicações e colocar no ar. É exatamente isso que eu quero. Vamos clicar nesse Build and Deploy da Vercel. Quando entramos na Vercel, precisa fazer login. É

outro serviço. Eu vou clicar aqui para realizar o login. E tem a opção "continue com GitHub", que é o queremos. A gente já criou uma conta no GitHub. Já subiu o nosso projeto. E agora, vamos continuar na Vercel através da conta do GitHub. Eu dou um OK. Ele vai pedir para autenticar a Vercel. Ele já autenticou, porque estou com o GitHub logado. E eu entro aqui na Vercel. A primeira vez que você entrar, não vai ter nenhum desses projetos. Aqui são coisas que a gente estava testando. Vários outros projetos. Vou clicar nessa opção "Add New".

Adicionar um novo projeto. Quando coloco Add New, olha que curioso. Ele já trouxe os meus repositórios do GitHub. Quero criar um novo projeto com base em qual repositório do GitHub, nesse lado. Por isso é importante fazer o login com o GitHub, para ele ter acesso a essas informações. E vocês perceberam que o login com a Vercel foi só um botão. É bem tranquilo. Às vezes pode pedir autenticação, depende de como que você configurou sua autenticação da senha. Mas é bem simples. Vou clicar nessa opção de "Import". Do projeto "olimpiadas". E para finalizar, vou selecionar a

opção de deploy. Aqui a gente poderia mudar o nome do projeto e falar o que estamos usando nesse projeto. Mas como estamos com o projeto mais puro, se eu posso dizer dessa forma, vou clicar nessa opção de Deploy e esperar um pouco. Ele vai carregar o nosso projeto e preparar a IDE do nosso projeto. Enquanto ele faz isso, Gui, uma sugestão. Como temos toda a ideia de compartilhar os nossos projetos, o que a gente for criando, lá no servidor do Discord, Podemos também aproveitar a própria estrutura do GitHub, que ele tem um arquivo de descrição

do projeto chamado README. Um arquivo que introduz o seu projeto. Isso facilita para quem ainda nem sequer abriu o código, na hora que chegar no seu repositório, na sua pasta dentro do GitHub, já consegue ter uma descrição do que é o projeto, o que ele faz, como ele foi escrito e tudo mais. Vamos fazer isso. Acho que é uma boa. Vamos deixar o nosso projeto com um README bem legal. O Deploy já rolou, então vamos ver como é. Você viu que caiu até uns confetes? Celebrou com a gente. Vou clicar aqui na aba do projeto.

Olha que curioso. Quando clico, meu projeto está no ar. A pergunta é: se eu digitar o nome da atleta, vai funcionar? Vou digitar "judô", clicar em pesquisar e apareceu ali a Souza. A pergunta é também, se você aí de casa, colocar exatamente essa URL que o Gui acessou, olimpiadas-ten.vercel.app, será que vai acessar esse projeto? Faz aí do seu, Rafa, eu quero ver se vai funcionar. Eu estou de olho aqui no computador deles. Funcionou. Vamos ver? Não tem nenhum atleta chamado Luciano. Puxa, vou criar, Luciano. Antes da imersão acabar, vou criar um. Vamos de "fada". Apareceu,

que legal. Muito bem. Deu certo aí, Rafa? Ainda estou digitando. -Pronto. -Carregou certinho. Que legal. Vou colocar "skate". Vamos ver? Funcionou. Então, só recapitulando, a gente utilizou o GitHub para subir os arquivos, e aí a gente compartilha o código. A Vercel utilizamos para poder subir o nosso código e ele ficar rodando no ar, na web. Agora conseguimos, qualquer pessoa do mundo consegue acessar nossa URL e o nosso projeto enquanto ele estiver no ar. E para acabar com chave de ouro, o que você pode fazer agora, que vamos ficar muito feliz é compartilhar o projeto que

você criou. Então, se você criou um projeto e achou que está meio simples. Não. Pega esse link aqui que você já fez deploy do seu projeto, coloca ele no LinkedIn e fala assim: "esse é o projeto que eu fiz na Imersão Dev a minha base de conhecimento é sobre esse assunto. E se você quiser acessar, é só clicar nesse link". Isso é muito importante. Mas se você quer realmente mostrar que você sabe a parte técnica, que você programou esse website, você vai colocar o link do seu repositório do GitHub e vai fazer o melhor README

possível. Porque é o README que vai explicar o que é esse projeto, Quais tecnologias você usou, às vezes algum detalhe para quem quiser adicionar mais código. "Olha, estou utilizando o padrão CamelCase para poder escrever o JavaScript." Então, é interessante fazer um README legal. Quando acesso o GitHub, já tem um "Add README" aqui. Eu posso clicar nele para adicionar esse arquivo. É um arquivo Markdown, com extensão ".md". É um arquivo de texto, é uma forma de texto que conseguimos marcar em negrito, marcar em sublinhado... Certo. E o que geralmente a gente escreve? Podemos usar o Gemini

para nos ajudar a escrever. Vamos nessa. Qual é a ideia desse prompt, Luciano? Bom, podemos colocar o nosso index HTML no prompt. Vou copiar o index HTML, "Ctrl+C" nele. E vamos lá para o Gemini. Vou fazer o seguinte contexto. Tenho a seguinte aplicação. Aí vou colocar aqui o HTML. Aí você manda também o seu JavaScript. Vamos lá, no código, pego o app. Pego os dois ou só um? Só o app já é suficiente. Só o app, "Ctrl+C", "Ctrl+V". E fecho o código JavaScript. Beleza. Agora você pede para o Gemini escrever para você um README.md, igual

como apareceu lá no GitHub. Aí você pode colocar de uma forma descontraída, que explique o que a aplicação faz. Descontraída e explica como a aplicação funciona. E com quais tecnologias ela foi escrita. Vamos dar um "Enter". Esse prompt ficou grande, não tem problema? Não tem problema. Que legal. E ele deu aqui, certinho o que é a aplicação. "Desvendando a máquina de busca de atletas." "Imagine que você é super fã de esportes, quer saber tudo sobre seu atleta favorito, ou modalidade específica..." Muito legal. Eu poderia pedir para ele me devolver em Markdown? Eu acho que isso

seria legal. Inclusive, você não precisa refazer o prompt. Como ele guarda o histórico, você pode só pedir para ele: "reescreva em Markdown". Beleza. Então, já temos o nosso README aí todo formatado. A única coisa que você precisa fazer agora é clicar lá nos três pontinhos. E em copiar. E na hora que você colocar na janela do README lá no GitHub, ele vai converter essa formatação visual para o formato Markdown. Que é colocar as palavras, por exemplo, entre dois asteriscos se você quiser colocar em negrito. Usar duas hashtags para pôr o texto com um título maior

e tudo mais. E outra coisa legal que você pode fazer, é se você quiser deixar o seu estilo, o seu estilo de descrever algo, pôr mais informações, você simplesmente adiciona e personaliza, Da forma que o Gui se comunica, o texto que está nesse Markdown. Que bacana. Assim como fizemos antes, também vamos fazer um commit. Exatamente. É uma nova versão do projeto. Que agora tem um novo README. Eu dou um change aqui. Olha, que bacana. Já aparece o texto todo bonito falando o que fizemos. Podia falar que esse projeto foi feito durante a imersão Dev. -Eu

consigo editar isso? -Consegue. Então, aqui do lado, edite o README. Vou colocar assim: desvendando atletas, imersão Dev com Google Gemini. Perfeito. Ficou bem bacana. -Aí faço um novo commit? -Exatamente. A gente já tem três commits. O primeiro que a gente subiu os arquivos, o segundo que criou o README, e agora a gente atualizou o README. E esses commits ficam ali no histórico. Se você clicar em "history", ali no canto direito, conseguimos dar uma olhada nas alterações que fizemos. Estamos dentro do arquivo ali, mas se a gente clica no histórico na nossa pasta, conseguimos ir dando

uma olhada. Às vezes você quer editar alguma coisa, voltar atrás. Justamente por isso que a gente usa tanto o GitHub e o Git para nos ajudar. Lembrando que nós temos uma premiação para os melhores projetos. Os melhores, não. Os mais criativos. Exatamente. Olha, pessoal, não pode ser o mesmo projeto que fizemos durante as nossas aulas da imersão. Esses projetos são com o objetivo didático. Mais especificamente, você precisa criar, com o conteúdo que passamos, um projeto novo, que seja criativo. A ideia é essa. Então, se você tem muitos anos de experiência e faz uma coisa muito

mágica, você não vai ganhar o projeto. Você precisa ser criativo. Para a gente dar chance para todas as pessoas. E não precisa nem ser uma base de conhecimento. Pode ser, literalmente, qualquer outra coisa. Exatamente. Desde que use os conceitos que a gente passou durante a aula. E lembre-se que para que você submeta seu projeto, você vai usar o link do GitHub. Não é o link da Vercel. Então, vai lá no Forms e coloca o link do GitHub. Exatamente esse que estou mostrando para vocês. GitHub com o meu nome de usuário e aqui o nome do

meu projeto. Vocês podem escolher o nome do projeto que acham que faz mais sentido para o desafio que vocês criaram. Beleza? Eu estou muito feliz que nós chegamos até aqui. Lembrando que se você chegou nessa aula, se você está aqui até agora na aula 5 da Imersão Dev e usou o Gemini com o link que está aqui embaixo, você está muito próximo de conseguir o seu certificado da Alura com o Google Gemini. E uma coisa incrível, pegue esse certificado depois e posta no LinkedIn com o seu projeto E fala assim, olha, esse é o projeto

que eu fiz, esse é o certificado e eu estou feliz... Para que outras pessoas vejam, para que movimente a sua rede de network. E não deixa de marcar todos nós. Assim, também conseguimos interagir, aí vai para a nossa rede, vamos conseguindo levar todas as informações, o seu conhecimento também para outras pessoas. Vai ser muito legal. Vou pedir alguns dias para conseguir ver todos os projetos. Pois é. Você acha que o Paulo libera uns 40 dias só para ver todos os projetos? Ah, com certeza. Libera. É isso aí, Paulo. Gente, estou muito feliz e quero agradecer

de verdade. Tudo o que estamos fazendo só foi possível porque você está com a gente. Está querendo aprender programação, querendo aprender inteligência artificial, que é um desafio hoje, é real. A inteligência artificial faz parte da nossa vida hoje. Não é só para quem trabalha com machine learning, aquelas coisas, não. Ela está acessível para todas as pessoas. E é legal imaginar que tudo que construímos aqui, essa jornada toda que a gente percorreu, o Gui executando, a gente trocando ideias, esse brainstorming todo que aconteceu, vocês executando do lado de vocês, É meio que um teste, um experimento

de como é a vida de um desenvolvedor no mundo real, no mercado de trabalho, dentro de um projeto de pesquisa numa faculdade. Ou seja, de ponta a ponta, essa é a vida de um desenvolvedor, para quem não conhece. Então, além de todo o conhecimento, além do projeto que vocês vão construir, além da chance de receber a premiação da imersão, receber a bolsa da FIAP e tudo mais, vocês tiveram essa experiência nova, especialmente vocês que estão começando agora nesse mundo de desenvolvimento, tiveram essa experiência de como é a vida de um desenvolvedor. Rafa, palavras finais para

a galera agora. Primeiro, quero parabenizar você que chegou até aqui. Realmente não é fácil. Eu sei que foram cinco dias puxados, bastante aula, bastante conteúdo, fazer e acompanhar. Provavelmente você teve alguns erros que não estavam aqui no vídeo, pesquisou no Google Gemini. Mas acho que muita coisa que falamos ao longo das aulas, não só a parte técnica, representa muito o dia a dia de alguém que vai trabalhar com desenvolvimento e programação. Principalmente aquele negócio de: você começou aqui com o JavaScript, com lógica de programação. Você pensa em trabalhar agora com outra linguagem, sei lá, com

desenvolvimento de jogos, de inteligência artificial, seja lá o que for. Aqui você aprendeu a base, agora está na sua mão o que você vai fazer com isso tudo. É um conhecimento que é muito válido, foi uma linguagem que a gente utilizou, que é muito utilizada no mercado, mas o seu caminho é você que vai traçar, é você que vai escolher qual vaga, qual área... Eu te desejo muita sorte nisso. Isso aí. Bom, estamos chegando ao momento final. Talvez deixar um pedido para a galera, no README, no GitHub, deixa o link da aplicação Vercel, que foi

criado também, assim conseguimos não só ver o código de vocês, mas experimentar com a aplicação também. Legal, excelente observação. Inclusive, olha só, no último momento, quando a gente sobe na Vercel, no GitHub aparece um link olimpiadas-ten.vercel. Já coloca o link lá no About, legal. Estou muito feliz que você chegou aqui. Parabéns, de verdade. Igual a Rafa falou muito bem, o Luciano falou muito bem, a vida de desenvolvimento não acontece da noite para o dia. Assim como qualquer outra área. Um engenheiro, um médico, uma médica, uma professora. Não é uma formação que é feita em cinco

dias. O que vimos agora foi um fragmento... Um demo. Um fragmento do que é o dia a dia de desenvolvimento, de pesquisa, de correr atrás, de perguntar para outras pessoas também. Isso faz parte da carreira de desenvolvimento. É um começo. Eu sei que muitos de vocês vão querer seguir esse caminho e vão falar: "eu me encontrei nisso", "eu me achei escrevendo código", "acho legal essa ideia de criar, de criar regras de negócio...", ou "gostei mais da parte visual". CSS, muito legal de brincar, por sinal. "Quero mexer com front-end, quero fazer mais regras ali, próximo de

back-end." Ou "quero trabalhar mais com os dados". "Gostei da ideia de ciência de dados", ou de interagir com Gemini. Pessoal, existe uma infinidade de possibilidades! E nós da Alura acreditamos que a educação em tecnologia, de fato, pode mudar a sua história, pode mudar a sua carreira, a sua vida também. Assim como mudou de todos nós. Um dia a gente estava na faculdade, eu estava na faculdade. Achando tudo isso muito difícil. Nossa, e o quanto mudou hoje. O que a gente estava tendo dificuldade ali no começo, a gente achava que nunca ia conseguir chegar num código

JavaScript, por exemplo, e agora estamos aqui conseguindo fazer tranquilamente. Vou até além, estamos aqui ensinando. Imagina, a pessoa que tinha dificuldade na época da faculdade, hoje, de tanto não desistir e persistir, assim como a singela homenagem que fizemos para os nossos atletas do Brasil, que não desistem, continuam e se esforçam em meio a tantas dificuldades, é isso, se trata disso. Então, é isso. Estamos chegando ao final da nossa imersão Dev. Vamos fazer o "yes", nós três juntos? Vamos lá, um, dois, três: "Yes"! Eu espero que você tenha gostado, aproveitado bastante, aprendido bastante. Não esqueça de

submeter seu projeto. E a gente se vê em outra imersão. Luciano, muito obrigado pelo seu tempo. Muito obrigado. Valeu, Rafa. Valeu, gente. Vamos trocar ideia no Discord e submetam os projetos de vocês. E é isso. Boa sorte! Tamo junto.