[Imersão Dev com Gemini] Implementando a funcionalidade de busca

Chegamos à quarta aula da Imersão Dev. Rafa, como está o seu coração? Está ficando cada vez mais incrível esse projeto e eu acho que agora é o momento que vamos fazer tudo aparecer na tela.

Está sensacional essa quarta aula. Luciano, qual a expectativa para o que vamos fazer hoje? Estou super empolgado para ver o nosso código JavaScript evoluir, e quem nunca teve essa experiência, essa chance de ver uma aplicação em funcionamento, escrevendo do zero, tem essa emoção que é sensacional.

É muito legal. Antes de entrarmos de fato no assunto e escrevermos código JavaScript, tirar o que está no console, exibir na tela, manipular, e fazer uma mágica com o código, queremos passar uma mensagem muito importante para você. A Imersão Dev vai presentear algumas pessoas que criarem os projetos mais criativos.

Entretanto, preste muita atenção, porque esses projetos não serão avaliados apenas pela apresentação. Seria injusto, principalmente com as pessoas que estão começando. Queremos avaliar por criatividade a ideia e o projeto, desde que ele esteja no escopo do que ensinamos durante as aulas.

Suponha que criamos um projeto que conecta com o Google e faz várias coisas. Não mostramos isso em aula, então, provavelmente, o seu projeto não vai entrar. Preste bastante atenção, pois isso é importante.

Os projetos mais criativos, usando os conceitos que passaremos nas aulas 4 e 5, serão os projetos avaliados. Outro ponto muito importante é que a nossa comunidade no Discord pode levantar ou não alguns projetos. Portanto, quando estiver criando o seu projeto, compartilhe no Discord, peça para as pessoas votarem no seu projeto, e vote em outros projetos que você achar legais, levando em conta a criatividade, que será um fator muito importante.

Ela terá um peso muito grande para que a pessoa seja premiada. Vamos mostrar quais são os prêmios: são 10 lugares, ou seja, 10 prêmios. Estou impressionado, Gui!

Eu quero citar o primeiro, que é muito incrível. O projeto mais criativo dessa imersão vai ganhar uma bolsa da FIAP, mais 1 ano de acesso à plataforma da Alura no plano Ultra, que é o acesso mais incrível, além de acesso à PM3, participação no podcast do Hipsters com o Paulo Silveira, que será muito legal, além da visita e do almoço na sede do Google em São Paulo. Quem não é de São Paulo pode ganhar?

Pode ganhar também! Teremos passagens nacionais. Vamos supor que você é um aluno que não está em território brasileiro, fez seu projeto e foi muito criativo, mas se você está em outro lugar, não será possível.

São passagens nacionais, então você precisa estar em território brasileiro para concorrer a esse primeiro prêmio que é simplesmente incrível e pode mudar, de fato, e vai mudar, de fato, a vida de alguém. Lembrando que há regras para poder participar e ter a chance de ganhar os prêmios. Você deve estar inscrito na imersão, ser maior de 18 anos, assistir todas as aulas, e acessar o Gemini usando o nosso link especial.

Além disso, é importante que o projeto não tenha nenhum tema antiético. Esse é um critério eliminatório de qualquer projeto, então se trouxer algum traço de viés contra algum grupo, alguma etnia, algum gênero, algum tipo de preconceito, não tem criatividade ou apresentação que resolva. Está desclassificado.

Exatamente. Para finalizar esse assunto sobre a grande premiação, precisamos enfatizar que se enviamos o mesmo projeto que fizemos durante as aulas da imersão, está valendo, Rafa? Não está valendo.

Você precisa criar um projeto novo. Isso é extremamente importante, principalmente, quando falamos sobre aprendizagem. Recebemos um conhecimento, copiamos e fazemos exatamente igual.

Depois modificamos aquilo para algo que gostamos e acreditamos. Isso faz parte da nossa jornada como especialistas em tecnologia e é muito comum. Nós já fizemos isso.

Aprendemos em curso e depois pensamos: "Preciso aplicar isso em outro contexto". Apenas reforçando, Gui, pegar o que construímos juntos, mudar a cor do fundo, mudar a base de dados, falar de música e não de atletas, não é necessariamente um fator de muita criatividade no projeto. Exatamente.

Você precisa sentar e pensar, e pode até usar o Gemini para isso. Uma dica que podemos dar para a galera é juntar os tópicos que estamos aprendendo, juntar os exemplos de código usados, e pedir uma dica para o Gemini: "Eu aprendi isso na imersão da Alura. Qual tipo de projeto legal eu posso construir com esse conhecimento?

Está lançado o desafio! Boa sorte para você que quer encarar isso. Tem gente que não quer encarar, Rafa, e está tudo bem.

Algumas pessoas estão aqui para aprender, e está tudo bem se não submeter o projeto. Outras pessoas são super competitivas e querem tentar ganhar o prêmio, a bolsa da FIAP, mais 1 ano na plataforma da Alura, mais a visita à sede em São Paulo. Nesse caso, boa sorte!

De verdade, estamos torcendo para escolher uma pessoa simplesmente incrível e que realmente mereça. Todos vocês mereciam. A verdade é essa.

