APS – ATIVIDADES PRÁTICAS SUPERVISIONADAS

TEMA: DESENVOLVIMENTO DE UMA APLICAÇÃO DE SISTEMA DISTRIBUÍDO

PARA DISPOSITIVO MÓVEL”.

1 CAPA

UNIP – UNIVERSIDADE PAULISTA

CAMPUS: ANCHIETA

CURSO: CIÊNCIA DA COMPUTAÇÃO

8º SEMESTRE – NOTURNOA

PARTICIPANTES......................................................................................RA’s

CRISTIAN RODRIGUEZ PASSOS.....................................................G60BCH5

GUILHERMO TEIXEIRA FRANCISCO................................................G5161E5

IAGO CABRAL RIBEIRO......................................................................N901845

LUCAS SALOMÃO De OLIVEIRA........................................................G4935A1

 2.ÍNDICE

1 CAPA.................................................................................................................................................1
2.ÍNDICE...............................................................................................................................................2
[Link] DO TRABALHO..........................................................................................................3
[Link]ÇÃO.................................................................................................................................4
[Link] DAS TECNOLOGIAS PARA DISPOSITIVOS MÓVEIS ESCOLHIDAS
(CONCEITOS GERAIS).....................................................................................................................8
[Link] DE DESENVOLVIMENTO DA APLICAÇÃO...............................................................10
[Link] (ESTRUTURA) DO PROGRAMA............................................................................13
[Link]ÓRIO COM AS LINHAS DE CÓDIGO DO PROGRAMA............................................17
8.1 Link para acessar a pagina.................................................................................................31
9. APRESENTAÇÃO DO PROGRAMA EM FUNCIONAMENTO EM UM COMPUTADOR,
APRESENTANDO TODAS AS FUNCIONALIDADES PEDIDAS E EXTRAS.........................32
10. BIBLIOGRÁFIA..........................................................................................................................35
[Link] DE ATIVIDADES PRÁTICAS SUPERVISIONADAS.................................................36
CRISTIAN RODRIGUEZ PASSOS.............................................................................................36
GUILHERMO TEIXEIRA FRANCISCO.......................................................................................37
IAGO CABRAL RIBEIRO..............................................................................................................38
LUCAS SALOMÃO DE OLIVEIRA..............................................................................................39
 [Link] DO TRABALHO

O presente trabalho tem como objetivo desenvolver uma aplicação web

interativa e responsiva, acessível em dispositivos móveis e navegadores modernos,
voltada ao mapeamento colaborativo de alertas geolocalizados em tempo real. A
proposta surge da necessidade crescente de disponibilizar informações rápidas,
confiáveis e centralizadas em situações que impactam diretamente a vida da
comunidade, como problemas de trânsito, alagamentos, acidentes e outras
ocorrências urbanas. Por meio da integração de tecnologias modernas — incluindo
HTML5, Tailwind CSS, JavaScript, [Link] e Google Firebase —, busca-se
construir uma plataforma capaz de oferecer escalabilidade, segurança e atualização
instantânea dos dados, garantindo que cada alerta registrado por um usuário seja
imediatamente compartilhado com todos os demais.

Mais do que a implementação técnica, o objetivo deste projeto é promover a

conscientização sobre o papel transformador da tecnologia quando aplicada de
forma colaborativa e acessível. Ao possibilitar que cada cidadão atue como um
sensor ativo de sua realidade, a aplicação estimula a participação social e fortalece
a rede de cooperação comunitária. Paralelamente, o trabalho proporciona aos seus
desenvolvedores uma vivência prática que ultrapassa os limites de uma disciplina
isolada, ao integrar conceitos de programação, banco de dados, computação em
nuvem, usabilidade, segurança da informação e interação humano-computador.
Assim, o projeto contribui tanto para o avanço do aprendizado acadêmico quanto
para a formação profissional, ao demonstrar na prática como o conhecimento
interdisciplinar pode resultar em soluções tecnológicas relevantes, funcionais e com
impacto positivo na sociedade.
 [Link]ÇÃO

A contemporaneidade é marcada por uma profunda e acelerada

transformação digital, na qual a conectividade onipresente e o acesso à informação
em tempo real redefiniram as dinâmicas sociais, econômicas e culturais. Em meio a
esse cenário, os dispositivos móveis, notadamente os smartphones, consolidaram-
se como as principais ferramentas de interação do indivíduo com o mundo digital,
funcionando como extensões de suas capacidades cognitivas e sensoriais. A
convergência de tecnologias como a computação em nuvem, a internet de alta
velocidade e os sistemas de geolocalização (GPS) transformou esses aparelhos em
poderosos instrumentos de coleta, processamento e disseminação de dados,
abrindo um vasto leque de possibilidades para o desenvolvimento de soluções
inovadoras com impacto direto no cotidiano das pessoas.

Essa revolução tecnológica deu origem a um novo paradigma de participação

