Guarda-roupa

App mobile que salva suas roupas antes que seja tarde demais.

Sobre   •   Estrutura   •   Instalação   •   Changelog

---

Sobre o projeto

O Guarda-roupa é um aplicativo mobile que resolve um problema cotidiano: recolher ou expor roupas no varal sem depender de "achismos" sobre o tempo antes de ser tarde demais.

A ideia central é combinar uma API de clima em tempo real com um módulo Arduino físico e o controle por aplicativo para automatizar de forma inteligente a decisão de expor e recolher roupas no varal.

Funcionalidades

• Tela principal com animações de fundo dinâmicas, baseadas na condição climática real e horário do dia.
• Menu recolhido:
  • Texto info de Data + local e seção com previsão horária via OpenWeatherMap
  • Seleção de região por modal:
    • Fluxo País → Estado → Município.
    • Opção de definir local padrão.
• Botão flutuante RECOLHER / EXPOR na divisa do menu, com animação de linhas irradiando.
• Menu expandido:
  • Seção de calendário:
    • Escolha de dia.
    • Previsão horária filtrada com base no mesmo payload.
  • Seção de Histórico do varal:
    • Registro de mudanças entre recolhido/expandido.
    • Identificação da origem da mudança (manual, automático, chuva ou fim do dia).
• Integração em tempo real com módulo Arduino via API local:
  • Leitura periódica de status do varal (estendido, chuva, roupa detectada).
  • Leitura ativa de comandos do botão RECOLHER / EXPOR
• Regras de segurança no controle do varal:
  • Confirmação para estender em caso de chuva.
  • Confirmação quando não há roupa detectada.

Tecnologias utilizadas

Core e navegação

Interface e animações

Dependências externas

Hardware e embarcados

Voltar para o início ↺

Estrutura do projeto

guardaRoupaApp/
├── app/                              # Roteamento (Expo Router)
│   ├── _layout.jsx                   # Carregar fontes, loading inicial, StatusBar, Stack
│   └── index.jsx                     # Rota inicial → MainScreen
├── Arduino/
│   └── Arduino.ino                   # Firmware: motor + sensores + protocolo serial (E/R/S)
├── Arduino-api/
│   └── server.js                     # API local (Express) de ponte entre App e Arduino via porta serial
├── assets/
│   ├── animations/                   # Animações para as diferentes condições de clima
│   │   ├── clouds.json
│   │   ├── night.json
│   │   ├── rain.json
│   │   └── sunny.json
│   ├── fonts/                        # Fontes customizadas
│   │   ├── croogla-bold.otf
│   │   ├── croogla-extralight.otf
│   │   ├── croogla-light.otf
│   │   ├── croogla-medium.otf
│   │   └── croogla-regular.otf
│   └── images/                       # Logo do projeto
│       └── guarda-roupa-logo.png
├── constants/
│   ├── theme.js                      # Paleta, cores e tokens visuais
│   └── typography.js                 # Sistema de tipografia com variantes de fonte Croogla
├── src/
│   ├── components/
│   │   ├── ExpandMenuBtn.jsx         # Botão expandir/recolher menu
│   │   ├── ForecastCalendar.jsx      # Calendário mensal, navegação de mês e seleção de dia (integrado à API)
│   │   ├── HourlyForecast.jsx        # Lista horizontal: hora, ícone, precipitação (%)
│   │   ├── LocationSelectModal.jsx   # Modal: local manual (país/estado/município) e local padrão
│   │   ├── ToggleVaralBtn.jsx        # Botão de toggle recolher/expor varal
│   │   └── WeatherBackdropAnimation.jsx # Fundo animado por condição climática
│   ├── data/
│   │   ├── locationOptions.js        # Opções encadeadas para seleção de local na modal
│   │   ├── clotheslineHistory.json   # Histórico persistido em JSON durante a execução
│   │   └── mockData.js               # Dados mockados
│   ├── hooks/
│   │   ├── useClotheslineHistoryTracker.js # Rastreador de mudanças no estado do varal
│   │   └── useWeather.js             # GPS/manual, local padrão (AsyncStorage), OWM (clima + /forecast + cidade)
│   ├── screens/
│   │   └── MainScreen.jsx            # Céu + menu, data selecionada, clima carregado e exibido
│   ├── services/
│   │   ├── arduinoService.js         # Cliente HTTP para API local do Arduino (/status e /command)
│   │   ├── clotheslineHistoryService.js # Persistência em memória/AsyncStorage do histórico do varal
│   │   └── weatherService.js         # OpenWeatherMap: clima atual, previsão 5d/3h, reverse geocoding (cidade)
│   └── utils/
│       ├── forecastDateUtils.js      # Datas PT-BR, grade do calendário, itens horários (incl. precipitação pop)
│       ├── historyUtils.js           # Formatação e helpers do histórico de atividade
│       ├── timeUtils.js              # Formatação de horários
│       └── weatherUtils.js           # Gradiente do céu, ícones e texto de condição
├── .editorconfig
├── .env.example
├── CHANGELOG.md
├── eslint.config.js
├── metro.config.js
├── package.json
├── tsconfig.json
└── README.md

