Making a JavaScript app with Rails

In our 4th project for Flatiron School, we were asked to create an app utilizing JavaScript for the front end, and Ruby on Rails for the back end API. An API is a software-to-software interface — Two applications talking to each other. It’s what happens behind the scenes when you are using an application.

I wanted to do something fun so I came up with an idea to put together an app that would not only tell you the weather for the day but also tell you what you should wear. So you would put in your zip code and then it would automatically give you the weather conditions, and a suggested outfit.

I set out with the ambition to get this done, but after days and days of trying to first figure out how to create a JS/Rails app from scratch, I started to realize that calling in an external API was an extra layer of stress that was probably not needed. I finally decided to put the idea aside as a stretch goal for later — after I get the basics down first.

So I changed course and designed an app as a precursor for my original idea. I created a seed file that would demonstrate how the app can provide the weather for 6 different cities across the globe as well as suggest outfits to wear for that day.

The Rails side of things was familiar territory from the last part of the curriculum so it was great to be able to practice it and expand on it. I created two model files with corresponding controllers and migration files. The first table is for the six different cities (along with their foreign keys), and the second table is for the weather conditions in each city. I looked up current weather to put in the seed file for those locations so that it would seem a little realistic.

Then I constructed the JavaScript front end repository. The JS side uses less files than the back end, and I only needed to create the HTML file and a few source files. But the real challenge was about how to use functions and fetch to make the API call and coordinate the interaction between components. I learned that JS as a language uses functions to do almost everything. ‘Fetch’ gets the data you need from the URL provided. I learned about concepts like closure, callbacks, scope, scope chains, JSON rendering, event listening, DOM, object oriented JS, prototypes, and constructor classes. There are many moving parts between the class files and it can be complex in how they interact with the index.js file. The index.js file in my app controls the overall mechanism.

There are a lot of valuable aspects about JS and API’s that I have learned in the making this project. It has even helped to better my understanding of HTML and CSS, Ruby on Rails, and GitHub. I am really glad that I now know how to create an app from the ground up, and I appreciate the way that things are really coming together with the languages and frameworks. There is still much to learn, but I think that what we have done so far in the program has provided a good foundation, and I look forward to what’s next.