O intuito desse desafio é construir uma pokedex em docker. Para consumir as informações foram usadas Axios, Hasura com GraphQL e o banco Postgres. Pode ser executado em formato web e mobile ( responsivo ).
https://youtu.be/-8puUqzLejw
- Necessário ter o docker instalado na sua máquina.
Na raiz do projeto execute o comando:
docker compose up -d
- ATENÇÃO: Necessário configurar o Hasura com GraphQL para salvar os pokemons no banco postgres, siga esses passos:
- Abra uma nova aba e digite
http://localhost:8080/console
- Dentro do console clique na guia DATA
- Clique no botão Connect Database
- Escolha o banco Postgres e clique em Connect Existing Database
- em "Database name" digite:
pokemon
- em "Connect Database via" marque : "Environment variable"
- Digite no campo "Environment variable":
HASURA_GRAPHQL_METADATA_DATABASE_URL
- Clique em Connect Database
- Clique no database, depois na pasta public e clique no botão criar tabela
- A tabela irá conter 3 colunas com os dados:
- id: Int
- name: Text
- image: Text
- Marque id para ser a chave primária ( Primary Key )
- Clique na guia API
- Depois clique na guia REST
- Clique em Create Rest
- Vamos criar a rota para buscar todos os pokemons salvos no banco ( no caso do seu time )
- Digite a query comando no editor GraphQL Request:
query poke {
team {
id
name
image
}
}
- Em URL PATH, coloque:
poke/team
- Marque o Method GET
- Repita o processo anterior até o editor GraphQL Request:
- Digite a query:
query team_by_pk($id: Int!) {
team_by_pk(id: $id) {
id
image
name
}
}
- Em URL PATH, coloque:
poke/team/:id
- Marque o Method GET
- Repita o processo anterior até o editor GraphQL Request:
- Digite a query:
mutation addPokemon($id: Int!, $name: String!, $image: String){
insert_team_one(object: {id: $id, name: $name, image: $image}) {
id,
name,
image
}
}
- Em URL PATH, coloque:
poke/addpokemon
- Marque o Method POST
- Repita o processo anterior até o editor GraphQL Request:
- Digite a query:
mutation delete_team_by_pk($id: Int!) {
delete_team_by_pk(id: $id) {
id
image
name
}
}
- Em URL PATH, coloque:
poke/team/:id
- Marque o Method DELETE
- ViteJS
- React
- Axios
- Docker
- Hasura
- GraphQL
- Postgres
- Criar projeto com o comando:
npm create vite@latest
- Requests com Axios
npm install axios
Para interromper a execução digite:
docker compose down
Build da imagem com a tag/nome (vite-react-app)
- docker build -t vite-react-app:latest .
Filtrar e exibir informações sobre imagens Docker que tenham "vite-react-app" em seu nome.
- docker images | grep vite-react-app
Rodando docker para desenvolvimento
- docker run -p 8082:8082 vite-react-app:latest