Site de jogos eletrônicos para uma loja fictícia. Feito com Django, MySQL e React.
As branches e pull requests foram preservadas para guardar o progresso de desenvolvimento de cada funcionalidade.
Resumindo, é necessário rodar a API e o Frontend separadamente, seguindo os passos abaixo.
No futuro, há planos para rodar o projeto com Docker, usando apenas 1 comando: docker-compose up
.
Requisitos:
O projeto usa comandos de terminal Windows PowerShell, mas é possível usar qualquer terminal de sua preferência. (Que tal tentar rodar o projeto no seu celular com Termux?)
python -m venv venv
.\venv\Scripts\activate
pip install -r requirements.txt
python manage.py migrate
python manage.py loaddata dados_iniciais
.env
na pasta raiz do projeto e insiraDJANGO_SECRET_KEY="insirasuasecretkeyaqui-4629f2d1f561fe23c6062f522f5c37093c20eea0"
DEBUG=True
DESCONTO20=desconto-smart-games-20-a2468cb34a5bf75d9861628d258d1f01
DESCONTO50=desconto-smart-games-50-0b767dc57983564719fef11542173554
DESCONTO70=desconto-smart-games-70-69dd604b962e9def4eee5e1b54d2fe50
python manage.py runserver 0.0.0.0:8000
localhost:8000/admin
no seu navegador e entrar com usuário admin
e senha secret
(por favor mude o usuário e senha se rodar em produção)Agora você pode ver o backend funcionando e manipular os dados pelo painel de administração na rota /admin
da API.
cd .\frontend\
yarn
yarn dev --host
(note os IPs que o terminal indicar)localhost:5173
no computadorPara ver o app mobile (PWA), siga os passos a seguir:
http://ip.do.frontend:5173
) OBS: O celular precisa estar na mesma rede que o dispositivo que estiver rodando o projetoOBS: Para ler o QR Code pelo celular, pode ser necessário ativar a flag chrome://flags/#unsafely-treat-insecure-origin-as-secure
colocando IP do frontend. (ver issue sobre isso)
OBS: Essa seção ainda será melhorada, e provavelmente terá como rodar o projeto inteiro com Docker (docker-compose up
).
Após rodar a API:
http:localhost:8000/admin
com usuário admin
e senha secret
Endpoints da API
❌ significa não implementada ainda
GET /jogo
-> Lista de jogos completa
GET /jogo/:id
-> Jogo único
POST /jogo
-> Criar objeto no servidor ❌
GET /jogo/:id/new
-> Form para adicionar jogo ❌
GET /jogo/:id/edit
-> Form para editar jogo ❌
PATCH /jogo/:id/
-> Atualizar objeto no servidor ❌
DELETE /jogo/:id
-> Deletar objeto no servidor ❌
POST /jogo/:id/comprar
-> Criar registro em Compras
POST /desconto
-> Recebe QR Code e retorna se é válido ou não, se for, salva na sessão do usuário e aplica para a próxima conta
Após rodar o Frontend:
http://localhost:5173
Ver detalhes
Movido para CONTRIBUTE.md
Se desejar entender o projeto com mais detalhes, veja o arquivo CONTRIBUTE.md
Essa seção tem algumas referências usadas durante o planejamento do projeto para implementação
https://www.learnhowtoprogram.com/c-and-net/basic-web-applications/introduction-to-restful-routing
Mapa incorporado manualmente
OBS: É necessário fazer com todas as lojas manualmente
Redirect com coordenadas
https://www.google.com/maps?q=x,y
https://www.google.com/maps?q=shopping+tambore
Talvez converter string para formato que resulte em apenas 1 resultado
Bibliotecas
https://blog.bitsrc.io/top-5-map-libraries-for-react-in-2021-20a37ff5234
Google Mapas é requisito. Então outros mapas que não usam Google Maps estão descartados
Busca de coordenadas por string (Geocoding)
https://gis.stackexchange.com/questions/21890/does-leaflet-js-api-provide-a-geocoding-service https://wiki.openstreetmap.org/wiki/Nominatim
Biblioteca React: react-qr-reader QR Code desconto gerador:
047739d00bf17cd2f863ecaa7cc57c9a
desconto-smart-games
desconto-smart-games-047739d00bf17cd2f863ecaa7cc57c9a
qr-desconto.png
Pseudo código (Python)
if qr_code == "desconto-smart-games-047739d00bf17cd2f863ecaa7cc57c9a":
# Aplicar desconto
else:
# Avisar que QR code é invalido
Baseado na em uma plataforma conhecida
https://store.steampowered.com/wishlist
Talvez criar um GIF ou usar um vídeo como background no header