# Quick Start Guide

Get the Agriculture Robot Control System up and running in minutes!

## Prerequisites

- **Node.js** 18 or higher
- **npm** (comes with Node.js)
- A modern web browser (Chrome, Firefox, Edge, Safari)

## Step-by-Step Setup

### 1. Install Dependencies

Open a terminal in the project root and run:

```bash
# Install backend dependencies
cd backend
npm install

# Install frontend dependencies
cd ../frontend
npm install
```

Or use the convenience script:

```bash
npm run install:all
```

### 2. Configure Environment (Optional)

The backend will work with default settings, but you can customize:

```bash
cd backend
cp .env.example .env
# Edit .env if needed
```

### 3. Start the Backend Server

In one terminal window:

```bash
cd backend
npm run dev
```

You should see:
```
🚜 Agriculture Robot Control Server running on port 3001
📡 WebSocket server ready for connections
🤖 Robot simulator initialized
```

### 4. Start the Frontend Application

In another terminal window:

```bash
cd frontend
npm run dev
```

You should see:
```
VITE v5.x.x  ready in xxx ms

➜  Local:   http://localhost:3000/
```

### 5. Open the Application

Open your browser and navigate to:
```
http://localhost:3000
```

## First Steps

1. **Check Connection**: Look at the top-right corner - it should show "Connected" with a green indicator.

2. **View Dashboard**: The dashboard shows real-time robot status, battery, temperature, and position.

3. **Try Robot Control**: 
   - Go to the "Control" page
   - Select "Manual Control" mode
   - Use the directional buttons to move the robot
   - Adjust the speed slider

4. **Explore Field Map**:
   - Go to the "Field Map" page
   - Click "Draw Boundaries" to define field boundaries
   - Click "Add Waypoint" to add navigation points

5. **View Sensors**:
   - Go to the "Sensors" page
   - See real-time sensor readings
   - View historical charts

6. **Check Diagnostics**:
   - Go to the "Diagnostics" page
   - View system health
   - Check for any alerts

## Troubleshooting

### Backend won't start

- **Port 3001 already in use**: Change the PORT in `backend/.env` or stop the other service
- **Dependencies not installed**: Run `npm install` in the backend directory
- **TypeScript errors**: Make sure you have TypeScript installed globally or use `npx`

### Frontend won't start

- **Port 3000 already in use**: Vite will automatically try the next available port
- **Dependencies not installed**: Run `npm install` in the frontend directory
- **Can't connect to backend**: Make sure the backend is running on port 3001

### WebSocket connection issues

- **Connection shows "Disconnected"**: 
  - Check that the backend is running
  - Check browser console for errors
  - Verify WebSocket URL in `frontend/src/contexts/WebSocketContext.tsx`

### Map not loading

- **Leaflet tiles not showing**: Check your internet connection (maps load from OpenStreetMap)
- **Map is blank**: Try refreshing the page

## Development Tips

### Hot Reload

Both frontend and backend support hot reload:
- **Frontend**: Changes to React components update automatically
- **Backend**: Changes to TypeScript files restart the server automatically

### Testing Robot Commands

Use the browser's developer console to test API calls:

```javascript
// Move robot forward
fetch('http://localhost:3001/api/robot/move', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ direction: 'forward', speed: 50 })
});

// Get robot state
fetch('http://localhost:3001/api/robot/state')
  .then(r => r.json())
  .then(console.log);
```

### Viewing WebSocket Messages

Open browser console and you'll see WebSocket messages logged.

## Next Steps

1. **Read the Documentation**: Check `README.md` for full feature documentation
2. **Explore Architecture**: See `ARCHITECTURE.md` for system design details
3. **Customize**: Modify colors, add features, integrate with real hardware
4. **Deploy**: Follow deployment instructions in the main README

## Common Commands

```bash
# Backend
cd backend
npm run dev      # Development mode
npm run build    # Production build
npm start        # Run production build

# Frontend
cd frontend
npm run dev      # Development mode
npm run build    # Production build
npm run preview  # Preview production build
```

## Need Help?

- Check the main `README.md` for detailed documentation
- Review `ARCHITECTURE.md` for system design
- Check browser console and terminal for error messages
- Ensure all dependencies are installed correctly

Happy farming! 🚜🌾