Hello World com ExpressJS

[Recomendada para começar] | Área: Backend | Nível recomendado: Iniciante

Esta missão guiará pelo processo de configuração de um ambiente de desenvolvimento básico usando Express.js. O objetivo é criar uma aplicação simples que responda com mensagens diferentes em rotas distintas.

Vídeo

Link direto: https://youtu.be/qGCHAlWMw0Y

Tópicos

1. Configuração Inicial:

   • Criar conta no GitHub.

   • Criar repositório no GitHub.

   • Abrir GitHub CodeSpaces.

2. Ambiente de Desenvolvimento:

   • Conhecer o Visual Studio Code.

   • Instalar e configurar o Node.js.

3. Fundamentos de Backend:

   • Introdução a APIs.

   • Instalação e configuração do Express.js.

   • Criação de um servidor básico com Express.js.

4. Desenvolvimento da Aplicação:

   • Escrever o código do hello world com ExpressJS.

   • Entender e aplicar conceitos de requisição e resposta HTTP.

   • Criar um endpoint adicional.

Material de Apoio

Repositório no GitHub

GitHub - SalvatoreAcademy/backend-missao-aprendizado-iniciante-hello-world-com-expressjs: Projeto da Missão de Aprendizado da profissão Dev Backend JavaScript, nível Iniciante: Hello World com ExpressJS.GitHub

PDF para Download

2MB

Backend - Iniciante - Missão de Aprendizado - Hello World com ExpressJS.pdf

pdf

Miro

Exercícios de Fixação

Use esses exercícios para reforçar o que acabou de aprender. Se errar, leia a explicação para entender melhor o conceito.

Qual é a função principal do comando npm init?

A) Instalar o ExpressJS.

B) Inicializar um novo projeto NodeJS.

C) Executar o arquivo index.js.

D) Criar um servidor HTTP.

Resposta correta

Qual é a função principal do comando npm init?

Resposta Correta: B

Feedback: O comando npm init é utilizado para inicializar um novo projeto NodeJS, criando o arquivo package.json.

---

Complete o código para que a mensagem "Hello World" seja exibida.

const express = require("express");
const app = express();

app.get("/", function () {
}

app.listen(3000, function () {
  console.log("Aplicação rodando em http://localhost:3000");
});

Resposta correta

Complete o código para que a mensagem "Hello World" seja exibida.

Resposta Correta:

const express = require("express");
const app = express();

app.get("/", function (req, res) {
  res.send("Hello, world");
}

app.listen(3000, function () {
  console.log("Aplicação rodando em http://localhost:3000");
});

Feedback: O método res.send("Hello World") envia a resposta "Hello World" quando a rota raiz é acessada. Os parâmetros da função, req e res são necessários para trabalhar com a requisição e a resposta HTTP dentro das rotas do Express.

---

Afirmativa: O ExpressJS é um framework de frontend.

A) Verdadeiro

B) Falso

Resposta correta

Afirmativa: O ExpressJS é um framework de frontend.

Resposta Correta: Falso

Feedback: O ExpressJS é um framework de backend utilizado para construir servidores HTTP em NodeJS.

---

Qual comando usamos para instalar o ExpressJS?

A) npm create express

B) npm start express

C) npm install express

D) npm init express

Resposta correta

Qual comando usamos para instalar o ExpressJS?

Resposta Correta: C

Feedback: O comando npm install express é usado para instalar o ExpressJS no projeto.

---

Afirmativa: A porta padrão para o HTTP é a 80, mas a aplicação pode rodar em outras portas, como a 3000.

A) Verdadeiro

B) Falso

Resposta correta

Afirmativa: A porta padrão para o HTTP é a 80, mas a aplicação pode rodar em outras portas, como a 3000.

Resposta Correta: Verdadeiro

Feedback: A porta 80 é a padrão para HTTP, mas a aplicação pode ser configurada para rodar em qualquer porta disponível, como a 3000 no exemplo.

Exercícios de Validação

Esses exercícios testarão sua compreensão prática. Revise o feedback para melhorar suas habilidades.

Desafio de Código

Crie um endpoint adicional na aplicação ExpressJS que responda com "Boas vindas ao curso!" quando a rota /welcome for acessada.

• Implementar o novo endpoint no arquivo index.js.

Resposta esperada

app.get("/welcome", function (req, res) {
  res.send("Boas vindas ao curso!");
});

Feedback: Certifique-se de que o servidor está ouvindo na porta correta e que a rota /welcome está devidamente configurada.

Revisão de Código

Analise o código a seguir, encontre e corrija o erro.

const express = require("express");
const app = express();

app.get("/", function () {
  res.send("Hello World");
});

app.listen(3000, function () {
  console.log("Aplicação rodando em http://localhost:3000");
});

Resposta Correta

Erro: O parâmetro res está faltando na função de callback do endpoint.

// ...
app.get("/", function (req, res) {
  res.send("Hello World");
});

Feedback: Certifique-se de que todos os parâmetros necessários (req, res) estão presentes na função de callback do endpoint.

Projeto Prático

Crie uma nova aplicação ExpressJS que inclua:

1. Um endpoint que responda com "Hello Express!" quando a rota raiz / for acessada.

2. Um endpoint que responda com "Boas vindas à missão ExpressJS!" quando a rota /welcome for acessada.

3. Um endpoint que responda com "Esta é a missão de ExpressJS" quando a rota /mission for acessada.

Tarefas

• Criação do Projeto:

  • Inicialize um novo projeto NodeJS.

  • Instale o ExpressJS.

• Implementação dos Endpoints:

  • Crie um novo arquivo app.js.

  • Implemente os endpoints conforme a descrição.

Código esperado

index.js

const express = require("express");
const app = express();

// Endpoint raiz
app.get("/", function (req, res) {
  res.send("Hello Express!");
});

// Novo endpoint /welcome
app.get("/welcome", function (req, res) {
  res.send("Boas vindas à missão ExpressJS!");
});

// Novo endpoint /mission
app.get("/mission", function (req, res) {
  res.send("Esta é a missão de ExpressJS");
});

app.listen(3000, function () {
  console.log("Aplicação rodando em http://localhost:3000");
});

Feedback Detalhado

• Verificação dos Endpoints: Certifique-se de testar cada rota (/, /welcome, /mission) acessando http://localhost:3000 e verificando as respostas.

• Estrutura: A estrutura básica da aplicação deve seguir a mesma lógica apresentada na missão original.

• Diferença Sutil: A inclusão dos novos endpoints (/welcome e /mission) oferece um exercício prático de aplicação do conhecimento adquirido, sem introduzir novos conceitos.