consultoria-as
f395d67136
- Base de datos SQLite con información de vehículos - Dashboard web con Flask y Bootstrap - Scripts de web scraping para RockAuto - Interfaz CLI para consultas - Documentación completa del proyecto Incluye: - 12 marcas de vehículos - 10,923 modelos - 10,919 especificaciones de motores - 12,075 combinaciones modelo-año-motor
103 lines
3.5 KiB
Markdown
103 lines
3.5 KiB
Markdown
# Vehicle Database Dashboard - Complete Solution
|
|
|
|
## Overview
|
|
|
|
I have created a complete web-based dashboard for searching and filtering your vehicle database with the following components:
|
|
|
|
1. **Web Dashboard Interface** - A responsive, modern UI built with HTML, CSS, and JavaScript
|
|
2. **Flask Backend** - API server that connects to your SQLite database
|
|
3. **Filtering System** - Search by brand, model, year, and engine
|
|
4. **Data Visualization** - Display vehicle details in an attractive card layout
|
|
|
|
## Features
|
|
|
|
- **Four-way Filtering**: Filter vehicles by brand, model, year, and engine type
|
|
- **Responsive Design**: Works on desktop, tablet, and mobile devices
|
|
- **Real-time Updates**: Filters update immediately when selections change
|
|
- **Detailed Information**: Shows power, displacement, cylinders, fuel type, trim, drivetrain, and transmission
|
|
- **Modern UI**: Bootstrap-based interface with cards, badges, and icons
|
|
|
|
## Architecture
|
|
|
|
### Frontend
|
|
- `index.html`: Main dashboard page with Bootstrap styling
|
|
- `dashboard.js`: JavaScript for UI interactions and API calls
|
|
|
|
### Backend
|
|
- `server.py`: Flask application serving the dashboard and API
|
|
- API endpoints for brands, models, years, engines, and vehicles
|
|
|
|
## How to Use
|
|
|
|
### Starting the Dashboard
|
|
1. Navigate to the dashboard directory:
|
|
```bash
|
|
cd /home/Autopartes/dashboard
|
|
```
|
|
|
|
2. Start the server:
|
|
```bash
|
|
python3 server.py
|
|
```
|
|
|
|
3. Open your web browser and go to: `http://localhost:5000`
|
|
|
|
### Using the Dashboard
|
|
1. On the left panel, use the dropdowns to select filters:
|
|
- Brand: Select a vehicle manufacturer
|
|
- Model: Select a model (updates based on selected brand)
|
|
- Year: Select a production year
|
|
- Engine: Select an engine type
|
|
|
|
2. Click "Search Vehicles" to apply filters
|
|
|
|
3. Results appear in the right panel with detailed information
|
|
|
|
4. Use "Reset Filters" to clear all selections
|
|
|
|
## API Endpoints
|
|
|
|
The dashboard uses these API endpoints:
|
|
- `GET /api/brands` - Get all vehicle brands
|
|
- `GET /api/models?brand=[brand]` - Get models for a specific brand
|
|
- `GET /api/years` - Get all years
|
|
- `GET /api/engines` - Get all engines
|
|
- `GET /api/vehicles?[filters]` - Search vehicles with optional filters
|
|
|
|
## Files Created
|
|
|
|
```
|
|
dashboard/
|
|
├── index.html # Main dashboard page
|
|
├── dashboard.js # Frontend JavaScript
|
|
├── server.py # Flask backend
|
|
├── requirements.txt # Python dependencies
|
|
├── start_dashboard.sh # Startup script
|
|
├── README.md # Documentation
|
|
└── static/ # Static files directory (created by Flask)
|
|
```
|
|
|
|
## Customization
|
|
|
|
You can customize the dashboard by:
|
|
- Modifying the CSS styles in index.html
|
|
- Adding more filters in the JavaScript
|
|
- Changing the layout in index.html
|
|
- Adding more vehicle details in the display
|
|
|
|
## Troubleshooting
|
|
|
|
- If the server won't start, ensure Flask is installed: `sudo apt-get install python3-flask`
|
|
- If filters don't populate, check that your vehicle database has data
|
|
- If the page doesn't load, verify that the database file exists at `../vehicle_database/vehicle_database.db`
|
|
- Check the browser console for JavaScript errors
|
|
- Check the terminal for server errors
|
|
|
|
## Next Steps
|
|
|
|
1. Start the dashboard server
|
|
2. Browse your vehicle data using the intuitive interface
|
|
3. Add more data to your database using the manual input tools
|
|
4. Customize the dashboard to meet your specific needs
|
|
|
|
The dashboard is now ready to use and provides a powerful interface for exploring your vehicle database! |