230% aumento da eficiência dos dados geográficos através de mapas interactivos na Web

O Grupo Innowise desenvolveu um mapa SVG leve para visualizar dados geográficos e monitorizar os projectos internacionais do cliente.

Cliente

Indústria

Fintech, Governo

Região

EUA

Cliente desde

2022

O nosso cliente é uma das instituições financeiras mais proeminentes, que concede subvenções e empréstimos a projectos públicos e privados importantes. Com mais de 100 sucursais em todo o mundo, oferece soluções sustentáveis que visam diminuir a pobreza através da realização de projectos de capital.

As informações pormenorizadas sobre o cliente não podem ser divulgadas ao abrigo das disposições do NDA.

Desafio: Ultrapassar o peso da papelada com a visualização interactiva de dados de mapas

Desde a sua fundação, o nosso cliente supervisionou milhares de projectos financeiros, sociais, energéticos, educativos, ambientais e outros, em parceria com governos e empresas internacionais. O seu objetivo é reduzir a pobreza, aumentar a prosperidade partilhada e promover o desenvolvimento sustentável através do financiamento de projectos-chave de importância estratégica.

Embora o nosso cliente tivesse um fluxo de trabalho e uma apresentação de dados claros e completos, enfrentava desafios na análise e avaliação de informações textuais. Em vez de utilizar um mapa interativo visualização de dados para a análise dos dados, baseavam-se em relatórios de várias páginas, o que muitas vezes dificultava a tomada de decisões informadas.

Com uma carteira de projectos globais multifacetada, o nosso cliente procurava uma solução escalável, interactiva e personalizável com mapas geográficos para ajudar os clientes a rever rapidamente breves detalhes sobre os projectos actuais e a obter informações sobre áreas de interesse, incluindo regiões, países e áreas personalizadas.

Solução: Desenvolvimento de mapas interactivos que apresentam projectos personalizados em todo o mundo

Após analisar a solicitação do cliente, o Innowise sugeriu o desenvolvimento de um mapa SVG (scalable vetor graphics). Ao contrário dos mapas baseados em pixéis, os mapas SVG utilizam equações matemáticas para definir os elementos do mapa, o que permite aumentar e diminuir a escala sem qualquer perda de qualidade.

Quanto à visualização de dados de localização, as escolhas populares incluem bibliotecas como o Google Maps e o Open Street Maps. Os mapas SVG, no entanto, são leves, personalizáveis e isentos de licença, pelo que são uma boa escolha quando não é necessária uma resolução elevada nem um pormenor escrupuloso.

Depois de chegar a uma solução, a nossa equipa de projeto passou por várias fases subsequentes para fornecer mapas SVG interactivos.

DIVISÕES ADMINISTRATIVAS DE PRIMEIRO NÍVEL

Antes de nos aprofundarmos na lógica central, o Grupo Innowise clarificou as principais entidades que um mapa SVG ilustra. Para além de estabelecermos as fronteiras geográficas correctas dos países, tivemos também de assegurar divisões administrativo-territoriais precisas e actualizadas. Por exemplo, diferentes países estão divididos em várias divisões administrativas, como os estados nos EUA, as províncias no Canadá e as regiões em França.

Consequentemente, o nosso objetivo era recolher dados cartográficos precisos do Natural Earth que reflectissem estas variações administrativas regionais. O Natural Earth é um repositório de mapas gratuito que fornece dados raster e vectoriais a escalas de 1:10m, 1:50m e 1:110 milhões, e serve como modelo de base adequado para a criação de mapas digitais visualmente apelativos e elaborados com perícia utilizando software SIG.

DE SHP PARA SVG

Depois de escolher os modelos de mapas adequados, a nossa equipa de projeto converteu os ficheiros shapefiles multiformato originais (SHP) em gráficos vectoriais escaláveis. Estes gráficos forneciam caminhos para cada divisão administrativa e eram representados por um ficheiro SVG, que é um ficheiro XML que contém objectos geométricos como círculos, linhas, quadrados, entre outros. Estes objectos foram incorporados como etiquetas SVG, o que garantiu que as imagens se mantivessem suaves e proporcionais.

