final stage of the app
This commit is contained in:
437
README.md
437
README.md
@@ -1,267 +1,214 @@
|
||||
# QR C### QR Code Types Suppo### Management Features
|
||||
- **Preview** - Real-time preview of generated QR codes
|
||||
- **Download** - Export QR codes as PNG images
|
||||
- **History** - View and manage previously generated QR codes
|
||||
- **Delete** - Remove unwanted QR codes
|
||||
- **Copy** - Copy QR codes to clipboard
|
||||
- **Dynamic Link Management** - ⭐ **NEW!** Create and edit link collections **Text** - Plain text QR codes
|
||||
- **URL/Website** - Direct links to websites
|
||||
- **Dynamic Link Page** - ⭐ **NEW!** Create a web page with manageable links
|
||||
- **WiFi** - WiFi network connection details
|
||||
- **Email** - Pre-filled email composition
|
||||
- **Phone** - Direct phone number dialing
|
||||
- **SMS** - Pre-filled SMS messages
|
||||
- **vCard** - Digital contact cardsger
|
||||
# QR Code Manager
|
||||
|
||||
A comprehensive Python web application for creating, customizing, and managing QR codes. This application provides functionality similar to popular QR code generation websites with additional features for local management.
|
||||
A modern Flask web application for generating and managing QR codes with authentication and dynamic link pages.
|
||||
|
||||
## Features
|
||||
## 🚀 Features
|
||||
|
||||
### QR Code Types Supported
|
||||
- **Text**: Plain text QR codes
|
||||
- **URL/Website**: Direct links to websites
|
||||
- **WiFi**: WiFi network connection details
|
||||
- **Email**: Pre-filled email composition
|
||||
- **Phone**: Direct phone number dialing
|
||||
- **SMS**: Pre-filled SMS messages
|
||||
- **vCard**: Digital contact cards
|
||||
- **Multiple QR Code Types**: Text, URL, WiFi, Email, SMS, vCard
|
||||
- **Dynamic Link Pages**: Create collections of links accessible via QR codes
|
||||
- **Admin Authentication**: Secure login with bcrypt password hashing
|
||||
- **Customizable Styling**: Different QR code styles (square, rounded, circle)
|
||||
- **Logo Integration**: Add custom logos to QR codes
|
||||
- **Docker Deployment**: Production-ready containerization
|
||||
- **Responsive Design**: Modern web interface that works on all devices
|
||||
|
||||
### Customization Options
|
||||
- **Colors**: Customizable foreground and background colors
|
||||
- **Styles**: Square, rounded, or circular module styles
|
||||
- **Size**: Adjustable module size (5-15px per module)
|
||||
- **Logo**: Option to add custom logos to QR codes
|
||||
|
||||
### Management Features
|
||||
- **Preview**: Real-time preview of generated QR codes
|
||||
- **Download**: Export QR codes as PNG images
|
||||
- **History**: View and manage previously generated QR codes
|
||||
- **Delete**: Remove unwanted QR codes
|
||||
- **Copy**: Copy QR codes to clipboard
|
||||
|
||||
## Installation
|
||||
|
||||
1. **Clone or navigate to the project directory**:
|
||||
```bash
|
||||
cd /home/pi/Desktop/qr-code_manager
|
||||
```
|
||||
|
||||
2. **Install dependencies**:
|
||||
```bash
|
||||
pip install -r requirements.txt
|
||||
```
|
||||
|
||||
Or if using the virtual environment that was created:
|
||||
```bash
|
||||
/home/pi/Desktop/qr-code_manager/.venv/bin/pip install -r requirements.txt
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
1. **Start the server**:
|
||||
```bash
|
||||
python app.py
|
||||
```
|
||||
|
||||
Or with the virtual environment:
|
||||
```bash
|
||||
/home/pi/Desktop/qr-code_manager/.venv/bin/python app.py
|
||||
```
|
||||
|
||||
2. **Access the application**:
|
||||
Open your web browser and navigate to `http://localhost:5000`
|
||||
|
||||
3. **Create QR codes**:
|
||||
- Select the type of QR code you want to create
|
||||
- Fill in the required information
|
||||
- Customize the appearance (colors, style, size)
|
||||
- Click "Generate QR Code"
|
||||
- Download or copy your QR code
|
||||
|
||||
4. **Use Dynamic Link Pages** ⭐ **NEW!**:
|
||||
- Select "Dynamic Link Page" as the QR code type
|
||||
- Enter a title and description for your link collection
|
||||
- Generate the QR code
|
||||
- Use the "Manage" button or edit URL to add/edit links
|
||||
- Share the QR code - visitors will see your current link collection
|
||||
- Update links anytime without changing the QR code!
|
||||
|
||||
## API Endpoints
|
||||
|
||||
The application provides a RESTful API for programmatic access:
|
||||
|
||||
### Generate QR Code
|
||||
- **POST** `/api/generate`
|
||||
- **Body**: JSON with QR code parameters
|
||||
- **Response**: Generated QR code data and download URL
|
||||
|
||||
### Download QR Code
|
||||
- **GET** `/api/download/<qr_id>`
|
||||
- **Response**: PNG image file
|
||||
|
||||
### List QR Codes
|
||||
- **GET** `/api/qr_codes`
|
||||
- **Response**: JSON array of all generated QR codes
|
||||
|
||||
### Get QR Code Details
|
||||
- **GET** `/api/qr_codes/<qr_id>`
|
||||
- **Response**: JSON with QR code details
|
||||
|
||||
### Delete QR Code
|
||||
- **DELETE** `/api/qr_codes/<qr_id>`
|
||||
- **Response**: Success/error status
|
||||
|
||||
### Upload Logo
|
||||
- **POST** `/api/upload_logo`
|
||||
- **Body**: Multipart form with logo file
|
||||
- **Response**: Logo path for use in QR generation
|
||||
|
||||
### Dynamic Link Pages ⭐ **NEW!**
|
||||
|
||||
#### Create Link Page
|
||||
- **POST** `/api/create_link_page`
|
||||
- **Body**: JSON with page title, description, and QR styling
|
||||
- **Response**: QR code data, page URLs, and management links
|
||||
|
||||
#### Add Link to Page
|
||||
- **POST** `/api/link_pages/<page_id>/links`
|
||||
- **Body**: JSON with link title, URL, and description
|
||||
- **Response**: Success/error status
|
||||
|
||||
#### Update Link
|
||||
- **PUT** `/api/link_pages/<page_id>/links/<link_id>`
|
||||
- **Body**: JSON with updated link data
|
||||
- **Response**: Success/error status
|
||||
|
||||
#### Delete Link
|
||||
- **DELETE** `/api/link_pages/<page_id>/links/<link_id>`
|
||||
- **Response**: Success/error status
|
||||
|
||||
#### Get Link Page Data
|
||||
- **GET** `/api/link_pages/<page_id>`
|
||||
- **Response**: JSON with page and links data
|
||||
|
||||
#### View Public Link Page
|
||||
- **GET** `/links/<page_id>`
|
||||
- **Response**: HTML page displaying links
|
||||
|
||||
#### Edit Link Page
|
||||
- **GET** `/edit/<page_id>`
|
||||
- **Response**: HTML interface for managing links
|
||||
|
||||
## Example API Usage
|
||||
|
||||
### Generate a URL QR Code
|
||||
```bash
|
||||
curl -X POST http://localhost:5000/api/generate \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{
|
||||
"type": "url",
|
||||
"content": "https://github.com",
|
||||
"foreground_color": "#000000",
|
||||
"background_color": "#FFFFFF",
|
||||
"style": "square",
|
||||
"size": 10
|
||||
}'
|
||||
```
|
||||
|
||||
### Generate a WiFi QR Code
|
||||
```bash
|
||||
curl -X POST http://localhost:5000/api/generate \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{
|
||||
"type": "wifi",
|
||||
"wifi": {
|
||||
"ssid": "MyNetwork",
|
||||
"password": "MyPassword",
|
||||
"security": "WPA"
|
||||
},
|
||||
"foreground_color": "#0066cc",
|
||||
"background_color": "#ffffff"
|
||||
}'
|
||||
```
|
||||
|
||||
### Create a Dynamic Link Page ⭐ **NEW!**
|
||||
```bash
|
||||
curl -X POST http://localhost:5000/api/create_link_page \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{
|
||||
"title": "My Resources",
|
||||
"description": "Collection of useful links",
|
||||
"foreground_color": "#1565c0",
|
||||
"background_color": "#ffffff",
|
||||
"style": "rounded"
|
||||
}'
|
||||
```
|
||||
|
||||
### Add Links to the Page
|
||||
```bash
|
||||
curl -X POST http://localhost:5000/api/link_pages/PAGE_ID/links \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{
|
||||
"title": "GitHub",
|
||||
"url": "https://github.com",
|
||||
"description": "Code repository platform"
|
||||
}'
|
||||
```
|
||||
|
||||
## File Structure
|
||||
## 📁 Project Structure
|
||||
|
||||
```
|
||||
qr-code_manager/
|
||||
├── app.py # Main Flask application
|
||||
├── requirements.txt # Python dependencies
|
||||
├── README.md # This file
|
||||
├── templates/
|
||||
│ └── index.html # Web interface
|
||||
├── static/
|
||||
│ ├── qr_codes/ # Generated QR code images
|
||||
│ └── logos/ # Uploaded logo files
|
||||
└── .venv/ # Virtual environment (if created)
|
||||
├── README.md # Project documentation
|
||||
├── main.py # Application entry point
|
||||
├── Dockerfile # Docker container definition
|
||||
├── docker-compose.yml # Docker orchestration
|
||||
├── requirements.txt # Python dependencies
|
||||
├── .env.example # Environment variables template
|
||||
├── deploy.sh # Deployment script
|
||||
├── app/ # Main application package
|
||||
│ ├── __init__.py # Flask app factory
|
||||
│ ├── templates/ # Jinja2 templates
|
||||
│ │ ├── index.html # Main dashboard
|
||||
│ │ ├── login.html # Authentication page
|
||||
│ │ ├── link_page.html # Public link display
|
||||
│ │ └── edit_links.html # Link management interface
|
||||
│ ├── static/ # Static files
|
||||
│ │ ├── qr_codes/ # Generated QR code images
|
||||
│ │ └── logos/ # Uploaded logo files
|
||||
│ ├── routes/ # Route handlers
|
||||
│ │ ├── __init__.py # Route package
|
||||
│ │ ├── main.py # Main page routes
|
||||
│ │ ├── auth.py # Authentication routes
|
||||
│ │ └── api.py # API endpoints
|
||||
│ └── utils/ # Utility modules
|
||||
│ ├── __init__.py # Utils package
|
||||
│ ├── auth.py # Authentication utilities
|
||||
│ ├── qr_generator.py # QR code generation
|
||||
│ ├── link_manager.py # Dynamic link management
|
||||
│ └── data_manager.py # Data storage utilities
|
||||
```
|
||||
|
||||
## Dependencies
|
||||
## 🛠️ Quick Start
|
||||
|
||||
- **Flask**: Web framework
|
||||
- **qrcode[pil]**: QR code generation with PIL support
|
||||
- **Pillow**: Image processing
|
||||
- **flask-cors**: Cross-Origin Resource Sharing support
|
||||
- **python-dotenv**: Environment variable management
|
||||
### Method 1: Docker (Recommended)
|
||||
|
||||
## Security Considerations
|
||||
1. **Clone and navigate to the project:**
|
||||
```bash
|
||||
git clone <your-repo-url>
|
||||
cd qr-code_manager
|
||||
```
|
||||
|
||||
- The application runs in debug mode by default - disable for production
|
||||
- File uploads are stored locally - implement proper validation and storage limits
|
||||
- QR codes are stored in memory - consider using a database for persistence
|
||||
- The server accepts connections from all interfaces (0.0.0.0) - restrict for production
|
||||
2. **Create environment file:**
|
||||
```bash
|
||||
cp .env.example .env
|
||||
# Edit .env with your preferred settings
|
||||
```
|
||||
|
||||
## Customization
|
||||
3. **Deploy with Docker:**
|
||||
```bash
|
||||
./deploy.sh
|
||||
```
|
||||
|
||||
### Adding New QR Code Types
|
||||
1. Add the new type to the HTML select options
|
||||
2. Create corresponding form fields in the HTML
|
||||
3. Add processing logic in the `/api/generate` endpoint
|
||||
4. Update the JavaScript to handle the new type
|
||||
4. **Access the application:**
|
||||
- Open http://localhost:5000
|
||||
- Login with: admin / admin123 (change in production!)
|
||||
|
||||
### Styling
|
||||
The application uses embedded CSS for easy customization. Modify the `<style>` section in `templates/index.html` to change the appearance.
|
||||
### Method 2: Local Development
|
||||
|
||||
### Storage
|
||||
Currently uses in-memory storage. To persist data:
|
||||
1. Install a database library (SQLite, PostgreSQL, etc.)
|
||||
2. Replace the `qr_codes_db` dictionary with database operations
|
||||
3. Add database initialization code
|
||||
1. **Set up Python environment:**
|
||||
```bash
|
||||
python -m venv .venv
|
||||
source .venv/bin/activate # On Windows: .venv\Scripts\activate
|
||||
```
|
||||
|
||||
## Troubleshooting
|
||||
2. **Install dependencies:**
|
||||
```bash
|
||||
pip install -r requirements.txt
|
||||
```
|
||||
|
||||
3. **Run the application:**
|
||||
```bash
|
||||
python main.py
|
||||
```
|
||||
|
||||
## 🔐 Authentication
|
||||
|
||||
- **Default Credentials**: admin / admin123
|
||||
- **Environment Variables**:
|
||||
- `ADMIN_USERNAME`: Set custom admin username
|
||||
- `ADMIN_PASSWORD`: Set custom admin password
|
||||
- `SECRET_KEY`: Set Flask secret key for sessions
|
||||
|
||||
## 🐳 Docker Deployment
|
||||
|
||||
The application is fully containerized with Docker:
|
||||
|
||||
- **Build and run**: `docker-compose up -d`
|
||||
- **View logs**: `docker-compose logs -f`
|
||||
- **Stop**: `docker-compose down`
|
||||
- **Full rebuild**: `docker-compose up --build -d`
|
||||
|
||||
### Production Configuration
|
||||
|
||||
1. **Set environment variables in .env:**
|
||||
```bash
|
||||
FLASK_ENV=production
|
||||
SECRET_KEY=your-super-secret-key-here
|
||||
ADMIN_USERNAME=your-admin-username
|
||||
ADMIN_PASSWORD=your-secure-password
|
||||
```
|
||||
|
||||
2. **Deploy:**
|
||||
```bash
|
||||
docker-compose up -d
|
||||
```
|
||||
|
||||
## 📱 Usage
|
||||
|
||||
### Generating QR Codes
|
||||
|
||||
1. **Login** to the admin interface
|
||||
2. **Select QR type**: Text, URL, WiFi, Email, SMS, or vCard
|
||||
3. **Fill in the details** for your chosen type
|
||||
4. **Customize appearance**: Size, colors, style, border
|
||||
5. **Add logo** (optional): Upload custom logo for branding
|
||||
6. **Generate and download** your QR code
|
||||
|
||||
### Dynamic Link Pages
|
||||
|
||||
1. **Create a link page** from the main interface
|
||||
2. **Add links** to your collection via the edit interface
|
||||
3. **Share the QR code** that points to your link page
|
||||
4. **Update links anytime** without changing the QR code
|
||||
|
||||
## 🛡️ Security Features
|
||||
|
||||
- **Password Hashing**: Uses bcrypt for secure password storage
|
||||
- **Session Management**: Secure Flask sessions with signing
|
||||
- **Authentication Required**: All admin functions require login
|
||||
- **Docker Security**: Non-root user in container
|
||||
- **Environment Variables**: Sensitive data via environment configuration
|
||||
|
||||
## 🔧 Development
|
||||
|
||||
### Project Architecture
|
||||
|
||||
The application follows a modular Flask structure:
|
||||
|
||||
- **App Factory Pattern**: Clean application initialization
|
||||
- **Blueprint Organization**: Separate route modules for different features
|
||||
- **Utility Modules**: Reusable components for QR generation, auth, etc.
|
||||
- **Template Organization**: Structured Jinja2 templates
|
||||
- **Static File Management**: Organized asset storage
|
||||
|
||||
### Adding New Features
|
||||
|
||||
1. **New Routes**: Add to appropriate blueprint in `app/routes/`
|
||||
2. **New Utilities**: Create modules in `app/utils/`
|
||||
3. **New Templates**: Add to `app/templates/`
|
||||
4. **New Dependencies**: Update `requirements.txt`
|
||||
|
||||
## 📊 API Endpoints
|
||||
|
||||
- `POST /api/generate` - Generate QR code
|
||||
- `GET /api/qr_codes` - List all QR codes
|
||||
- `GET /api/qr_codes/{id}` - Get specific QR code
|
||||
- `DELETE /api/qr_codes/{id}` - Delete QR code
|
||||
- `POST /api/create_link_page` - Create dynamic link page
|
||||
- `POST /api/link_pages/{id}/links` - Add link to page
|
||||
- `PUT /api/link_pages/{id}/links/{link_id}` - Update link
|
||||
- `DELETE /api/link_pages/{id}/links/{link_id}` - Delete link
|
||||
|
||||
## 🚨 Troubleshooting
|
||||
|
||||
### Common Issues
|
||||
1. **Port already in use**: Change the port in `app.py` or stop the conflicting service
|
||||
2. **Permission errors**: Ensure the application has write permissions to the static directories
|
||||
3. **Missing dependencies**: Reinstall requirements with `pip install -r requirements.txt`
|
||||
|
||||
### Debug Mode
|
||||
The application runs in debug mode, which provides detailed error messages and auto-reload functionality. Disable for production by setting `debug=False` in the `app.run()` call.
|
||||
1. **Permission Denied**: Ensure Docker has proper permissions
|
||||
2. **Port 5000 in use**: Change port in docker-compose.yml
|
||||
3. **Authentication Failed**: Check admin credentials in .env
|
||||
4. **Image Generation Failed**: Verify PIL/Pillow installation
|
||||
|
||||
## License
|
||||
### Health Check
|
||||
|
||||
This project is open source. Feel free to modify and distribute according to your needs.
|
||||
Visit `/health` to check application status:
|
||||
```bash
|
||||
curl http://localhost:5000/health
|
||||
```
|
||||
|
||||
## 📝 License
|
||||
|
||||
This project is licensed under the MIT License - see the LICENSE file for details.
|
||||
|
||||
## 🤝 Contributing
|
||||
|
||||
1. Fork the repository
|
||||
2. Create a feature branch
|
||||
3. Make your changes
|
||||
4. Add tests if applicable
|
||||
5. Submit a pull request
|
||||
|
||||
## 📞 Support
|
||||
|
||||
For support, please open an issue on GitHub or contact the development team.
|
||||
|
||||
---
|
||||
|
||||
**Made with ❤️ for easy QR code management**
|
||||
|
||||
Reference in New Issue
Block a user