social, no qual o cidadão comum deixa de ser um mero consumidor de informações
para se tornar um produtor ativo de conteúdo. Fenômenos como o jornalismo
cidadão, as redes sociais e as plataformas de economia compartilhada são
exemplos eloquentes de como a tecnologia pode empoderar indivíduos e
comunidades, permitindo que compartilhem suas experiências e conhecimentos de
forma instantânea e descentralizada. Este modelo, conhecido como crowdsourcing
ou colaboração em massa, demonstra um potencial transformador, especialmente
quando aplicado a desafios urbanos complexos que afetam a vida em comunidade.

As cidades, enquanto ecossistemas vivos e dinâmicos, são palcos de uma

infinidade de eventos e ocorrências que impactam diretamente a rotina de seus
habitantes. Problemas de trânsito, acidentes, alagamentos, obras emergenciais,
falhas no transporte público e outras situações imprevistas geram atritos e
demandam dos cidadãos uma capacidade de adaptação constante.
Tradicionalmente, a comunicação desses eventos era centralizada em grandes
veículos de mídia ou em órgãos governamentais, cujos processos de apuração e
divulgação, embora necessários, nem sempre possuíam a agilidade que a urgência
de tais situações exige. A informação, muitas vezes, chegava ao público de forma
tardia, fragmentada ou incompleta, limitando a capacidade de resposta dos
indivíduos e da coletividade.

É neste contexto que a tecnologia móvel e a colaboração em rede surgem

como uma resposta promissora. A possibilidade de cada cidadão, equipado com um
smartphone, atuar como um "sensor" de sua realidade local, reportando ocorrências
em tempo real e de forma geolocalizada, representa uma mudança fundamental na
forma como a informação urbana é gerada e consumida. A criação de plataformas
que centralizam e organizam esses dados colaborativos permite a construção de um
mapa dinâmico e vivo da cidade, refletindo seu pulso em tempo real e oferecendo
um panorama informativo que seria impossível de ser construído por qualquer
entidade centralizadora isoladamente.

O presente trabalho se insere exatamente nessa intersecção entre tecnologia,

participação social e inteligência urbana. A proposta central é o desenvolvimento de
uma aplicação web interativa e responsiva, projetada para funcionar de maneira
fluida tanto em navegadores de desktop quanto, e principalmente, em dispositivos
móveis. O objetivo é criar uma plataforma de mapeamento colaborativo de alertas
geolocalizados em tempo real, onde qualquer usuário possa, de forma simples e
intuitiva, registrar e visualizar ocorrências que impactam a vida na cidade. A
relevância de tal projeto reside não apenas na utilidade prática da ferramenta, mas
também em seu potencial para fomentar a cooperação comunitária e a consciência
coletiva sobre o ambiente urbano.

Para alcançar tal objetivo, o projeto se apoia em um ecossistema de

tecnologias modernas, cuidadosamente selecionadas para garantir escalabilidade,
segurança, responsividade e, fundamentalmente, a capacidade de sincronização de
dados em tempo real. A arquitetura da solução foi concebida sob o paradigma
serverless (sem servidor), utilizando o Google Firebase como Backend-as-a-Service
(BaaS). Essa escolha estratégica elimina a complexidade associada à gestão de
servidores tradicionais e permite que a aplicação se concentre na experiência do
usuário e na lógica de negócio. O Firestore, banco de dados NoSQL em tempo real
do Firebase, é o coração do sistema, garantindo que cada novo alerta registrado por
um usuário seja instantaneamente propagado para todos os outros clientes
conectados, criando uma experiência verdadeiramente dinâmica e compartilhada.

A interface do usuário (front-end) foi construída sobre os pilares fundamentais

da web moderna: HTML5, para a estruturação semântica do conteúdo; Tailwind
CSS, um framework CSS de classes utilitárias que permite a construção de
interfaces complexas e responsivas de forma ágil e consistente; e JavaScript, a
linguagem que orquestra toda a lógica, interatividade e comunicação com os
serviços de backend. Para a funcionalidade central de mapeamento, foi escolhida a
biblioteca [Link], uma solução de código aberto reconhecida por sua leveza,
eficiência e flexibilidade, ideal para renderizar mapas interativos em uma ampla
gama de dispositivos. A integração desses componentes é viabilizada pela API de
Geolocalização nativa dos navegadores, que permite capturar a localização precisa
do usuário, conferindo relevância contextual imediata aos alertas criados.

Mais do que um exercício técnico, este trabalho representa uma exploração

prática da aplicação interdisciplinar de conhecimentos. Ele tangencia áreas como
programação para a web, design de interfaces, experiência do usuário (UX), banco
de dados em nuvem, segurança da informação e interação humano-computador. Ao
desenvolver uma solução completa, desde o planejamento e prototipagem até a
implementação, testes e publicação, o projeto proporciona uma vivência que
transcende os limites de uma única disciplina, demonstrando como diferentes
campos do saber se unem para criar produtos tecnológicos funcionais, relevantes e
com potencial de impacto positivo na sociedade.

