Gigih_Palatangara/STRAPS_LOCALHOST
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
main
STRAPS_LOCALHOST/DOKUMENTASI_APP_FOLDER.md

389 lines
10 KiB
Markdown
Raw Permalink Blame History

# Dokumentasi Struktur Folder `app/`
## Gambaran Umum
Folder `app/` adalah direktori utama aplikasi Next.js yang menggunakan App Router. Folder ini berisi semua halaman, API routes, dan komponen utama aplikasi pelatihan kebugaran "Straps".
---
## 📁 Struktur Direktori
### 1. **`api/` - API Routes**
Folder yang berisi semua endpoint backend untuk komunikasi antara client dan server.
#### **`api/auth/[...nextauth]/`**
- **Fungsi**: Menangani autentikasi pengguna menggunakan NextAuth.js
- **Endpoint**: `/api/auth/*`
- **Fitur**: Login, logout, session management
#### **`api/clients/`**
- **Fungsi**: Endpoint untuk mengelola data klien
- **Operasi**: CRUD operations untuk client data
#### **`api/coach/link-client/`**
- **File**: `route.ts`
- **Fungsi**: Menghubungkan pelatih (coach) dengan klien mereka
- **Method**: POST untuk membuat hubungan coach-client
#### **`api/logs/`**
- **File**: `route.ts`
- **Fungsi**: Mencatat dan mengambil log aktivitas training
- **Method**: GET (mengambil logs), POST (membuat log baru)
#### **`api/menus/`**
- **File**: `route.ts`
- **Fungsi**: Mengelola menu latihan (workout programs)
- **Method**: GET (semua menu), POST (buat menu baru)
##### **`api/menus/[id]/`**
- **File**: `route.ts`
- **Fungsi**: Operasi pada menu spesifik berdasarkan ID
- **Method**: GET (detail menu), PUT (update), DELETE (hapus)
#### **`api/recap/`**
- **File**: `route.ts`
- **Fungsi**: Menyimpan dan mengambil ringkasan latihan (training recap)
- **Method**: GET (semua recap), POST (simpan recap baru)
- **Data**: Termasuk skor form, detail per-rep, dan statistik latihan
##### **`api/recap/[id]/`**
- **File**: `route.ts`
- **Fungsi**: Mengakses recap latihan spesifik
- **Method**: GET (detail recap), DELETE (hapus recap)
#### **`api/register/`**
- **File**: `route.ts`
- **Fungsi**: Registrasi pengguna baru
- **Method**: POST untuk membuat akun baru (Coach atau Client)
- **Validasi**: Email unik, password hashing
#### **`api/status/`**
- **Fungsi**: Health check endpoint untuk monitoring aplikasi
- **Method**: GET untuk cek status server
#### **`api/users/`**
- **File**: `route.ts`
- **Fungsi**: Mengelola data pengguna
- **Method**: GET (daftar users), POST (buat user)
##### **`api/users/[id]/`**
- **File**: `route.ts`
- **Fungsi**: Operasi pada user spesifik
- **Method**: GET (detail user), PUT (update), DELETE (hapus)
---
### 2. **`client/` - Halaman Klien**
Folder untuk semua halaman yang diakses oleh pengguna dengan role "Client".
#### **`client/page.tsx`**
- **Route**: `/client`
- **Fungsi**: Dashboard utama klien
- **Fitur**:
- Menampilkan program latihan yang ditugaskan
- Tombol navigasi ke mode Training, Free Mode, dan Monitor
- Informasi pelatih yang ditugaskan
#### **`client/free/`**
##### **`client/free/page.tsx`**
- **Route**: `/client/free`
- **Fungsi**: Mode latihan bebas (Personal Menu)
- **Fitur**:
- Builder untuk membuat menu latihan custom
- Sistem berbasis "Round" (Set grouping)
- Pilihan exercise terbatas ke 7 latihan inti
- Penyimpanan ke localStorage
- Duplicate round untuk efisiensi
#### **`client/monitor/`**
##### **`client/monitor/page.tsx`**
- **Route**: `/client/monitor`
- **Fungsi**: Monitor real-time untuk form exercise
- **Fitur**:
- Live camera feed dengan pose detection
- Visual feedback untuk form quality
- Counter repetisi real-time
- Tidak ada target/assignment
#### **`client/training/`**
##### **`client/training/page.tsx`**
- **Route**: `/client/training`
- **Fungsi**: Mode latihan utama dengan program assigned
- **Fitur**:
- AI-powered form tracking per rep
- Automatic rep counting
- Rest timer antar set
- **Training Recap**:
- Summary statistik (total sets, total reps)
- Table detail per set dengan:
- Form score average
- Expandable per-rep breakdown
- Grade labels (Excellent/Good/Fair/Needs Improvement)
- Feedback text spesifik per rep (e.g., "Knees Inward")
- Toggle antara Assigned Program dan Personal Menu
- Reset functionality
---
### 3. **`coach/` - Halaman Pelatih**
Folder untuk semua halaman yang diakses oleh pengguna dengan role "Coach".
#### **`coach/dashboard/`**
##### **`coach/dashboard/page.tsx`**
- **Route**: `/coach/dashboard`
- **Fungsi**: Dashboard utama pelatih
- **Fitur**:
- Daftar klien yang terhubung
- Link Client functionality
- Navigasi ke menu management
#### **`coach/menu/`**
Folder untuk manajemen menu latihan.
##### **`coach/menu/[id]/`**
- **Route**: `/coach/menu/[id]`
- **Fungsi**: Edit menu latihan yang sudah ada
- **Fitur**:
- Form editor untuk menu details
- Exercise composer dengan round system
- Preview menu structure
- Update dan delete operations
##### **`coach/menu/new/`**
- **File**: `page.tsx`
- **Route**: `/coach/menu/new`
- **Fungsi**: Membuat menu latihan baru
- **Fitur**:
- Round-based exercise builder
- Input untuk:
- Nama menu
- Target reps per exercise
- Weight (beban)
- Rest time
- Pilihan 7 exercise core
- Duplicate round
- Group sets by exercise
- Auto-save to database
#### **`coach/recap/`**
##### **`coach/recap/[id]/`**
- **Route**: `/coach/recap/[id]`
- **Fungsi**: Melihat detail recap latihan klien
- **Fitur**:
- Visualisasi statistik klien
- Form quality analysis
- Historical performance tracking
---
### 4. **`debug/`**
- **Fungsi**: Halaman untuk debugging dan testing
- **Status**: Development/testing only
- **Akses**: Biasanya disabled di production
---
### 5. **`generated/` - Prisma Client**
Folder yang di-generate otomatis oleh Prisma ORM.
#### **`generated/client/`**
- **File-file utama**:
- `client.ts` - Prisma Client instance
- `browser.ts` - Browser-compatible client
- `models.ts` - Type definitions untuk database models
- `enums.ts` - Enum definitions
- `commonInputTypes.ts` - Input type definitions
- `libquery_engine-*.so.node` - Native query engine binary
- **Folder `internal/`**: Internal Prisma helpers
- **Folder `models/`**: Model type definitions
**PENTING**: ❌ Jangan edit manual, akan di-regenerate saat `prisma generate`
---
### 6. **`lib/` (Symlink)**
- **Fungsi**: Symlink ke `/lib` di root project
- **Isi**: Helper functions dan utility libraries
- **Contoh isi**:
- `pose/HARCore.ts` - Human Activity Recognition core
- `pose/RehabCore.ts` - Exercise recognition dan rep counting
- Form analysis algorithms
---
### 7. **`login/`**
- **File**: Kemungkinan `page.tsx` (route file)
- **Route**: `/login`
- **Fungsi**: Halaman login untuk semua pengguna
- **Fitur**:
- Form email dan password
- Authentication via NextAuth
- Redirect ke dashboard sesuai role
---
### 8. **`register/`**
- **File**: `page.tsx`
- **Route**: `/register`
- **Fungsi**: Halaman registrasi pengguna baru
- **Fitur**:
- Form input: nama, email, password
- Pilihan role (Coach/Client)
- Validasi input
- Submit ke `/api/register`
---
## 📄 File Konfigurasi Root
### **`favicon.ico`**
- **Fungsi**: Icon aplikasi yang muncul di browser tab
- **Format**: ICO file
- **Size**: 25.9 KB
### **`globals.css`**
- **Fungsi**: Global stylesheet untuk seluruh aplikasi
- **Isi**:
- Reset CSS
- Tailwind CSS directives (@tailwind base, components, utilities)
- Custom color variables
- Global typography styles
- **Size**: ~773 bytes
### **`layout.tsx`**
- **Fungsi**: Root layout component (App-wide wrapper)
- **Fitur**:
- HTML structure (`<html>`, `<body>`)
- Metadata configuration
- Font loading (biasanya)
- Global providers (Session, Theme, etc.)
- **Applies to**: Semua route di aplikasi
- **Size**: ~757 bytes
### **`page.tsx`**
- **Route**: `/` (Homepage)
- **Fungsi**: Landing page aplikasi
- **Fitur**:
- Welcome screen
- Login/Register CTA
- Informasi aplikasi
- Redirect logic berdasarkan auth status
- **Size**: ~15 KB
---
## 🔑 Poin Penting untuk Dokumentasi
### **Routing Convention (Next.js App Router)**
- `page.tsx` → Halaman yang dapat diakses
- `route.ts` → API endpoint
- `layout.tsx` → Layout wrapper
- `[id]/` → Dynamic route parameter
- `[...slug]/` → Catch-all route
### **Role-Based Access**
- `/client/*` → Hanya untuk role "Client"
- `/coach/*` → Hanya untuk role "Coach"
- `/api/*` → Backend endpoints (internal)
### **Key Features**
1. **AI Form Analysis**: Real-time pose detection dan rep counting
2. **Per-Rep Tracking**: Detail skor form untuk setiap repetisi
3. **Round System**: Exercise grouping untuk efisiensi workout builder
4. **Training Recap**: Dashboard komprehensif pasca-latihan
### **Tech Stack**
- **Framework**: Next.js 16 (App Router)
- **Database**: PostgreSQL via Prisma ORM
- **Auth**: NextAuth.js
- **UI**: TailwindCSS
- **AI**: MediaPipe Pose Landmarker
- **Language**: TypeScript
---
## 📊 Diagram Struktur
```
app/
├── api/ # Backend Endpoints
│ ├── auth/
│ ├── coach/
│ ├── logs/
│ ├── menus/
│ ├── recap/
│ ├── register/
│ └── users/
├── client/ # Client Dashboard & Features
│ ├── free/ # Personal Menu Builder
│ ├── monitor/ # Live Form Monitor
│ ├── training/ # Assigned Training Mode
│ └── page.tsx # Client Dashboard
├── coach/ # Coach Dashboard & Tools
│ ├── dashboard/
│ ├── menu/
│ └── recap/
├── generated/ # Prisma Auto-Generated (DO NOT EDIT)
├── lib/ # Utilities (Symlink)
├── login/ # Login Page
├── register/ # Registration Page
├── favicon.ico
├── globals.css # Global Styles
├── layout.tsx # Root Layout
└── page.tsx # Homepage
```
---
## 💡 Tips Maintenance
1. **Jangan edit** folder `generated/` secara manual
2. **Run** `prisma generate` setelah schema change
3. **API routes** mengikuti REST convention
4. **Per-rep data** disimpan dalam struktur nested di recap
5. **Feedback text** di-capture frame-by-frame lalu dianalisa untuk dominan message
Reference in New Issue View Git Blame Copy Permalink