7/1/2020 How to build a Recipe Finder Web Application with Ruby on Rails -

 

Life is like riding a bicycle. To keep your balance, you must keep moving.

Data Science & Tech Projects

How to build a Recipe Finder Web Application

with Ruby on Rails
October 19, 2015

Reading Time: 7 minutes

The purpose of this post is to walk you through the creation of a basic but fully

functional Ruby on Rails Web Application.

At the end of the tutorial we will have a live Recipe Finder App like the one I

generated myself and which you can find and explore here.

Specifically, the process I will illustrate is the result of the 3-week Coursera course

“Ruby on Rails: an introduction”, which I just completed and highly recommend.



The course is addressed to developers who are totally new to both Ruby and the

Rails framework and it guides the student through the whole pipeline from software
Back To Top

installation to final app deployment on the web.

https://francescopochetti.com/how-to-build-a-recipe-finder-web-application-with-ruby-on-rails/ 1/9
7/1/2020 How to build a Recipe Finder Web Application with Ruby on Rails -

Let’s get started then!

 

Software Installation
The first part is unavoidably software installation and environment setup. I
worked on a Windows 7 machine hence all the below instructions apply to

Windows operating system only. The tools you will need are the following:

Ruby – version 2+

Rails – version 4.2.3

Git

Phantomjs (headless browser for testing purposes)

A text editor (I used Sublime Text 3, very nice discovery I would say)

The first three points can be installed as a unique package navigating to

http://railsinstaller.org/en, while for the other two the links are embedded in the
above list.

Ruby, Git and Phantomjs are pretty straightforward. As for Rails you need to
upgrade from 4.1 (downloaded as part of the rails installer package) to at least
4.2.3. This can be achieved running the below on the command line:

1 > gem install rails -v 4.2.3

When you are done with the process you can check if the versions installed are the

expected ones and then test the whole infrastructure:

1 > rails -v
2 Rails 4.2.3
3 > ruby -v
4 ruby 2.1.5
5 > git -- version
6 git version 1.9.4.msysgit.2
7 > rails new test_install
8 #CREATE TEST WEB APP. OUTPUT SHOWING RAILS BUILDING APP FOLDER STRUCTURE
9 > cd test_install


10 > rails server

Back To Top

The very last command starts rails server for our brand new test app. You can

check it out navigating to http://localhost:3000/ on your browser. You should be

https://francescopochetti.com/how-to-build-a-recipe-finder-web-application-with-ruby-on-rails/ 2/9
7/1/2020 How to build a Recipe Finder Web Application with Ruby on Rails -

able to see a “Welcome aboard! You are riding Ruby on Rails” web page which is
 
the final confirmation that everything is ready to go.

Basic Ruby on Rails concepts

Before diving into the code I would like to give some very brief context about how

Rails works.

The Rails framework lays its foundations on two very important concepts:

Convention Over Configuration (CoC): the CoC is a development paradigm

consisting in moving all the decision making about software architecture into a
pre-established framework. The idea is to set rules and conventions which the

developer follows to build a specific application, with the great advantage of

having the framework writing code on behalf of the engineer or not writing code
at all. Examples of those commonly agreed assumptions are the following:

application dependencies are declared in the Gemfile, Views belong in the

app/views directory, Controllers in the app/controllers directory, Models in the

app/models directory and so on so forth. A structure like this one is extremely

powerful as the developer is freed of the app architecture and of the
communication among the parts, resulting in a much faster and painless

deployment.
Model-View-Controller (MVC): as Wikipedia suggests “the central component

of MVC, the model, captures the behavior of the application in terms of its
problem domain, independent of the user interface. The model directly manages

the data, logic and rules of the application. A view can be any output
representation of information, such as a chart or a diagram; multiple views of
the same information are possible, such as a bar chart for management and a

tabular view for accountants. The third part, the controller, accepts input and

converts it to commands for the model or view.” The interactions between the


parts is showed in the below image and it can be summarized as follows.

Back To Top

The browser sends a request which comes into the rails application. If it is a

static page it is automatically redirected to the app/public directory containing

https://francescopochetti.com/how-to-build-a-recipe-finder-web-application-with-ruby-on-rails/ 3/9
7/1/2020 How to build a Recipe Finder Web Application with Ruby on Rails -

static HTML content. If the request is dynamic Rails asks to the router (another
 
independent component of the application) which maps the incoming URL to the

