Vamos construir um serviço com rabbitmq, uma api em nodejs e um aplicativo em react native
Está é apenas uma POC de um projeto com objetivo de buscar e exibir os preços mais recentes do bitcoin em tempo real..
Desenvolvi esse projeto para reforçar meu conhecimento com filas e mensageria, e bibliotecas de animação.
Docker: Serão executado 2 containers respectivamente, do rabbitMQ e do mongodb.
Para criar os containers docker, siga estas etapas simples:
- Vá para a raiz do diretório btc-candle-generator para criar o container docker do rabbitmq:
docker compose up -d
- Vá para a raiz do diretório btc-candle-api para criar o container docker do mongodb:
docker compose up -d
Mensageria: O serviço de mensageria foi feito utilizando rabbitMQ, ao qual buscamos os valores do preço do bitcoin na API da coingecko.
Principais tecnologias que utilizei para desenvolver esta aplicação
Para instalar e configurar uma cópia local, siga estas etapas simples:
Para garantir o funcionamento adequado da nossa aplicação, verifique abaixo:
- Clone o repositório:
git clone https://github.com/williamjayjay/poc-RN-Node-RabbitMQ
-
Navegue na raiz do projeto btc-candle-generator:
-
Instale os módulos:
bun i
-
Copie o .env de exemplo:
-
Instale o PM2 para rodar o serviço em segundo plano:
npm install pm2 -g
- Rode o build do projeto:
npm run build
- Execute o arquivo json do PM2 na raiz do projeto:
pm2 start pm2.json
-
Conectar ao rabbitmq
-
Buscar o preço do bitcoin em dollar
-
Executar regra para buscar o preço do bitcoin a cada 30 segundos realizar 3 buscas e enviando para a fila os 3 preços
-
Manter sessão ativa em loop, sem quebrar o serviço
Terminal PM2 | Terminal Docker(RabbitMQ e MongoDB) |
---|---|
API: A api realiza a conexão com o canal do rabbitmq para receber o serviço de mensageria
Principais tecnologias que utilizei para desenvolver esta aplicação
Para instalar e configurar uma cópia local, siga estas etapas simples:
Para garantir o funcionamento adequado da nossa aplicação, verifique abaixo:
- Clone o repositório:
git clone https://github.com/williamjayjay/poc-RN-Node-RabbitMQ
-
Navegue na raiz do projeto btc-candle-api:
-
Instale os módulos:
bun i
-
Copie o .env de exemplo:
-
Rode o build do projeto:
npm run build
- Inicie o PM2 para iniciar a api em segundo plano:
pm2 start pm2.json
-
Conectar ao mongodb
-
Iniciar a api
-
Iniciar serviço para consumir mensagens da fila do rabbitmq
-
Salvar no mongodb as mensagens entregues pelo rabbitmq
-
Emitir a mensagem via websocket com socket.io
Aplicativo: O app recebe os preços do bitcoin via api REST e também via socket.io.
Principais tecnologias que utilizei para desenvolver esta aplicação
- Typescript
- SocketIO
- React-Native-Toast-Message
- React-Native-SVG
- React-Native-Safe-Area-Context
- React-native-Redash
- React-Native-Reanimated
- React-Native-Gesture-Handler
- TailwindCSS
- Native-Base
- Expo-Font
- Expo-AV
- DayJS
- D3-Scale
Para instalar e configurar uma cópia local, siga estas etapas simples:
Para garantir o funcionamento adequado da nossa aplicação, verifique abaixo:
- Clone o repositório:
git clone https://github.com/williamjayjay/poc-RN-Node-RabbitMQ
-
Navegue na raiz do projeto rn-bitcoin-viewer-analytcs:
-
Instale os módulos:
bun i
-
Copie o .env de exemplo:
-
Rode o aplicativo:
bun android
-
Iniciar o aplicativo e verificar se há ou não dados das velas do bitcoin, caso haja exibir o gráfico de velas, caso não exibir mensagem sobre nenhum dado carregado
-
Conseguir visualizar o preço do bitcoin em velas candlesticks
-
Exibir animação das velas quando carregadas da api
-
Receber a cada 1 minuto e 30 segundos novas velas via websocket
- Soar som de moeda e exibir toast notification quando chegar uma nova vela via websocket
-
Ao clicar no botão da lupa, alternar a exibição entre 3, 6 e 9 últimas velas enviadas pela API Rest e pelo SocketIO
-
Ao clicar em uma das velas, deve selecionar a mesma, alterar ícones na parte inferior
-
Ao clicar em uma das velas, deve exibir na parte superior os preços de abertura, fechamento, mais alto e mais baixo e também a data e hora que foi gerada aquela vela.
UI e UX feita baseada em aplicações ja existentes no mercado e em modelos existentes em plataformas como dribble e behance.
-Link para vídeo com o som que exibe ao chegar uma nova vela no gráfico Video-React-Native
Tela de início | Tela de início (6) |
---|---|
Tela de início (3) | Tela de início Full |
---|---|
Tela nenhum dado carregado |
---|