blob: cb818a709ddf1fca351dd2a2810841427279d62f (
plain) (
tree)
|
|
# Makima Mobile
A React Native mobile application for Makima, built with Expo and expo-router.
## Overview
This mobile app allows users to:
- View and manage tasks created from contracts
- Monitor task progress in real-time
- Answer pending questions from running tasks
- Track task status (running, completed, failed, blocked)
- Authenticate via Supabase
## Prerequisites
- Node.js 18+
- npm or yarn
- Expo CLI (`npm install -g expo-cli`)
- iOS Simulator (macOS) or Android Emulator
- Expo Go app (for physical device testing)
## Getting Started
### 1. Install dependencies
```bash
npm install
```
### 2. Set up environment variables
Copy the example environment file and fill in your values:
```bash
cp .env.example .env
```
Edit `.env` with your actual credentials:
```env
EXPO_PUBLIC_SUPABASE_URL=https://ynxyjytytmfwxjqxljzm.supabase.co
EXPO_PUBLIC_SUPABASE_ANON_KEY=your_actual_anon_key
EXPO_PUBLIC_API_URL=https://api.makima.jp
```
### 3. Start the development server
```bash
npm start
```
This will open the Expo Dev Tools in your browser.
## Available Commands
| Command | Description |
|---------|-------------|
| `npm start` | Start the Expo development server |
| `npm run ios` | Start on iOS simulator |
| `npm run android` | Start on Android emulator |
| `npm run web` | Start web version |
| `npm run lint` | Run ESLint |
| `npm run typecheck` | Run TypeScript type checking |
## Project Structure
```
apps/mobile/
├── app/ # Expo Router screens
│ ├── (auth)/ # Authentication screens
│ │ ├── _layout.tsx # Auth layout
│ │ └── login.tsx # Login screen
│ ├── (tabs)/ # Tab navigation screens
│ │ ├── _layout.tsx # Tab layout
│ │ ├── index.tsx # Dashboard
│ │ ├── tasks.tsx # Task list
│ │ └── settings.tsx # Settings
│ ├── task/ # Task detail screens
│ │ ├── _layout.tsx # Task layout
│ │ └── [id].tsx # Task detail by ID
│ └── _layout.tsx # Root layout
├── components/ # Reusable components
├── constants/ # App constants (colors, etc.)
├── contexts/ # React contexts
├── hooks/ # Custom React hooks
├── lib/ # Utility libraries
│ ├── api.ts # API client
│ ├── auth.ts # Auth utilities
│ ├── config.ts # App configuration
│ └── supabase.ts # Supabase client
└── stores/ # Zustand stores
```
## Features
### Authentication
- Email/password sign-in via Supabase
- Secure token storage using expo-secure-store
- Automatic session refresh
### Dashboard
- Overview of running tasks
- Pending questions alert
- Quick access to tasks needing attention
- Task counts by status
### Tasks
- List all tasks with status filtering
- Search tasks by name
- Pull-to-refresh
- Navigate to task details
### Task Details
- View task status and progress
- See subtasks
- View error messages if failed
- Task metadata (created, started, completed times)
### Settings
- Sign out functionality
- Environment indicator
- Links to support/legal pages
## Technology Stack
- **Framework**: React Native with Expo
- **Navigation**: expo-router (file-based routing)
- **State Management**: Zustand
- **Data Fetching**: TanStack React Query
- **Auth**: Supabase Auth
- **Styling**: React Native StyleSheet
- **Icons**: @expo/vector-icons (Ionicons)
## Development Notes
### Environment Configuration
The app automatically detects development vs production mode:
- In development on iOS: Uses `localhost:8080`
- In development on Android: Uses `10.0.2.2:8080` (Android emulator's host)
- In production: Uses `https://api.makima.jp`
You can override this by setting `EXPO_PUBLIC_API_URL`.
### TypeScript
Run type checking before committing:
```bash
npm run typecheck
```
### Building for Production
Export for all platforms:
```bash
npx expo export --platform all
```
## License
MIT
|
