Criação de um aplicativo utilizando Dados Abertos do Governo com Angular 7 (Parte 1)

A proposta deste artigo é iniciar uma série de publicações para construção de uma aplicação Web em Angular 7 que consuma dados de uma API Rest a partir do serviço de dados de uma instituição pública.

Contextualizando

Dados abertos podem ser acessados livremente, modificados e compartilhados para qualquer finalidade. Essa definição, proposta pela Open Knowledge International, ainda é composta por diretrizes de como organizar, publicar e manter esses tipos de dados.

A razão para o fomento da prática está na transparência da gestão pública, contribuindo para uma participação mais efetiva da sociedade nos investimentos e gastos do dinheiro público (“Não existe essa coisa de dinheiro público, existe apenas o dinheiro dos pagadores de impostos.[Margareth Thatcher]”)

No Portal Brasileiro de Dados Abertos, site disponibilizado pelo governo federal que permite encontrar e utilizar os dados e informações públicas é possível realizar pesquisas utilizando filtros (‘etiquetas’) e formatos (fig. 1)

Figura 1 — Portal Brasileiro de Dados Abertos — Filtros

Infelizmente, nem todas as organizações distribuem as informações conforme as diretrizes dos dados abertos. Ainda há bastante arquivo em PDF.

Nas minhas pesquisas para definição de um escopo, onde e quais dados seriam consumidos, acabei encontrando uma ferramenta do meu estado, o Paraná.

A ferramenta disponibilizada no site Portal de Transparência permite o consumo de “informações do tema e do assunto selecionado, de forma irrestrita e estruturada”. Exatamente, como rege os princípios dos dados abertos.

Realizada as considerações iniciais, mãos à obra.

Iniciando o projeto

Para iniciar a criação do projeto utilizando o Angular 7, você pode instalar através do gerenciador de pacote, NPM, a última versão.

Nessa postagem você encontra o passo a passo como preparar o ambiente, o que é basicamente instalar o NODE e logo após, abrir um terminal e digitar:

Espere finalizar o processo e informe no terminal:

> ng version

Instalado a versão 7:

Image for post
Image for post

O próximo passo é criar o projeto utilizando a ferramenta Angular CLI.

Para isso, ainda no terminal, certifique de posicionar o cursor no caminho de preferência de seus projetos. No meu caso, estou em:

Image for post
Image for post

Vamos informar:

> ng new

A novidade da versão é a interação do processo. Na verdade, nas versões anteriores bastava utilizar parâmetros na criação do projeto.

Oconsole solicitará o o nome do projeto:

Image for post
Image for post

Informei como transparencia-pr, após o enter, foi solicitado a possibilidade de incluir o arquivo de rota, coloquei Y.

Image for post
Image for post

Finalmente, o formato para usar estilos, deixei como CSS.

Image for post
Image for post

Aguarde a finalização do processo, entre no diretório do projeto criado e execute o server, através dos passos seguintes:

> cd transparencia-pr> ng serve -o

Se tudo deu certo será aberto no navegador a seguinte página:

Finalizando, deixo o link de 2 artigos nacionais sobre o Angular 7:

a) Angular 7 — Novas Funcionalidades de Thiago Adriano e

B ) Angular 7, mas já? de André Rodrigues

Além do blog oficial:

Version 7 of Angular — CLI Prompts, Virtual Scroll, Drag and Drop and more

Na próxima, postagem, vamos criar o serviços que acessam os endponts do portal de transparência.

Repositório no GIT.

Parte 2

Até +.

Written by

Professor e desenvolvedor

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store