Chegamos ao segundo dia da imersão Dev com o Google Gemini e Alura. E eu estou muito feliz que você deu play aí para aprender mais nesse dia. Bom, vamos recapitular o que fizemos no dia anterior?
Já fizemos bastante coisa até aqui, né Guilherme e Rafa? Aprendemos um pouco dos conceitos de HTML, absorvemos um pouco a abstração que a Rafa fez sobre o HTML como esqueleto, CSS como a cara, a maquiagem, e o JavaScript como a musculatura do corpo da aplicação que estamos criando. Aprendemos um pouco de CSS e começamos a praticar como que o Gemini consegue nos ajudar a ter insights, a entender mais o conceito das tags, a estruturação do código e agora podemos começar os próximos passos.
Olha, e a aula de hoje está incrível, incrível! E lembrando que, para que você tenha acesso ao seu certificado, você precisa acessar o Gemini através do link que está aqui embaixo, no QR Code, em todos os lugares, pessoal, aqui na tela, em cima, embaixo, do lado e tal. Acessa o Gemini através desse link, porque dessa forma você vai ter acesso ao seu certificado, assistindo as cinco aulas também.
Já deixei o meu aqui aberto. Tá certinho aqui. Nosso próximo desafio é o seguinte: vamos supor que eu vou digitar o nome da maior atleta do Brasil, Rebeca Andrade.
Clico em pesquisar e não acontece nada, nada. Sabe o que eu queria, Rafa e Luciano? Eu queria que, de alguma forma, pudéssemos ter uma ideia de como vamos exibir esses resultados na tela.
Então, poderia ser uma caixinha e vamos listando ali os resultados. Acho que é um momento importante também para pensarmos em que tipo de informação que queremos exibir. Então, acho que, inicialmente, o desafio será ir lá para o código HTML e começar a estruturar, no Visual Studio, e começar a estruturar como serão esses resultados.
Faz sentido? - Faz sentido. Eu vou tentar de cabeça algumas coisas e vocês me falam se faz sentido ou não.
Se eu estiver viajando muito, vocês podem falar. - "Na boa, tá viajando. " - Vamos nessa.
Vamos lá. A primeira coisa. Vimos que o conteúdo principal da aplicação fica armazenado entre a tag main.
E temos uma seção na qual temos o campo em que digitamos e um botão. Eu queria criar uma nova seção, uma seção para exibir os resultados. Se eu fizer isso aqui, section, não tenho nada ainda, e colocar todas as informações de resultados aqui dentro, está certo?
Tá certo. - É um começo? - É um começo.
Eu preciso exibir aqui algumas informações. Primeiro, eu queria colocar, assim que buscamos na nossa base de conhecimento, o título. Por exemplo, eu pesquisei "Rebeca Andrade", "tênis", "judô", e exibi ali algumas informações.
Como eu faço isso? O que que eu preciso colocar de informação e de tag? Então, nós utilizamos primeiramente a tag H1 para colocar o título da nossa página lá no cabeçalho.
Mas nesse caso, primeiro que é uma boa prática utilizar apenas um H1 na página, e segundo que, nesse caso é como se fosse um subtítulo. Ele não será tão grande quanto o título da nossa página, enfim, ele será secundariamente importante. Então, podemos utilizar a tag H2, que seria de "Heading 2".
Temos H1, H2, H3, H4, H5 e H6 também. Então, podemos usar o 2, e o 2 não teria problema usar mais do que um na página. Vamos colocar aí a Rebeca Andrade no H2?
Vamos. Rebeca Andrade. Posso visualizar lá como é que está ficando isso?
Uhum. Então, deixa eu acessar, vamos atualizar a página. Apareceu aqui, Rebeca Andrade.
Não era bem esse visual que eu queria, depois vamos utilizar o CSS para deixar isso aqui bonito, mas vamos pelo menos pensar nessa parte de deixar essa estrutura melhor. Além do H2, o que eu poderia passar de informação também, Rafa? Podemos colocar uma descrição do que ela faz, quem é a Rebeca Andrade.
É um parágrafo? É um parágrafo, exato. Boa, um parágrafo.
Você me ajuda nessa descrição, Luciano? Vamos. O que eu poderia escrever?
Eu acho que podemos ir no Gemini e pedir para o Gemini escrever para nós um parágrafo sobre a atleta Rebeca Andrade. Nossa, olha, isso mesmo. Faça um parágrafo.
. . .
Um curto parágrafo, para não ficar um texto muito grande. Um curto parágrafo sobre a atleta Rebeca Andrade. Legal, tem bastante coisa aqui que ele passou.
Vamos pegar o início aqui. Rebeca Andrade, maior ginasta brasileira de todos os tempos, força e elegância, conquistou o coração dos brasileiros e se tornou um ícone. Acho que esse primeiro já é suficiente.
Isso, até "ícone do esporte nacional". Aqui tem um ponto importante também que eu acho que vale frisar. Caso você esteja fazendo esse seu projeto com outra base de conhecimento, filme, série, agora é um momento interessante.
Muito importante para você pensar em que tipo de informação você quer armazenar na sua base de conhecimento. Então, no nosso caso, como são os atletas do Brasil, eu escolhi a Rebeca Andrade. Se você estiver fazendo atletas e quiser escolher outro, você pode também.
Vou colocar isso aqui dentro desse parágrafo e vamos dar uma olhada em como isso aqui ficou. Voltando lá na site das Olimpíadas, ficou um negócio meio estranho. O texto está indo de uma ponta a outra, mas isso aí tranquilo.
Por enquanto. . .
A informação está lá. Isso, é isso que importa. Se a informação estiver meio torta, não tem problema.
O importante é estar lá. Depois nós arrumamos com o CSS. Maravilha!
O que você sugere de outras coisas que podemos passar? Então, tem o título que pesquisamos, uma descrição sobre a Rebeca. .
. O que que daria para pôr? Puts, eu acho que a maioria dos atletas devem ter o seu site ou um.
. . Uma rede social.
Um artigo no Wikipedia, uma rede social. Acho que podemos pôr uma referência para quem encontrar, por exemplo, a Rebeca Andrade na nossa base de conhecimento, se quiser saber mais, clica nesse link e vai para uma página específica. Ah, que legal!
E acho que agora nós chegamos num momento novo. Como eu crio um link para outro site ou para outra aplicação? Nesse caso, podemos utilizar a tag "a", que seria de âncora.
Podemos adicionar um link e escrever para a pessoa clicar em algum textinho. Ah, legal! Eu acho que eu estou entendendo.
O href é uma referência que usamos aqui em cima para um arquivo CSS. Usando a tag a junto desse atributo href, eu consigo referenciar para outro site. Exatamente.
Vamos colocar de verdade uma. . .
Vamos pegar um link que existe só para vermos isso aqui funcionando? Vou perguntar aqui, por exemplo, "Rebeca Andrade Wiki". Só para darmos uma olhada aqui.
Vai aparecer "Rebeca Andrade" e tem aqui informações sobre ela. Se eu pego esse link, cliquei duas vezes, "Ctrl+C" nesse link, vou no nosso projeto, no Visual Studio, coloco um "Ctrl+V" nesse href, esse link vai funcionar. Sim.
Entretanto, eu preciso passar essa informação. Deixa eu ver como que está lá na aplicação. Sem o conteúdo de texto.
- Não apareceu para nós, né? - Exato. Então, temos que falar assim: olha, a descrição do link é essa.
É, precisamos clicar em algo. Precisa ter um texto, algo para ser essa âncora, para eu clicar e ir para outro lugar. E o que eu posso passar de informação?
Pode colocar "Mais informações sobre a Rebeca", algo assim. Bacana. Assim que voltamos no projeto.
. . Nossa, gente, isso aqui está ficando bonito, hein?
Aí testa aí, você clicar no "Mais informações", se vai abrir a página que queremos. Clico no "Mais informações" e vou lá para a página. Perfeito.
Muito legal. Só tem um ponto. Eu fui para a página, mas, teoricamente, eu saí da página que eu estou.
Existe alguma possibilidade de eu pedir para que ele abra uma página nova e não sair dessa aqui? Sim. Podemos voltar lá no nosso HTML e colocar dentro do "a" um atributo.
Um outro atributo. O atributo, no caso aqui, é que nem o href. Ah, está.
Podemos adicionar mais um, que seria o target. Boa. E aqui tem um ponto importante.
Aqui eu estou na tag a, tem o href. Antes desse fechamento inicial da tag a, eu vou colocar aqui o target. Exato.
Aí aparece já algumas opções para mim, Rafa. Blank, parent, self, top. Isso.
É blank, no caso. Esse _blank. Parece que essa forma de escrita é difícil no começo, mas de tanto usar, vai ficar prático, vai ficar comum essa escrita.
É, e lembrando que se você ou alguém que estiver com a gente aí ficou confuso, "puts, mas o que é que significa esse blank aí? " Podemos copiar essa seção todinha do a, colocar lá no Gemini e perguntar: nesse trecho do HTML, o que significa o target? Vamos ver isso.
O que significa o target? Vamos lá, eu vou colocar o texto aqui embaixo. Então, em HTML, o atributo target dentro de uma tag a define como uma nova página será aberta.
Era exatamente o que queríamos. Perfeito. Legal.
E tem outras propriedades aqui. O target _self abre o link na mesma aba, que é o padrão. O _parent abre o link no frame pai se o link estiver dentro de um frame.
Não é o que estamos vendo agora. Mas é curioso, é interessante, porque ele já explicou nós as outras opções que apareceram no VS Code. Sim.
Então, além de sabermos agora por que estamos usando o blank, temos uma ideia do que significam as outras opções que tem lá também. É legal que dá para aprofundar muito nesses códigos que estamos escrevendo e desenvolvendo. Maravilha.
Então, deixa eu dar uma olhadinha lá. Vamos testar se ele está abrindo de fato numa outra aba. Então, atualizando aqui a página.
Mais informações. Abriu uma nova página. E a nossa página lá das Olimpíadas está funcionando direitinho.
E tem mais algum outro ponto que vocês acham que dá para deixar esse visual ainda mais legal? Assim, como vimos agora, essa tag âncora, por exemplo, podemos adicioná-la em vários outros lugares no nosso código. Então, por exemplo, se você quiser deixar o próprio título "Rebeca Andrade", indo para alguma outra página, você pode colocar dentro do nosso H2, que é a tagzinha de título que estamos utilizando para as informações.
Por exemplo, Gui, quer mostrar como que faz isso? Quero. Como eu faço isso?
Eu coloco o "a" aqui ou eu coloco no H2? Dentro do H2. Dentro do H2, a tag a.
Isso. A tag a. Aí, esse conteúdo que é "Rebeca Andrade", ele vem para cá.
Eu acho que eu vou fazer até assim, Rafa. Eu vou pressionar o "Enter", que conseguimos visualizar melhor. Tem um H2, aí eu tenho um a.
Aí, dentro desse H2, eu tenho essa referência. E eu quero que esse texto vá para algum lugar. Sim.
E você vai poder escolher para onde você quer mandar esse texto. Quero visualizar o link de Instagram, uma rede social e assim por diante. Um vídeo.
Posso mandar para um vídeo do YouTube. Nesse caso, se você quiser, podemos deixar padrão, assim, meio que. .
. Omitir. É, omitir.
Podemos colocar só uma hashtag aí dentro, ele não vai levar para lugar nenhum. E se você quiser também, podemos colocar aquele atributo de target blank. Só para não correr o risco de clicar e ir para outra página.
Legal. Muito legal. Então, olha que curioso.
Se em algum momento do código eu quisesse colocar mais uma referência para abrir outra página, para deixar essa busca na minha base de conhecimento mais profunda, eu poderia também colocar mais tags lá. Pode fazer em parágrafo, pode fazer em vários lugares, para clicar e ir para algum lugar. Olha, eu estou muito feliz com esse resultado aqui.
Rebeca Andrade, eu clico e realmente ele vai aqui para uma página nova com hashtag, não faz diferença para mim. Eu acho que daria para melhorar esse visual. Sabe o que eu queria?
Eu queria, de fato, deixar esse visual mais bonito, sabe? Aparecendo de uma forma mais estruturada, que pudéssemos scrollar aqui os resultados e exibir na tela. Vamos fazer isso?
Vamos. Boa, vamos nessa. Alguém sugere algo?
Então, Gui, nós já recebemos o nosso CSS. Você aí de casa também tem já o arquivo do CSS todo pronto, todo estruturado. E aí, se você scrollar, ver todo o arquivo, tem várias e várias linhas.
E existem alguns seletores, algumas tags, alguns elementos ali, por exemplo, esse . resultados-pesquisa, que já foram adicionados. E agora precisamos colocar ele no nosso HTML.
Temos ele no CSS e precisa ter no HTML. Assim como tínhamos no HTML e precisávamos estilizar no CSS. Vamos adicionar aí no nosso HTML.
A primeira coisa que podemos fazer é adicionar algumas classes. No CSS, vimos lá que para estilizar os nossos elementos, precisamos colocar qual tag queremos estilizar, e aí, dentro das chaves, tudo o que estilizamos. Mas não necessariamente você tem que utilizar a tag.
Podemos também, e é uma ótima prática, utilizar classes. Essas classes também definimos lá no HTML, que vão referenciar algum elemento específico. Por que utilizamos classes?
Porque muitas vezes queremos estilizar um parágrafo específico, e se estilizamos utilizando o p, vamos estilizar todos os parágrafos da página. Então, é interessante colocar uma classe específica para cada parágrafo, se quisermos fazer essa diferenciação na estilização. Vamos utilizar essas classes aqui, porque o nosso CSS já está usando classes.
Interessante, olha só. Então, quer dizer que, por exemplo, temos uma seção. Se eu falar "CSS, estiliza a seção", ele vai pegar tudo que é seção e vai colocar?
Se eu tivesse 30 seções, ele colocaria nas 30. Exato. Dessa forma, por exemplo, se eu scrollar mais aqui, existe um ponto .
resultados-pesquisa. Significa que eu quero estilizar só essa seção específica. Aí, para que o CSS consiga encontrar só essa seção, usamos a classe.
Exatamente. Para ver no CSS a diferenciação de quando estamos usando um seletor de tag ou um seletor de classe, o seletor de tag apenas é o nome da tag, então é o "body", as classes têm um ponto. Então, você inicia com o ponto, aí vem o nome da classe.
Vamos colocar essa classe da seção que você tinha encontrado no nosso HTML, porque o nosso HTML não tem classes. Então, sempre que for só a tag normal H1, quando se trata de ponto, significa que eu tenho uma classe do CSS para um determinado campo, o específico grupo. A pergunta é: como eu crio uma classe?
Então, a classe, dentro do HTML, é um atributo. Dentro daquele abre e fecha maior e menor, colocamos "class". Tudo em inglês.
Aqui, eu preciso do mesmo nome, resultados-pesquisa. Mas, quando você está no HTML, você não coloca o ponto. O ponto é no CSS quando você está referenciando a uma classe.
No HTML, é só o nome. Ah, eu não preciso do . resultados-pesquisa, é só ele direto, resultados-pesquisa.
Isso. Vamos lá ver o que mudou. Ah, já juntou mais.
E eu imagino que devam existir mais atributos para conseguir deixar isso ainda mais bonito. Voltando no código, qual outra classe posso aplicar para deixar esse visual ainda mais incrível? Como mencionamos, o parágrafo é uma tag que estamos usando muito.
No CSS, também estamos usando classes para isso. A classe do primeiro parágrafo, que estamos usando para a descrição da Rebeca Andrade, é descricao-meta. Class="descricao-meta".
Beleza. Vamos lá visualizar como ficou. Visualmente, parece que ele está parecido.
"Parece que está parecido" ficou engraçado. Parece que ele está igual. Além também dessas classes, uma coisa que às vezes utilizamos para poder estilizar melhor o nosso código é criar novas tags no HTML apenas para estilização, como já havíamos feito com a section, por exemplo.
E, dentro dessa section que acabamos de criar nessa aula, também podemos adicionar uma nova tag que é a div. Também usamos bastante essa div, que seria de divisão. Aí, podemos colocar, dentro dessa section, uma div.
Então, vou escrever div, ela vai aparecer e dou um "Enter". A pergunta é, nesse caso, eu não tenho uma estrutura que faz tanto sentido, é mais por questão de organização mesmo? É mais por questão de organização, porque tem algumas propriedades no CSS que alteramos a estilização das tags-filho.
Então, vamos alterar h2, p, a, e elas precisam estar dentro de outra tag e é essa tag que estilizamos. É mais por causa disso que criamos uma div. Vou selecionar tudo até a tag a, vou dar um "Ctrl+X" para tirá-lo de lá e trazê-lo para cá com "Ctrl + V".
E essa div terá uma classe, vamos colocar a classe dela? É item-resultado. Opa, isso já deu uma ideia para mim agora.
Então, quer dizer que todo card que eu for criar de resultado, provavelmente vai reutilizar essa classe. - Exatamente. - Acho que estou aprendendo.
Voltando na aplicação. . .
Nossa, meu amigo! - Melhorou? - Está melhorando.
Olha aí. Está muito incrível. Eu estou com um super zoom, só para conseguir visualizar melhor, mas teoricamente vai aparecer certo na minha tela.
Tem um banner ali. Então, o link que podemos mandar para onde quisermos, um texto da descrição e o "Mais informações" que vai abrir uma página nova usando o target blank, aquele atributo que vai para outro site, outra aplicação. Algo que nem é comum hoje, uma aplicação que depende de outros e serviços e sistemas.
Isso é uma das coisas legais, que a estrutura que montamos juntos, que estamos montando Rafa, Gui, eu e você junto conosco, é basicamente seguindo boas práticas ou seguindo estruturas que vamos ver em exemplos de código de aplicações do mundo real, tanto na questão de estruturação, quanto o uso de parâmetros e tags. Não é nada que só será útil na imersão. É algo que vai servir para os próximos passos de todo mundo.
Muito bacana. Agora que temos uma sessão de resultados para exibir cada atleta dentro da nossa base de conhecimento, o que eu queria fazer é colocar mais atletas. Então, eu queria criar dois atletas do Brasil que vocês gostaram muito.
- Bia Souza do judô. - Incrível, sem palavras! - E a Rayssa Leal.
- Legal, vamos fazer isso daí. O ponto é, para eu criar um novo atleta mantendo toda essa estrutura, eu tenho que ir na linha 21, na div do item-resultado, até a linha 27, dar um "Ctrl+C", "Ctrl+V", aqui embaixo, dar um copy e paste, e começar a alterar isso manualmente. Sim, dá trabalho.
Está dando trabalho. Será que dá para automatizar isso? O que você acha de tentar fazer o seguinte, você pega o trecho de código que você já selecionou e fez "Ctrl+C", "Ctrl+V", colocamos na janela do Gemini e pede para ele criar para você uma estrutura de código com essas mesmas informações, mas de pessoas diferentes, da Rayssa e da Beatriz.
Gostei da ideia. Vou fazer assim, eu vou dar o contexto primeiro. "Tenho o seguinte código HTML".
Aí vou colocar, para ficar bem bonito, três crases e "html". Vou colocar aqui o código. Ele está jogando um monte de crases, não sei o que está acontecendo.
Vou falar assim: "agora, gostaria de criar mais 2 atletas". Mais duas atletas: a Rayssa Leal do skate. .
. E a Beatriz. .
. S ou Z, gente? Eu estou na dúvida.
- Souza com Z agora. - Boa pergunta. Eu só não sei se esse primeiro, para escrever o nome dela certo, - Beatriz Souza com Z.
- Com Z? Beleza. - Rayssa Leal está certo.
- Certo. Fechou. Agora eu gostaria de criar mais dois atletas.
- É a Beatriz Souza do judô. - É, verdade. Assim, só estou enfatizando os esportes, porque como o modelo tem muita informação, se tiver homônimos dessas pessoas, de outras categorias, escritores, ou qualquer coisa assim, especialmente quem estiver experimentando com outras áreas, seja esporte, veículo, celebridades, enfim, a área que quiser, volta para a ideia que conversamos na aula 1.
Quanto mais específico pudermos ser, melhor será o resultado que o Gemini nos dará. Acho que é uma lição de engenharia de prompt muito clara, que é o contexto. Por exemplo, o que ele falou é interessante.
Imagina que, colocamos a Rebeca Andrade, mas existe outra atleta, chamada Beatriz Souza, da ginástica. Provavelmente é essa que ela puxaria. Exato.
Eu uso como exemplo o meu próprio nome. Eu tenho um homônimo do sul do Brasil, que é um artista plástico, obviamente mais conhecido do que eu. - Que não é você?
- Que não sou eu. Se eu peço, sem muito contexto, para o Gemini uma informação sobre Luciano Martins, eu vou ter informações dessa pessoa. Porque de forma genérica, ele tem conhecimentos de vários Luciano Martins, e o que ele tem mais recorrência é das pessoas mais famosas.
Quanto mais conseguimos direcionar, melhor. Então, lição muito importante! O contexto vai fazer a diferença para as respostas que vamos consumir e ter com a inteligência artificial.
Vou dar um "Enter" e vamos ver o que ele vai gerar. Ele está nos explicando o código, do que se trata cada uma dessas partes que criamos. E ele criou da Rebeca Andrade, que já tínhamos.
Respeitou toda aquela estrutura. Trouxe o item-resultado da Rayssa Leal. Indentação bem bonita.
Rayssa Leal, a Fadinha, é uma skatista brasileira que conquistou o mundo com seu talento e carisma. Beatriz Souza, judoca brasileira que se destacou nos Jogos Olímpicos, trazendo orgulho para o Brasil. Que da hora!
Eu gostei muito. Isso está legal. - Posso copiar os dois?
Estou liberado? - Vamos nessa. Vou fazer o seguinte, vou copiar da div da Rayssa Leal e da Beatriz Souza com "Ctrl+C" e vou levar para o meu projeto.
No meu projeto, na linha 27, vou dar um "Enter" e colocar esses dois. Agora temos mais resultados para serem exibidos na tela. Assim que voltamos para o nosso projeto, temos um scroll dos projetos que queremos exibir.
Isso ficou muito legal. Deixa eu tirar o zoom para ficar em 100%. - Rebeca, Rayssa… - Perfeito.
O ponto agora é, eu gostei. Ficou legal os resultados que estamos mostrando, mas temos dois problemas. O primeiro, eu nem pesquisei nada e ele está listando a Rebeca, a Rayssa, a Bia na tela.
Isso é um problema. E o segundo problema é, todo atleta que eu quero criar ou exibir, eu vou sempre precisar criar toda essa estrutura. Isso eu tenho que fazer.
Não tem como fugir. Eu tenho que criar essa estrutura toda, div, class, h2, parágrafo. É isso mesmo?
Faz sentido? Não, na verdade, o JavaScript vem para resolver justamente isso. Ele traz toda essa facilidade, essa dinamicidade, para não se ter o trabalho de reescrever todos esses códigos HTML.
Vamos precisar pegar a informação de algum lugar. Então, o nome da atleta, a descrição e tudo mais. Mas essa estrutura, h2, p e tal, não precisamos necessariamente copiar e colar, se usamos JavaScript.
Vamos finalmente começar a aprender essa linguagem. E daí vem a ideia de uma página estática, em que todo o conteúdo já está direto no HTML. E o JavaScript vem literalmente para falar assim, quando você clicar no botão pesquisar, eu quero que a página mude, que exiba alguma informação ou não.
- Essa é a ideia? - Sim. Minha pergunta é, eu entendi, mas posso fazer uma pesquisa no Gemini antes do JavaScript para entender melhor?
Uma coisa que sempre ouço de outras linguagens de programação, o Hello World. Como cria um Hello World? Faz aí um Hello World da programação.
E muita gente não sabe, eu vou sair do meu papel de aluno, por favor, libera só esse aí, que essa é uma tradição muito antiga da programação, final de 1972, começo da década de 70, um livro de C, para ensinar programação em C, da Bell Labs, ele criou um código para fazer um Hello World. Meio que virou um mantra para todo mundo que trabalha com programação. O primeiro código que você cria para qualquer linguagem de programação é o Hello World.
- Olha só, o WikiGui. - É quase isso. Vou perguntar para o Gemini, como crio um Hello World usando JavaScript?
- Pode ser? - Vamos nessa. "Estou estudando programação e gostaria de criar um Hello World.
" Hello World, que, do inglês, significa "Olá, Mundo". "Um Hello World usando JavaScript. Pode me ajudar?
" Dei um "Enter" e vamos ver o que ele vai falar. Criando seu primeiro "Olá Mundo" em JavaScript. Sabe a sensação que eu tenho, às vezes, é que o Gemini me dá, de verdade, quase um capítulo de um livro escrito.
Ele fala o que é Olá Mundo. "Um programa básico que exibe uma mensagem 'Olá, Mundo' na tela. Serve como teste para verificar linguagem e ambiente de desenvolvimento.
" Isso é muito legal. Isso é interessante porque, reforçamos que você dar contexto para o Gemini, para ele lhe dar uma resposta melhor, é muito importante. Então, o que acabamos construindo para ter essa experiência de quem está utilizando o Gemini também, é dele devolver as coisas com contexto.
Por exemplo, seria uma experiência talvez mais seca ou direta demais se ele simplesmente devolvesse o código JavaScript para você de Hello World. Então, o que ele tenta construir nessa ideia de aprendizado, de entender o que você está fazendo, é explicar o contexto do que você pede, trazer o código para você e tentar explicar como o código funciona. Olha, que interessante.
Isso já assusta um pouco, pelo amor de Deus. "Existem várias formas de exibir essa mensagem em JavaScript. Vamos ver as mais comuns.
" Eu prefiro ficar com a mais comum, que deve ser mais fácil. Então, ele falou "usando o console". De alguma forma, vamos precisar criar um arquivo JavaScript e escrever esse código, console.
log, entre parênteses e entre aspas, "Olá, Mundo! " - Vamos fazer isso? - Vamos.
Primeiro passo, eu preciso criar um arquivo JavaScript. Então, ele vai estar em algum lugar aqui. Será um arquivo novo, então, vou criar um "New file".
Eu tenho uma pergunta: qual é o nome desse arquivo? Podemos começar com app. js.
Será referente à aplicação, o código da aplicação. Aí, uma segunda pergunta. Para usar o CSS, precisamos falar "CSS, você vai fazer parte desse HTML" e usamos na linha 7.
No JavaScript, imagino que deva ter algo parecido. De alguma forma, temos que falar que o documento HTML tem um JavaScript. É da mesma forma?
É só ir na linha 7 e colocar link? Na verdade, quando fazemos o link do JavaScript, não usamos o link, usamos usa uma tag que é script. E não vamos colocar no head aí em cima, colocamos lá embaixo, dentro do HTML, dentro do body, porém, no final, abaixo do footer.
Não é aqui. Não vou colocar algo aqui. Não é isso que eu estou fazendo.
Eu não consigo apagar o que digitei, mas deu para entender. Então, essa tag de linkar o JavaScript será a última coisa antes de fechar o body. Me gerou perguntas que, provavelmente, o Gemini vai me ajudar depois.
- O porquê. - Exatamente, por quê? Aí, digito script e aparecem três possibilidades.
O script, o módulo e o src. Qual que eu uso? Na verdade, o primeiro script vai colocar apenas a estrutura script, de abertura e fechamento, mas como vamos utilizar o JavaScript, já teremos que adicionar, de qualquer forma, o atributo src.
Então, podemos clicar na última opção: "script:src". Ele vai adicionar o atributo. Aqui no src, eu imagino que deve ser similar ao href.
Vamos passar onde está esse arquivo. Vou colocar aqui esse arquivo, ele se chama app. js.
Agora o negócio vai ficar engraçado, gente. No app. js, preciso escrever o comando em JavaScript, que exibe alguma coisa na tela.
E pelo que eu lembro, era console. log(). - Precisa seguir essa estrutura.
- Isso. Entre aspas também. Entre aspas.
Vou colocar o "Olá, mundo" em português. Precisa do ponto e vírgula? Você pode colocar o ponto e vírgula para poder funcionar bem.
Tá bom. Maravilha. Vai funcionar?
-Vai funcionar. -Vamos testar. Estou esperando uma coisa bem estranha na tela, aparecendo na frente, o console.
log olá mundo. E deixa eu tirar o zoom aqui. Não estou vendo, gente.
Na verdade, o que acontece? Quando usamos console ponto alguma coisa a gente, na verdade, está interagindo com o console, e não com a tela, com o HTML, com o CSS, nada disso. Para conseguir ter acesso ao console e ver se realmente funcionou o que a gente escreveu, precisamos abrir o console.
Podemos clicar com o botão direito na página e ir lá embaixo, na opção "inspecionar". Assim ele vai abrir várias informações. Nossa, está meio hacker isso aqui.
Lá embaixo, uma das opções é o console. É uma das últimas coisas que vai ter. O meu está aqui, olha.
Acho que eu estou com muito zoom aí ele fragmentou aqui. Apareceu a mensagem do "Olá, mundo"! Exato.
Temos aqui a mensagem. Então funcionou. E já fez a referência de qual arquivo e qual linha desse arquivo que esse resultado veio.
Ou seja, ele ajuda a ligar os pontos e entender como está tudo funcionando. Só pra ver se eu consegui entender essa ideia. .
. Vamos usar esse local bastante para desenvolvimento, para teste, para visualizar se uma coisa está funcionando. Se os dados estão vindo corretos, algo assim.
Mas não necessariamente ele interfere na página. O console. log não interfere na página.
Existem comandos do JavaScript que vão interferir na página, mas o console. log é para testar e verificar. Muito legal.
Mas eu fiquei com uma dúvida e preciso perguntar para o Gemini. Minha dúvida é a seguinte, não sei se é a mesma que você tem aí em casa. A gente criou o script, colocou o script dentro do body com o src e o nome do arquivo.
Rafa falou que faz mais sentido colocar aqui do que colocar na tag head. Vamos entender por que a gente faz isso? Então, minha pergunta para o Gemini será a seguinte.
Posso abreviar o "porque"? Manda ver. Nossa, o Gemini é muito brabo mesmo.
Vamos escrever a pergunta. Porque devo colocar a tag script:src antes do fechamento do body em um arquivo html? Uma pergunta específica, vamos ver o que ele vai falar.
A posição da tag script no html, especificamente antes de fechar o body é uma prática recomendada por diversos motivos. A Rafa falou, está falado. Conteúdo carregado mais rápido.
Quando a gente coloca o script no final antes de fechar o body, ele renderiza o conteúdo visível da página antes de executar o script. Deixa eu ver se eu entendi. Quando a gente coloca no final, a nossa página será renderizada e depois ele vai executar os códigos que estão lá no script que a gente criou.
Exatamente. É que aqui nesse momento não temos um JavaScript enorme, nosso código não é muito robusto, mas imagina se a gente tivesse. Primeiro ele ia ler todo o JavaScript, ia testar as lógicas e tudo mais, e depois ele mostraria o nosso HTML com o CSS.
Então é por isso que a gente sempre coloca no final. O Gemini até listou alguns motivos. Melhora a percepção do usuário, então a tela dá a sensação de carregar mais rápido, melhora a experiência do usuário na página.
Podemos criar um script que vai bloquear, por algum motivo, a gente escreveu errado e bloqueou a renderização da página. Não queremos isso. Garante que os elementos sejam carregados.
. . Legal.
Deu para entender. Uma curiosidade, para a galera que está com a gente, O nosso código é interpretado pelo nosso navegador, ou seja, o Chrome, o Safari, o Firefox, o navegador que você estiver utilizando. Esse código é interpretado pelo navegador e alguma informação é construída na tela.
O código HTML é algo que chamamos de "estático", ou seja, ele vai simplesmente ser transformado em algum tipo de informação, um texto com formatação, carregar uma imagem, carregar algum link, algo assim. O código JavaScript, a parte do console. log, será executada pelo navegador.
Então, se for uma navegação muito demorada, pode dar a sensação para quem estiver abrindo a sua página, que a página está abrindo devagar. Vai ficar a ampulheta rodando lá, enquanto o código está sendo executado, para depois mostrar alguma coisa na tela. E basicamente, a boa prática que Rafaela trouxe, é que vamos primeiro jogar toda a informação visual na tela, texto, imagem, formatação, e só depois, por trás das cortinas, sem a gente perceber como usuário, ou quando estiver acessando o seu site, a gente não vai sentir esse tempo de processamento de JavaScript.
Muito legal. Eu gostei muito, Rafa. As pessoas têm, geralmente, um medo do JavaScript, principalmente pela forma como ele é escrito.
Então, console. log("hello world"), e assim por diante, e abre parênteses. .
. Se eu tiro alguma dessas informações, tirei o ponto, por exemplo. Agora está tudo junto.
E peço para visualizar lá no projeto. Vamos ver o que vai acontecer. Temos um problema.
A página carregou certo, está funcionando tudo. Do lado do JavaScript deu um erro aqui. Não tenha medo de erros, pessoal.
Na época da minha faculdade, da graduação, eu tinha medo de erro. Eu tinha medo de escrever um código e o código não funcionar. Verdade, eu morria de medo.
A mão suava antes de executar. E, na verdade, não. Quando temos uma mensagem de erro, ela está nos ajudando!
Podemos usar essas mensagens de erro, por exemplo, para aperfeiçoar o nosso programa, usar o Gemini para nos ajudar a resolver o que está acontecendo. E ele diz aqui que é um erro de referência. Sabe o que você podia fazer que seria interessante?
Dar uma misturada em contexto para o Gemini agora. Você pode mandar para o Gemini o seu código, do jeito que ele está, tirar um screenshot desse erro e dizer: eu tenho esse código, e quando eu executei, eu tive esse erro. O que aconteceu?
Legal, vamos fazer isso. Tenho o seguinte código JavaScript. Ao executar tenho a seguinte mensagem de erro.
Chutei que era de erro por causa da cor, ficou vermelha, a gente sabe que deu ruim. Vermelho com um "X". Aí você pode tirar o print ou copiar, como preferir.
Vou tirar um print para ficar mais emocionante. Tirei o print, volto lá no Gemini, "Ctrl+V" pra colar o print. Agora vou passar a minha ação.
A gente deu o contexto. O que estou fazendo de errado? Dei o "Enter".
Analisando o erro. Console. log is not defined.
O console. log não foi definido, em inglês. O problema com o seu código é um simples erro de digitação.
Então, console. log precisa do ". log".
Essa é a forma correta de escrever a função para imprimir mensagens no console do navegador. Do jeito que escrevi, o JavaScript não sabe o que é isso. Ele entendeu como se fosse uma única função, tudo junto.
Ele dá a sugestão aqui para conseguir corrigir esse erro, que é usar o "console. log". Pessoal, por que precisa ser console.
log? Por que não pode ser outra coisa? Gente, é assim que a linguagem foi feita.
As pessoas não gostam muito dessa comparação, mas é como o idioma português. Existem algumas regras gramaticais que às vezes a gente não segue, às vezes eu não sigo mesmo, esqueço. Mas existem algumas regras que precisamos seguir porque é assim que a língua foi feita.
No JavaScript é a mesma coisa. Precisamos escrever, sempre que queremos exibir uma mensagem, naquele espaço de desenvolvimento, de teste, é o console. log.
Ele explica o erro também. Em JavaScript não existe essa função, dá um resumo para a gente também. Então, precisa ser console.
log. Um último exemplo, um último caso. vou tirar essas aspas.
O próprio VS Code já avisa que tem alguma coisa errada. Vamos lá ver. Ao executar o programa e abrir, ele fala que você esqueceu de fechar depois do argumento.
Ele já misturou tudo. Ou seja, sempre que se trata de palavras, textos no JavaScript, precisamos passar eles com aspas. Existem linguagens que aceitam aspas duplas, aspas simples.
No JavaScript vamos manter sempre aspas duplas. E para finalizar bem, vou fazer o seguinte. vou trocar o "Olá, mundo" que já fizemos.
Cumprimos a meta do mantra da linguagem de programação, que é escrever o "Olá, mundo". Vou alterar esse "Olá, mundo" por "Rebeca Andrade". Voltando lá na nossa aplicação, temos no console o nome Rebeca Andrade aparecendo.
Perfeito. Essa é a ideia. Vamos fazer uma retrospectiva do que vimos nessa aula, Luciano?
Vimos bastante coisa, bastante conceito novo. Começamos entendendo como criar links dentro do HTML, usando a tag <a>. Aprendemos a usar o div.
Tivemos a introdução ao JavaScript, o que é, como a gente coloca. Aprendemos a razão pela qual o script fica no final do body. Respira fundo.
Está tudo bem! É bastante coisa. Pode ser um monte de conceito novo para você.
Você tem acesso a todo o código que estamos construindo. Você pode usar o Gemini para explicar melhor algum trecho de código, algum conceito específico que a gente falou aqui. Cola no Discord com a gente.
Rafa, Gui e eu, a galera da Alura, estaremos lá disponíveis pra trocar ideia, para vocês compartilharem o que estão construindo. Certo, Gui? Certo, Rafa?
É isso aí. E lembrando que: teremos um momento para selecionar os melhores projetos da imersão. Spoiler.
Vou passar detalhes sobre isso nas próximas aulas. Não são exatamente os projetos como esse. Queremos explorar a criatividade de vocês e, de alguma forma, presentear os melhores projetos.
Que não são iguais a esse que estamos mostrando. Mas isso é uma conversa que vamos deixar mais para frente. Fiquem muito ligados.
Estudem. É uma oportunidade muito incrível para o pessoal estudar e aprender mais sobre tecnologia, desenvolvimento e inteligência artificial. Sabe o que eu gostei da aula de hoje?
As dicas de engenharia de prompt. É isso aí. O "Ctrl+C" do código mais a imagem do erro.
Às vezes temos um erro grande e fala: Gemini, por favor, me ajuda, não estou entendendo o que está acontecendo aqui. Isso foi muito legal. A parte do contexto também.
É isso que eu espero que a galera esteja curtindo. A experiência que estamos construindo junto, nós todos aqui, estamos aprendendo HTML, estamos aprendendo a estilizar nosso HTML com CSS, vamos começar a aprender JavaScript, vamos construir um projeto juntos, vocês terão a chance de construir o projeto de vocês com o conteúdo que vocês preferirem e ainda tem a cereja do bolo do spoiler que você deu de poder ganhar uns prêmios legais como parte do processo. É muito bom.
Lembrando: Link do Gemini. Precisa acessar o link que está aqui embaixo. Não vai ter certificado se não acessar com o link que está aqui embaixo.
Então, acessa com esse link, fica ligado nas próximas aulas, revisa a aula de hoje, conversa com as pessoas no Discord caso tenha alguma dúvida, escreva prompts no Gemini, aprenda a interagir com a inteligência artificial, que isso será incrível para a sua carreira. Eu tenho certeza disso. Muito obrigada por assistir até aqui.
Vejo você amanhã na próxima aula!
