Oreoluwa Ogundipe

With the advancements of technology came new ways of doing things. About 20 years ago, the major source of obtaining information was from printed publications. Now, people don’t buy as many printed publications as before. They visit the websites of media publications, consume information and then continue with the rest of their days. This has come with numerous advantages with the major advantage being how fast it is to get the new articles to the readers.


## What we’ll build

In this article, we are going to create a live blog application that allows readers to see new posts in realtime as editors publish them. To do this, we are going to use Ruby on Rails and Pusher.

![ruby-live-blog-demo](//images.ctfassets.net/1es3ne0caaid/7sOXPRNnpuq0OAeYiKCcAE/804ad02ee143d0bab36d8fae1797f5e6/ruby-live-blog-demo.gif)

## Prerequisites

To follow through this tutorial, you’ll need the following:

- Ruby installed on your machine
- Rails on your machine

To confirm your installation, run the following command:

```
    rails --version # minimum version 4.2
    ruby --version # minimum version 2.2.2 
```

If you get their version numbers as results then you’re good to go.

## Getting started

### Creating a new Ruby project
To create a new rails project, run the following command:

```
    rails new ruby-live-blog
```

This creates a starter project for you with the following structure:

![ruby-live-blog-structure](//images.ctfassets.net/1es3ne0caaid/Den3gVCCWW4soMoCmusIm/a8e0845cdeafd4446c701c1b0788e6ad/ruby-live-blog-structure.png)

Now, you can view the demo application by running:

```
    rails server --binding=127.0.0.1
```

Open your browser and navigate to http://127.0.0.1:3000/ to see the application at work

![youre-on-rails](//images.ctfassets.net/1es3ne0caaid/3sOsgC4S80gOKM8Waqkgui/87c5c9e64375cbb2f8f2516223f4e515/youre-on-rails.png)

### Configuring the database
To display blog posts to users, there has to be a place where the application stores blog posts. To store the blog posts, we need a database. For this live blog application, we are going to use SQLite as the database for storing information.

To create your database, run the command:

```
    rake db:create
```

This creates the database in the `db/` directory of the project if they weren’t automatically created before.

### Creating the post model
To represent a sample blog post in our application, let’s create a model. A simple blog post will contain the following properties:

- Title - the title of the post
- Body - the post content
- Author - the name of the author of the post
- Media - a link to the post media

Create the model by running the command:

```
    rails generate model Post title:text body:text author:text media:text
```

This creates the post model and a migration file for the new model located in the `db/migrate/`  directory. A migration file is a form of version control for the database. Your posts migration file will look like this:

``` ruby
    # db/migrate/{timestamp}_create_posts.rb
    
    class CreatePosts < ActiveRecord::Migration[5.2]
      def change
        create_table :posts do |t|
          t.text :title
          t.text :body
          t.text :author
          t.text :media
    
          t.timestamps
        end
      end
    end
```    

To effect the changes in the database, run the migration by using the command:

```
    rails db:migrate
```

On a successful run, you get the following output:

```
    ➜ rails db:migrate
    == 20180609132632 CreatePosts: migrating ======================================
    -- create_table(:posts)
       -> 0.0016s
    == 20180609132632 CreatePosts: migrated (0.0017s) =============================
```

At this stage, the database structure is all set and we have created the post model. The next thing to do now is to allow editors upload new blog posts.

## Creating the homepage

The homepage displays created blog posts to readers when the page is loaded. Let’s create a controller that is responsible for fetching and displaying posts on the homepage. To do this, run the following command:

```
    rails generate controller Home index
```   

This creates a new controller and related template files. Update the home controller to look like this:

``` ruby
    # app/controllers/home_controller.rb 
    
    class HomeController < ApplicationController
      def index
        @posts = Post.all.order("created_at DESC")
      end
    end
```    

The next thing to do is to then update the index view as follows:

``` html
    
    <div class="wrapper">
        <div class="title">
            <h1>Live blog with Ruby and Pusher</h1>
            <p>New posts will be displayed in realtime</p>    
        </div>
    
        <div class="posts" id="post_section">
            <% @posts.each do |post| %>
                <div class="post-card">
                    <img class="image" src="<%= post.media %>">
                    <div class="title">
                        <h2><%= post.title %></h2>
                    </div>
                    <div class="body-trunc">
                        <p><%= post.body %></p>
                    </div>
                </div>
            <% end %>
        </div>
    </div>
```

The index view also has the following styling:

``` scss
    // app/assets/stylesheets/home.scss
    
    * {
      font-family: "Lora", serif;
    }
    
    .title {
      text-align: center;
    }
    
    .posts {
      margin-top: 50px;
      display: flex;
      flex-direction: row;  
      justify-content: space-around;
      flex-wrap: wrap;
    }
    
    .post-card {
      display: flex;
      flex-direction: column;
      min-width: 300px;
      max-width: 300px;
      height: 400px;
      box-shadow: 1px 1px rgb(68, 68, 68);
      border: 1px solid rgb(68, 68, 68);
      border-radius: 5px;
      margin: 20px 0px;
    }
    
    .image {
      width: 100%;
      height: 170px;
    }
    
    .body-trunc {
      margin-left: 10px;
      margin-right: 10px;
    }
``` 

## Creating and storing posts

The Post controller is responsible for accepting new post data and storing the post data in the database. To create the controller, run the following command:

```
    rails generate controller Post create store
```

This command also creates route entries for the controller methods. At this point, your `routes.rb` file should look like this:

``` ruby
    # config/routes.rb
    
    Rails.application.routes.draw do
      get 'post/create'
      post 'post/store'
      
      root 'home#index'
    end
```

The `create` route is responsible for accepting the post data from the editor and the `store` route is responsible for storing the data in the database.

Update the create view to look like this:

``` html
    
    
    <div class="title">
        <h1>Live Blog</h1>
        <p>Editor View</p>
    </div>
    
    <div style="text-align:center">
        <p><strong>Fill and submit the form below to create a new post</strong></p>
    
        <form method="POST" action="/post/store" enctype="multipart/form-data" class="post-form">
            <%= token_tag %>
    
            <div class="form-group">
                <label for="title">Title</label>
                <input type="text" name="title" class="form-control">
            </div>
            <div class="form-group">
                <label for="media">Post Media</label>
                <input type="file" name="media" class="form-control media-upload">
            </div>
            <div class="form-group">
                <label for="author">Post Author</label>
                <input type="text" name="author" class="form-control" />
            </div>
            <div class="form-group">
                <label for="body">Post Content</label>
                <textarea name="body" class="form-control" cols="30" rows="10"></textarea>
            </div>
            <div class="from-group">
                <div><input type="submit" value="Create Post"></div>
            </div>
        </form>
    
    </div>
```

The view also has the following styling:

``` scss
    // app/assets/stylesheets/posts.scss
    
    .post-form{
        display: flex;
        width: 50%;
        flex-direction: column;
        margin: 20px auto;
    }
    .form-group{
        display: flex;
        justify-content: space-between;
        margin: 5px 0px;
        align-items: center;
    }
    
    input[type="submit"]{
        background-color: #333333;
        border: none;
        color: white;
        padding: 10px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
    }
```

When you navigate to the `/``post``/create` route on the web browser, you get the following view:

![ruby-live-blog-create-post-1](//images.ctfassets.net/1es3ne0caaid/oWsqxLx9IGgc6Uk0s8iUY/ea6b016c0ee8a2964b1646d5c039f67a/ruby-live-blog-create-post-1.png)

At this point, the application is almost complete. Notice that in the create view, we specified that the form should be submitted to the `/post/store` route but we did not show how the post was saved. We will look at how to save posts in the next section.

## Saving images with Cloudinary

To save images for the new posts, we will use [Cloudinary](https://cloudinary.com). Cloudinary takes care of all your image and video manipulation needs when building applications.

Cloudinary has a [Ruby gem](https://github.com/cloudinary/cloudinary_gem) that will be used to handle the file uploads.

Add the Cloudinary as a dependency in your `Gemfile`:

```
    # adding cloudinary to gemfile
    gem 'cloudinary'
```

Install it by running the command:

```
    bundle install
```

### Configuring Cloudinary

To use the Cloudinary gem, you need to have a Cloudinary developer account to use it in your applications. Head over [here](https://cloudinary.com/signup) to create one if you don’t have one already. 

Cloudinary automatically checks for a `cloudinary.yml` in the `config` directory that contains the configuration file for your Cloudinary account. You can download your own customized file for your account [here](https://cloudinary.com/console/cloudinary.yml). Once it’s downloaded, place the file in the `config` directory. 

### Saving posts

The module will be used in the post controller as follows:

``` ruby
    # app/controllers/post_controller.rb
    
    class PostController < ApplicationController
      def create
      end
    
      def store
        # upload image to cloudinary
        @image = Cloudinary::Uploader.upload(params[:media])
        # create a new post object and save to db
        @post = Post.new({:title => params[:title], :text => params[:text], :author => params[:author],  :media => @image['secure_url']})
        @post.save
        # trigger an event with pusher
        [...]
        redirect_to('/')
      end
    end
```

Now, when a post is created and saved, you can see it on the homepage:

![ruby-live-blog-create-post-2](//images.ctfassets.net/1es3ne0caaid/1ofpCGnhUoAeYGsyiSe6CS/e0210ec4f1ad96b448cbb20e65540782/ruby-live-blog-create-post-2.png)

![ruby-live-blog-display-posts](//images.ctfassets.net/1es3ne0caaid/l1bnDAg0SckGCM20segws/a94903baa75e7d68a72f737786850d70/ruby-live-blog-display-posts.png)

## Adding realtime functionality with Pusher

Currently, the only way users get access to new posts is if they refresh their browsers. We need a way to automatically add new posts to the page as they are created and this is where Pusher comes in. Pusher allows you to integrate realtime functionality in your applications with ease without worrying about infrastructure. To get started with Pusher, sign up for a developer account here. When you’re done with that, create a new application and note your credentials as you’ll need them as we progress.

Pusher has a Ruby gem which we are going to use. To install it, add the following to your `Gemfile` :

```
    # adding Pusher to Gemfile
    
    gem 'pusher'
```

And then install the gem by running the command:

```
    bundle install
```

To confirm your installation, run:

```
    bundle info pusher
```

**Configuring the Pusher package**
Create a `config/initializers/pusher.rb` file and add the following content to it:

``` ruby
    # config/initializers/pusher.rb
    require 'pusher'
    
    Pusher.app_id = 'PUSHER_APP_ID'
    Pusher.key = 'PUSHER_APP_KEY'
    Pusher.secret = 'PUSHER_APP_SECRET'
    Pusher.cluster = 'PUSHER_APP_CLUSTER'
    Pusher.logger = Rails.logger
    Pusher.encrypted = true
```

The Pusher credentials can be obtained from the pusher application [dashboard](https://dashboard.pusher.com/).

### Triggering events from controller
To trigger a new post event, update the post controller:

``` ruby
    # app/controllers/post_controller.rb
    class PostController < ApplicationController
      def create
      end
    
      def store
        # upload image to cloudinary
        @image = Cloudinary::Uploader.upload(params[:media])
        # create a new post object and save to db
        @post = Post.new({:title => params[:title], :body => params[:body], :author => params[:author],  :media => @image['secure_url']})
       
        if @post.save
          # broadcasting posts using pusher
          Pusher.trigger('posts-channel','new-post', {
            id: @post.id,
            title: @post.title,
            media: @post.media,
            body: @post.body
          })
        end 
        
        redirect_to('/')
      end
    end
```

When a post is successfully saved in the database, a `new-post` event is triggered in the `posts-channel`. For debugging purposes, you can see events that have been triggered by your application on the Pusher dashboard.

### Displaying new posts in realtime for readers
To use Pusher in the frontend of your application, you need to do the following:

Include the Pusher script in the header of the application layout:

``` html
    # app/views/layouts/application.html.erb
    [...]
      <head>
        [...]
        
        <script src="https://js.pusher.com/4.1/pusher.min.js"></script>
       
         [...]
      </head>
    [...]
```

Afterward, create a Pusher client in the home page view

``` javascript
    # app/views/home/index.html.erb
    <script>
        var pusher = new Pusher('YOUR_APP_KEY', {
          cluster: 'eu',
          encrypted: true
        });
    </script>
    
    <div class="wrapper">
    [...]
```

Finally, you’ll need to subscribe to the `post-channel` and listen for `new-post` events. Update the `app/views/home/index.html.erb` to look like this:

``` html
    # app/views/home/index.html.erb
    
    <script>
        var pusher = new Pusher('YOUR_APP_KEY', {
          cluster: 'eu',
          encrypted: true
        });
    </script>
    
    <div class="wrapper">
      [...]
    </div>
    
    <script>
        var channel = pusher.subscribe('posts-channel');
        channel.bind('new-post', function(data) {
            let post_media = data.media;
            let post_id = data.id
            let post_body = data.body;
            let post_title = data.title;
    
            let div = document.getElementById('post_section');
            let new_content = document.createElement("div");
            new_content.innerHTML = `
                <div class="post-card">
                    <img class="image" src="${post_media}">
                    <div class="title">
                        <h2>${post_title}</h2>
                    </div>
                    <div class="body-trunc">
                        <p>${post_body}</p>
                    </div>
                </div>`;
            div.insertBefore(new_content, div.firstChild);
        });
    </script> 
```

When an event is broadcast, we update the UI to show the new blog post. To see the application at work, start the rails server using the command:

```
    rails server --binding=127.0.0.1
```

Navigate to the home page and the editor view to see the application:
 
![ruby-live-blog-demo](//images.ctfassets.net/1es3ne0caaid/6VoDt4JwWIqA4cyU4uYywq/d04b9e20abba3d88e84722a0c2dabaa2/ruby-live-blog-demo.gif)

## Conclusion

In this article, we looked at how to use Ruby and Pusher to build a live blog with realtime updates when new posts are created. You can leverage the concepts shared here when building your own application that needs realtime functionality. The complete source code of this demo application is available on [GitHub](https://github.com/oreHGA/ruby-live-blog).

Build a simple blog app with realtime post updates. Host images with Cloudinary and display new posts instantly.

This brief tutorial shows you how to create a blog application with realtime post updates, and images hosted with Cloudinary.

Create a live blog app using Ruby on Rails

Channels

Christian Nwamba

You see the way the web world is set up now yeah? No one wants to have to reload their pages anymore to get updates as to what is going one with their applications.  You probably would have experienced realtime features like this (seeing realtime the number of likes and re-tweets on a particular tweet on twitter)! Imagine not having to swipe down again to see a new tweet! Having such interesting features are some of the advantages of having realtime functionality on your applications.

## What we’ll build 

In this article, we will build a realtime commenting Ruby on Rails application using Pusher. This application has a simple interface. The user loads a page and can see existing comments on the page. The user can also add comments and see as comments are being made in realtime. Because this article is primarily to show how to add realtime functionality to your application, less emphasis will be placed on Rails syntax and more on making your application realtime


## Requirements

For you to successfully follow through this article, you need to have the following set up:

- Ruby installed on your machine
- Rails installed on your machine

To confirm your installation, run the following :

```
    ruby -v
    rails --version
```

If you get version numbers as result then it means you’re good to go!

## Building the application

To get started, generate a new project using rails by running the command : 

```
    rails new pusher-realtime-ruby
```

This gives us a starter project with this structure to work with. The starter project has the following structure.

![ruby-rails-comments-app-directories](//images.ctfassets.net/1es3ne0caaid/2HqJgFjR4Ai2M6ssiIq40c/b0e43c3cdce00d0a2e686849356f6441/ruby-rails-comments-app-directories.png)

## Creating controller and routes

For this application, we have two basic routes :

- `/` - displays the homepage with an image and existing comments
- `/comment/store` -  this route handles the logic for when a new comment is made on the page

Create a new controller by running :

```
    rails generate controller Comment store
```

This creates a `Comment` controller with an action called `store` .

### Specifying our routes

Now, we need to define the routes we mentioned earlier so the rails server can know to handle requests made by users. To do this, edit the `config/routes.rb` file:

``` ruby
    // config/routes.rb
    
    Rails.application.routes.draw do
      post 'comment/store'
      root 'welcome#index'
    end
```

The `comment/store` route accepts a post request from the user and the root of the application is set to the `welcome#index` view.

> We will look at the `welcome#index` view in depth later on in the article

### Adding controller logic

Now that the `comment/store` route has been defined, the next thing to do is to edit the controller logic to do update the comments. The controller looks like this:

``` ruby
    # app/controllers/comment_controller.rb
    class CommentController < ApplicationController
      def store
        render plain: params[:comment].inspect
      end
    end
```

At the moment, this just renders the new comment on  a new page. The intended feature is to store the comments in the database and update the comments in realtime. 

### Creating a database

To store comments in a database, a database driver is needed. With Ruby on Rails, `SQLite` is used as the default database driver, and for simplicity, we are going to continue with that.

To create your database, run the command:

```
    rake db:create
```

This creates the databases for the application in the `db/` directory.

### Creating the Comment model and running migrations

To populate the database, there need to be tables. Rails is an MVC based Framework and developers can create models to represent entities and structures in their database. To do this, run the command below:

```
     rails generate model Comment comment:text
```

This creates a `Comment` model with a single property `comment`. Running this command will also automatically generate a migration file for the model at `db/migrate/{timestamp}_create_comments.rb`. Let’s take a look at the migration file:

``` ruby
    class CreateComments < ActiveRecord::Migration[5.1]
      def change
        create_table :comments do |t|
          t.text :comment
          t.timestamps
        end
      end
    end
```

We can see from above that the `comment` field is also created. Now that we are satisfied with the migration, you can use a command to run it:

```
    rails db:migrate
```

Once the run is complete, you get a result that looks like this:

```
    rails db:migrate
    == 20180408165733 CreateComments: migrating ===================================
    -- create_table(:comments)
       -> 0.0022s
    == 20180408165733 CreateComments: migrated (0.0023s) ==========================
```

This means the `comments` table has successfully been created in the database.

### Storing new comments

Now, let’s go back to the comment controller. To save the comments in the database, change the `store`  action to look like this:

``` ruby
    class CommentController < ApplicationController
      def store
        @comment = Comment.new(comment_params)
        @comment.save
        redirect_to '/'
      end
    
      private
        def comment_params
          params.require(:comment).permit(:comment)
        end
    end
```

This creates a new comment, saves it in the database and then reloads the home page to the user showing the existing comments

Creating the HomePage view
Now, let’s take a quick look at the `welcome#index` view.  To display the view, there is a welcome controller created, with an action called `index`.

```
    rails generate controller Welcome index
```

Edit the created controller to look like this:

``` ruby
    # app/controllers/welcome_controller.rb
    class WelcomeController < ApplicationController
      def index
        @comments = Comment.all
      end
    end
```

This fetches all the comments from the database and then passes it to the view being generated.

The index view should be edited to look like this:

``` html
    # app/views/welcome/index.html.rb
    
    <h1 style="text-align:center">Real-time Comments!</h1>
    <div class="wrapper">
        <img src="https://image4.owler.com/logo/pusher_owler_20160228_200254_large.png" height="150"alt="Pusher" />
        <div class="top">
            <%= form_with scope: :comment, url: '/comment/store', local: true do |form| %>
            <div class="form-group">
                <%= form.label :comment %>
                <%= form.text_field :comment %>
                <%= form.submit %>
            </div>
            
            <% end %>
        </div>
        <div class="bottom" id="comment_section">
            <h2>Comments</h2>
            <% @comments.each do |comment| %>
                <p><%= comment.comment %></p>
            <% end %>
        </div>  
    </div>
```    

The view displays an image and a form where users can comment on the image. When the submit button is clicked, the `/comment/store` route handles the request. In the same view, we also have a listing of all the existing comments that are saved in the database.

To add some minimal styling to the page, edit the `app/assets/stylesheets/welcome.scss` file to look like this:

``` scss
    // app/assets/stylesheets/welcome.scss
    .wrapper{
        display: flex;
        justify-content: space-around;
        flex-direction: column;
        align-items: center;
    }
    
    .top{
        display: flex;
        justify-content: space-around;
    }
    
    .bottom{
        display: flex;
        justify-content: center;
        flex-direction: column;
    }
    
    input[type=submit]{
       background-color: rgb(27, 96, 160);
       border : 0px;
       border-radius: 10px;
       color: white;
       height: 40px;
       margin-left: 20px;
    }
    
    input[type=text]{
        height: 40px;
        border-radius: 10px;
        border: 1px solid rgb(155, 147, 147);
    }
    
    label{
        height: 40px;
        margin-right: 10px;
    }
    h2{
        margin-bottom : 0px;
    }
```    

To see the application at work, start the rails server using the command:

```
    rails server --binding=127.0.0.1
```

This starts up a rails server with the port shown to you - in this case `127.0.0.1:3000` as specified with the `--binding` flag. When you visit the application, this is what you see:

![ruby-rails-comments-welcome-view](//images.ctfassets.net/1es3ne0caaid/5LGxFRMZQQqO0eq0EikeSe/63b9fb2a56182312c457a5307e6de275/ruby-rails-comments-welcome-view.png)

What we want are the comments to be updated in realtime for all users as changes are being made. Let’s take a look at how to do this.

## Adding realtime functionality using Pusher

Let’s see how to add realtime functionality using [Pusher](https://pusher.com). Pusher allows to seamlessly add realtime features to your applications without worrying about infrastructure.

To get started, create a [developer account](https://pusher.com/signup). Once that is done, [create your application](https://dashboard.pusher.com/#wizard-modal) and obtain your application keys. 

To use Pusher with your rails application, you need to do a couple of things.

### Install Pusher via Ruby Gems

Add pusher to your `Gemfile` 

```
    # Gemfile
    [...]
    
    gem 'pusher'
    
    [...]
```

And then install the new gem:

```
    bundle install
```

To confirm your installation run:

```
    bundle info pusher
```

You should get a result like this:

``` ruby
    $ bundle info pusher
    * pusher (1.3.1)
            Summary: Pusher API client
            Homepage: http://github.com/pusher/pusher-http-ruby
            Path: /home/captog/.rvm/gems/ruby-2.4.1/gems/pusher-1.3.1
```

Import the Pusher package

Create the  `config/initializers/pusher.rb` file and edit it to look like this:

``` ruby
    # config/initializers/pusher.rb
    require 'pusher'
    
    Pusher.app_id = 'PUSHER_APP_ID'
    Pusher.key = 'PUSHER_APP_KEY'
    Pusher.secret = 'PUSHER_APP_SECRET'
    Pusher.cluster = 'PUSHER_APP_CLUSTER'
    Pusher.logger = Rails.logger
    Pusher.encrypted = true
```

The `PUSHER_APP_ID`, `PUSHER_APP_KEY`, `PUSHER_APP_SECRET` and `PUSHER_APP_CLUSTER`  can all be obtained from the [dashboard](https://dashboard.pusher.com) of your application.

### Trigger events from controller

Earlier on in the article, the Comment controller saved comments to the database and then rendered the homepage. Now, let’s tweak it a bit to trigger a new event. The comment controller will look like this:

``` ruby
    # app/controllers/comment_controller.rb
    class CommentController < ApplicationController
      def store
        @comment = Comment.new(comment_params)
        @comment.save
          # broadcasting comments using pusher
          Pusher.trigger('comment-channel','new-comment', {
            comment: @comment.comment
          })
        redirect_to '/'
      end
    
      private
        def comment_params
          params.require(:comment).permit(:comment)
        end
    end
```

After the comment is saved, then a new event named `new-comment` is triggered in the `comment-channel`. From the Pusher dashboard, you can see when events are being triggered for debugging purpose. 

![ruby-rails-comments-debug-console](//images.ctfassets.net/1es3ne0caaid/ciMNcN7ybmuw6AG6scyay/9512d8a07979a34d3c33649bf18e8966/ruby-rails-comments-debug-console.png)

### Displaying comments on the client side

So far, we have seen how to trigger events from the server. For the users to get the realtime experience, they need to be able to see the new comments pop up on their pages. To integrate Pusher to the front end of the application, you need to do the following:

First, include the Pusher script in the header of the application in the `app/views/layouts/application.html.erb`

``` html
    # app/views/layouts/application.html.erb
    [...]
      <head>
        [...]
        
        <script src="https://js.pusher.com/4.1/pusher.min.js"></script>
       
         [...]
      </head>
    [...]
```

Next thing to do is to create a Pusher Client in the application header:

``` javascript
    # app/views/layouts/application.html.erb
    [...]
      <head>
        [...]
        // add pusher script
        <script>
          var pusher = new Pusher('PUSHER_APP_KEY', {
          cluster: 'eu',
          encrypted: true
        });
        </script>
       
         [...]
      </head>
    [...]
```

Finally, subscribe to the `comment-channel` and listen for `new-comment` events. You can do this in the `welcome#index` view of the application. Tweak the view to look like this:

``` javascript
    # app/views/welcome/index.html.erb
      [...]
        <div class="bottom" id="comment_section">
            <h2>Comments</h2>
            <% @comments.each do |comment| %>
                <p><%= comment.comment %></p>
            <% end %>
        </div>
        <script>
            var channel = pusher.subscribe('comment-channel');
            channel.bind('new-comment', function(data) {
                let comment = data.comment;
                var div = document.getElementById('comment_section');
                div.innerHTML += `<p> ${comment} </p>`;
            });
        </script>  
    </div>
```

In the above, we subscribe to the `comment-channel` and listen for a `new-comment` event. Once we get that, the new comment is appended to the comment section of the page.

Now, when you visit the page again, you get this:

![ruby-rails-comments-demo](//images.ctfassets.net/1es3ne0caaid/5r9TjJB1WoqW8OkuuceywW/0aec7673f3133aec8d13636e2b561c7f/ruby-rails-comments-demo.gif)

## Conclusion

In this article, we looked at how to add Realtime functionality to your Rails application without any hassle. Feel free to implement this for any other use cases you deem fit. Here’s a link to the full [GitHub](https://github.com/christiannwamba/pusher-action-cable) repository if you’re interested.

This short tutorial demonstrates how to integrate realtime updates into a Ruby on Rails application. You will create a simple comments interface. Users will be able to add comments, and see comments appear for all users instantly.

Use Ruby on Rails to build a realtime comments app. Users can add comments and see each others' comments display immediately.

Build a comments app with Ruby on Rails

## Introduction

One of the effective means of interpreting and representing data for users of web applications, is by using data visualization tools such as charts, plots and graphs. This among other things aids simplification of data and presents it in a comprehensible and interactive form.

With the increase in popularity of the web and its technologies, representing numerical data with graphs in realtime has become inevitable.

Together in this post, we’ll build a basic poll application where users will be able to provide an answer to a question by selecting one of the options given, then we will proceed to represent these numbers on a pie chart. For a more user-friendly experience, Pusher will be use to update this chart in realtime without the need to refresh the page. This is what the finished application will look like:

![realtime-chart-ruby-demo-1](//images.ctfassets.net/1es3ne0caaid/4nf1sbvChWeA6ukiYE6Kq2/abb514a11cc0b99773d73602745c01c8/realtime-chart-ruby-demo-1.gif)

The application depicted by the image above will be build with Ruby on Rails and the database powered by PostgreSQL. In addition we will make use of a library called [Chartkick](https://github.com/ankane/chartkick); a tool used for creating beautiful JavaScript charts.

## Prerequisites

A basic understanding of Ruby, CoffeeScript and PostgresSQL will help you with this tutorial. Ensure that you have PostgreSQL installed on your machine. Kindly check the documentation of [PostgreSQL](https://www.postgresql.org/download/), [Ruby](https://www.ruby-lang.org/en/downloads/) and [Rails](http://guides.rubyonrails.org/getting_started.html) for further installations procedures.

## Preparing the application

It is important that you have both Ruby and Rails installed. Run the following code in your terminal to confirm the successful installation of both Ruby and Rails:

```
    $ ruby -v // 2.1 or above
    
    $ rails -v // 4.2 or above
```

Next, we will run a command that will create a new Rails application in a folder called `pusher-rails-chart`. Run the command below in your terminal:

```
    $ rails new pusher-rails-chart -T --database=postgresql
```

The `-T` flag was added to prevent generation of the default testing suite as we won’t be writing any tests.

Go ahead and change directory into the newly created folder:

```
    $ cd pusher-rails-chart
```

In the root directory of this application, open the `Gemfile` and add the following gems:

```
    # Gemfile
    
    gem 'bootstrap', '~> 4.1.0'
    gem 'jquery-rails'
    gem 'pusher'
    gem 'figaro'
    gem 'chartkick'
```

and install them:

```
    $ bundle install
```

## Database setup

To set up the database for our application, create a database called `pusher-rails-chart_development`. Check out this [article](https://www.digitalocean.com/community/tutorials/how-to-setup-ruby-on-rails-with-postgres) on how to create a Postgres database and an associated user and password.

In your `database.yml` file, under the `development` key, add the following code:

``` yaml
    # config/database.yml
    
    ...
    development:
      <<: *default
      database: pusher-rails-chart_development // add this line if it isn't already there
      username: database_user // add this line
      password: user_password // add this line
    ...  
```

The username and password in the code above should have access to the `pusher-rails-chart_development` database. Next, run the following code to setup the database:

```
    # setup database
    $ rails db:setup
```

## Starting the development server

Start the development server by running `rails s` from the terminal and visit http://localhost:3000 in your browser. Your page should look like this:

![youre-on-rails](//images.ctfassets.net/1es3ne0caaid/3sOsgC4S80gOKM8Waqkgui/87c5c9e64375cbb2f8f2516223f4e515/youre-on-rails.png)

## Sign up for a free Pusher account

Head over to Pusher and [sign up for a free account](https://dashboard.pusher.com/accounts/sign_up). 

![ruby-create-pusher-account](//images.ctfassets.net/1es3ne0caaid/6uDbn5kOyIOiKyeSeOKqeS/6136b86bc4d9b6ceff7fcf8458375a19/ruby-create-pusher-account.png)

Create a new app by selecting **Channels apps** on the sidebar and clicking **Create Channels app** button on the bottom of the sidebar:

![ruby-channels-dashboard](//images.ctfassets.net/1es3ne0caaid/5IDtPf0HhC4aKg66gguYq8/183e0b23ec44fdfc23a38921e11fe9e3/ruby-channels-dashboard.png)

Configure an app by providing basic information requested in the form presented. You can also choose the environment you intend to integrate Pusher with, to be provided with boilerplate code:

![ruby-new-pusher-app](//images.ctfassets.net/1es3ne0caaid/3qnLmThfu8ue2ImYKKSw8a/2e4f39b15b8787e0f6d3b4f2ea022d95/ruby-new-pusher-app.png)

You can retrieve your keys from the **App Keys** tab:

![ruby-app-keys](//images.ctfassets.net/1es3ne0caaid/1XHWE3GCeoCeqsMCO8uM2q/52523148497d08f6e9ba4f52fe0750f6/ruby-app-keys.png)

Now that you have your Pusher API keys, head over to `config/initializers` directory. Create a `pusher.rb` file and add the following code:

``` ruby
    # config/initializers/pusher.rb
    
    require 'pusher'
    
    Pusher.app_id = ENV["PUSHER_APP_ID"]
    Pusher.key = ENV["PUSHER_KEY"]
    Pusher.secret = ENV["PUSHER_SECRET"]
    Pusher.cluster = ENV["PUSHER_CLUSTER"]
    Pusher.logger = Rails.logger
    Pusher.encrypted = true
```

In your terminal, run:

```
    $ figaro install
```

The command above will generate an `application.yml` file. Locate the newly generate file in `config/application.yml` and add the Pusher credentials obtained from your dashboard:

``` yaml
    # config/application.yml
    
    PUSHER_APP_ID: 'YOUR_APP_ID'
    PUSHER_KEY: 'YOUR_APP_KEY'
    PUSHER_SECRET: 'YOUR_APP_SECRET'
    PUSHER_CLUSTER: 'CLUSTER'
```

## Setting up the model and controller

Next, we will go ahead and generate a model and controller for our application. In your terminal, while in the project’s directory, run the following code:

```
    // generate poll model and controller
    $ rails g scaffold poll name:string laptop:binary
    
    // run database migrations
    $ rails db:migrate
```

## Setting up the homepage

At the moment, if you restart the development server and reload the browser page, the welcome page will still be displayed. This is because we have not instructed Rails to show the homepage whenever we navigate to the root `URL` of our site. 

To tell Rails where the actual homepage is, update the route file with the following code:

``` ruby
    # config/routes.rb
    
    ...
    root 'polls#index'
    ...
```    

In your `application.js` file, add the following code just before the last line:

``` javascript
    // app/assets/javascripts/application.js
    
    ...
    //= require jquery3 # add this line
    //= require popper # add this line
    //= require bootstrap # add this line
    //= require Chart.bundle # add this line
    //= require chartkick # add this line
    //= require_tree .
    ...
```

## Styling

To set up a basic styling for our application, go ahead and rename your `application.css` file to `application.scss`, import Bootstrap and add some custom styles:

``` scss
    // app/assets/stylesheets/application.scss
    
     @import "bootstrap";
     @import url('https://fonts.googleapis.com/css?family=Josefin+Sans');
     body {
      font-family: 'Josefin Sans', sans-serif;
     }
     .navbar-brand {
       color: #FFF !important;
       &:hover {
         background-color: unset;
       }
     }
     .form-control {
       outline: none !important;
       
       &:focus {
        border-color: transparent !important;
        border: 1px !important;
       }
     }
```    

At the moment, if we restart the development server and reload the application, we would notice changes in the fonts of our page, this is because we have successfully included Bootstrap.

If you encounter any errors relating to `application.html.erb` , in `config/boot.rb`, change the ExecJS runtime from Duktape to Node.

``` ruby
    # config/boot.rb
    
    ENV['EXECJS_RUNTIME'] = 'Node'
```

## Setting up the polls table

To set up the view, replace the code in your `index.html.erb` file with the following:

``` html
    <%# app/views/polls/index.html.erb %>
    
    <div class="container-fluid">
      <div class="row">
        <div class="col-5 offset-1">
          <p id="notice"><%= notice %></p>
          <h1>Polls</h1>
          <table id='poll-table' class="table table-hover">
            <thead class="thead-light">
              <tr>
                <th>Name</th>
                <th>Laptop</th>
                <th colspan="3"></th>
              </tr>
            </thead>
            <tbody>
              <% @polls.each do |poll| %>
                <tr>
                  <td><%= poll.name %></td>
                  <td><%= poll.laptop %></td>
                  <td><%= link_to 'Show', poll %></td>
                  <td><%= link_to 'Edit', edit_poll_path(poll) %></td>
                  <td><%= link_to 'Destroy', poll, method: :delete, data: { confirm: 'Are you sure?' } %></td>
                </tr>
              <% end %>
            </tbody>
          </table>
        </div>
        
        <div class="col-6">
          <%= pie_chart [["Yes", Poll.where(laptop: "yes").count], ["No", Poll.where(laptop: "no").count]], id:'polls'%> 
        </div>
      </div>
      
       <div class="row">
        <div class='col-11 offset-1 col-sm-4'>
          <h3>New poll</h3>
          <%= render 'form', poll: @poll %>
        </div>
      </div>
    </div>
```

Here, we have used Bootstrap to style our table and within the second column of the first row we included a line to render the pie chart for this application on the homepage. [Chartkick](https://www.chartkick.com/) helps simplify the use of chart. You can check [here](https://github.com/ankane/chartkick) for more information.

Next, update the index method of the polls controller, to include the following:

``` ruby
    # app/controllers/polls_controller.rb
    
    class PollsController < ApplicationController
     ...
      def index
        @polls = Poll.all
        @poll = Poll.new # add this line
      end
      ...
    end
```    

The code above adds Bootstrap styling to the table on our landing page. It also instantiates a new poll record in the `index` method of the polls controller. If you reload the landing page, you should see the form.

## Submitting a new poll

Currently adding a new poll record redirects us to a different page. We would like to handle that with AJAX instead. To achieve this, add `remote: true` and `format: :json` to your form. Replace the code in `_form.html.erb` with the following: 

``` html
    // app/views/polls/_form.html.erb
    
    <%= form_with(model: poll, remote: true, format: :json, id: 'add_poll') do |form| %>
      <% if poll.errors.any? %>
        <div id="error_explanation">
          <h2><%= pluralize(poll.errors.count, "error") %> prohibited this poll from being saved:</h2>
          <ul>
          <% poll.errors.full_messages.each do |message| %>
            <li><%= message %></li>
          <% end %>
          </ul>
        </div>
      <% end %>
      <div class="field">
        <%= form.label :name %>
        <%= form.text_field :name, id: :poll_name, class: "form-control" %>
      </div>
      <div class="field">
        <%= form.label :laptop, "Do you own a laptop? " %><br />
        <%= form.label :laptop, "Yes", :value => "true" %>
        <%= form.radio_button :laptop, 'yes', :checked => true %>
        <%= form.label :laptop, "No", :value => "false" %>
        <%= form.radio_button :laptop, 'no'%>
      </div>
      <div class="actions">
        <%= form.submit 'submit', class: "btn btn-success"%>
      </div>
    <% end %>
```    

Now that our form uses AJAX, we’ll handle updating the page with CoffeeScript. Open `app/assets/javascripts/polls.coffee` and paste in the code below:

``` coffeescript
    # app/assets/javascripts/polls.coffee
    
    submitPoll = (data) ->
      $('#poll-table tbody').append """
      <tr>
          <td>#{data.name}</td>
          <td>#{data.laptop}</td>
          <td><a href="/polls/#{data.id}">Show</a></td>
          <td><a href="/polls/#{data.id}/edit">Edit</a></td>
          <td><a data-confirm="Are you sure?" rel="nofollow" data-method="delete" href="/polls/#{data.id}">Destroy</a></td>
      </tr>
      """
      return
    
    $ ->
      $('#add_poll').on 'ajax:success', (data) ->
        $('#add_poll')[0].reset()
        submitPoll data.detail[0]
        return
      return
```

In the above code, we added an `ajax:success` event listener to our form courtesy of [jQuery-ujs](https://github.com/rails/jquery-ujs/wiki/ajax). Whenever we add a new response, we get our newly added answer and update our page with it.

Let’s reload our page and add a few responses, they should pop up on the page as soon as we hit submit.

If the `laptop` column shows ‘undefined’ or returns a null value, this has to do with mass assignment protection from the controller, you can read more about this [here](http://guides.rubyonrails.org/action_controller_overview.html#strong-parameters). To fix this, navigate to `app/controllers/polls_controller.rb` and within the `poll_param` method, add `:laptop` to the list of params.

## Realtime service with Pusher

To update our table realtime, we will publish the new poll record to a channel and subscribe to it on the frontend of our app. In the poll model, we’ll add an `after_commit` callback which will call a method that will publish the new poll. We'll use `after_commit` so data is published whenever we add or update a poll. 

Add the following code to the poll model:

``` ruby
    # app/models/poll.rb
    
    class Poll < ApplicationRecord
        after_commit :notify_pusher, on: [:create, :update]
        def notify_pusher
        Pusher.trigger('poll', 'new', self.as_json)
        end  
    end
```    

Here, our initialized Pusher client triggers an event called `new` through a channel named `poll`.

## Updating the frontend of the application

The client side of our application needs to listen for those changes that are being pushed by the server and update the view with it. To do this, we’ll rename our `polls.coffee` file to `polls.coffee.erb` so we can add some Ruby code in it.

Update the file with the following code:

``` coffeescript
    # app/assets/javascripts/polls.coffee.erb
    
    submitPoll = (data) ->
      $('#poll-table tbody').append """
      <tr>
          <td>#{data.name}</td>
          <td>#{data.laptop}</td>
          <td><a href="/polls/#{data.id}">Show</a></td>
          <td><a href="/polls/#{data.id}/edit">Edit</a></td>
          <td><a data-confirm="Are you sure?" rel="nofollow" data-method="delete" href="/polls/#{data.id}">Delete</a></td>
      </tr>
      """
      return
    $ ->
    updateChart = (data) ->
      chart = Chartkick.charts['polls'].getChartObject()
      if data.laptop == 'yes'
        chart.data.datasets[0].data[0]++
        chart.update()
      else
        chart.data.datasets[0].data[1]++
        chart.update()
    
    $ ->
      $('#add_poll').on 'ajax:success', (data) ->
        $('#add_poll')[0].reset()
        return
      pusher = new Pusher('<%= ENV["PUSHER_KEY"] %>',
        cluster: '<%= ENV["PUSHER_CLUSTER"] %>'
        encrypted: true)
      channel = pusher.subscribe('poll')
      channel.bind 'new', (data) ->
          submitPoll data
          updateChart data
          return
      return
```    

In the code above, we created two methods:

1.  `submitPoll()`: updates the poll table with new records upon submission of the poll’s form.

2.  `updateChart()`: updates the datasets of our pie chart without the need to refresh the page.

Lastly, add the Pusher library inside the head tag in the `application.html.erb` file just before the `javascript_include_tag`:

``` html
    <%# . app/views/layouts/application.html.erb %>
    
    <head>
        <title>Poll</title>
        <%= csrf_meta_tags %>
        <%= csp_meta_tag %>
        <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
        <script src="https://js.pusher.com/4.1/pusher.min.js"></script>
        <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
      </head>
```

## Testing the application

Restart the development server if it is currently running. Check your page on http://localhost:3000:

![realtime-chart-ruby-demo-2](//images.ctfassets.net/1es3ne0caaid/4P5ZUY6cGscOIge6IWWGoI/c6b065bec773b431ea99fbc41ddd89b1/realtime-chart-ruby-demo-2.gif)

## Conclusion

Realtime and visual analysis in web applications has come to stay and can only get better. As shown by this post, you can now go ahead and give your users the best of visual realtime update in Ruby on Rails applications.

I hope you found this tutorial helpful. Feel free to download the complete source can be found on [GitHub](https://github.com/yemiwebby/pusher-rails-chart).

Build a web app with Ruby on Rails, featuring a live poll and chart. User responses are communicated instantly, with the chart updating in realtime.

Use Ruby on Rails and PostgreSQL to create a live polling application. Chartkick provides the graph visuals, which update in realtime.

Build a polling app with Ruby on Rails and PostgreSQL

Build a location sharing web app using Ruby on Rails and the Google Maps API. Get your location, generate a link to share it, and allow people to track your movements with realtime updates.

This tutorial uses Ruby on Rails and the Google Maps API to create a location sharing app. Users are able to pinpoint their location and generate a link that allows others to track their movement.

Build a location sharing app with Ruby and Google Maps

Build a location sharing app with Ruby on Rails and the Google Maps API 

## Introduction

In this post, we will explore and build a basic realtime commenting application. We will create a fake post and assume that users read it and decided to leave a comment.

This is similar to what is obtainable in a real-world application, where you can have live commenting features implemented in your project and comments added by readers will update in realtime without the need to refresh the page.  

This basically increases the level of engagement and allows for a proper interaction and participation from users. By the time we are done, our application will look like this:

 ![live-comments-ruby-demo-1](//images.ctfassets.net/1es3ne0caaid/CUCtt2jfaKamewSYqWEss/905255d1b0f30d78395b67037ba50fc2/live-comments-ruby-demo-1.gif)

This application will be built with Ruby on Rails and the realtime functionality fully powered by Pusher.

## Prerequisites

A basic understanding of Ruby, CoffeeScript and PostgresSQL will help you with this tutorial. Ensure that you have PostgreSQL installed on your machine. Kindly check the documentation of [PostgreSQL](https://www.postgresql.org/download/), [Ruby](https://www.ruby-lang.org/en/downloads/) and [Rails](http://guides.rubyonrails.org/getting_started.html) for further installations procedures.

## Creating the live comment application

It is important that you have both Ruby and Rails installed. Run the following code in your terminal to confirm the successful installation of both Ruby and Rails:

```
    $ ruby -v // 2.1 or above
    $ rails -v // 4.2 or above
```

Secondly, we will run a command that will create a new Rails application in a folder called `live-comments-pusher`. Run the command below in your terminal:

```
    $ rails new live-comments-pusher -T --database=postgresql
```

The `-T` flag was added to prevent generation of the default testing suite as we won’t be writing any tests.

Go ahead and change directory into the newly created folder:

```
    $ cd live-comments-pusher
```

In the root directory of this application, open the `Gemfile` and add the following gems:

```
    # Gemfile
    
    gem 'bootstrap', '~> 4.1.0'
    gem 'jquery-rails'
    gem 'pusher'
    gem 'figaro'
```    

and install them:

```
    $ bundle install
```

## Database setup

To set up the database for our application, create a database called `live-comments-pusher_development`. Check out this [article](https://www.digitalocean.com/community/tutorials/how-to-setup-ruby-on-rails-with-postgres) on how to create a Postgres database and an associated user and password.

In your `database.yml` file, under the `development` key, add the following code:

``` yaml
    # config/database.yml
    
    ...
    development:
      <<: *default
      database: live-comments-pusher_development // add this line if it isn't already there
      username: database_user // add this line
      password: user_password // add this line
    ...
```

The username and password in the code above should have access to the `live-comments-pusher_development` database. Next, run the following code to setup the database:

```
    # setup database
    $ rails db:setup
```

## Starting the web server

Start the development server by running `rails s` from the terminal and visit http://localhost:3000 in your browser. Your page should look like this:

![youre-on-rails](//images.ctfassets.net/1es3ne0caaid/3sOsgC4S80gOKM8Waqkgui/87c5c9e64375cbb2f8f2516223f4e515/youre-on-rails.png)

## Signing up with Pusher

Head over to Pusher and [sign up for a free account](https://dashboard.pusher.com/accounts/sign_up). 

![ruby-create-pusher-account](//images.ctfassets.net/1es3ne0caaid/6uDbn5kOyIOiKyeSeOKqeS/6136b86bc4d9b6ceff7fcf8458375a19/ruby-create-pusher-account.png)

Create a new app by selecting **Channels apps** on the sidebar and clicking **Create Channels app** button on the bottom of the sidebar:

![ruby-channels-dashboard](//images.ctfassets.net/1es3ne0caaid/5IDtPf0HhC4aKg66gguYq8/183e0b23ec44fdfc23a38921e11fe9e3/ruby-channels-dashboard.png)

Configure an app by providing basic information requested in the form presented. You can also choose the environment you intend to integrate Pusher with, to be provided with boilerplate code:

![ruby-new-pusher-app](//images.ctfassets.net/1es3ne0caaid/3qnLmThfu8ue2ImYKKSw8a/2e4f39b15b8787e0f6d3b4f2ea022d95/ruby-new-pusher-app.png)

You can retrieve your keys from the **App Keys** tab:

![ruby-app-keys](//images.ctfassets.net/1es3ne0caaid/1XHWE3GCeoCeqsMCO8uM2q/52523148497d08f6e9ba4f52fe0750f6/ruby-app-keys.png)

Now that you have your Pusher API keys, head over to `config/initializers` directory. Create a `pusher.rb` file and add the following code:

``` ruby
    # config/initializers/pusher.rb
    
    require 'pusher'
    
    Pusher.app_id = ENV["PUSHER_APP_ID"]
    Pusher.key = ENV["PUSHER_KEY"]
    Pusher.secret = ENV["PUSHER_SECRET"]
    Pusher.cluster = ENV["PUSHER_CLUSTER"]
    Pusher.logger = Rails.logger
    Pusher.encrypted = true
```

In your terminal, run:

```
    $ figaro install
```

The command above will generate an `application.yml` file. Locate the newly generate file in `config/application.yml` and add the Pusher credentials obtained from your dashboard:

``` yaml
    # config/application.yml
    
    PUSHER_APP_ID: 'YOUR_APP_ID'
    PUSHER_KEY: 'YOUR_APP_KEY'
    PUSHER_SECRET: 'YOUR_APP_SECRET'
    PUSHER_CLUSTER: 'CLUSTER'
```


## Setting up the model and controller

With our application up and running, we’ll use Rails’ scaffolding feature to quickly set up our comment model and controller:

```
    # generate comment model and controller
    $ rails g scaffold comment message:text
    
    # run database migration
    $ rails db:migrate
```

## Setting up the homepage

Restart the development server and reload your browser page. You should still see the welcome page. We’re about to change all that.

Add the following code to your route file:

```
    # config/routes.rb
    
    ...
    root 'comments#index'
    ...
```

In your `application.js` file, add the following code just before the last line:

``` javascript
    // app/assets/javascripts/application.js
    
    .....
    //= require jquery3 # add this line
    //= require popper # add this line
    //= require bootstrap # add this line
    //= require_tree .
    ....
```

Rename your `application.css` file to `application.scss`, import Bootstrap and add some custom styles:

``` scss
    // app/assets/stylesheets/application.scss
    
    
     @import "bootstrap";
     @import url('https://fonts.googleapis.com/css?family=Josefin+Sans');
     body {
      font-family: 'Josefin Sans', sans-serif;
     }
     .navbar-brand {
       color: #FFF !important;
       &:hover {
         background-color: unset;
       }
     }
     .form-control {
       outline: none !important;
       
       &:focus {
        border-color: transparent !important;
        border: 1px !important;
       }
     }
     #wrapper {
         padding-top: 15px;
     }
      p {
        line-height: 1.3125rem;
      }
      
      .comments {
        margin: 2.5rem auto 0;
        max-width: 60.75rem;
        padding: 0 1.25rem;
      }
      
      .comment-wrap {
        margin-bottom: 1.25rem;
        display: table;
        width: 100%;
        min-height: 5.3125rem;
      }
      
      .photo {
        padding-top: 0.625rem;
        display: table-cell;
        width: 3.5rem;
      }
      .photo .avatar {
        height: 2.25rem;
        width: 2.25rem;
        border-radius: 50%;
        background-size: contain;
      }
      
      .comment-block {
        padding: 1rem;
        background-color: #f5f5f5;
        display: table-cell;
        vertical-align: top;
        border-radius: 0.1875rem;
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08);
      }
      .comment-block textarea {
        width: 100%;
        resize: none;
      }
      
      .comment-text {
        margin-bottom: 1.25rem;
      }
      
      .bottom-comment {
        color: #acb4c2;
        font-size: 0.875rem;
      }
      .comment-actions {
        float: right;
      }
      .comment-actions li {
        display: inline;
        margin: -2px;
        cursor: pointer;
      }
      .comment-actions li.show {
        padding-right: 0.75rem;
        border-right: 1px solid #e1e5eb;
      }
      .comment-actions li.destroy {
        padding-left: 0.75rem;
        padding-right: 0.125rem;
      }
```    

At the moment, if we restart the development server and reload the application, we should notice changes in the fonts of our page, this is because we have successfully included Bootstrap.

If you encounter any errors relating to `application.html.erb`  while trying to set up Bootstrap, in `config/boot.rb`, change the ExecJS runtime from Duktape to Node.

``` ruby
    # config/boot.rb
    ENV['EXECJS_RUNTIME'] ='Node'
```

## Set up the view

To set up the view, replace the code in your `index.html.erb` file with the following:

``` html
    <%# app/views/comments/index.html.erb %>
    
    <div id="wrapper" class="container">
    <div class="text-center">
      <h1>Sample post</h1>
      <p>This is an interesting sample post for Pusher </p>
    </div>
    <div id="comments" class="comments">
    <% @comments.each do |comment| %>
     <div class="col-6 offset-3">
      <div class="comment-wrap">
            <div class="photo">
                <div class="avatar" style="background-image: url('http://res.cloudinary.com/yemiwebby-com-ng/image/upload/v1525202285/avatar_xcah9z.svg')"></div>
            </div>        
            <div class="comment-block">
                <p class="comment-text"><%= comment.message %></p>
                <div class="bottom-comment">
                    <ul class="comment-actions">
                        <li class="show"><%= link_to 'Show', comment %></li>
                    </ul>
                </div>
            </div>
      </div>
    </div>  
    <% end %>
    </div>
    <div class='col-6 offset-4 col-sm-4'>
      <%= render 'form', comment: @comment %>
    </div>
    </div>
```    

Update the index method of the comments controller, to include the following:

``` ruby
    # app/controllers/comments_controller.rb
    
    class CommentsController < ApplicationController
      ...
      def index
        @comments = Comment.all
        @comment = Comment.new # add this line
      end
      ...
    end
```

The code above adds Bootstrap styling to the table on our landing page. It also instantiates a new comment record in the `index` method of the comments controller. If you reload the landing page, you should see the form.

## Post a comment

Currently adding a new comment record redirects us to a different page. We would like to handle that with AJAX instead. To achieve this, add `remote: true` and `format: :json` to your form. Replace the code in `_form.html.erb` with the following: 

``` html
    // app/views/comments/_form.html.erb
    
    <%= form_with(model: comment, remote: true, format: :json, id: 'add_comment') do |form| %>
      <% if comment.errors.any? %>
        <div id="error_explanation">
          <h2><%= pluralize(comment.errors.count, "error") %> prohibited this comment from being saved:</h2>
          <ul>
          <% comment.errors.full_messages.each do |message| %>
            <li><%= message %></li>
          <% end %>
          </ul>
        </div>
      <% end %>
      <div class="field">
        <%= form.label :message %>
        <%= form.text_area :message, id: :comment_message, class: "form-control" %>
      </div>
      <div class="actions">
        <%= form.submit 'Add comment', class: "btn btn-success"%>
      </div>
    <% end %>
```

Now that our form uses AJAX, we’ll handle updating the page with CoffeeScript. Open `app/assets/javascripts/comments.coffee` and paste in the code below:

``` coffeescript
    # app/assets/javascripts/comments.coffee
    
    addComment = (data) ->
      $('#comments').append """
      <div class="col-6 offset-3">
        <div class="comment-wrap">
            <div class="photo">
                <div class="avatar" style="background-image: url('http://res.cloudinary.com/yemiwebby-com-ng/image/upload/v1525202285/avatar_xcah9z.svg')"></div>
            </div>        
            <div class="comment-block">
                <p class="comment-text">#{data.message}</p>
                <div class="bottom-comment">
                    <ul class="comment-actions">
                        <li class="show"><a href="/comments/#{data.id}">Show</a></li>
                    </ul>
                </div>
            </div>
      </div>
      </div>
      """
      return
    
    $ ->
      $('#add_comment').on 'ajax:success', (data) ->
        $('#add_comment')[0].reset()
        addComment data.detail[0]
        return
      return
```

In the above code, we added an `ajax:success` event listener to our form courtesy of [jQuery-ujs](https://github.com/rails/jquery-ujs/wiki/ajax). Whenever we add a new comment, we get our newly added comment as a response and update our page with it.

Let’s reload our page and add a few comments, they should pop up on the page as soon as we hit submit.

## Realtime service with Pusher

To update our page in realtime, we will publish the new comment record to a channel and subscribe to it on the frontend of our app. In the comment model, we’ll add an `after_commit` callback, which will call a method that will publish the new comment. We'll use `after_commit` so data is published whenever we add or update a comment. 

Add the following code to the comment model:

``` ruby
    # app/models/comment.rb
    
    class Comment < ApplicationRecord
      after_commit :notify_pusher, on: [:create, :update]
      def notify_pusher
      Pusher.trigger('comment', 'new', self.as_json)
      end
    end
```

Here, our initialized Pusher client triggers an event called `new` through a channel named `comment`.

## Updating the frontend of the application

So the server is pushing data out on each change, now it’s up to the client to listen for those changes and do something with that data. To do this, we’ll rename our `comments.coffee` file to `comments.coffee.erb` so we can sprinkle some Ruby code in it.

Update the file with the following code:

``` ruby
    # app/assets/javascripts/comments.coffee.erb
    
    addComment = (data) ->
      $('#comments').append """
      <div class="col-6 offset-3">
        <div class="comment-wrap">
            <div class="photo">
                <div class="avatar" style="background-image: url('http://res.cloudinary.com/yemiwebby-com-ng/image/upload/v1525202285/avatar_xcah9z.svg')"></div>
            </div>        
            <div class="comment-block">
                <p class="comment-text">#{data.message}</p>
                <div class="bottom-comment">
                    <ul class="comment-actions">
                        <li class="show"><a href="/comments/#{data.id}">Show</a></li>
                    </ul>
                </div>
            </div>
      </div>
      </div>
      """
      return
    
    $ ->
      $('#add_comment').on 'ajax:success', (data) ->
        $('#add_comment')[0].reset()
        return
      pusher = new Pusher('<%= ENV["PUSHER_KEY"] %>',
        cluster: '<%= ENV["PUSHER_CLUSTER"] %>'
        encrypted: true)
      channel = pusher.subscribe('comment')
      channel.bind 'new', (data) ->
          addComment data
          return
      return
```

Lastly, add the Pusher library inside the head tag in the `application.html.erb` file just before the `javascript_include_tag`:

``` html
    <%# app/views/layouts/application.html.erb %>
    
    <head>
        <title>NewNestcomments</title>
        <%= csrf_meta_tags %>
        <%= csp_meta_tag %>
        <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
        <script src="https://js.pusher.com/4.1/pusher.min.js"></script> # add this line
        <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
      </head>
```

## Testing the application

Restart the development server if it is currently running. Check your page on http://localhost:3000:

![live-comments-ruby-demo-2](//images.ctfassets.net/1es3ne0caaid/4dRgYlqRkcOoaUWQ2o08AS/1f88024efd181c76eb7ff11e6f065a28/live-comments-ruby-demo-2.gif)

## Conclusion

In this tutorial, we have been able to tap into one of the realtime services offered by Pusher to build a live comments application. This can be improved on by adding extra features as you deem fit. The complete source code for this application can be found [here on GitHub](https://github.com/yemiwebby/live-comments-pusher).

Build a social commenting application using Ruby on Rails and PostgreSQL. App users can leave comments on a sample post, and see other comments appear immediately as they are added.

This brief tutorial guides you through building a comments app. Use Ruby on Rails and PostgreSQL to create a simple app where users can comment on a sample post. Comments appear and update instantly as they are added.

Build a live comments app with Ruby on Rails and PostgreSQL

Build a Ruby app that tracks which users are online. You will create a simple app, with signup and login functionality. Users will be able to view a dashboard that updates automatically when new users log in.

This tutorial uses Ruby on Rails and PostgreSQL to create a simple Ruby app featuring: user signup and login, and a dashboard where users are alerted when a new user logs in.

Track online presence in a Ruby on Rails app

Some say moments are best when captured so we can relive them and quite frankly, they kind of have a point. This is why applications like Instagram have a lot of users. In this article, we are going to look at how to build a simple photo sharing application with Pusher, Cloudinary and Ruby.

![photo-sharing-ruby-preview](//images.ctfassets.net/1es3ne0caaid/6yf4kdmU7Yqym20AAugUee/240af040fcbe7ab2d029cd744e14fe99/photo-sharing-ruby-preview.png)

## Prerequisites 

For you to successfully follow through this article, you need to have the following set up:

- Ruby installed on your machine
- Rails installed on your machine

To confirm your installation, run the following :

```
    ruby -v // minimum version 2.4
    rails --version // minimum version 4.2
```

If you get version numbers as result then it means you’re good to go!


## Getting started

### Creating a new Ruby project

Since you already have Ruby installed on your machine, go ahead to create a new Rails application by running the command:

```
    rails new pusher-photofeeds
```

This creates a sample rails project with the following structure:

![photo-sharing-ruby-directory](//images.ctfassets.net/1es3ne0caaid/2jCr2dbmocqMAEcKS8Gm0E/1536575d10d23ec57fba46accc2f3eb4/photo-sharing-ruby-directory.png)

You can take the sample application for a spin by running the command:

```
    rails server --binding=127.0.0.1
```

### Configuring the database

To store posts in a database, a database driver is needed. With Ruby on Rails, SQLite is used as the default database driver, and for simplicity, we are going to continue with that.

To create your database, run the command:

```
    rake db:create
```

This creates the database for the application in the `db/` directory of your project.

### Creating the post model

To represent a sample post in our application, we need to create a model. Our simple post with have the following properties:

- Link
- Caption

Create the model by running the command:

```
    rails generate model Post link:text caption:text
```

This creates a migration file for your new model that can be found in `db/migrate/{timestamp}_create_posts`. The file will look like this:

``` ruby
    # db/migrate/{timestamp}_create_posts
    class CreatePosts < ActiveRecord::Migration[5.2]
      def change
        create_table :posts do |t|
          t.text :link
          t.text :caption
    
          t.timestamps
        end
      end
    end
```

Now, to store the data in the database, run the command:

```
    rails db:migrate
```

When you run that, you get the following output:

```
    ➜ rails db:migrate
    == 20180520070732 CreatePosts: migrating ======================================
    -- create_table(:posts)
       -> 0.0016s
    == 20180520070732 CreatePosts: migrated (0.0022s) =============================
```

At this point, we have our posts table created with the link and caption as fields we wanted.

## Accepting posts

Rails is an MVC Framework and we need to create a controller that handles our route. Let’s create a `Photo` controller that perform the following actions:

- Displays the existing photos in the feed
- Stores a new photo

To do this, run the following command:

```
    rails generate controller Photo index store
```

This creates the controller and the following files. Now, let’s edit the `index` view created by this command. Update your `photo/index.html.erb` file to look like this:

``` html
    
    <h1 style="text-align: center">Realtime PhotoFeeds!</h1>
    <div class="wrapper">
        <form class="uploads" method="POST" action="/photo/store" enctype="multipart/form-data">
            <%= token_tag %> 
            <div class="form-group">
                <label for="caption">Caption</label>
                <input type="text" name="caption">
            </div>
            <div style="margin-left: 5px;">
                <input type="file" name="image">
            </div>
            <div>
                <input type="submit" value="Upload">
            </div>
        </form>
        <div class="images">
            <div class="post">
                <div>
                    <img class="post-image" src="https://pbs.twimg.com/media/DOXI0IEXkAAkokm.jpg">
                </div>
                <p class="post-caption">Living my best life</p>
            </div>
        </div>
    </div>
```

The view’s styling is controlled by `photo.scss`. Update the file to look like this:

``` scss
    // app/assets/stylesheets/photo.scss
    .wrapper{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .uploads{
        margin-top: 20px;
        margin-bottom: 20px;
        align-items: center;
    }
    .images{
        .post{
            width: 500px;
            border-radius: 10px;
            border: 1px solid rgb(214, 210, 210);
            margin-bottom: 20px;
        }
    }
    .post-image{
        width: 100%;
    }
    .post-caption{
        padding-left: 20px;
    }
    .uploads{
        display: flex;
        justify-content: space-between;
    }
    input[type="submit"]{
        background-color: #333333;
        border: none;
        color: white;
        padding: 10px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
    }
```

The top bar allows the user to upload pictures to the feed and that is fixed to the top to make it easy to perform the action. The other part part is responsible for displaying the images on the screen to the user. 

Now let’s take a look at what happens when a submission is made for a new post to be created. When the **Post** button is clicked, a POST request is made to the ‘photo/store’ route.

In the `config/routes.rb` that houses the available routes for our application, we have the following:

- `/` - To display the existing photos and upload form
- `/photo/store` - To create a new post

``` ruby
    # config/routes.rb
    Rails.application.routes.draw do
      post 'photo/store'
      root 'photo#index'
    end
```

Let’s take a look at the controller logic to save the post uploaded by the user. Edit your `app/controllers/photo_controller.rb` to look like this:

``` ruby
    # app/controllers/photo_controller.rb
    class PhotoController < ApplicationController
      def store
        render plain: params[:caption].inspect
      end
      
      def index
        @posts = Post.all
      end
    end
```

> The `index` method in the controller is responsible for fetching all the existing posts in the database.

At the moment, the controller only renders the caption on a new page. This is not what we want. We are going to further edit this controller to do the following:

- Upload the image to Cloudinary and save the post in the database
- Use Pusher to display posts in realtime

## Uploading posts with Cloudinary

[Cloudinary](https://cloudinary.com) is your one stop shop for all your image and video management needs when building applications. With Cloudinary, you no longer have to worry about writing the core code behind image and video manipulations, uploading images. You can read more about all Cloudinary features [here](https://cloudinary.com/solutions). 

Cloudinary has a [Ruby gem](https://github.com/cloudinary/cloudinary_gem) and that is what will be used to handle the file uploads.

Add the Cloudinary as a dependency in your `Gemfile`:

```
    # adding cloudinary to gemfile
    gem 'cloudinary'
```

Install it by running the command:

```
    bundle install
```

### Configuring Cloudinary
To use the Cloudinary gem, you need to have a Cloudinary developer account to use it in your applications. Head over here to create one if you don’t have one already. 

Cloudinary automatically checks for a `cloudinary.yml` in the `config` directory that contains the configuration file for your Cloudinary account. You can download your own customized file for your account [here](https://cloudinary.com/console/cloudinary.yml). Once it’s downloaded, place the file in the `config` directory.

### Using the module

We are going to use the module in the Photo controller. Update the `app/controllers/photo_controller.rb` file:

``` ruby
    # app/controllers/photo_controller.rb
    class PhotoController < ApplicationController
      
      def index
        @posts = Post.all.order("created_at DESC")
      end
      
      def store
        # upload image to cloudinary
        @value = Cloudinary::Uploader.upload(params[:image])
        # create a new post object and save to db
        @post = Post.new({:link => @value['secure_url'], :caption => params[:caption]})
        @post.save
        # trigger an event with pusher
        [...]
        redirect_to('/')
      end
    end
```    

Now, at this point, we’ve been able to upload a new image using Cloudinary and save the post in the database.

## Adding realtime functionality with Pusher

Now that the post has been created, you need to let all the users online know that there’s a new post without needing to refresh their browsers. To do this, let’s use Pusher. Pusher allows you to seamlessly add realtime features to your applications without worrying about infrastructure.
To get started, create a [developer account](https://pusher.com/signup). Once that is done, [create your application](https://dashboard.pusher.com/#wizard-modal) and obtain your application keys. 

To use Pusher with your Rails application, you need to do a couple of things.

### Install Pusher via Ruby gems

Add pusher to your `Gemfile` 

```
    # Gemfile
    [...]
    
    gem 'pusher'
    
    [...]
```

And then install the new gem:

```
    bundle install
```

To confirm your installation run:

```
    bundle info pusher
```

You should get a result like this:

```
    $ bundle info pusher
    * pusher (1.3.1)
            Summary: Pusher API client
            Homepage: http://github.com/pusher/pusher-http-ruby
            Path: /home/captog/.rvm/gems/ruby-2.4.1/gems/pusher-1.3.1
```

### Import the Pusher package

Create a  `config/initializers/pusher.rb` file to look like this:

``` ruby
    # config/initializers/pusher.rb
    require 'pusher'
    
    Pusher.app_id = 'PUSHER_APP_ID'
    Pusher.key = 'PUSHER_APP_KEY'
    Pusher.secret = 'PUSHER_APP_SECRET'
    Pusher.cluster = 'PUSHER_APP_CLUSTER'
    Pusher.logger = Rails.logger
    Pusher.encrypted = true

The `PUSHER_APP_ID`, `PUSHER_APP_KEY`, `PUSHER_APP_SECRET` and `PUSHER_APP_CLUSTER`  can all be obtained from the [dashboard](https://dashboard.pusher.com) of your application.
```

### Triggering events from the controller

To trigger a new event, update the `app/controlllers/photo_controller.rb` file:

``` ruby
    # app/controllers/photo_controller.rb
    class PhotoController < ApplicationController
      def store
        # upload image to cloudinary
        @value = Cloudinary::Uploader.upload(params[:image])
        # render plain: @value['secure_url']
        # create a new post object and save to db
        @post = Post.new({:link => @value['secure_url'], :caption => params[:caption]})
        if @post.save
          # broadcasting posts using pusher
          Pusher.trigger('posts-channel','new-post', {
            link: @post.link,
            caption: @post.caption
          })
        end 
        redirect_to('/')
      end
    end
```

After the post is saved in the database, a `new-post` event is triggered in the `posts-channel`. The Pusher dashboard allows you to debug your application by seeing when events have been triggered.

### Displaying posts on the client

To integrate Pusher to the frontend of your application, you’ll need to do the following:

First, include the Pusher script in the header of the application in the `app/views/layouts/application.html.erb`

``` html
    # app/views/layouts/application.html.erb
    [...]
      <head>
        [...]
        
        <script src="https://js.pusher.com/4.1/pusher.min.js"></script>
       
         [...]
      </head>
    [...]
```

Next thing to do is to create a Pusher client in the application header:

``` html
    # app/views/layouts/application.html.erb
    [...]
      <head>
        [...]
        // add pusher script
        <script>
          var pusher = new Pusher('PUSHER_APP_KEY', {
          cluster: 'eu',
          encrypted: true
        });
        </script>
       
         [...]
      </head>
    [...]
```
  
Finally, subscribe to the `posts-channel` and listen for `new-post` events. You can do this in the `photo#index` view of the application. Update the `app/views/photo/index.html.erb` to look like this:

``` html
    # app/views/photo/index.html.erb
    <h1 style="text-align: center">Realtime PhotoFeeds!</h1>
    <div class="wrapper">
      [...]
      
       <div class="images" id="post_section">
          <% @posts.each do |post| %>
              <div class="post">
                      <div>
                          <img class="post-image" src="<%= post.link %>">
                      </div>
                      <p class="post-caption"><%= post.caption %></p>
              </div>
          <% end %>
        </div>
    </div>
        <script>
        var channel = pusher.subscribe('posts-channel');
        channel.bind('new-post', function(data) {
            let post_link = data.link;
            let post_caption = data.caption;
            let div = document.getElementById('post_section');
            let new_content = document.createElement("div");
            new_content.innerHTML = `
                <div class="post">
                    <div>
                        <img class="post-image" src="${post_link}">
                    </div>
                    <p class="post-caption"> ${post_caption}</p>
                </div>`;
            div.insertBefore(new_content, div.firstChild);
        });
        </script>  
```

Here, on the client, we subscribe to the `posts-channel` and listen for a `new-post` event. When an event is broadcasted we then update the UI to show the new post.

To see the application at work, start the rails server using the command:

```
    rails server --binding=127.0.0.1
```

This starts up a rails server with the port shown to you - in this case `127.0.0.1:3000` as specified with the `--binding` flag. When you visit the application, this is what you see:

![photo-sharing-ruby-demo](//images.ctfassets.net/1es3ne0caaid/50pJyIefdmk0EqmeYGIaCa/930228316f4843d1d58b5c48c05313ea/photo-sharing-ruby-demo.gif)

## Conclusion

In this article, we’ve seen how to use Ruby and Pusher to make a simple realtime photosharing application. Feel free to apply these concepts and explore the Pusher documentation for more exciting features.Lastly, the complete source code of this demo application is on [GitHub](https://github.com/orehga/pusher-photofeed-ruby).

Build a simple photo sharing app using Ruby and Cloudinary. Users will be able to upload and caption photos, and receive immediate updates when other users post.

This short tutorial will show you how to create a simple photo sharing app using Ruby and Cloudinary. You will set up a Rails project, integrate Cloudinary, and build an app featuring realtime updates as users post images.

Build a photo sharing app with Ruby on Rails and Cloudinary

This tutorial will show you how to create a simple social media feed using Ruby on Rails. Users will be able to make posts, and like other people's posts. The feed will update instantly as new posts are made.

Build a social media feed using Ruby on Rails. The web app allows users to make and like posts, with changes being displayed to all users instantly.

Build a social feed with Ruby on Rails and PostgreSQL

Build a chat widget and admin dashboard using Ruby on Rails and PostgreSQL. The application provides the basic functionality for a business help or sales chat widget.

This tutorial will guide you through creating a chat widget and admin dashboard, suitable for a business help chat or sales chat. You will use Ruby on Rails and PostgreSQL.

13 tutorials for “Ruby”

Create a live blog app using Ruby on Rails

Build a comments app with Ruby on Rails

Build a polling app with Ruby on Rails and PostgreSQL

Build a location sharing app with Ruby on Rails and the Google Maps API

Build a live comments app with Ruby on Rails and PostgreSQL

Track online presence in a Ruby on Rails app

Build a photo sharing app with Ruby on Rails and Cloudinary

Build a social feed with Ruby on Rails and PostgreSQL

Build a live chat widget with Ruby and PostgreSQL

Products

Developers

Company

Connect

.css-npldjc{color:#5c29db;font-weight:700;}13 tutorials for “Ruby”

Create a live blog app using Ruby on Rails

Build a comments app with Ruby on Rails

Build a polling app with Ruby on Rails and PostgreSQL

Build a location sharing app with Ruby on Rails and the Google Maps API

Build a live comments app with Ruby on Rails and PostgreSQL

Track online presence in a Ruby on Rails app

Build a photo sharing app with Ruby on Rails and Cloudinary

Build a social feed with Ruby on Rails and PostgreSQL

Build a live chat widget with Ruby and PostgreSQL

Products

Developers

Company

Connect

13 tutorials for “Ruby”