Ruby On The Beach: Week 5

February 16th, 2015 - Ubud, Bali

In maintaining alignment with the direction of our programming bootcamp, I've decided to make an adjustment to the blog. Whereas the first half of the class focused on absorbing and utilizing foundational coding concepts, the second half is centered around self-directed learning through exploratory research and developing real web applications. For programmers, success in the face of a new challenge often depends not on your knowledge base, but rather how quickly and effectively you can add tools to your skill set. In this regard, comfort with ambiguity, frustration, and constant code errors must become second nature.

Although this mindset shift was challenging at first as it removed most of the curriculum's structure, I am confident that it will produce the kind of durable learning necessary to continue improving as a developer long after our cohort disperses from Bali. Moving forward, in lieu of breaking down one core concept each week and evaluating my productivity, I'll attempt to explain how the apps that we've been building actually work. This week, I worked on two projects inspired by platforms everyone is familiar with: Pinterest and Ebay.

Pinterest Clone

When developing technology, it's vital to first pare down all the possible features within the product scope down to the most basic requirements: the minimum viable product. Pinterest, at its core, is a photo sharing application. Once users are signed in, they should have the ability to post and view pictures.

One of the coolest parts of building software is the prolific availability and extensive documentation of open source projects. The entire user signup and login process in Ruby can be handled by a "gem": a code package that can quickly and easily be implemented into any existing application. The preeminent gem for user authentication in Ruby on Rails is called "Devise", which after just a few commands and some simple styling can handle all the necessary database manipulation and generate forms to be rendered in the browser like so: Screen Shot 2015-02-16 at 8.26.07 PM

You may notice that across the top here, I've included a navigation bar. Although it seemed daunting at first, another open source project, Bootstrap, made implementing this beautiful feature relatively painless. Bootstrap is a front-end framework that makes designing and styling website components ridiculously quick, and is definitely the fastest way to make a minimal rails app look much more impressive.

With just a few lines of code, I was even able to implement a responsive design that turns the navigation into a drop down menu when the width of the browser shrinks.

Screen Shot 2015-02-16 at 8.44.08 PM

Screen Shot 2015-02-16 at 9.20.10 PM

My favorite feature of the navigation bar is that it even renders different clickable options depending on whether or not the user is signed in! Can you identify where the split takes place in the code block below? (Hint: look for a part that includes either "Login" or "Logout").

Screen Shot 2015-02-16 at 9.15.57 PMNow that we've established user creation and basic navigation, it's time to ensure that users can achieve their original goal: the ability to upload a "Pin" and view it. Although this feature was significantly more involved as I had to connect to Amazon Web Services' cloud hosting platform for the first time and suffered through the same error for over 24 hours, it was glorious moment when the app finally successfully began saving the images correctly.

Screen Shot 2015-02-16 at 9.26.53 PM

Fbay

Fbay, "the world's premier auction site for all things F", was the group project that I worked on most extensively this week. The original assignment was to create a basic site similar to Ebay, but utilizing the new strategies that were introduced this week. One of these concepts was validation, so we started by creating a simple command that only enables users to upload items that begin with the letter F and ran with our app from there.

Screen Shot 2015-02-16 at 9.41.23 PM

Coding in a team environment is an invigorating process, as each member contributes unique ideas and knowledge, enabling the group to create something much stronger than the sum of our individual skills. Although our group was met with an exceptional number of new challenges this week, we were ultimately able to build progressively more complicated functionality into the application.

Upon completion, users could add an item to the site, include a description and image, and set a duration for the auction. Other users could then bid on the item, but only if their bid is greater than the highest current bid:

Screen Shot 2015-02-16 at 9.55.12 PM

After a few hard days of work, numerous merge conflicts on Github, and more errors than I could mentally handle at times, we finally produced a final product full of Fedoras, Ferraris, Ferrets, Flowers, and Flamethrowers! Screen Shot 2015-02-16 at 9.59.40 PM

 

As someone who works best when I can see the outcomes of my work, it feels spectacular to have turned the corner from fundamental programming to composing real web applications that people will actually be able to use. This week we're diving into the wide world of APIs, and I can't wait to get started on our next project.