Frontend - App Staff

1. Introdução

  O App Staff é um aplicativo utilizado pelos colaboradores do Inteli para gerenciar os tours guiados pelo cão robô. A aplicação permite que o staff visualize os tours do dia, edite informações, acompanhe o progresso do robô em tempo real, inicialize tours e interrompa o processo em caso de emergência.

2. Arquitetura do Projeto

  Para este projeto foi utilizado o Framework React Native usando Expo como ambiente de execução e empacotamento.

  A escolha desta tecnologia foi dada principalmente por representar uma barreira menor de aprendizado para os membros da equipe de frontend, principalmente porque a maiora dos membros já possuiam um contato prévio, o que facilitou o entendimento para outros membros.

2.1 Estrutura de Pastas

A estrutura atual do projeto segue o padrão sugerido pelo Expo Router, contendo:

.
├── android/
│
├── app
│   ├── _layout.tsx
│   └── (tabs)/
│
├── assets
│   └── images
│       └── icons/
│
├── components
│   └── ui/
│
├── constants/
│
├── hooks/
│
├── scripts/
│
└── README.md

• /app - Gerenciamento das páginas

• /assets Ícones, imagens e o logotipo do Inteli

• /components - Componentes reutilizáveis

• /constants - Temas de cores e variáveis globais

• /hooks - Hooks auxiliares como detecção de tema

• /scripts - Scripts internos do projeto

• README - Instruções para rodar o projeto

Pastas Android geradas automaticamente pelo Expo

  Para a realização deste projeto a estrutura de pastas utilizada permite:

• Melhor organização entre rotas, componentes e estilos

• Facilidade para extensões futuras

• Modularização dos componentes usados nas telas

• Padrão de Componentes Reutilizáveis

2.2 Componentes

  Componentes no React são blocos de construção reutilizáveis que dividem a interface do usuário (UI) em partes independentes e isoladas. Neste frontend desenvolvido apra o staff temos os seguintes componentes:

• CardTour - Cartão de exibição de tours na lista da home

• DateSelector - Navegação entre dias da semana para selecionar a data do tour

• PopUpCodigo e PopUpInfosGerais - Pop-ups padronizados de fluxo, para informar o staff e mostrar o código do tuor

• Navbar e Header - Estruturas permanentes no HUD

3. Fluxo de Navegação

Vídeo Frontend Staff - Youtube

Assista no YouTube

4. Como Rodar o Projeto e Dependências

  Esta seção descreve os requisitos e os passos necessários para configurar, instalar e executar o aplicativo do Staff em ambiente de desenvolvimento. O projeto utiliza Expo com Expo Router, permitindo execução rápida tanto em emuladores quanto em dispositivos físicos via Expo Go ou build nativo.

4.1. Requisitos

4.2. Instalando Dependências e Executando o Projeto

Na raiz do projeto:

npm install

Isso instala todas as dependências declaradas em package.json.

Ainda no terminal:

npx expo start

Isso abrirá o Metro Bundler no navegador e terão algumas informações em seu terminal.

As informações que aparecerem no seu terminal devem ser semelhantes a esta:

Entre as opções você pode escolher:

• Escanear o QR Code com o aplicativo Expo Go - No seu celular;
• Abrir a aplicação no seu navegador web
• Abrir a aplicação no android studio

Se o Android Studio estiver instalado, você pode rodar a aplicação no simulador android com o comando:

npx expo run:android

5. Conclusão

Esta documentação descreve os elementos essenciais para o desenvolvimento do frontend do App Staff utilizando React Native + Expo, seguindo o protótipo de alta fidelidade. A estrutura apresentada oferece clareza para implementação, padronização dos componentes e referência visual consistentes.