Big Idea 4 Blog

Deployment Tools / Methods

Big Idea 4: Computing Systems and Networks

• How computers send and recieve information
• How data is transferred
• Identify vulnerabilities of networks

What Programs/Tools Do We Use?

• Flask
• Python (backend)
• SQLite3
• Javascript (frontend)
• Github
• AWS
• Docker
• Nginx
• Certbot

Frontend: Deployed Through GitHub

Our frontend repository is contained in GitHub, where it is deployed, allowing us and others to access it at all times.

• Frontend fetches and makes GET, POST, PUT, and DELETE requests to the backend
• Information is converted to JSON and transferred from frontend to backend

Example fetching and POST request:

function updatePreferences(updatedData) {
    fetch(apiUrl, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(updatedData)
    })
    .then(response => response.json())
    .then(data => {
      loadPreferences();
    })
    .catch(error => {
      console.error('Error updating preferences:', error);
    });
  }

Backend: CRUD Operations

• The backend handles the frontend requests and connects it to a database by creating an api

API Connecting to Database:

# Path to the existing SQLite database
DB_PATH = './instance/volumes/user_management.db'

# Ensure the database file and table exist
def init_db():
    if not os.path.exists('./instance/volumes'):
        os.makedirs('./instance/volumes')

    conn = sqlite3.connect(DB_PATH)
    cursor = conn.cursor()
    cursor.execute('''
        CREATE TABLE IF NOT EXISTS usersDb (
            table_id INTEGER PRIMARY KEY AUTOINCREMENT,
            name TEXT NOT NULL,
            fav_book TEXT NOT NULL,
            user_id INTEGER NOT NULL UNIQUE
        )
    ''')

@app_bp.route('/usersDb/<int:user_id>', methods=['DELETE', 'PUT'])
def modify_user(user_id):
    if request.method == 'DELETE':
        try:
            conn = sqlite3.connect(DB_PATH)
            cursor = conn.cursor()
            cursor.execute("DELETE FROM usersDb WHERE user_id = ?", (user_id,))
            conn.commit()
            rows_deleted = cursor.rowcount
            conn.close()

            if rows_deleted == 0:
                return jsonify({"error": "User not found"}), 404

            return jsonify({"message": "User deleted successfully"}), 200
        except Exception as e:
            return jsonify({"error": str(e)}), 500

AWS and Docker

AWS:

• Provides servers, storage, and networking services
• Hosts the backend server

Docker:

• Is a container
• Deploys the backend website
• Allows for multiple containers to be run simultaneously

Dockerfile:

services:
        web:
                image: litconnect
                build: .
                env_file:
                        - .env # This file is optional; defaults will be used if it does not exist
                ports:
                        - "8103:8103"
                volumes:
                        - ./instance:/instance
                restart: unless-stopped

Nginx and Certbot

Nginx:

• Handles requests and directs them to the proper backend

Certbot:

• Allows for deployed pages to be converted from http to https for security

Connection - Our Work and Big Idea 4

Using various techniques such as using an api, were are sending information between the frontend and the backend, and deploying our frontend and our backend pages to the web using AWS (among other things).

These processes involve 2 of the 3 major parts of Big Idea 4, sending and recieving data as well as learning how the data is being transferred.

5 things over 12 weeks

Features

1: Preferences 2: Favorite Books 3: Reading Progress Tracker

Other

4: Blogs 5: Frontend Styling Consistency

Breakdown

1: A page that allows users to change colors on various parts of our website, allowing for the text to be changed between black and white and allowing the menu color to be any valid color chosen by the user

2: A list where users can add their favorite books for others to discover and enjoy

3: A tracker where users are able to add the books that they are reading and easily update the progress they have made on each book to meet their reading goals

4: This blog, the Sprint 5 blog, the Student Panel blog, the Project Feature Write Up, and the MCQ Results which all document my experiences throughout the trimester

5: Due to my role as the Frontend UX Engineer, I made the styling of the frontend pages consistent in the bookshelf and left unique colors in the pages linked through the computer (as it sort of makes them seem like outside links)

<a href="https://ahaanv19.github.io/LitConnect/preferences_2">Preferences</a>
<br>
<a href="https://ahaanv19.github.io/LitConnect/favBooks">Favorite Books</a>
<br>
<a href="https://ahaanv19.github.io/LitConnect/book_progress">Reading Progress Tracker</a>
<br>
<a href="https://ahaanv19.github.io/LitConnect/">Styling</a>
<br>
<a href="">Demo</a>