432 lines
8.0 KiB
Markdown
432 lines
8.0 KiB
Markdown
# 🚀 Quick Start Guide
|
|
|
|
Panduan cepat untuk menjalankan Dashboard Solusi AI Peternakan Ayam.
|
|
|
|
## ⚡ TL;DR - Super Quick Start
|
|
|
|
### Opsi 1: Docker (Recommended for Production) 🐳
|
|
|
|
```bash
|
|
# 1. Install Docker & Docker Compose
|
|
# 2. Clone repository
|
|
git clone <repo-url>
|
|
cd dashboard-solusi-ai-peternakan-ayam
|
|
|
|
# 3. Deploy
|
|
docker-compose up -d --build
|
|
|
|
# 4. Access
|
|
# http://localhost
|
|
```
|
|
|
|
### Opsi 2: Manual (For Development) 💻
|
|
|
|
```bash
|
|
# 1. Install dependencies
|
|
npm install
|
|
cd backend && npm install && cd ..
|
|
|
|
# 2. Terminal 1 - Start Backend
|
|
cd backend
|
|
npm run dev
|
|
|
|
# 3. Terminal 2 - Start Frontend
|
|
npm run dev
|
|
|
|
# 4. Open browser
|
|
# Frontend: http://localhost:3001
|
|
# Backend API: http://localhost:5001
|
|
```
|
|
|
|
---
|
|
|
|
## 🐳 Docker Deployment (Recommended)
|
|
|
|
### Prerequisites
|
|
|
|
- ✅ Docker v20.10+ ([Download](https://docs.docker.com/get-docker/))
|
|
- ✅ Docker Compose v2.0+ ([Download](https://docs.docker.com/compose/install/))
|
|
|
|
### Quick Deploy
|
|
|
|
```bash
|
|
# Clone repository
|
|
git clone <repo-url>
|
|
cd dashboard-solusi-ai-peternakan-ayam
|
|
|
|
# Create data directory
|
|
mkdir -p data
|
|
|
|
# Deploy
|
|
docker-compose up -d --build
|
|
|
|
# Check status
|
|
docker-compose ps
|
|
|
|
# View logs
|
|
docker-compose logs -f
|
|
```
|
|
|
|
**Access:** http://localhost or http://your-server-ip
|
|
|
|
**📚 Complete Docker Guide:** [DOCKER.md](DOCKER.md)
|
|
|
|
---
|
|
|
|
## 💻 Manual Installation
|
|
|
|
## 📋 Prerequisites
|
|
|
|
Pastikan sudah terinstall:
|
|
|
|
- ✅ Node.js v18+ ([Download](https://nodejs.org/))
|
|
- ✅ npm v9+
|
|
- ✅ Port 3001 dan 5001 tersedia
|
|
|
|
Cek versi:
|
|
|
|
```bash
|
|
node --version # Should be v18.0.0 or higher
|
|
npm --version # Should be v9.0.0 or higher
|
|
```
|
|
|
|
---
|
|
|
|
## 📦 Step 1: Install Dependencies
|
|
|
|
### Frontend Dependencies
|
|
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
### Backend Dependencies
|
|
|
|
```bash
|
|
cd backend
|
|
npm install
|
|
cd ..
|
|
```
|
|
|
|
**Troubleshooting:**
|
|
|
|
- Jika error `EACCES`: Gunakan `sudo npm install` atau fix npm permissions
|
|
- Jika error `node-gyp`: Install build tools untuk OS Anda
|
|
|
|
---
|
|
|
|
## ▶️ Step 2: Start Backend Server
|
|
|
|
**Buka Terminal 1:**
|
|
|
|
```bash
|
|
cd backend
|
|
npm run dev
|
|
```
|
|
|
|
**✅ Output yang benar:**
|
|
|
|
```
|
|
========================================
|
|
🚀 Server running on http://localhost:5001
|
|
========================================
|
|
|
|
API Endpoints:
|
|
GET /health
|
|
GET /api/cycles
|
|
GET /api/cycles/active
|
|
...
|
|
|
|
✓ Database initialized successfully
|
|
```
|
|
|
|
**❌ Jika gagal:**
|
|
|
|
**Problem:** Port 5001 sudah terpakai
|
|
|
|
```bash
|
|
# Check what's using port 5001
|
|
lsof -i :5001
|
|
|
|
# Solution: Change port in backend/.env
|
|
PORT=5002
|
|
```
|
|
|
|
**Problem:** Database error
|
|
|
|
```bash
|
|
# Make sure PostgreSQL is running
|
|
# For local development, check backend/.env for DB credentials
|
|
cd backend
|
|
node database/seed-postgres.js
|
|
```
|
|
|
|
---
|
|
|
|
## ▶️ Step 3: Start Frontend Server
|
|
|
|
**Buka Terminal 2 (baru):**
|
|
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
**✅ Output yang benar:**
|
|
|
|
```
|
|
VITE v6.4.1 ready in 155 ms
|
|
|
|
➜ Local: http://localhost:3001/
|
|
➜ Network: http://127.0.2.2:3001/
|
|
```
|
|
|
|
**Note:** Jika port 3001 terpakai, Vite akan otomatis menggunakan port lain (misalnya 3002).
|
|
|
|
---
|
|
|
|
## 🌐 Step 4: Open in Browser
|
|
|
|
Buka browser dan akses:
|
|
|
|
**Frontend Dashboard:**
|
|
|
|
```
|
|
http://localhost:3001
|
|
```
|
|
|
|
**Backend API (optional):**
|
|
|
|
```
|
|
http://localhost:5001/health
|
|
```
|
|
|
|
---
|
|
|
|
## ✅ Verify Installation
|
|
|
|
### Test 1: Backend Health Check
|
|
|
|
```bash
|
|
curl http://localhost:5001/health
|
|
```
|
|
|
|
**Expected response:**
|
|
|
|
```json
|
|
{ "status": "ok", "timestamp": "2025-12-22T03:02:20.793Z" }
|
|
```
|
|
|
|
### Test 2: Get Cycles Data
|
|
|
|
```bash
|
|
curl http://localhost:5001/api/cycles
|
|
```
|
|
|
|
**Expected response:**
|
|
|
|
```json
|
|
{
|
|
"success": true,
|
|
"data": [
|
|
{
|
|
"id": "CYCLE-JBW-2025-12-10",
|
|
"totalDays": 42,
|
|
"currentDay": 7,
|
|
"startDate": "2025-12-10",
|
|
"endDate": "2026-01-20",
|
|
"docInCount": 20000,
|
|
"status": "Active",
|
|
...
|
|
}
|
|
]
|
|
}
|
|
```
|
|
|
|
### Test 3: Frontend Loads
|
|
|
|
1. Open http://localhost:3001
|
|
2. You should see the dashboard with:
|
|
- ✅ KPI cards (Population, Mortality, etc.)
|
|
- ✅ Linimasa Siklus sidebar menu
|
|
- ✅ No console errors (press F12)
|
|
|
|
### Test 4: Database Integration
|
|
|
|
1. Navigate to "Linimasa Siklus Produksi"
|
|
2. Click "Edit" on active cycle
|
|
3. Change DOC In count: 20000 → 21000
|
|
4. Click "Simpan"
|
|
5. Refresh page (F5)
|
|
6. **✅ Data should persist** - DOC count still shows 21000
|
|
|
|
---
|
|
|
|
## 📚 Next Steps
|
|
|
|
### Explore Features
|
|
|
|
1. **Dashboard Utama** - View KPI and real-time monitoring
|
|
2. **Linimasa Siklus** - Manage production cycles
|
|
3. **Hitung Ayam > Manajemen Data** - Edit mortality data
|
|
4. **Monitoring Berat** - View weight distribution
|
|
5. **Standar Performa** - Compare with Cobb standards
|
|
|
|
### Test Database Persistence
|
|
|
|
**Test Mortality Data:**
|
|
|
|
1. Go to "Hitung Ayam" > "Manajemen Data"
|
|
2. Click "Edit" on any day
|
|
3. Change mortality value
|
|
4. Click save (✓)
|
|
5. Refresh page - data should persist
|
|
|
|
---
|
|
|
|
## 🔧 Common Issues
|
|
|
|
### Issue: "Cannot connect to backend"
|
|
|
|
**Symptoms:**
|
|
|
|
- Frontend shows no data
|
|
- Console shows: `Failed to load cycles from database`
|
|
|
|
**Solution:**
|
|
|
|
1. Check backend is running: `curl http://localhost:5001/health`
|
|
2. Check CORS settings in `backend/server.js`
|
|
3. Check frontend API URL in `services/apiService.ts`:
|
|
```typescript
|
|
const DB_API_BASE_URL = 'http://localhost:5001/api';
|
|
```
|
|
|
|
### Issue: "Port already in use"
|
|
|
|
**Backend (5001):**
|
|
|
|
```bash
|
|
# Find process using port 5001
|
|
lsof -i :5001
|
|
|
|
# Kill the process (replace PID)
|
|
kill -9 <PID>
|
|
|
|
# Or change port in backend/.env
|
|
```
|
|
|
|
**Frontend (3001):**
|
|
|
|
- Vite will auto-select another port
|
|
- Check terminal output for actual port
|
|
|
|
### Issue: "Database not found" or "Connection refused"
|
|
|
|
```bash
|
|
# Make sure PostgreSQL is running locally
|
|
# Check connection settings in backend/.env:
|
|
# DB_HOST=localhost
|
|
# DB_PORT=5432
|
|
# DB_USER=dashboard_user
|
|
# DB_PASSWORD=your_password
|
|
# DB_NAME=dashboard_db
|
|
|
|
cd backend
|
|
node database/seed-postgres.js
|
|
npm run dev
|
|
```
|
|
|
|
### Issue: "Module not found"
|
|
|
|
```bash
|
|
# Reinstall dependencies
|
|
rm -rf node_modules package-lock.json
|
|
npm install
|
|
|
|
# Backend
|
|
cd backend
|
|
rm -rf node_modules package-lock.json
|
|
npm install
|
|
```
|
|
|
|
---
|
|
|
|
## 🛑 Stopping Servers
|
|
|
|
**Stop Backend:**
|
|
|
|
```bash
|
|
# In backend terminal, press:
|
|
Ctrl + C
|
|
```
|
|
|
|
**Stop Frontend:**
|
|
|
|
```bash
|
|
# In frontend terminal, press:
|
|
Ctrl + C
|
|
```
|
|
|
|
**Kill All Node Processes (if stuck):**
|
|
|
|
```bash
|
|
# macOS/Linux
|
|
killall node
|
|
|
|
# Windows
|
|
taskkill /F /IM node.exe
|
|
```
|
|
|
|
---
|
|
|
|
## 📖 Full Documentation
|
|
|
|
For detailed documentation, see:
|
|
|
|
- **[README.md](README.md)** - Complete project documentation
|
|
- **[backend/README.md](backend/README.md)** - Backend API documentation
|
|
- **API Endpoints** - http://localhost:5001 (when server is running)
|
|
|
|
---
|
|
|
|
## 💡 Tips
|
|
|
|
1. **Keep both terminals open** - Don't close backend and frontend terminals
|
|
2. **Check logs** - Backend logs show all API requests and SQL queries
|
|
3. **Use browser DevTools** - F12 to see network requests and errors
|
|
4. **Database is PostgreSQL** - Connection details in `backend/.env`
|
|
5. **Auto-reload** - Both frontend and backend support hot reload
|
|
6. **Local database guide** - See [docs/LOCAL_DATABASE_GUIDE.md](docs/LOCAL_DATABASE_GUIDE.md) for syncing with production
|
|
|
|
---
|
|
|
|
## ✨ Features Quick Reference
|
|
|
|
| Feature | Location | Description |
|
|
| -------------- | ---------------------------- | ------------------------- |
|
|
| View Cycles | Linimasa Siklus | See all production cycles |
|
|
| Edit Cycle | Linimasa > Edit | Modify dates, DOC count |
|
|
| Mortality Data | Hitung Ayam > Manajemen Data | CRUD mortality records |
|
|
| Weight Stats | Monitoring Berat | View weight distribution |
|
|
| Cobb Standards | Standar Performa | Compare with standards |
|
|
|
|
---
|
|
|
|
## 🎯 Success Checklist
|
|
|
|
- [ ] Backend running on port 5001
|
|
- [ ] Frontend running on port 3001
|
|
- [ ] `/health` endpoint returns `{"status":"ok"}`
|
|
- [ ] `/api/cycles` returns 4 cycles
|
|
- [ ] Dashboard loads in browser
|
|
- [ ] Can edit cycle data and it persists
|
|
- [ ] Can edit mortality data and it persists
|
|
- [ ] No errors in browser console
|
|
- [ ] No errors in backend logs
|
|
|
|
---
|
|
|
|
**Ready to go! 🚀**
|
|
|
|
If you encounter any issues not covered here, check the full [README.md](README.md) or [backend/README.md](backend/README.md).
|