7 | )
8 | }
9 | }
10 |
11 | export default Novo;
12 |
--------------------------------------------------------------------------------
/materias/javascript/exercicios/ex-revisao-js-resolvidos/1-exercicio.js:
--------------------------------------------------------------------------------
1 | // Frase na tela - Implemente um programa que escreve na tela a frase "O primeiro programa a gente nunca esquece!".
2 |
3 | console.log("O primeiro programa a gente nunca esquece!");
4 |
--------------------------------------------------------------------------------
/aula-react-01/meu-app/src/components/Header/Header.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const Header = () => {
4 | return (
5 |
6 |
29 | )
30 | }
31 |
32 |
33 | export default List;
--------------------------------------------------------------------------------
/materias/javascript/exercicios/ex-revisao-js-resolvidos/3-exercicio.js:
--------------------------------------------------------------------------------
1 | // Letra de música - Faça um programa que mostre na tela uma letra de música que você gosta (proibido letras do Justin Bieber).
2 |
3 | console.log(`AMOR E FÉ
4 | To aqui na sua frente meio bagunçado
5 | Cheguei com o volume do som topado
6 | Lembrei do rolê domingo passado
7 | Aí 'cê' lembra bem, nada é impossível
8 | Tudo é invisível
9 | Pra quem só olha pra si
10 | Não é bem assim
11 | É coisa de outro nível
12 | Eu me acho incrível quando 'cê' olha pra mim - E gosto assim
13 | Ta pra nascer um maloqueiro disposto a soltar o dedo só por causa dela
14 | Ai eu penso o tempo inteiro e até bate o desespero, o que sou eu sem ela
15 | Eu danço com a nossa fumaça, me abraça no conversível, segura minha mão
16 | Até o radar tirou uma foto e se 'nóis' tivesse de moto, não pegava não`);
17 |
--------------------------------------------------------------------------------
/materias/javascript/exercicios/ex-revisao-js-resolvidos/6-exercicio.js:
--------------------------------------------------------------------------------
1 | // Calculadora de Dano - Escreva um programa que receba dois valores digitados pelo usuário:
2 |
3 | // Quantidade de vida de um monstro (entre 10 e 50);
4 | // Valor do ataque do jogador por turno (entre 5 e 10);
5 | // Baseado nos valores digitados, exiba a quantidade de turnos que o jogador irá demorar para conseguir derrotar o monstro.
6 | // O jogador irá derrotar o monstro em 8 turnos.
7 |
8 | const prompt = require("prompt-sync")();
9 |
10 | const vidaMonstro = +prompt("Digite a quantidade de vida do monstro (entre 10 e 50): ");
11 | const ataqueJogador = +prompt("Digite o valor de ataque do jogador (entre 5 e 10): ");
12 |
13 | const turnosNecessarios = Math.ceil(vidaMonstro / ataqueJogador);
14 |
15 | console.log(`O jogador irá precisar de ${turnosNecessarios} turnos para derrotar o monstro.`);
16 |
--------------------------------------------------------------------------------
/projeto-vagas-front/src/App.js:
--------------------------------------------------------------------------------
1 | import './App.css';
2 | import { Switch, Route } from 'react-router-dom';
3 | import Header from './components/shared/Header/Header';
4 | import Footer from './components/shared/Footer/Footer';
5 | import Home from './pages/Home/Home';
6 | import Cadastro from './pages/Cadastro/Cadastro';
7 | import VagaView from './pages/VagaView/VagaView';
8 | import Edicao from './pages/Edicao/Edicao';
9 |
10 | function App() {
11 | return (
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 | );
23 | }
24 |
25 | export default App;
26 |
--------------------------------------------------------------------------------
/materias/javascript/exercicios/ex-revisao-js-resolvidos/20-exercicio.js:
--------------------------------------------------------------------------------
1 | //Faça um programa que tenha uma função chamada voto() que vai receber como parâmetro o ano de nascimento de uma pessoa,
2 | //retornando um valor literal indicando se uma pessoa tem voto NEGADO, OPCIONAL ou OBRIGATÓRIO nas eleições:
3 |
4 | voto = ano => {
5 | const atual = new Date();
6 | const anoAtual = atual.getFullYear();
7 | const idade = anoAtual - nascimento;
8 |
9 | if (idade < 16) {
10 | return console.log(`Com ${idade} anos o voto é NEGADO`);
11 | } else if (idade >= 16 || idade < 65) {
12 | return console.log(`Com ${idade} anos o voto é OBRIGATÓRIO`);
13 | } else {
14 | return console.log(`Com ${idade} anos o voto é OPCIONAL`);
15 | }
16 | };
17 |
18 | nascimento = prompt("Digite seu ano de nascimento: ");
19 | console.log(voto(nascimento));
20 |
21 |
--------------------------------------------------------------------------------
/materias/javascript/exercicios/ex-revisao-js-resolvidos/19-exercicio.js:
--------------------------------------------------------------------------------
1 | /*Exercicios:
2 | # Faça um programa que tenha uma função chamada área(), que receba as dimensões de um terreno retangular (largura e comprimento)
3 | e mostre a área do terreno:
4 | */
5 | function area(largura, comprimento) {
6 | area = largura * comprimento;
7 | console.log(`A área de um terreno ${largura} x ${comprimento} é de ${area}m²`);
8 | }
9 |
10 | let largura = +prompt("Largura: ");
11 | let comprimento = +prompt("Comprimento: ");
12 | area(largura, comprimento);
13 |
14 | // utilizando arrow function()
15 | /*
16 | area=(largura, comprimento) =>{
17 | area = largura * comprimento;
18 | console.log(`A área de um terreno ${largura} x ${comprimento} é de ${area}m²`);
19 | }
20 |
21 | let largura = +prompt("Largura: ");
22 | let comprimento = +prompt("Comprimento: ");
23 | area(largura, comprimento);
--------------------------------------------------------------------------------
/materias/javascript/exercicios/ex-revisao-js-resolvidos/21-exercicio.js:
--------------------------------------------------------------------------------
1 | /*DESAFIO 02
2 | Jogo da adivinhação
3 | Escreva um programa que faça o computador “pensar” em um número inteiro entre 0 e 10 e peça para o usuário tentar descobrir qual foi o número escolhido pelo computador. O programa deverá escrever na tela se o usuário venceu ou perdeu.
4 | */
5 |
6 | numeroRandomico = Math.floor(Math.random() * 5);
7 | //console.log(numeroRandomico);
8 |
9 | usuario = +prompt("Digite um número entre 0 e 5: ");
10 |
11 | console.log("PROCESSANDO...");
12 |
13 | if (usuario === numeroRandomico) {
14 | console.log("Você acertou o número, parabéns");
15 | } else if (usuario > 5) {
16 | console.log("Você escolheu um número maior que 5");
17 | } else if (usuario > numeroRandomico) {
18 | console.log("Você chutou alto demais");
19 | } else if (usuario < numeroRandomico) {
20 | console.log("Você chutou baixo demais");
21 | }
--------------------------------------------------------------------------------
/aula-13/vagas-mvc/index.js:
--------------------------------------------------------------------------------
1 | // imports
2 | const express = require('express');
3 | const cors = require('cors');
4 |
5 | const VagasRoutes = require('./routes/vagas.routes');
6 | const Conn = require('./conn/conn');
7 |
8 | const app = express();
9 | app.use(express.json());
10 | app.use(cors());
11 | Conn();
12 |
13 | // falo pro express ultilizar as minhas rotas no endpoint /vagas
14 | app.use('/vagas', VagasRoutes);
15 |
16 | const port = 3001;
17 | app.listen(port, () => console.log(`App rodando em htttp://localhost:${port}/`));
18 |
19 | // MVC
20 | // MODEL = é responsavel pelos dados e funcoes do banco de dados
21 | // VIEW = a visao do cliente ou seja html(react, angular, vue, html)
22 | // CONTROLLER = é o responsavel por gerenciar os fluxos, define as regras
23 | // Rotas = sao os responsaveis pelos metodos da API.
24 | // servicos = responsaveis por se conectar com os nossos model (chamas as funcoes do banco de dados atraves do model)
--------------------------------------------------------------------------------
/aula-13/vagas-mvc/routes/vagas.routes.js:
--------------------------------------------------------------------------------
1 | // importa o express
2 | const express = require('express');
3 | const VagasController = require('./../controllers/vagas.controller');
4 | // inicializo minha rota
5 | const router = express.Router();
6 | const vagasController = new VagasController();
7 |
8 | // [GET] /vagas - Retorna a lista de vagas
9 | router.get('/', vagasController.getVagas);
10 |
11 | // [GET] /vagas/id - Returna uma unica vaga por id
12 | router.get('/:id', vagasController.getVagasById);
13 |
14 | // [POST] /vagas - Cria uma nova vaga no banco de dados
15 | router.post('/', vagasController.createVaga);
16 |
17 | // [PUT] /vagas/id - Atualiza uma nova vaga de acordo com o objeto recebido pelo front
18 | router.put('/:id', vagasController.editVaga);
19 |
20 |
21 | // [DELTE] /vagas/id - Excluir uma vaga de acordo com o seu id
22 | router.delete('/:id', vagasController.deleteVaga);
23 |
24 | module.exports = router;
25 |
26 |
27 |
--------------------------------------------------------------------------------
/vagas-mongo/models/vaga.js:
--------------------------------------------------------------------------------
1 | // Schemas --> é a estrutura de dados do documento('linha tabela') que é aplicado por meio da camada de aplicativo
2 | // Documents --> sao como se fosse as linhas da nossa tabela .
3 | // Model --> São construtores que pegam um schema e cria uma instancia de um documento equivalente a um registro em um banco de dados relacional.
4 | // Collections --> são equivalentes as tabelas no banco de dados e elas podem conter varios documentos JSON.
5 |
6 | const mongoose = require('mongoose');
7 |
8 | const vagaModel = new mongoose.Schema({
9 | titulo: { type: String, required: true},
10 | descricao: { type: String, required: true },
11 | salario: {type: Number, required: true },
12 | senioridade: {type: String, required: true},
13 | dataCriacao: {type: Date, default: Date.now}
14 | })
15 |
16 | // inicializo o meu model na collection vaga com o schema vagaModel
17 | const Vaga = mongoose.model("vagas", vagaModel);
18 |
19 | module.exports = Vaga;
--------------------------------------------------------------------------------
/projeto-vagas-front/src/components/structure/List/List.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react'
2 | import Card from '../Card/Card'
3 | import Api from '../../../api/api'
4 |
5 | const List = () => {
6 | const [vagas, setVagas] = useState([]);
7 |
8 | useEffect(() => {
9 | getVagas();
10 | }, []);
11 |
12 | const getVagas = async () => {
13 | const response = await Api.fetchGetAll(); // requiscao do tipo GET para api
14 | const data = await response.json(); // API retorna um array com dados
15 | setVagas(data); // atualizamos o nosso objeto do estado com o array vindo da api backend
16 | }
17 |
18 | return (
19 |
20 | {
21 | vagas.map((vaga, index) => ( // iterar o array de vagas e para cada vaga chamar um componente card
22 |
23 | ))
24 | }
25 |
26 | )
27 | }
28 |
29 | export default List
30 |
--------------------------------------------------------------------------------
/aula-react-01/meu-app/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "meu-app",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@testing-library/jest-dom": "^5.11.4",
7 | "@testing-library/react": "^11.1.0",
8 | "@testing-library/user-event": "^12.1.10",
9 | "react": "^17.0.2",
10 | "react-dom": "^17.0.2",
11 | "react-scripts": "4.0.3",
12 | "web-vitals": "^1.0.1"
13 | },
14 | "scripts": {
15 | "start": "react-scripts start",
16 | "build": "react-scripts build",
17 | "test": "react-scripts test",
18 | "eject": "react-scripts eject"
19 | },
20 | "eslintConfig": {
21 | "extends": [
22 | "react-app",
23 | "react-app/jest"
24 | ]
25 | },
26 | "browserslist": {
27 | "production": [
28 | ">0.2%",
29 | "not dead",
30 | "not op_mini all"
31 | ],
32 | "development": [
33 | "last 1 chrome version",
34 | "last 1 firefox version",
35 | "last 1 safari version"
36 | ]
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/projeto-vaga/back-end/index.js:
--------------------------------------------------------------------------------
1 | // BACKEND CRUD DE VAGAS
2 | // importar o express
3 | const express = require('express');
4 | // importa o cors
5 | const cors = require('cors');
6 | // inicializar o express e atribuir em uma constante
7 | const app = express();
8 |
9 |
10 | // falo pro express ultilizar um middleware()
11 | // fala pro express trabalhar com JSON.
12 | app.use(express.json())
13 |
14 | // fala pro express ultilizar as configuracoes do cors
15 | app.use(cors());
16 |
17 | // estou importando as rotas das vagas
18 | const VagasRouter = require('./routers/vagas.routes');
19 |
20 | // estou inicializando a rota /vagas de acordo com as configuracoes do arquivo Vagas Router.
21 | app.use('/vagas', VagasRouter);
22 |
23 |
24 | app.get('/', (req, res) => {
25 | res.send('olá bluemers');
26 | })
27 |
28 | // vamos definir em qual porta iremos rodar a aplicacao
29 | const port = 3000;
30 |
31 | app.listen(port, () => {
32 | console.log(`O servidor está rodando na porta http://localhost:${port}/`);
33 | })
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Módulo 3 - FullStack
2 |
3 | Materiais do módulo de Full Stack da blue EdTech
4 |
5 | 
6 |
7 | ## Matérias e conteúdo Extra
8 |
9 | - [HTML](./materias/html/html.md)
10 |
11 | - [CSS](./materias/css/css.md)
12 |
13 | - [Javascript](./materias/javascript/javascript.md)
14 | - [Material](./materias/javascript/javascript.md)
15 | - [Exercicios](./materias/javascript/exercicios/exercicios-revisao-js.md)
16 |
17 | - [HTTP](./materias/http/http.md)
18 |
19 | - [GIT](./materias/css/css.md)
20 |
21 | - [Node](./materias/nodejs/nodejs.md)
22 |
23 | - [React](./materias/react/react.md)
24 |
25 | - [MongoDB](./materias/mongo/mongo.md)
26 |
27 | ## Aulas
28 |
29 | - [Aula 01 - Revisão Javascript](./aula01/../aula-01/aula-01.md)
30 |
31 | - [Aula 02 - TodoList Javascript](./aula-02/aula02.md)
32 |
33 | - [Aula 03 - Segunda parte TodoList Javascript(aula 02) e Inicio Projeto Filmes](./aula-03/aula-03.md)
34 |
35 | - [Aula 04 - Colabcode desenvolvimento Projeto Filmes](./aula-04/aula-04.md)
36 |
--------------------------------------------------------------------------------
/projeto-vagas-front/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "projeto-vagas-front",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@testing-library/jest-dom": "^5.11.4",
7 | "@testing-library/react": "^11.1.0",
8 | "@testing-library/user-event": "^12.1.10",
9 | "bootstrap": "^5.1.3",
10 | "react": "^17.0.2",
11 | "react-dom": "^17.0.2",
12 | "react-responsive-modal": "^6.1.0",
13 | "react-router-dom": "^5.3.0",
14 | "react-scripts": "4.0.3",
15 | "web-vitals": "^1.0.1"
16 | },
17 | "scripts": {
18 | "start": "react-scripts start",
19 | "build": "react-scripts build",
20 | "test": "react-scripts test",
21 | "eject": "react-scripts eject"
22 | },
23 | "eslintConfig": {
24 | "extends": [
25 | "react-app",
26 | "react-app/jest"
27 | ]
28 | },
29 | "browserslist": {
30 | "production": [
31 | ">0.2%",
32 | "not dead",
33 | "not op_mini all"
34 | ],
35 | "development": [
36 | "last 1 chrome version",
37 | "last 1 firefox version",
38 | "last 1 safari version"
39 | ]
40 | }
41 | }
42 |
--------------------------------------------------------------------------------
/materias/javascript/exercicios/ex-revisao-js-resolvidos/14-exercicio.js:
--------------------------------------------------------------------------------
1 | /*Crie um programa em JavaScript que peça a nota do aluno, que deve ser um number entre 0.00 e 10.0
2 | Se a nota for menor que 6.0, deve exibir a nota F.
3 | Se a nota for de 6.0 até 7.0, deve exibir a nota D.
4 | Se a nota for entre 7.0 e 8.0, deve exibir a nota C.
5 | Se a nota for entre 8.0 e 9.0, deve exibir a nota B.
6 | Por fim, se for entre 9.0 e 10.0, deve exibir um belo de um A.
7 | */
8 | const nota = +prompt("Qual a nota [0.0 - 10.00]: ");
9 |
10 | if (nota >= 0 && nota <= 10) {
11 | if (nota < 6) {
12 | console.log(`Sua nota é ${nota} e seu conceito foi F`);
13 | } else if (nota < 7) {
14 | console.log(`Sua nota é ${nota} e seu conceito foi D`);
15 | } else if (nota < 8) {
16 | console.log(`Sua nota é ${nota} e seu conceito foi C`);
17 | } else if (nota < 9) {
18 | console.log(`Sua nota é ${nota} e seu conceito foi B`);
19 | } else {
20 | console.log(`Sua nota é ${nota} e seu conceito foi A`);
21 | }
22 | } else {
23 | console.log("Nota inválida!");
24 | }
25 |
26 | console.log("Pronto");
27 |
--------------------------------------------------------------------------------
/materias/javascript/exercicios/ex-revisao-js-resolvidos/package-lock.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "resolvidos",
3 | "version": "1.0.0",
4 | "lockfileVersion": 1,
5 | "requires": true,
6 | "dependencies": {
7 | "ansi-regex": {
8 | "version": "4.1.0",
9 | "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
10 | "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg=="
11 | },
12 | "prompt-sync": {
13 | "version": "4.2.0",
14 | "resolved": "https://registry.npmjs.org/prompt-sync/-/prompt-sync-4.2.0.tgz",
15 | "integrity": "sha512-BuEzzc5zptP5LsgV5MZETjDaKSWfchl5U9Luiu8SKp7iZWD5tZalOxvNcZRwv+d2phNFr8xlbxmFNcRKfJOzJw==",
16 | "requires": {
17 | "strip-ansi": "^5.0.0"
18 | }
19 | },
20 | "strip-ansi": {
21 | "version": "5.2.0",
22 | "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
23 | "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
24 | "requires": {
25 | "ansi-regex": "^4.1.0"
26 | }
27 | }
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/aula-react-01/meu-app/src/App.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react';
2 | import Button from './components/Button/Button';
3 | import List from './components/List/List';
4 |
5 | function App() {
6 | const [count, setCount] = useState(0);
7 | const [text, setText] = useState('');
8 |
9 | useEffect(() => {
10 | document.title = count;
11 | }, [count])
12 |
13 | const incrementa = () => {
14 | console.log('clicou');
15 | setCount(count + 1);
16 | }
17 |
18 | const handleChange = (event) => {
19 | setText(event.target.value);
20 | }
21 |
22 | return (
23 |
24 |
Olá Mundo !
25 |
{count}
26 |
27 |
{text}
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 | );
37 | }
38 |
39 | export default App;
40 |
--------------------------------------------------------------------------------
/projeto-vagas-front/src/components/shared/Header/Header.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Link } from 'react-router-dom';
3 | const Header = () => {
4 | return (
5 |
29 | )
30 | }
31 |
32 | export default Header;
--------------------------------------------------------------------------------
/aula-02/aula02.md:
--------------------------------------------------------------------------------
1 | # Aula 02 - Revisao Javascript (projeto Todo List)
2 |
3 | ## Pré requisitos
4 |
5 | Conhecimentos basicos de javascript nos seguintes temas:
6 |
7 | - Variaveis - [Como funciona o var, let e const?](https://medium.com/collabcode/javascript-e-suas-vari%C3%A1veis-var-let-e-const-b035b44c2dab)
8 |
9 | - Arrays - [O que é uma array?](https://developer.mozilla.org/pt-BR/docs/Learn/JavaScript/First_steps/Arrays)
10 |
11 | - Funções - [O que são funções ?](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Functions)
12 |
13 | - Expressão Arrow function - [Como funcionam as Arrow Functions ?](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Functions/Arrow_functions)
14 |
15 | - Objetos
16 | - [O básico sobre objetos JavaScript](https://developer.mozilla.org/pt-BR/docs/Learn/JavaScript/Objects/Basics)
17 | - [Como trabalhar com objetos no Javascript ?](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Working_with_Objects)
18 |
19 | - DOM (Document Object Model)
20 | - [Introdução ao DOM](https://developer.mozilla.org/pt-BR/docs/Web/API/Document_Object_Model/Introduction#what_is_the_dom)
21 | - [Entendendo a manipulação do DOM](https://tableless.com.br/entendendo-o-dom-document-object-model/)
22 |
--------------------------------------------------------------------------------
/materias/javascript/exercicios/ex-revisao-js-resolvidos/23-exercicio.js:
--------------------------------------------------------------------------------
1 | const prompt = require("prompt-sync")();
2 |
3 | const resposta = prompt("Qual sua jogada: 'pedra', 'papel' ou 'tesoura'? ");
4 |
5 | const opcoes = {
6 | pedra: 1,
7 | papel: 2,
8 | tesoura: 3,
9 | };
10 |
11 | const jogador = opcoes[resposta];
12 | const cpu = Math.round(Math.random() * 2) + 1;
13 |
14 | const cpuFormatada = Object.keys(opcoes)[cpu];
15 |
16 | console.log(`\nVocê jogou '${resposta}'.\nO computador jogou '${cpuFormatada}'.\n`);
17 |
18 | if (jogador === 1 && cpu === 3) {
19 | console.log("Você ganhou!");
20 | } else if (jogador === 1 && cpu === 2) {
21 | console.log("Você perdeu!");
22 | } else if (jogador === 1 && cpu === 1) {
23 | console.log("Empatou!");
24 | }
25 |
26 | if (jogador === 2 && cpu === 1) {
27 | console.log("Você ganhou!");
28 | } else if (jogador === 2 && cpu === 3) {
29 | console.log("Você perdeu!");
30 | } else if (jogador === 2 && cpu === 2) {
31 | console.log("Empatou!");
32 | }
33 |
34 | if (jogador === 3 && cpu === 2) {
35 | console.log("Você ganhou!");
36 | } else if (jogador === 3 && cpu === 1) {
37 | console.log("Você perdeu!");
38 | } else if (jogador === 3 && cpu === 3) {
39 | console.log("Empatou!");
40 | }
41 |
--------------------------------------------------------------------------------
/aula-05/script.js:
--------------------------------------------------------------------------------
1 | // FUNCOES NO JAVASCRIPT
2 |
3 | // FUNCAO SINCRONAS
4 |
5 | const function1 = () => {
6 | console.log('Primeira funcao disparada');
7 | }
8 | const function2 = () => {
9 | console.log('... Depois dispara a segunda ...');
10 | }
11 | const function3 = () => {
12 | console.log('... por ultimo dispara a terceira');
13 | }
14 |
15 | function1();
16 | function2();
17 | function3();
18 |
19 | // PROGRAMACAO ASSINCRONA
20 |
21 | const fun1 = () => {
22 | console.log('funcao 1');
23 | }
24 |
25 | const fun2 = () => {
26 | setTimeout(function(){
27 | console.log("Executando Callback...")
28 |
29 | setTimeout(function (){
30 | console.log("Executando Callback...")
31 |
32 | setTimeout(function(){
33 | console.log("Executando Callback...")
34 | }, 2000)
35 | }, 2000)
36 | }, 2000)
37 | }
38 |
39 |
40 | // exemplo ultilizando promisses
41 | const esperarPor = (tempo) => {
42 | return new Promise((resolve, reject) => {
43 | setTimeout(() => {
44 | console.log('Executando a promisse...')
45 | resolve('foi resolvido');
46 | }, tempo)
47 | })
48 | }
49 |
50 | esperarPor(3000).then((result) => {
51 | console.log(result);
52 | });
53 |
54 |
55 |
56 |
57 |
58 | const fun3 = () => {
59 | console.log('funcao 3');
60 | }
61 |
62 | fun3();
63 | fun2();
64 | fun1();
65 |
--------------------------------------------------------------------------------
/aula-05/promisses.js:
--------------------------------------------------------------------------------
1 | // a gente chega na pizzaria pede uma pizza para viagem e fica esperando ate ficar pronta.
2 | // sincrono
3 |
4 |
5 | // a gente chega na pizzaria pede uma pizza para viagem a gente faz outras coisas e passa depois para buscar
6 | // assincrono
7 |
8 |
9 | orderPizza((result) => {
10 | console.log(`a sua pizza sabor ${result.sabor} está pronta`)
11 | })
12 |
13 | // a gente chega na pizzaria pede a pizza para viagem, faz outras shopping, encontra os amigos, vai um show
14 |
15 | orderPizza(() => {
16 | console.log('minha pizza esta pronta');
17 | esperaMeusAmigosComerem(() => {
18 | console.log('acabaram de comer, vamos para o show')
19 | FoiParaOShow(() => {
20 | console.log('chegamos no show');
21 | ligoParaAlguem(() => {
22 | console.log('Acabou o show me busca')
23 | chegueiEmCasa(() => {
24 | console.log('jantei')
25 | })
26 | })
27 | })
28 | })
29 | })
30 |
31 |
32 | orderPizza()
33 | .then((pizza) => {
34 | console.log(`minha pizza de ${pizza.sabor} esta pronta`)
35 | return esperaMeusAmigosComerem();
36 | })
37 | .then(() => {
38 | console.log('meu amigos acabaram de comer, vamos para o show');
39 | return FoiParaOShow()
40 | })
41 | .then(() => {
42 | console.log('chegamos no show');
43 | return ligoParaAlguem();
44 | })
45 | .then(() => {
46 | console.log('Acabou o show me busca');
47 | return
48 | })
--------------------------------------------------------------------------------
/materias/javascript/exercicios/ex-revisao-js-resolvidos/15-exercicio.js:
--------------------------------------------------------------------------------
1 | /*DESAFIO 01
2 | Reajuste salarial
3 | As empresas @.com resolveram dar um aumento de salário aos seus colaboradores e lhe contrataram para desenvolver o programa que calculará os reajustes.
4 | Faça um programa que recebe o salário de um colaborador e o reajuste segundo o seguinte critério, baseado no salário atual:
5 | salários até R$ 280,00 (incluindo) : aumento de 20%
6 | salários entre R\$ 280,00 e R$ 700,00 : aumento de 15%
7 | salários entre R\$ 700,00 e R$ 1500,00 : aumento de 10%
8 | salários de R$ 1500,00 em diante : aumento de 5%
9 | Após o aumento ser realizado, informe na tela:
10 | o salário antes do reajuste;
11 | o percentual de aumento aplicado;
12 | o valor do aumento;
13 | o novo salário, após o aumento."
14 | */
15 |
16 | let salario = +prompt("Digite o valor do salário do colaborador: ");
17 |
18 | if (salario <= 280) {
19 | percentual = 20;
20 | } else if (salario <= 700) {
21 | percentual = 15;
22 | } else if (salario <= 1500) {
23 | percentual = 10;
24 | } else {
25 | percentual = 5;
26 | }
27 |
28 | console.log(`O salario original é: R$ ${salario}`);
29 | console.log(`O valor do percentual é: ${percentual}%`);
30 |
31 | percentual = percentual / 100;
32 | aumento = percentual * salario;
33 | novoSalario = salario + aumento;
34 |
35 | console.log(`Aumento foi de: R$ ${aumento.toFixed(2)}`);
36 | console.log(`Novo salário tem o valor de: R$ ${novoSalario.toFixed(2)}`);
--------------------------------------------------------------------------------
/materias/javascript/exercicios/ex-revisao-js-resolvidos/22-exercicio.js:
--------------------------------------------------------------------------------
1 | /*#DESAFIO 3
2 | Caixa eletrônico
3 | Faça um Programa para um caixa eletrônico. O programa deverá perguntar ao usuário a valor do saque e depois informar quantas notas de cada valor serão fornecidas. As notas disponíveis serão as de 1, 5, 10, 50 e 100 reais. O valor mínimo é de 10 reais e o máximo de 600 reais. O programa não deve se preocupar com a quantidade de notas existentes na máquina.
4 | Exemplo 1: Para sacar a quantia de 256 reais, o programa fornece duas notas de 100, uma nota de 50, uma nota de 5 e uma nota de 1;
5 | Exemplo 2: Para sacar a quantia de 399 reais, o programa fornece três notas de 100, uma nota de 50, quatro notas de 10, uma nota de 5 e quatro notas de 1.
6 | */
7 |
8 | let valor = +prompt("Digite um valor para saque de [10-600]: ");
9 |
10 | cem = Math.trunc(valor / 100);
11 | // cem = Math.trunc(cem)
12 | valor = valor - (cem * 100);
13 |
14 | cinquenta = Math.trunc(valor / 50);
15 | valor = valor - (cinquenta * 50);
16 |
17 | dez = Math.trunc(valor / 10);
18 | valor = valor - (dez * 10);
19 |
20 | cinco = Math.trunc(valor / 5);
21 | valor = valor - (cinco * 5);
22 |
23 | um = valor;
24 |
25 | console.log(`Quantidade de Notas de R$100,00 = ${cem}`);
26 | console.log(`Quantidade de Notas de R$ 50,00 = ${cinquenta}`);
27 | console.log(`Quantidade de Notas de R$ 10,00 = ${dez}`);
28 | console.log(`Quantidade de Notas de R$ 5,00 = ${cinco}`)
29 | console.log(`Quantidade de Notas de R$ 1,00 = ${um}`)
--------------------------------------------------------------------------------
/materias/javascript/exercicios/ex-revisao-js-resolvidos/24-exercicio.js:
--------------------------------------------------------------------------------
1 | const prompt = require("prompt-sync")({ sigint: true });
2 |
3 | let rodadas = prompt("Digite a quantidade de rodadas: ");
4 | let qtsJogadores = prompt("Digite a quantidade de jogadores: ");
5 | let vencedores = [];
6 |
7 | for (let c = 0; c < rodadas; c++) {
8 | let jogos = [];
9 | for (let i = 0; i < qtsJogadores; i++) {
10 | let jogo = {
11 | nome: "Jogador" + (i + 1),
12 | numero: Math.floor(Math.random() * 6 + 1),
13 | };
14 | jogos.push(jogo);
15 |
16 | jogos.sort((a, b) => {
17 | if (b.numero < a.numero) {
18 | return -1;
19 | } else {
20 | return true;
21 | }
22 | });
23 | }
24 | console.log("");
25 | console.log(`${c + 1}° Rodada: `);
26 | for (let j in jogos) {
27 | console.log(`${parseInt(j) + 1}° Lugar: ${jogos[j].nome} tirou ${jogos[j].numero}`);
28 | let entries = Object.entries(jogos[j]);
29 | if (j === 0) {
30 | const vencedor = entries[0][1];
31 | vencedores.push(vencedor);
32 | }
33 | }
34 | }
35 |
36 | /* Conta quantos valores repetidos existem em um array e devolve um objeto com a chave sendo o nome do valor repetido e o valor a quantidade de vezes que se repetiu */
37 | function count(arr) {
38 | return arr.reduce((prev, curr) => (prev[curr] = ++prev[curr] || 1, prev), {});
39 | }
40 |
41 | let arrVencedores = Object.entries(count(vencedores));
42 | for (let vencedor in arrVencedores) {
43 | if (vencedor === 0) {
44 | console.log("");
45 | console.log(`O grande vencedor foi o ${arrVencedores[0][0]} ganhando ${arrVencedores[0][1]} rodadas!`);
46 | }
47 | }
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
--------------------------------------------------------------------------------
/aula-13/vagas-mvc/controllers/vagas.controller.js:
--------------------------------------------------------------------------------
1 | const mongoose = require('mongoose');
2 | // importamos o nosso servico
3 | const VagasServices = require('./../services/vagas.service');
4 |
5 | const vagasService = new VagasServices();
6 |
7 | class VagasController {
8 |
9 | getVagas = async (req, res) => {
10 | const vagas = await vagasService.findAll();
11 | res.send(vagas);
12 | }
13 |
14 | getVagasById = async (req, res) => {
15 | const id = req.params.id;
16 |
17 | // tratamento de erro se o id é valido ou nao
18 | if(!mongoose.Types.ObjectId.isValid(id)) {
19 | res.status(403).send('Id Invalido');
20 | return;
21 | }
22 |
23 | const vaga = await vagasService.findById(id);
24 |
25 | // tratamento de erro se existe a vaga ou nao no banco de dados.
26 | if(!vaga) {
27 | res.status(404).send('vaga não encontrada');
28 | return
29 | }
30 |
31 | res.status(200).send(vaga);
32 | }
33 |
34 | createVaga = async (req,res) => {
35 | const vaga = req.body;
36 | const vagaSalva = await vagasService.createVaga(vaga)
37 | .then(() => {
38 | res.send({ message: `vaga criada com sucesso` });
39 | })
40 | .catch((err) => res.status(500).send({error: `erro no servdor: ${err}`}));
41 | }
42 |
43 | editVaga = async (req, res) => {
44 | const id = req.params.id;
45 | const vaga = req.body;
46 | await vagasService.editVaga(id, vaga)
47 | .then(() => {
48 | res.status(200).send({message: 'Vaga atualizada com sucesso'});
49 | })
50 | .catch((err) => res.status(500).send({error: `erro no servdor: ${err}`}));
51 | }
52 |
53 | deleteVaga = async (req, res) => {
54 | const id = req.params.id;
55 | await vagasService.deleteVaga(id)
56 | .then(() => res.status(200).send({message: 'Excluido com sucesso'}));
57 | }
58 | }
59 |
60 | module.exports = VagasController;
61 |
--------------------------------------------------------------------------------
/aula-react-01/meu-app/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
17 |
18 |
27 | React App
28 |
29 |
30 |
31 |
32 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/projeto-vagas-front/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
17 |
18 |
27 | React App
28 |
29 |
30 |
31 |
32 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/aula-03/aula-03.md:
--------------------------------------------------------------------------------
1 | # Aula 3 - Desafio 'Meus Filmes'
2 |
3 | Durante a aula 3 realizamos o fechamento da primeira parte do Todo-List com javascript
4 | desenvolvido na aula 02 e inicializamos o desenvolvimento de um novo desafio, uma listagem de filmes em javascript puro.
5 |
6 | ## Proposta do desafio
7 |
8 | A proposta do desafio é o desenvolvimento de uma aplicacao web para cadastro de filmes, onde seja possivel incluir um novo filme com os campos: nome do filme, genero, imagem e uma nota de 0 a 10.
9 | A proposta de layout para o projeto deve seguir o prototipo desenvolvido no figma segundo a imagem abaixo. [Acesse o Prototipo](https://www.figma.com/file/MQSP4IMMmPyKGRWO4RYtk3/Blue-Filmes?node-id=0%3A1)
10 |
11 | 
12 |
13 | Exemplo de listagem de array no html
14 |
15 | ```js
16 | let array = [];
17 | const elementoLista = document.getElementById('lista');
18 | console.log(elementoLista);
19 | array.map((pessoa, indice) => {
20 | console.log(pessoa);
21 | elementoLista.insertAdjacentHTML('beforeend', `
22 |
23 |
${pessoa.nome} ${pessoa.sobrenome}
24 |
25 | `)
26 | })
27 | ```
28 |
29 | outra forma de trabalhar com lista e pegar os dados do input
30 |
31 | ```js
32 | let form = document.querySelector('.form');
33 | let pessoas = [];
34 | form.addEventListener('submit', (event) => {
35 | event.preventDefault();
36 | const inputNome = document.querySelector('#input-nome').value;
37 | const inputSobrenome = document.querySelector('#input-nome').value;
38 | const inputTelefone = document.querySelector('#input-nome').value;
39 |
40 | const pessoa = {
41 | nome: inputNome,
42 | sobrenome: inputSobrenome,
43 | telefone: inputTelefone,
44 | }
45 | pessoas.push(pessoa);
46 |
47 | const lista = document,.
48 |
49 | pessoas.map((pessoa, index) => {
50 | lista.insertAdjacentHTML('beforeend', `
51 |
${pessoa.nome}
52 |
${pessoa.sobrenome}
53 |
${pessoa.telefone}
54 | `)
55 | })
56 | })
57 | ```
58 |
--------------------------------------------------------------------------------
/aula-07/index.js:
--------------------------------------------------------------------------------
1 | // importar o express
2 | const express = require('express');
3 |
4 | // inicializar o express
5 | const app = express();
6 |
7 | // declaracao da porta
8 | const port = 3000;
9 |
10 | const filmes = ['Vingadores', 'Harry Potter', 'Hulk'];
11 |
12 | const tarefas = [
13 | {
14 | id: 968468746854,
15 | text: 'ir ao mercado',
16 | check: false,
17 | },
18 | {
19 | id: 16868468768,
20 | text: 'escovar dente',
21 | check: false,
22 | },
23 | {
24 | id: 1687168795798,
25 | text: 'cortar cabelo',
26 | check: false,
27 | },
28 | {
29 | id: 16846987987,
30 | text: 'estudar js',
31 | check: false,
32 | },
33 | ]
34 |
35 | // estou iniciando o express e minha rota GET
36 | // [GET] = HOME
37 | app.get('/', (req, res)=> {
38 | res.send('Hello Bluemers');
39 | })
40 |
41 | // rota que retorna a minha lista de filmes
42 | // [GET] /filmes - Retorna a lista de filmes
43 | app.get('/filmes', (req, res) => {
44 | res.send(filmes);
45 | })
46 |
47 | // rota que retorna um unico filme de acordo com o numero que ele receber
48 | // [GET] /filmes/{id} - Retorna apenas um unico filme por ID
49 | app.get('/filmes/:id', (req, res) => {
50 | // request = a requisicao que vem do cliente para o servidor
51 | // response = a resposta que o servidor envia para o cliente
52 | const id = req.params.id - 1;
53 | const filme = filmes[id];
54 |
55 | res.send(filme);
56 | })
57 |
58 |
59 |
60 | // [GET] /tarefas - retorna a lista de tarefas
61 | app.get('/tarefas', (req, res) => {
62 | res.send(tarefas);
63 | })
64 |
65 | // [GET] /tarefas/{id} - retorna as tarefas por id
66 | app.get('/tarefas/:id', (req, res) => {
67 | // estou pegnado o id pelo parametro que vem da requisicao
68 | const idParam = req.params.id;
69 | // estou procurando na minha lista a tarefa que contem o id igual ao id que estou recebendo no parametro
70 | const tarefa = tarefas.find((tarefa) => {
71 | return tarefa.id == idParam;
72 | })
73 |
74 | res.send(tarefa);
75 | })
76 |
77 |
78 |
79 | app.listen(port, () => {
80 | console.log(`Servidor rodando em http://localhost:${port}`)
81 | })
82 |
--------------------------------------------------------------------------------
/projeto-vagas-front/src/pages/VagaView/VagaView.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react'
2 | import { Link } from 'react-router-dom';
3 | import Api from '../../api/api';
4 | import 'react-responsive-modal/styles.css';
5 | import { Modal } from 'react-responsive-modal';
6 |
7 |
8 | const VagaView = (props) => {
9 | const _id = props.match.params.id;
10 | const [vaga, setVaga] = useState({});
11 | const [open, setOpen] = useState(false);
12 |
13 | const onOpenModal = () => setOpen(true);
14 | const onCloseModal = () => setOpen(false);
15 |
16 | useEffect(() => {
17 | getVagaById();
18 | }, []);
19 |
20 | const getVagaById = async () => {
21 | const response = await Api.fetchGetById(_id);
22 | const result = await response.json();
23 | setVaga(result);
24 | }
25 |
26 | const handleDelete = async (evento) => {
27 | evento.preventDefault();
28 | const response = await Api.fetchDelete(_id);
29 | const result = await response.json();
30 | alert(result.message);
31 | props.history.push('/');
32 | }
33 |
34 |
35 | return (
36 |
51 |
52 |
53 |
54 |
55 |
--------------------------------------------------------------------------------
/aula-02/style.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;700&display=swap');
2 |
3 | html {
4 | box-sizing: border-box;
5 | }
6 |
7 | * {
8 | padding: 0;
9 | margin: 0;
10 | }
11 |
12 | body {
13 | font-family: 'Montserrat', sans-serif;
14 | }
15 | .container {
16 | width: 100%;
17 | max-width: 500px;
18 | display: block;
19 | margin: 0 auto;
20 | }
21 | .app-title {
22 | text-align: center;
23 | font-size: 3rem; /* rem = tamanho da fonte no browser (padrao 16) 3 x 16 = 48px*/
24 | color: #2c3e50;
25 | }
26 |
27 | form {
28 | width: 100%;
29 | display: flex;
30 | justify-content: center;
31 | }
32 |
33 | input[type="text"] {
34 | width: 100%;
35 | padding: 10px;
36 | border-radius: 4px;
37 | border: 3px solid #2c3e50;
38 | outline: none;
39 | }
40 |
41 | .todo-list {
42 | list-style: none;
43 | margin: 20px 0;
44 | }
45 |
46 | .todo-item {
47 | margin-bottom: 1rem;
48 | width: 100%;
49 | display: flex;
50 | align-items: center;
51 | justify-content: space-between;
52 | }
53 |
54 | .todo-item span {
55 | font-size: 1.3rem;
56 | margin-right: 10px;
57 | flex-grow: 1;
58 | margin-left: 10px;
59 | }
60 |
61 | input[type="checkbox"] {
62 | display: none;
63 | }
64 |
65 | .tick {
66 | width: 30px;
67 | height: 30px;
68 | border: 2px solid #333;
69 | border-radius: 50%;
70 | display: inline-flex;
71 | justify-content: center;
72 | align-items: center;
73 | cursor: pointer;
74 | }
75 |
76 | .tick::before {
77 | content: '✓';
78 | font-size: 20px;
79 | display: none;
80 | }
81 |
82 | .delete-todo {
83 | border: none;
84 | outline: none;
85 | background: transparent;
86 | cursor: pointer;
87 | }
88 |
89 | svg {
90 | width: 34px;
91 | height: 34px;
92 | }
93 |
94 | .done span {
95 | text-decoration: line-through;
96 | }
97 | .done .tick::before {
98 | display: block;
99 | }
100 |
101 | .empty-state {
102 | display: none;
103 | flex-direction: column;
104 | align-items: center;
105 | justify-content: center;
106 | margin-top: 2rem;
107 | }
108 |
109 | .empty-state-icon {
110 | margin-bottom: 2rem;
111 | width: 150px;
112 | height: 150px;
113 | }
114 |
115 | .empty-state-title, .empty-state-description {
116 | margin-bottom: 1rem;
117 | }
118 |
119 | .todo-list:empty {
120 | display: none;
121 | }
122 |
123 | /* verifica se a lista esta vazia e aplica o display flex no elemento irmao */
124 | .todo-list:empty + .empty-state {
125 | display: flex;
126 | }
--------------------------------------------------------------------------------
/projeto-vaga/back-end/routers/vagas.routes.js:
--------------------------------------------------------------------------------
1 | const express = require('express');
2 | const router = express.Router();
3 |
4 | const vagas = [
5 | {
6 | id: Date.now(),
7 | titulo: "Desenvolvedor Front-End",
8 | descricao: "Vaga para desenvolvedor front-end com as tecnologias React, HTML, CSS, JS",
9 | salario: "R$4.000",
10 | senioridade: "Júnior"
11 | },
12 | ]
13 |
14 |
15 | // [GET] /vagas = Retorna uma lista de vagas.
16 | router.get('/', (req, res) => {
17 | // envia o array de vagas como resposta da API.
18 | res.send(vagas);
19 | })
20 |
21 | // primeiro a gente faz uma requisicao buscando a vaga por id
22 | // [GET] /vagas/id = Returna uma unica vaga por id.
23 | router.get('/:id', (req, res) => {
24 | const idParam = req.params.id;
25 | const index = vagas.findIndex(vaga => vaga.id == idParam);
26 | const vaga = vagas[index];
27 | res.send(vaga);
28 | })
29 |
30 | // depois iremos enviar o objeto atualizado para fazer o update da vaga na lista
31 | // [PUT] /vagas/id atualiza uma vaga de acordo com o id;
32 | // router.put('/:id', (req, res) => {
33 | // const idParam = req.params.id;
34 | // const vagaAtualizada = req.body;
35 | // const index = vagas.findIndex(vaga => vaga.id == idParam);
36 |
37 | // vagas[index] = {
38 | // id: vagas[index].id,
39 | // ...vagaAtualizada
40 | // }
41 | // res.send(vagas[index]);
42 | // })
43 |
44 | // [PUT] = que recebe um objeto e um id do front e atualiza os dados da vaga com esse id.
45 | router.put('/:id', (req, res) => {
46 | const vagaEdit = req.body;
47 | const id = req.params.id;
48 | let vagaPreCadastrada = vagas.find((vaga) => vaga.id == id);
49 |
50 | // vagaPreCadastrada = {
51 | // ...vagaPreCadastrada,
52 | // ...vagaEdit
53 | // }
54 |
55 | vagaPreCadastrada.titulo = vagaEdit.titulo;
56 | vagaPreCadastrada.descricao = vagaEdit.descricao;
57 | vagaPreCadastrada.salario = vagaEdit.salario;
58 | vagaPreCadastrada.senioridade = vagaEdit.senioridade;
59 |
60 | res.send({
61 | message: `vaga ${vagaPreCadastrada.id} atualizada com sucesso`,
62 | data: vagaPreCadastrada
63 | })
64 | })
65 |
66 |
67 |
68 |
69 |
70 | // [POST] /add - Cadastrar uma nova vaga na lista
71 | router.post('/add', (req, res) => {
72 | const vaga = req.body;
73 | vaga.id = Date.now();
74 | vagas.push(vaga);
75 | res.status(201).send({
76 | message: 'cadastrado com sucesso',
77 | data: vaga
78 | });
79 | })
80 |
81 | // [DELETE] = /id = Exclui uma vaga por id
82 | router.delete('/:id', (req, res) => {
83 | // salvamos em uma variavel o id que recebemos por parametro;
84 | const id = req.params.id;
85 | // procuramos o indice da vaga na lista atraves do id que recebemos via parametro
86 | const index = vagas.findIndex((vaga) => vaga.id == id);
87 | vagas.splice(index, 1);
88 |
89 | res.send({
90 | message: `vaga excluida com sucesso`,
91 | })
92 | })
93 |
94 |
95 |
96 | module.exports = router;
97 |
98 |
--------------------------------------------------------------------------------
/vagas-mongo/index.js:
--------------------------------------------------------------------------------
1 | // importar o express
2 | const express = require('express');
3 | // importar a biblioteca mongoonse que sera responsavel pelo mongodb (banco de dados)
4 | const mongoose = require('mongoose');
5 |
6 | const cors = require('cors');
7 | // importa o model vagas
8 | const Vaga = require('./models/vaga');
9 | // inicializa o express
10 | const app = express();
11 | app.use(cors());
12 | app.use(express.json());
13 |
14 | //importa conexao com banco
15 | const Conn = require('./conn/conn');
16 | Conn();
17 |
18 | // criando estrtura inicial para vaga
19 | // const vagaAdd = new Vaga({
20 | // titulo: "Devops",
21 | // descricao: "teste de descricao da vaga",
22 | // salario: 5000,
23 | // senioridade: "junior"
24 | // })
25 |
26 | // vagaAdd.save()
27 | // .then(() => console.log('vaga salva!'))
28 | // .catch((err) => console.log(err));
29 |
30 | // [GET] que retorna todas as vagas do banco de dados
31 | app.get('/vagas', (req, res) => {
32 | // Find --> retorna uma lista de documentos(dados) de acordo com o filtro
33 | Vaga.find()
34 | .then((vagas) => {
35 | console.log(vagas);
36 | res.send(vagas);
37 | })
38 | .catch((err) => console.log(err));
39 | })
40 |
41 | // [GET] que retorna todas as vagas do banco de dados
42 | app.get('/vagaslista', async (req, res) => {
43 | // Find --> retorna uma lista de documentos(dados) de acordo com o filtro
44 | const vagas = await Vaga.find();
45 | console.log(vagas);
46 | res.send(vagas);
47 | })
48 |
49 | // [GET] que retorna a vaga por id
50 | app.get('/vagas/findById/:id', async (req, res) => {
51 | const vagaById = await Vaga.findOne({ _id: req.params.id })
52 | res.send(vagaById);
53 | })
54 |
55 | // [GET] que retorna a vaga por titulo
56 | app.get('/vagas/findByTitulo/:titulo', async (req, res) => {
57 | const vagaByTitulo = await Vaga.find({ titulo: req.params.titulo })
58 | res.send(vagaByTitulo);
59 | })
60 |
61 | // [DELETE] exclui um item por id
62 | app.delete('/vagas/delete/:id', async (req, res) => {
63 | await Vaga.deleteOne({ _id: req.params.id });
64 | res.status(200).send({
65 | message: 'Excluido com sucesso',
66 | })
67 | })
68 |
69 |
70 | // [POST] adiciona uma nova vaga
71 | app.post('/vagas/add', async (req, res) => {
72 | // create = cria um novo documento no banco de dados baseado com o body recebido pelo cliente
73 | await Vaga.create(req.body)
74 | .then(() => {
75 | res.status(201).send({
76 | message: 'Criado com sucesso'
77 | })
78 | })
79 | .catch((err) => {
80 | res.status(400).send({
81 | error: 'Algo deu errado, tente novamente'
82 | })
83 | console.log(err);
84 | })
85 | })
86 |
87 |
88 | // [PUT] atualiza uma vaga de acordo com o id e o body recebido
89 | app.put('/vagas/update/:id', async (req, res) => {
90 | await Vaga.updateOne({ _id: req.params.id }, req.body)
91 | .then(() => {
92 | res.status(200).send({
93 | message: 'Atualizado com sucesso',
94 | })
95 | .catch((err) => {
96 | console.log(err),
97 | res.status(400).send({
98 | error: err
99 | })
100 | })
101 | })
102 | })
103 |
104 |
105 |
106 |
107 |
108 | const port = 3000;
109 | app.listen(port, () => {
110 | console.log('App rodando na porta 3000');
111 | })
112 |
113 |
114 |
--------------------------------------------------------------------------------
/projeto-vagas-front/src/pages/Cadastro/Cadastro.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import './Cadastro.css';
3 | import Api from '../../api/api';
4 |
5 | const Cadastro = (props) => {
6 | const history = props.history;
7 |
8 | const handleSubmit = async (evento) => {
9 | evento.preventDefault();
10 | // pego o valor que usuario digitou nos inputs
11 | const titulo = evento.target.titulo.value;
12 | const salario = evento.target.salario.value;
13 | const descricao = evento.target.descricao.value;
14 | const senioridade = evento.target.senioridade.value;
15 |
16 | const vaga = {
17 | titulo,
18 | salario: parseInt(salario),
19 | descricao,
20 | senioridade
21 | }
22 |
23 | try {
24 | const response = await Api.fetchPost(vaga)
25 | const result = await response.json();
26 | alert(result.message);
27 | history.push('/'); // forca o historico a voltar para a rota de / => home
28 | } catch(error) {
29 | console.log(error);
30 | }
31 |
32 | }
33 |
34 | return (
35 |
36 |
37 |
38 |
39 |
40 |
Cadastro de Vagas
41 |
42 |
43 |
44 |
45 |
85 |
86 |
87 |
88 | )
89 | }
90 |
91 | export default Cadastro
92 |
--------------------------------------------------------------------------------
/projeto-vagas-front/README.md:
--------------------------------------------------------------------------------
1 | # Getting Started with Create React App
2 |
3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
4 |
5 | ## Available Scripts
6 |
7 | In the project directory, you can run:
8 |
9 | ### `yarn start`
10 |
11 | Runs the app in the development mode.\
12 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
13 |
14 | The page will reload if you make edits.\
15 | You will also see any lint errors in the console.
16 |
17 | ### `yarn test`
18 |
19 | Launches the test runner in the interactive watch mode.\
20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
21 |
22 | ### `yarn build`
23 |
24 | Builds the app for production to the `build` folder.\
25 | It correctly bundles React in production mode and optimizes the build for the best performance.
26 |
27 | The build is minified and the filenames include the hashes.\
28 | Your app is ready to be deployed!
29 |
30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
31 |
32 | ### `yarn eject`
33 |
34 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!**
35 |
36 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
37 |
38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
39 |
40 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
41 |
42 | ## Learn More
43 |
44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
45 |
46 | To learn React, check out the [React documentation](https://reactjs.org/).
47 |
48 | ### Code Splitting
49 |
50 | This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
51 |
52 | ### Analyzing the Bundle Size
53 |
54 | This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
55 |
56 | ### Making a Progressive Web App
57 |
58 | This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
59 |
60 | ### Advanced Configuration
61 |
62 | This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
63 |
64 | ### Deployment
65 |
66 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
67 |
68 | ### `yarn build` fails to minify
69 |
70 | This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
71 |
--------------------------------------------------------------------------------
/aula-react-01/meu-app/README.md:
--------------------------------------------------------------------------------
1 | # Getting Started with Create React App
2 |
3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
4 |
5 | ## Available Scripts
6 |
7 | In the project directory, you can run:
8 |
9 | ### `yarn start`
10 |
11 | Runs the app in the development mode.\
12 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
13 |
14 | The page will reload if you make edits.\
15 | You will also see any lint errors in the console.
16 |
17 | ### `yarn test`
18 |
19 | Launches the test runner in the interactive watch mode.\
20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
21 |
22 | ### `yarn build`
23 |
24 | Builds the app for production to the `build` folder.\
25 | It correctly bundles React in production mode and optimizes the build for the best performance.
26 |
27 | The build is minified and the filenames include the hashes.\
28 | Your app is ready to be deployed!
29 |
30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
31 |
32 | ### `yarn eject`
33 |
34 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!**
35 |
36 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
37 |
38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
39 |
40 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
41 |
42 | ## Learn More
43 |
44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
45 |
46 | To learn React, check out the [React documentation](https://reactjs.org/).
47 |
48 | ### Code Splitting
49 |
50 | This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
51 |
52 | ### Analyzing the Bundle Size
53 |
54 | This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
55 |
56 | ### Making a Progressive Web App
57 |
58 | This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
59 |
60 | ### Advanced Configuration
61 |
62 | This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
63 |
64 | ### Deployment
65 |
66 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
67 |
68 | ### `yarn build` fails to minify
69 |
70 | This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
71 |
--------------------------------------------------------------------------------
/aula-05/aula-05.md:
--------------------------------------------------------------------------------
1 |
2 | # aula 5 - Client Side Storage, Callbacks, Promisses, Fetch e Funções Assincronas
3 |
4 | ## Client-side storage
5 |
6 | Os navegadores modernos oferecem suporte a várias maneiras de os sites armazenarem dados no computador do usuário - com a permissão do usuário - e depois recuperá-los quando necessário. Isso permite que você mantenha dados para armazenamento de longo prazo, salve sites ou documentos para uso offline, retenha configurações específicas do usuário para seu site e muito mais.
7 |
8 | Para entender mais consulte a [documentação oficial.](https://developer.mozilla.org/pt-BR/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage)
9 |
10 | ### LocalStorage
11 |
12 | A propriedade `localStorage` permite acessar um objeto Storage local. A localStorage é similar ao `sessionStorage`. A única diferença é que enquanto os dados armazenados no localStorage não expiram, os dados no `sessionStorage` tem os seus dados limpos ao expirar a sessão da página — ou seja, quando a página (aba ou janela) é fechada.
13 |
14 | ```js
15 | // Salva os dados na localStorage
16 | localStorage.setItem('chave', 'valor');
17 |
18 | // Obtém os dados da localStorage
19 | var data = localStorage.getItem('chave');
20 | ```
21 |
22 | ### SessionStorage
23 |
24 | A propriedade sessionStorage permite acessar um objeto tipo session [Storage](https://developer.mozilla.org/pt-BR/docs/Web/API/Storage). A sessionStorage é similar ao localStorage, a única diferença é que enquanto os dados armazenados no localStorage não expiram, os dados no sessionstorage tem os seus dados limpos ao expirar a sessão da página. A sessão da página dura enquanto o browser está aberto e se mantém no recarregamento da página.
25 |
26 | Sintaxe
27 |
28 | ```js
29 | // Salva os dados na sessionStorage
30 | sessionStorage.setItem('chave', 'valor');
31 |
32 | // Obtém os dados da sessionStorage
33 | var data = sessionStorage.getItem('chave');
34 | ```
35 |
36 | ## JSON
37 |
38 | **JavaScript Object Notation**
39 |
40 | `JSON` é um formato baseado em texto padrão para representar dados estruturados com base na sintaxe do objeto JavaScript. É comumente usado para transmitir dados em aplicativos da Web (por exemplo, enviar alguns dados do servidor para o cliente, para que possam ser exibidos em uma página da Web ou vice-versa). Saiba mais sobre o json na [documentação oficial](https://developer.mozilla.org/pt-BR/docs/Learn/JavaScript/Objects/JSON).
41 |
42 | Estrutura do `JSON`.
43 |
44 | Conforme descrito acima, um JSON é uma string cujo formato se parece muito com o formato literal do objeto JavaScript. Você pode incluir os mesmos tipos de dados básicos dentro do JSON, como em um objeto JavaScript padrão — strings, números, matrizes, booleanos e outros literais de objeto. Isso permite que você construa uma hierarquia de dados, assim:
45 |
46 | ```js
47 | {
48 | "filmes": [
49 | "nome": "Vingadores",
50 | "genero": "Ação",
51 | ]
52 | }
53 | ```
54 |
55 | Transformando objetos em JSON e vice-versa
56 |
57 | `JSON.stringify` transforma um objeto JavaScript em texto JSON e armazena esse texto JSON em uma string, por exemplo:
58 |
59 | ```js
60 | var my_object = { key_1: "some text", key_2: true, key_3: 5 };
61 |
62 | var object_as_string = JSON.stringify(my_object);
63 | // "{"key_1":"some text","key_2":true,"key_3":5}"
64 |
65 | typeof(object_as_string);
66 | // "string"
67 | ```
68 |
69 | `JSON.parse` transforma uma string de texto JSON em um objeto JavaScript, por exemplo:
70 |
71 | ```js
72 | var object_as_string_as_object = JSON.parse(object_as_string);
73 | // {key_1: "some text", key_2: true, key_3: 5}
74 |
75 | typeof(object_as_string_as_object);
76 | // "object"
77 | ```
78 |
79 | ## Promisses
--------------------------------------------------------------------------------
/projeto-vagas-front/src/pages/Edicao/Edicao.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from "react";
2 | import Api from "../../api/api";
3 |
4 | const Edicao = (props) => {
5 | const _id = props.match.params.id;
6 | const history = props.history;
7 | // criacao do estado
8 | const [vaga, setVaga] = useState({});
9 |
10 | // o use effect chama a funcao getById que retorna o objeto do backend de acordo com o id
11 | useEffect(() => {
12 | getVagaById();
13 | }, []);
14 |
15 | const getVagaById = async () => {
16 | // faz uma chamada para api para pegar o objeto de acordo com o id.
17 | const response = await Api.fetchGetById(_id);
18 | const result = await response.json();
19 | // atualizo o meu estado de acordo com o resultado.
20 | setVaga(result);
21 | };
22 |
23 | const handleFieldsChange = (event) => {
24 | // clono meu objeto do estado
25 | const campos = { ...vaga };
26 | // para cada input eu atualizo o seu respectivo valor no obj
27 | campos[event.target.name] = event.target.value;
28 |
29 | // atualizo o meu estado com esse novo objeto.
30 | setVaga(campos);
31 | };
32 |
33 | const handleSubmit = async (evento) => {
34 | evento.preventDefault();
35 | // faco uma copia do estado com obj atualizado.
36 | const vagaObj = { ...vaga };
37 | // transforma o salario em inteiro.
38 | vagaObj.salario = parseInt(vagaObj.salario);
39 | try {
40 | const response = await Api.fetchPut(vagaObj, _id);
41 | const result = await response.json();
42 | alert(result.message);
43 | history.push("/"); // forca o historico a voltar para a rota de / => home
44 | } catch (error) {
45 | console.log(error);
46 | }
47 | };
48 |
49 | return (
50 |
51 |
52 |
53 |
54 |
55 |
Edicao da Vagaa
56 |
57 |
58 |
59 |
60 |
132 |
133 |
134 |
135 | );
136 | };
137 |
138 | export default Edicao;
139 |
--------------------------------------------------------------------------------
/aula-02/script.js:
--------------------------------------------------------------------------------
1 | // a tarefa ela precisa ter 3 campos
2 | // texto da tarefa, checked: true ou false, 'id'
3 | // Modelo de dados da tarefa
4 | // let array = [{
5 | // text: 'tarefa',
6 | // checked: false,
7 | // id: 1234512315123
8 | // }]
9 | let todoItems = [];
10 |
11 | // Funcao que adiciona uma tarefa individual dentro do array das tarefas
12 | const addTodo = (text) => {
13 | // objeto da tarefa
14 | const todo = {
15 | text: text,
16 | checked: false,
17 | id: Date.now()
18 | }
19 | todoItems.push(todo);
20 | renderTodo(todo);
21 | console.log(todoItems);
22 | }
23 |
24 |
25 | // parte responsavel mapeamento do formulario do html
26 | const form = document.querySelector('.js-form');
27 | console.log(form);
28 |
29 | // escutar o evento de submit do formulario
30 | form.addEventListener('submit', (evento) => {
31 | evento.preventDefault();
32 | console.log(evento);
33 |
34 | // selecionar o element input
35 | const input = document.querySelector('.js-todo-input');
36 |
37 | // seleciona o value/texto do elemento input
38 | const text = input.value;
39 | console.log(text);
40 |
41 | if (text !== '') {
42 | // envia o texto digitado para a funcao addTodo que espera um texto para adicionar na lista
43 | addTodo(text);
44 | // limpa o input
45 | input.value = '';
46 | // da o foco no input
47 | input.focus();
48 | }
49 | })
50 |
51 |
52 | // Funcao que renderiza os Todos na tela
53 | const renderTodo = (todo) => {
54 | addToStorage();
55 |
56 | // mapear a lista de onde deve ser incluida a tarefa
57 | const list = document.querySelector('.js-todo-list');
58 | console.log(list);
59 |
60 | // verifica se existe o elemento no dom atravez da seu identificador (data-key)
61 | const todoExist = document.querySelector(`[data-key='${todo.id}']`);
62 | // retorna o elemento html que ele achou no DOM
63 | console.log('elemento que achou', todoExist);
64 |
65 | if(todo.deleted) {
66 | todoExist.remove();
67 | return
68 | }
69 |
70 | // criando um li no DOM
71 | const listItem = document.createElement("li");
72 |
73 |
74 | // IF do jeito velho
75 | // const isCheck = '';
76 | // if(todo.checked) {
77 | // isCheck = 'done';
78 | // }else {
79 | // isCheck = '';
80 | // }
81 |
82 | // if ternario
83 | const isCheck = todo.checked ? 'done' : '';
84 |
85 | // adiciona a classe todo-item ao elemento li recem criado
86 | listItem.setAttribute('class', `todo-item ${isCheck}`);
87 |
88 | // adiciona o atributo customizado 'key' no li recem criado
89 | listItem.setAttribute('data-key', todo.id);
90 |
91 | listItem.innerHTML = `
92 |
93 |
94 | ${todo.text}
95 |
100 | `;
101 |
102 | // quando voce achar o elemento nao inclui ele na ul ou seja nao faz o append, pelo contrario substitui
103 | if(todoExist) {
104 | // subistuir o elemento
105 | list.replaceChild(listItem, todoExist)
106 | } else {
107 | list.append(listItem);
108 | }
109 | }
110 |
111 | const toogleDone = (id) => {
112 | // eu preciso encontrar o indice do elemento na minha lista
113 |
114 | // const index = todoItems.findIndex((todo) => {
115 | // return todo.id === id
116 | // });
117 |
118 | // forma simplificada
119 | const index = todoItems.findIndex(todo => todo.id === id);
120 | todoItems[index].checked = !todoItems[index].checked;
121 | console.log(todoItems[index]);
122 |
123 | //renderizar a tarefa apos a mudanca do concluido
124 | renderTodo(todoItems[index]);
125 | }
126 |
127 | const deleteTodo = (id) => {
128 | // preciso encontrar o indice do elemento para excluir
129 | const index = todoItems.findIndex(todo => todo.id === id);
130 | // vai me retornar o indice da tarefa que eu desejo excluir
131 | const todoForDelete = {
132 | deleted: true,
133 | ...todoItems[index]
134 | }
135 | // remove um item da lista de acordo com o indice onde comeca a excluisa e a quantidade a ser excluido
136 | todoItems.splice(index, 1);
137 |
138 | renderTodo(todoForDelete);
139 | }
140 |
141 |
142 | // local = uma forma de armazenar dados na maquina/browser do usuario.
143 | // adicionar a nossa todoItems no localstorage
144 | // chave para identificar o nome da sua 'tabela' no local storage
145 | // JSON - Javascript Object Notation = uma forma de escrever dados parecido com um objeto do javascript
146 | // pego o que eu adicionei no array e adiciono tambem no meu localstorage.
147 | const addToStorage = () => {
148 | localStorage.setItem('todoList', JSON.stringify(todoItems));
149 | }
150 |
151 |
152 | // a gente precisa pegar o array que esta no localstorage
153 | const renderListStorage = () => {
154 | // pego em formato JSON string
155 | const listStorage = localStorage.getItem('todoList');
156 | // transformar o JSON string para value javascrit ou seja array de objetos javascript
157 | if(listStorage) {
158 | // estou atualizando a variavel todoItems com os valores que estao no localstorage
159 | todoItems = JSON.parse(listStorage);
160 | todoItems.map((tarefa) => {
161 | renderTodo(tarefa);
162 | })
163 | }
164 | }
165 |
166 | renderListStorage();
--------------------------------------------------------------------------------
/projeto-vaga/front-end/index.js:
--------------------------------------------------------------------------------
1 | const urlApi = 'http://localhost:3000/vagas';
2 | const lista = document.getElementById('lista');
3 | let edicao = false;
4 | let idEdicao = 0;
5 |
6 |
7 |
8 | // Faz uma requisicao do tipo [GET] que recebe todas as vagas cadastradas.
9 | const getVagas = async () => {
10 | const response = await fetch(urlApi); // faz um req do tipo [GET] para a api
11 | // data = uma lista (array de objetos) com as tarefas pre cadastra
12 | const data = await response.json();
13 | console.log(data);
14 |
15 | // iteramos esse array passando item por item e renderizandop na tela
16 | data.map((vaga) => {
17 | lista.insertAdjacentHTML('beforeend', `
18 |
19 |
20 |
21 | ${vaga.titulo}
22 |
23 |
24 |
Descricao: ${vaga.descricao}
25 |
Salario: R$${vaga.salario}
26 |
Seniridade: ${vaga.senioridade}
27 |
28 |
29 |
30 |
31 |
32 | `)
33 | })
34 | }
35 | getVagas();
36 |
37 |
38 |
39 |
40 | // Funcao generica de submit, serve para POST e PUT
41 | const submitForm = async (evento) => {
42 | // previne a pagina de atualizar devido ao evento de submit do botao ter sido executado
43 | evento.preventDefault();
44 |
45 | // precisamos pegar os valores que o usuario preenche no formulario
46 | // buscar o input e buscar o seu value.
47 | let titulo = document.getElementById('titulo');
48 | let descricao = document.getElementById('descricao');
49 | let salario = document.getElementById('salario');
50 | let senioridade = document.getElementById('senioridade');
51 |
52 | // adicionamos os valores dos inputs em campos do nosso objeto vaga
53 | const vaga = {
54 | titulo: titulo.value,
55 | descricao: descricao.value,
56 | salario: parseInt(salario.value),
57 | senioridade: senioridade.value
58 | }
59 |
60 | // verificamos se esta ou nao no modo de edicao, se nao estiver dispara o POST
61 | // se estiver dispara o PUT
62 | if(!edicao) {
63 | // estamos configurando a nossa requisicao antes dela ser disparada
64 | const request = new Request(`${urlApi}`, {
65 | method: 'POST',
66 | body: JSON.stringify(vaga),
67 | headers: new Headers({
68 | 'Content-Type': 'application/json'
69 | })
70 | })
71 |
72 | // chamamos a funcao fetch de forma assincrona de acordo com as nossas configuracoes anteriores
73 | const response = await fetch(request);
74 | // pegamos o resultado do fetch assincrono e acessamos o body no formato json
75 | const result = await response.json();
76 |
77 | if(result) {
78 | getVagas();
79 | }
80 |
81 | } else {
82 | // Configuramos o request do PUT
83 | // Nesse caso precisamos enviar o id na requisicao, repare que estamos pegando uma variavel
84 | // chamada idEdicao, essa variavel é atualizada com o id da vaga quando é clicado o botao editar
85 | const request = new Request(`${urlApi}/${idEdicao}`, {
86 | method: 'PUT',
87 | body: JSON.stringify(vaga),
88 | headers: new Headers({
89 | 'Content-Type': 'application/json'
90 | })
91 | })
92 |
93 | // chamamos a funcao fetch de forma assincrona de acordo com as nossas configuracoes anteriores
94 | const response = await fetch(request);
95 | // pegamos o resultado do fetch assincrono e acessamos o body no formato json
96 | const result = await response.json();
97 |
98 | // verifica se houve retorno da api, caso sim, manda renderizar as vagas novamente.
99 | if(result) {
100 | edicao = false;
101 | getVagas();
102 | }
103 | }
104 |
105 |
106 | //limpamos os camos atualizando os seus values no input com o valor string vazia.
107 | titulo.value = '';
108 | descricao.value = '';
109 | salario.value = '';
110 | senioridade.value = '';
111 |
112 | // limpa a lista do html para poder ser populada novamente com os valores do getVagas();
113 | lista.innerHTML = '';
114 | }
115 |
116 | // funcao onde enviamos um id e ela nos retorna o objeto da vaga individual por id.
117 | const getVagaById = async (id) => {
118 | const response = await fetch(`${urlApi}/${id}`);
119 | return vaga = response.json();
120 | }
121 |
122 | // ao clicar no botao editar chamamos essa funcao putVaga
123 | // ela habilita o modo de edicao setando true e seta o id da edicao
124 | // alem disso ela recebe o objeto da vaga individual de acordo com esse id e popula os campos do html com esses valores
125 | const putVaga = async (id) => {
126 | edicao = true;
127 | idEdicao = id;
128 |
129 | // recebemos o objeto da vaga de acordo com o seu id
130 | const vaga = await getVagaById(id);
131 |
132 | // salvamos os elementos do html para poder manipular.
133 | let tituloEl = document.getElementById('titulo');
134 | let descricaoEl = document.getElementById('descricao');
135 | let salarioEl = document.getElementById('salario');
136 | let senioridadeEl = document.getElementById('senioridade');
137 |
138 | // preenchemos os campos do html de acordo com o que estava no objeto.
139 | tituloEl.value = vaga.titulo;
140 | descricaoEl.value = vaga.descricao;
141 | salarioEl.value = vaga.salario;
142 | senioridadeEl.value = vaga.senioridade
143 |
144 | }
145 |
146 |
147 | // Funcao que exclui uma vaga por id
148 | const deleteVaga = async (id) => {
149 | // disparamos ums requisicao do tipo [DELETE] para a rota /vagas/id
150 | const request = new Request(`${urlApi}/${id}`, {
151 | method: 'DELETE',
152 | })
153 | const response = await fetch(request);
154 | const data = await response.json();
155 | console.log(data.message);
156 |
157 | lista.innerHTML = '';
158 | getVagas();
159 | }
160 |
161 |
--------------------------------------------------------------------------------
/aula-02/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Aula 02
9 |
10 |
11 |
12 |
13 |
Lista de tarefas
14 |
18 |
19 |
20 |
21 |
24 |
Adicione uma nova Tarefa
25 |
Por favor cadastre uma nova tarefa !
26 |
27 |
28 |
29 |
35 |
36 |
37 |
--------------------------------------------------------------------------------
/materias/javascript/exercicios/exercicios-revisao-js.md:
--------------------------------------------------------------------------------
1 | # Exercícios de JavaScript
2 |
3 | > Essa lista tem o intuito de ajudar você a treinar os conteúdos de JavaScript, ela será separada em três partes, **de boas**, **meiota**, **mei treta**, não se preocupe, não estamos te avaliando, faça o máximo que conseguir, o importante é fazer, não esqueça de tirar as dúvidas com o professor e com os seus colegas, provavelmente você vai ter que pesquisar como fazer algumas coisas em JS, tente sempre pesquisar antes de perguntar, utilize a documentação do MDN para isso: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript. Bom trabalho a todos e todas <3
4 |
5 | ## De boas
6 |
7 | 1. Implemente um programa que escreve na tela a frase "O primeiro programa a gente nunca esquece!"
8 |
9 | 2. Elabore um programa que escreve seu nome completo na primeira linha, seu endereço na segunda e o CEP e telefone na terceira.
10 |
11 | 3. Faça um programa que mostre na tela uma letra de música que você gosta (Se você utilizar template string o console obedece a quebra de linha).
12 |
13 | 4. Você foi contratado ou contratada por uma escola pra fazer o sistema de boletim dos alunos.Como primeiro passo, escreva um programa que produza a seguinte saída:
14 | ```
15 | ALUNO (A) NOTA
16 | ========= ====
17 | ALINE 9.0
18 | MÁRIO DEZ
19 | SÉRGIO 4.5
20 | SHIRLEY 7.0
21 | ```
22 | 5. Faça um programa de cadastro de clientes que mostre um menu de opções e permita com que a pessoa escolha umas das opções, exibindo qual foi a opção escolhida.
23 |
24 | 6. Escreva um programa que receba dois valores digitados pelo usuário(Utilize o objeto Math para arredondar o calculo):
25 | * Quantidade de vida de um monstro (entre 10 e 50);
26 | * Valor do ataque do jogador por turno (entre 5 e 10);
27 | * Baseado nos valores digitados, exiba a quantidade de turnos que o jogador irá demorar para conseguir derrotar o monstro.
28 | * O jogador irá derrotar o monstro em 8 turnos.
29 |
30 | 7. E os 10% do garçom?
31 | * Defina uma variável para o valor de uma refeição que custou R$ 42,54;
32 | * Defina uma variável para o valor da taxa de serviço que é de 10%;
33 | * Defina uma variável que calcula o valor total da conta e exiba-o no console com essa formatação: R$ 9999.99.
34 | 8. Qual o valor do troco?
35 | * Defina uma variável para o valor de uma compra que custou R$100,98;
36 | * Defina uma variável para o valor que o cliente pagou R$150,00;
37 | * Defina uma variável que calcula o valor do troco e exiba-o no console com o valor final arredondado.
38 | 9. Você está na flor da idade?
39 | * Defina uma variável para o valor do ano do nascimento;
40 | * Defina uma variável para o valor do ano atual;
41 | * Defina uma variável que calcula o valor final da idade da pessoa;
42 | * Exiba uma mensagem final dizendo a idade da pessoa e a mensagem "Você está na flor da idade".
43 | 10. Conversor de moedas: Crie um programa que solicite um um valor em real ao usuário e converta esse valor, para:
44 | * DOLAR
45 | * EURO
46 | * LIBRA ESTERLINA
47 | * DÓLAR CANADENSE
48 | * PESO ARGENTINO
49 | * PESO CHILENO
50 |
51 | Para esse exercício você precisará realizar uma pesquisa para saber a cotação de cada moeda em real. Mostrar o resultado no formato U$9999.99
52 |
53 | ## Meiota
54 |
55 | 11. Faça um programa que pergunte ao usuário um número e valide se o numero é par ou impar:
56 | * Crie uma variável para receber o valor, com conversão para int
57 | * Para um número ser par, a divisão dele por 2 tem que dar resto 0
58 |
59 | 12. Faça um script que peça um valor e mostre na tela se o valor é positivo ou negativo e implemente a funcionalidade de não aceitar o número 0, no prompt.
60 |
61 | 13. Faça um programa que peça dois números, imprima o maior deles ou imprima "Numeros iguais" se os números forem iguais.
62 |
63 | 14. Crie um programa em JavaScript que peça a nota do aluno, que deve ser um number entre 0.00 e 10.0
64 | * Se a nota for menor que 6.0, deve exibir a nota F.
65 | * Se a nota for de 6.0 até 7.0, deve exibir a nota D.
66 | * Se a nota for entre 7.0 e 8.0, deve exibir a nota C.
67 | * Se a nota for entre 8.0 e 9.0, deve exibir a nota B.
68 | * Por fim, se for entre 9.0 e 10.0, deve exibir um belo de um A.
69 |
70 | 15. Reajuste salarial: As empresas @.com resolveram dar um aumento de salário aos seus colaboradores e lhe contrataram para desenvolver o programa que calculará os reajustes.Faça um programa que recebe o salário de um colaborador e o reajuste segundo o seguinte critério, baseado no salário atual:
71 |
72 | * salários até R$ 280,00 (incluindo) : aumento de 20%
73 |
74 | * salários entre R\$ 280,00 e R$ 700,00 : aumento de 15%
75 |
76 | * salários entre R\$ 700,00 e R$ 1500,00 : aumento de 10%
77 |
78 | * salários de R$ 1500,00 em diante : aumento de 5%
79 |
80 | Após o aumento ser realizado, informe na tela:
81 |
82 | * o salário antes do reajuste;
83 |
84 | * o percentual de aumento aplicado;
85 |
86 | * o valor do aumento;
87 |
88 | * o novo salário, após o aumento.
89 |
90 | 16. Crie um programa onde o usuário possa digitar vários valores numéricos e cadastre-os em uma lista. Caso o número já esteja lá dentro, ele não será adicionado. No final, serão exibidos todos os valores únicos digitados, em ordem crescente.
91 |
92 | 17. Utilizando laço imprima a tabuada do 8 na tela.
93 |
94 | 18. Agora imprima todas as tabuadas do número 1 ao 10.
95 |
96 | ## Mei treta
97 |
98 | 19. Faça um programa que tenha uma função chamada área(), que receba as dimensões de um terreno retangular (largura e comprimento)
99 | e mostre a área do terreno:
100 |
101 | 20. Faça um programa que tenha uma função chamada voto() que vai receber como parâmetro o ano de nascimento de uma pessoa, retornando um valor literal indicando se uma pessoa tem voto NEGADO, OPCIONAL ou OBRIGATÓRIO nas eleições:
102 |
103 | 21. Jogo da adivinhação: Escreva um programa que faça o computador “pensar” em um número inteiro entre 0 e 10 e peça para o usuário tentar descobrir qual foi o número escolhido pelo computador. O programa deverá escrever na tela se o usuário venceu ou perdeu.
104 |
105 | 22. Caixa eletrônico: Faça um Programa para um caixa eletrônico. O programa deverá perguntar ao usuário a valor do saque e depois informar quantas notas de cada valor serão fornecidas. As notas disponíveis serão as de 1, 5, 10, 50 e 100 reais. O valor mínimo é de 10 reais e o máximo de 600 reais. O programa não deve se preocupar com a quantidade de notas existentes na máquina.
106 |
107 | * Exemplo 1: Para sacar a quantia de 256 reais, o programa fornece duas notas de 100, uma nota de 50, uma nota de 5 e uma nota de 1;
108 |
109 | * Exemplo 2: Para sacar a quantia de 399 reais, o programa fornece três notas de 100, uma nota de 50, quatro notas de 10, uma nota de 5 e quatro notas de 1.
110 |
111 | 23. Jogo Jokenpô: Utilizando os conceitos aprendidos até estruturas de repetição, crie um programa que jogue pedra, papel e tesoura (Jokenpô) com você.
112 | - Permitir que eu decida quantas rodadas iremos fazer;
113 | - Ler a minha escolha (Pedra, papel ou tesoura);
114 | - Decidir de forma aleatória a decisão do computador;
115 | - Mostrar quantas rodadas cada jogador ganhou;
116 | - Determinar quem foi o grande campeão de acordo com a quantidade de vitórias de cada um (computador e jogador);
117 | - Perguntar se o Jogador quer jogar novamente, se sim inicie volte a escolha de quantidade de rodadas, se não finalize o
118 | programa.
119 |
120 | 24. Jogo de dados: Utilizando objetos, crie um programa onde jogadores joguem um dado e tenham resultados aleatórios.
121 |
122 | O programa tem que:
123 |
124 | - Perguntar quantas rodadas você quer fazer;
125 | - Perguntar quantos jogadores vão jogar;
126 | - Criar um objeto pra cada jogador com nome e número tirado;
127 | - Guarda todos os objetos em uma lista;
128 | - Ordenar esses objetos, sabendo que o vencedor tirou o maior número no dado.
129 | - Mostrar no final qual jogador ganhou mais rodadas e foi o grande campeão.
--------------------------------------------------------------------------------
/aula-01/aula-01.md:
--------------------------------------------------------------------------------
1 | # Javascript
2 |
3 | - Linguagem criada em 1995 por Brendan Eich
4 | - Criou e batizou a linguagem de LiveScript, com objetivo de utilizá-la dentro de um novo navegador que estava sendo desenvolvido pela Netscape
5 | - Posteriormente, teve o seu nome alterado para Javascript
6 |
7 | ## Características do Javascript
8 |
9 | - Tipagem Dinâmica (Dinamically Typed) - Não precisamos especificar o TIPO de uma variável no momento de declará-la. Além disso, é possível alterar o tipo que uma variável recebe durante a execução do código.
10 |
11 | ```javascript
12 | let number = 10;
13 |
14 | console.log(number);
15 | console.log(typeof number);
16 |
17 | number = 'uma string';
18 |
19 | console.log(number);
20 | console.log(typeof number);
21 | ```
22 |
23 | - Funções de Primeira Classe (First Class Functions) - No Javascript, funcões são tratadas como valores, assim como números, strings, booleans, etc. Por isso, conseguimos fazer com que variáveis recebam funções como valor e até podemos passar funções como argumento para outras funções (callback function)
24 |
25 | ```javascript
26 | function soma(numero1, numero2) {
27 | return numero1 + numero2;
28 | } // Named function
29 |
30 | const soma2 = (num1, num2) => {
31 | return num1 + num2;
32 | }; // Function expression (variável recebendo uma função como valor)
33 | ```
34 |
35 | - Hoisting: Antes de executar um código, o javascript pega TODAS as funções e declarações de variáveis e coloca elas no início do arquivo. Isso nos permite, por exemplo, utilizar funções antes de terem sido criadas dentro do nosso arquivo
36 |
37 | ```javascript
38 | console.log(soma(10, 5)); // 15
39 |
40 | function soma(numero1, numero2) {
41 | return numero1 + numero2;
42 | }
43 |
44 | console.log(soma2(10, 10)) // ReferenceError: Cannot access 'soma2' before initialization (Percebam que neste erro, o Javascript já sabe que essa variável existe graças ao Hoisting, mas ele não permite que ela seja acessada antes da linha em que ela de fato é inicializada)
45 |
46 | const soma2 = (num1, num2) => {
47 | return num1 + num2;
48 | };
49 | ```
50 |
51 | - Declaração X Inicialização de variáveis
52 |
53 | ```javascript
54 | const num = 10; // Declarada E Inicializada!!
55 |
56 | let variavelDeclarada; // Declarar uma variável
57 | variavelDeclarada = 'uma string'; // Inicializar uma variável (atribuir um valor)
58 | variavelDeclarada = [1, 2, 3, 4]; // Reatribuir valor (mudar valor de uma variável já inicializada)
59 | ```
60 |
61 | - Callback Functions - Funções que recebem outras funções como argumento (lembrar da característica do Javascript de trabalhar com "Funções de Primeira Classe")
62 |
63 | - Set Timeout
64 |
65 | ```javascript
66 | // setTimeout é um método que recebe uma função e um número (tempo em milisegundos) como argumento. Após o tempo especificado, o setTimeout executa a função passada
67 | setTimeout(() => {
68 | console.log('estou sendo chamado depois de 5 segundos!!!');
69 | }, 5000); // Depois de 5 segundos, ele vai executar a minha callback e printar o texto acima no console
70 | ```
71 |
72 | - For Each
73 |
74 | ```javascript
75 | const listaDeNumeros = [1, 2, 3, 4, 5, 6];
76 |
77 | listaDeNumeros.forEach((valor, indice, arrayCompleto) => {
78 | console.log(`*****INICIO DA ITERACAO ${indice + 1}*****`);
79 | console.log('Valor de cada Elemento do Array ===> ', valor);
80 | console.log('Indice de cada Elemento do Array ===> ', indice);
81 | console.log('Array completo ===> ', arrayCompleto);
82 | console.log('******************************************');
83 | }); // método de array que itera (faz um loop) em uma lista/array
84 | ```
85 |
86 | - Map
87 |
88 | ```javascript
89 | const listaDeNumeros = [1, 2, 3, 4, 5, 6];
90 | const arrayModificado = listaDeNumeros.map((valor, indice, arrayCompleto) => {
91 | // A CALLBACK PASSADA NO MAP SEMPRE PRECISA RETORNAR ALGUM VALOR!!!!
92 |
93 | console.log('Cada valor do array original -> ', valor);
94 |
95 | return valor + 10; // Vai pegar cara valor do meu array, somar 10 e retornar
96 | }); // método de array que itera em uma lista/array E RETORNA UM NOVO ARRAY MODIFICADO!!!!
97 |
98 | console.log(arrayModificado); // [11, 12, 13, 14, 15, 16]
99 | ```
100 |
101 | - Operadores de Igualdade
102 | - Strict Equality (===) Verifica valor e tipo de dado na comparação
103 |
104 | ```javascript
105 | console.log(2 === '2') // false
106 | console.log('string' === 'string') // true
107 | ```
108 |
109 | - Equality (==) Verifica valor, mas o javascript tenta ignorar o tipo do dado na comparação
110 |
111 | ```javascript
112 | console.log(2 == '2') // true
113 | console.log('' == []) // true
114 | console.log(false == 0) // true
115 | ```
116 |
117 | - Dica: Evitar usar o operador de Equality. Usar sempre o Strict Equals para prevenir possíveis bugs no nosso código (comparações que não deveriam ser verdadeiras acabarem dando true devido a forma de comparação ignorando o tipo do dado)
118 |
119 | ## Exercícios
120 |
121 | - Desafio 1: Precisamos de uma lista somente com os nomes dos diretores de cada filme representado na nossa lista de filmes acima. Crie uma função de nome "getAllDirectorsNames" que receberá um array de filmes como ARGUMENTO, para então retornar esta lista de nomes. Caso o array esteja vazio, a função deverá retornar null
122 |
123 | - Array de Filmes
124 |
125 | ```javascript
126 | const movies = [
127 | {
128 | title: 'The Shawshank Redemption',
129 | year: 1994,
130 | director: 'Frank Darabont',
131 | duration: '2h 22min',
132 | genre: ['Crime', 'Drama'],
133 | score: 9.3
134 | },
135 | {
136 | title: 'The Godfather',
137 | year: 1972,
138 | director: 'Francis Ford Coppola',
139 | duration: '2h 55min',
140 | genre: ['Crime', 'Drama'],
141 | score: 9.2
142 | },
143 | {
144 | title: 'The Godfather: Part II',
145 | year: 1974,
146 | director: 'Francis Ford Coppola',
147 | duration: '3h 22min',
148 | genre: ['Crime', 'Drama'],
149 | score: 9
150 | },
151 | {
152 | title: 'The Dark Knight',
153 | year: 2008,
154 | director: 'Christopher Nolan',
155 | duration: '2h 32min',
156 | genre: ['Action', 'Crime', 'Drama', 'Thriller'],
157 | score: 9
158 | },
159 | {
160 | title: '12 Angry Men',
161 | year: 1957,
162 | duration: '1h 36min',
163 | genre: ['Crime', 'Drama'],
164 | score: 8.9,
165 | director: 'Sidney Lumet',
166 | },
167 | ];
168 | ```
169 |
170 | - Resolução do Desafio 1:
171 |
172 | ```javascript
173 | // Versão com comentários
174 | function getAllDirectorsNames(moviesList) {
175 | // Temos um array de filmes (array de OBJETOS) e precisamos transformá-lo em um array de nomes (array de STRINGS) -- Podemos utilizar o método MAP!!
176 |
177 | if (moviesList.length === 0) { // Se o TAMANHO do meu array for zero
178 | return null;
179 | }
180 |
181 | const listaDeNomes = moviesList.map((cadaFilme) => {
182 | // a veariável "cadaFilme" representa cada um dos filmes (cada OBJETO que está dentro do array)
183 | // console.log(cadaFilme.director);
184 | // SEMPRE PRECISA RETORNAR O QUE QUEREMOS COLOCAR NO ARRAY NOVO!!
185 | return cadaFilme.director; // Estou fazendo a callback do map retornar somente a propriedade "director" de cada filme
186 | });
187 |
188 | return listaDeNomes;
189 | }
190 |
191 | // Versão somente com a solução
192 | function getAllDirectorsNames(moviesList) {
193 | if (moviesList.length === 0) {
194 | return null; // return da função "getAllDirectorsNames"
195 | }
196 |
197 | const listaDeNomes = moviesList.map((cadaFilme) => {
198 | return cadaFilme.director; // Este return é da callback
199 | });
200 |
201 | return listaDeNomes; // return da função "getAllDirectorsNames"
202 | }
203 |
204 | console.log(getAllDirectorsNames(movies)); // Testando nossa função passando nosso array de filmes
205 | console.log(getAllDirectorsNames([])); // Testando nossa função passando um array vazio
206 | ```
207 |
208 | - Desafio 2: Crie uma função "findMoviesByDirector" que receberá como argumento uma String com o nome de um Diretor, e ela deverá retornar uma lista FILTRADA (olha a dica ;-D) contendo somente o NOME dos filmes que foram dirigidos por este diretor.
209 | - Caso Não seja encontrado nenhum filme com o nome do diretor informado, devemos retornar a seguinte String: "Nenhum filme encontrado para o diretor "
210 | - Ex 1: findMoviesByDirector('Henrique Mendes') ---> 'Nenhum filme encontrado para o diretor Henrique Mendes'
211 | - Ex 2: findMoviesByDirector('Christopher Nolan') ---> 'The Dark Knight'
212 |
--------------------------------------------------------------------------------
/materias/javascript/javascript.md:
--------------------------------------------------------------------------------
1 | # Javascript
2 |
3 | - [Exercicios](./exercicios/exercicios-revisao-js.md)
4 |
5 | - Linguagem criada em 1995 por Brendan Eich
6 | - Criou e batizou a linguagem de LiveScript, com objetivo de utilizá-la dentro de um novo navegador que estava sendo desenvolvido pela Netscape
7 | - Posteriormente, teve o seu nome alterado para Javascript
8 |
9 | ## Características do Javascript
10 |
11 | - Tipagem Dinâmica (Dinamically Typed) - Não precisamos especificar o TIPO de uma variável no momento de declará-la. Além disso, é possível alterar o tipo que uma variável recebe durante a execução do código.
12 |
13 | ```javascript
14 | let number = 10;
15 |
16 | console.log(number);
17 | console.log(typeof number);
18 |
19 | number = 'uma string';
20 |
21 | console.log(number);
22 | console.log(typeof number);
23 | ```
24 |
25 | - Funções de Primeira Classe (First Class Functions) - No Javascript, funcões são tratadas como valores, assim como números, strings, booleans, etc. Por isso, conseguimos fazer com que variáveis recebam funções como valor e até podemos passar funções como argumento para outras funções (callback function)
26 |
27 | ```javascript
28 | function soma(numero1, numero2) {
29 | return numero1 + numero2;
30 | } // Named function
31 |
32 | const soma2 = (num1, num2) => {
33 | return num1 + num2;
34 | }; // Function expression (variável recebendo uma função como valor)
35 | ```
36 |
37 | - Hoisting: Antes de executar um código, o javascript pega TODAS as funções e declarações de variáveis e coloca elas no início do arquivo. Isso nos permite, por exemplo, utilizar funções antes de terem sido criadas dentro do nosso arquivo
38 |
39 | ```javascript
40 | console.log(soma(10, 5)); // 15
41 |
42 | function soma(numero1, numero2) {
43 | return numero1 + numero2;
44 | }
45 |
46 | console.log(soma2(10, 10)) // ReferenceError: Cannot access 'soma2' before initialization (Percebam que neste erro, o Javascript já sabe que essa variável existe graças ao Hoisting, mas ele não permite que ela seja acessada antes da linha em que ela de fato é inicializada)
47 |
48 | const soma2 = (num1, num2) => {
49 | return num1 + num2;
50 | };
51 | ```
52 |
53 | - Declaração X Inicialização de variáveis
54 |
55 | ```javascript
56 | const num = 10; // Declarada E Inicializada!!
57 |
58 | let variavelDeclarada; // Declarar uma variável
59 | variavelDeclarada = 'uma string'; // Inicializar uma variável (atribuir um valor)
60 | variavelDeclarada = [1, 2, 3, 4]; // Reatribuir valor (mudar valor de uma variável já inicializada)
61 | ```
62 |
63 | - Callback Functions - Funções que recebem outras funções como argumento (lembrar da característica do Javascript de trabalhar com "Funções de Primeira Classe")
64 |
65 | - Set Timeout
66 |
67 | ```javascript
68 | // setTimeout é um método que recebe uma função e um número (tempo em milisegundos) como argumento. Após o tempo especificado, o setTimeout executa a função passada
69 | setTimeout(() => {
70 | console.log('estou sendo chamado depois de 5 segundos!!!');
71 | }, 5000); // Depois de 5 segundos, ele vai executar a minha callback e printar o texto acima no console
72 | ```
73 |
74 | - For Each
75 |
76 | ```javascript
77 | const listaDeNumeros = [1, 2, 3, 4, 5, 6];
78 |
79 | listaDeNumeros.forEach((valor, indice, arrayCompleto) => {
80 | console.log(`*****INICIO DA ITERACAO ${indice + 1}*****`);
81 | console.log('Valor de cada Elemento do Array ===> ', valor);
82 | console.log('Indice de cada Elemento do Array ===> ', indice);
83 | console.log('Array completo ===> ', arrayCompleto);
84 | console.log('******************************************');
85 | }); // método de array que itera (faz um loop) em uma lista/array
86 | ```
87 |
88 | - Map
89 |
90 | ```javascript
91 | const listaDeNumeros = [1, 2, 3, 4, 5, 6];
92 | const arrayModificado = listaDeNumeros.map((valor, indice, arrayCompleto) => {
93 | // A CALLBACK PASSADA NO MAP SEMPRE PRECISA RETORNAR ALGUM VALOR!!!!
94 |
95 | console.log('Cada valor do array original -> ', valor);
96 |
97 | return valor + 10; // Vai pegar cara valor do meu array, somar 10 e retornar
98 | }); // método de array que itera em uma lista/array E RETORNA UM NOVO ARRAY MODIFICADO!!!!
99 |
100 | console.log(arrayModificado); // [11, 12, 13, 14, 15, 16]
101 | ```
102 |
103 | - Operadores de Igualdade
104 | - Strict Equality (===) Verifica valor e tipo de dado na comparação
105 |
106 | ```javascript
107 | console.log(2 === '2') // false
108 | console.log('string' === 'string') // true
109 | ```
110 |
111 | - Equality (==) Verifica valor, mas o javascript tenta ignorar o tipo do dado na comparação
112 |
113 | ```javascript
114 | console.log(2 == '2') // true
115 | console.log('' == []) // true
116 | console.log(false == 0) // true
117 | ```
118 |
119 | - Dica: Evitar usar o operador de Equality. Usar sempre o Strict Equals para prevenir possíveis bugs no nosso código (comparações que não deveriam ser verdadeiras acabarem dando true devido a forma de comparação ignorando o tipo do dado)
120 |
121 | ## Exercícios
122 |
123 | - Desafio 1: Precisamos de uma lista somente com os nomes dos diretores de cada filme representado na nossa lista de filmes acima. Crie uma função de nome "getAllDirectorsNames" que receberá um array de filmes como ARGUMENTO, para então retornar esta lista de nomes. Caso o array esteja vazio, a função deverá retornar null
124 |
125 | - Array de Filmes
126 |
127 | ```javascript
128 | const movies = [
129 | {
130 | title: 'The Shawshank Redemption',
131 | year: 1994,
132 | director: 'Frank Darabont',
133 | duration: '2h 22min',
134 | genre: ['Crime', 'Drama'],
135 | score: 9.3
136 | },
137 | {
138 | title: 'The Godfather',
139 | year: 1972,
140 | director: 'Francis Ford Coppola',
141 | duration: '2h 55min',
142 | genre: ['Crime', 'Drama'],
143 | score: 9.2
144 | },
145 | {
146 | title: 'The Godfather: Part II',
147 | year: 1974,
148 | director: 'Francis Ford Coppola',
149 | duration: '3h 22min',
150 | genre: ['Crime', 'Drama'],
151 | score: 9
152 | },
153 | {
154 | title: 'The Dark Knight',
155 | year: 2008,
156 | director: 'Christopher Nolan',
157 | duration: '2h 32min',
158 | genre: ['Action', 'Crime', 'Drama', 'Thriller'],
159 | score: 9
160 | },
161 | {
162 | title: '12 Angry Men',
163 | year: 1957,
164 | duration: '1h 36min',
165 | genre: ['Crime', 'Drama'],
166 | score: 8.9,
167 | director: 'Sidney Lumet',
168 | },
169 | ];
170 | ```
171 |
172 | - Resolução do Desafio 1:
173 |
174 | ```javascript
175 | // Versão com comentários
176 | function getAllDirectorsNames(moviesList) {
177 | // Temos um array de filmes (array de OBJETOS) e precisamos transformá-lo em um array de nomes (array de STRINGS) -- Podemos utilizar o método MAP!!
178 |
179 | if (moviesList.length === 0) { // Se o TAMANHO do meu array for zero
180 | return null;
181 | }
182 |
183 | const listaDeNomes = moviesList.map((cadaFilme) => {
184 | // a veariável "cadaFilme" representa cada um dos filmes (cada OBJETO que está dentro do array)
185 | // console.log(cadaFilme.director);
186 | // SEMPRE PRECISA RETORNAR O QUE QUEREMOS COLOCAR NO ARRAY NOVO!!
187 | return cadaFilme.director; // Estou fazendo a callback do map retornar somente a propriedade "director" de cada filme
188 | });
189 |
190 | return listaDeNomes;
191 | }
192 |
193 | // Versão somente com a solução
194 | function getAllDirectorsNames(moviesList) {
195 | if (moviesList.length === 0) {
196 | return null; // return da função "getAllDirectorsNames"
197 | }
198 |
199 | const listaDeNomes = moviesList.map((cadaFilme) => {
200 | return cadaFilme.director; // Este return é da callback
201 | });
202 |
203 | return listaDeNomes; // return da função "getAllDirectorsNames"
204 | }
205 |
206 | console.log(getAllDirectorsNames(movies)); // Testando nossa função passando nosso array de filmes
207 | console.log(getAllDirectorsNames([])); // Testando nossa função passando um array vazio
208 | ```
209 |
210 | - Desafio 2: Crie uma função "findMoviesByDirector" que receberá como argumento uma String com o nome de um Diretor, e ela deverá retornar uma lista FILTRADA (olha a dica ;-D) contendo somente o NOME dos filmes que foram dirigidos por este diretor.
211 | - Caso Não seja encontrado nenhum filme com o nome do diretor informado, devemos retornar a seguinte String: "Nenhum filme encontrado para o diretor "
212 | - Ex 1: findMoviesByDirector('Henrique Mendes') ---> 'Nenhum filme encontrado para o diretor Henrique Mendes'
213 | - Ex 2: findMoviesByDirector('Christopher Nolan') ---> 'The Dark Knight'
214 |
--------------------------------------------------------------------------------
/materias/nodejs/nodejs.md:
--------------------------------------------------------------------------------
1 | # Introdução a nodejs e revisão de JS
2 |
3 | > Node.js não é uma linguagem de programação. Você programa utilizando a linguagem JavaScript, a mesma usada há décadas no client-side das aplicações web. Javascript é uma linguagem de scripting interpretada, embora seu uso com Node.js guarde semelhanças com linguagens compiladas, uma vez que máquina virtual V8 (veja mais adiante) faz etapas de pré-compilação e otimização antes do código entrar em operação. Ou seja, o Node.js interpreta o código JS para que ele possa ser compilado do lado do servidor, criando back-ends proderosos e versáteis.
4 |
5 | ## Passos importantes para iniciar um projeto em node.js
6 |
7 | * Baixe o node.js versão LTS: ;
8 | * Crie uma pasta para o projeto e abra essa pasta no Vs Code;
9 | * Inicializar um projeto node com `npm init` no terminal, isso gera um arquivo package.json, agora toda vez que você baixar uma biblioteca no seu projeto ela vai ficar registrada nesse arquivo;
10 | * Crie um arquvio .gitignore para o Git ignorar alguns arquivos que não precisam ser versionados. Dentro dele coloque esse template: ;
11 | * Instalem a biblioteca nodemon para executar o servidor local como desenvolvedor, no terminal execute `npm i nodemon`;
12 | * Altere os scripts do seu arquivo package.json para esses scripts:
13 |
14 | ```
15 | "scripts": {
16 | "start": "node index",
17 | "dev": "nodemon index"
18 | },
19 | ```
20 |
21 | * Baixe uma biblioteca para solicitar dados do usuário no console, no terminal digite: `npm i prompt-sync`;
22 | * Extensões importantes:
23 | * Bracket Pair Colorizer 2
24 | * ESLint
25 | * Prettier - Code formatter
26 | * Thunder Client
27 | * markdownlint
28 |
29 | * Agora crie um arquivo chamado index.js na raiz da pasta do seu projeto e let's code!
30 |
31 | ## Vamos codificar
32 |
33 | * No arquivo index.js crie o seguinte código:
34 |
35 | ```
36 | const prompt = require("prompt-sync")();
37 |
38 | const nome = prompt("Digite seu nome: ");
39 |
40 | console.log(`Olá, ${nome}, seja bem vindo o fantástico mundo do Node.js!`);
41 | ```
42 |
43 | Para rodar o projeto, por enquanto, não iremos utilizar o nodemon, vamos utilizar direto o node, para isso abra seu terminal e digite: `node index.js`, esse index.js é o nome do seu arquivo, que não necessáriamente precisa ter a extensão `.js`.
44 |
45 | * A declaração de uma variável em JS pode ser feita com três palavras reservadas:
46 | * **var**: Variável global e mutável
47 | * **let**: Variável local e mutável
48 | * **const**: Variável global e imutável
49 |
50 | ### Qual declaração mais iremos usar?
51 |
52 | Para variáveis globais e que não irão ser alteradas durante o nosso código vamos usar sempre `const`, agora para variáveis que serão mutáveis, iremos utilizar `let`, o `var` é pouco usado, pois JS é fracamente tipada e usar `var` pode permitir que você insira qualquer dado em sua variável, o que pode quebrar seu código.
53 |
54 | ### O que é esse require?
55 |
56 | Essa palavra reservada serve para importar bibliotecas baixadas via npm, é importante dizer que você precisa ter a pasta node_modules no seu projeto para que o JS consiga importar a biblioteca.
57 |
58 | ### O que é o console.log?
59 |
60 | Essa função serve para mostra alguma informação no console em forma de log, temos outras formas de mostrar dados no console, você pode se aventurar em outras formas nessa documentação: . Mais pra frente iremos ver outros métodos do objeto console.
61 |
62 | ### Template String
63 |
64 | Você deve ter percebido que dentro desse `console.log()` existe um texto um pouco estranho:
65 |
66 | ```
67 | `Olá, ${nome}, seja bem vindo o fantástico mundo do Node.js!`
68 | ```
69 |
70 | Essa string envolta em crases sinaliza para o JS que essa é uma template string e dentro dela podemos manipular e mostrar dados, concatenando eles sem o operador `+`, para essa concatenação basta utilizar o `${variável}`. Essa é a melhor e mais moderna prática para trabalharmos com concatenação de strings.
71 |
72 | ## Condicionais em JS
73 |
74 | A sintaxe em JavaScript para condicionais é:
75 |
76 | ```
77 | if (13 > 15){
78 | console.log('Sim')
79 | } else {
80 | console.log('Não')
81 | }
82 | ```
83 |
84 | Caso queiramos utilizar mais de uma condicional no mesmo `if` devemos fazer dessa forma:
85 |
86 | ```
87 | if (13 > 15){
88 | console.log('Sim')
89 | } else if (23 < 45) {
90 | console.log('Sim')
91 | } else {
92 | console.log('Não para as duas perguntas acima')
93 | }
94 | ```
95 |
96 | ### Operadores E, OU
97 |
98 | * O operador `E` em JS é `&&`
99 | * O operador `OU` em JS é `||` (pipe, pipe)
100 |
101 | Se você quiser ver a lista completa de operadores em JS, basta acessar essa documentação:
102 |
103 | ## Projeto 01 - Detetive
104 |
105 | Vamos exercicitar o que vimos até agora com o famoso projeto do detetive:
106 |
107 | Faça um programa que faça 5 perguntas para uma pessoa sobre um crime. As perguntas são:
108 | 1. "Telefonou para a vítima?"
109 | 2. "Esteve no local do crime?"
110 | 3. "Mora perto da vítima?"
111 | 4. "Devia para a vítima?"
112 | 5. "Já trabalhou com a vítima?"
113 |
114 | O programa deve no final emitir uma classificação sobre a participação da pessoa no crime.
115 | Se a pessoa responder positivamente a 2 questões ela deve ser classificada como "Suspeita", entre 3 e 4 como "Cúmplice" e 5 como "Assassino". Caso contrário, ele será classificado como "Inocente".
116 |
117 | Resolução:
118 |
119 | ```
120 | console.log(
121 | "Olá, aconteceu um crime nessa cidade, a Carla foi assassinada brutalmente, eu estou encarregado de investigar esse crime, por isso preciso te fazer algumas perguntas... Vamos lá!",
122 | );
123 |
124 | const pergunta1 = prompt("Você telefonou para a vítima? [S/N] ");
125 | const pergunta2 = prompt("Você esteve no local do crime? [S/N] ");
126 | const pergunta3 = prompt("Você mora perto da vítima? [S/N] ");
127 | const pergunta4 = prompt("Você devia para a vítima? [S/N] ");
128 | const pergunta5 = prompt("Você já trabalhou com a vítima? [S/N] ");
129 |
130 | let cont = 0;
131 |
132 | if (pergunta1 === "S" || pergunta1 === "s") {
133 | cont++;
134 | }
135 | if (pergunta2 === "S" || pergunta2 === "s") {
136 | cont++;
137 | }
138 | if (pergunta3 === "S" || pergunta3 === "s") {
139 | cont++;
140 | }
141 | if (pergunta4 === "S" || pergunta4 === "s") {
142 | cont++;
143 | }
144 | if (pergunta5 === "S" || pergunta5 === "s") {
145 | cont++;
146 | }
147 |
148 | console.log(cont);
149 |
150 | if (cont === 2) {
151 | console.log("Você é suspeito do crime!");
152 | } else if (cont === 3 || cont === 4) {
153 | console.log("Você é cúmplice do crime!");
154 | } else if (cont === 5) {
155 | console.log("Você é o assassino!");
156 | } else {
157 | console.log("Você é inocente de todas as acusações!");
158 | }
159 | ```
160 |
161 | ## Array em JS
162 |
163 | O objeto Array do JavaScript é um objeto global usado na construção de 'arrays': objetos de alto nível semelhantes a listas.
164 |
165 | Criando um Array
166 |
167 | ```
168 | var frutas = ['Maçã', 'Banana'];
169 |
170 | console.log(frutas.length);
171 | // 2
172 | ```
173 |
174 | Acessar um item (index) do Array
175 |
176 | ```
177 | var primeiro = frutas[0];
178 | // Maçã
179 |
180 | var ultimo = frutas[frutas.length - 1];
181 | // Banana
182 | ```
183 |
184 | Iterar um Array
185 |
186 | ```
187 | frutas.forEach(function (item, indice) {
188 | console.log(item, indice);
189 | });
190 | // Maçã 0
191 | // Banana 1
192 | ```
193 |
194 | Adicionar um item ao final do Array
195 |
196 | ```
197 | var adicionar = frutas.push('Laranja');
198 | // ['Maçã', 'Banana', 'Laranja']
199 | ```
200 |
201 | Remover um item do final do Array
202 |
203 | ```
204 | var ultimo = frutas.pop(); // remove Laranja (do final)
205 | // ['Maçã', 'Banana'];
206 | ```
207 |
208 | Remover do início do Array
209 |
210 | ```
211 | var primeiro = frutas.shift(); // remove Maçã do início
212 | // ['Banana'];
213 | ```
214 |
215 | Adicionar ao início do Array
216 |
217 | ```
218 | var adicionar = frutas.unshift('Morango') // adiciona ao início
219 | // ['Morango', 'Banana'];
220 | ```
221 |
222 | Procurar o índice de um item na Array
223 |
224 | ```
225 | frutas.push('Manga');
226 | // ['Morango', 'Banana', 'Manga']
227 |
228 | var pos = frutas.indexOf('Banana');
229 | // 1
230 | ```
231 |
232 | Remover um item pela posição do índice
233 |
234 | ```
235 | var removedItem = frutas.splice(pos, 1); // é assim que se remove um item
236 | // ['Morango', 'Manga']
237 | ```
238 |
239 | Remover itens de uma posição de índice
240 |
241 | ```
242 | var vegetais = ['Repolho', 'Nabo', 'Rabanete', 'Cenoura'];
243 | console.log(vegetais);
244 | // ['Repolho', 'Nabo', 'Rabanete', 'Cenoura']
245 |
246 | var pos = 1, n = 2;
247 |
248 | var itensRemovidos = vegetais.splice(pos, n);
249 | // Isso é como se faz para remover itens, n define o número de itens a se remover,
250 | // a partir da posição (pos) em direção ao fim da array.
251 |
252 | console.log(vegetais);
253 | // ['Repolho', 'Cenoura'] (o array original é alterado)
254 |
255 | console.log(itensRemovidos);
256 | // ['Nabo', 'Rabanete']
257 | ```
258 |
259 | Copiar um Array
260 |
261 | ```
262 | var copiar = frutas.slice(); // é assim que se copia
263 | // ['Morango', 'Manga']
264 | ```
265 |
266 | Para mais detalhes sobre Arrays, acesse:
267 |
268 | ## Estruturas de repetição
269 |
270 | As principais estruturas de repetição em JavaScript são:
271 |
272 | ### for
273 |
274 | Um laço `for` é repetido até que a condição especificada seja falsa. O laço for no JavaScript é similar ao Java e C. Uma declaração for é feita da seguinte maneira:
275 |
276 | ```
277 | for (let passo = 0; passo < 5; passo++) {
278 | // Executa 5 vezes, com os valores de passos de 0 a 4.
279 | console.log('Ande um passo para o leste');
280 | }
281 | ```
282 |
283 | ### do...while
284 |
285 | A instrução `do...while` repetirá até que a condição especificada seja falsa.
286 |
287 | ```
288 | do {
289 | i += 1;
290 | console.log(i);
291 | } while (i < 5);
292 | ```
293 |
294 | ### while
295 |
296 | Uma declaração while executa suas instruções, desde que uma condição especificada seja avaliada como verdadeira. Segue uma declaração while:
297 |
298 | ```
299 | let n = 0;
300 | let x = 0;
301 | while (n < 3) {
302 | n++;
303 | x += n;
304 | }
305 | ```
306 |
307 | ### for...in e for...of
308 |
309 | O exemplo a seguir mostra a diferença entre o for...of e o for...in. Enquanto o for...in interage com o nome das propriedades, o for...of interage com o valor das propriedades.
310 |
311 | ```
312 | let arr = [3, 5, 7];
313 |
314 | for (let i in arr) {
315 | console.log(i); // logs "0", "1", "2", "foo"
316 | };
317 |
318 | for (let i of arr) {
319 | console.log(i); // logs "3", "5", "7"
320 | };
321 | ```
322 |
323 | ### forEach
324 |
325 | O método `forEach()` executa uma dada função em cada elemento de um array.
326 |
327 | Sintaxe:
328 |
329 | ```
330 | arr.forEach( callback(currentValue , index , array), thisArg );
331 | ```
332 |
333 | Parâmetros
334 |
335 | * `callback`
336 | Função para executar em cada elemento, recebendo três argumentos:
337 | * `currentValue`
338 | O valor atual do elemento sendo processado no array.
339 | * `index` (Opcional)
340 | O índice do elemento atual sendo processado no array.
341 | * `array` (Opcional)
342 | O array que forEach() está sendo aplicado.
343 | * `thisArg` (Opcional)
344 | Opcional. Valor a ser usado como this quando executar callback.
345 |
346 | ## Arrow Function
347 |
348 | Uma expressão arrow function possui uma sintaxe mais curta quando comparada a uma expressão de função (function expression). Estas expressões de funções são melhor aplicadas para funções que não sejam métodos, e elas não podem ser usadas como construtoras (constructors). Serve principalmente para funções anonimas, a sintaze é bem simples: `() => {}`
349 |
350 | Exemplo de uso:
351 |
352 | ```
353 | const materials = [
354 | 'Hydrogen',
355 | 'Helium',
356 | 'Lithium',
357 | 'Beryllium'
358 | ];
359 |
360 | materials.forEach((material) => {
361 | console.log(meterial)
362 | })
363 | ```
364 |
365 | É uma excelente prática utilizar Arrow Functions em seus códigos!
366 | Para mais detalhes acesse a doc:
367 |
368 | ## Objetos em JS
369 |
370 | Um objeto é uma coleção de dados e/ou funcionalidades relacionadas (que geralmente consistem em diversas variáveis e funções — que são chamadas de propriedades e métodos quando estão dentro de objetos). Vamos trabalhar com um exemplo para entender como eles são.
371 |
372 | Sintaxe:
373 |
374 | ```
375 |
376 | const pessoa = {
377 | nome: "Thiago",
378 | idade: 27,
379 | genero: "Masculino",
380 | };
381 |
382 | pessoa.escolaridade = "Pós-graduado";
383 |
384 | delete pessoa.escolaridade;
385 |
386 | pessoa.interesses = ["Futebol", "Cartas", "Futvolei", "Programação"];
387 |
388 | pessoa.bio = function () {
389 | return `Meu nome é ${this.nome}, tenho ${this.idade}, sou do gênero ${this.genero} e gosto de ${this.interesses[0]}, ${this.interesses[1]}, ${this.interesses[2]} e ${this.interesses[3]}.`;
390 | };
391 |
392 | console.log(pessoa.bio());
393 |
394 | ```
395 |
396 | ## Utilizar ou não ponto e virgula (;)?
397 |
398 | É uma boa prática utilziar sempre o `;` em códigos JS, principalmente quando estamos desenvolvendo um back-end com essa linguagem, pois vão existir situações que nosso código não irá compilar sem o `;`, então para evitar erros futuros, SEMPRE insira o `;`no fim de suas linhas de código.
399 |
--------------------------------------------------------------------------------
/aula-06/aula-06.md:
--------------------------------------------------------------------------------
1 | # Node.js
2 |
3 | - [Node.js](#nodejs)
4 | - [Introdução](#introdução)
5 | - [Instalando o Node.js](#instalando-o-nodejs)
6 | - [Instalação no Windows](#instalação-no-windows)
7 | - [Instalação no Linux](#instalação-no-linux)
8 | - [Instalação no Mac](#instalação-no-mac)
9 | - [NPM - Gerenciador de Pacotes do Node (*Node Package Manager*)](#npm---gerenciador-de-pacotes-do-node-node-package-manager)
10 | - [Como O NPM Funciona?](#como-o-npm-funciona)
11 | - [Package.json](#packagejson)
12 | - [Estrutura inicial](#estrutura-inicial)
13 | - [Exemplo prático](#exemplo-prático)
14 | - [1. Criando a Estrutura](#1-criando-a-estrutura)
15 | - [2. Instalando o express](#2-instalando-o-express)
16 | - [3. Criando o módulo inicial](#3-criando-o-módulo-inicial)
17 | - [4. Criando o servidor](#4-criando-o-servidor)
18 | - [5. Middlewares](#5-middlewares)
19 | - [5. HTTP](#5-http)
20 | - [Referências e Material Extra](#referências-e-material-extra)
21 | - [Link Repositório de estudos](#link-repositório-de-estudos)
22 | - [Curso Gratuito nodeBR](#curso-gratuito-nodebr)
23 | - [O que é Node.js? (Vídeo)](#o-que-é-nodejs-vídeo)
24 | - [Podcast sobre node.js](#podcast-sobre-nodejs)
25 | - [Como construir uma Web API em Javascript sem frameworks (Vídeo)](#como-construir-uma-web-api-em-javascript-sem-frameworks-vídeo)
26 | - [O guia completo do package.json do Node.js](#o-guia-completo-do-packagejson-do-nodejs)
27 | - [O que são middlewares em NodeJS?](#o-que-são-middlewares-em-nodejs)
28 | - [Building a Simple REST API with Node.js and Express](#building-a-simple-rest-api-with-nodejs-and-express)
29 | - [Canal sobre Clean Architecture, TDD, SOLID principles e design patterns](#canal-sobre-clean-architecture-tdd-solid-principles-e-design-patterns)
30 |
31 | # Introdução
32 |
33 | O Node.js pode ser definido como um interpretador para execução Javascript server-side.
34 | Como um ambiente de execução **[JavaScript](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript)** assíncrono orientado a eventos, o Node.js é projetado para desenvolvimento de aplicações escaláveis de rede.
35 |
36 | Quem pretende desenvolver alguma aplicação web node.js basicamente também deve saber como funciona a linguagem e a estrutura básica do **[JavaScript](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript)**.
37 |
38 | # Instalando o Node.js
39 |
40 | Acesse o site do Node, [https://nodejs.org/en/](https://nodejs.org/en/). Assim que entrar no site, você verá dois botões, indicando duas versões para baixar (LTS e Current).
41 |
42 | - **LTS** é uma versão que tem um suporte mais prolongado, porém, costuma ser mais antiga. Ela é focada em estabilidade e segurança. Essa versão é mais recomendada para grandes projetos, que precisam de uma versão mais estável e que não podem ficar sendo atualizados.
43 | - Em contrapartida temos a **Current**, a versão mais atual com todas as novas funcionalidades, muito indicada para testes, estudos e novos projetos. Cada nova versão pode ter atualizações que podem quebrar um código que foi escrito em uma versão mais antiga. Portanto, é preciso tomar cuidado ao atualizar projetos para novas versões.
44 |
45 | ## Instalação no Windows
46 |
47 | Logo após selecionar uma versão (LTS ou Current), será iniciado o download do instalador para Windows. Assim como é comum nos instaladores do Windows, basta seguir clicando nos botões Next até chegar ao final da instalação.
48 |
49 | Em seguida, no terminal digite `node -version` ou `-v` e aperte a tecla enter. Caso seja exibida a versão do Node, sua instalação foi feita com sucesso!
50 |
51 | 
52 |
53 | ## Instalação no Linux
54 |
55 | Podemos instalar o Node.js facilmente com o próprio gerenciador de pacotes do Linux. Inicie o terminal pressionando Ctrl + Alt + T.
56 |
57 | Em seguida, no terminal digite o comando:
58 |
59 | ```bash
60 | sudo apt install nodejs
61 | ```
62 |
63 | Em seguida, no terminal digite node -version ou -v e aperte a tecla Enter. Caso seja exibida a versão do Node, sua instalação foi feita com sucesso!
64 |
65 | Em caso de duvidas sobre diferentes instalações de acordo com as versões do Linux é possível consultar na **[documentação oficial](https://nodejs.org/en/download/)**.
66 |
67 | ## Instalação no Mac
68 |
69 | Logo após selecionar uma versão (LTS ou Current), será iniciado o download do instalador para Mac (arquivo .pkg). Assim que abrir esse arquivo, o instalador será iniciado.
70 |
71 | Basta ir clicando para continuar até ele finalizar a instalação.
72 |
73 | Em seguida, no terminal digite `node -version` ou `-v` e aperte a tecla enter. Caso seja exibida a versão do Node, sua instalação foi feita com sucesso!
74 |
75 | # [NPM](https://www.npmjs.com/) - Gerenciador de Pacotes do Node (*Node Package Manager*)
76 |
77 | Durante a instalação do node além do próprio node é instalado em sua maquina o **npm** que se trata de um gerenciador de pacotes do node e que é muito útil no desenvolvimento Node.
78 |
79 | ## Como O NPM [](https://www.npmjs.com/)Funciona?
80 |
81 | O **NPM** funciona baseado nesses dois ofícios:
82 |
83 | - Ele é um repositório amplamente usado para a publicação de projetos [open-source](https://www.totvs.com/blog/developers/como-funciona-um-software-open-source/) **Javascript**. Isso significa que ele é uma plataforma online onde qualquer pessoa pode publicar e compartilhar ferramentas escritas em **JavaScript**.
84 | - O [**npm**](https://www.npmjs.com/) é uma ferramenta de linha de comando que ajuda a interagir com plataformas online, como navegadores e servidores. Essa utilidade auxilia na instalação e desinstalação de pacotes, gerenciamento da versões e gerenciamento de dependências necessárias para executar um projeto.
85 |
86 | ## Package.json
87 |
88 | Ao iniciar uma aplicação via **npm** para usar os pacotes open-source, vai ser criado ou deve conter um arquivo chamado de **package.json** em seu projeto. Dentro do pacote, você encontrará metadados específicos para os projetos.
89 |
90 | Os metadados do **package.json** mostram alguns aspectos do projeto na seguinte ordem:
91 |
92 | - O nome do projeto;
93 | - A versão inicial;
94 | - A descrição;
95 | - O ponto de entrada;
96 | - Os comandos de script;
97 | - O repositório **[git](https://www.hostinger.com.br/tutoriais/o-que-github/)**;
98 | - As palavras-chave;
99 | - A licença;
100 | - As dependências;
101 | - As dependências do desenvolvedor (**devDependencies**). (se houver)
102 |
103 | Os metadados ajudam a identificar o projeto e agem como uma base para que os usuários obtenham as informações sobre ele.
104 |
105 | Aqui tem um exemplo de como identificar um projeto por meio desses metadados:
106 |
107 | 
108 |
109 | - O **nome** é **projeto01-lista-de-filme.**
110 | - A **versão** é **1.0.0**
111 | - O **ponto de entrada do projeto** ou o arquivo principal é **index.js**.
112 | - Os [scripts](https://wbruno.com.br/nodejs/package-json-entendendo-os-scripts/) de configuração do npm.
113 | - O **autor** do projeto não tem, por isso em branco se houvesse estaria `"author": "nome do autor"`;
114 | - Este projeto está **licenciado** sob o ISC.
115 | - As **dependências** ou outros **módulos** que esse módulo usa são
116 |
117 | express 4.17.1 e node 16.5.0
118 |
119 | - As **dependencias de desenvolvimento** são nodemon 2.0.12
120 | - A descrição nesse caso está em branco, se houvesse estaria `"description": "texto da descricao"`
121 |
122 | # Estrutura inicial
123 |
124 | Inicialmente vamos criar o nosso **package.json** através do gerenciador de pacotes [**NPN**](https://cibersistemas.pt/tecnologia/o-que-e-npm-um-tutorial-do-node-package-manager-para-iniciantes/).
125 |
126 | O **package.json** é uma espécie de manifesto do seu projeto. Ele pode fazer várias coisas, completamente não relacionadas. Ele é um repositório central de configurações de ferramentas, por exemplo. Ele também é onde **npm** armazena os nomes e versões dos pacotes instalados.
127 |
128 | ```bash
129 | npm init -y
130 | ```
131 |
132 | # Exemplo prático
133 |
134 | ## 1. Criando a Estrutura
135 |
136 | Primeiro crie uma pasta de sua preferencia para sua aplicação de exemplo. Ex: meu-projeto.
137 |
138 | Depois nós precisamos criar o nosso arquivo [**package.json**](https://www.luiztools.com.br/post/o-guia-completo-do-package-json-do-node-js/) esse é o arquivo de ponto de partido dos nossos projetos Node. Para isso, execute o comando a baixo. Ele irá criar o nosso arquivo com a referencia do module express.
139 |
140 | ```bash
141 | npm init -y
142 | ```
143 |
144 | ## 2. Instalando o express
145 |
146 | Em seguida instalamos o **[express](https://expressjs.com/pt-br/)** que é um framework rápido e um dos mais utilizados em conjunto com o Node.js, facilitando no desenvolvimento de aplicações back-end e até, em conjunto com sistemas de templates, aplicações full-stack.
147 |
148 | ```bash
149 | npm install express
150 | ```
151 |
152 | ## 3. Criando o módulo inicial
153 |
154 | Primeiro vamos criar o arquivo de entrada **index.js**
155 |
156 | ```jsx
157 | // importacao do express e atribuicao em uma constante chamada express.
158 | const express = require('express')
159 |
160 | // inicializacao do express na constante app.
161 | const app = express()
162 |
163 | // Estamos dizendo ao Express para usar o modulo json.
164 | app.use(express.json())
165 |
166 | // exportacao do modulo caso necessario
167 | module.exports = app
168 | ```
169 |
170 | Aqui, simplesmente importamos o módulo do Express e atribuímos a uma constante chamada express e depois dizemos ao Node que a constante app será uma instância do Express.
171 |
172 | Também estamos dizendo ao Express para usar o módulo json porque se você deseja passar informações do front-end para a API, sejam elas pequenas ou grandes, normalmente você as escreverá e as passará para a API no formato [JSON ( application/json)](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/JSON).
173 |
174 | `JSON` - JSON é uma sintaxe para serialização de objetos, matrizes, números, strings, booleanos, e null. Baseia-se em sintaxe Javascript, mas é distinta desta: alguns Javascript não são JSON, e alguns JSON não são Javascript.
175 |
176 | `express.json()` é um método embutido no ***express*** para reconhecer o objeto de solicitação de entrada como um objeto JSON. Este método é chamado como um middleware em seu aplicativo usando o código: `app.use(express.json());`
177 |
178 | Também iremos exportar apppara que possamos interagir com ele a partir de outro script.
179 |
180 | ## 4. Criando o servidor
181 |
182 | Agora iremos criar um script separado para ativar o nosso servidor. **server.js**
183 |
184 | ```jsx
185 | // importacao do app onde esta a configuracao do express.
186 | const app = require('./index')
187 |
188 | // criacao do servidor na porta 3000.
189 | app.listen(3000, () => {
190 | console.log('Server running in http://127.0.0.1:3000')
191 | })
192 | ```
193 |
194 | Após isso, vamos executar em nosso terminal o comando node server.js:
195 |
196 | ```bash
197 | node server.js
198 | Server running in http://127.0.0.1:3000
199 | ```
200 |
201 | ## 5. Middlewares
202 |
203 | O [**middleware**](https://pt.stackoverflow.com/questions/64507/o-que-s%C3%A3o-middlewares-em-nodejs) consistirá em instruções que a API deve seguir e **é importante que nosso middleware sempre retorne algo .**
204 |
205 | ## 5. HTTP
206 |
207 | O protocolo HTTP define um conjunto de métodos de requisição responsáveis por indicar a ação a ser executada para um dado recurso. Embora esses métodos possam ser descritos como substantivos, eles também são comumente referenciados como HTTP Verbs (Verbos HTTP).
208 |
209 | `GET`
210 |
211 | O método GET solicita a representação de um recurso específico. Requisições utilizando o método GET devem retornar apenas dados.
212 |
213 | `POST`
214 |
215 | O método POST é utilizado para submeter uma entidade a um recurso específico, frequentemente causando uma mudança no estado do recurso ou efeitos colaterais no servidor.
216 |
217 | `PUT`
218 |
219 | O método PUT substitui todas as atuais representações do recurso de destino pela carga de dados da requisição.
220 |
221 | `DELETE`
222 |
223 | O método DELETE remove um recurso específico.
224 |
225 | Saiba mais na [documentação](https://developer.mozilla.org/pt-BR/docs/Web/HTTP/Methods).
226 |
227 | # Referências e Material Extra
228 |
229 | Abaixo uma lista de links e referencias para continuar estudando node.js.
230 |
231 | ### Link Repositório de estudos
232 |
233 | [Documentação (Oficial)](https://nodejs.org/en/docs/guides/)
234 |
235 | ### Curso Gratuito nodeBR
236 |
237 | [Imersão em desenvolvimento de APIs com Node.js By #NodeBR!](https://erickwendel.teachable.com/p/node-js-para-iniciantes-nodebr)
238 |
239 | ### O que é Node.js? (Vídeo)
240 |
241 | [https://www.youtube.com/watch?v=nfrVPzDJZQc&t=21s](https://www.youtube.com/watch?v=nfrVPzDJZQc&t=21s)
242 |
243 | ### Podcast sobre node.js
244 |
245 | [Node.js - Hipsters #199 - Hipsters Ponto Tech](https://hipsters.tech/node-js-hipsters-199/)
246 |
247 | ### Como construir uma Web API em Javascript sem frameworks (Vídeo)
248 |
249 | [https://www.youtube.com/watch?v=NxHY14rMPvc](https://www.youtube.com/watch?v=NxHY14rMPvc)
250 |
251 | ### O guia completo do package.json do Node.js
252 |
253 | [O guia completo do package.json do Node.js](https://www.luiztools.com.br/post/o-guia-completo-do-package-json-do-node-js/)
254 |
255 | ### O que são middlewares em NodeJS?
256 |
257 | [O que são middlewares em NodeJS?](https://pt.stackoverflow.com/questions/64507/o-que-s%c3%a3o-middlewares-em-nodejs)
258 |
259 | ### Building a Simple REST API with Node.js and Express
260 |
261 | [Building a Simple REST API with Node.js and Express](https://dev.to/starkfire/building-a-simple-rest-api-with-node-js-and-express-299j)
262 |
263 | ### Canal sobre Clean Architecture, TDD, SOLID principles e design patterns
264 |
265 | [MangoDeveloper](https://www.youtube.com/c/MangoDeveloper)
266 |
--------------------------------------------------------------------------------
/aula-06/exemplo-express/package-lock.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "exemplo-express",
3 | "version": "1.0.0",
4 | "lockfileVersion": 1,
5 | "requires": true,
6 | "dependencies": {
7 | "accepts": {
8 | "version": "1.3.7",
9 | "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz",
10 | "integrity": "sha512-Il80Qs2WjYlJIBNzNkK6KYqlVMTbZLXgHx2oT0pU/fjRHyEp+PEfEPY0R3WCwAGVOtauxh1hOxNgIf5bv7dQpA==",
11 | "requires": {
12 | "mime-types": "~2.1.24",
13 | "negotiator": "0.6.2"
14 | }
15 | },
16 | "array-flatten": {
17 | "version": "1.1.1",
18 | "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
19 | "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI="
20 | },
21 | "body-parser": {
22 | "version": "1.19.0",
23 | "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.19.0.tgz",
24 | "integrity": "sha512-dhEPs72UPbDnAQJ9ZKMNTP6ptJaionhP5cBb541nXPlW60Jepo9RV/a4fX4XWW9CuFNK22krhrj1+rgzifNCsw==",
25 | "requires": {
26 | "bytes": "3.1.0",
27 | "content-type": "~1.0.4",
28 | "debug": "2.6.9",
29 | "depd": "~1.1.2",
30 | "http-errors": "1.7.2",
31 | "iconv-lite": "0.4.24",
32 | "on-finished": "~2.3.0",
33 | "qs": "6.7.0",
34 | "raw-body": "2.4.0",
35 | "type-is": "~1.6.17"
36 | }
37 | },
38 | "bytes": {
39 | "version": "3.1.0",
40 | "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz",
41 | "integrity": "sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg=="
42 | },
43 | "content-disposition": {
44 | "version": "0.5.3",
45 | "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.3.tgz",
46 | "integrity": "sha512-ExO0774ikEObIAEV9kDo50o+79VCUdEB6n6lzKgGwupcVeRlhrj3qGAfwq8G6uBJjkqLrhT0qEYFcWng8z1z0g==",
47 | "requires": {
48 | "safe-buffer": "5.1.2"
49 | }
50 | },
51 | "content-type": {
52 | "version": "1.0.4",
53 | "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz",
54 | "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA=="
55 | },
56 | "cookie": {
57 | "version": "0.4.0",
58 | "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.0.tgz",
59 | "integrity": "sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg=="
60 | },
61 | "cookie-signature": {
62 | "version": "1.0.6",
63 | "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
64 | "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw="
65 | },
66 | "debug": {
67 | "version": "2.6.9",
68 | "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
69 | "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
70 | "requires": {
71 | "ms": "2.0.0"
72 | }
73 | },
74 | "depd": {
75 | "version": "1.1.2",
76 | "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
77 | "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak="
78 | },
79 | "destroy": {
80 | "version": "1.0.4",
81 | "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
82 | "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA="
83 | },
84 | "ee-first": {
85 | "version": "1.1.1",
86 | "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
87 | "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0="
88 | },
89 | "encodeurl": {
90 | "version": "1.0.2",
91 | "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
92 | "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k="
93 | },
94 | "escape-html": {
95 | "version": "1.0.3",
96 | "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
97 | "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg="
98 | },
99 | "etag": {
100 | "version": "1.8.1",
101 | "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
102 | "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc="
103 | },
104 | "express": {
105 | "version": "4.17.1",
106 | "resolved": "https://registry.npmjs.org/express/-/express-4.17.1.tgz",
107 | "integrity": "sha512-mHJ9O79RqluphRrcw2X/GTh3k9tVv8YcoyY4Kkh4WDMUYKRZUq0h1o0w2rrrxBqM7VoeUVqgb27xlEMXTnYt4g==",
108 | "requires": {
109 | "accepts": "~1.3.7",
110 | "array-flatten": "1.1.1",
111 | "body-parser": "1.19.0",
112 | "content-disposition": "0.5.3",
113 | "content-type": "~1.0.4",
114 | "cookie": "0.4.0",
115 | "cookie-signature": "1.0.6",
116 | "debug": "2.6.9",
117 | "depd": "~1.1.2",
118 | "encodeurl": "~1.0.2",
119 | "escape-html": "~1.0.3",
120 | "etag": "~1.8.1",
121 | "finalhandler": "~1.1.2",
122 | "fresh": "0.5.2",
123 | "merge-descriptors": "1.0.1",
124 | "methods": "~1.1.2",
125 | "on-finished": "~2.3.0",
126 | "parseurl": "~1.3.3",
127 | "path-to-regexp": "0.1.7",
128 | "proxy-addr": "~2.0.5",
129 | "qs": "6.7.0",
130 | "range-parser": "~1.2.1",
131 | "safe-buffer": "5.1.2",
132 | "send": "0.17.1",
133 | "serve-static": "1.14.1",
134 | "setprototypeof": "1.1.1",
135 | "statuses": "~1.5.0",
136 | "type-is": "~1.6.18",
137 | "utils-merge": "1.0.1",
138 | "vary": "~1.1.2"
139 | }
140 | },
141 | "finalhandler": {
142 | "version": "1.1.2",
143 | "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz",
144 | "integrity": "sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==",
145 | "requires": {
146 | "debug": "2.6.9",
147 | "encodeurl": "~1.0.2",
148 | "escape-html": "~1.0.3",
149 | "on-finished": "~2.3.0",
150 | "parseurl": "~1.3.3",
151 | "statuses": "~1.5.0",
152 | "unpipe": "~1.0.0"
153 | }
154 | },
155 | "forwarded": {
156 | "version": "0.2.0",
157 | "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
158 | "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow=="
159 | },
160 | "fresh": {
161 | "version": "0.5.2",
162 | "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
163 | "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac="
164 | },
165 | "http-errors": {
166 | "version": "1.7.2",
167 | "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.2.tgz",
168 | "integrity": "sha512-uUQBt3H/cSIVfch6i1EuPNy/YsRSOUBXTVfZ+yR7Zjez3qjBz6i9+i4zjNaoqcoFVI4lQJ5plg63TvGfRSDCRg==",
169 | "requires": {
170 | "depd": "~1.1.2",
171 | "inherits": "2.0.3",
172 | "setprototypeof": "1.1.1",
173 | "statuses": ">= 1.5.0 < 2",
174 | "toidentifier": "1.0.0"
175 | }
176 | },
177 | "iconv-lite": {
178 | "version": "0.4.24",
179 | "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
180 | "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
181 | "requires": {
182 | "safer-buffer": ">= 2.1.2 < 3"
183 | }
184 | },
185 | "inherits": {
186 | "version": "2.0.3",
187 | "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
188 | "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
189 | },
190 | "ipaddr.js": {
191 | "version": "1.9.1",
192 | "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
193 | "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g=="
194 | },
195 | "media-typer": {
196 | "version": "0.3.0",
197 | "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
198 | "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g="
199 | },
200 | "merge-descriptors": {
201 | "version": "1.0.1",
202 | "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
203 | "integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E="
204 | },
205 | "methods": {
206 | "version": "1.1.2",
207 | "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
208 | "integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4="
209 | },
210 | "mime": {
211 | "version": "1.6.0",
212 | "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
213 | "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg=="
214 | },
215 | "mime-db": {
216 | "version": "1.49.0",
217 | "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.49.0.tgz",
218 | "integrity": "sha512-CIc8j9URtOVApSFCQIF+VBkX1RwXp/oMMOrqdyXSBXq5RWNEsRfyj1kiRnQgmNXmHxPoFIxOroKA3zcU9P+nAA=="
219 | },
220 | "mime-types": {
221 | "version": "2.1.32",
222 | "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.32.tgz",
223 | "integrity": "sha512-hJGaVS4G4c9TSMYh2n6SQAGrC4RnfU+daP8G7cSCmaqNjiOoUY0VHCMS42pxnQmVF1GWwFhbHWn3RIxCqTmZ9A==",
224 | "requires": {
225 | "mime-db": "1.49.0"
226 | }
227 | },
228 | "ms": {
229 | "version": "2.0.0",
230 | "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
231 | "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
232 | },
233 | "negotiator": {
234 | "version": "0.6.2",
235 | "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz",
236 | "integrity": "sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw=="
237 | },
238 | "on-finished": {
239 | "version": "2.3.0",
240 | "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
241 | "integrity": "sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=",
242 | "requires": {
243 | "ee-first": "1.1.1"
244 | }
245 | },
246 | "parseurl": {
247 | "version": "1.3.3",
248 | "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
249 | "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ=="
250 | },
251 | "path-to-regexp": {
252 | "version": "0.1.7",
253 | "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
254 | "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w="
255 | },
256 | "proxy-addr": {
257 | "version": "2.0.7",
258 | "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
259 | "integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
260 | "requires": {
261 | "forwarded": "0.2.0",
262 | "ipaddr.js": "1.9.1"
263 | }
264 | },
265 | "qs": {
266 | "version": "6.7.0",
267 | "resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz",
268 | "integrity": "sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ=="
269 | },
270 | "range-parser": {
271 | "version": "1.2.1",
272 | "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
273 | "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg=="
274 | },
275 | "raw-body": {
276 | "version": "2.4.0",
277 | "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.4.0.tgz",
278 | "integrity": "sha512-4Oz8DUIwdvoa5qMJelxipzi/iJIi40O5cGV1wNYp5hvZP8ZN0T+jiNkL0QepXs+EsQ9XJ8ipEDoiH70ySUJP3Q==",
279 | "requires": {
280 | "bytes": "3.1.0",
281 | "http-errors": "1.7.2",
282 | "iconv-lite": "0.4.24",
283 | "unpipe": "1.0.0"
284 | }
285 | },
286 | "safe-buffer": {
287 | "version": "5.1.2",
288 | "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
289 | "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
290 | },
291 | "safer-buffer": {
292 | "version": "2.1.2",
293 | "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
294 | "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
295 | },
296 | "send": {
297 | "version": "0.17.1",
298 | "resolved": "https://registry.npmjs.org/send/-/send-0.17.1.tgz",
299 | "integrity": "sha512-BsVKsiGcQMFwT8UxypobUKyv7irCNRHk1T0G680vk88yf6LBByGcZJOTJCrTP2xVN6yI+XjPJcNuE3V4fT9sAg==",
300 | "requires": {
301 | "debug": "2.6.9",
302 | "depd": "~1.1.2",
303 | "destroy": "~1.0.4",
304 | "encodeurl": "~1.0.2",
305 | "escape-html": "~1.0.3",
306 | "etag": "~1.8.1",
307 | "fresh": "0.5.2",
308 | "http-errors": "~1.7.2",
309 | "mime": "1.6.0",
310 | "ms": "2.1.1",
311 | "on-finished": "~2.3.0",
312 | "range-parser": "~1.2.1",
313 | "statuses": "~1.5.0"
314 | },
315 | "dependencies": {
316 | "ms": {
317 | "version": "2.1.1",
318 | "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
319 | "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg=="
320 | }
321 | }
322 | },
323 | "serve-static": {
324 | "version": "1.14.1",
325 | "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.14.1.tgz",
326 | "integrity": "sha512-JMrvUwE54emCYWlTI+hGrGv5I8dEwmco/00EvkzIIsR7MqrHonbD9pO2MOfFnpFntl7ecpZs+3mW+XbQZu9QCg==",
327 | "requires": {
328 | "encodeurl": "~1.0.2",
329 | "escape-html": "~1.0.3",
330 | "parseurl": "~1.3.3",
331 | "send": "0.17.1"
332 | }
333 | },
334 | "setprototypeof": {
335 | "version": "1.1.1",
336 | "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.1.tgz",
337 | "integrity": "sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw=="
338 | },
339 | "statuses": {
340 | "version": "1.5.0",
341 | "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
342 | "integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow="
343 | },
344 | "toidentifier": {
345 | "version": "1.0.0",
346 | "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",
347 | "integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw=="
348 | },
349 | "type-is": {
350 | "version": "1.6.18",
351 | "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
352 | "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
353 | "requires": {
354 | "media-typer": "0.3.0",
355 | "mime-types": "~2.1.24"
356 | }
357 | },
358 | "unpipe": {
359 | "version": "1.0.0",
360 | "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
361 | "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw="
362 | },
363 | "utils-merge": {
364 | "version": "1.0.1",
365 | "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
366 | "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM="
367 | },
368 | "vary": {
369 | "version": "1.1.2",
370 | "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
371 | "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw="
372 | }
373 | }
374 | }
375 |
--------------------------------------------------------------------------------