# Mobile Access Guide

This guide explains how to access the Agriculture Robot Control app from your mobile phone.

## Prerequisites

1. **Both devices on same network**: Your computer and mobile phone must be connected to the same Wi-Fi network
2. **Backend server running**: The backend must be running on your computer
3. **Frontend server running**: The frontend must be running on your computer

## Step 1: Find Your Computer's IP Address

### Windows
1. Open Command Prompt or PowerShell
2. Run: `ipconfig`
3. Look for "IPv4 Address" under your active network adapter
4. It will look like: `192.168.1.100` or `192.168.0.50`

### Mac/Linux
1. Open Terminal
2. Run: `ifconfig` or `ip addr`
3. Look for your network interface (usually `en0` or `wlan0`)
4. Find the `inet` address (e.g., `192.168.1.100`)

## Step 2: Start the Servers

### Start Backend
```bash
cd backend
npm run dev
```

### Start Frontend
```bash
cd frontend
npm run dev
```

When the frontend starts, you should see:
```
VITE v5.x.x  ready in xxx ms

➜  Local:   http://localhost:3000/
➜  Network: http://192.168.1.100:3000/  ← Use this IP on mobile
```

## Step 3: Access from Mobile

1. **Open your mobile browser** (Chrome, Safari, Firefox, etc.)

2. **Enter the network URL**:
   ```
   http://YOUR_COMPUTER_IP:3000
   ```
   
   Example: `http://192.168.1.100:3000`

3. **The app should load!** You can now:
   - Sign up or log in
   - Control your robot
   - View sensors
   - Access all features

## Troubleshooting

### "Cannot connect to server"
- Make sure both devices are on the same Wi-Fi network
- Check that the backend is running on port 3001
- Verify your computer's IP address is correct
- Try disabling firewall temporarily to test

### "Site can't be reached"
- Check that the frontend server is running
- Verify you're using the correct IP address
- Make sure you're using `http://` not `https://`
- Check that port 3000 is not blocked by firewall

### CORS Errors
- The backend is configured to allow mobile access
- If you see CORS errors, make sure the backend server is running
- Check browser console for detailed error messages

### WebSocket Connection Issues
- WebSocket automatically uses the same IP as the page
- If WebSocket fails, check that port 3001 is accessible
- Some networks block WebSocket connections

## Firewall Configuration

### Windows Firewall
1. Open Windows Defender Firewall
2. Click "Allow an app through firewall"
3. Allow Node.js or your terminal application
4. Or temporarily disable firewall for testing

### Mac Firewall
1. System Preferences → Security & Privacy → Firewall
2. Click "Firewall Options"
3. Allow Node.js or disable temporarily

## Network Requirements

- **Same Wi-Fi Network**: Both devices must be on the same network
- **Ports Open**: Ports 3000 (frontend) and 3001 (backend) must be accessible
- **No VPN**: VPNs can interfere with local network access

## Security Note

⚠️ **Development Only**: This configuration allows access from any device on your network. For production:
- Use HTTPS
- Restrict CORS to specific domains
- Use authentication and authorization
- Deploy to a proper hosting service

## Alternative: Use ngrok for External Access

If you want to access from outside your network:

1. Install ngrok: `npm install -g ngrok`
2. Start your servers
3. Run: `ngrok http 3000`
4. Use the ngrok URL on your mobile (works from anywhere)

## Quick Test

1. On your computer, open: `http://localhost:3000` (should work)
2. On your mobile, open: `http://YOUR_IP:3000` (should also work)
3. Both should show the same login page

## Need Help?

- Check that both servers are running
- Verify IP address is correct
- Ensure same Wi-Fi network
- Check firewall settings
- Look at browser console for errors