Your First Date with Rails — Build a simple Rails app

Image for post
Image for post

he first date is always overwhelming. Especially when you’re really into someone. Your palms get sweaty, you start regretting the outfit you chose, you’re caught staring at them in silence for 1.5 seconds longer than you should, and everything they say sound smart and funny and everything you say sounds like you asked a 7 year old for dating advice. Now you wonder if you should just go home tell your parents or your best friends to lock you up in your room, throw the keys away and pass your meal under the door because you think that after this date you should never be allowed in public again.

Image for post
Image for post

But this is not why you’re here. You’re here because you’re learning how to code. You’ve been learning Ruby and even “messed around” with Sinatra, but now want something more stable, serious, a real date. You came across the Rails framework and you can’t get it out of your head. You just wanna learn more about it, or just enough to get started.

Well, i’m here to help you. I thought about it and I realized that learning Rails is like going on a date. It’s anxiety inducing and exciting! So I decided to create this simple app and guide you through each step as if you were taking Rails on a nice lovely date. Sounds interesting?

Image for post
Image for post

Before getting started, let me just make it clear that this blog post is not intended to teach you all the ins and outs of a Ruby on Rails application. It’s intended for those (like myself) who are familiar with some Ruby concepts and are also starting out their coding journey and would like to explore more of the basics of Ruby on Rails by building a simple and quick app from scratch. If you’re not very familiar with Ruby or the basics of the web I would suggest to go over here ruby-lang.org and here web development basics for beginners.

What is Ruby on Rails?

Ruby on Rails is a web application development framework used to develop from small to large scale web applications.

Ruby on Rails make it much easier to build web applications and because it is completely open source there is nothing stopping anyone to start learning Ruby on Rails for free.

Another benefit of developing with Rails is that we can use code written by others and compacted in something called a ruby Gem. These Gems are available to anyone to use. To use these Gems you can go on the website rubygems.org, look for a specific Gem and go to their documentation (usually posted on GitHub.)

Model View Controller (MVC)

Before starting our code along, let’s first understand the basics of MVC (Model View Controller) structure of web application. Rails follows the MVC pattern of web applications. The MVC creates a separation from the presentation layer (Frontend) and the business logic (backend). These are pretty straight forward concepts, when we think about the frontend we’re talking about what the user interacts while the backend is all the logic that is happening under the hood, or in the back.

Models

Models are known as the resources in your application: Users, Comments, Friends, etc. These models are usually accompanied by the tables in the database and will connect these tables to your database.

Views

Views are everything that your user sees on the page. Remember that to write Ruby code on your views you will need the .erb extension on your files. So your files on your views will look like this: student.html.erb.

Controllers

Controllers are the “brains” of your application. They will hold most of the logic of your code and make all of the heavy lifting for you. Controllers will be responsible for handling users requests and how they are handled in the application.

Image for post
Image for post

— Excuse me. I thought you were supposed to help me taking Rails on a date with some fun analogies.

Yes, I‘m just warming you up. I wanted to give you a quick review of the core concepts that will be used in this code along. If you’re going out to dinner you need to know how to use the utensils first.

Image for post
Image for post

Let’s get to it

Have courage

First things first, to call Rails you need its number. Time to work on that charm (don’t you dare to use pick up cringe lines).

Let’s make sure you have Rails installed by running the following command:

ruby -v

If you can’t see the version number of your Rails in your machine is because you still haven’t gotten it yet. Go over Team Tree House and follow their instructions to install Rails.

Image for post
Image for post
rails -v

Wanna have dinner sometime?

Remember to have code editor of your choice ready to go. I will be using Visual Studio for the examples on this blog post.

Now create a folder to separate your Rails project from anything else you got going on on your desktop and cd to this folder (This is option and you could also just skip this step and create your project on your desktop.)

Run the following command to create your project:

rails new <app_name>

Image for post
Image for post

Now go inside your project’s folder.

Image for post
Image for post

Don’t be too formal

Great! You’re on. It’s time for your date. Rails is waiting for you and it’s up to you now not to mess this up. Be on time, don’t be too formal, and please don’t use too much perfume/cologne. You should dress ready to have a hotdog around the corner or to go to a sleek late-night rooftop on 5th Avenue overlooking New York City skyline.