Ao longo dos próximos capítulos, este trabalho detalhará cada uma das
etapas e componentes que constituem a aplicação. A primeira seção apresentará os
fundamentos teóricos das tecnologias escolhidas, justificando as decisões técnicas e
conceituais que guiaram o desenvolvimento. Em seguida, o plano de
desenvolvimento será esmiuçado, descrevendo a metodologia adotada, desde a
concepção inicial e prototipagem da interface até as fases de implementação da
lógica, integração com o backend e os testes de funcionalidade. Por fim, a seção de
projeto e estrutura do programa oferecerá uma análise aprofundada da arquitetura
do software, detalhando como os diferentes módulos de código — inicialização do
mapa, geolocalização, conexão com o Firebase, manipulação de dados em tempo
real e gerenciamento da interface — se interconectam para formar um sistema
coeso e resiliente. O objetivo final é não apenas apresentar o resultado de um
projeto de desenvolvimento, mas também compartilhar o conhecimento adquirido e
demonstrar o poder da tecnologia como ferramenta para a construção de
comunidades mais conectadas, informadas e colaborativas.
 [Link] DAS TECNOLOGIAS PARA DISPOSITIVOS MÓVEIS
ESCOLHIDAS (CONCEITOS GERAIS)

O desenvolvimento de aplicações voltadas para dispositivos móveis exige a

compreensão de um conjunto de tecnologias, que garantem responsividade,
usabilidade e desempenho em diferentes plataformas. No caso da aplicação
proposta, diversas ferramentas modernas foram utilizadas com o objetivo de
assegurar que o sistema funcione de forma eficiente tanto em desktops quanto em
smartphones.

O primeiro fundamento usado foi o HTML5. Esta linguagem é a base

estrutural da aplicação, fornecendo os elementos necessários para a organização
semântica do conteúdo. Seu uso possibilita a construção de páginas responsivas,
que se adaptam a diferentes tamanhos de tela, além de oferecer suporte nativo para
recursos multimídia, geolocalização e armazenamento local.

Complementando a estrutura do HTML5, foi utilizado o Tailwind CSS, um

framework que permite a estilização rápida e consistente. Ele oferece classes pré-
definidas que facilitam a criação de interfaces modernas, garantindo boa experiência
de uso em dispositivos móveis. Com ele, eliminou-se a necessidade de folhas de
estilo extensas, tornando o desenvolvimento mais ágil e sem complicações.

A lógica e a interatividade da aplicação foram desenvolvidas em JavaScript. O

JavaScript é a base para a manipulação de elementos da interface, a validação de
formulários, a comunicação com o banco de dados e a integração com APIs que
serão consumidas. A escolha do JavaScript está diretamente relacionada à sua
compatibilidade com todos os navegadores modernos.

Para o recurso central da aplicação; o mapa interativo; foi escolhida a

biblioteca [Link]. Trata-se de uma solução open-source muito reconhecida por ser
leve e eficiente, que possibilita renderização de mapas em dispositivos com
diferentes capacidades de processamento. O Leaflet oferece suporte a marcação de
pontos, camadas personalizadas e integração com serviços como OpenStreetMap, o
que o torna ideal para aplicações de geolocalização acessíveis via dispositivos
móveis.

Outro pilar de extrema importância foi o Google Firebase, utilizado como

backend serverless. O Firebase fornece recursos completos para o desenvolvimento
de aplicações modernas, incluindo autenticação, banco de dados em tempo real e
hospedagem. O Firestore foi a solução de banco de dados utilizada nesse projeto,
permitindo a sincronização instantânea dos alertas adicionados pelos usuários. A
autenticação anônima garantiu que cada sessão fosse segura, mesmo sem a
necessidade de cadastro, e o Firebase Hosting possibilitou a disponibilizzação a
aplicação de forma estável na web.

A API de Geolocalização do navegador também foi fundamental,

possibilitando identificar a localização atual do usuário em tempo real. Esse recurso
permitiu centralizar o mapa automaticamente na posição do usuário, além de
habilitar a adição de alertas exatamente no ponto geográfico em que a ocorrência foi
identificada.

Essas tecnologias formam um ecossistema firme, flexível e acessível. A

combinação de HTML5, Tailwind CSS e JavaScript garante a construção de
interfaces modernas; o [Link] possibilita a visualização dinâmica de mapas; o
Firebase atua como backend escalável e seguro; e a geolocalização do navegador
integra o mundo físico com o ambiente digital da aplicação.

Portanto, a escolha das tecnologias foi guiada pela necessidade de

responsividade, escalabilidade e simplicidade. Todas as ferramentas utilizadas têm
são bem aceitas na pelos desenvolvedores que já utilizaram tais recursos e
apresentam documentação extensa, o que favorece a manutenção e evolução futura
da aplicação. Esses fundamentos tecnológicos são a base para que a solução se
mantenha acessível e eficiente em dispositivos móveis, atendendo às necessidades
do público-alvo.
 [Link] DE DESENVOLVIMENTO DA APLICAÇÃO

O plano de desenvolvimento da aplicação proposta foi desenvolvido em

etapas, visando organizar o processo de construção e garantir que os objetivos
fossem alcançados com eficiência.

A primeira fase foi o planejamento, momento em que se definiu a finalidade da

aplicação: criar uma plataforma interativa para que usuários possam reportar e
visualizar alertas em tempo real. Nessa etapa do projeto, também foram analisadas
as tecnologias disponíveis, afim de escolher as ferramentas que atendessem aos
requisitos de responsividade, escalabilidade e simplicidade.

Na segunda fase, foi realizada a prototipagem da interface, utilizando

conceitos de design responsivo para que a aplicação funcionasse de forma
adequada em diferentes dispositivos. O uso do Tailwind CSS foi essencial para essa
etapa, pois permitiu construir rapidamente uma interface moderna e adaptável. O
protótipo contemplava duas áreas principais: o mapa interativo e o painel de controle
lateral, onde os usuários poderiam inserir e visualizar os alertas.

A próxima etapa consistiu na implementação da lógica da aplicação. O

JavaScript foi empregado para manipular eventos, validar formulários e controlar a
interação entre o mapa e o banco de dados. A integração com o [Link]
possibilitou adicionar marcadores e exibir informações de forma dinâmica, tornando
a experiência do usuário mais intuitiva.

Para o armazenamento dos dados, foi utilizado o Firestore, componente do

Google Firebase. Esse banco de dados NoSQL permitiu que os alertas fossem
salvos em tempo real, garantindo que todos os usuários conectados tivessem
acesso imediato às informações atualizadas. Além disso, a autenticação anônima do
Firebase foi configurada para garantir o acesso seguro ao banco de dados, sem
precisar de um cadastro prévio dos usuários.
 A integração entre front-end e backend foi pensada de forma a reduzir a
complexidade. Como o Firebase é um serviço serverless, não precisou de uma
configuração em servidores próprios, o que acelerou o processo. Essa arquitetura
também facilita a escalabilidade da aplicação, por conta do Firebase se adaptar
automaticamente à demanda.

Outro ponto de extrema importância no desenvolvimento desse sistema, foi a

utilização da API de Geolocalização do navegador. Esse recurso consegue
identificar a posição do usuário, centralizar o mapa nesse ponto e permitir a criação
de alertas no local exato da ocorrência. A integração entre a geolocalização e o
[Link] é um dos pontos chave para o funcionamento desse sistema.

Partindo para a parte dos testes, foram realizadas simulações para verificar a
sincronização em tempo real dos dados, a responsividade da interface e o
comportamento das aplicações em diferentes navegadores e dispositivos móveis.
Esse processo é essencial para identificar falhas, para corrigi-las antes de tornar
público o sistema.

Por último, a etapa final do plano foi a publicação da aplicação por meio do
Firebase Hosting. Esse serviço garantiu que a plataforma estivesse acessível via link
público, com segurança e desempenho adequados. A hospedagem integrada ao
próprio ecossistema do Firebase reduziu a complexidade do deploy, tornando o
processo mais ágil.

Pode-se considerar para trabalhos futuros a adição de novas funcionalidades,

como login com contas do Google, anexos de imagens nos alertas, filtros de
pesquisa por categoria ou data e notificações push para dispositivos móveis. Essas
melhorias ampliariam o potencial de uso da aplicação, aumentando sua utilidade
prática no cotidiano dos usuários.

Portanto, o plano de desenvolvimento da aplicação combinou organização,

escolha adequada de ferramentas e integração entre front-end e backend. As etapas
passadas — planejamento, prototipagem, implementação, testes e publicação —
asseguraram que a aplicação fosse entregue de forma funcional, atendendo
totalmente às metas propostas para o sistema desenvolvido.
 [Link] (ESTRUTURA) DO PROGRAMA

O projeto em análise consiste em uma aplicação web de mapa interativo

projetada para a visualização e criação de alertas geolocalizados em tempo real. A
arquitetura fundamental do sistema é a de um cliente-servidor, implementada
através de um paradigma moderno onde o cliente (o navegador do usuário) detém
toda a lógica de apresentação e interação, enquanto se comunica diretamente com
serviços de nuvem que atuam como um Backend-as-a-Service (BaaS), eliminando a
necessidade de um servidor de aplicação tradicional. A estrutura do código, embora
contida em um único arquivo HTML, é logicamente modular e orquestra a interação
entre a interface do usuário, APIs do navegador, uma biblioteca de mapas e os
serviços de backend.

A base estrutural da aplicação é definida em HTML, que organiza a interface

em duas seções principais: um contêiner para o mapa (<div id="map-container">) e
uma barra lateral de controle (<div id="sidebar-container">). Esta última abriga os
elementos de interação do usuário, incluindo um formulário para a submissão de
novos alertas e uma lista para a exibição dos alertas já ativos. A estilização e a
responsividade da interface são gerenciadas pelo framework Tailwind CSS, que
permite a construção de um design adaptativo através de classes utilitárias
diretamente no HTML. Uma regra de CSS específica (@media (max-width: 768px)) é
crucial para a experiência em dispositivos móveis, reordenando os painéis para que
o formulário e a lista de alertas apareçam acima do mapa em telas menores,
otimizando o espaço vertical.

