| 🪧 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. |
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
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.
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.
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.
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.
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
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.
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:
-
Abra o cmd e navegue através dele até a pasta server: nlw-esports_2k22/server/
dentro da pasta use o comando abaixo:
npm ie aguarde instalar todas as bibliotecas necessárias para rodar o projeto.
-
Com os bibliotecas instaladas use o comando abaixo para gerar o arquivo do swagger:
npm run auto-gen -
Após gerar os arquivos você pode testar a aplicação na máquina usando o comando:
npm run devem seguida irá gerar no cmd o endereço para acessar fazer as requisições ou acessar o swagger com http://localhost:3000/docs
-
Caso queira instalar em um servidor de produção pode compilar a aplicação usando o comando:
npm run buildem 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
-
Abra o cmd e navegue através dele até a pasta server: nlw-esports_2k22/web/ dentro da pasta use o comando abaixo:
npm ie aguarde instalar todas as bibliotecas necessárias para rodar o projeto.
-
Após instalar as bibliotecas você pode testar a aplicação na máquina usando o comando:
npm run devem seguida irá gerar no cmd o endereço para acessar a aplicação web.
-
Caso queira instalar em um servidor de produção pode compilar a aplicação usando o comando:
npm run buildem 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
-
Abra o cmd e navegue através dele até a pasta server: nlw-esports_2k22/mobile/ dentro da pasta use o comando abaixo:
npm ie aguarde instalar todas as bibliotecas necessárias para rodar o projeto.
-
Após instalar as bibliotecas você pode testar a aplicação na máquina usando o comando:
expo startem 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.
-
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.
Franklin Campos
Feito por Franklin Campos 👋🏻
Entre em contato!
Copyright 2022 © Franklin Campos
This project is MIT licensed.