Skip to content
An AngularJS Spring REST API web application where students could take a course and track their progress towards completion
Java HTML JavaScript CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
JPALearningCenter
LearningCenterREST
images
.gitignore
README.md

README.md

Learning Center

An AngularJS Spring REST API web application where students could take a course and track their progress towards completion

alt text

alt text

alt text

In This Document:

  1. Application URL
  2. How to Use the Application
  3. Technologies Used
  4. Data Model
  5. Showing Progress: End-to-End Exploration

Application URL

http://shaundashjian.com:8080/LearningCenter

How to Use the Application

  1. Student logs in with his email and password
  2. The landing page shows all the courses the student is currently enrolled in, each showing the progress as a percentage of completion
  3. Student could click on "Launch Course" to open the course page
  4. In the course page, student learns by reading the material in each page and then taking a quiz to test his knowledge
  5. The progress graph on the left shows how much has the student completed as a percentage of the overall content of the course
  6. After answering each quiz correctly, the student could move to the next part in the course
  7. After the student answers the last question in the course correctly, he graduates from the course

Technologies Used

Data Model

alt text

Showing Progress: End-to-End Exploration:

  • Purpose: This feature shows students what their progress is throughout the course

  • End-to-End Implementation How To:

  1. I implemented this feature starting from the front-end. I spent some time thinking about how I want the progress feature to look like. I decided on a semi-circle progress bar to be displayed below the course name on the left side of the screen. This bar would change as the student progresses throughout the course. This was the design I had in mind:

alt text

  1. I searched and found various JS and AngularJS libraries for progress bars. I liked the Angular SVG round progressbar, by https://github.com/crisbeto/angular-svg-round-progressbar . I played with it to make sure it fits my purpose.

  2. I added the AngularJS component (controller and template) to show the progress. First, since this was still a prototype, I used mock data in the JavaScript code.

  3. When that worked, I refactored my code, adding a service on the AngularJS side, and moved the mock data there.

  4. Now that I got the proof of concept working. I started developing the back-end. I added a table to the database for course enrollment which will hold the progress in a column:

alt text

alt text

  1. To do CRUD, I added an entity in my JPA project which mapped the 'course_enrollment' table to the 'courseEnrollment' object. Hibernate works behind the scenes to build the SQL queries.

alt text

alt text

  1. After adding my JUnit tests in the JPA project and seeing all tests pass to make sure both the connection and mapping work, I moved to the Spring REST side.

  2. I added a dao (Data Access Object) and controller. The dao takes care of communicating with the JPA entity, using JPQL (Java Persistence Query Language) to query and pass the Java objects. The controller takes care of routing the http requests to the dao. The dao dependency is injected into the controller as a bean. That bean is included in the Spring -servlet.xml file.

alt text

alt text

alt text

  1. After testing the various routes for the REST API using Postman, now it was time to hook the front-end AngularJS service with the back-end REST API. The AngularJS service will now send $http requests to the REST API and get back promises that eventaully get the data from the API. Those requests replace the static mock data that I started with to develop the proof of concept and the core front-end design.

alt text

  1. AngularJS components now can use the data they get from the REST API, via the service to read the latest stored progress data and display it to the user, and also to update the progress in the database as the user moves through the course. The change happens in real-time. The progress bar changes to reflect the change, and the change persists in the database.

alt text

alt text

alt text


Up

You can’t perform that action at this time.