A lógica da aplicação, implementada em JavaScript dentro de uma tag <script

type="module">, inicia sua execução a partir da função main(), chamada pelo evento
[Link]. Esta função atua como o ponto de entrada, orquestrando a
inicialização sequencial dos componentes críticos: primeiro o mapa e, em seguida, a
conexão com o backend.
 O módulo de visualização geográfica é central para a aplicação e é
gerenciado pela biblioteca [Link]. A função initializeMap() é responsável por
instanciar o mapa, vinculá-lo ao elemento <div id="map"> do DOM e configurar a
camada de base (tile layer) utilizando os dados do OpenStreetMap. A gestão dos
arcadores de alerta no mapa é controlada pelo objeto markers, que funciona como
um dicionário para armazenar referências a cada marcador adicionado, usando o ID
do documento do banco de dados como chave. Isso permite a manipulação eficiente
(adição, remoção ou atualização) dos marcadores através da função
updateAlertOnMap(), que é chamada sempre que o estado dos dados de alerta é
alterado.

Intimamente ligado ao mapa está o módulo de geolocalização, encapsulado

na função locateUser(). Este módulo utiliza a API de Geolocalização nativa do
navegador ([Link]()) para obter as coordenadas
de latitude e longitude do dispositivo do usuário. Em caso de sucesso, as
coordenadas são salvas na variável userLocation, o mapa é imediatamente
centralizado nesta nova posição com um nível de zoom apropriado (15), um
marcador visual distinto é adicionado para indicar a posição do usuário, e,
crucialmente, o botão de submissão do formulário é habilitado, permitindo a criação
de alertas. A robustez da aplicação é reforçada pelo tratamento de falhas neste
ponto. O callback de erro da função não apenas exibe uma mensagem genérica,
mas também verifica o [Link] para diferenciar entre uma falha técnica e uma
recusa explícita de permissão pelo usuário ([Link] === 1), permitindo uma
comunicação mais precisa na interface. Esta atenção ao tratamento de falhas é
essencial para manter uma experiência de usuário positiva mesmo em cenários
adversos.

O núcleo da funcionalidade em tempo real e da persistência de dados reside

no módulo de integração com o Google Firebase, que atua como o backend da
aplicação. A função connectToFirebase() inicializa a conexão com os serviços do
Firebase, especificamente o Authentication e o Firestore. Primeiramente, o módulo
de autenticação utiliza o método signInAnonymously() para criar uma sessão de
usuário anônima. Esta abordagem de baixa fricção é estratégica, pois permite que
os usuários contribuam com dados sem a necessidade de um processo de cadastro,
ao mesmo tempo que garante que todas as operações de escrita no banco de dados
sejam autenticadas.

Uma vez autenticado, o componente mais crítico do sistema é ativado pela

função listenForAlerts(). Esta função estabelece um listener em tempo real na
coleção alerts do banco de dados Firestore, utilizando o método onSnapshot. Este é
o mecanismo que confere à aplicação sua natureza reativa. O onSnapshot é
notificado pelo servidor do Firebase sempre que ocorre uma adição, modificação ou
remoção de um documento na coleção. O callback do listener processa essas
mudanças ([Link]()) de forma granular. Para cada alteração, ele
invoca as funções updateAlertOnMap() e updateAlertInList(), que por sua vez
atualizam a interface do usuário, seja adicionando um novo marcador no mapa e um
novo item na lista, ou removendo-os. Essa arquitetura garante que a interface de
todos os usuários conectados reflita o estado atual do banco de dados de forma
quase instantânea e automática, sem a necessidade de recarregar a página ou fazer
requisições periódicas ao servidor.

O ciclo de vida de um novo alerta é iniciado pela interação do usuário com o

formulário e gerenciado pela função handleAddAlert(), que é acionada pelo evento
submit. Esta função previne o comportamento padrão do formulário, captura os
valores dos campos de tipo e descrição, e combina esses dados com as
coordenadas de userLocation. Ela então utiliza a função addDoc() do Firestore para
criar um novo documento na coleção alerts. É importante notar a utilização do
serverTimestamp() ao criar o novo alerta. Este não é um simples timestamp gerado
no cliente; é um token especial do Firebase que só é resolvido nos servidores do
Google no momento da escrita. A escolha por essa abordagem é uma decisão
técnica crucial para garantir a integridade e a consistência dos dados. Ela elimina
problemas relacionados a relógios de dispositivos de usuários dessincronizados,
assegurando que a ordem cronológica dos alertas seja sempre precisa e autoritativa,
o que é fundamental para a confiabilidade de um sistema de eventos em tempo real.
 A preocupação com a robustez se estende também à operação de escrita no