Seria tão legal se pudéssemos fazer isso para todo mundo, mas, infelizmente, é um pouco limitado. Porém, queremos de verdade mudar a vida de alguém durante essa Imersão Dev com o Google Gemini. Todo o regulamento ficará disponível no guia de mergulho sobre a imersão, o qual você pode ler depois com calma e entender melhor sobre essa premiação.

Vamos para o nosso código? [♪] O que havíamos feito? Inicialmente, criamos uma variável, depois criamos uma lista, e essa lista evoluiu para uma estrutura chamada objeto, na qual temos uma descrição, um link e um título para cada atleta que queremos.

O problema é que temos tudo isso no console. Luciano, imagine que eu fiz uma aplicação e queria que você visse. Ao abrir, você diz que para conseguir ver os dados, é preciso clicar com o botão direito, selecionar a opção "Inspecionar", clicar na seta e ir em "Console".

Eu já teria desistido de ver essa aplicação. Você já estava na Netflix assistindo algo. Não faz sentido, pois queremos mostrar isso na tela.

O ponto, Rafa e Luciano, é como tirar esse conteúdo que está no console e mostrar na tela? Agora vamos precisar começar a interagir o JavaScript com o HTML, onde estão, realmente, todos os nossos elementos e tags. Gui, vamos voltar para o nosso código.

A primeira coisa que precisamos fazer é procurar em qual lugar do nosso HTML vamos querer inserir essas informações. Vamos entrar no HTML. O que você acha, Gui?

Onde você acha que seria o melhor lugar para colocar essas informações? Em cima do título? Embaixo?

Isso é muito curioso. Existe uma seção onde vamos mostrar os resultados da nossa pesquisa. Vamos remover tudo isso, selecionando da linha 21, onde temos a primeira div do resultado, até remover os três resultados teclando "Ctrl + Barra".

Com isso, ele vai comentar. Ainda temos o código, mas ele está comentado, então ele não significa nada para o navegador. Da mesma forma, como eu faço um comentário em JavaScript, Rafa?

Vou usar "Ctrl + Barra". Com "Ctrl + Barra", ele coloca duas barras. Isso é um comentário.

Ele não interfere em absolutamente nada no código. De volta à aplicação, observe o que aconteceu, Rafa. Vamos atualizar.

Ele tirou a pesquisa que tínhamos antes. O ponto é: como colocar um resultado? O resultado vem sempre da div item-resultado.

Porém, o local certo, provavelmente, é dentro da seção de pesquisa. Nessa section, já temos uma classe, então ao usar resultados-pesquisa, quando formos no CSS, podemos utilizar resultado-pesquisa para estilizar. Porém, no JavaScript, costumamos usar outro atributo dentro do elemento HTML, que é o ID.

Ele funcionará como um nome, uma tag para referenciar, mas no JavaScript dessa vez. A classe é bastante usada no CSS, enquanto o ID é usado no JavaScript. Vamos usar o ID resultados-pesquisa?

A classe sempre irá referenciar para o CSS, para aplicar estilos. O ID será assim. Provavelmente, é algo para o JavaScript.

Você conseguiu copiar o nome resultados-pesquisa? Eu acho que não, mas consigo digitar isso. O que podemos fazer?

Primeiro, vamos criar uma variável para armazenar a tag do HTML, então colocamos let. Podemos dar um nome, que pode ser section, o nome da nossa tag. O que vamos fazer agora?

Precisamos mostrar que isso é uma tag HTML, então vamos escrever o seguinte comando: document. getElementById. A partir disso, conseguimos traduzir do inglês para o português, então vamos até o documento HTML.

O ponto serve para colocar o getElementById, que em português, seria "Busque o elemento pelo ID". Nesse método, abrimos parênteses, abrimos aspas, e colocamos o nome do ID, ou seja, resultados-pesquisa. Exatamente.

Vamos apenas confirmar se resultados-pesquisa está correto. Conferindo se eu entendi: sempre que eu escrevo document, essa é a forma de acessar as coisas que estão no documento HTML. Isso.

No document, usamos um ponto para, provavelmente, entrar em algum lugar, e ele diz para pegar o elemento com esse ID. É curioso que ele tem uma estrutura similar ao console. log, e entre parênteses, passamos o ID que vimos.

Eu conseguiria ver essa section no console? Pode ser. Vamos fazer o seguinte: escreveremos console.

log e passaremos section entre parênteses. Também vamos comentar essa linha. Usamos "Ctrl + Barra" para comentar a linha do console.

log dos dados. Vamos voltar à aplicação para entender como isso funciona. Ele já trouxe o resultado.

Temos a section resultados-pesquisa, e quando expandimos, há várias informações. Temos uma série de informações. Eu não faço ideia do que elas significam, mas tem bastante coisa que podemos visualizar e parece estar certo.

Conseguimos pegar a tag do HTML e imprimi-la no console. Porém, não é isso que queremos fazer. Queremos imprimir algo dentro dessa tag do HTML.

Vamos lá? Primeiro, vamos precisar definir o que queremos escrever. Gui, podemos colocar nessa section o que já tem dentro do HTML.

