Skip to content

myGameScore.Front é um projeto Front-end desenvolvido utilizando a SPA ReactJS e o Axios para consumo da API do projeto MyGameScore.WebServices, disponível em https://github.com/Thiago-Gonzalez/MyGameScore.WebServices

Notifications You must be signed in to change notification settings

Thiago-Gonzalez/MyGameScore.Front

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

44 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

myGameScore

É um projeto web no qual jogadores de basquete podem registrar suas partidas por temporada, através do menu "Ver partidas", no qual poderá cadastrar, editar ou excluir e ver histórico de temporadas e partidas, além de ver suas estatísticas em cada temporada, como quantidade de jogos disputados, total de pontos marcados na temporada, média de pontos por jogo, maior e menor pontuação por jogo e quantidade de vezes que bateu o próprio recorde.

Além disso, jogadores podem ver uma tabela contendo as 10 maiores pontuações entre todos os players, através do menu "Quadro de pontuações".

Para desenvolvimento do projeto foram utilizadas as tecnologias:

Front-end:

Back-end:

  • Linguagem C#
  • .NET Core 6
  • Desenvolvimento de API Rest com ASP.NET Core
  • Utilização dos padrões arquiteturais Clean Architecture (Camadas API, Application, Core e Infrastructure), Command-Query Responsility Segregation (CQRS) para separar as consultas (Queries) das ações que alteram o estado do sistema (Commands) e Padrão Repository para encapsular o acesso a dados, desacoplando detalhes de implementação através de interfaces.
  • Validação de APIs com FluentValidation
  • Persistência e acesso à dados com Entity Framework Core e SQL Server
  • Autenticação e autorização com Json Web Token (JWT)
  • Testes Unitários com xUnit
  • Link do repositório do Back-end

Instruções para obter o repositório e rodar o projeto:

  1. Requisitos:
  2. Criar uma pasta no local desejado para receber os repositórios do projeto
  3. Abrir um terminal na pasta selecionada (abra a pasta no explorador de arquivos, clique com o botão direito do mouse dentro dela e procure a opção de abrir terminal ou abra o terminal e digite o comando $ cd pathDaPasta)
  4. No terminal, dentro da pasta específica para receber os repositórios, insira o comando $ git clone https://github.com/Thiago-Gonzalez/MyGameScore.WebServices para clonar o repositório do back-end
  5. Em seguida, ainda na mesma pasta, insira o comando $ git clone https://github.com/Thiago-Gonzalez/MyGameScore.Front para clonar o projeto do front-end
  6. Configurações para rodar o projeto do Front-end:
  7. Abra o terminal na pasta do projeto do front-end (através do VSCode ou via terminal) e insira o seguinte comando $ npm install para instalar as dependências do projeto.

    Para rodar o projeto, insira o seguinte comando $ npm start e então o projeto deve ser aberto na url "https://localhost:3000"

  8. Configurações para rodar o projeto do Back-end:
  9. Para abrir o projeto do back-end, abra a pasta do projeto no exporador de arquivos e abra o arquivo solução (.sln)

    No terminal, inserir o seguinte comando $ dotnet tool install --global dotnet-ef para instalar o EF Core globalmente

    Em seguida, com o projeto aberto no terminal na pasta MyGameScore.Infrastructre, inserir o seguinte comando (ex: MyGameScore.WebServices/MyGameScore.Infrastructure (main)) $ dotnet ef database update -s ../MyGameScore.API/MyGameScore.API.csproj para aplicar as migrations no banco

    Nota: Caso ocorra algum problema com o comando anterior, verifique se está na pasta correta, pois isso inflencia no path do csproj da camada API passado como parâmetro.

    Por fim, rode a aplicação pelo Visual Studio clicando no botão com ícone play de cor verde "MyGameScore.API"

  10. Com os projetos do back-end e front-end rodando, já é possível realizar requisições para a api através do swagger ou através do front
  11. OBS.: Caso ainda haja algum problema de na execução do back-end, tente executar os comandos $ dotnet restore / $ dotnet build

Testando o back-end via Swagger (https://localhost:9000/swagger/index.html (ou qualquer outra plataforma de testes de API)):

  1. Antes de qualquer coisa, é necessário criar uma conta: realize uma requisição http post para a rota api/players e informe seu nome, email e uma senha contendo pelo menos 8 dígitos, sendo pelos menos um caractere especial, uma letra maiúscula, uma minúscula e um número
  2. Em seguida, realize o login através do método http put na rota api/players/login, informando seu email e senha, dessa forma será gerado um token, copie-o
  3. Por fim, para finalizar a autenticação, no Swagger, clique no menu "Authorize" localizado na parte superior direita da página e em "Value" preencha com "Bearer coleAquiOToken" (sem aspas, apenas para exemplificar => Bearer token), depois clique em Authorize
  4. Pronto, agora você já está autenticado e já pode realizar quaisquer requisições nas demais rotas da api

Nota: Rodando o back-end em ambiente Linux (necessário versão com suporte ao .NET Core 6 e SQL Server - recomendado Ubuntu 20.04):

  • Para rodar o back-end em ambiente linux, é necessário satisfazer os requisitos citados anteriormente (.NET SDK e Runtime, SQL Server e como uma opção ao SQL Server Management Studio, tem-se o Azure Data Studio (Acesse aqui o guia de instalação)
  • Para acessar o banco da aplicação com o Azure Data Studio, deve-se utilizar as credenciais do sql login, criadas ao instalar o sql server, e preencha os seguintes campos ao criar a nova conexão:
  • Connection Type: Microsoft SQL Server

    Authentication type: SQL Login

    User name: sa

    Password: insira sua senha do sql login

    Clique em Connect

  • OBS.: Antes de aplicar as migrations, altere a connectionString no arquivo appsettings.json, substituindo por:
  • "ConnectionStrings": { "MyGameScoreCs": "Server=localhost;Database=MyGameScore;User Id=sa;Password=suaSenhaDoSQLLogin" },

  • Por fim, realize o apply das migrations ($ dotnet ef database update -s ../MyGameScore.API/MyGameScore.API.csproj)
  • Execute a aplicação com $ dotnet run (dentro da pasta MyGameScore.API)
  • Preview:

    Swagger:

    Suas Partidas:

    Adicionando Partida:

    Editando Partida:

    Excluindo Partida:

    Quadro de Pontuações:

    Login:

    Cadastro:

    NotFound:

    © Thiago González

    About

    myGameScore.Front é um projeto Front-end desenvolvido utilizando a SPA ReactJS e o Axios para consumo da API do projeto MyGameScore.WebServices, disponível em https://github.com/Thiago-Gonzalez/MyGameScore.WebServices

    Resources

    Stars

    Watchers

    Forks

    Releases

    No releases published

    Packages

    No packages published