NLW E-Sports 2022

🪧 Vitrine.Dev	https://cursos.alura.com.br/vitrinedev/franklindrw
✨ Nome	NLW E-Sports
🏷️ Tecnologias	React, Node, React-native, Express.js, Expo, Prisma.js, Vite.js
🚀 URL
🔥 Desafio	Plataforma Full Stack para conectar gamers de vários jogos de uma maneria fácil, tanto pela web quanto no celular.

🧭 Índice

• Sobre o Projeto
  • Página Web
  • Aplicativo Mobile
  • API Rest
    • Desenvolvimento
    • Routes
    • Controllers
    • Models
  • Linguagens Usadas
• Instalação
  • Requisitos
  • Web Server (API)
  • Aplicação Web
  • Aplicação Mobile
• Autor
• Licença

🔎 Sobre o Projeto

A plataforma NLW E-Sports tem o objetivo de conectar os jogadores de diversas plataformas e generos de jogos de forma fácil. O projeto foi divido em 3 aplicações, uma plataforma web feita com React e Vite.js para criação de anúncios de novos jogadores procurando grupo para jogar, um aplicativo híbrido usando React-native e Expo para que os players consigam ver os anúncios de novos grupos de seu jogo favorito e possa conectar de forma fácil usando seu smartphone Ios ou Android. E para conectar as duas aplicações foi feita uma API Rest usando Express.js. Todas as aplicações foi usado como linguagem de programação Typescript para ter uma tipagem e uma estrutura de código mais segura e de fácil entendimento e vercionamento

Plataforma Web

O site foi construido usando Vite.js que é uma ferramenta de construção para aplicativos Web usando React, Angular e Vue, e para a estilização foi usado tailwind CSS para estilização de forma mais simples onde é colocado as configurações de CSS direto na className incurtando as propriedades e folhas de código. Para conexão da API foi usado a biblioteca Axios, com ela é possível de forma simples e objetiva fazer requisições HTTP e receber os dados.

O site foi construído com uma página web onde teremos uma lista de jogos mostrando a capa e na legenda a quantidade de anúncios que existe nele.

Ao clicar em Públicar Anúncio, abrirá um modal com um formulário onde será enviado os dados para o backend atravéz do End-point da api para criar novos anúncios no jogo selecionado.

Aplicativo Mobile

O Aplicativo mobile foi construído usando React Native e Expo, sendo uma linguagem híbrida pode ser tanto instalado em smartphones Ios da Apple quanto smartphones com sistema operacional Android. Com o aplicativo é possível ver todos os Jogos e ao clicar no jogo abre uma nova tela onde temos os anúncios de outros jogadores criados e ao clicar em conectar mostra o nome do discord para que o jogador possa conectar com o jogador que criou o anúncio.

API Rest

Desenvolvimento

O Backend das aplicações foi usado Express.js que é um framework que fornece métodos para especificar qual função é chamada quando chega requisição HTTP (GET, POST, SET, etc). Com ele fui capaz de criar uma API Rest usando arquitetura MVC, onde para que cada rota que o usuario faça uma requisição possa executar um controller determinado que por sua vez executa suas funções do Models e retorna para o usuário os dados requisitados.

Também foi usado o Prisma, ele é um ORM simples que recebe os comando em json e por debaixos dos panos executa no banco os comandos em SQL de acordo com o banco usado, assim pode-se trabalhar em vários tipos de bancos (mySQL, PostgreSQL, SQLite) usando uma unica arquitura, no caso dessa aplicação foi usado SQLite para demonstração.

E para melhor visualização das rotas também adicionei o Swagger-autogen, que é uma biblioteca onde você consegue de forma rápida e simples documentar seu backend e ao gerar o arquivo usando a biblioteca, a mesma cria a página de swagger com as rotas escritas no documento de forma automática.

Routes

A arquitetura do backend foi feita um arquivo de rotas principal onde ele recebe os outros arquivos de rotas individualmente para ter uma melhor organização e entendimento, assim facilitando uma futura manutenção.

Controllers

