I have always been interested in beauty e-commerce and decided to make a website called Beautify for my JavaScript Project. This project requires us to have a Rails API for backend data, and a single page application with a JavaScript frontend. Client/server interaction must be handled asynchronously with at least 3 AJAX calls, and the rails backend must have models with at least one has-many relationship.
Models
I initially wanted to create a cart, product, and carts_products model which would serve as a join table, however I found that the checkout process was unsatisfactory. I decided to create an order, product, and order_products join table instead to serve the 3 AJAX call requirement. I ended up leaving the cart model on my front-end, in order to separate concerns and keep track of temporary objects without having to instantiate it into a database.I left the original set up in my repository to show that when coding, it’s okay to refactor and swing with the punches as long as you’re happy with the end product.
Initialization
I used the cors gem so that my browser had access to my remote URL. I created one repository on github for both my front-end and back-end. I found that this was far easier to keep track of both files with different terminal tabs. I curated a collection of images with a similar theme and added it to the product seed data. I set up the files I needed on my front-end, including the HTML and javascript index files, my css file, an API file to make my initial fetch requests, and models for each of my classes. In my index.js file, I added an event listener to console log every time I clicked anywhere on my application for debugging purposes.
Project Building
The first thing I wanted to display was my seeded collection of products, so I created a fetch call to my rails API backend in my API.js file. I created a constructor for the API class to make the baseUrl = http://localhost:3000, so I could manipulate it to fetch all the products and each product.
In my index.js file I created a variable called api that instantiates a new API class object. I then iterated over each product from my seed data, and created a new product object for each product, and passed it into the collectionOfProducts function in my products class, which already contained a constructor to create new product objects.
I hopped over to my products.js file, grabbed my container element from the HTML file, and added classes for each attribute of the product page that I wanted to style with css, and appended it onto the original container.
jQuery
I found this method quite time consuming, so I began looking into jQuery as I continued to build out the application. jQuery allows you to make common JS tasks more concise. In order to include it in my app, I added the jQuery CDN (content delivery network) script above my index.js file (or else it doesn’t work…learned that the hard way).
You can include it by downloading a local copy as well, which is less efficient and slower because you are using your own server. The downside to using a CDN is that it might be subject to unexpected modifications by a third party. In order to prevent that, you can use subresource integrity. This is including a cryptographic hash which allows the browser to cross reference its hash to the downloaded jquery. If there is any modification to your jquery, the hash will change. You can use a subresource integrity generator to make this hash. The crossorigin attribute works with CORS, and is set to anonymous so that any cookies associated with the domain are not picked up by the browser to prevent cross-origin data leaks.
With JQuery, you can easily select elements from the HTML using the $(“selector”).method format. It can also create buttons which accept the argument of a method, and add effects. I haven’t played around with this, but I hope to continue refactoring my project and implementing these in the future.
