Scribd
Upload
2 views

CHAPTER_3_System_Design_and_Implementation

Uploaded by

siddharthyou29
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views

CHAPTER_3_System_Design_and_Implementation

Uploaded by

siddharthyou29
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

CHAPTER 3: System Design and Implementation

3.1 System Architecture


The Sales Visualizer App is designed as a web-based application built with Python and
Flask. It provides functionalities like user interaction through web forms, visual data
plotting, and email notifications. Below is the high-level system architecture:

- Frontend: HTML templates are used to render web pages like user input forms and
visualizations (`users.html`, `about.html`, `index.html`, `graph.html`).
- Backend: Flask handles HTTP requests, processes user input, generates dynamic content,
and integrates services like Matplotlib for data visualization and Flask-Mail for email
notifications.
- Visualization: Matplotlib is employed to create graphs, which are converted to Base64
strings and embedded in the frontend.
- Email Service: Flask-Mail sends email confirmations to users using the configured SMTP
server.

3.2 Component Design


1. User Interface:
- Rendered using HTML templates.
- `users.html`, `about.html`, and `index.html` serve as main pages for interaction and
navigation.

2. Data Visualization:
- Graph generation using Matplotlib.
- Plots are saved as Base64-encoded images and displayed in the frontend without requiring
file storage.

3. Email Notifications:
- User-submitted names and emails are used to send a predefined welcome message.
- SMTP configuration allows email dispatch via Gmail.

4. Routing:
- `/` (home): Displays the homepage (`users.html`).
- `/about`: Provides information about the application.
- `/index`: Serves as the main application interface.
- `/login`: Handles form submissions and email notifications.

3.3 Implementation Details


1. Flask Application Setup:
- Flask is initialized with routing for different endpoints.
- `Flask-Mail` is configured with Gmail SMTP settings for sending email.
2. Email Functionality:
- `MAIL_USERNAME` and `MAIL_PASSWORD` provide SMTP authentication.
- Emails are sent through the `/login` route upon user submission.

3. Visualization:
- Matplotlib generates plots.
- The `BytesIO` buffer temporarily stores the plot as a PNG image.
- The image is encoded in Base64 and served as a `data:image/png` URI in HTML.

4. Security Considerations:
- Sensitive email credentials (`MAIL_USERNAME`, `MAIL_PASSWORD`) are currently
hardcoded, which poses a security risk.
- Suggested improvements: Use environment variables or configuration files to manage
sensitive data securely.

You might also like