Certo, vamos lá. Todo resultado tem essa estrutura: uma div, o h2, o parágrafo, com aquelas classes do CSS, e ele para aqui. Queremos isso para todos os resultados.

Exatamente. É isso que precisaremos escrever dentro da tag. Vamos voltar para o JavaScript e fazer isso?

Qual comando utilizamos? Vamos pegar a variável section e digitar . innerHTML.

Feito isso, vamos passar todas as informações que quisermos escrever dentro dessa tag. Eu passo com parênteses? Podemos passar igual.

Para atribuir algo. Atribuir, exatamente. Em seguida, vamos colocar entre crase todas essas tags.

Eu coloquei uma crase e vou teclar "Enter" duas vezes, só para organizar melhor, depois "Ctrl + C" e "Ctrl + V". Passamos esse resultado. Ele não identou muito bem, mas acho que está dentro da crase.

Também conseguimos fazer manualmente, só para ficar bonito e entendermos como está a estrutura. Usaremos o atalho "Alt + Z" para visualizarmos tudo em um código só. O que fizemos foi pegar a seção no documento e usar a funcionalidade .

innerHTML, que seria onde colocamos o resultado dentro desse HTML. Pegamos um resultado aleatório, da Rayssa Leal. Na verdade, ele já estava no HTML.

Essa div inteira está dentro da section que escrevemos de forma estática. Estamos trazendo essa dinamicidade. Basicamente, estamos aprendendo como injetar HTML a partir do JavaScript.

Exatamente. Já apareceu, pessoal. É sério?

Já apareceu a Rayssa Leal. Vamos garantir que essa Rayssa Leal é a mesma Rayssa Leal que temos no JavaScript? Precisamos ter certeza de que não estamos no meio da matrix.

Vamos colocar, por exemplo, Luciano Leal no código. Ao voltar para a página, temos o Luciano Leal. Muito bem.

O que fizemos foi criar algo para visualizar no HTML através do JavaScript. Já me dá uma ideia, Rafa. Sabe o que eu pensei em fazer?

Para essa base de dados, temos três elementos, então poderíamos, de alguma forma, indicar que queremos visualizar de dados. Faremos isso agora. Porém, precisamos fazer assim: no elemento zero de dados, ou seja, dados[0], queremos visualizar o título.

Isso vai funcionar? Podemos testar. Ao visualizar, esperamos que apareça "Rayssa Leal".

De volta à página, não temos isso. Ele colocou diretamente dados[0]. titulo.

Quando adicionamos o HTML entre crases para colocar as tags por meio do JavaScript no nosso documento, podemos utilizar as variáveis. Porém, para mostrar que aquilo é uma variável, dentro dessas crases, precisaremos colocar um cifrão logo antes da variável. Podemos fazer isso.

A ideia é a seguinte: quando colocamos a crase, ele pega um texto que o HTML entende, e dados[0]. titulo não é o texto. Queremos a variável.

Queremos sinalizar que esse pedaço em específico é uma variável do código JavaScript. Como é o sinal, Rafa? O sinal de dólar e mais o quê?

Coloca entre chaves. As chaves no final dele. Isso.

Chaves no final. Beleza. Deixa eu ver.

Nossa, eu sou muito programador! Que isso! Ficou muito legal.

Olha, eu já tenho uma ideia. O que eu poderia fazer? Eu poderia fazer esse section inner HTML algumas vezes.

Eu poderia fazer assim: dados, um título, aí, eu vou colocar o outro aqui, esse texto. . .

Pois é. Esse texto também é uma variável. Exatamente.

A descrição também está no nosso objeto. Eu vou tirar todo o texto e vou fazer uma coisa diferente. Eu vou colocar aqui.

Porcento. Abre chaves e fecha chaves. E aqui dentro, eu vou passar "dados", mas não com índice zero.

Com índice um. Só para vermos. .

descricao. Vou fazer um teste agora, Rafa. Pode ser?

Pode. Quero fazer o seguinte. Temos dados no índice zero.

Eu quero mostrar alguma referência de dados. Então, sinal de dólar. Abre e fecha chaves.

E aqui dentro, eu vou colocar assim. Dados no índice um. Mas eu quero mostrar, por exemplo, o título.

O título, não, a descrição. Boa. Eu estou exibindo a Rayssa Leal, que é o título do elemento um.

E a descrição do elemento dois. - Beleza? - Boa.

Só para visualizar. Está dando certo. Ele trouxe Beatriz Souza.

Temos um problema aqui agora, que é o seguinte. Como eu resolvo a questão de conseguir exibir todos os dados que temos na tela? Esse é um problema.

Porque assim, analisando agora, temos três elementos. Temos três atletas. Mas, imagina se eu tivesse mil atletas cadastrados.

Eu precisaria de quantas linhas dessas daqui? Eu levei praticamente da linha seis a quatorze. .

. Quase dez linhas. Quase dez linhas para inserir um atleta.

Pois é. Podemos agora aprender um novo conceito da programação, que seria os laços de repetição. Então, podemos escrever apenas uma vez essa estrutura toda da div com H2, com a tag p ou a, e aí ficamos repetindo para quantos elementos quisermos ou quantos elementos tivermos dentro de uma lista.

Vamos fazer isso, Gui? O que você acha? Vamos.

