Descrição e Objetivo • Ferramentas Utilizadas • Instalações e Configurações Necessárias • Como Executar o Projeto • Funcionalidades • Desenvolvedores
A plataforma SIGTIBA reúne informações geográficas da cidade de Curitiba espacializadas em um webmapa, trazendo resumos didáticos sobre o processo de urbanização da cidade, zoneamento vigente, legislação ambiental e planejamento urbano. O objetivo do projeto é que através da integração entre a leitura dos textos e a espacialização no mapa, o usuário equipe-se de um conhecimento maior sobre tais temáticas urbanas, as quais são fundamentais no processo de formação de um cidadão.
QGIS 3.14
qgis2web plugin 3.16.0
Leaflet 1.7.1
JavaScript, CSS 3 e HTML 5
Bootstrap 5.0
SO: Windows 10
Node.js 14.16.0
MongoDB Community 4.4.4
Caso esteja interessado em executar o projeto com o maior aproveitamento possível, verificar o código-fonte ou até mesmo otimizá-lo, aqui vai um tutorial do que é necessário ser feito para preparar o ambiente de desenvolvimento.
Para a interpretação do HTML, CSS e JS em conjunto é necessário um navegador o qual exibirá nosso projeto. Nesse sentido, faça o download da aplicação de sua escolha, recomendamos o uso do Google Chrome.
Como editor de código-fonte, foi utilizado o VSCode, uma poderosa ferramenta com inúmeras funções as quais auxiliam desenvolvedores. Para fazer o download do mesmo acesse VSCode Download, selecione seu sistema operacional e prossiga a instalação da maneira que já vem previamente recomendada.
Ambos os frameworks já têm seus arquivos alocados na pasta de nosso projeto, não sendo necesário o download ou instalação dos mesmos. Entretanto, caso seja do interesse, o link para o sie oficial de ambos com o download e a documentação é Bootstrap e Leaflet.
Para auxiliar no desenvolvimento do back-end foi utilizado o Node.js, um interpretador de JavaScript que não depende do navegador. Para instalá-lo, acesse Node.js e selecione a versão LTS corresponde ao seu sistema operacional. Durante o processo de instalação prossiga da maneira que já vem previamente recomendada.
O banco de dados usado no desenvolvimento foi o MongoDB, portanto é fundamental instalá-lo para rodar o projeto por completo. Para baixá-lo acesse MongoDB e baixe a versão Community Server. Durante o processo de instalação prossiga da maneira que já vem previamente recomendada.
Caso esteja interessado em trabalhar com a parte do geoprocessamento de nosso projeto, será necessário baixar o QGIS, um sistema de informações geográficas, para abrir os arquivos correspondentes ao mapa e editá-los, se for desejável. Para baixar a ferramenta acesse QGIS download, selecione seu sistema operacional, vá até Repositório de Lançamento de Longa Duração e então baixe a versão Standalone correspondente a sua máquina. Durante o processo de instalação prossiga da maneira que já vem previamente recomendada.
Dentro do QGIS, foi utilizado um plug-in o qual auxilia na transformação do mapa (.qgz) em um código-fonte legível por navegadores web. Caso deseje testar tal ferramenta ou incrementar funcionalidades no projeto, siga os seguintes passos:
- Clique em complementos (Barra superior do aplicativo)
- Clique em gerenciar e instalar complementos
- Na barra de busca insira "qgis2web"
- Clique em instalar complemento
- Após instalar, clique em web (Barra superior do aplicativo)
- Selecione qgis2web e comece a explorar o plug-in
Após instalar pelo menos o Node.JS e o MongoDB você estará apto para seguir os próximos passos. Para iniciar o servidor do Node.js integrado ao banco de dados é necessário abrir o prompt de comando de seu sistema operacional, ir até o diretório em que se encontra o projeto, e executar o comando "npm start". Caso ocorra algum erro significa que será necessário instalar os pacotes do item abaixo.
Para auxiliar no desenvolvimento foram instalados alguns pacotes. No diretório do seu projeto, execute os respectivos comandos que instalam tais pacotes para estar apto a desenvolver. Clique no nome de cada um deles para ser direcionado a uma página de tutorial básico para a instalação.
Finalmente, para executar o projeto, após realizar todos os passos acima, você deve acessar o localhost padrão do Node.js em sua máquina (normalmente http://localhost:3000/), e então a aplicação será aberta em uma aba de seu navegador.
Para uma introdução as funcionalidades do projeto e ao funcionamento básico do mesmo, baixe o nosso quick start guide.