Please note: The developer of Espresso is no longer maintaining the project. I revived it for the sake of this tutorial, but I will not be maintaining it either. If you wish to take on this awesome project, please contact me. Cheers!

In this tutorial we’ll be developing a simple application with Espresso, a minimalist Ruby web framework, in the typical MVC fashion. We will also be using Enginery and Frontline to speed up the development process by developing straight from the browser.

Contents

Espresso + Enginery

Create a new project directory:

$ mkdir espresso

Install Espresso and Enginery:

$ gem install espresso-framework
$ gem install enginery

Create a new application utilizing DataMapper:

$ enginery g orm:dm

Watch your terminal window. Enginery is generating a project structure, adding the required Gems (‘data_mapper’ and ‘dm-sqlite-adapter’) to the Gemfile, updating the Rakefile and configuration file, and finally running bundler to install the Gems.

Essentially, Enginery is similar to the Rails’ Scaffolding functionality, allowing rapid development of a project built around the MCV-style architecture. It logically separates the project into Models, Views, and Controllers, and defines basic defaults - which can be modified to fit your particular application.

Next, generate your first model:

$ enginery g:m Tasks column:name column:description:text

This generates a Tasks model with 3 columns in it:

  • id: primary key, generated automatically by DataMapper
  • name: string, which is the default data type
  • description: text

Now we need to create a table for our Tasks model by migrating up the initialization migration. When we created our model, this generated a serial number associated with the migration. You can find the migrations within your project structure.

For example:

base/migrations/tasks/1.2013-06-12_19-34-15.initializing-Tasks-model.rb

This particular migration has a serial number of 1.

Let’s finish the migration:

$ enginery m:up 1

With a table now associated with the database, let’s add some tasks!

Fire up the server:

$ ruby app.rb

Then navigate to http://localhost:5252/admin, click Tasks and add a few in. Get creative.

Fast, right? Let’s get even faster with Frontline.

Espresso + Enginery + Frontline

Frontline is is a front-end manager for Enginery, which allows you to fully manage applications within the browser. Yes, you heard that right.

Install it:

$ gem install frontline

Run it:

$ frontline

Rock it: http://localhost:5000

Boom! Is any explanation needed? Perhaps …

Load your existing app using the project name, espresso, and the path, /Users/michaelherman/desktop/espresso (customize for your app and path). From here you have total control over setting up and maintaining your application. You can even put it under version control.

Let’s update the base view. Click the “Maintenance” menu and select “layout.erb”. Update the code:

<!DOCTYPE html>
<html>
  <head>
    <title>Espresso + Enginery + Frontline</title>
    <link href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
  </head>
  <body style="padding-top: 50px;">
    <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="brand" href="#">Espresso + Enginery + Frontline</a>
            <ul class="nav">
            </ul>
            <ul class="nav pull-right">
              <li><a href="/">Home</a></li>
            </ul>
        </div>
      </div>
    </div>
  <div class="container">
      <%= yield %>
  </div>
  </body>
</html>

Now let’s add some controllers, routes, and additional views. Enginery already generated the Index controller with an index route in it. Let’s create a new route within the Index controller. Click “Controllers” => “Index” => “New Actions”. For the action name, enter “list” and click the arrow to the right to process.

Let’s add some logic to the new route. Click “Index Action”, and then “list”. Add the following code to the list.rb file:

class Index
  # action-specific setups

  def list
    @tasks = Tasks.all
    render
  end

end

Then add the following code to list.erb:

<br/>
<ul>
<% @tasks.each do |task| %>
  <li>
  <h4><%= task.name %></h4>
  <p><%= task.description %></p>
  </li>
<% end %>
</ul>

Then check out your live app at http://localhost:5252/list

image

Cheers!