barebone app with django and react, sse, jwt token, comport reader, test comport writer, requires com0com, users with groups, sample table vehicles, tokens for access and refresh
This commit is contained in:
@@ -0,0 +1,308 @@
|
||||
# ScalesApp - Complete Setup & Installation Guide
|
||||
|
||||
A three-tier application for reading serial COM port data, storing it in a Django backend, and displaying it in a React frontend.
|
||||
|
||||
## Project Structure
|
||||
|
||||
```
|
||||
ScalesApp/
|
||||
├── frontend/ # React web application
|
||||
│ ├── src/
|
||||
│ ├── public/
|
||||
│ ├── package.json
|
||||
│ └── .env.example
|
||||
├── backend/ # Django REST API
|
||||
│ ├── api/ # Main API app
|
||||
│ ├── manage.py
|
||||
│ ├── settings.py
|
||||
│ ├── requirements.txt
|
||||
│ └── .env.example
|
||||
├── serial_bridge/ # Python serial reader (system tray)
|
||||
│ ├── app.py
|
||||
│ ├── serial_reader.py
|
||||
│ ├── backend_client.py
|
||||
│ ├── tray_icon.py
|
||||
│ ├── config.py
|
||||
│ ├── requirements.txt
|
||||
│ ├── serial_bridge.spec
|
||||
│ └── .env.example
|
||||
└── README.md
|
||||
```
|
||||
|
||||
## Prerequisites
|
||||
|
||||
- **Python 3.8+** (for Django and Serial Bridge)
|
||||
- **Node.js 16+** (for React)
|
||||
- **Windows OS** (Serial Bridge uses Windows-specific system tray)
|
||||
- A COM port device (scales or serial reader)
|
||||
|
||||
## Step-by-Step Installation
|
||||
|
||||
### 1. Backend (Django) Setup
|
||||
|
||||
#### a. Create virtual environment
|
||||
```bash
|
||||
cd backend
|
||||
python -m venv venv
|
||||
venv\Scripts\activate
|
||||
```
|
||||
|
||||
#### b. Install dependencies
|
||||
```bash
|
||||
pip install -r requirements.txt
|
||||
```
|
||||
|
||||
#### c. Setup environment variables
|
||||
```bash
|
||||
copy .env.example .env
|
||||
# Edit .env file with your settings
|
||||
```
|
||||
|
||||
#### d. Initialize database
|
||||
```bash
|
||||
python manage.py migrate
|
||||
```
|
||||
|
||||
#### e. Create admin user (optional)
|
||||
```bash
|
||||
python manage.py createsuperuser
|
||||
```
|
||||
|
||||
#### f. Run the backend server
|
||||
```bash
|
||||
python manage.py runserver
|
||||
```
|
||||
|
||||
The API will be available at `http://localhost:8000`
|
||||
|
||||
**Available API Endpoints:**
|
||||
- `GET /api/readings/` - List all readings
|
||||
- `POST /api/readings/` - Create a new reading
|
||||
- `GET /api/readings/latest/` - Get the latest reading
|
||||
- `GET /api/readings/by_port/?port=COM1` - Get readings from specific port
|
||||
|
||||
### 2. Frontend (React) Setup
|
||||
|
||||
#### a. Install dependencies
|
||||
```bash
|
||||
cd frontend
|
||||
npm install
|
||||
```
|
||||
|
||||
#### b. Setup environment variables
|
||||
```bash
|
||||
copy .env.example .env
|
||||
# Ensure REACT_APP_API_URL=http://localhost:8000
|
||||
```
|
||||
|
||||
#### c. Start development server
|
||||
```bash
|
||||
npm start
|
||||
```
|
||||
|
||||
The frontend will open at `http://localhost:3000`
|
||||
|
||||
**Features:**
|
||||
- Real-time data display from COM ports
|
||||
- Port selector for filtering
|
||||
- Recent readings table
|
||||
- Auto-refresh every 2 seconds
|
||||
|
||||
### 3. Serial Bridge (Python) Setup
|
||||
|
||||
#### a. Create virtual environment
|
||||
```bash
|
||||
cd serial_bridge
|
||||
python -m venv venv
|
||||
venv\Scripts\activate
|
||||
```
|
||||
|
||||
#### b. Install dependencies
|
||||
```bash
|
||||
pip install -r requirements.txt
|
||||
```
|
||||
|
||||
#### c. Setup environment variables
|
||||
```bash
|
||||
copy .env.example .env
|
||||
# Edit .env with your COM port and backend URL
|
||||
```
|
||||
|
||||
Key settings:
|
||||
- `COM_PORT=COM1` (change to your port)
|
||||
- `BAUD_RATE=9600` (adjust based on your device)
|
||||
- `BACKEND_URL=http://localhost:8000`
|
||||
|
||||
#### d. Run the application
|
||||
```bash
|
||||
python app.py
|
||||
```
|
||||
|
||||
The app will:
|
||||
- Appear in system tray
|
||||
- Start reading from COM port
|
||||
- Automatically post data to Django backend
|
||||
- Retry failed posts
|
||||
- Log to `serial_bridge.log`
|
||||
|
||||
### 4. Running All Services (Development)
|
||||
|
||||
Open 3 terminal windows and run:
|
||||
|
||||
```bash
|
||||
# Terminal 1: Backend
|
||||
cd backend
|
||||
venv\Scripts\activate
|
||||
python manage.py runserver
|
||||
|
||||
# Terminal 2: Frontend
|
||||
cd frontend
|
||||
npm start
|
||||
|
||||
# Terminal 3: Serial Bridge
|
||||
cd serial_bridge
|
||||
venv\Scripts\activate
|
||||
python app.py
|
||||
```
|
||||
|
||||
## Building Serial Bridge as EXE
|
||||
|
||||
To create a standalone Windows executable that runs in the system tray:
|
||||
|
||||
```bash
|
||||
cd serial_bridge
|
||||
|
||||
# Install PyInstaller
|
||||
pip install pyinstaller
|
||||
|
||||
# Build the executable
|
||||
pyinstaller serial_bridge.spec
|
||||
```
|
||||
|
||||
The executable will be created at `serial_bridge\dist\ScalesApp\ScalesApp.exe`
|
||||
|
||||
You can:
|
||||
- Run it directly
|
||||
- Add it to Startup folder (`C:\Users\<User>\AppData\Roaming\Microsoft\Windows\Start Menu\Programs\Startup`)
|
||||
- Create a Windows Task Scheduler entry to run at startup
|
||||
|
||||
## Data Flow
|
||||
|
||||
```
|
||||
┌──────────────────┐
|
||||
│ Physical Device │
|
||||
│ (Scales/COM) │
|
||||
└────────┬─────────┘
|
||||
│
|
||||
│ Serial data
|
||||
▼
|
||||
┌──────────────────────────────┐
|
||||
│ Serial Bridge (Python) │
|
||||
│ - Reads COM port │
|
||||
│ - System tray app │
|
||||
│ - Retry logic │
|
||||
└────────┬─────────────────────┘
|
||||
│
|
||||
│ HTTP POST /api/readings/
|
||||
▼
|
||||
┌──────────────────────────────┐
|
||||
│ Django Backend │
|
||||
│ - REST API │
|
||||
│ - Database storage │
|
||||
│ - CORS enabled │
|
||||
└────────┬─────────────────────┘
|
||||
│
|
||||
│ REST API GET /api/readings/
|
||||
▼
|
||||
┌──────────────────────────────┐
|
||||
│ React Frontend │
|
||||
│ - Real-time display │
|
||||
│ - Port selector │
|
||||
│ - Auto-refresh │
|
||||
└──────────────────────────────┘
|
||||
```
|
||||
|
||||
## Configuration Files
|
||||
|
||||
### Backend (backend/.env)
|
||||
```env
|
||||
SECRET_KEY=your-secret-key-here
|
||||
DEBUG=True
|
||||
ALLOWED_HOSTS=localhost,127.0.0.1
|
||||
DATABASE_URL=sqlite:///db.sqlite3
|
||||
```
|
||||
|
||||
### Frontend (frontend/.env)
|
||||
```env
|
||||
REACT_APP_API_URL=http://localhost:8000
|
||||
```
|
||||
|
||||
### Serial Bridge (serial_bridge/.env)
|
||||
```env
|
||||
COM_PORT=COM1
|
||||
BAUD_RATE=9600
|
||||
BACKEND_URL=http://localhost:8000
|
||||
AUTO_CONNECT=True
|
||||
DEBUG=False
|
||||
```
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### Backend Issues
|
||||
- **Port already in use**: Change port: `python manage.py runserver 8001`
|
||||
- **CORS errors**: Check `ALLOWED_HOSTS` and `CORS_ALLOWED_ORIGINS` in settings.py
|
||||
- **Database errors**: Run migrations: `python manage.py migrate`
|
||||
|
||||
### Frontend Issues
|
||||
- **Cannot connect to backend**: Ensure Django is running and `REACT_APP_API_URL` is correct
|
||||
- **Port 3000 in use**: Kill process: `netstat -ano | findstr :3000`
|
||||
|
||||
### Serial Bridge Issues
|
||||
- **COM port not found**: List available ports with: `python -m serial.tools.list_ports`
|
||||
- **Backend not reachable**: Check `BACKEND_URL` and ensure Django server is running
|
||||
- **No tray icon**: Run as administrator, check Windows system tray settings
|
||||
- **Data not posting**: Check `serial_bridge.log` for errors
|
||||
|
||||
## Production Deployment
|
||||
|
||||
### Backend
|
||||
```bash
|
||||
# Use production settings
|
||||
export DJANGO_SETTINGS_MODULE=scalesapp.settings
|
||||
python manage.py collectstatic
|
||||
# Use Gunicorn
|
||||
pip install gunicorn
|
||||
gunicorn scalesapp.wsgi -b 0.0.0.0:8000
|
||||
```
|
||||
|
||||
### Frontend
|
||||
```bash
|
||||
npm run build
|
||||
# Serve dist folder with nginx or similar
|
||||
```
|
||||
|
||||
### Serial Bridge
|
||||
Create Windows Service or Scheduled Task to run the EXE at startup.
|
||||
|
||||
## Next Steps
|
||||
|
||||
1. ✅ Test all three components locally
|
||||
2. ✅ Verify data flow from COM → Backend → Frontend
|
||||
3. ✅ Customize React components if needed
|
||||
4. ✅ Build Serial Bridge as EXE
|
||||
5. ✅ Deploy to production servers
|
||||
6. ✅ Setup monitoring and logging
|
||||
|
||||
## Additional Resources
|
||||
|
||||
- [Django REST Framework Docs](https://www.django-rest-framework.org/)
|
||||
- [React Docs](https://react.dev/)
|
||||
- [PySerial Docs](https://pyserial.readthedocs.io/)
|
||||
- [Pystray Docs](https://github.com/moses-palmer/pystray)
|
||||
|
||||
## Support
|
||||
|
||||
For issues, check the logs:
|
||||
- Backend: Django console output
|
||||
- Frontend: Browser console (F12)
|
||||
- Serial Bridge: `serial_bridge.log` file
|
||||
Reference in New Issue
Block a user