Os controles por sua vez, foi feita uma classe principal para todas as funções que tenham manibulação daquele grupo de dados específico, e também onde fica concentrado as configurações do swagger que ao gerar percorre todos os arquivos e monta automáticamente. o Objetivo do controller é ao ser chamado na pela sua rota especifica possa realizar todas as funções contidas nele e retornar apenas os dados que foi solicitado.

Nessa aplicação foi criado um controller que faz todo tratamento de dados dos games, e outro controllers que faz o tratamento de dados dos anúncios

Models

Já os Models segue a mesma idéia dos controllers, temos um arquivo principal que conecta no banco e executa as querys de acordo com o tipo de dados que está sendo solicitado, assim temos um arquivo para querys referentes aos games e um outro arquivos de querys referentes aos anúncios.

🔨 Construído com

📥 Instalação

Requisitos

Após clonar o projeto precisará instalar as aplicações web e server API é necessário ter instalado Node.js, caso não tenha pode baixar Clicando aqui!

E para a o aplicativo é necessário que tenha instalado o Expo no smartphone o Expo Go

ou também é possível compilar a aplicação para um arquivo .apk(android) e/ou .ipa(ios) usando o expo através do passo-a-passo aqui!

com tudo pronto você poderá seguir com os passos abaixo:

API

1. Abra o cmd e navegue através dele até a pasta server: nlw-esports_2k22/server/

   dentro da pasta use o comando abaixo:

     npm i
   

   e aguarde instalar todas as bibliotecas necessárias para rodar o projeto.

2. Com os bibliotecas instaladas use o comando abaixo para gerar o arquivo do swagger:

     npm run auto-gen
   

3. Após gerar os arquivos você pode testar a aplicação na máquina usando o comando:

     npm run dev
   

   em seguida irá gerar no cmd o endereço para acessar fazer as requisições ou acessar o swagger com http://localhost:3000/docs

4. Caso queira instalar em um servidor de produção pode compilar a aplicação usando o comando:

     npm run build
   

   em seguida copie a pasta dist gerada dentro da aplicação para o servidor desejado, navegue até dentro da pasta onde está a pasta build, e com Node instalado e use o comando abaixo para rodar o build:

     node ./dist/server.js
   

Web

1. Abra o cmd e navegue através dele até a pasta server: nlw-esports_2k22/web/ dentro da pasta use o comando abaixo:

     npm i
   

   e aguarde instalar todas as bibliotecas necessárias para rodar o projeto.

2. Após instalar as bibliotecas você pode testar a aplicação na máquina usando o comando:

     npm run dev
   

   em seguida irá gerar no cmd o endereço para acessar a aplicação web.

3. Caso queira instalar em um servidor de produção pode compilar a aplicação usando o comando:

     npm run build
   

   em seguida copie a pasta dist gerada dentro da aplicação para o servidor desejado, navegue até dentro da pasta onde está a pasta build, e com Node instalado e use o comando abaixo para rodar o build:

     node ./dist
   

Mobile

1. Abra o cmd e navegue através dele até a pasta server: nlw-esports_2k22/mobile/ dentro da pasta use o comando abaixo:

     npm i
   

   e aguarde instalar todas as bibliotecas necessárias para rodar o projeto.

2. Após instalar as bibliotecas você pode testar a aplicação na máquina usando o comando:

     expo start
   

   em seguida irá gerar no cmd um QRCode para scannear usando o aplicativo Expo Go instalado no celular ou caso tenha algum simulador terá os comandos abaixo do QRCode para iniciar o simulador que deseja como também restartar, iniciar e parar o aplicativo.

3. Caso queira instalar uma compilação no celular ou subir na loja de aplicativos de preferência siga os passos nesse tutorial aqui!

   após gerar a compilação, transfira para o celular e instale, ou faça upload na sua loja de preferência.

🖊 Autor

_{Franklin Campos}

Feito por Franklin Campos 👋🏻
Entre em contato!

📋 Licença

Copyright 2022 © Franklin Campos
This project is MIT licensed.