A estrutura, pensando em português primeiro, qual que seria a lógica? Para cada dado dentro da lista de dados, queremos que alguma coisa aconteça. Vamos escrever toda essa estrutura HTML.

Porém, não é em português que escrevemos o nosso JavaScript. Ele não entende o que acabamos de escrever nesse código. Então, traduzindo, o que seria o "para cada"?

Seria o for, "para". Vou comentar aqui, vou comentar essa linha e vou colocar na linha de baixo, só para não perder as referências. Vou colocar for e vai representar o "para cada".

Aí nós abrimos parênteses porque não temos esse "para cada dado". O nosso programa ainda não sabe o que é um dado. Ele sabe o que é a nossa lista de dados, mas ele ainda não sabe o que é um dado.

Vamos abrir parênteses e vamos declarar esse dado, esse "cada item". Então, escrevemos "let" e colocamos o nome "dado". Pode ser o nome dessa variável.

Essa variável vai referenciar a cada um dos itens da lista. Ainda não colocamos esse valor, mas vamos colocar. Deixa eu só ver se eu entendi.

Então, é isso: Na primeira vez que ele executar, ele vai trazer só isso aqui, que é o primeiro dado, o primeiro objeto. Ele vai fazer uma mágica lá, que vai colocar na tela. Depois, na segunda vez, ele vai trazer o segundo dado.

E ele que vai controlar quantas vezes ele vai precisar fazer isso. Então, se eu tivesse três, que é o meu caso, ou 30 mil referências, ele vai fazer. Ele vai percorrer a lista item por item até a lista acabar.

Isso. Exato. Mas aí precisamos referenciar que será para cada item dentro de uma lista específica.

Então, nós colocamos essa lista específica. É para cada dado dentro da lista de dados. Então, é para "for" dado "of" dados.

O "of dados" é dessa lista específica, dentro dessa lista específica de dados. Legal. É.

Então, assim, ele vai ficar fazendo um loop disso. Vai ficar repetindo. Certo.

Lembrando que esse "dados" é uma variável que já tínhamos criado. Não podemos criar uma nova variável referenciando a lista. A lista específica nós já tínhamos no outro arquivo "dados".

Isso. Inclusive a linha 1 do console. log, que vem do arquivo.

Isso. E como fazemos para ele ficar fazendo isso para todos os dados? Como eu falo assim "olha, você precisa fazer essa repetição"?

Colocamos dentro de chaves tudo que queremos que seja executado para cada item dentro da lista de dados. E quais são as instruções que queremos que aconteçam para cada item da nossa lista? Queremos que essa estrutura se repita.

Então, esse section. innerHTML com as divs e tudo mais, queremos que apareça para cada dado. Vamos colocar isso daí entre as chaves.

Tá. Da linha 10 a 18, eu vou dar um "Ctrl+X". E vou colocar ele aqui dentro.

"Ctrl+C", "Ctrl+V". "Ctrl+X", "Ctrl+V". Beleza?

Aí, acho que essa parte dos dados, ele vai mudar. Isso. Porque antes estávamos usando o objeto diretamente, o "dados", e apontando o índice.

Com o nosso for, já estamos percorrendo um item de cada vez. Então, não precisamos mais ter o indicador do índice. E a nossa variável temporária se chama "dado", que vai conter cada item da lista um de cada vez.

Exatamente. E podemos aproveitar e já corrigir também o link, que deixamos escrito forçado aí, hardcoded. - Acho que está "dados" ainda no.

. . - É verdade.

É, o segundo está "dados". Verdade. Obrigado, Rafa.

Aqui, vamos passar o porcento. Eu preciso desse aqui, gente? Agora eu fiquei na dúvida.

Aqui, eu fiz errado. É o dinheirinho. dado.

link Isso. Beleza. Vamos dar uma olhada.

E apareceu a Rebeca Andrade! Vamos tentar entender por quê. Aqui o link está certinho, da Rebeca?

Tá certinho. Vamos ver o porquê que apareceu a Rebeca. Ao olhar os nossos dados.

js. , a Rebeca é o último elemento. Isso.

Entrou certinho. Cliquei no link e foi o link da Rebeca. Mas a Bia e a Rayssa não apareceram.

Como já comentamos, No JavaScript, podemos dar um valor para uma variável. E aí, depois, podemos trocar esse valor ao longo do tempo, ao longo do nosso código. Então, na primeira vez que executamos essa instrução para o primeiro item, para o primeiro dado, que era a Rayssa Leal, nós colocamos a informação dela.

Mas aí, na segunda vez que executamos, estamos, na verdade, sobrepondo a segunda informação, que é da Rebeca, em cima da Rayssa. Então, não estamos somando, não estamos adicionando as informações. Estamos apenas substituindo.

Então, o que vamos precisar fazer? Somar, vamos precisar adicionar esses textos. E o que podemos colocar no nosso código para somar cada um deles?

Apenas um "+" antes do nosso sinal de igual, de atribuição. Então, se eu coloco um "+" aqui. .

. Eu posso fazer um desenho aqui só para ver se eu entendi mesmo essa parte? Vai ficar assim.

