O Interno Rotas é um site que vem para facilitar a locomoção de pessoas dentro do Campus Pampulha da UFMG, sejam elas parte da comunidade acadêmica ou não. O projeto surgiu a partir de uma necessidade que eu mesmo tinha quando precisava usar os ônibus internos da UFMG. No site disponibilizado pela universidade consta as rotas, horários e locais que os ônibus passam, porém a informação muitas vezes não é intuitiva. Para pessoas pouco familiarizadas com o ambiente da UFMG fica muito difícil se orientar pelo site, já que são mostradas apenas as siglas de onde o interno passa próximo.
Por conta disso, achei que seria interessante criar um site que pudesse ser útil tanto para os colegas da comunidade acadêmica como também para o público externo que precise, em algum momento, usar os ônibus internos.
Caso tenha gostado do projeto e encontrado pontos de melhorias, fique a vontade para ajudar!
Para tornar real o projeto foram utilizadas as seguintes tecnologias:
- HTML
- CSS
- JavaScript
- OpenStreetMap (API de mapas)
- Leaflet (biblioteca javascript de mapeamento)
- Leaflet Ant Path (animação da polyline)
O projeto pode ser acessado através deste site, hospedado no GitHub Pages.
Seção com o layout do projeto. O layout serve para auxiliar no desenvolvimento do código, servindo como guia e economizando tempo. O layout serve apenas para se ter uma ideia e referência, não sendo necessário que seja perfeito. O design do projeto pode ser visto com mais detalhes aqui no Figma.
A medida que fui desenvolvendo o código do projeto fui notando a necessidade de fazer algumas adaptações, portanto o design final está ligeiramente diferente do mostrado aqui. Por enquanto irei deixar o layout antigo aqui apenas por curiosidade, para ver quais mudanças foram feitas.
Tela inicial em que o usuário consegue ver o mapa ao fundo, com as linhas internas em uma painel lateral. Cada linha tem sua cor única, para facilitar sua identificação. Na tela não é possível ver, mas o menu lateral conta com scroll para ver mais linhas e um botão de reportar problemas e outro para exibir informações sobre o projeto.
Tela em que o usuário escolhe uma linha específica. Com isso, é exibida o horário anterior e o próximo horário daquele interno. O usuário também pode escolher se deseja ver mais horários daquela linha.
Nesta tela são mostrados todos os horários em que aquela linha roda.
Pensando no fato de a maioria das pessoas utilizarem o celular, foi feito o layout com as mesmas funções, porém adaptado para as telas de celulares e outros dispositivos com telas pequenas. A responsividade deve ser trabalhada nesse projeto para melhorar a acessibilidade.
Requisitos mínimos e importantes levantados até o momento para o desenvolvimento do site.
- Mostrar mapa que tenha nome dos prédios e pontos
- Menu lateral com nome das linhas
- O usuário deve ver um traçado por onde as linhas passam, além de poder dar zoom para ver as informações
- As linhas devem ser separadas com cores, além de representadas as suas subdivisões
- O site deve ser completamente funcional em celulares e aparelhos com telas pequenas
A ideia inicial é terminar primeiro o básico para ter o site funcional, com as demais funções sendo implementadas ao longo do tempo.
- Cada ponto de parada no mapa exibir quais ônibus param naquela parada
- Mostrar horário dos ônibus de cada linha selecionada
- Mostrar horário do ônibus anterior e do próximo ônibus
- Criar base de comunidade para levar a aplicação para outras universidades que contam com linhas internas mas que não tenham as suas rotas.
Este projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.
LinkedIn | Instagram | Behance
Desenvolvido com 💙 por Igor Martins
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent