Skip to content
Raydo Matthee edited this page May 24, 2024 · 2 revisions

Course-Catalog Web App Setup Guide

Build Status Python Version License


Welcome

Welcome to the Course-Catalog Web App setup guide. This page provides detailed instructions on preparing, creating, installing, uploading, testing, and correctly using the Course-Catalog web app. 🎉

Course Catalog


Prerequisites

Before you start, ensure you have the following:

Requirement Description
GitHub Account A GitHub account and access to the skunkworksza/Course-Catalog repository.
GitHub Token A personal access token on GitHub with permissions to access and modify the repository.
Python Environment Python 3.8+ installed on your machine.
Web Hosting Account (Optional) For deployment, you may need an account on a web hosting service like Heroku, AWS, or similar.

Step 1: Setting Up the GitHub Repository

Create or Use Existing Repository

Ensure the Course-Catalog repository exists under the skunkworksza organization. If not, create a new repository with the same name.


Step 2: Setting Up the Project Environment

Cloning the Repository

git clone https://github.com/skunkworksza/Course-Catalog.git
cd Course-Catalog

Creating a Virtual Environment

python3 -m venv venv
source venv/bin/activate

Installing Dependencies

pip install Flask PyGithub PyMuPDF

Step 3: Creating the Flask App

Creating the Flask App File

Create a file named app.py and add the following content:

import os
from flask import Flask, request, redirect, render_template
from github import Github
import fitz  # PyMuPDF

app = Flask(__name__)

GITHUB_TOKEN = os.getenv('GITHUB_TOKEN')
REPO_NAME = 'skunkworksza/Course-Catalog'

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/upload', methods=['POST'])
def upload_file():
    if 'file' not in request.files:
        return redirect(request.url)
    file = request.files['file']
    if file.filename == '':
        return redirect(request.url)
    if file:
        file_path = os.path.join('/tmp', file.filename)
        file.save(file_path)
        content = extract_pdf_content(file_path)
        update_github(content)
        return 'File uploaded and processed'

@app.route('/form', methods=['POST'])
def submit_form():
    course_name = request.form['course_name']
    course_description = request.form['course_description']
    content = f"Course Name: {course_name}\nCourse Description: {course_description}"
    update_github(content)
    return 'Form submitted and processed'

def extract_pdf_content(file_path):
    try:
        doc = fitz.open(file_path)
        text = ""
        for page in doc:
            text += page.get_text()
        return text
    except Exception as e:
        return f"An error occurred while extracting text from the PDF: {str(e)}"

def update_github(content):
    try:
        g = Github(GITHUB_TOKEN)
        repo = g.get_repo(REPO_NAME)
        path = 'course_outline.txt'  # Adjust as needed
        try:
            contents = repo.get_contents(path)
            repo.update_file(contents.path, "Updating course outline", content, contents.sha)
        except:
            repo.create_file(path, "Creating course outline", content)
    except Exception as e:
        return f"An error occurred while updating GitHub: {str(e)}"

if __name__ == '__main__':
    app.run(debug=True)

Creating the HTML Template

Create a directory named templates and inside it, create a file named index.html with the following content:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Course Catalog</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }
        .container {
            max-width: 600px;
            margin: 50px auto;
            padding: 20px;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        h1 {
            font-size: 24px;
            margin-bottom: 20px;
        }
        form {
            margin-bottom: 20px;
        }
        input[type="file"],
        input[type="text"],
        textarea {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
        }
        input[type="submit"] {
            background-color: #5cb85c;
            color: white;
            padding: 10px 20px;
            border: none;
            cursor: pointer;
        }
        input[type="submit"]:hover {
            background-color: #4cae4c;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Upload Course Outline</h1>
        <form method="post" action="/upload" enctype="multipart/form-data">
            <input type="file" name="file">
            <input type="submit" value="Upload">
        </form>
        <h1>Or Fill Out Course Outline</h1>
        <form method="post" action="/form">
            <label for="course_name">Course Name:</label>
            <input type="text" id="course_name" name="course_name">
            <label for="course_description">Course Description:</label>
            <textarea id="course_description" name="course_description"></textarea>
            <input type="submit" value="Submit">
        </form>
    </div>
</body>
</html>

Step 4: Configuring Environment Variables

Set the GitHub Token:

Export the GitHub token in your environment or add it to a .env file:

export GITHUB_TOKEN=your_github_token

Example .env File

GITHUB_TOKEN=your_github_token

Step 5: Running the Application

Run the Flask App:

python app.py

Access the Web Interface: Open your browser and navigate to http://localhost:5000 to access the web interface.


Step 6: Deploying the App

Choosing a Hosting Service

Heroku Deployment:

Install the Heroku CLI and log in:

heroku login

Create a New Heroku App:

heroku create

Push the Code to Heroku:

git push heroku main

Set the GitHub Token in Heroku:

heroku config:set GITHUB_TOKEN=your_github_token

Open the Deployed App:

Open the URL provided by Heroku to access your deployed web app.


Step 7: Testing and Usage

Testing the App:

Test the app by uploading a .pdf file or filling out the course outline form to ensure it updates the GitHub repository correctly.

Using the App:

Use the web interface to manage course outlines. Upload .pdf files or fill out the form to update or add content to the repository.


Error Handling and Known Issues

Error Handling

  • File Upload Errors: Ensure the file is a valid PDF and has content.
  • GitHub API Errors: Ensure the GitHub token has the required permissions.
  • PDF Parsing Errors: Check the PDF structure to ensure text can be extracted.

Known Issues

  • Large PDFs: Processing large PDFs may take time. Optimize your PDF files.
  • GitHub Rate Limits: Ensure you don't exceed GitHub API rate limits by avoiding frequent updates.

Additional Resources

GitHub Logo


Contact


Disclaimer: The information provided on this page is for educational purposes only. Skunkworks (Pty) Ltd does not guarantee the accuracy or completeness of the content. Use the information at your own risk.