banco de dados. Toda a lógica de handleAddAlert() é envolvida por um bloco
try...catch...finally. O bloco catch é responsável por capturar possíveis erros durante
a comunicação com o Firestore (como falhas de rede ou violações de regras de
segurança) e informar ao usuário sobre a falha. O bloco finally garante que o botão
de submissão seja reabilitado e seu texto restaurado, independentemente do
sucesso ou falha da operação, evitando que a interface fique em um estado de
bloqueio permanente. Esta estrutura de tratamento de erros demonstra uma
arquitetura defensiva, projetada para ser resiliente e manter a funcionalidade mesmo
sob condições de falha parcial. Em suma, o projeto integra de forma coesa
tecnologias de frontend, APIs de navegador e serviços de nuvem para construir um
sistema funcional e eficiente para comunicação de informações geolocalizadas em
tempo real.
 [Link]ÓRIO COM AS LINHAS DE CÓDIGO DO PROGRAMA

Na presente seção será apresentado o código-fonte desenvolvido para a

aplicação proposta. Com o objetivo de facilitar a compreensão, algumas de suas
funções e trechos mais relevantes foram destacados e comentados. Os comentários
estão evidenciados em amarelo, de modo a explicar de forma didática o
funcionamento de cada parte do código sem comprometer sua estrutura original.

<!DOCTYPE html>

<html lang="pt-BR">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Mapa de Alertas Interativo com Firebase</title>

<!-- Importa Tailwind CSS para estilização rápida e responsiva -->

<script src="[Link]

<!-- Importa [Link] para o mapa interativo -->

<link rel="stylesheet" href="[Link]

crossorigin="" />

<script src="[Link] crossorigin=""></script>

<style>

/* Define altura total, remove margens e oculta scroll */