Então, temos uma variável que se chama "dado". let dado, só para ver se eu entendi. Aí, primeira vez, ela tinha o nome de Rayssa.

Isso. O valor Rayssa. Rayssa.

Aqui, beleza. Aí, na segunda vez, ele pegou essa mesma variável de dados e passou outro valor. Exato.

Ele passou, por exemplo, Rebeca. E depois, ele passou, por exemplo, "dado" virou "Bia". Virou a Beatriz.

- É isso que tava acontecendo? - Isso aí. Quando a Rafa colocou esse sinal de +, o que de verdade está acontecendo agora?

Estamos, na verdade, somando um ao outro. Como se fosse isso aqui? O valor da Rayssa, mais o valor da Rebeca, mais a Bia.

Então, ele está sempre pegando o que ele já tinha e vai atribuindo. É como se estivéssemos reescrevendo o que já tínhamos lá no HTML. Então, a div toda da Rayssa, agora, embaixo, estamos colocando a div toda da Bia e a div toda da Rebeca.

Estamos somando. Estamos agregando todas essas tags do HTML. Então, podemos dar uma olhada para ver como que fica desse jeito.

Vamos. Nossa, eu tava na expectativa aqui já. Vamos ver.

Acessando. . .

Rayssa Leal, Beatriz Souza e Rebeca Andrade. Nossa, ficou legal isso, hein, gente? Você clica no da Beatriz só para vermos que tem um link específico, uma informação específica.

Perfeito. Nossa, que bacana. Então, já conseguimos listar o conteúdo da nossa base de conhecimento.

Isso aí. Mas estamos listando sempre todos. Isso.

Assim, eu sei que a funcionalidade da pesquisa aqui, quando digitamos um nome, por exemplo, digitei "Bia" ou digitei "judoca", "ginástica", algo assim, queremos trazer assuntos relacionados a isso. Podemos ver isso mais para frente, não é o nosso objetivo agora. Mas eu queria fazer um passo assim: eu clico no botão Pesquisar, dou um clique, aí sim aparece esse resultado.

Mesmo que seja um todo. Depois vemos a funcionalidade de pesquisar na nossa base. Estou muito feliz com o código exibir os resultados na tela com JavaScript.

Foi muito incrível. Sério, sério. Eu acho que não precisamos mexer mais no projeto.

Tá legal. Estamos listando tudo. Faz sentido?

Podemos melhorar ainda um pouco, Gui. Sinceramente. Mas já está funcionando.

Eu sei, mas existem algumas coisas que fazem com que o nosso projeto fique melhor. Vamos ter um momento de maturidade de desenvolvimento agora. Isso.

Como viemos falando em todas as aulas, como você falou: dessa forma funciona, mas sempre existem boas práticas que é bom ir praticando em tudo que vamos construindo, para sempre termos um código bem escrito, simples, para que outros desenvolvedores que acessem o nosso código consigam entender o que quisemos fazer ali e até para qualquer manutenção, qualquer alteração futura que queiramos fazer, a estrutura no ajude a fazer isso de uma forma eficiente. Exato. E o que vocês poderiam sugerir, assim, de uma melhoria que ficaria legal?

Então, nesse caso, o que estamos fazendo de forma repetida? Estamos colocando esse section. innerHTM três vezes.

Não precisamos fazer isso para cada vez que adicionamos uma atleta. Podemos fazer toda essa adição de texto primeiro, colocar todos os textos em uma variável e aí no final, depois, colocamos no HTML essa variável. Então, ao invés de ficar colocando no HTML cada texto e adicionando, podemos colocar os textos todos somados em uma variável e, no final, colocar tudo no HTML de uma vez só.

Exato. Ou seja, numa visão de boas práticas, o section que estamos manipulando é um componente muito crítico na estrutura da nossa aplicação. Então, quanto menos pudermos manipulá-lo, melhor.

Então, como você deu de exemplo enquanto eu explicava o for, se tivéssemos 30 mil elementos aqui, estaríamos fazendo 30 mil vezes essa atualização, esse incremento de valor dessa estrutura crítica. Então, talvez valha a pena criar uma nova variável, que não é tão crítica quanto o section, que vai armazenar essa dinâmica toda do for. E depois só falamos assim: faz uma vez só.

Entendi. Que curioso isso, que legal. Bom, variável eu acho que eu sei criar, gente.

O que eu não sei é dar o nome para as variáveis. Podemos colocar "resultados". Resultados.

E essa variável recebe qual valor? Ela vai receber. .

. Como ainda não sabemos o que é dado, ainda não estamos fazendo o nosso laço de repetição, podemos criar essa variável, então é só declarar e deixá-la vazia. Podemos colocar apenas as aspas e deixá-la.

Yes. Aspa vazia, sim. "Yes" [risos].

Pode deixar, está tudo bem, está legal. Yes! Vamos lá, ficou bacana.

Então, deixa eu ver só se eu entendi. No lugar de ficar chamando o innerHTML 30 mil vezes, porque temos muita gente na base de conhecimento, vamos falar assim: coloca isso tudo em "resultado". Estamos dando o contexto.

Isso aí. Se eu volto no projeto, não tem nenhum na tela. Ótimo.