correspondent controller with its appropriate action. The controller talks to the
model which digests the inputs, involves the data layer (a DB or an external

API) and sends the answer back to the controller. After parsing the output from

the model the controller passes the chewed information to the view, in charge of
the final visualization into the browser.

mvc1

Recipe Finder Development and Deployment

Now we are ready to move to the actual code. Our intent is to write a Recipe

Finder application which would let the user specify an ingredient and fetch the
relevant recipes from the food2fork API (f2f). The gathered data is then going to be

formatted into an HTML table showing the recipe thumbnail, its title and its Social

Ranking (as per f2f Ranking Algorithm). Also, image and title will be directly linked

to the actual recipe on foof2fork.com. For your reference the whole application is
available on Github.

This is the process we are going to follow:

1- Create a new Rails application called recipefinder.

1 > rails new recipefinder

You can replace the Gemfile generated automatically by Rails with the Gemfile I

used for the final deployment on Heroku. It definitely contains the correct

dependencies and it should avoid you a couple of future headaches. Make sure to
run “bundle install” after that to install all the required dependencies

2- Generate a recipes controller with an index action running the following



commands
Back To Top

1 > cd recipefinder
2 > rails g controller recipes index

https://francescopochetti.com/how-to-build-a-recipe-finder-web-application-with-ruby-on-rails/ 4/9
7/1/2020 How to build a Recipe Finder Web Application with Ruby on Rails -

with the below output. As you can see the “rails g controller” command did several
 
things. The screenshot is pretty self explanatory. What happened is that Rails,

according to the CoC, generated files (plus folders where needed) which the
programmer is supposed to complete during the actual application development.

Each one of those files implements a specific part of the app (controller, model,

view). It is worth noticing that also the Routing has been taken care of: Rails added

a line to the routes.rb file to correctly map the URL in the browser (/recipes/index)
to the actual controller’s action.

cap

3- The RecipesController index action checks if a request parameter search is

passed in. Use the search term as the keyword if supplied, and use a default value

of chocolate if not supplied.

1 #contents of app/controllers/recipes_controller.rb
2 class RecipesController < ApplicationController
3   def index
4    @search_term = params[:looking_for] || 'chocolate'
5    @recipes = Recipe.for(@search_term)
6   end
7 end

4- Create a model, Recipe (recipe.rb) that contains a for class method. This

method takes a keyword to query the Food2Fork API for a result. For this purpose

we need to get an API key from the food2fork API service and make use of the
very powerful HTTParty gem.

1 #contents of app/models/recipe.rb
2 class Recipe
3 include HTTParty
4 ENV["FOOD2FORK_KEY"] = 'your API key'
5 base_uri 'http://food2fork.com/api'
6 default_params key: ENV["FOOD2FORK_KEY"]
7 format :json
8  
9 def self.for term
10 get("/search", query: { q: term})["recipes"]
11 end


12 end
Back To Top

5- Create a view that lists each recipe as a row in an HTML table. Each row will

have 3 columns, where column 1 contains the thumbnail of the recipe, column 2

https://francescopochetti.com/how-to-build-a-recipe-finder-web-application-with-ruby-on-rails/ 5/9
7/1/2020 How to build a Recipe Finder Web Application with Ruby on Rails -

its title and column 3 its social rank. In addition do that each entry in column 1 and
 
2 will be linked to the actual recipe on the f2f website. As a way to keep things as

clean as possible we are also taking care of the following situation: if the search

term passed to the API does not return any results (basically if the output array is
either nil or empty) the application will display a “No recipes found.. Sorry”

message.

