Esse desafio foi criado por mim com o objetivo de aplicar um método de estudo que eu chamo de Challenge First, que basicamente serve para criar uma familiaridade com algumas stacks novas em pouco tempo e um entendimento raso sobre elas, o objetivo é de desenvolver o gosto pela tecnologia, avaliando o que o conhecimento sobre como ela funciona pode te proporcionar e aumentar o pricipal combustível de estudo do ser humano, a curiosidade. As habilidades contempladas foram aquelas necessárias para desenvolver um projeto Full Stack. O resultado final é uma plataforma para registro de vagas para desenvolvedores pelos usuários e por um web scraping do site GetVagas para popular de forma automática o banco de dados SQL através de uma API.
Nesse desafio as principais tecnologias de estudo foram Django, React Native e Docker. Para desenvolver a maior parte do back-end foi utilizado o chatGPT como ferramenta de aprendizado e agilidade no desenvolvimento da área que tenho menos contato no dia a dia.
Essa aplicação foi pensada para ser um repositório de vagas que demonstre duas formas de registro e compartlhamento das mesmas, uma por web scraping de sites públicos que temos pela internet que divulgam vagas para Dev e também através de prenchimento de um formlário para compartilhar uma vaga específica. Faclitando e centralizando a procura de vagas pelos Devs em único lugar.
Abaixo estão os requisitos técnicos e as funcionalidades que a solução deve possuir:
- Front-End para representar o Aplicativo;
- Back-End em Python com rotas especificadas;
- Modelagem PostgreSQL;
- Listar todos as vagas;
- Registrar vagas;
- Filtrar vagas;
A solução do desafio foi separarada em duas partes: front-end e back-end, cada em sua respectiva pasta com as seguintes tecnologias principais:
React Native
Typescript
ReactHooksForms
Native Base
Axios
ReactQuery
Python
Django
Parsel
Requests
Pyngrok
Para facilitar o processo de rodar o projeto localmente. Recomendo seguir o passo a passo descrito a abaixo, após instalar o Docker e Docker Compose em seu notebook usando a própria documentação da ferramenta para o seu sistema operacional e instalar o App do Expo no seu celular. Em poucos passos você vai perceber que o projeto estará rodando em seu notebook com poucos comandos.
Vamos lá!
- Abra o terminal e crie um diretório no local de sua preferência com o comando mkdir:
mkdir docker-reactnative-django- Entre no diretório que acabou de criar e depois clone o projeto:
cd docker-reactnative-django
git clone https://github.com/dudawiltiner/reactnative-django-challenge.git- Entre no diretório criado após a clonagem do repositório.
cd reactnative-django-challenge- Garanta de remover todas os containers, volumes e imagens que você possui.
docker-compose down -v --rmi all- Limpar tudo que ainda tiver.
docker system prune -af- Instale todas as dependências e rode a aplicação, usando o CLI docker-compose.
docker-compose up --buildComo o React Native não aceita API consideradas não seguras, ex: "localhost:3000", temos que garantir a conexão criando o serviço pelo ngrok. Mas não se preocupe já você já tem esse link.
- Procure nos logs do seu terminal algo parecido com o texto abaixo.
python-api | ngrok tunnel "https://4389-189-33-65-158.ngrok.io" -> "http://0.0.0.0:3001"- Copie e cole o link encontrado após a palavra tunnel nos seguintes arquivos. Procure pela string "" e a substitua pelo link.
- front-end/services/api
- back-end/scraper.py- Abra uma outra aba do seu terminal, Entre no terminal do container python-api
sudo docker exec -it python-api /bin/sh- Crie as migrations para formar a tabela jobs.
python manage.py migrate- Se quiser ao invés de preencher pelo formulário na aplicação os jobs na mão. Você pode rodar um data scraping do site getvagas para popular o banco de dados com algumas informações.
save_jobs()- Clique em CTRL + D duas vezes para sair do terminal do container.
- No terminal haverá um QR code para você aproveitar a aplicação no dipositivo móvel no app EXPO. Pronto(a) para a diversão?
Após cada um dos passos a seguir, haverá um exemplo de como cada página pode ser usada, caso tenha dificuldades e o exemplo não seja suficiente, não hesite em me contatar em eduardawiltiner@gmail.com.
Logo abaixo eu disponibilizo um vídeo sobre o uso do App já integrado com a API, para te orientar a como testa-la localmente.
Com o Django Rest Framework temos como testar e olhar a documentação playground da ferramenta. Isso facilita com os testes acessando o seguinte link.