Pular para conteúdo

DermAlert | Frontend

📄 Visão Geral

A aplicação DermAlert é um aplicativo mobile multiplataforma desenvolvido com React Native, com suporte do Expo, Redux Toolkit para gerenciamento de estado global e React Navigation para navegação entre telas. O app tem como objetivo principal facilitar o registro, avaliação e acompanhamento clínico de pacientes com lesões dermatológicas, especialmente voltado para o apoio ao diagnóstico de câncer de pele.

🛠️ Principais Tecnologias

A seguir, estão descritas as principais ferramentas utilizadas no projeto:

  • React Native: Serve como a base da aplicação, permitindo o desenvolvimento de interfaces nativas para Android e iOS a partir de uma única base de código em JavaScript. Isso torna a manutenção e evolução do app mais simples e eficiente.

  • Expo: Framework que facilita o desenvolvimento com React Native. O Expo fornece um ambiente pré-configurado com suporte a diversas funcionalidades nativas, como acesso à câmera e ao sistema de arquivos. No projeto, foi utilizada a nova CLI local do Expo — recomendada a partir do SDK 46 — garantindo compatibilidade com versões recentes do Node.js e maior estabilidade.

  • React Navigation: Biblioteca responsável pela navegação entre telas no aplicativo. Com ela, é possível implementar navegações por pilhas (stacks), abas (tabs) e rotas personalizadas, oferecendo uma experiência fluida ao usuário.

  • Expo Camera: Recurso da própria plataforma Expo, utilizado para capturar imagens diretamente da câmera do dispositivo. Essa funcionalidade é essencial para o propósito principal da aplicação, que envolve o registro de lesões de pele.

  • Expo File System: Ferramenta que permite a manipulação e o armazenamento de arquivos localmente no dispositivo. No caso da DermAlert, é usada principalmente para armazenar temporariamente as imagens capturadas.

  • AsyncStorage (@react-native-async-storage/async-storage): Biblioteca usada para persistência de dados no dispositivo, como preferências do usuário ou informações de sessão. Isso permite que a aplicação mantenha dados importantes mesmo quando está offline.

👥 Perfis de Usuário

A aplicação define dois perfis principais:

  • Profissional de saúde (usuário padrão): pode realizar atendimentos, registrar pacientes, preencher formulários clínicos e capturar imagens de lesões.

  • Administrador: além das funcionalidades de um profissional comum, pode cadastrar, editar e visualizar profissionais de saúde e unidades de atendimento.

📁 Estrutura de Pastas

├── App.tsx                 # Arquivo principal com as rotas
├── pages/                 # Telas do aplicativo
│   ├── admin/             # Telas do administrador
│   ├── user/              # Telas do usuário comum
│   │   ├── lesoes/        # Telas relacionadas a lesões
│   │   ├── consent/       # Telas de consentimento
│   │   ├── questionario/  # Questionário de anamnese
│   └── unidadeSaude/      # Telas para unidades de saúde
├── store/                 # Redux: slices e store central
├── components/            # Componentes reutilizáveis
├── services/              # Integração com APIs
└── utils/                 # Funções utilitárias

📱Telas e Funcionalidades

O aplicativo é organizado em módulos funcionais que refletem o fluxo clínico e administrativo da plataforma:

🚀 Como rodar a aplicação

Pré-requisitos

Antes de rodar a aplicação, certifique-se de ter os seguintes itens instalados em sua máquina:

  • Node.js (recomenda-se a versão LTS)

  • Npm ou Yarn

  • Expo CLI – Instale com:

npm install -g expo-cli

  • Um smartphone com o aplicativo Expo Go instalado (Android ou iOS) ou um emulador Android configurado

  • Clone o repositório

git clone https://github.com/DermAlert/applicativo
cd aplicativo
  1. Instale as dependências Com npm:
npm install

Ou com yarn:

yarn install
  1. Inicie a aplicação com Expo
npx expo start

Isso abrirá o Expo DevTools no navegador. A partir dele, você pode:

  • Escanear o QR code com o app Expo Go

  • Executar no emulador Android

  • Abrir em navegador com Web Preview

Repositório

O repositório do frontend pode ser acessado aqui.

Histórico de Versões

Versão Data Descrição Autor Revisor
1.0 05/04/2025 Cria documento e adiciona conteúdo completo Izabella Alves Davi Rodrigues
1.1 23/04/2025 Adicionando link para o repositório Henrique Galdino Vitor Pereira