# 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="<https://1989749987-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRonehqhrmNdVr43Njmfs%2Fuploads%2FS4Q9nuJjn1Jjpw6ctV8o%2FBackend%20-%20Iniciante%20-%20Missa%CC%83o%20de%20Aprendizado%20-%20Hello%20World%20com%20ExpressJS.pdf?alt=media&token=d4167918-d13e-49a3-96ed-9ee8340a8f39>" %}

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://salvatore-academy.gitbook.io/dev-fullstack-web/academia/missoes-de-backend/hello-world-com-expressjs.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.