Sasuke's Path

Aplicativo móvel interativo para fãs de Naruto, focado no personagem Sasuke Uchiha. Construído com React Native + Expo (TypeScript), combina consumo de API de citações com recursos nativos: câmera, haptics, acelerômetro, TTS, compartilhamento e favoritos.

— Instituto Federal de Educação, Ciência e Tecnologia do Rio Grande do Norte (IFRN)
Projeto Final • Autor: José Augusto de Oliveira Neto • Orientador: Prof. Bruno Emerson Gurgel Gomes • 2025

---

Sumário

• Visão Geral
• Funcionalidades
• Stack e Bibliotecas
• Arquitetura & Pastas
• Design System (Tema)
• Como Rodar (dev)
• Build e Publicação (EAS)
• API de Citações
• Acessibilidade e UX
• Troubleshooting (erros comuns)
• Roadmap
• Contribuição
• Licença e Créditos

---

Visão Geral

O “Sasuke’s Path” é uma aplicação móvel imersiva que:

• Exibe citações aleatórias e uma lista completa com filtros por época.
• Permite ouvir citações via Text-to-Speech.
• Usa o acelerômetro para “sacudir e trocar” a citação.
• Possui módulo “Visão do Sharingan”: tira foto, edita com stickers/temas e compartilha.
• Possui favoritos persistentes e configurações (tema, idioma, lembrete diário).

---

Funcionalidades

• Citações Interativas

  • Aleatórias e listagem com filtros (Genin, Shippuden, Flashback, etc).
  • TTS (Text-to-Speech) em PT/EN/JA.
  • Haptics em ações (favoritar, refresh).
  • “Shake to refresh” via Acelerômetro.
  • Favoritos com persistência local.

• Visão do Sharingan

  • Câmera nativa para capturar foto.
  • Editor básico: aplicar sticker (Sharingan/Rinnegan/Uchiha), mover/rotacionar/escalar.
  • Sobrepor citação na imagem.
  • Salvar na galeria e compartilhar via share sheet do sistema.

• Configurações

  • Alternância de tema (Dark/Light).
  • Idioma: pt | en | ja (i18n).
  • Programar notificação diária com citação (desenvolvimento com Dev Client).

• Onboarding

  • Passo a passo inicial leve e responsivo explicando os módulos.

---

Stack e Bibliotecas

• Linguagem: TypeScript
• Framework: React Native + Expo
• Navegação: React Navigation (Bottom Tabs + Native Stack)
• HTTP: Axios
• i18n: i18n-js + expo-localization

Recursos nativos (Expo):

• expo-camera (Câmera)
• expo-media-library (Galeria)
• expo-sharing (Compartilhar)
• expo-sensors (Acelerômetro)
• expo-haptics (Haptics)
• expo-speech (TTS)
• expo-notifications (Notificações locais – usar Development Build)
• @react-native-async-storage/async-storage (Persistência simples)

Observações de compatibilidade:

• Expo Go limita alguns módulos (notificações remotas, galeria completa). Para testar tudo, use Development Build (Dev Client).
• [expo-av] foi descontinuado no SDK 54; migrar para expo-audio/expo-video quando atualizar o SDK.

---

Arquitetura & Pastas

.
├── App.tsx
├── app.json
├── eas.json
├── assets/
│   ├── fonts/
│   ├── images/
│   ├── icon.png, splash.png, adaptive-icon.png, favicon.png
├── src/
│   ├── api/
│   │   └── sasukeApi.ts
│   ├── components/
│   │   ├── ErrorBoundary.tsx
│   │   ├── LoadingSkeleton.tsx
│   │   └── QuoteCard.tsx
│   ├── contexts/
│   │   └── AppContext.tsx
│   ├── hooks/
│   │   └── useVoiceSearch.ts
│   ├── i18n/
│   │   ├── index.ts
│   │   └── locales/{pt.json,en.json,ja.json}
│   ├── models/
│   │   └── Quote.ts
│   ├── screens/
│   │   ├── HomeScreen.tsx
│   │   ├── QuotesScreen.tsx
│   │   ├── FavoritesScreen.tsx
│   │   ├── SharinganScreen.tsx
│   │   ├── ImageEditorScreen.tsx
│   │   ├── SettingsScreen.tsx
│   │   └── OnboardingScreen.tsx
│   ├── storage/
│   │   └── favorites.ts (caso uso de storage direto)
│   ├── theme/
│   │   └── index.ts
│   └── utils/
│       └── notifications.ts
└── package.json

Padrões:

• Componentes puros em components/.
• Lógica global em contexts/ (estado, tema, favoritos, idioma).
• Funções de dados/API em api/.
• Telas em screens/.
• Estilos orientados a tema (dark/light) em theme/.

---

Design System (Tema)

Dois temas: darkTheme (padrão) e lightTheme.

• Paleta consistente (primary, surface, card, text, border).
• Fontes e espaçamentos centralizados.
• Cores e sombras revisadas para melhor contraste e legibilidade.
• Fonte custom “Uchiha” carregada via useFonts.

