Flatiron School JavaScript Project
Introduction
The phase 4 software engineering project for Flatiron School required me to build a web app with HTML, CSS, and JavaScript frontend with a Rails API backend. The interactions between the client and server were handled asynchronously and use JSON as a way to communicate. The app had to be object oriented in order to capture data behavior. The Rails backend includes one has-many relationship, which also creates one belongs-to relationship, and has 3 AJAX (asynchronous) calls which are read, create, and delete. My app is a Manga (Japanese comic) index. It allows users to find more info about a Manga series and the volumes within the series. A user can also create a series with volumes within the series, or a user could add a volume to an existing Manga series. Along with creation, a single Manga series with volumes can be seen on their respective show pages or be deleted from the index.
Rails API Backend
Schema
The schema for my Rails API includes a Collections class and a Mangas class which includes the attributes of an instantiated object from each class. A Collection object has a Title, Volume Count, Author, Description and Release Year. A Manga object has a Title, Volume Number, Author, Description, Release Year and a Collection ID.
Models
The models show the belongs-to and has-many relationship between the two classes. There is also an alphabetical scope method that orders all the Collections and Mangas in alphabetical order by their title.
Controllers
The Collections controller has all CRUD (Create, Read, Update, Delete) operations for all Collections. The alphabetical scope method has been added onto the end of a collection instance under the index method in order to alphabetically order all collections by title. I used the “rails g scaffold” command in order to create the Collections and Mangas controllers. I also rendered JSON in order for the server and client to communicate. This scaffold is similar to Manga controller seen below, except for some name changes.
Rack CORS
I installed the Rack CORS gem in order to make the AJAX calls between the server and client.
Frontend
File Structure
The Manga client has 2 index files (index.html, index.js). Then, there is a styles file that includes CSS styling for form and the index of the web page. Finally, the src (source) folder has service files for a collection and manga that handles the AJAX calls between the client and server. Then, the base Collection and Manga files that construct the instances of an object as well as render the forms for the app.
index.js
The index.js file holds all the global variables within the app. The base_url variable holds the base URL for the Rails API backend. Then the mangaService and collectionService variables create new instances of their respective service call using the base_url as an argument. There are event listeners that handle collection submits as well as handle the submit. After the submit the respective form is then cleared of any info. The Collection form and index are immediately rendered upon visiting the web app. The function at the bottom just creates an illusion of a user going back a route within the app by clearing all containers then re-rendering specified objects with a form.
Collection Service
The Collection service class has a constructor that creates an object with an endpoint that is the base_url seen in the index.js file. That endpoint is used in the getCollections method in order to make a server call to the Collections endpoint of the Rails API in order to loop through each collection then creating an instance of each collection in order to append to the DOM. The collectCollectionForm method just collects the values submitted within the form and returns a Collection object with those values. That object is then posted to the DOM with the createCollection method. The deleteCollection method takes an id as an argument which is used to find the specified collection and then remove it from the Rails API as well as the DOM. Finally, the collectionInfo method takes an id as an argument in order to find a specific collection attributes and show them on a page with only that specified collection being shown. This collectionService file is similar to the mangaService file with only naming revisions.
Collection
The Collection class has a static array that includes all instances of the class. It also has a static collectionContainer and collectionForm. The constructor creates builds the instance of the class in order for the object to have all the assigned attributes, as well as creating a list element within the object along with a unique id. There are also event listeners for the Delete and Learn More button. The collectionHTML method creates an HTML format for the index page for a collection object. The appendCollectionToDom method just appends a collection to the DOM using the collectionHTML format. In order to render to form for a new collection the renderCollectionForm method is used as template for a user to submit info about a collection. The form has an event listener attached that listens for Manga Index button to be clicked which shows a user the Manga index. In order for a collection to be deleted the handleCollectionDelete method is called that communicates with the Rails API in order to delete a collection. This concept is the same for the handleCollectionInfo method that shows a collections info page. This collection file is similar to the manga file with only naming revisions.
Conclusion
In conclusion, this project taught me a lot about manipulating the DOM as a whole by using JavaScript as well as communicating with an API server in order to render data onto a web page while using object oriented JavaScript. Feel free to view my GitHub repositories for my projects frontend and backend.
