Saiba como foi o desenvolvimento do aplicativo do Visite Queluzito
O aplicativo Visite Queluzito foi desenvolvido pela Second Mind para a Prefeitura de Queluzito com o objetivo de incentivar o turismo e o comércio local. Neste artigo você conhecerá um pouco sobre a fase de desenvolvimento da versão web e do aplicativo Visite Queluzito.
O aplicativo Visite Queluzito foi criado para divulgar eventos, rotas, atrações turísticas, gastronomia e a rede hoteleira da cidade. Seu objetivo é valorizar a cultura, o esporte e os empreendimentos locais. Para isso, identificou-se a necessidade de um aplicativo com excelente usuabilidade, visual e intuitivo.
A Second Mind se empenhou para atender a proposta da Prefeitura de Queluzito fazendo o melhor aproveitamento dos recursos tecnológicos.
Desenvolvimento Back-end
O back-end do Visite Queluzito foi feito utilizando a tecnologia Asp Net Core 5 com C#. A arquitetura da aplicação baseia-se no modelo Mvvm (Model-View-View-Model). A vantagem da utilização desta arquitetura é o isolamento do código em camadas mantendo um alto nível de desacoplamento de código e seguindo os princípios do Clean Code. Vale lembrar que o projeto utiliza para comunicação com a base de dados o Entity Framework Core, que é um ORM, muito utilizado pela comunidade de desenvolvimento .NET.
Para garantir uma boa performance da parte de rotas turísticas, foi feita uma excelente estruturação da rota de dados. Isso foi essencial para facilitar a consulta de dados e gerar informações para a montagem das telas.
Outro desafio enfrentado pelo back-end foi o armazenamento da galeria de imagens de locais, visto que as imagens enviadas são de qualidade alta, o que tornou o tráfego das imagens complexo. Foram feitas diversas tentativas de otimização, desde alterar a forma de envio, como a forma de armazenamento. Até que por fim, chegamos a conclusão que o melhor era realizar o envio da galeria de imagens sob demanda de forma assíncrona para não travar a execução do processo principal da api, o que tornou a usabilidade da tela de locais muito melhor.
Desenvolvimento Front-end
O desenvolvimento front-end do Visite Queluzito foi dividido em duas partes:
A aplicação Web (visitequeluzito.com.br) feita utilizando da tecnologia do NextJS. O NextJS tem em sua base o React, que é uma biblioteca JavaScript de código aberto, desenvolvida e mantida pelo Facebook. A vantagem do Next é que sua renderização é feita do lado do servidor que o Next possui. Assim, possibilita que o robô faça buscas em motores de pesquisa como o Google, e tenha o conteúdo disponível.
No Visite Queluzito existem perfis de usuários, as chamadas Roles, onde cada usuário possui um perfil e esse perfil tem telas específicas que podem ser acessadas por uma ou várias Roles. No Visite Queluzito existem 3 Cadastros principais. São eles: Cadastro de Rotas, Cadastro de Locais e Cadastros de Eventos.
Uma das bibliotecas mais importantes utilizadas no projeto é a Leaflet, que é o mapa usado para a exibição das Rotas, Eventos e Locais. Um dos desafios enfrentados no desenvolvimento ocorreu com esta biblioteca de mapas. Isso porque, a biblioteca é feita para Client-Side, ou seja, necessita do Navegador, mas com o Next inicialmente ocorrem erros. Para sua utilização, foi necessário a importação dinâmica do Next para indicar que este componente não usaria do SSR (Server-Side Rendering).
Na aba de locais há a possibilidade de adicionar várias imagens para um local. Em seus detalhes ocorria lentidão ao baixar as imagens. A princípio, todas imagens vinham juntas aos dados do local, foi alterado para que elas viessem todas separadas após a busca dos locais. Dessa forma, a busca de imagens é feita uma a uma, enquanto os outros dados já estão carregados. Isso otimizou bastante a performance desta tela.
Foram feitas muitas análises para desenvolver um modo de gerar rotas no mapa, pois por serem rotas offroad, as estradas mapeadas pelo Google Maps não alcançavam. Então, foi desenvolvido usando pontos no mapa, esses vários pontos são marcados no mapa e ligados entre si.
Assim, formam o traçado da rota e possibilitam também a compreensão da orientação da rota, por saber onde começa e onde termina. Também é possível mensurar o tamanho da rota com precisão, sendo usada para isso a biblioteca Javascript Geolib, usando a função getPreciseDistance, onde passamos dois pontos e ela retorna a distância entre eles, e isso é feito para cada ponto da rota utilizada.
O Visite Queluzito também utiliza as APIs do Google Maps e do WhatsApp, usadas para levar o usuário até a localização de um ponto de evento ou de um local turístico. E com a integração com o WhatsApp, a pessoa já consegue entrar em contato diretamente com o responsável do local ou do Evento.
Os Apps Mobile do Visite Queluzito foram desenvolvidos utilizando o React Native. No React Native, com uma mesma base de código, consegue-se gerar aplicativos multiplataforma para Android e iOS, que é o caso do Visite Queluzito, disponível em ambas as plataformas.
Assim como na aplicação Web, as telas dos aplicativos respeitam as Roles dos Usuários, mostram para cada perfil as áreas que eles podem ter acesso, ou seja, a área de administração do aplicativo só pode ser vista e usada por usuários Administradores.
Nele foi feita a integração com o Google Maps para toda área de mapas do aplicativo por meio da biblioteca React Native Maps. Foi elaborada toda uma configuração no console do Google, gerados tokens de segurança que são usados pelos aplicativos para conseguirem integrar e exibir os mapas corretamente.
Os aplicativos utilizam o Expo, que é um conjunto de ferramentas e de serviços construídos de plataformas Nativas e do React Native. O Expo é um facilitador, que ajuda na construção, implantação e configuração dos aplicativos para as determinadas plataformas. Com o Expo, toda a parte de configuração das bibliotecas que ele tem o suporte é feita de maneira automática aumentando o rendimento.
Um dos desafios no desenvolvimento ocorreu na área administrativa, na etapa de cadastrar novas rotas. Se não houvesse conexão com a rede, o salvamento da rota não ocorria, com a possibilidade de perder esse cadastro.
Portanto, foi desenvolvida uma funcionalidade muito importante. Ao salvar a nova rota, o celular verifica se há ou não conexão com a Internet, se houver ele já envia os dados para o servidor para serem salvos e assim salva-os normalmente. Caso não haja conexão com a rede no momento, esses dados são salvos no asyncStorage do aparelho e ficam ali guardados. Quando o administrador reabrir o aplicativo com rede, é feita uma busca se há rotas salvas em memória, havendo, o celular conectará com servidor de backend e salvará os dados.
O aplicativo também conta com a funcionalidade das Push Notifications, que são as notificações que são enviadas para os usuários que selecionaram que desejam recebê-las na tela de configurações de notificações. Foi utilizada a biblioteca do Expo Notifications para a configuração no aplicativo e geração dos Tokens únicos que são usados para identificar o celular que irá receber a notificação, configuração essa que é utilizada ao logar-se e após isso o celular já estará apto a receber as notificações.
O Visite Queluzito tem um ótimo desempenho e já é um sucesso entre a população local e turistas da região. Novas funcionalidades podem ser desenvolvidas para explorar ainda mais os objetivos do projeto. Além disso, o aplicativo pode ser replicado e ajustado para atender as necessidades de outros clientes. Entre em contato conosco e conheça as possibilidades de desenvolvimento personalizadas que oferecemos para você!
Aponte a câmera do seu celular para o Qr Code e baixe o aplicativo!
