Analytics Rating App with Rails...and now with JS too!

I took my previous project and where I was building a web application using a Rails backend and vanilla HTML and added dynamic elements with JavaScript. The goal was to add engaging features to the application using JavaScript, jQuery, AJAX and a JSON API.

The first thing I wanted to do was to be able to render json data from my action methods. I updated my index and show controllers adding a respond_to method and block and this allowed me to go for example to my index page, add .json to the url and now I'm able to get all of my courses data in json format. Below you can see an example of how my controllers were before and after adding the previous functionality.

BEFORE

Initial index and show methods in the Courses controller.

AFTER

Index and show actions after adding the respond_to method to render json.

JSON DATA ACCESSED FROM URL

I then added the active model serializer gem to be able to specify any course attributes I wanted in my json data. I worked with model associations for the serializer as well to identify relationships between my different classes and models. For example, working with courses they have many ratings therefore I implemented a has_many association for it.

Then it was all about adding my dynamic events with JavaScript. I used AJAX to instead of reloading a page after a user added a new course (show action) and also for when a user clicked in the nav to see all of the courses (index action). I worked with event handlers to hijack clicks and form submits which was super fun working the logic. I also practiced a lot creating functions and object constructors using the keyword this within JavaScript. It was cool working with objects, key and value pairs, and attributes, among a bunch of other things because they relate to my day-to-day job with JS dataLayers within digital analytics implementation work.

Time to start learning React so expect a new blog post soon!