> For the complete documentation index, see [llms.txt](https://salvatore-academy.gitbook.io/dev-fullstack-web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://salvatore-academy.gitbook.io/dev-fullstack-web/academia/missoes-de-backend/hello-world-com-expressjs.md).

# Hello World com ExpressJS

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

{% embed url="<https://www.youtube.com/watch?v=qGCHAlWMw0Y&ab_channel=PauloSalvatore&new=1>" %}

**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

{% embed url="<https://github.com/SalvatoreAcademy/backend-missao-aprendizado-iniciante-hello-world-com-expressjs>" %}

### PDF para Download

{% file src="/files/TD2ujPZ77B7M0c4HRbDj" %}

### Miro

{% embed url="<https://miro.com/app/board/uXjVNQ6PZjQ=/?moveToWidget=3458764587647670378&cot=14>" %}

## Exercícios de Fixação

{% hint style="info" %}
Use esses exercícios para reforçar o que acabou de aprender. Se errar, leia a explicação para entender melhor o conceito.
{% endhint %}

<details>

<summary>Qual é a função principal do comando <code>npm init</code>?</summary>

A) Instalar o ExpressJS.

B) Inicializar um novo projeto NodeJS.

C) Executar o arquivo `index.js`.

D) Criar um servidor HTTP.

</details>

<details>

<summary>Resposta correta</summary>

**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`.

</details>

***

<details>

<summary>Complete o código para que a mensagem "Hello World" seja exibida.</summary>

{% code lineNumbers="true" %}

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

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

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

{% endcode %}

</details>

<details>

<summary>Resposta correta</summary>

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

**Resposta Correta**:

{% code lineNumbers="true" %}

```javascript
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");
});
```

{% endcode %}

**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.

</details>

***

<details>

<summary>Afirmativa: O ExpressJS é um framework de frontend.</summary>

A) Verdadeiro

B) Falso

</details>

<details>

<summary>Resposta correta</summary>

**Afirmativa: O ExpressJS é um framework de frontend.**

**Resposta Correta**: Falso

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

</details>

***

<details>

<summary>Qual comando usamos para instalar o ExpressJS?</summary>

A) `npm create express`

B) `npm start express`

C) `npm install express`

D) `npm init express`

</details>

<details>

<summary>Resposta correta</summary>

**Qual comando usamos para instalar o ExpressJS?**

**Resposta Correta**: C

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

</details>

***

<details>

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

A) Verdadeiro

B) Falso

</details>

<details>

<summary>Resposta correta</summary>

**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.

</details>

## Exercícios de Validação

{% hint style="info" %}
Esses exercícios testarão sua compreensão prática. Revise o feedback para melhorar suas habilidades.
{% endhint %}

### 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`.

<details>

<summary>Resposta esperada</summary>

{% code lineNumbers="true" %}

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

{% endcode %}

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

</details>

### Revisão de Código

{% hint style="danger" %}
**Analise o código a seguir, encontre e corrija o erro.**
{% endhint %}

{% code lineNumbers="true" %}

```javascript
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");
});
```

{% endcode %}

<details>

<summary>Resposta Correta</summary>

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

{% code lineNumbers="true" %}

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

{% endcode %}

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

</details>

### 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.

<details>

<summary>Código esperado</summary>

{% code title="index.js" lineNumbers="true" %}

```javascript
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");
});
```

{% endcode %}

**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.

</details>