Still from within your project’s folder let’s test your server with the following command:

rails server

Go to http://localhost:3000/ and check if you’re Rails application is running.

Image for post
Image for post

You’ll be welcomed by the root route from your local rails application.

Great! Rails welcomed you! You’re looking sharp… keep smiling, keep smiling… strong eye contact and be yourself. Now, just pay attention to the details and Rails will tell you exactly what it needs.

Image for post
Image for post

You got it running! But we’re far from over. Don’t panic, you just need to be a good “listener”, or reader in this case.

First stop

Now for our next task we will change the root route for something that we would like to display. Well, we want to take Rails to a nice restaurant. Not too fancy (you’re not desperate) but not too casual also, otherwise it will think you can’t be taken it serious (you’re going out for dinner not to watch the Super Bowl at a pub).

Let’s set our root route. For that we will be working with the routes.rb file. In your file tree go to config — >routes.rb:

Image for post
Image for post

Know your path (You better know where you’re going before hand or you’ll look like you can’t make decisions, and end up standing in the middle of the streets with a cute date searching through the phone for a restaurant nearby)

Image for post
Image for post

You will see that we have no defined routes. We want to add a route and send that root route to a controller. We will send it to the application_controller.rb for now.

Image for post
Image for post

Rails knows we’re referring to the application_controller. If you type just application it will know where to go.
(Stop bragging about how much you know about this place, just tell Rails enough so it knows what to expect)

We also need to specify the method that will handle this request in our route.

Image for post
Image for post

Let’s check what we have so far on our browser.

Image for post
Image for post

Rails is complaining that the ‘action’ restaurant could not be found in our ApplicationControler.
(Well, some people have allergies or other dietary preferences and that’s totally normal. That’s why it’s a good idea to have always a plan B or C)

Image for post
Image for post

It’s alright. I know just the place

Let’s set up that method within the ApplicationController to handle this request. The application_controller.rb file has no code in it except for the class definition of ApplicationController that inherits from ActionController::Base.

Image for post
Image for post

We’re adding/defining the method/action “restaurant” to our code.

Image for post
Image for post

We’re not adding any logic just yet but let’s check what we got.

Image for post
Image for post
Image for post
Image for post

— Why doesn’t Rails like me?

Relax, it’s not personal. Rails is like the ideal partner and likes to tell you what it wants from the beginning and it’s a good thing that it tells you what it needs. Unlike most of the relationships I had where I had to try to read my partner’s mind all the time. Communication is key.

Rails is telling you that you’re missing a template file for request formats. A template file is where our html code will be.

We will render a template from within our “restaurant” method:

Image for post
Image for post
Great for a quick hangout after work or a nice dinner.

Welcome to Papillon Bistro & Bar!

Well, that’s working. It’s sophisticated with a casual touch, nice menu, and… uh-oh! It’s happy hour time. You forgot that that place has a buy 1 get 3 every Thursday night. This will get messy when more people (code) start to show up. It’s gonna get packed, noisy, you won’t be able to understand anything… we need a place to proper set up your html. Well, that’s why we need a plan C.

The ace up your sleeve

Change of plans! Let’s reroute everything and do it properly this time. That place you know that you can always count on and also give an extra $20 bucks to your waiter buddy that he will get you that special corner that “was reserved JUST for you.

Remember our Views folder? So you need to follow certain conventions and make sure you have your MVC pattern happening. The conventions are simple:

  1. You need a route that points to a controller#action.
  2. You need a controller that is easy to spot with a suggestive name that will handle all your pages.
  3. Within that controller you need a method/action with an appropriate name.
  4. Under the Views directory, Rails will look for a folder with a similar name of your controller name. Within that folder Rails will look for the route you’re trying to set up, let’s call it: restaurant.html.erb.

Let’s follow those steps:

Step 1: You need a route that points to a controller#action.

Make the following changes to your routes:

Image for post
Image for post

Step 2: You need a controller that is easy to spot with a suggestive name that will handle all your pages.

Open your terminal again (make sure you’re on the same directory as your project) and run the following code:

