Fazer Seção 23 do curso WebDev Udemy (Angela Yu)

[AndreBuitoni]

Section 23 - Boss Level Challenge 3 - Blog Website

• [x] 274 - A New Challange Format and What We'll Make: A Blog ----- ----- ----- ----- 29/03/2023
• [x] 275 - Setting Up The Blog Project
• [x] 276 - Challenge 1
• [x] 277 - Challenge 1 Solution
• [x] 278 - Challenge 2
• [x] 279 - Challenge 2 Solution
• [x] 280 - Challenge 3
• [x] 281 - Challenge 3 Solution
• [x] 282 - Challenge 4 ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- 30/03/2023
• [x] 283 - Challenge 4 Solution
• [x] 284 - Challenge 5
• [x] 285 - Challenge 5 Solution
• [x] 286 - Challenge 6
• [x] 287 - Challenge 6 Solution
• [x] 288 - Challenge 7
• [x] 289 - Challenge 7 Solution
• [x] 290 - Challenge 8
• [x] 291 - Challenge 8 Solution
• [x] 292 - Challenge 9 ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- 31/03/2023
• [x] 293 - Challenge 9 Solution
• [x] 294 - Challenge 10
• [x] 295 - Challenge 10 Solution
• [x] 296 - Challenge 11
• [x] 297 - Challenge 11 Solution
• [x] 298 - Challenge 12
• [x] 299 - Challenge 12 Solution
• [x] 300 - Challenge 13
• [x] 301 - Challenge 13 Solution
• [x] 302 - Challenge 14 and Solution
• [x] 303 - Challenge 15
• [x] 304 - Challenge 15 Solution
• [x] 305 - Express Routing Parameters
• [x] 306 - Challenge 16 ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- 05/04/2023
• [x] 307 - Challenge 16 Solution
• [x] 308 - Challenge 17
• [x] 309 - Challenge 17 Solution
• [x] 310 - Challenge 18
• [x] 311 - Challenge 18 Solution
• [x] 312 - Challenge 19
• [x] 313 - Challenge 19 Solution
• [x] 314 - Challenge 20 ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- 23/06/2023
• [x] 315 - Challenge 20 Solution
• [x] 316 - Challenge 21
• [x] 317 - Challenge 21 Solution
• [x] 318 - Tip From Angela - When Life Gives You Lemons
• [x] Postar Resultado Prático, se houver.

[AndreBuitoni]

AULA 274 - A New Challange Format and What We'll Make: A Blog

Mostrou o site que vamos criar: um site minimalista estilo blog.

Página 1 - Home: A página inicial (Home) mostra uma curta introdução e depois uma sequência de todas as entradas que foram feitas no blog. Essas entradas ficam limitadas a 100 caracteres cada uma e um link de "leia mais" fica disponível para usuário ler a entrada de blog inteira.

Página 2 - About Us Página simples com um título e um parágrafo

Página 3 - Contact Us Página simples com informações de contato

Página Secreta Uma página escondida que você pode acessar para criar novas postagens do blog, que irão aparecer na home.

OBSERVAÇÃO Cada postagem de Blog criará uma nova rota com o título da postagem. Exemplo "meublog.com/posts/nova-postagem-32"

AULA FINALIZADA

[AndreBuitoni]

AULA 275 - Setting Up The Blog Project

Baixei os arquivos iniciais para o projeto e analisei de modo rápido os arquivos contidos na pasta para obter uma visão geral do que já veio pronto.

Instalei os módulos do node com o comando npm install. As dependências necessárias para o projeto foram instaladas automaticamente pois já estavam listadas no arquivo package.json

AULA FINALIZADA

[AndreBuitoni]

AULAS 276 E 277 | Challenge 1

O desafio era apenas carregar a página Home com o título "Home"

Para isso utilizei o método res.render() dentro do app.get("/")

Ops, na verdade eu só precisava escrever "home" no caminho. Eu havia me esquecido que o método render já procura automaticamente o arquivo dentro da pasta "views". ME PEGOU. ---->