Isso aí. Aí vamos falar assim: agora, inner, que eu tenho todo o conteúdo já feito fora do for, é fora do for, né? Depois desse.

. . Isso.

Depois de fechar a chave. Porque tudo no for será feito a cada item. Aí eu vou falar assim: eu quero a section.

innerHTML. Exatamente a mesma instrução que você tava usando antes, isso aí. Mas eu vou receber uma vez só, quem?

O resultado. A variável. Isso aí.

Resultados. Aí eu volto para lá. Ou seja, o resultado é exatamente o mesmo, mas agora você tem um código melhor estruturado, organizado.

Isso é comum no dia a dia? Sim, sem dúvida. O primeiro código, geralmente, que escrevemos, muitas vezes não é o código vai para o final, em produção.

Exatamente isso. Que legal. Ficou muito bacana.

Eu gostei dessa maturidade de código aqui. Ficou bacana com esse exemplo do for. Gente, olha o que fizemos.

Tiramos os dados que estavam em um arquivo, e, com o JavaScript, colocamos esses dados no HTML. Isso. Tanto que eu posso.

. . Se eu tirar essas informações aqui, tirei.

Vou tirar. Posso tirar? Só para ter certeza mesmo.

Pode tirar tudo. Vou tirar. Vou deixar só a classe e um sonho.

É a classe e um sonho. É isso. E vai estar funcionando.

É isso mesmo. Mas, Gui, eu acho que ainda também podemos melhorar uma coisinha nesse projeto, que é, finalmente, utilizar o botão de Pesquisar. Então agora que já estamos conseguindo imprimir as informações do nosso arquivo JavaScript no HTML, podemos começar com a lógica de conseguir, de fato, pesquisar.

Vamos colocar o botão, fazendo ele funcionar, finalmente? Ah, Rafa, aí o meu coração não aguenta, Rafa. Como assim?

A ideia é o seguinte: eu não vou ter esses daqui direto? Eu vou clicar no Pesquisar, aí eles vão aparecer? A ideia é essa.

Da nossa fonte de dados. É que, nesse momento, o que está acontecendo é: se você tivesse 100 atletas nesse arquivo "dados", na hora que você abrir essa página, ele já vai mostrar 100 atletas de uma vez. Então, o primeiro passo que podemos dar, até para começar essa dinâmica de como criar essa interação, talvez uma sugestão.

O que vocês acham? Na hora de pesquisar, ainda não estamos refinando a busca na nossa base de conhecimento, mas você pode só ativar para aparecer o resultado embaixo. Ótimo.

Vamos fazer isso. Eu não sei o que vocês têm em mente. Primeiro, podemos buscar onde está esse botão lá no nosso HTML.

No meu projeto, é a linha 18. É o "button". Que está na primeira seção que temos lá dentro do main.

Perfeito. O botão, especificamente, é uma tag, um elemento que possui um atributo que consegue interagir de uma forma muito legal com o JavaScript. Como é um botão, sabemos que vamos clicar nele.

Ele tem um atributo chamado "onclick". Pode até adicionar aí no nosso código, Gui. Qualquer valor que a gente passe dentro desse onclick será uma ação que será executada ao clicar no botão.

E o nome dessa ação será uma função. É o que chamamos de função no JavaScript. Que nada mais é do que um bloco de código que contém todas as instruções que vão ser executadas.

Esse onclick é dentro da tag button. Antes de fechar a tag button e antes da palavra "pesquisar". Ótimo.

Onde o cursor ficou piscando, entre aspas é onde vou precisar dar um nome. Que nome usamos geramente, Rafa? Então, para essas funções, que são esses blocos de código que vamos criar ainda, vamos executar uma tarefa específica.

E nesse caso, qual será a tarefa? Vamos pesquisar. Então, podemos colocar esse nome da nossa função.

Pesquisar. Só isso? E como estamos chamando uma função, dentro da sintaxe do JavaScript, para a gente dar essa orientação para o navegador, que é uma função, colocamos a referência de abrir e fechar parênteses.

Coloquei um parênteses e ele já colocou o outro. Agora vocês estão colocando coisa na minha cabeça, gente. Quer dizer que quando eu escrevo algo e abro parênteses, isso é uma função?

Exatamente. O console. log, ele abre parênteses, é uma função?

Mas tem uma diferença. Esse console. log não foi a gente que criou.

Não está nem em português. O console. log é algo que já é do JavaScript.

Nesse caso, nós escrevemos o "pesquisar". Vamos precisar criar essa função. Diferente, por exemplo, do document.

getElementById. É uma função que já vai lá no HTML e busca o que tem aquele id. Não foi a gente que fez.

Já está embutida. Isso é muito importante, pessoal. Muitos códigos que estamos vendo, principalmente do JavaScript ou do CSS, que parece mágica mesmo.

Por exemplo, posiciona o texto no centro. Isso. Não foi a gente que falou pra pegar o pixel da tela e colocar de tal jeito.

Alguém já fez isso e estamos reutilizando. Legal. Rafa, o desafio agora é o seguinte, como é que eu crio uma função?

Primeiro, temos que entender o que queremos colocar dentro dessa função. Eu queria colocar tudo isso aqui, Rafa. -Tipo, clicou, acontece tudo.