Acessibilidade de cores priorizada (contraste em textos principais e botões).

---

Como Rodar (dev)

Pré-requisitos:

• Node.js LTS
• Git
• Expo CLI (usa npx)
• Android Studio / Xcode (para emulador) — opcional

Instalação:

# clonar
git clone https://github.com/Augusto240/sasuke_quotes_app.git
cd sasuke_quotes_app

# instalar deps
npm install

# iniciar em modo dev
npx expo start

Executar:

• Android (emulador ou dispositivo com Expo Go):

# No terminal do Expo, aperte "a"
# ou
npx expo run:android   # build local nativa (instala no dispositivo)

• iOS (apenas macOS):

# No terminal do Expo, aperte "i"
# ou
npx expo run:ios

Observações importantes (Expo Go):

• Notificações remotas e certas permissões de mídia não funcionam totalmente no Expo Go (SDK ≥ 53). Para testar tudo, crie um Development Build (veja abaixo).

---

Build e Publicação (EAS)

1. Login e link de projeto:

npx expo login
npx eas login
npx eas init  # se necessário; adiciona o projectId automático ao app.json

2. Build de produção:

npx eas build -p android --profile production
# npx eas build -p ios --profile production

3. Development Build (Dev Client) — para testar módulos nativos sem limitações do Expo Go:

npx eas build -p android --profile preview
# depois, instale o .apk/.aab no dispositivo e rode:
npx expo start
# escaneie com o Dev Client instalado

Publicação na Play Store:

• Use o .aab gerado pelo EAS.
• Configure o pacote Android em app.json ("android.package": "com.augusto.sasukepath").
• Submeta via Google Play Console.

---

API de Citações

Base URL:

https://sasuke-api.vercel.app/api

• Endpoints:

  • GET /quote → uma citação aleatória
  • GET /quotes → lista completa ({ quotes: Quote[] })
  • GET /quotes/category/:category → por categoria (genin, shippuden, flashback)

• Modelo (Quote):

type Quote = {
  id: number;
  quote: string;
  context: string;
  category: string; // ex.: "genin" | "shippuden" | "flashback"
  source: string;
};

• Exemplo de uso (axios):

import axios from 'axios';

const BASE_URL = 'https://sasuke-api.vercel.app/api';

export async function getRandomQuote() {
  const res = await axios.get(`${BASE_URL}/quote`);
  return res.data;
}

---

Acessibilidade e UX

• Tipografia: tamanhos suficientes e legíveis, itálicos apenas em citações, fonte custom clara.
• Contraste: tema dark com textos em alto contraste e bordas suaves.
• Haptics: feedback sutil em ações importantes (favoritar, refresh).
• Animações: suaves e discretas; evite “piscar” reiniciando animações a cada render.
• “Shake to refresh”: limiar de aceleração com debounce para evitar disparos múltiplos.

---

Troubleshooting (erros comuns)

• Expo Go e Notificações

  • Mensagem: “expo-notifications foi removido do Expo Go no SDK 53”.
  • Solução: use um Development Build (Dev Client) com EAS para testar notificações.

• Acesso completo à galeria no Android (Expo Go)

  • Mensagem: “Expo Go não pode prover acesso completo”.
  • Solução: teste com Development Build.

• Porta 8081 ocupada

  • Expo alterna automaticamente (ex.: 8083). Isso é esperado.

• Erro “Element type is invalid”

  • Causa: confusão entre export default e export { Nome }.
  • Solução: alinhe import/export corretamente.

• Erro “ActivityIndicator doesn’t exist”

  • Causa: esqueceu o import.
  • Solução: import { ActivityIndicator } from 'react-native';.

• Aviso [expo-av] deprecado

  • Causa: SDK ≥ 54.
  • Solução: migrar para expo-audio / expo-video quando atualizar o SDK.

• Fila demorada no EAS (Free Tier)

  • Comum ver espera de 1–2h.
  • Alternativas: build local (npx expo run:android) ou plano pago.

---

Roadmap

• Migrar de expo-av para expo-audio/expo-video (quando subir SDK).
• Melhorias no editor de imagens (texto multi-linha, cores, export com marca d’água).
• Sincronização de favoritos na nuvem (opcional).
• Modo offline (cache de citações).
• Testes automatizados (unitários e e2e).

---

Contribuição

1. Faça um fork do repositório.
2. Crie uma branch:

git checkout -b feat/nome-da-feature

3. Commit:

git commit -m "feat: descreva sua mudança"

4. Push:

git push origin feat/nome-da-feature

5. Abra um Pull Request.

Padrões:

• TypeScript estrito quando possível
• Componentes puros, hooks para lógica
• Evitar regressões visuais (testar em telas pequenas)

---

Contato

• Autor: José Augusto de Oliveira Neto (GitHub: @Augusto240)
• Projeto: https://github.com/Augusto240/sasuke_quotes_app

Se encontrar algum bug ou tiver sugestões, abra uma Issue ou PR. Bom uso!