PO UI — O exemplo prático de sucesso

Published in

TOTVS Developers

7 min readJun 19, 2020

Desde o início da pandemia de Covid-19 no mundo, o desenvolvedor Hygor Podgornik pensou que seria muito importante “desenvolver um painel, site, ou algo do tipo, que mostrasse as estimativas de casos da doença ao redor do mundo”.

Ele explica que a ideia seria criar algo parecido com o jogo Plague Inc, cujo objetivo é que o jogador produza um vírus que afete o mundo inteiro.

Mas, calma, ele queria usar essa ideia para o bem. Vamos entender melhor: a ideia começou a ser colocada em prática no dia 05/06/2020, “por volta de umas 23h, enquanto eu via as primeiras notícias e tweets falando sobre a suspensão do portal oficial mantido pelo governo brasileiro, e também sobre a nova forma de divulgação dos dados que dificultava o entendimento da real situação do vírus no país”, disse Hygor.

No dia seguinte, 06/06, acordou bem cedo e começou a procurar maneiras de consumir os dados do vírus no país. Encontrou a API do Brasil.io, que disponibiliza os dados das 27 secretarias estaduais de saúde.

Ou seja, estava cada vez mais viva a ideia de “juntar todas as informações e adaptar, focando o desenvolvimento apenas no Brasil, e mostrando os dados da forma correta, para que qualquer cidadão pudesse acessar e ter um panorama geral de como o vírus estava se espalhando por aqui”, lembra Hygor.

“Comecei a estudar a documentação da API e realizar algumas requisições para entender como os dados seriam retornados para eu trabalhar no site, e aí foram surgindo as ideias de quais informações eu queria disponibilizar inicialmente”, ele afirma.

Primeiras ações

No próprio sábado ele abriu um novo projeto Angular e começou a fazer as requisições para a API e a construir, aos poucos, as telas que queria no projeto. “Terminei a versão 1.0 no domingo a tarde, e coloquei no ar. Comprei o domínio no domingo de manhã, contratei a hospedagem e aí, por volta das 18h, coloquei o site no ar e comecei a divulgar para o meu círculo de amigos”, afirma.

Quem estiver interessado, pode olhar o site aqui. O que pouca gente sabe são os desafios encontrados para tirar a ideia do papel. “O maior desafio foi encontrar um domínio com a palavra ‘coronavírus’ disponível”, brinca Hygor.

“Brincadeiras a parte, com certeza o maior desafio foi sintetizar a quantidade de dados que a API retorna e entender o que cada dado representa, porque não é simplesmente sair somando qualquer dado ‘A’ com qualquer dado ‘B’. É uma responsabilidade enorme entender o que cada coisa representa porque qualquer condição errada na hora de totalizar, acaba gerando uma informação incorreta para quem está buscando entender a situação da pandemia no país, além do fato de serem números grandes. Ou seja, qualquer soma errada dá um número gigantesco, que pode levar as pessoas a entenderem que a situação está pior do que parece”.

Desenvolvimento

Para criar a página e as abas que compõem o endereço web, Hygor explica que o desenvolvimento exigiu muita pesquisa.

“A minha ideia inicial era permitir que as pessoas pudessem pesquisar qual era a situação no país, qual era a situação no seu estado e qual era a situação na sua cidade”, diz o desenvolvedor.

E continuou: “Os dados são disponibilizados por estado e por cidade, então a minha ideia daria certo, porém, para entender melhor o funcionamento, inicialmente acabei trabalhando apenas com a aba que mostra o panorama no Brasil e a aba que mostra o panorama no Estado.”

Na aba “Brasil”, ele tinha em mente que, pelo menos, duas informações tinham que estar muito bem visíveis (novos casos e novas mortes). Ele explica que, de certa maneira, foi por causa dessas duas informações que a ideia tomou forma.

Para as outras informações, ele quis chamar a atenção do público para a situação em que o Brasil estava, com os baixos índices de isolamento. “Aquela seção de 3 blocos ao lado de ‘casos e mortes’ é para tentar chamar a atenção para o fato de que quase o país inteiro tem casos do vírus, e que isso deveria ser muito preocupante. Eu queria despertar um ‘meu deus, a coisa tá ficando muito séria’ nas pessoas que vissem que 80% dos municípios brasileiros têm casos”, disse.

Sobre a ideia dos gráficos de linha, elas surgiram, para acompanhar a curva de contaminação. “Assim poderemos ter uma noção de quando começar o achatamento dela. E os gráficos de barras acabam trazendo um histórico dos novos casos, assim conseguimos olhar e ver se os novos casos tem aumentado ou diminuído”.

Já na aba “Estados”, a ideia era que o leitor acessasse e pudesse entender a situação do seu estado isoladamente, pois dessa maneira a pessoa tem um panorama de como o vírus vem se comportando”.