AULAS FINALIZADAS

[AndreBuitoni]

Aulas 278 e 279 - Challenge 2

O desafio era fazer aparecer na página home o conteúdo de uma variável localizada dentro do servidor App.js

Para isso, a solução foi passar um objeto dentro do res.render. Esse objeto possui um par chamado key:value (ou chave e valor) e, com isso podemos pegar a variável do servidor como o VALOR e atribuir esse valor para a CHAVE.

No Servidor

Na página HOME (Aqui, usamos as TAGS EJS adequadas para imprimir valores)

RESULTADO

AULAS FINALIZADAS

[AndreBuitoni]

Aulas 280 e 281 - Challenge 3

OBJETIVO Utilizar o conteúdo de header.js e footer.js dentro da página Home.js

EXECUÇÃO

RESULTADO

AULAS FINALIZADAS

[AndreBuitoni]

AULAS 282 e 283 - Challenge 4

No início da aula, nós modificamos a localização dos arquivos "header.js" e "footer.js". Para isso, criamos uma nova pasta (chamada partials) dentro da pasta "views". Com isso, esses componentes deixaram de serem carregados na página Home, pois o EJS somente busca arquivos para incluir que estejam na pasta VIEWS.

O desafio agora é fazer as páginas aparecerem novamente na Home.

Uma rápida busca no site do EJS nos ensina a utilizar a função include, com exemplo de outra pasta dentro de views:

Novo código

Resultado

AULAS FINALIZADAS

[AndreBuitoni]

AULAS 284 e 285 - Challenge 5

Neste desafio, o objetivo foi criar as páginas ABOUT e CONTACT da mesma forma que criamos a página HOME. Ou seja, precisamos renderizar header, footer, título e parágrafo (com sua variável dentro do servidor).

Para solucionar, primeiro copiei o conteúdo da página HOME para as outras duas páginas, mudei os títulos e dei novos nomes para as variáveis que vão receber o conteúdo do servidor:

Na sequência, dentro do servidor (app.js), criei rotas para '/about' e '/contact', passando os valores das variáveis através de um objeto com o par "key: value"

RESULTADO

AULAS FINALIZADAS

[AndreBuitoni]

AULAS 286 e 287 - Challenge 6

O desafio agora foi fazer os três botões funcionarem (HOME, ABOUT US, CONTACT US)

