Mordtech's Blog

General Technology Blog

Ruby on Rails Tutorial – Configure Zurb Foundation

This is the first working post in the Ruby on Rails Tutorials series. The primary goal of this series is to help others learn Ruby on Rails through my attempts at learning this web development framework. I’ve chosen Ruby on Rails as the language for this series due to my propensity for following the Lean Startup methodologies proposed in the books: The Four Steps to the Epiphany by Steve Blank,The Lean Startup by Eric Ries and Running Lean by Ash Maury

I’ll also be using the RubyMine development environment for the bulk of this tutorial. RubyMine is a purpose built application to support developing, testing and deploying Ruby on Rails applications. While, you can perform all of these actions in a native text editor and command line, a dedicated development tool, has prebuilt commands and links to help make your development faster.

Section 1: Setting up the Ruby on Rails web application

Lets get started. We’ll first open RubyMine and we’ll see the following splash screen. First, we’ll select the “Create New Project” link and we’ll be redirected to the new project creation paUntitledge. We are going to do two things on this page and we’ll touch on a few others. Untitled, we are going to select “Rails Application” from the list to the left. Next in the Location, box, change the final portion of the folder path, to the name that you want your application to be. In this Ruby on Rails Tutorial we’ll be using the taskManager folder. Another nice feature of RubyMine, is that will build the Rails application with the correct flags already configured. In this case, we’ll be using Ruby 2.2.2 and Rails 4.2.3. If, we had multiple versions of Ruby and/or Rails, we’d be able to select them here at runtime. There is also the ability to have predefined Rails templates. If you are looking at becoming a Rails consulting firm, you could have preconfigured templates, gems, folder structures, etc… ready to help get you to a finished product a bit more quickly. From, this screen, you can also choose the database platform. In this tutorial, we’ll be using Postgres, as our hosting platform, Heroku, only support Postgres at the time of this writing. Finally, you can have the app, not generate the test scripts. We’ll leave that box unchecked for now, and let it build the base testing structure. So, moving on, lets hit create and see what the RubyMine creation process builds for us.   Ok, the app is built, and we are looking at the main landing page for RubyMine. Not much going on here, right now. Of to the left, there are two words, structure and project, what looks like a file system breakdown and a big black field with the phrase, “No files are open.” We’ll lets, expand things and see what we’ve got.  Much better, now we can see what RubyMine built for us, and is a base Rails setup. We’ll be spending some time, in a handful of these in this Ruby on Rails tutorial, so for now, lets do a quick introduction and move on. The top folder is the “app” folder, this is where your rails application lives. It holds the Model, View, helpers, mailers and Controllers (more to come on this in later posts), and and your assets folder (images, javascript and stylesheets). As we come across each of these, I’ll add a few quick notes.  Ok, So right now, we have a working Ruby on Rails web application. Want to see it? Well, we almost have a working application. There are two steps that we need to accomplish prior to starting our app. The first is to create the database to hold our models and our data. To create the database, we need to open our the terminal and type to commands. You can launch the terminal in RubyMine by clicking on the Terminal icon at the bottom of the app and run the following commands  • Type the following and press entUntitleder: rake db:create . • Followed by rake db:migrate and press enter. Now, we can start our rails app and see that everything is working. From the Terminal, type Rails s but in RubyMine go to Run and select Development: taskManager in the dropdown. The advantage here, is that it build a new terminal leaving your initial terminal open for new commands. You’ll see thisUntitled popup in the Console tab, you can see the URL at the end of the third line. You can even just click on the URL and it will launch the page in your default browserUntitledYou can also open a browser window and go to localhost:3000. Either way, you should be presented with the ubiquitous rails home page. Success, we have a working, albeit completely use Ruby on Rails web application. Untitled

Section 2: Building the GIT Repository

There, now that we have a working rails home page. Lets setup our local Git Repository, so that we can keep track of our changes, so if we do have an issue we can roll back to the step prior, without losing much work. Inside of RubyMine, this will be accomplished by again, going to the terminal. At the prompt, type git init and press enter. You’ll be presented with “Initialized empty Git repository in /Users/Bill/RubymineProjects/taskManager/.git/“

Now, lets see what we currently have in our git repository. If you run git status, you’ll see list of files that have not been added to a git repository. So, the next thing that we need to do is to add the missing files. We accomplish this my typing “git add .”, And yes the “.” Is part of the command. Now, if you run the git status, you’ll see that the files are ready to be checked in

So, currently, git knows about our files, but they aren’t committed yet. You can see this by running “git branch”. Here, you’ll see that there are no branches. The files are ready to be committed, but no branch exists. To create our first branch, we’ll type pay attention to the double quotes around initial.

git commit -am “initial”

This is the title of your commit, going forward, if your comment should give a quick overview of what you did in this commit. Examples: Added task status model, configured task status to has many tasks, etc. After pressing enter, you’ll see a list of create mode ######, this is the git app loading your files into the git repository. Now if you run git branch, it will return * master. Your now running a local git protected rails app. I’ll write up the instructions for using to BitBucket in a later post.Finally, the next few actions are to tell git, who you are. This is accomplished by entering the following, changing the name to your name.

git config –global user.name “Your Name”
git config –global user.email you@example.com
git commit –amend –reset-author

Section 3: Installing the configuration gems
Installing the Zurb Foundations in Ruby on Rails.
A default Ruby on Rails application is very plain and not very appealing. To overcome this, we’ll be configuring Zurb Foundations through the use of the foundation specific gems. Quick aside, about gems. A great resource for finding a gem, which there are thousands, is rubygems.org. Normally, you can find a gem that already covers much of what you want to do in your Ruby on Rails web app. Authentication, authorization, testing, UI customization, administration, etc…. From ruby gems, you can go to the gems homepage and see the steps for configuring the gem in your web application. For now, lets focus on the Foundations gems: foundation-rails and foundation-icons-sass-rails. We need to go into the gem file, that is found in the root of your web app folder. You can place the following code anywhere in this file. I prefer to place near the top. The hash tag indicates that this line is a comment, and will be ignored by Ruby.

# advanced responsive front-end framework
gem ‘foundation-rails’
gem ‘foundation-icons-sass-rails’

After saving the changes, RubyMine will prompt you that there are uninstalled gems added to your gemfile. Click on the link and follow the instructions to install the gems. If you are working from the command line, or just prefer, you can also type “bundle install” from the terminal and perform the same steps as RubyMine accomplished. Finally, we need to install foundations on our app. Many gems, will have additional files or edits to existing files that need to be accomplished prior to using the gem. Foundations is one such gem. When your run the command rails g foundaUntitledtion:install, you’ll receive the following output.
Most of this is information only, it is rails telling you that it is modifying your web app to support the gem. Their is one action from you though. The line that has the red “conflict”, this line says that the file already exists and will be overwritten. You have to either accept the overwrite by pressing enter or telling it no. For us, there is no code yet, so modifying the application.html.erb file is not a big deal. But, if you have already modified this file, than you would not want to have it overwritten. So for now, after letting the install overwrite our application.html.erb file. We have a working Ruby on Rails web app with a customizable responsive front-end framework.

Installing the simple form gem

Next, we’ll add a gem that will allow us to create and modify our view pages with less code. You can see that in a simple scaffold example that we’ll build in the next post.

Here is an example of the default scaffold:

<%= form_for(@task) do |f| %>
 <% if @task.errors.any? %>
<%= pluralize(@task.errors.count, “error”) %> prohibited this task from being saved:
<% @task.errors.full_messages.each do |message| %>
<%= message %>
<% end %>
<% end %>

 <%= f.label :name %>
<%= f.text_field :name %>

 <%= f.label :status %>
<%= f.text_field :status %>

 <%= f.label :order %>
<%= f.number_field :order %>

 <%= f.label :duedate %>
<%= f.datetime_select :duedate %>

 <%= f.label :location %>
<%= f.text_field :location %>

 <%= f.label :description %>
<%= f.text_area :description %>

 <%= f.submit %>
<% end %>

And here is the same form, generated in simple_form.

<%= simple_form_for(@task) do |f| %>
<%= f.error_notification %>

 <%= f.input :name %>
<%= f.input :status %>
<%= f.input :order %>
<%= f.input :duedate %>
<%= f.input :location %>
<%= f.input :description %>

 <%= f.button :submit %>
<% end %>

To setup simple_form, perform the following actions.
First, Update the gemfile to include the following:

# Framework to make building new forms
gem ‘simple_form’, ‘~> 3.1.0’

After saving the gem file, run the following

bundle install
rails generate simple_form:install –foundation

You now should be able to start rails and verify that it is visible. It should still be running just go and verify that the page is still up.

Blog Post Wrapup
So, what have we accomplished so far in this Ruby on Rails tutorial? First we generated our rails application using the RubyMine development tool. We’ve created our local software repository using Git. And we’ve configured our Ruby on Rails application to use Zurb Foundations and Simple_form. We’ve verified that our app is listening and we can view the default Ruby on Rails
So whats next? Well, the exciting part of building a Rails application. You can think of this like building a cake. We just mixed up the cake batter and threw it into the oven. The next few posts will be about decorating the cake and making it more specific to the celebration at hand.

Updated: September 5, 2015 — 7:34 am
Mordtech's Blog © 2015
%d bloggers like this: