Introdução a

servidores com Node JS

Server Side Rendering

Criação simplificada de servidores

Criação de servidores robustos

Criação de serviços FullStack

POR ONDE EU COMEÇO???????

Lembre-se sempre do KISS

Keep It Simple Stupid !!!!

Qual a intuição por trás de 'Servidor'?

Um servidor é um programa de computador que

"SERVE"

funcionalidades para outros

programas , também conhecidos como clientes

Mas como o servidor se comunica com uma aplicação?

  • Primordialmente através do protocolo HTTP ( Protocolo de transferência de hipertexto )
  • A invocação de uma funcionalidade é feita por uma URL
  • Os verbos HTTP (Get, Post, Delete, Put)

Mas isso tudo ainda é muito abstrato né?

Pois vamos pro código que isso vai te ajudar!

Com quantos milhões de linhas eu crio um servidor???

Relaxa, basta 12, ou melhor, 3

const express = require('express')

const app = express();

app.use('/', (req,res)=>{
    return res.send('it works!')
})

app.listen(3000, () => {
	console.log('Funcionou!!')
    }
)

Simples, não?

Geralmente deixamos essa rota apenas para testar se a conexão com a API está sendo feita corretamente

const express = require('express')

const app = express()

app.use('/',(req,res)=>{
    return res.send('Minha homepage!!!')
})

app.use('/teste', (req,res)=>{
    return res.send('Test page!')
})

app.listen(3333, ()=>{
    console.log('It Works!')
})

Salve a aplicação e veja o que acontece

Um monitorador de alteração de arquivos

Altere seus scripts no Package.json para que fique dessa forma:

'Package.json'

{ 
  "license": "MIT",
  "scripts": {
    "start": "node app.js",
    "dev": "nodemon app.js"
  },
  "dependencies": {
    "express": "^4.17.1",
    "nodemon": "^2.0.2"
  }
}

Feito!

Espera! vamos organizar melhor

  • Crie um arquivo routes.js
  • Mova suas rotas pra lá
  • Exporte suas rotas
  • Importe seu routes.js no app

Deve ficar algo assim

const express = require('express')

const routes = require('./routes')

const app = express()

app.use(routes)

app.listen(3333, ()=>{
    console.log('It Works!')
})
const express = require('express')

const routes = express.Router()

routes.get('/',(req,res)=>{
    return res.send('Minha homepage!!!')
})

routes.get('/teste',(req,res)=>{
    return res.send('Test page!')
})

module.exports = routes

App:

Routes:

Vamos dar uma olhada em como passar parâmetros

Passagem via query

...
routes.get('/query',(req,res)=>{
    return res.send(req.query)
})
...

Query:

Search:

Response:

Passagem via params

...
routes.get('/params/:id/:nome',(req,res)=>{
    return res.send(req.params)
})
...

Search:

Query:

Response:

Existem muitos outros tipos, mas vamos ficar com esses

Mas só conseguimos dar Get, e os outros verbos?

Debug APIs like a human, not a robot

Mas espera um pouco, vamos tomar certas precauções

  1. Instale o body-parser com yarn ou npm

  2. Coloque os seguintes trechos em seu código:

...
const bodyParser = require('body-parser')
...
const app = express()

app.use(bodyParser.urlencoded({extended:false}))
app.use(bodyParser.json())
...

Aproveitando que estamos tomando precauções e organizando código...

Vamos componentizar essas funções!

  1. Crie uma pasta chamada Controllers

  2. De inicio, criemos um arquivo chamado methods.js

  3. Vamos estruturar ele em um export direto

module.exports = {
    create(req,res){
        res.send(req.body)
    },

    index(req,res){
        res.send(req.body)
    }
}
...
const methods = require('./methods')

routes.post('/users',methods.create)

routes.get('users', methods.index)
...

Methods.js:

Routes.js:

Vamos agora conectar isso ao frontend!

  1. Deixe o servidor rodando

  2. Crie um novo projeto React

  3. Instale CORS no backend com yarn add cors

  4. Instale AXIOS no frontend com yarn add axios

O que é CORS???

Cross-origin resource sharing (compartilhamento de recursos de origem cruzada)

Define meios para um servidor permitir que seus recursos sejam acessados por uma página web de um domínio diferente.

O que  é AXIOS???

Um cliente HTTP que também lida com XMLhttpRequest

Pense nele como a ponte que liga o Servidor a seu Cliente de forma segura

Vamos criar o modelo de apresentação dos dados!

Seguindo nosso Schema teremos:

  • Nome
  • Idade
  • Cargo

Vamos convencionar assim:

export default function App() {
  return (
    <ul>
      <li>
        <h2> Pedro Victor</h2>
        <p> Gerente de projetos </p>
        <span> 19 anos </span>
      </li>
    </ul>
  );
}

Vamos agora configurar o CORS!

Para isso, modifique o app do backend dessa forma:

...
const cors = require('cors')
...

const app = express()

app.use(cors())
...

Vamos agora configurar o AXIOS!

Para isso, crie um service/api.js na SRC do frontend dessa forma:

import axios from 'axios'

const api = axios.create({
    baseURL: 'http://localhost:3333'
})

export default api

Agora que configuramos tudo, vamos lá buscar os dados!

Modifique seu App do frontend da seguinte forma:

import React,{useState, useEffect} from 'react';
import api from './services/api'

export default function App() {
  const [membros,setMembros] = useState([])

  useEffect(()=>{
    function loadMembers(){
      const res = api.get('/user')
      const {data}= res

      setMembros(data)
    }
    loadMembers()
  },[])
}

COMO ASSIM UNDEFINED ????????????????????????????????????????????????????????

??????????????????????????????????????????????????????????????????????????????????????????????????????

???????????????????????????????????????????????????????????????????????????????????????????????????

Bom, vamos lá, perceba que estamos trabalhando de forma SÍNCRONA, quando precisamos na verdade que tanto o método chamado pelo GET, como a função que busca os dados no backend seja:

ASSÍNCRONA

Vamos então modificar nossa função em methods dessa forma:

...
module.exports = {
    async index(req,res){...},
    
    async create(req,res){...},

    async update(req,res){...}
}

Vamos modificar nossa função de busca dos dados dessa forma:

...
  useEffect(()=>{
    async  function loadMembers(){
      const res = await api.get('/user')
      const {data}= res

      setMembros(data)
    }

    loadMembers()
  },[])
...

FINALMENTE CONSEGUIMOS!!!!!!

>Insira meme de parabéns<

>Aqui também<

>Mais um aqui<

Obrigado pessoal!

Mas eis o meu desafio (se você for da CEOS, é dever de casa mesmo): Tente criar um Twitter com dados estáticos

Vem comigo que eu vou explicar...

Especificações

  1. O feed deve conter uma sequência de tweets
  2. Cada tweet deve conter comentários
  3. Os comentários, a priori, não devem conter comentários
  4. Não é necessário implementar o retweet
  5. Cada tweet deve conter: Nome, descrição (a priori, apenas texto), quantidade de likes (interativo)

Achou difícil? Relaxa, faz no teu tempo, revise e confie que dará certo!

Repositório da aplicação

https://github.com/stormsamurai1/MiniCursoCEOSExpress

Caso queira um canal mais informal para contato: https://twitter.com/pedrovictoroc

Made with Slides.com