Voltar para o início ↺

Instalação

Iniciando o projeto

Important

Certifique-se de ter os seguintes requisitos antes de iniciar:

1. Clone o repositório

git clone https://github.com/seu-usuario/guardaRoupaApp.git
cd guardaRoupaApp

2. Instale as dependências do projeto

npm install

3. Instale o Expo CLI globalmente (caso não tenha)

npm install -g expo-cli

4. Inicie o projeto

npm start

Note

O comando npm start foi configurado para abrir o Expo em modo túnel por padrão.

5. Para abrir no navegador desktop, pressione w.

6. Para configurar o teste em celular físico, leia Ajuste de rede para teste em celular físico.

Voltar para o início ↺

API de clima (OpenWeatherMap)

O app usa a API OpenWeatherMap. Sem chave, a previsão não carrega.

1. Crie uma conta em openweathermap.org/api e gere uma API key (plano gratuito já satisfaz casos de teste do app).

2. Na raiz do projeto, copie o exemplo e crie o arquivo .env:

   cp .env.example .env

3. Edite .env e defina:

   EXPO_PUBLIC_OWM_API_KEY=sua_chave_aqui
   

4. Reinicie o bundler (Ctrl+C e npm start de novo). Variáveis EXPO_PUBLIC_* só entram após reiniciar o Expo.

5. No dispositivo/emulador, permita localização quando o app pedir (o clima usa GPS).

Voltar para o início ↺

Módulo Arduino (API local + firmware)

O controle físico do varal funciona em 3 camadas:

1. App Expo envia/consulta estado via HTTP
2. API local Node/Express (ponte serial) converte HTTP para comandos da serial
3. Arduino executa o movimento e responde status em JSON

1) Suba o firmware no Arduino

• Abra o arquivo Arduino/Arduino.ino na IDE do Arduino
• Conecte o hardware (motor de passo + sensor ultrassônico + sensor de chuva)
• Faça upload para a placa

2) Configure e rode a API local

1. Ajuste a porta serial no arquivo Arduino-api/server.js (ex.: COM3, COM9, /dev/ttyACM0)

2. Inicie a API na raiz do projeto:

   node Arduino-api/server.js

3. A API sobe na porta 3000 com endpoints:

   • GET /status → retorna { estendido, chuva, roupa }
   • POST /command com { "action": "E" } ou { "action": "R" }

3) Ajuste de rede para teste em celular físico

• Se quiser testar com seu celular, defina EXPO_PUBLIC_ARDUINO_API_URL no .env com o IP da máquina que roda a API, não com localhost (ex.: http://10.50.64.251:3000).
• Celular e computador precisam estar na mesma rede local ou na mesma VPN que alcance esse IP
• Depois de alterar o .env, reinicie o Expo com cache limpo para recompilar as variáveis públicas
• Para abrir e testar, use o Expo Go no celular:

1. Instale o Expo Go (App Store ou Google Play).
2. Rode npm start na raiz do projeto.
3. Abra o Expo Go no celular e escaneie o QR code mostrado no terminal.

4) Protocolo serial usado

• E: estender varal

• R: recolher varal

• S: solicitar status atual

• Resposta do Arduino: JSON em linha única, por exemplo:

  { "estendido": true, "chuva": false, "roupa": true }

Voltar para o início ↺

Changelog

O projeto mantém um histórico de alterações detalhado para cada versão, incluindo:

• Novas funcionalidades adicionadas
• Alterações em funcionalidades existentes
• Correções de bugs

Consulte o CHANGELOG.md para ver o histórico completo de alterações.

Voltar para o início ↺