rails generate controller dates

(Because why not? You hope to have many dates, right? right!?)

Go to the controllers folder and you will find the dates_controller.rb file.

Image for post
Image for post
Image for post
Image for post

The same command also generated the dates file under the Views folder.

Image for post
Image for post

Step 3: Within that controller you need a method/action with an appropriate name.

We’re going to add the restaurant action within our DatesController class.

Image for post
Image for post

Now, on your way to the new restaurant, you apologize. Be honest about how you messed up. Tell Rails that you totally forgot about that place getting packed, hopefully the next place will be better and you’ll both enjoy. At this point, you’re just acknowledging that you’re a human being and you make mistakes like everyone else. Above all, you show how to own it without fear of looking silly. Because Rails isn’t perfect either, there is nothing better than our own imperfections to connect with others (don’t go on for too long though.)

Image for post
Image for post

Your controller is looking good! You’re own your way to a wonderful and romantic night.

Step 4: Under the Views directory, Rails will look for a folder with a similar name of your controller name. Within that folder Rails will look for the route you’re trying to set up, let’s call it: restaurant.html.erb

All you have to do is set up your html file. You will open your Views folder and select the dates file. Right click on the dates file to create a new file. You will name it restaurant.html.erb. It’s in the restaurant file where the magic of your evening will happen.

Image for post
Image for post

And now you will just add what you’d like to display on your page. In our case it’s our new restaurant greeting.

Image for post
Image for post

Finally, let’s take a look at it on our browser:

Image for post
Image for post
It’s one of my favorite restaurants in New York city.
Image for post
Image for post

Keep it classy.

You arrived at your destination. It’s the end of that path to that restaurant, but it’s the beginning of a lovely evening for both of you. To your surprise that place is packed as well, but that is o-kay! Your waiter friend sees you from far and comes to your rescue — he knows $$$ — . He smiles at you, calls you by your name (make sure you know his name too), and gives you a strong handshake — to check if you’re staying $$$ — . You swiftly pass that $20 to him (don’t let your date see it though, or you will look like an arrogant schmuck.) He praises you, tells you it’s “been a while” (Don’t worry. He won’t tell about React), calls you one of his childhood best friends even, while leading you and your lovely date through a confused standing mob that have been waiting for a table for a while. You even hear someone say “ — I think she’s/he’s in the next Avengers movie.” Well, let the crowd speculate.

From within the DatesController class, inside the dates_controller.erb file, you can write other actions, known as CRUD actions (CREATE, READ, UPDATE, DELETE), to communicate with your database, have your application’s logic, and send your routes to the right views as we did.

From this point on you’re in the beginning of an amazing relationship. But like any other relationship, it will have its ups and downs. Things won’t be exactly like you expect all the time, but remember that Rails is a very honest and communicative partner and will tell you exactly what it needs every step of the way.

— But wait! Hold-ON! What about the Model directory from the MVC pattern? Shouldn’t an app have a “Home” page? This is a scam!

Image for post
Image for post

Hold your horses, champ! This is the first date, you’re not supposed to reveal too much. Listen more. Try to remember the “dos” and “don’ts”, the “likes” and “dislikes”, and on your next date (if you don’t forget these steps), you can expand on yourself a little bit more. Say just enough and smile often, the first date is supposed to leave the other with a taste of “ — I wanna learn more (about that person).”

And “Home”? You wanna “go Home” on your first date? This is commitment! What do you think this is? If you want a one night stand, go to Wix.

Conclusion

On this article you’ve learned:

  1. What Ruby on Rails is and what it does.
  2. The basic concepts of MVC (Model View Controller)
  3. How to use the command line to create your Rails application.
  4. Where to find your Views and Controllers folders.
  5. How to connect your routes file to the right controller#action to properly render simple html to the page.
  6. Where to define your method/actions.
  7. How to display your html.erb extension files from the Views folder.
  8. How to make a great impression on your first date.
Image for post
Image for post

Cheers to your first date.

I hope you enjoyed the read, learned the basics of building a Rails app, and got a few dating tips on the way as well as a few laughs.

Please be kind and share your thoughts. This is my first post ever so I’m open to constructive feedback.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store