Back-end / Front-end / Mobile

Rede Social para Devs

Aqui temos a camada back-end do aplicativo que tem como objetivo permitir o registro de um acontecimento através de um post informando uma imagen/vídeo e um texto descrevendo o fato.

Teremos no back-end a autenticação do usuário, a permissão de rotas e o logout do usuário, o upload dos arquivos de imgem armazenando em disco (ideal seria um serviço na núvem), bem como os end-points para criar, editar, excluir ou deletar uma memória.

Conteúdo

• Techs
• Arquitetura
• Pré-requisitos
• Criar Tabelas no Banco
• Funcionalidades / End-Points
• Instação e Execução
• Registrar Aplicação OAuth - Github

Techs

• node
• axios
• fastify
  • @fastify/cors
  • @fastify/jwt
  • @fastify/multipart
  • @fastify/static
  • @prisma/client
• prisma / SQLite
• typescript
• tsx
• dotenv
• eslint
• zod

menu ↑

Arquitetura do projeto / Autenticação OAuth (Github)

A seguir descrevemos as etapas para a autenticação dos clientes (web/mobile) no Github.

1. No cliente (web/mobile), ao clicar em "Criar sua conta", a aplicação aciona o Github com o "GITHUB_CLIENT_ID" préviamente registrado;
2. Após auntenticação no github, ele fornece um código que é enviado para o end-point /register;
3. Aqui no back-end, o código recebido do cliente é enviado para o github juntamente como client_id e client_secret que estão nas variáveis de ambiente;
4. O github devolve um access_token e com ele nós fazemos uma chamada na api do git (https://api.github.com/user) para pegar os dados do usuário;
5. Neste momento, é verificado no bando de dados do server se este usuário já é cadastrado. Caso não seja, o server registra no banco e em seguida retorna um access_token para a chamada do cliente (web/mobile) confirmando a autenticação.

Após este processo, de posse do access_token, os clientes poderão realizar chamadas a api do back-end.

menu ↑

Pré-requisitos

• node versão >= 16.16.0
• npm versão >= 5.2.0 (já trás o npx)
• Registrar aplicação OAuth no Github (web e mobile) Veja como ↓
• Criar tabelas no banco

menu ↑

Funcionalidades / Endpoints (api)

host: http://localhost:3333

• Login / Registro - POST /retister
• Inclusão de memória - POST /memories
• Listagem de memória - GET /memories
• Edição de memória - PUT /memories/id
• Deleção de memória - DELETE /memories/id
• Filtro de data

menu ↑

Criar Tabelas No Banco

Toda a configuração do banco está pronta, porém é necessário a criação das tabelas utilizando o prisma.

Lembrando que é nessário incluir nas variáveis de ambiente o caminho para grabação do banco de dados, que neste caso estamos utilizando o SQLite.

DATABASE_URL="file:./data/dev.db"

Após esta configuração, basta abrir o terminal na pasta do projeto e rodar o comando a seguir:

npx prisma generate 
npx prisma migrate

Para confirmar a criação das tabelas você pode utilizar a ferramenta "Prisma Studio".

npx prisma studio

Para mais informações, consute a documentação : Prisma - SQLite / Prisma Migrate

menu ↑

Instação e Execução

Para instalar e roda o servidor node basta seguir os passos descritos abaixo:

1. Clonar o projeto:

    git clone https://github.com/esbnet/nlw-spacetime-server.git

2. Entrar na pasta do projeto:

    cd nlw-spacetime-server

3. Instalar dependências:

    npm install

4. Criar na pasta raiz o arquivo .env e configurar as credencias geradas no gitrub. Será necessário uma credencial para o acesso via web e outra para acesso via mobile. (Registrar aplicação OAuth no Github Veja como ↓)

    # para aplicação web
    GITHUB_CLIENT_ID_WEB={seu código aqui}
    GITHUB_CLIENT_SECRET_WEB={seu código aqui}

    # para aplicação mobile
    GITHUB_CLIENT_ID_APP={seu código aqui}
    GITHUB_CLIENT_SECRET_APP={seu código aqui}

5. Rodar o aplicativo:

    npm run dev

6. Criar a variável:

    NEXT_PUBLIC_GITHUB_CLIENT_ID=código_client_id_gerado_no_git

7. Criar a variável contendo endereço e porta do servidor (back-end/api)

    NEXT_PUBLIC_SERVER_URL=http://0.0.0.0:3333

menu ↑

Registrar aplicação OAuth no Github

Abaixo você encontra o passo-a-passo para criar as credencias para que sua aplicação possa realizar a autenticação via Github.

Atalho: https://github.com/settings/applications/new

Passos	tela
1. Clique em settins
2. Clique em Developer settings
3. Clique em OAuth
4. Clique em New OAuth App
5. Preencha os campos com os dados abaiso: spacetime-web http://localhost:3000 (opcional) http://localhost:3000/ (para onde será redirecionado após o login)

Consulte a documentaçãod o github para mais detalhes: Autorizando Aplicativos OAuth

menu ↑

---