Ele ainda tinha mais coisas para fazer: “adicionei os gráficos geolocalizadores nesta seção pois podemos ver as informações de contaminação isoladas por estado e é bem fácil de perceber qual estado está mais afetado, e qual está menos afetado”.

Outro ponto importante: “também coloquei uma tabela informando os novos casos e novas mortes isoladamente nos estados, e nos detalhes é possível ver esses números em forma de gráfico, com a mesma ideia do gráfico de barras na aba Brasil, trazendo o histórico dos novos casos e novas mortes para entender se a situação está se agravando ou não.

Ele explica, ainda, que, ao final dessa aba, há gráficos de rosca, que mostram os oito estados com mais contaminação e mortes desde a última amostra dos dados. “Nesse gráfico eu quero mostrar para quem acessa que o estado essa pessoa mora pode ser responsável por, por exemplo, 50% dos novos casos”, explica.

E na aba ‘Como se prevenir’, a ideia, segundo Hygor, era chamar a atenção para as formas de prevenção no aumento de novos casos e mortes. “Nada mais justo que mostrar como o vírus vem se espalhando rapidamente pelo país, mas também mostrar como você, que acessa, pode contribuir para o achatamento da curva. Então peguei algumas animações bonitinhas que chamariam a atenção do público para, assim, tentar de alguma forma diminuir a curva. Por mais triste que seja, essa é a aba do site com menos acessos”, lamenta o dev.

PO UI

Todo o projeto se baseou no PO UI, a biblioteca de componentes de código aberto da TOTVS, como explica o idealizador do site. “O PO UI é muito importante nesse projeto porque ele é muito simples e fácil de usar. Eu nunca tinha trabalhado com ele antes, mas com poucos minutos lendo a documentação e testando os componentes, eu entendi o funcionamento deles e comecei a desenvolver”, explicou Hygor

Ele conta que já conhecia a ideia por trás de Design Systems, mas não sabia que a TOTVS tinha um projeto open source sobre isso. “Como eu já estudo e desenvolvo em Angular há uns 2 anos, me interessei por um episódio do podcast Hipsters On The Road, que abordava o assunto.

Ele lembra que quando ouviu um dos participantes do podcast comentando que estava testando a documentação e tinha inúmeros componentes, a decisão foi imediata.

“Não me aguentei, abri a documentação e fiquei simplesmente fascinado. Já tinha colocado em mente que meu próximo projeto seria usando o PO UI, mas até então não tinha nenhum projeto em mente para começar a trabalhar. Aí, quando surgiu a ideia de desenvolver esse portal, já era certo que eu usaria o PO UI, pois ia unir o útil ao agradável. Foi muito fácil desenvolver toda a aplicação com ele e eu não precisei ficar me preocupando com 500 mil linhas de CSS para deixar a aplicação incrível aos olhos.”

No final do sábado, dia 06 de junho, ele já tinha um módulo pronto e estava iniciando o desenvolvimento em outro. “Sem a facilidade e boa documento do PO UI isso não seria possível. Outra coisa que eu achei fascinante foi o lance da responsividade. Sabemos que hoje em dia os sites precisam ser responsíveis, e nesse projeto a importância era ainda maior”, disse Hygor.

E sabe o motivo? “Porque o link ia ser compartilhado nos grupos de whatsapp, facebook, twitter, então era essencial que ele fosse responsivo”, explicou. “Eu nunca tive muita facilidade com a responsividade da página, e lembro que quando terminei de desenvolver o primeiro módulo fiquei com um pouco de medo de colocar no modo responsivo porque imaginei que todos os gráficos iriam quebrar”, lembra com medo.

Porém, a resposta foi outra. “Eles ficaram bonitinhos lá. Com certeza é uma biblioteca que agrega muito para nós, desenvolvedores, por conta de todo o estudo que é feito em cima dela”.

E se engana quem pensa que o projeto está concluído. “Eu ainda estou trabalhando no projeto um pouco por dia, lancei a versão inicial para pegar a onda das notícias sobre possível manipulação dos dados por parte do governo, então, aos poucos, vou adicionando os novos pontos”, afirmou

Ele enfatiza, ainda, que quer melhorar a aba de cidades, para que as pessoas possam ter um panorama de como a situação está em cada cidade e, quem sabe, assim, possam contribuir cada vez mais para o achatamento da curva de contaminação e mortes da Covid-19.

“Talvez eu coloque um gráfico de linha para vermos a curva de contaminação na aba dos estados. E penso na possibilidade de fazer uma linha do tempo animada, parecida com a que possui no portal desenvolvido pela microsoft, porém com foco no Brasil.”

Todo esse trabalho tem um objetivo nobre, “única e simplesmente ajudar a levar a informação certa para os brasileiros que se interessarem em saber sobre a disseminação do vírus no país. Nesse momento difícil que estamos enfrentando é essencial que saibamos, sem manipulações, pelo que estamos passando, para que nós possamos tomar nossas decisões com um pouco mais de certeza, e não simplesmente pelo que os meios oficiais estão expondo”, completa.