GUIÃO DE PITÃO

Embora cada entidade no ficheiro SVG tenha a sua própria etiqueta de caminho, organizar os dados de forma sistemática seria mais eficiente para cumprir os requisitos do projeto. Ordenámos os dados do ficheiro SVG por ordem alfabética, por país e divisão administrativa, utilizando um Script Python. O resultado foi um conjunto de dados que continha mais de 4500 divisões administrativas de primeiro nível localizadas em 153 países em todo o mundo, onde o cliente tem projectos em curso ou planeia investir fundos.

DA REFACÇÃO DE CÓDIGO À APLICAÇÃO WEB PROGRESSIVA

Depois de carregar os dados do mapa SVG para compilação, o tamanho do ficheiro excedeu os 16 MB de texto puro. Uma vez que a digitalização meticulosa causaria congelamentos, falhas e outros problemas de desempenho, os nossos especialistas decidiram utilizar Javascript para transformar o mapa interativo numa aplicação Web progressiva. Assim, a nossa equipa de projeto incorporou os ficheiros SVG na marcação HTML. No entanto, uma vez que o código excedia as 4500 linhas, os nossos engenheiros de software adicionaram frames em linha (elementos HTML que carregam outra página HTML dentro do documento) e um ficheiro HTML separado contendo SVG. Isto ajudou a otimizar a carga do sistema e a garantir um bom desempenho. Além disso, criámos um servidor local para permitir pedidos de origem cruzada de vários utilizadores.

INTERFACE DO UTILIZADOR

Além disso, a nossa equipa de projeto criou uma interface de fácil utilização para facilitar a navegação no mapa. Colorimos o mapa, especificando as tonalidades em função do número de projectos num determinado país. Além disso, os nossos programadores criaram filtros práticos para procurar projectos específicos, destacando regiões com base no estado do projeto (ativo, encerrado, suspenso). Os projectos são categorizados de acordo com os seus objectivos (proteção social, saúde, agricultura, energia, etc.), países de aplicação e custo acumulado. Depois de especificar os projectos, os utilizadores podem descarregar relatórios em PDF para os conhecer melhor.

De um modo geral, o Grupo Innowise implementou funcionalidades como fundos de mapas (topográficos, imagens com etiquetas e outros), configuração de mapas (por defeito em 2D ou em forma de tabela), capacidades de pesquisa avançada (com base no nome do local ou em coordenadas geográficas em graus decimais/formato DMS) e opções de zoom in/out.

Tecnologias

Front-end

React, React-query, MaterialUI, D3.js

Back-end

Node.js, Express.js, Python

Base de dados

MongoDB

VCS

Github

DevOps

Docker, Jenkins, AWS

Processo

Durante todo o processo de desenvolvimento do software de mapeamento de negócios, o Innowise aderiu a abordagens ágeis e se alinhou às necessidades do cliente. A equipa do projeto seguiu a metodologia Scrum com sprints semanais, reuniões diárias da equipa e integração e testes contínuos. Ao comunicar com o cliente através do Microsoft Teams, acomodámos facilmente as alterações no âmbito e distribuímos as tarefas de acordo com as competências dos membros da equipa.

Seguindo a visão do projeto, lançámos um MVP completo com funcionalidades básicas. Atualmente, o cliente está a considerar adicionar novas funcionalidades e integrar o mapa SVG com serviços externos, com a nossa equipa a prestar apoio e manutenção pós-lançamento.

Equipa

Analista de negócios

Gestor de projectos

Programadores front-end

Programadores back-end

Designer UI/UX

DevOps

Engenheiros de GQ

Resultados: Melhoria da transparência, escalabilidade e interatividade dos dados

O Grupo Innowise desenvolveu um software de mapa de negócios para monitorar informações sobre o projeto do cliente em todo o mundo. Fornecemos uma plataforma única onde o cliente pode gerenciar projetos em andamento, classificá-los por vários fatores e acessar os detalhes do projeto. Os belos mapas SVG que desenvolvemos oferecem ao cliente vários benefícios, tais como:

Escalabilidade. Como os mapas SVG são baseados em vectores, podem ser aumentados ou reduzidos sem perder qualidade ou ficarem pixelizados. Isto permite apresentar conteúdos em diferentes níveis de zoom ou tamanhos, oferecendo maior flexibilidade.
Interatividade. Os mapas SVG permitem que os utilizadores interajam com os elementos digitais clicando ou passando o cursor sobre diferentes elementos, apresentando dados associados a uma área geográfica específica.
Leve. Os mapas SVG são normalmente mais pequenos em tamanho de ficheiro do que outros formatos, como as imagens raster. Isto torna-os mais fáceis de carregar e apresentar numa página Web, garantindo uma experiência de utilizador sem problemas.
Personalização. A nossa equipa de projeto personalizou e estilizou o mapa utilizando CSS, permitindo um elevado grau de controlo sobre o aspeto do mapa. Isto permite que características específicas sejam realçadas e que o mapa corresponda à marca do cliente, oferecendo um toque personalizado.

Duração do projecto

junho de 2022 - Em curso

500+

projectos em 150 países

230%

aumento da eficiência dos dados geográficos

Casos relacionados

Contactar-nos!

Marcar uma chamada ou preencha o formulário abaixo e entraremos em contacto consigo assim que tivermos processado o seu pedido.

Nome

Empresa

Correio electrónico

Telefone

Mensagem Inclua os detalhes do projeto, a duração, o conjunto de tecnologias, os profissionais de TI necessários e outras informações relevantes

Gravar uma mensagem de voz sobre o seu
projeto para nos ajudar a compreendê-lo melhor

Anexar documentos adicionais, se necessário

Enviar ficheiro

Pode anexar até 1 ficheiro de 2MB no total. Ficheiros válidos: pdf, jpg, jpeg, png

Informamos que, ao clicar no botão Enviar, o Innowise's processará os seus dados pessoais de acordo com a nossa Política de Privacidade com o objectivo de lhe fornecer informações adequadas.

O que é que acontece a seguir?

Após termos recebido e processado o seu pedido, entraremos em contacto consigo para detalhar as necessidades do seu projecto e assinar um NDA para garantir a confidencialidade das informações.

Após a análise dos requisitos, os nossos analistas e programadores elaboram uma proposta de projecto com o âmbito dos trabalhos, tamanho da equipa, tempo e custos e custos.

Marcamos uma reunião consigo para discutir a oferta e chegar a um acordo.

Assinamos um contrato e começamos a trabalhar no seu projecto o mais rapidamente possível.

Precisa de outros serviços?

Serviços de desenvolvimento de software FinTech

AWS

Empresa de desenvolvimento de aplicações React Native

Empresa de desenvolvimento React.js

Serviços de consultoria de nuvem AWS

Serviços de consultoria FinTech

Soluções informáticas governamentais

Serviços de desenvolvimento de software de investimento

Empresa de desenvolvimento Python

Empresa de desenvolvimento de portais Web B2B

Empresa de desenvolvimento web personalizado

Empresa de desenvolvimento web Drupal

230% aumento da eficiência dos dados geográficos através de mapas interactivos na Web

Cliente

Desafio: Ultrapassar o peso da papelada com a visualização interactiva de dados de mapas

Solução: Desenvolvimento de mapas interactivos que apresentam projectos personalizados em todo o mundo

Tecnologias

Processo

Equipa

Resultados: Melhoria da transparência, escalabilidade e interatividade dos dados

Casos relacionados

Contactar-nos!

O que é que acontece a seguir?

Precisa de outros serviços?

Deixar^●s desenvolver
software em conjunto!

Fechar

230% aumento da eficiência dos dados geográficos através de mapas interactivos na Web

Cliente

Desafio: Ultrapassar o peso da papelada com a visualização interactiva de dados de mapas

Solução: Desenvolvimento de mapas interactivos que apresentam projectos personalizados em todo o mundo

Tecnologias

Processo

Equipa

Resultados: Melhoria da transparência, escalabilidade e interatividade dos dados

Casos relacionados

Contactar-nos!

O que é que acontece a seguir?

Precisa de outros serviços?

Deixar●s desenvolver software em conjunto!

Fechar

Deixar^●s desenvolver
software em conjunto!