MAPIFRA - Mapa Interativo e Acessível do IFS

📱 Sobre o Projeto

O MAPIFRA é um aplicativo mobile desenvolvido para o Instituto Federal de Sergipe (IFS) com o objetivo de facilitar a navegação pelo campus através de um mapa digital interativo e acessível. O projeto foca em promover inclusão, acessibilidade e inovação tecnológica.

🎯 Objetivos

Objetivo Geral

Desenvolver um aplicativo interativo em realidade aumentada que facilite a navegação pelo campus e promova acessibilidade a todos os usuários.

Objetivos Específicos

1. ✅ Mapear e georreferenciar os blocos e setores do campus
2. ✅ Implementar recursos de acessibilidade completos
3. ✅ Integrar informações institucionais
4. ✅ Criar experiências em realidade aumentada
5. ✅ Acesso sem necessidade de login
6. ✅ Compatibilidade com dispositivos de baixo desempenho
7. ✅ Exibir eventos do campus com localização

👥 Público-Alvo

• Estudantes do IFS
• Servidores e professores
• Visitantes do campus
• Pessoas com deficiência ou necessidades específicas

🚀 Funcionalidades Implementadas

1. Tela Inicial (Welcome)

• Apresentação do aplicativo MAPIFRA
• Botões para acessar o modo de acessibilidade
• Opção para início rápido
• Acesso administrativo

2. Seleção de Modo

• Modo Normal: Interface padrão com todos os recursos
• Modo Alta Acessibilidade: Interface otimizada com:
  • Alto contraste
  • Textos ampliados
  • Compatibilidade com leitores de tela
  • Suporte ao VLibras

3. Tela de Mapa

• Seleção de campus (Aracaju, Itabaiana, Lagarto, Estância)
• Visualização do mapa interativo (placeholder para integração)
• Botão de localização em tempo real
• Toggle para Modo Realidade Aumentada
• Toggle para Rotas Acessíveis (rampas, banheiros acessíveis)

4. Tela de Busca

• Campo de busca com sugestões
• Busca por Voz integrada
• Categorias de locais:
  • Salas de Aula
  • Laboratórios
  • Banheiros
  • Locais Acessíveis
  • Alimentação
  • Administração
• Histórico de buscas recentes
• Locais populares

5. Tela de Eventos

• Listagem de eventos do campus
• Filtros: Hoje / Próximos
• Informações detalhadas:
  • Data e horário
  • Localização no mapa
  • Descrição do evento
• Botão para visualizar localização no mapa
• Botão para adicionar ao calendário

6. Tela de Informações

• Sobre o IFS
• Lista de campi
• Cursos oferecidos
• Recursos de acessibilidade disponíveis
• Contato e suporte
• Links para redes sociais
• Tutorial de uso do app

♿ Recursos de Acessibilidade

Implementados

• ✅ Navegação sem login
• ✅ Interface responsiva adaptável a diferentes tamanhos de tela
• ✅ Suporte a leitores de tela (accessibilityLabel e accessibilityRole em todos os componentes)
• ✅ Botões com áreas de toque adequadas (mínimo 44x44 pontos)
• ✅ Alto contraste disponível no modo acessibilidade
• ✅ Textos escaláveis (useRWD hook)
• ✅ Busca por voz para facilitar navegação
• ✅ Rotas adaptadas para pessoas com mobilidade reduzida

Planejados para Integração

• 🔄 VLibras (tradutor de Libras)
• 🔄 Audiodescrição completa
• 🔄 Navegação por gestos
• 🔄 Feedback tátil (vibração)

🛠️ Tecnologias Utilizadas

• React Native - Framework mobile
• Expo - Plataforma de desenvolvimento
• Expo Router - Navegação entre telas
• TypeScript - Tipagem estática
• Expo Vector Icons - Ícones do aplicativo

📁 Estrutura do Projeto

src/
├── app/
│   ├── _layout.tsx           # Layout raiz da aplicação
│   ├── index.tsx             # Tela inicial (Welcome)
│   ├── mode-selection.tsx    # Seleção de modo
│   └── (tabs)/
│       ├── _layout.tsx       # Layout das tabs
│       ├── map.tsx           # Tela do mapa
│       ├── search.tsx        # Tela de busca
│       ├── events.tsx        # Tela de eventos
│       └── info.tsx          # Tela de informações
├── locales/
│   └── pt.json              # Traduções em português
└── assets/
    └── images/
        └── logo.png         # Logo do aplicativo

🚀 Como Executar

Pré-requisitos

• Node.js (versão 18 ou superior)
• pnpm (gerenciador de pacotes)
• Expo CLI

Instalação

# Instalar dependências
pnpm install

# Iniciar o servidor de desenvolvimento
pnpm start

# Para Android
pnpm android

# Para iOS
pnpm ios

# Para Web
pnpm web

📱 Testando o Aplicativo

1. Instale o aplicativo Expo Go no seu dispositivo móvel
2. Execute pnpm start no terminal
3. Escaneie o QR Code com o aplicativo Expo Go
4. O aplicativo será carregado no seu dispositivo

🎨 Design System

Cores Principais

• Verde Principal: #0B9768 - Ações primárias e destaques
• Fundo: #ebeaffff - Cor de fundo clara
• Branco: #fff - Cards e superfícies
• Texto Principal: #111 - Títulos e textos importantes
• Texto Secundário: #666 - Descrições e labels

Tipografia

• Sistema de escala responsiva (useRWD)
• Pesos: 400 (regular), 600 (semibold), 700 (bold)
• Tamanhos base: 12px a 24px

🔄 Próximos Passos

Integrações Necessárias

1. Mapa Interativo

   • Integração com React Native Maps
   • Geolocalização em tempo real
   • Marcadores de pontos de interesse

2. Realidade Aumentada

   • Integração com biblioteca AR (Viro React ou similar)
   • Navegação com setas em AR
   • Reconhecimento de ambiente

3. Backend e API

   • API para eventos do campus
   • API para informações de locais
   • Sistema de busca otimizado

4. Recursos Avançados de Acessibilidade

   • VLibras integrado
   • Text-to-Speech nativo
   • Speech-to-Text para busca por voz

5. Otimizações

   • Cache de mapas offline
   • Otimização para dispositivos de baixo desempenho
   • Compressão de imagens

👨‍💻 Desenvolvido Por

Estudantes do Instituto Federal de Sergipe - Projeto de Extensão

📄 Licença

Este projeto é desenvolvido como parte de um projeto acadêmico do IFS.

---

Versão: 1.0.0
Última atualização: Novembro 2025