1 #contents of app/views/recipes/index.html.erb
2 <h1>Searching for - <%= @search_term %></h1>
3 <p>Powered By Food2Fork.com</p>
4 <% if (@recipes.nil? or @recipes == []) %>
5 <p> <h2>No recipes found.. Sorry</h2></p>
6 <% else %>
7  
8 <table border="1">
9 <tr>
10 <th>Image</th>
11 <th>Name</th>
12 <th>Rank</th>
13 </tr>
14 <% @recipes.each do |course| %>
15 <tr class=<%= cycle('even', 'odd') %>>
16 <td><%= link_to(image_tag(course["image_url"], height: '100', width: '10
17 <td><%= link_to(course["title"], course["f2f_url"]) %></td>
18 <td><%= course["social_rank"] %></td>
19 </tr>
20 <% end %>
21 </table>
22 <% end %>

5- Test the recipe finder locally navigating to the app folder and typing “rails

server”. The command is going to start the web server our application lives on. You

can go to http://localhost:3000/ in a browser window and check the result. You

should see a fully functional website responding to modifications to the search

parameter in the URL. Pretty cool! Of course we may now want to show what we

were capable of putting together to our friends out there. To achieve that the only

missing passage is deployment to the cloud.

6- Running the application on Heroku. Heroku is a cloud service which lets

users deploy their apps onto its platform. To do that we need to take care of a

couple of things

Back To Top

Register for a free account to heroku.com

https://francescopochetti.com/how-to-build-a-recipe-finder-web-application-with-ruby-on-rails/ 6/9
7/1/2020 How to build a Recipe Finder Web Application with Ruby on Rails -

Download and install the heroku toolbelt, a Coomand Line Application tool
 
allowing the user to perform admin actions via a shell prompt.

Check (and in case correct) the gems being used by Heroku in the production
environment. Specifically rails_12factor and postgresql which Heroku relies

upon as opposed to sqlite, only supported in development mode. By the way,

we already have everything in place as the Gemfile (pasted below for your

reference) I provided at the beginning of the tutorial takes care of exactly those

caveats.

1 #contents of app/Gemfile
2 source 'https://rubygems.org'
3  
4 gem 'rails', '4.2.3'
5 gem 'sqlite3', group: :development
6 gem 'tzinfo-data'
7 gem 'sass-rails', '~> 5.0'
8 gem 'uglifier', '>= 1.3.0'
9 gem 'coffee-rails', '~> 4.1.0'
10 gem 'jquery-rails'
11 gem 'turbolinks'
12 gem 'jbuilder', '~> 2.0'
13 gem 'sdoc', '~> 0.4.0', group: :doc
14 gem 'therubyracer', platforms: :ruby
15 gem 'capybara', '~> 2.4.4'
16 gem 'poltergeist', '~> 1.6.0'
17 gem 'phantomjs', '~> 1.9.8.0'
18  
19 group :development, :test do
20 # Call 'byebug' anywhere in the code to stop execution and get a debugge
21 gem 'byebug'
22  
23 # Access an IRB console on exception pages or by using <%= console %> in
24 gem 'web-console', '~> 2.0'
25  
26 gem 'spring'
27 end
28  
29 group :production do
30 gem 'pg'
31 gem 'rails_12factor'
32 end
33  
34 gem 'httparty'

After that we are ready to go and start the actual deployment. For this to happen

we have to open a shell, navigate to the app folder and type the following


commands:
Back To Top

1 > heroku login

2 > heroku create your-app-name

https://francescopochetti.com/how-to-build-a-recipe-finder-web-application-with-ruby-on-rails/ 7/9
7/1/2020 How to build a Recipe Finder Web Application with Ruby on Rails -

The first one is going to ask you for credentials in order to remotely connect to the
 
Heroku platform. Whereas the second one creates the ruby application within the

Heroku environment and generates a remote Git repository to which you can push

to actually deploy the code. Let’s do that then!

1 > git push heroku master

With this very last command Heroku detects the Ruby app, checks that everything

is in place and pushes the code to the platform. If everything goes as expected you

should see around the end of the output a couple of lines like the following:

1 remote:    https://your-app-name.kerokuapp.com/ deployed to Heroku

2 remote:
3 remote: Verifying deploy... done.

Congratulations! Your app is live on the web. You can go visit it at the URL

specified above (https://your-app-name.herokuapp.com/), start playing with

ingredients and get your recipes back.

The web interface is of course very primitive and the user is obliged to directly edit

the URL to get dynamic content displayed. Having the contrary was not the

purpose of this short post tough. The main point of it was to illustrate the great

easiness and flexibility in development and deployment provided by the Ruby on

Rails framework. Mission accomplished I would say!

Like Be the first of your friends to like this.

Comments
0 comments

Back To Top

https://francescopochetti.com/how-to-build-a-recipe-finder-web-application-with-ruby-on-rails/ 8/9
7/1/2020 How to build a Recipe Finder Web Application with Ruby on Rails -

0 Comments Sort by Oldest

 

Add a comment...

Facebook Comments Plugin

Tagged rails, ruby

Frapochetti

 Stock Trading Algorithm on top of Market Event Study

PiPad – How to build a tablet with a Raspberry Pi 

| Theme: Wisdom Blog by CodeVibrant.


Back To Top

https://francescopochetti.com/how-to-build-a-recipe-finder-web-application-with-ruby-on-rails/ 9/9