AWS Deployment

  • Here is our deployed backend on AWS Study Buddy
  • Here is the API endpoint using Python Flask to display JSON data that the frontend can fetch to display Study Buddy

  • I deployed our backend on AWS by:
    • Creating a domain name in Route 53
    • Testing our site locally using Docker
    • Creating a directory in the Ubuntu terminal
    • Git cloning our live site in our personal directory
    • Setting up proxy to our domain using Nginx
    • Using certbot to get certificate for https
  • I update our live site by:
    • Committing our changes to Github
    • Moving into the right directory in Ubuntu terminal
    • Git pulling in the Ubuntu terminal for updated changes
    • Curling our local site in Ubuntu terminal to review changes
    • Rebuilding docker

Python Dictionary Data

  • Created static and fixed data in Python Flask that frontend can fetch and display
  • If you type visit the api endpoint, you can view the JSON data
# api endpoint
@app.route('/api/data')
def get_data():
    # start a list, to be used like a information database
    user_classes = []

    # add a row to list
    user_classes.append({
        "user_id": 10000,
        "user_name": "Aidan Lau",
        "classes": ['AP CSP, Chinese, AP Calc, English, AP Bio'],
        "GPA": "3.9",
        "ap_count": "3",
    })

    user_classes.append({
        "user_id":10001,
        "user_name": "Rayyan Darugar",
        "classes": ["AP CSP, Claszs2, Class3, Class4, Class5"],
        "GPA": "TBA",
        "ap_count": "TBA",
    })
    
    user_classes.append({
        "user_id": 10002,
        "user_name": "Daniel Choi",
        "classes": ["AP CSP, Class2, Class3, Class4, Class5"],
        "GPA": "TBA",
        "ap_count": "TBA",
    })
    
    user_classes.append({
        "user_id": 10002,
        "user_name": "Unknown Person",
        "classes": ["AP CSP, Class2, Class3, Class4, Class5"],
        "GPA": "TBA",
        "ap_count": "TBA",
    })
    
    user_classes.append({
        "user_id": 10002,
        "user_name": "Unknown Person",
        "classes": ["AP CSP, Class2, Class3, Class4, Class5"],
        "GPA": "TBA",
        "ap_count": "TBA",
    })
    
    user_classes.append({
        "user_id": 10002,
        "user_name": "Unknown Person",
        "classes": ["AP CSP, Class2, Class3, Class4, Class5"],
        "GPA": "TBA",
        "ap_count": "TBA",
    })
    
    user_classes.append({
        "user_id": 10002,
        "user_name": "Unknown Person",
        "classes": ["AP CSP, Class2, Class3, Class4, Class5"],
        "GPA": "TBA",
        "ap_count": "TBA",
    })
    
    # jsonify the data
    return jsonify(user_classes)

User Cards

  • I created User Profiles that save the information of different users using local storage, so what I saved for my local computer will not show up for external users unfortunately.
<!-- function that has aidan as an argument -->
<a onClick="getUserData('aidan')" href="#">
// this is the function that runs when clicked in the html
function getUserData(user) {
    console.log(user);
    // if statement to prevent the value of events from being null
    if (localStorage.getItem(user)) {
        // key value pair where the value of events is set to the last known user data in local storage 
        localStorage.setItem('events', localStorage.getItem(user)) 
    }

    // keep track of who the active or current user is
    localStorage.setItem('currentUser', user)
    // because the URL in the original HTML a tag was blank, set the location here
    window.location = "/student2//usercalender"
}


window.addEventListener('beforeunload', function( event ) {
    console.log('finished')
});
// function to save events in local storage
function saveEvents() {
  // set the value of events to the data of whatever the user inputted to the calender
    localStorage.setItem("events", JSON.stringify(eventsArr));
    // set the value of the current user(could be aidan, daniel, nathan, rayyan) 
    // just whoever the current user is, set the value to what the user inputted to the calender
    localStorage.setItem(localStorage.getItem('currentUser'), JSON.stringify(eventsArr))
  }

Pythonn Flask API Endpoints

  • I created endpoints in Python Flask that use Canvas API to fetch the users assignments and return their assignment data in JSON
# API tokens for each user
API_TOKEN_AIDAN = '2573~mbqfLD2yTcQr8StVbsAHhSC695LjGUSw9SCeRd0x8qysh1uJ5Jvo77uu9IRez34d'
API_TOKEN_RAYYAN = '2573~VhXAGQU60SZMdHyp6O05DM0TI30WJesS5dUSDksokO9SVcN0kSU4URmkbcOZ97zq'
API_TOKEN_NATHAN = '2573~RF2PBXpX1uYgO6U25S9WcRhFiFs4VVTtuEHNDKsZrLVEIuchaDTWJkVcuIQz7ue2'
API_TOKEN_DANIEL = '2573~jw4a4CSLbscRwJua3NGScgroqA4LZPJDqpH6RHsT6VhJx6NvmhMc5aUl7Ag71WS8'
# base url
BASE_URL = 'https://poway.instructure.com/api/v1/'