body, html {
 height: 100%;

margin: 0;

padding: 0;

font-family: 'Inter', sans-serif;

overflow: hidden;

/* O mapa ocupa toda a largura e altura do container */

#map {

height: 100%;

width: 100%;

/* Ajustes de layout para telas menores (mobile) */

@media (max-width: 768px) {

.main-container {

flex-direction: column-reverse; /* Coloca o painel acima do mapa */

height: 100%;

#map-container {

flex-grow: 1; /* Faz o mapa ocupar o espaço restante */

#sidebar-container {

height: auto;
 max-height: 50%; /* Limita o painel a 50% da tela */

overflow-y: auto; /* Permite rolar alertas em excesso */

</style>

</head>

<body class="bg-gray-100">

<div class="flex h-screen w-screen main-container">

<!-- Coluna principal do mapa -->

<div id="map-container" class="w-full md:w-2/3 h-full">

<div id="map" class="shadow-md"></div>

</div>

<!-- Coluna lateral com formulário e lista de alertas -->

<div id="sidebar-container" class="w-full md:w-1/3 h-full bg-white p-4 overflow-y-

auto">

<h1 class="text-2xl font-bold mb-4 text-gray-800 border-b pb-2">Painel de

Controle</h1>

<!-- Formulário de envio de alerta -->

<div id="alert-form-container" class="mb-6">

<h2 class="text-xl font-semibold mb-2 text-gray-700">Adicionar

Alerta</h2>

<form id="alert-form">
 <div class="mb-3">

<label for="alert-type" class="block text-sm font-medium text-gray-

600">Tipo de Alerta</label>

<!-- Campo para informar o tipo do alerta -->

<input type="text" id="alert-type" class="mt-1 block w-full px-3 py-2

bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none"
placeholder="Ex: Trânsito, Alagamento" required>

</div>

<div class="mb-3">

<label for="alert-description" class="block text-sm font-medium text-

gray-600">Descrição</label>

<!-- Campo de descrição do alerta -->

<textarea id="alert-description" rows="3" class="mt-1 block w-full px-3

py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none"
placeholder="Descreva o que está acontecendo." required></textarea>

</div>

<!-- Botão só habilita quando localização é encontrada -->

<button type="submit" id="add-alert-btn" class="w-full bg-blue-500

hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-md disabled:bg-gray-400"
disabled>

Adicionar na Minha Localização

</button>

</form>

<div id="location-status" class="mt-3 text-sm text-center text-gray-500">

Buscando sua localização...

</div>

</div>
 <hr class="my-4">

<!-- Lista dinâmica com os alertas já enviados -->

<h2 class="text-xl font-semibold mb-2 text-gray-700">Alertas Ativos</h2>

<div id="alerts-list">

<p class="text-gray-500">Buscando alertas no banco de dados...</p>

</div>

</div>

</div>

<script type="module">

// Importações do Firebase (módulos para app, auth e firestore)

import { initializeApp } from "[Link]

[Link]";

import { getAuth, signInAnonymously, signInWithCustomToken,

onAuthStateChanged } from "[Link]
[Link]";

import { getFirestore, collection, addDoc, onSnapshot, serverTimestamp,

setLogLevel } from "[Link]

// Referências para elementos da interface

const mapElement = [Link]('map');

const addAlertBtn = [Link]('add-alert-btn');

const alertForm = [Link]('alert-form');

const alertsList = [Link]('alerts-list');

 const locationStatus = [Link]('location-status');

// Variáveis de estado

let map; // Instância do mapa

let userLocation = null; // Coordenadas do usuário

let markers = {}; // Armazena marcadores ativos

let db; // Instância do Firestore

// Variáveis de ambiente (podem ser definidas externamente)

const appId = typeof __app_id !== 'undefined' ? __app_id : 'default-app-id';

let firebaseConfigString = typeof __firebase_config !== 'undefined' ?

__firebase_config : null;

const initialAuthToken = typeof __initial_auth_token !== 'undefined' ?

__initial_auth_token : null;

// Caso não exista configuração externa, usa config de exemplo para teste local

if (!firebaseConfigString) {

[Link]("Variável __firebase_config não encontrada. Usando

configuração de exemplo.");

const firebaseConfigPlaceholder = {

apiKey: "SUA_CHAVE_API",

authDomain: "[Link]",

projectId: "aps-alerta-ambiental",

storageBucket: "[Link]",

messagingSenderId: "914994113513",
 appId: "1:914994113513:web:f52296b986401890caf978"

};

firebaseConfigString = [Link](firebaseConfigPlaceholder);

// Função inicial: configura mapa e Firebase

function main() {

initializeMap();

connectToFirebase();

// Inicializa o mapa Leaflet com tiles do OpenStreetMap

function initializeMap() {

map = [Link](mapElement).setView([-14.235, -51.925], 5);

[Link]('[Link] {

attribution: '&copy; OpenStreetMap contributors'

}).addTo(map);

locateUser();

// Conecta no Firebase e autentica usuário (anônimo ou token)

function connectToFirebase() {

try {

setLogLevel('debug'); // Log detalhado para debug

 const firebaseConfig = [Link](firebaseConfigString);

if (!firebaseConfig || ![Link]) {

throw new Error("Configuração do Firebase ausente ou inválida.");

const app = initializeApp(firebaseConfig);

db = getFirestore(app);

const auth = getAuth(app);

// Se não há usuário, autentica

onAuthStateChanged(auth, async (user) => {

if (!user) {

if (initialAuthToken) await signInWithCustomToken(auth,

initialAuthToken);

else await signInAnonymously(auth);

[Link]("Usuário autenticado:", [Link]?.uid);

listenForAlerts(); // Começa a ouvir os alertas

});

} catch (error) {

[Link]("Erro no Firebase:", error);

displayError(`Falha na conexão com o banco de dados: $

{[Link]}`);

}
 }

// Obtém a localização do usuário via navegador

function locateUser() {

[Link](

(position) => {

const { latitude, longitude } = [Link];

userLocation = { lat: latitude, lng: longitude };

// Centraliza o mapa na localização

[Link]([latitude, longitude], 15);

// Adiciona marcador azul para indicar posição atual

[Link]([latitude, longitude], {

color: 'blue', fillColor: '#3498db', fillOpacity: 0.8, radius: 8

}).addTo(map).bindPopup('Você está aqui!').openPopup();

[Link] = false; // libera botão

[Link] = 'Localização encontrada!';

},

(error) => {

// Mensagens em caso de erro

[Link] = [Link] === 1 ? 'Permissão de

localização negada.' : 'Não foi possível obter sua localização.';

[Link]("Erro de Geolocalização:", error);

 }

);

// Escuta mudanças em tempo real no Firestore

function listenForAlerts() {

const alertsCollectionPath = `/artifacts/${appId}/public/data/alerts`;

const alertsCollection = collection(db, alertsCollectionPath);

onSnapshot(alertsCollection, (snapshot) => {

let hasAlerts = false;

[Link]().forEach((change) => {

hasAlerts = true;

const alertData = [Link]();

const alertId = [Link];

if ([Link] === "added" || [Link] === "modified") {

updateAlertOnMap(alertId, alertData);

updateAlertInList(alertId, alertData);

} else if ([Link] === "removed") {

// Remove marcador e item da lista se deletado

if (markers[alertId]) {

[Link](markers[alertId]);

delete markers[alertId];
 }

const itemToRemove = [Link](`alert-${alertId}`);

if (itemToRemove) [Link]();

});

// Ajusta mensagens padrão

if ([Link]('.placeholder-text') && hasAlerts) {

[Link] = '';

} else if ([Link] && ) {

[Link] = '<p class="text-gray-500 placeholder-

text">Nenhum alerta foi adicionado ainda.</p>';

}, (error) => {

[Link]("Erro ao ouvir alertas:", error);

displayError("Não foi possível carregar os alertas.");

});

// Envia novo alerta para o Firestore

async function handleAddAlert(event) {

[Link]();

if (!userLocation) {
 [Link] = "Sua localização é necessária para adicionar
um alerta.";

return;

[Link] = true;

[Link] = 'Enviando...';

const type = [Link]('alert-type').value;

const description = [Link]('alert-description').value;

try {

const alertsCollectionPath = `/artifacts/${appId}/public/data/alerts`;

await addDoc(collection(db, alertsCollectionPath), {

type,

description,

latitude: [Link],

longitude: [Link],

timestamp: serverTimestamp()

});

[Link]();

} catch (error) {

[Link]("Erro ao adicionar alerta:", error);

[Link] = "Falha ao enviar o alerta. Tente novamente.";

} finally {

[Link] = false;
 [Link] = 'Adicionar na Minha Localização';

// Atualiza marcador no mapa

function updateAlertOnMap(id, data) {

if (![Link] || ![Link]) return;

if (markers[id]) [Link](markers[id]);

markers[id] = [Link]([[Link], [Link]])

.addTo(map)

.bindPopup(`<b>${[Link] || 'Alerta'}</b><br>${[Link] || 'Sem

descrição.'}`);

// Atualiza alerta na lista lateral

function updateAlertInList(id, data) {

let alertElement = [Link](`alert-${id}`);

if (!alertElement) {

if([Link]('.placeholder-text')) [Link] = '';

alertElement = [Link]('div');

[Link] = `alert-${id}`;

[Link](alertElement);

}
 [Link] = 'bg-red-100 border-l-4 border-red-500 text-red-700
p-3 mb-2 rounded-md shadow-sm';

const date = [Link]?.toDate ?

[Link]().toLocaleString('pt-BR') : 'Agora mesmo';

[Link] = `

<p class="font-bold">${[Link]}</p>

<p>${[Link]}</p>

<p class="text-sm text-gray-600 mt-1">${date}</p>

`;

// Exibe mensagem de erro no painel

function displayError(message) {

[Link] = `

<div class="bg-yellow-100 border-yellow-800 text-yellow-900 border-l-4 p-4

rounded-md" role="alert">

<p class="font-bold">Erro de Configuração</p>

<p>${message}</p>

</div>`;

// Inicializa aplicação quando página carrega

[Link] = main;

[Link]('submit', handleAddAlert);
 </script>

</body>

</html>

8.1 Link para acessar a pagina

[Link]
 9. APRESENTAÇÃO DO PROGRAMA EM FUNCIONAMENTO EM UM
COMPUTADOR, APRESENTANDO TODAS AS FUNCIONALIDADES PEDIDAS E
EXTRAS.

Figura 1- Registro de alerta.

Interface do sistema desenvolvido para monitoramento de incidentes. À
esquerda, o mapa interativo baseado em OpenStreetMap exibe a localização do
usuário e os pontos de alerta registrados. À direita, o Painel de Controle permite,
adicionar novos alertas informando tipo e descrição, vinculados à localização atual,
visualizar a lista de alertas ativos, com identificação, descrição e horário do registro
e interagir com a geolocalização do navegador para posicionar os eventos no mapa.

Fonte: Autoria própria (2025).

Figura 2 – Registro de Alerta no Sistema
Interface do mapa interativo exibindo a localização atual do usuário (“Você
está aqui”) e o painel lateral de controle. No exemplo, foi adicionado um alerta do
tipo Alagamento com a descrição “Alagamento próximo à ponte”. O painel também
lista os alertas ativos, incluindo informações de tipo, descrição e horário de registro.
Fonte: Autoria própria (2025).
Figura 3 – Alerta Georreferenciado no Mapa fonte:autoria própria
Visualização detalhada do alerta do tipo Alagamento, com descrição “Alagamento
próximo à ponte”, posicionado na localização atual do usuário. O mapa, baseado em
OpenStreetMap, mostra a região da Universidade Paulista (UNIP) e arredores. À
direita, o painel de controle exibe a confirmação da localização e a lista de alertas
ativos com tipo, descrição e horário de registro.
Fonte: Autoria própria (2025).
 10. BIBLIOGRÁFIA
[Link]
utm_source=google&utm_medium=pmax&utm_campaign=home-A-
iniciantes&utm_source=&utm_medium=&utm_campaign=&utm_content=&gad_sourc
e=1&gad_campaignid=20282427526&gclid=CjwKCAjwlaTGBhANEiwAoRgXBfVbP_
xIWc2iNg8Yjvjn0PqHBVVRdQ_ut-SccIgV4wZDeW0cStmwNxoCQvkQAvD_BwE

[Link]
utm_source=google&utm_medium=pmax&utm_campaign=home-A-
iniciantes&utm_source=&utm_medium=&utm_campaign=&utm_content=&gad_sourc
e=1&gad_campaignid=20282427526&gclid=CjwKCAjwlaTGBhANEiwAoRgXBW60N
GuHn-sXlbke6NxFE20YYtUpXCvVGwlsCzdi6_C5uz_3VtY7oBoC-hYQAvD_BwE

[Link]

[Link]
 [Link] DE ATIVIDADES PRÁTICAS SUPERVISIONADAS

CRISTIAN RODRIGUEZ PASSOS

GUILHERMO TEIXEIRA FRANCISCO
IAGO CABRAL RIBEIRO
LUCAS SALOMÃO DE OLIVEIRA