For the Front-end, we are using VueJS with a custom template from Creative Tim. The source can be found here. For the Back-end, we are using a simple Python Flask app!
For the Flask app, you will want to have Python installed, and you will need to run the following commands:
pip install -U Flask
pip install -U flask-cors
pip install flask-restful
To run the Flask app, cd into transcriptPlanner/transcriptPlanner and run python app.py
Documentation on Flask-RESTful can be found here.
For flask you will need NodeJS and the Yarn Package Manager.
After these have been installed, CD into the transcriptPlanner/vue-black-dashboard-master directory and run the following command to install the dependencies:
yarn
If you are on Mac/Linux you might need to run sudo with the previous command:
sudo yarn
After this has completed, you can type the following command within the transcriptPlanner/vue-black-dashboard-master directory to spin up a front-end web server:
yarn run dev
or
sudo yarn run dev
if on Mac/Linux.
All of the pages that can be viewed are displayed on the left navigation bar. For the sake of this project, there are currently three pages that contain the information needed to carry out the tasks for project. The pages are the Dashboard, Audit Transcript, and Transcript Request pages.
The first page simply displays the courses avaiable to choose from as seen here:
The audit transcript page allows a user to enter in a JSON-formatted transcript that will be audited as soon as the file is selected by the user. A sample JSON-formatted transcript is available in the transcriptPlanner/ directory, and can be used to test this page. Please note: the behavior of the page is somewhat buggy; if you upload a file, it will only audit that file once, and you cannot choose another. If you want to audit the file again, or audit a new file, you will need to refresh the page.
This page allows users to select courses from a dropdown list, select a major, and then choose to audit their courses. Please note: if you do not enter a major, and run the audit, nothing will appear!
For help on VueJS itself, you can go here. It would also be helpful to know about Axios, and check out stuff on REST APIs to get a sense of what is going on.
Essentially, the Frontend (the Vue app) communicates to the backend (the Flask app) by sending HTTP Requests. These requests look like:
localhost:5000/catalog
And when you ping this URL, you receive a response that is JSON (JavaScript Object Notation) formatted. This is where Axios comes in.
Axios is an HTTP client for node.js, and allows us to make calls to our Flask app.
Here is an example Axios call to our Flask app:
axios
.get("http://127.0.0.1:5000/catalog")
.then( res => {
return JSON.parse(res.data);
})
.then(res => {
this.tableInformation['tableData'] = res.courses;
});The .get() pings our URL, and since the calls are asynchronous, we have to wait for the request to reach out Flask app. The subsequent .then() calls are used to retrieve the asynchronous data.