A solução foi ir até o arquivo do header e escrever o caminho que deveria ser requisitado ao servidor "/", "/about" e "/contact" (esses caminhos antes estavam com #)

Que moleza hein.

AULAS FINALIZADAS

[AndreBuitoni]

AULAS 288 e 289 - Challenge 7

O desafio consistiu em criar uma página com o caminho '/compose' que tivesse o seguinte layout:

SOLUÇÃO PASSO 1 Criar uma página similar a todas as outras, porém ao invés do parágrafo com "lorem ipsum" adicionei dois elementos HTML, sendo um input do tipo texto e um botão do tipo submit.

SOLUÇÃO PASSO 2 Agora, criei a rota para essa página no servidor.

AULAS FINALIZADAS

[AndreBuitoni]

AULAS 290 e 291 - Challenge 8

O desafio foi fazer com que, após o usuário inserir um texto no input da página COMPOSE e clicar no botão PUBLISH, esse texto deveria aparecer escrito no nosso terminal (console.log)

SOLUÇÃO PASSO 1 - O Formulário Dentro da página compose.ejs -> Envelopamos os componentes INPUT e BUTTON da página COMPOSE em um formulário do tipo POST com a "action" sendo "/compose". Nomeamos o input para "newPost"

SOLUÇÃO PASSO 2 - A Rota POST no Servidor No servidor (app.js) -> Criação de uma rota post. Criação de uma variável que recebe o texto inserido pelo usuário no INPUT (aqui utilizamos o NOME do input). Por fim, imprimimos no terminal a variável com o console.log -> Uma outra opção seria eliminar a variável e simplesmente usar console.log(req.body.newPost)

RESULTADO No website

No Terminal

AULAS FINALIZADAS

[AndreBuitoni]

AULAS 292 e 293 - Challenge 9

O desafio foi remodelar a página, usando bootstrap e HTML, para que ficasse assim:

SOLUÇÃO PASSO ÚNICO A solução foi olhar o site do bootstrap, na área de formulários, para ver algumas classes que poderíamos usar. Resolvi utilizando as seguintes classes e elementos:

AULAS FINALIZADAS

[AndreBuitoni]

AULAS 294 e 295 - Challenge 10

O desafio era guardar as informações que o usuário insere na página COMPOSE dentro de um objeto localizado dentro do servidor no método POST "/compose".

SOLUÇÃO PASSO ÚNICO Criamos o objeto da seguinte forma:

AULAS FINALIZADAS

[AndreBuitoni]

AULAS 296 e 297 - Challenge 11

Neste desafio foi solicitado o seguinte: 1- Criar uma variável global no servidor do tipo array, sem nenhum valor atribuido. 2- Dentro da rota POST "/compose" devemos acessar e modificar essa variável global para incluir o objeto post (que contém o título e corpo da postagem do usuário) 3- Ainda na mesma rota, após o passo anterior direcionar o usuário para a página HOME. 4- No método GET da página home, adicionar um console.log para imprimir a variável global criada no passo 1.

SOLUÇÃO PASSO 1 - Variável Global Criei a variável no servidor antes das rotas.

SOLUÇÃO PASSOS 2 e 3 - Alterações no app.post('/compose")

SOLUÇÃO PASSO 4 - Alteração no app.get("/")

RESULTADO - Após fazer dois novos posts na página compose, fui redirecionado duas vezes para a página HOME e no terminal é impressa a variável posts que acumula todas as postagens feitas, conforme abaixo.

AULAS FINALIZADAS

[AndreBuitoni]

Aulas 298 e 299 - Challenge 12

O desafio foi remover o console.log que estava no servidor e passá-lo para a página HOME.

SOLUÇÃO PASSO 1 - Passando o Array do servidor para a página Home Primeiro, adicionei mais um par key:value dentro do objeto que está sendo passado pelo método GET. Nesse par eu passo o valor do array contendo os posts.

SOLUÇÃO PASSO 2 - Imprimindo o console.log pela página Home Depois, inseri o console.log na HOME fazendo uso das TAGS EJS adequadas para execução de JavaScript.

AULAS FINALIZADAS

[AndreBuitoni]

AULAS 300 e 301 - Challenge 13

DESAFIO Mudar o código para que o console.log mostre somente o TÍTULO das entradas no blog, de maneira que conforme o usuário adicione mais entradas no blog, o console.log imprima todos os títulos já usados anteriormente.

SOLUÇÃO Criei um loop FOR que é executado a cada vez que a página HOME é carregada. Esse loop passa por todos os valores do array contendo as entradas do blog e imprime selecionando do objeto somente o valor correspondente aos títulos.

RESULTADO NO TERMINAL - Após o usuário inserir três entradas no blog, e cada entrada direcionar para a página home.

AULAS FINALIZADAS

[AndreBuitoni]

Aula 302 - Challenge 14 and Solution

DESAFIO No início da aula foi apresentado o método forEach() para realizar loop. O desafio consiste em modificar o FOR loop utilizado no desafio anterior para um loop do tipo forEach(), obtendo exatamente o mesmo resultado no terminal.

SOLUÇÃO Realizadas as modificações necessárias.

AULA FINALIZADA

[AndreBuitoni]

AULAS 303 e 304 - Challenge 15

DESAFIO Agora chegou o momento de retirar o console.log e, ao invés disso, renderizar os TÍTULOS e os CORPOS das entradas de blog diretamente no website.

SOLUÇÃO Modifiquei o loop forEach() de maneira que agora, a cada ciclo ele cria novos elementos HTML ( h2 e p ) contendo dentro deles o valor das variáves que estavam segurando o conteúdo das entradas de blog. Para isso, modifiquei as TAGS EJS para as tags que imprimem o valor das variáves ( antes era essa <% variavelAqui %> agora é essa <%= variavelAqui %> )

RESULTADO

AULAS FINALIZADAS

[AndreBuitoni]

AULA 305 - Express Routing Parameters

Curta aula teórica explicando sobre como o express possibilita criar rotas usando parâmetros

AULA FINALIZADA

[AndreBuitoni]

AULAS 306 e 307 - Challenge 16

DESAFIO Utilizando Express Routing Parameters - Quando o usuário digitar qualquer coisa no navegador, após "localhost:3000/posts/" esse conjunto de letras deve ser impresso no terminal com console.log

SOLUÇÃO Criei uma rota usando um parâmetro chamado :postName e depois requisitei esse parâmetro dentro do console.log

RESULTADO

AULAS FINALIZADAS

[AndreBuitoni]

AULAS 308 e 309 _ Challenge 17

DESAFIO Criar uma entrada no blog com o título "Test". Após isso, ao colocar essa palavra na URL (/posts/Test) o terminal deverá mostrar "Match Found!"

SOLUÇÃO No servidor, criamos um IF para detectar se o :postName é igual a "Test"

RESULTADO Criamos uma entrada com título "Test" e adicionamos esse título na URL. No terminal, detectamos a igualdade

MODIFICAÇÕES Na verdade, mais pra frente na aula, ficou claro que o DESAFIO é mostrar Match Found para QUALQUER título que nós criarmos, e não somente "Test", como parecia no início. Portanto, modifiquei o código para ----> Lembrando que o "posts" nesse loop forEach, é um array contendo todas as entradas do blog do usuário.

AULAS FINALIZADAS

[AndreBuitoni]

AULAS 310 e 311 - Challenge 18

DESAFIO A instrutora Angela Yu nos introduziu para a biblioteca "lodash". Essa biblioteca contém um método chamado ".lowerCase" que transforma caracteres em strings para umm formato padrão em minúsculas. O desafio era instalar e requisitar essa biblioteca no servidor para depois fazer com que uma entrada com título "Another post" resultasse em um match com a busca na URL /posts/another-post www.lodash.com método .lowerCase

SOLUÇÃO Instalamos a biblioteca lodash via npm com "npm i lodash". Depois requisitamos ela:

Depois, utilizamos o método _.lowerCase nas duas variáveis sendo comparadas pelo nosso loop forEach

RESULTADO

AULAS FINALIZADAS

[AndreBuitoni]

AULAS 312 e 313 - Challenge 19

DESAFIO Agora, quando o usuário digitar na URL o nome de uma entrada de blog ( exemplo: /posts/parque-beto-carrero ), uma nova página deverá ser renderizada mostrando o conteúdo dessa entrada (título e corpo do texto).

SOLUÇÃO PASSO 1 - Criação do Template "post.ejs"

SOLUÇÃO PASSO 2 - Alteração da rota '/posts/:postName'

RESULTADO Na página Home, as entradas do blog:

Quando o URL é igual ao título do blog:

AULAS FINALIZADAS

[AndreBuitoni]

AULAS 314 e 315

DESAFIO Limitar os caracteres das postagens de blog que aparecem na página Home para 100 caracteres e adicionar reticências no final do texto.

SOLUÇÃO - Adicionar o método substring para o texto sendo postado:

RESULTADO - Texto aparece cortado no homepage

Aulas Finalizadas

[AndreBuitoni]

Aulas 316 e 317

DESAFIO Adicionar, no final de cada postagem na Homepage, uma string "Read More" que é um link. Ao ser clicado o link deve abrir a página específica daquela postagem de blog, que conterá o conteúdo do post na íntegra.

SOLUÇÃO No mesmo parágrafo onde foi adicionado o método substring, adicionar a tag âncora para o post em questão:

RESULTADO

Aulas Finalizadas

[AndreBuitoni]

Com isso, concluo a seção 23 do curso.

[piantino]

Revisado, parabéns!