# List of course IDs
course_ids_aidan = [141645, 141694, 141093, 141643, 144907]
course_ids_rayyan = [141093, 141645, 140864, 141493, 144997]
course_ids_nathan = [141645, 141205, 145058, 141627, 140975]
course_ids_daniel = [141645, 141172, 141588, 141264, 145032]

# function that is called in the nested loop that serves as authorization for getting assignments
# this function is duplicated for each user
def get_assignments_for_course_aidan(course_id):
    headers = {
        'Authorization': f'Bearer {API_TOKEN_AIDAN}'
    }
    # sets up the url for the course id and requests from it
    url = f'{BASE_URL}courses/{course_id}/assignments'
    response = requests.get(url, headers=headers)
    # if response is good, turn the data from Canvas into JSON
    if response.status_code == 200:
        return response.json()
    else:
        return {"error": f"Failed to retrieve assignments for Course {course_id}. Status code: {response.status_code}"}
def get_assignments_for_course_rayyan(course_id):
    headers = {
        'Authorization': f'Bearer {API_TOKEN_RAYYAN}'
    }
    url = f'{BASE_URL}courses/{course_id}/assignments'
    response = requests.get(url, headers=headers)
    
    if response.status_code == 200:
        return response.json()
    else:
        return {"error": f"Failed to retrieve assignments for Course {course_id}. Status code: {response.status_code}"}
def get_assignments_for_course_nathan(course_id):
    headers = {
        'Authorization': f'Bearer {API_TOKEN_NATHAN}'
    }
    url = f'{BASE_URL}courses/{course_id}/assignments'
    response = requests.get(url, headers=headers)
    
    if response.status_code == 200:
        return response.json()
    else:
        return {"error": f"Failed to retrieve assignments for Course {course_id}. Status code: {response.status_code}"}
def get_assignments_for_course_daniel(course_id):
    headers = {
        'Authorization': f'Bearer {API_TOKEN_DANIEL}'
    }
    
    url = f'{BASE_URL}courses/{course_id}/assignments'
    response = requests.get(url, headers=headers)
    
    if response.status_code == 200:
        return response.json()
    else:
        return {"error": f"Failed to retrieve assignments for Course {course_id}. Status code: {response.status_code}"}

# sets up the API endpoint for different users
# scroll down and this endpoints is duplicated but for different users
@app.route('/assignments/user/aidan')
def get_assignments_aidan():
    # assignments_data = {}
    # empty list
    assignments_data_aidan = []
    # loop through each course id in aidans course id
    for course_id in course_ids_aidan:
        #assignments_data[course_id] = get_assignments_for_course(course_id)
        assignments_course_data = get_assignments_for_course_aidan(course_id)
        # nested loop for each course id, get the assignment data and append it to the empty list
        for assignments_course in assignments_course_data:
            assignments_data_aidan.append(assignments_course)
    # turn the data into JSON
    return jsonify(assignments_data_aidan)

@app.route('/assignments/user/rayyan')
def get_assignments_rayyan():
    # assignments_data = {}
    assignments_data_rayyan = []
    for course_id in course_ids_rayyan:
        #assignments_data[course_id] = get_assignments_for_course(course_id)
        assignments_course_data = get_assignments_for_course_rayyan(course_id)
        for assignments_course in assignments_course_data:
            assignments_data_rayyan.append(assignments_course)
        
    return jsonify(assignments_data_rayyan)

@app.route('/assignments/user/nathan')
def get_assignments_nathan():
    # assignments_data = {}
    assignments_data_nathan = []
    for course_id in course_ids_nathan:
        #assignments_data[course_id] = get_assignments_for_course(course_id)
        assignments_course_data = get_assignments_for_course_nathan(course_id)
        for assignments_course in assignments_course_data:
            assignments_data_nathan.append(assignments_course)
        
    return jsonify(assignments_data_nathan)

@app.route('/assignments/user/daniel')
def get_assignments_daniel():
    # assignments_data = {}
    assignments_data_daniel = []
    for course_id in course_ids_daniel:
        #assignments_data[course_id] = get_assignments_for_course(course_id)
        assignments_course_data = get_assignments_for_course_daniel(course_id)
        for assignments_course in assignments_course_data:
            assignments_data_daniel.append(assignments_course)
        
    return jsonify(assignments_data_daniel)