-Perfeito. Vamos começar a escrever essa função, vamos declarar essa função ali no começo, já que queremos colocar tudo que está escrito. Vou apagar esse console da primeira linha.

Não precisamos mais dele. Já testou e vimos que funcionou. Mas para começar mais simples, ver como funciona a função, podemos usar como ação aquele console.

log. Boa. Gostei da ideia.

Vamos criar uma função, Rafa. O que precisamos fazer? Diferente de quando declaramos variáveis, que a gente usava a palavra "let", aqui vamos usar a palavra "function", que é função em inglês.

Qual era o nome que a gente escolheu? Foi "pesquisar". Temos que adicionar os parênteses para indicar que há uma função.

Depois, a gente coloca entre chaves todas as instruções que queremos que sejam executadas. Semelhante ao for. Exato.

Então, para cada dado, entre chaves, faz tudo isso aqui. Então, com a função é o mesmo. Na função pesquisar, tudo que queremos que aconteça estará entre chaves.

Sim. Fazendo a referência do for, que você fez, a diferença é que no for ele vai executar o mesmo código N vezes, de acordo com a quantidade de itens que tem nessa lista dados, e a function, o que você escrever ali dentro será executado só uma vez quando essa função for chamada. Não é um laço de repetição.

É o clique, exatamente isso. Eu posso até fazer o seguinte, gente. Vou colocar aqui o console.

log. Posso escrever, por exemplo, "clicou". Só para a gente testar mesmo, para ver se isso aqui está funcionando.

Vou voltar aqui. Os nomes aparecendo lá, tudo certinho. Eu vou clicar no botão.

Apareceu o texto "clicou". Deu certo, vou clicar de novo. Conforme clico, ele vai subindo a numeração.

Está dando certo. Mas ainda não é isso que queremos. A função se chama "pesquisar" e fizemos um console.

log avisando que clicou. Se eu te mando um código desse seria meio decepcionante. Clica no botão, mas tem que abrir o inspecionar.

Do jeito que está não vai ajudar muito. Então, o que queremos fazer? A nossa pesquisa mesmo!

No momento, nossa pesquisa ainda não filtra a informação, mas podemos mostrar todas as atletas, todos os dados que temos. Então, o que a gente faz? Recorta todo o código que a gente já tinha desenvolvido, que é o que escreve todas as informações no nosso HTML, e coloca dentro da nossa função.

Maravilha. Vamos ver se isso está funcionando. Gente, se isso funcionar, eu vou ficar muito emocionado.

De verdade. É muito legal. Temos um projeto no qual nenhum resultado aparece.

Quando clico no "Pesquisar", ele coloca os resultados na tela! Ficou muito legal. E a Rafa comentou sobre a funcionalidade de pesquisar.

. . Digitar, por exemplo, "Rebeca".

Clicar em pesquisar para exibir só informações da Rebeca, isso é outro desafio. É o nosso próximo passo. Já dando spoiler da próxima aula.

Então, se você quer real, clicar aqui no pesquisar, e de alguma forma vai verificar se o título ou a descrição tem o valor inserido. . .

Fica para a próxima aula que vai estar simplesmente incrível! Está muito legal isso aqui. E falando de utilidade, Gui, o que estamos fazendo aqui, estamos com esse exemplo lúdico de usar atletas brasileiros e tal mas isso é uma funcionalidade real que na maioria das empresas que a gente trabalha ou dentro das escolas que a gente frequenta, sempre temos aquela base de conhecimento onde queremos saber como que a gente gera uma segunda via de boleto, como solicitar férias, no caso de uma empresa.

É basicamente isso que estamos fazendo. Temos uma base de informações e estamos chegando no ponto de construir um mecanismo de como encontrar uma informação específica dentro dessa base controlada de informações. E eu tenho um exemplo muito interessante sobre isso.

Se eu acesso a plataforma da Alura, existe um local onde podemos pesquisar por algumas coisas. Ele diz assim: o que você quer aprender? Vou colocar "html e css" e pesquisar.

Ele vai trazer da base de conhecimento da Alura resultados sobre isso. É até similar com o que estamos fazendo, a diferença é que eles estão usando uma imagem, que não temos. Eu quero aprender, por exemplo, JavaScript.

Vou pesquisar e apareceu. JavaScript, TypeScript. .

. formação Explore React com JavaScript, aplicações web com JavaScript. .

. Um monte coisas legais. Conhecendo objetos, que estamos vendo na imersão, Um monte de coisa legal.

Repara que isso é uma funcionalidade que está presente na maioria das aplicações. É mundo real. O que estamos fazendo de forma lúdica, homenageando, mesmo que de forma simbólica, nossos atletas do Brasil, no nosso caso aqui, é algo que é comum.

Uma última sugestão, Gui, já que estamos nessa vibe de pensar nas boas práticas, e como que a gente desenvolve no mundo real. . .

O que você acha. . .

Agora que chegamos em mais esse marco no nosso código, eu sinto falta de uma coisa. Você construiu esse código, como que você faria se, a partir desse ponto, eu passasse a ser o desenvolvedor responsável por montar esse código? Como que você explicaria esse código para mim?

