Resumo do Curso: Criando um Website de Notícias

Neste curso eu vou te ensinar como fazer um website de notícias. Vamos começar bem simples. Temos aqui na tela o título do website Gazeta do Mundutech, seguido de vários artigos ou notícias. Bem simples, cada um desse retângulo representa uma notícia e o texto é o link, o título da notícia. Vê link para outra página, essa outra página mostra o título e a notícia completa. Para a arquitetura desse aplicativo, desse sistema, vou usar o seguinte, olhando aqui no canto inferior da tela. O navegador vai fazer um pedido, uma requesição. Há um aplicativo de Next.js. Next.js é um framework que nos permite criar um aplicativo de React, mas no canto do servidor, em uma da essa aplicativa já renderizado para o cliente. Por que Next.js? Um dos benefícios é de optimização de busca. S é o search engine optimization. Por Next.js, em vez de enviar o buscador, vai ter acesso na hora ao código inteiro renderizado do aplicativo e com isso ele vai obter as informações para poder indexar no buscador. O problema que tinha antes, com aplicativos SPA, single-page application, de página única, era que quando o buscador fazia o requesição, ele recebia o código HTML, mas não tinha nenhuma informação no código, porque tudo era conteúdo, era criado dinamicamente pelo JavaScript. Mas com o Next.js, essa renderização é feita no lado do servidor, em vez do lado do cliente. Por causa disso, o buscador receberá tudo já renderizado com conteúdo da página, então ele vai ter as informações para indexar e quando alguém procurar por aquelas palavras que aparecem na notícia, eles vão conseguir achar. Agora, esse é o front-end. Para o back-end nós vamos usar Node.js, o Dotec Express, que é outro tipo de framework web, bem simples para poder lidar com requisições no lado do servidor. Eu vou fazer uma API, que serve formato JSON. O banco de dados será Postgres, é um eslabor de SQL. Muito bem, esse vai ser o website de notícias, entendemos que front-end será escrito em JavaScript, eu não vou escrever em TypeScript, vou escrever só no JavaScript mesmo. Vai ser com framework Next.js. No caso do interface de usuário, eu escolhi Semantic, UI, React, só para ter alguma coisa mesmo para a gente não ter que escrever o nosso próprio CSS para não ter pede tempo. Se quiser mudar para qualquer outro, sinta-se a vontade, como bootstrap, materialize, foundation, que for. O back-end vai ser Node.js, como Express, como framework, banco de dados, database de Postgres. Vamos pensar nos requerimentos se você estiver começando na sua máquina. Você precisará do Node.js, que nada mais, nada menos que o JavaScript no servidor. E o NPM, que é o Node Package Manager para Poderes Genes e As Dependencies, dos nossos aplicativos de JavaScript. Então a gente vai precisar instalar o Node e o NPM. É claro, o NPM vai vir com Node já. Também precisaremos instalar o Postgres, que é o banco de dados. Para instalar o Node.js, recomendo o NPM. O NPM permite ter várias versões no Node instaladas, se você pode mudar as versões com o comando NPM. Tentei que instalar uma versão nova por cima. Tá bom? Eu peguei no navegador, abriu a nova aba aqui, e você quer instalar o NPM. É só ir no repository de GitHub. GitHub.com. Barra NPM, traço SH, barra NPM. Vai aqui embaixo, rola na parte de installing e updating. Escolhe o curl ou Wget, Wget que tem no Ubuntu padrão, o curl tem que instalar. Eu estou usando o Ubuntu, certo Linux, versão 20.04. Eu seguiria esses passos aqui, copiar esse. Vai no terminal, e vou ir para o meu diretor aqui. Um momento. No terminal, eu iria copiar e colar esse comando do Wget, para poder baixar esse arquivo, instalar, e você roda no bash ou qualquer shell que você use. No meu caso, eu vou usar o bash, como o meu shell. Depois de rolar esse comando, ele vai instalar tudo no NPM, e ele vai colocar um certo código no seu arquivo rc. O meu arquivo rc, como eu uso o Ubuntu e o bash, vai ser o ponto bash rc dentro da minha pasta pessoal. Se eu abrir o ponto bash rc, atil, barra ponto bash rc, vou abrir no meu editor de texto, que é o visual studio code. Você pode usar qualquer editor de texto que você quiser. Vou ir para a linha 122 a 124. Deixa o habilitar quebro de texto para você ver melhor. Vou lá direito da tela, e no meu editor de texto. Essas três linhas serão adicionadas pela instalação, o script de instalação do NPM. E toda vez que você abrir o seu terminal, essas linhas serão executadas e o comando NPM estará disponível. Na primeira vez que você baixar aquele arquivo e instalar, não vai aparecer o NPM como comando encontrado, porque o arquivo rc não foi executado. Se você quiser que ele execute novamente, sem ter que abrir o novo janela, uma opção é você abrir o novo janelo do terminal, ele vai rodar aquele script bash rc, e aí não vai ter problema encontrar o comando NPM. Mas para aqueles que não querem, não querem fechar a sua tela do terminal, tem que chamar o bash rc de novo. Você faz isso com sorts e espaço, caminho para o bash rc, ou qualquer rc que você use. No meu caso eu uso o bash, então vai ser tio barra ponto bash rc. Se você usar outro tipo de shell como o z shell, seria o tio barra ponto z se hrc. Se você usar o Mac antigamente com o bash, seria o tio barra ponto bash underline profile. E assim por diante. Então já tenho isso, já rodei. E aqui eu tenho NPM comando, quando eu digito NPM aparece as várias maneiras de executar o comando. Então NPM você pode instalar a versão que você quiser, por exemplo aqui NPM install, o número da versão, e depois disso você pode utilizar com NPM use, o número da versão. Se quiser instalar a versão de suporte de longo prazo, que é no inglês long term support LTS, você pode dizer NPM, passo install, passo trastrast LTS. Como eu não tinha a versão 14, que era de suporte de longo prazo anterior, agora já tem a nova que é 16, ele acabou de baixar a 16 agora. Se eu disser node, pra subir, tá na versão 16, e o NPM já instalado com node, então tá aí versão 8.5.0. Se você quiser mudar a versão, NPM use, por exemplo, 14 é alguma coisa, ele muda pra versão 14. Então vamos mudar de volta o NPM use, 16 pra usar a versão 16. Esse comportamento do NPM aqui pode ter diferença se você usar Windows, no caso do Windows, o NPM por Windows é outra coisa, embora que o nome seja parecido. Então talvez no NPM pro Windows, você tenha que usar, além de instalar ele, você tem que explicitamente dizer que quer usar a versão que foi baixada. Tem que ver aí, se você digitar node, traço ver e ainda aparecer a versão anterior, que não é a que você desejou, você tem que usar trocar a versão com o comando do NPM for Windows. Acho que é o mesmo, talvez seja NPM use, não me lembro. Tá bom, então temos o node, U, NPM. Então vamos criar aqui os aplicativos. Então primeiro, eu gostaria de criar o front end, tá bom? Com o next.js. Então vou aqui, MK, DIR pra criar um novo diretório, eu vou chamar isso de Gazeta, Traço Mundo, Traço Pack, Client, tá? Client Web, tal. Vou cd pra um novo diretório, cd Gazeta Mundo Tech Client Web, vou dar NPM init, pra poder criar um arquivo package.json, package name vai ser a mesma coisa, versão, se você quiser mudar, sei lá, 0.1, porque acaba de começar. Descrição, você pode dar qualquer descrição, Client Web para o aplicativo, para um aplicativo de notícias. Entre points, pode pôr index mesmo, não é relevante agora ainda. Comando de teste, já de área a gente vai ver. Depois, agora não tem teste. Positor de get se tiver, põe aí, não põe nada, keywords, palavra charles, não põe nada, autor, nbkmundotech, você pode pôr o seu nome, e você escolhe a licença que quiser, colocar MIT. Ele diz ok, é assim. Ok, vai abrir essa pasta no meu editor de texto, tem que o arquivo que foi gerado, package.json, com aqueles dados que eu escrevi na linha de comando. Vamos lá, installar as dependências. Usar npm, espaço install, espaço, então a gente vai precisar do react, react traço dom, you next. A levar um tempo para baixar as dependências, pronto, agora temos a pasta node underscore modules, e tem o next aqui, react, react dom e as outras dependências. Agora para iniciar o next, você tem que digitar next, espaço dev, para desenvolvimento. Como eu estou usando o next dev, que está aqui na pasta específica, na pasta específica, no module desse projeto, eu posso usar npx, e ele vai iniciar o servidor, é claro que não tem nada agora, não tem nenhum arquivo, por isso que deu o erro. Então o erro que ele falou, não pode encontrar o diretório pages, por favor, crie um na pasta raiz do projeto, então vamos criar, vou criar uma pasta, chama lgpages, isso é uma convenção, o padrão do next.js. O next.js tem várias regras que você tem que seguir, do framework, para que ele funcione, automaticamente. Ele pônece várias coisas, mas você tem que seguir o padrão do next.js, um dos padrões é que tem que ter que ter uma pasta chamada pages, que corresponde às páginas do aplicativo. E isso, tudo que está na dpages, por padrão, o caminho refletirá, o caminho dos arquivos será refletido na URL, o caminho da URL. Então se você quiser criar a pasta raiz, que é a barra, do seu aplicativo, do seu website, você tem que criar a página principal index, então vou criar um novo arquivo dentro da diretório pages chamando index .js Dentro dessa página vou criar um componente, eu vou falar punktion, para criar um componente funcional, vou chamar de index mesmo. Abre as chaves, deixa eu mudar o meu espaço para 2, o ano do espaço 2. E disso você vai retornar um template com Jsx. Return parêntesis vamos fazer uma div mesmo, test. Então temos esse componente funcional que retorna, algum Jsx, que é a representação do ssh.tml, mais dentro do JavaScript, que nada mais nada menos é aqui uma chamada para a função react create element. Então com isso eu tenho que export default esse componente para que seja disponibilizado e fique que funcione. Quando eu roda a npx nextdev agora ele compilou ele mostra aqui por padrão ele roda no localhost 2.porta3000 então vamos copiar isso eu vou colar no meu navegador uma nova aba vemos aqui que temos teste como a gente tinha escrito na página principal, que é a raiz a primeira página que você vê que é a barra né então o index da pages corresponde a pasta raiz se eu tivesse criado uma nova pasta por exemplo teste e dentro de teste colocasse outro index com outro Jsx criado um outro componente export default function test index return sei lá botar um h1 aqui test index esses espaços não gosto meus padrões são dois espaços para indentação não é 4 se eu colocar esse e exposto para barra teste pareceria teste index porque a estrutura dos arquivos que está dentro de pages é refletido no caminho da url então se o caminho for barra teste que está dentro do pages corresponde ao index do barra teste do localhost 3000 sempre assim no next.js claro que ele não digita explicitamente barra index é só no barra mesmo está certo se fosse algo diferente para a anna e a gente fizesse barra anna queria bater lá um arquivo anna.js certo? mudeu o nome para anna.js nesse caso como não é chamado de index tem que digitar anna teste barra anna no caminho da url corresponde ao teste barra anna dentro da pasta pages tá? não importa o nome do componente não precisa corresponder com o nome do arquivo entende o roteamento mais básico do next.js muito bem então vamos fazer agora vamos dar uma olhada no design vai ter duas páginas a primeira será um índice das notícias e a segunda será a página da notícia em si para te mostrar aqui vamos criar aqui dentro do page uma pasta que quero agregar as componentes relacionadas vamos chamar de barra notícias e dentro de barra notícias será o índice vou mover vou deixar o teste aqui index vou criar um novo arquivo index.js no notícias function, notícias, index o nome pode ser qualquer nome que você quiser mas eu consegui nesse padrão da mesma pasta barra o nome é o arquivo export without queria editar os espaços de inetação para dois do meu editor de texto a cabeça configurações do projeto configurações usuário workspace o número de espaço para assinar tab botar dois pronto return de volta ao arquivo notícias barra index.js vou dar o return para buscar um div e vou colocar os guantes para começar eu vou copiar o teste loren y se você quiser gerar esse texto pode ir online e procurar loren y gerador e você pode facilmente gerar esse texto loren y por exemplo esse site aqui você clica em gerar loren y ele cria todo esse texto você pode copiar vou copiar aqui do design vou colocar a mesma coisa e ver se eu também mudar minhas preferências eu gosto que quebra a linha quebra eu vou habilitar o wordbap que eu gosto para não ter que rolar exatamente vou duplicar essa linha aqui três vezes vou colocar um andão aqui e o gazeta do mundo tech e volta ao navegador se eu ir lá para a barra notícias ele bate aqui no gazeta do mundo tech que eu tinha criado h1 e os videos é está certo e a outra página seria deixa eu te mostrar aqui de volta ao design quando eu clico em um dos artigos ou notícias eu quero mudar sei lá notícias por artigo ou deixar notícias mesmo um dos problemas em programação sempre pensar em qual nome usar para as coisas que você acha usar notícia ou artigo ou post vou deixar notícia mesmo artigo seria mais geral que você acha eu vou usar artigo então vou mudar para artigo está eu mudei o caminho ou o diretório em vez de notícia vai ser barra artigo vou colocar artigo e vou clicar em vez de notícia outra página quando você clica no artigo vamos referir isso de artigo clica no artigo e vai para a página do artigo específico deixa eu te mostrar as URLs deixa eu escrever no programa de design que é chamado pencil quero escrever o URL para você ver então esse seria o barra artigo e esse outro, o que seria? bem barra artigo normalmente normalmente você poderia usar o id do artigo se fosse id 1, 2, 3 isso é um identificador do artigo no banco de dados mas isso não é muito bom para SEO SEO que é a search engine no optimização para buscadores que é melhor para o pessoal achar seu site é escrever palavras-chave na URL então nós poderíamos converter o título do original título a SEO isso é um das coisas que poderíamos fazer certo por exemplo esse lore é preciso de que seria parte da URL é claro que nós poderíamos separar o que se chama de slug esse negócio aqui em inglês se chama slug SEO SEO LUG claro que os foros de título muito longo, não sei lá, vai ficar muito longo então eu poderia separar o título em si, os dados do título do slug seria duas coisas separadas, então vou fazer isso mais refletiria basicamente o título mas em vez de espaço temos traços em vez de pontuação tem só o traço em vez de vírgula, espaço só tem o traço se pude antes eu não vou fazer tudo que é muito longo então separaria o slug assim barra artigos, barra o slug claro que se o slug fosse o mesmo entre dois artigos não seria legal, haveria um completo então vamos supor que o slug sempre é único não existe mais de um slug com os mesmos caracteres tá bom? então como eu faço para criar essa página no next.js esses slugs sempre vai variar vai ser um diferente para cada artigo então como fazer isso? bem, no next.js você pode criar esses parâmetros dinâmicos da rota da seguinte maneira dentro do barra artigos vou criar um novo arquivo e esse arquivo vai ser o nome vai ser cobrido de desses coxetes dentro do coxete eu vou colocar o nome da variável que corresponde aquele parâmetro nesse caso seria o slug do artigo sei lá pode dizer artigo, slug qualquer nome, não sei, é difícil estou colocando o nome português misturando com inglês fica meio estranho você escolheu o nome que quiser está a ponto.js então nesse caso aqui você pode você poderia digitar o que quiser depois de barra artigos e ele iria bater nessa página e o conteúdo daquilo que foi escrito pelo usuário que está na URL ele aparece como o valor de uma variável que se chama artigo slug vamos dar export function esqueci de exportar default function artigo, sei lá como vai lá qualquer nome que você quiser sei lá, o que vai lá show eu vou mostrar no inglês vou mostrar nesse caso a página do artigo seria de acordo com o h1 aqui o título ok o nome do site o título do artigo e do conteúdo do artigo fazer a mesma coisa de antes h1 ter que cobrir a div porque não dá para retornar mais de um importante poderia usar o partias que quiser sei lá, usando o que quiser criar a div react.fragment desculpa usar o fragment react.fragment deixa assim mesmo caseta do mundo tech dentro de h1 seguido do título do artigo da esticopeada index vai ser a mesma coisa claro que esse artigo o título iria variar de acordo com o slug que iria depender mas por enquanto eu vou colocar uma coisa estática só para ter alguma coisa vou copiar esse text aqui esse caso seria parágrafos deixa eu colocar p tem para cada parágrafo que eu copiei do texto cobrindo um tag p só para dar mais um semante que é a estrutura de html significa o parágrafo vamos verificar no navegador barra artigo não é mais notícias barra qualquer coisa tá? o template está aqui funcionou corretamente a idote que eu posso digitar qualquer coisa depois de artigos barra que ele vai funcionar a mesma coisa obviamente o que vai acontecer indo para frente nós pegaríamos da URL a descrição do caminho o nome do slug e com esse nome do slug o express que é o nosso back end lembra? ele vai olhar no banco de dados existe um artigo com esse slug se existir ele manda informação de volta nesse caso mandaria para o next.js e o next.js a gente pode acessar as informações e substituir em cada sessão com essas informações correspondentes ao artigo que você quer ler então o título e o conteúdo desse artigo seriam valores de uma variável que cujos dados viriam do servidor tá? deixa eu te mostrar como acessar esse slug da URL do caminho da rota usando pelo next.js tá? a gente vai usar o roteador do next.js existe um efeito no effect hook que você pode usar e que existe o if router deixa eu te mostrar a documentação para você aprender a referenciar vai no site do next.js.org clica em docs se você quiser procurar algo esqueceu de algo clica no search e você digita uma palavra chave nesse caso seria router que significa roteador ou param que é parâmetros vou colocar router aqui e se você olhar na segunda o segundo resultado next.router ele mostra aqui o use router que é um hook que você pode usar é se você quiser acessar o objeto router dentro de qualquer componente funcionao pode usar o hook use router tá? então com o use router desse seguinte uso aqui, você chama use router coloca na variável router e você pode acessar o objeto router router.com qualquer coisa agora, se eu clicar aqui no link do router ele mostra as propriedades desse objeto então tem várias path, name, query e assim por diante então vamos tentar isso e ver o que está dentro desse objeto mas antes disso eu quero te dizer se você usar um componente de classe também é possível o componente de classe não dá pra usar o hook então você tem que usar o with router tá? se você estiver usando um componente de classe vai ser o with router importa o with router e você chama o with router com o seu componente aqui na hora de exportá-lo tá? e isso você pode acessar as propriedades tá? aqui ó componente de classe classe meu componente export default with router meu componente e com você acessa com vs prontu router tá? tá? então vamos lá no código aqui no arquivo artigos barra artigos slug.js cobre de coshete eu vou importar o use router from next, eu acho que é next barra router né? vamos confirmar aqui use router from next barra router e tem as chaves né? não importa antes e depois eu use router então com isso aqui eu posso dentro da função, antes do return chama use router parêntesis colocar na variável, pode dizer cons router igual e eu vou colocar aqui o valor só no console log mesmo pra você ver router vamos ver então vamos para a página né? f12 tá? ou você ver aqui no navegador ou você ver também dá pra ver do seu terminal, por que? porque ele faz o o código é executado no servidor antes de ser enviado ao cliente, por isso que você vê aqui na parte do servidor do next.js estou falando do servidor do front end, não é o servidor back end, servidor do next.js ele chama esse arquivo né? gera página e envia para o navegador a página já renderizada e quando tá renderizada ele chama hidrata né? chama hydrate para poder construir a estrutura react de novo no cliente e de lá ele também executa o código e dá o console log do router tem isso então se eu noto aqui route, pathname, query, aspath tipo de antes né? e no cliente você nota que na parte do servidor o query tá sem nada dá pra ver nada, mas no cliente e você dá uma olhada aqui no query você vê que o artigo slug está tem alguma coisa né? que é aquele valor depois do barra artigos barra então se a gente colocar router.query artigo slug, o nome da variável que é o nome do arquivo js lembra corresponde ao nome do arquivo quando tá dentro do coshets se a gente acessa essa parte da URL então a gente vai usar o router.query. artigo slug para poder obter esse valor e esse valor a gente vai usar para poder fazer uma aquisição ao servidor vamos botar aqui no design então a gente já tem o slug a gente vai fazer aqui o express a api para poder mandar as informações daquele artigo para poder existir aí você pega aquilo e pode referenciar aqui dentro do seu componente que a gente vai ver depois quando a gente configurar o back-end vamos substituir esses valores aqui por exemplo, Loreen Epson vai ser vai vir das props nesse caso o artigo shows props props. alguma coisa ou algum nome a gente pode dizer artigo ponto título algo assim e no caso do conteúdo seria o artigo props.artigo.conteudo claro que nada vai acontecer agora vai dar erro né que não existe o que vai dar a página da eu né não dá para ler propriedades de undefined artigo props tem um objeto mas não tem a propriedade artigo então props.artigo.undefined não existe nada no ponto undefined e o artigo é bom então essa vamos dar uma pausa por enquanto nós fizemos começamos a fazer criamos o aplicativo do front-end com o next.js criaremos um aplicativo npm.json instalamos a dependência react do dom in next criamos dentro da pasta pages as rotas em caso artigo index artigo barra artigo slug aprendemos que podemos usar o efeito use router para poder ter acesso ao roteador do next que a gente pode dizer o roteador do nextrouter ponto query para poder acessar os parâmetros do caminho da URL no caso o nome da variável corresponde ao nome do arquivo ponto.js entre os cocheiros aprendemos que a estrutura dentro do pages corresponde ao mesmo caminho da URL o roteamento baseado no sistema de arquivos o padrão do next tem várias regras que você deve seguir e com esse padrão se for seguido o aplicativo funciona sem a gente ter que escrever tudo do zero ele já faz todo o trabalho para a gente basta a gente seguir as regras aprendemos também que o next esqueci de mostrar o view page source deixo eu reverter isso se você clicar o view page source de código fonte da página dá para ver o conteúdo todo renderizado que é isso que a gente quer para os buscadores indexarem o nosso conteúdo e as palavras chavem serão disponíveis para a busca isso é um característica e é um objetivo de ter os aplicativos hibis, isomóficos em que a gente usa o react mas primeiro a gente renderiza tudo no servidor antes de enviar para o cliente depois renderizar no servidor por isso que o código também executa no servidor e no cliente você manda para o cliente que recebe já o conteúdo renderizado e ele roda o código novamente ele hidrata que é para poder construir a estrutura do front end no cliente com aquele código já gerado a estrutura já gerada previamente isso elimina maior parte do trabalho no usuário que agora antes no SPA single-play a maior parte do processamento era na parte do cliente o cliente só recebia o bundle JavaScript e tudo era construído no cliente mas agora é hibidro o servidor constrói previamente e manda já renderizado para o cliente que vai reconstruir através de processos de hidratação, hydrate e ele vai construir estrutura de novo é a partir de que o código já está no cliente ele vai agir como se fosse uma SPA depois do primeiro a requisição para você clicar em um link ele não vai fazer uma requisição para página completa ele só vai pedir uma parte que as informações necessárias para poder mudar de página que na verdade você está mudando uma parte do seu da sua página então por essa é só espero que tenham gostado por favor clique gostei deixe comentários, perguntas, dúvidas e não se esqueça de ativar as notificações para receber as próximas aulas que estão por vir então muito obrigado e até a próxima