Você ia me mandar um áudio no WhatsApp? Ia me escrever uma carta? o que você faria?

É uma ligação, né, Rafa? Talvez fazer um meet. Então, o que podemos fazer?

No mundo das boas práticas, temos um conceito de documentação do código, que é o quê? Você não tem que estar disponível e acordado a hora que tiver a necessidade de fazer uma manutenção do seu código. Então, o que você busca fazer?

Tenta incluir no seu código orientações ou explicações explicando para que serve essas estruturas, essas funções, essas variáveis, de uma forma que outra pessoa, que não viu você construir do zero, como vocês que estão com a gente, passo a passo na construção do projeto. Que qualquer pessoa consiga ler o seu código e entender a motivação, como é que usa e tudo mais. Então, o que você acha de pegarmos esse nosso código do app.

js, copiar ele inteiro e colocar no Gemini pedindo para o Gemini ajudar a gente colocando comentários nesse código? Sensacional, vamos lá! Vou abrir uma nova aba do Gemini, e posso colocar já o código todo?

Manda ver. Vou colocar aqui o código todo, "Ctrl+C", "Ctrl+V". Eu vou falar assim: tenho essa base de código e gostaria, como que eu falo para eu criar a documentação?

quero incluir comentários, sem modificar o código. Deixa claro para ele que você não quer alterar lógica nem variáveis. Pra ele não criar um nome melhor do que eu criei.

Pode acontecer, sim. -Só isso? -Sim, manda ver.

Vamos ver. Tudo isso que estamos vendo, a gente poderia até, no futuro, colocar em outro documento. Exatamente isso.

Caso o nosso código seja crítico, a gente podia pegar isso e falar: ele funciona desse jeito, quero uma explicação. Olha só, ele não modificou o meu código. "Obtém a seção do HTML onde os resultados serão exibidos" Que legal, comentou linha por linha!

Posso copiar esse código? Pode. Vamos lá, vou copiar esse código.

Vou lá na nossa aplicação, seleciona tudo, tira e "Ctrl+V". Então, ele colocou comentário de todas as etapas que estamos fazendo. Colocou até a depuração.

Precisamos desse console. log? Não, pode tirar.

Não precisamos mais do console. log(). Então tem a seção onde a gente inicia, "Inicia uma string vazia para armazenar os resultados".

"Itera sobre cada dado da lista de dados". "Cria um novo elemento HTML". .

. Agora está mais fácil para fazer manutenção do seu código sem precisar ligar para você. Muito incrível.

Acho que essa aula específica é uma das aulas de maturidade de código, mesmo que em um exemplo lúdico, mais incrível que já vimos dentro da Imersão Dev. Foi muito legal mesmo. Posso só testar para ver se está funcionando tudo?

Vamos testar pra gente acabar feliz essa aula. Acessei o Atletas do Brasil, não estamos exibindo nada, clico em "Pesquisar", aparecem as nossas atletas. 10 de 10, muito bom.

Gostei muito. Obrigado, gente. Vocês são professores incríveis.

Pessoal, deixando mais uma dica para vocês. Como falamos desde o início dessa aula, está liberado para vocês aí no Guia do Mergulho as regras do projeto que vocês devem submeter para concorrer aos prêmios. E também vai estar no Guia do Mergulho uma aula rápida de como usar o GitHub.

Vocês vão ver lá no regulamento que um dos passos que vocês têm que tomar é publicar o código na plataforma do GitHub. E para quem nunca utilizou, não sabe o que é, não sabe como é que usa, vocês vão ter acesso a essa aula adicional para entender como criar a conta de vocês lá, como criar um repositório, o que é um repositório. Fiquem tranquilos que vai dar certo.

Inclusive GitHub é um assunto da nossa próxima aula. Também vai ter isso, hein? Então caso você não enviou o projeto na quinta, na sexta também temos a aula que vai falar um pouco sobre GitHub.

Temos uma GitHub Star com a gente. Nossa, a aula será sensacional. A pessoa vai acabar a imersão com o código no GitHub, tendo aulas incríveis de GitHub.

E dominando muito essa ferramenta que é importante, né, Rafa? Muito obrigado a você que chegou até aqui, estou muito feliz com o projeto, com a sua presença, aprendendo e desenvolvendo mais toda essa aplicação. Fique ligado com os regulamentos lá no Guia de Mergulho, que o Luciano comentou.

Isso é muito importante. Boa sorte para você que vai submeter seu projeto e vai tentar uma bolsa de estudo na FIAP no primeiro lugar! Vai ser coisa incrível, gente.

Vai ser muito legal. Né, Rafa? Incrível!

Eu queria poder participar, sinceramente. -Será que não conseguimos? -Vamos?

-Vamos fazer um projeto nosso, Rafa? -Vamos! Vamos fazer um projeto nós três!

Tem que seguir o fluxo da imersão. É lógico. Pessoal, a gente se vê amanhã na última aula da imersão Dev, na qual vamos fazer o filtro da busca, vai publicar o projeto no GitHub, fazer um monte de coisa legal.

Muito bonita essa última aula. Vamos fechar com chave de ouro e tenho certeza que você vai gostar muito. Tchau!