Forem: Mbonu Blessing

Understanding Ruby String Count Method Examples

Mbonu Blessing — Fri, 09 Oct 2020 13:50:09 +0000

Hello everyone, this week I am going to be explaining the examples that were written for the Ruby string count method. You all agree with me that understanding the first example is easy but applying that to the rest needed some extra digging.

Here is the link to the method https://apidock.com/ruby/String/count.

These are the example I will be explaining:

a = "hello world"
a.count "lo"                   #=> 5
a.count "lo", "o"              #=> 2
a.count "hello", "^l"          #=> 4
a.count "ej-m"                 #=> 4

"hello^world".count "\\^aeiou" #=> 4
"hello-world".count "a\\-eo"   #=> 4

c = "hello world\\r\\n"
c.count "\\"                   #=> 2
c.count "\\A"                  #=> 0
c.count "X-\\w"                #=> 3

Our example string is hello world and we would be breaking down each of the example so you can understand it better.

a.count "lo"

a = "hello world"
a.count "lo"

#=> 5

The above is pretty straight forward. It counts the number of times the characters passed appear in the string. Using the scan method for each of them.

"hello world".scan(/l/)
#=> ["l", "l", "l"] 

"hello world".scan(/o/)
#=> ["o", "o"]

We see that 'l' appears 3 times and 'o' appears 2 times. this brings it to a total number of 5 times for the both of them.

a.count "lo", "o"

a = "hello world"
a.count "lo", "o"              

#=> 2

What this does is it gets the intersection of the 2 parameters passed to it. From the above, our params are "lo" and "o". Intersecting the 2 of them. Let's try a simple code to find the intersection:

'lo'.split('') & 'o'.split('')
#=> ["o"]

We can see that the intersection returns 'o' so our count will therefore return the number of times 'o' occurs in our example string. Hence the answer 2.

a.count "hello", "^l"

a = "hello world"
a.count "hello", "^l"          

#=> 4

Let's take the 2 parameters apart. We know the 'hello' returns any character that matches 'h' or 'e' or 'l' or 'o' which gives us '7'.

You will notice the '^' in the above. It simple returns the number of characters that are not 'l' from. What this does is that from the we now return the number of character matches that is not 'l'. Which brings us to our final answer as '4'.

a.count "ej-m"

a = "hello world"
a.count "ej-m"                 

#=> 4

Notice the '-' in the parameter passed. It simple defines a range between the character before it and the character after it. So it means return all characters that matches 'e' and alphabets between 'j' and 'm'. These alphabets are ['j', 'k', 'l', 'm']. From the range array, we can only find 'l' in our string so we are basically doing something like:

a.count "el"

which returns 4.

"hello^world".count "\^aeiou"

"hello^world".count "\\^aeiou"

#=> 4

Here, the backslashes negates the '^' characters and instead returns the characters that matches 'a' or 'e' or 'i' or 'o' or 'u' or '^'. Looking at the string, we see that only 3 vowels that matches the check and we have one '^' hence our answer 4.

"hello-world".count "a\-eo"

"hello-world".count "a\\-eo"   

#=> 4

Same as the last example we just checked, the '\' negates the '-' and only finds characters that matches 'a' or 'e' or 'o' or '-'. We have 3 vowels and 1 '-' hence the answer 4 as well.

c.count "\"

c = "hello world\\r\\n"
c.count "\\" 

#=> 2

This is quite straight forward. The first backlash is escaping the second one and the even the the string we are applying the count method to, the first backslash is escaping the second so the 2 backslashes are seen as one.

Based in this, we have 2 double backslashes hence our answer 2.

c.count "\A"

c = "hello world\\r\\n"
c.count "\\A"                 

#=> 0

Just like the above, "\A" is looking for characters that matches exactly "\A" and we have zero. If we were looking for something like "\r", one will be returned. In a case where the double backslashes is followed by a random character in the string like d, the count for '\' is ignored and it returns just one.

Based on this, a search for "\A" returns 0.

c.count "X-\w"

c = "hello world\\r\\n"
c.count "X-\\w"                 

#=> 3

We are going to break this down in 2 parts. The first part is "X-\". This is an ASCII character table I got form w3 schools.

Recall that the '-' signifies that we want to find a range between the character before and after. From the table, you can see that these characters are 'X', 'Y', 'Z', '[', and '\'. From our example string, only the '\' within the range is present there. And from 2 example before, we see that c.count("\") returns 2.

The last character is straight forward. We only have one occurrence of 'w' so combining the both together, we have our answer 3.

Resources

Stackoverflow - String#count options
Stackoveflow - How does count method works in Ruby?

This concludes the end of today's article. Feel free to share and comment your thought below.

Until next week

Build a CLI for Web scraping in Ruby

Mbonu Blessing — Fri, 02 Oct 2020 21:25:46 +0000

Hello everyone,

This week, we will be building a CLI(command line interface) to scrape data from dev.to. We will be filter by hashtag and return the title and author of articles related to a hashtag. We are going to be doing this with just ruby. A summary of how the CLI will work is;

You run it and it shows the welcome message
It asks you to enter an hashtag
Then the result is displayed to you

Time to get our hands dirty..

First created a ruby file. I called mine dev_to_web_scraper.rb and open with your code editor.

We are going to create a simple skeleton just to get our CLi going before scraping. We will be creating a module for instructions and a class to handle the scraping.

# instruction module

module Instructions
  def introductions
    puts 'Welcome to dev.to webscraper. This CLi tool gathered articles based on the hashtag provided'
    puts 'If you want to quit, simple type (q) the next time you are prompted to enter a value'
    puts 'Please provide a hashtag to continue..'
    puts ''
  end

  def quit_message
    puts 'You have quit the scraper'
  end

  def invalid_entry
    puts 'Invalid entry, try again'
  end
end

# scraper class

class Scraper
  extend Instructions

  def self.get_input
    user_input = gets.chomp
    get_hashtag(user_input)
  end

  def self.get_hashtag(user_input)
    if user_input == 'q'
      quit_message
    elsif user_input.empty?
      invalid_entry
      get_input
    else
      scrape_data(user_input.to_s)
    end
  end

  def self.scrape_data(hashtag)
    puts "Scraped data for #{hashtag}"
    get_input
  end
end

Let me explain a little. I think the instruction module is pretty straight forward. We just created 3 methods to display instructions to scrape the page.

For the class, we include the instruction module. This class also have 3 methods, the first is used to get the input from the user and pass it to the next method. This next method is called get_hashtag that takes an input, then decides what to do based on the input.

Based on the instruction, when the user enter's q, they quit the CLI and a message is displayed. If the user puts an empty string, an invalid_entry message is displayed and they are prompted to enter another input. And when it's not empty, we convert to a string in the case that it's a number and pass it to the scrape_data method.

This is where the action will happen but for now, it simply logs a string with the user_input and prompts them for another input.

To get it working, we need to call the introductions and the get_input.

All this is in one file. So the full file will resemble this:

# dev_to_web_scraper.rb

module Instructions
  def introductions
    puts 'Welcome to dev.to webscraper. This CLi tool gathered articles based on the hashtag provided'
    puts 'If you want to quit, simple type (q) the next time you are prompted to enter a value'
    puts 'Please provide a hashtag to continue..'
    puts ''
  end

  def quit_message
    puts 'You have quit the scraper'
  end

  def invalid_entry
    puts 'Invalid entry, try again'
  end
end


class Scraper
  extend Instructions

  def self.get_input
    user_input = gets.chomp
    get_hashtag(user_input)
  end

  def self.get_hashtag(user_input)
    if user_input == 'q'
      quit_message
    elsif user_input.empty?
      invalid_entry
      get_input
    else
      scrape_data(user_input.to_s)
    end
  end

  def self.scrape_data(hashtag)
    puts "Scraped data for #{hashtag}"
    get_input
  end
end


Scraper.introductions
Scraper.get_input

Time to run in our console. I saved my file in the desktop folder so I need to cd into that folder to run my code.

$ cd Desktop
$ ruby dev_to_web_scraper.rb

And you should have this beautiful goodness

Onto the not-so-hard part. We need to install some gems:

$ gem install httparty #HTTP request gem
$ gem install nokogiri #parsing gem

We also need to get the url form dev.to that gives you access to search by hashtags. The url is https://dev.to/t/career where we can change career to what we get from the user.

Updating our file to require httparty and updating our scrape_data method:

require "HTTParty"

...

  def self.scrape_data(hashtag)
    url = "https://dev.to/t/#{hashtag}"
    html = HTTParty.get(url)
    puts "Scraped data for #{hashtag}"
    puts html
    get_input
  end
...

Running the above will display a bunch of html. Time to turn it into something meaningful.

We are going to be gathering the title and author of the article into an array and returning the array. This is where nokogiri comes to play. For us to identify the title and author of the article, we need to use the dev tool to find the element and its class or id. Anything we can use to identify those information.

For the article title, the css identifer I identified is h2.crayons-story__title a and for the author is div.crayons-story__top p. Each of the articles are wrapped by a parent div whose css class is .crayons-story__body.

Next, we import nokogiri and then use it to parse our html. Our updated code for scrape_data should be:

require 'nokogiri'

...

  def self.scrape_data(hashtag)
    url = "https://dev.to/t/#{hashtag}"
    puts 'getting data ....'
    html = HTTParty.get(url)
    response = Nokogiri::HTML(html)
    info = []
    response.css('.crayons-story__body').each do |section|
      title_and_author = section.search('h2.crayons-story__title a', 'div.crayons-story__top p')
      info.push({
          title: title_and_author[0].text.gsub(/\n/, '').strip.gsub(/\s+/, ' '), 
          author: title_and_author[1].text.gsub(/\n/, '').strip.gsub(/\s+/, ' ')
        })
    end
    puts info
    get_input
  end

First we parse out http call with nokogiri and save the response to the variable. Then we create an empty array to push our objects.

Then we use css method to find all the elements whose class matches .crayons-story__body. We then loop through a search for h2.crayons-story__title a and div.crayons-story__top p elements within it. The search returns an array. We apply the text method on each of the 2 search results as well as clean up the newlines and multiple spaces around and within the string, and push them into the array and then log the array to the console.

Go ahead a run the code. We should have an array of objects displayed in the console.

We should be done here but i think we still have one small issue to resolve. I would like us to take care of the case where there are no articles for a hashtag. We do this by simply getting the count of response to see if its empty. If it is, we tell the user, else we run through and return the result. We should have our updated code as:

...
  def self.scrape_data(hashtag)
    url = "https://dev.to/t/#{hashtag}"
    puts 'getting data ....'
    html = HTTParty.get(url)
    response = Nokogiri::HTML(html)
    info = []
    articles = response.css('.crayons-story__body')
    if articles.empty?
      puts "No article for for hashtag: #{hashtag}"
    else
      articles.each do |section|
        title_and_author = section.search('h2.crayons-story__title a', 'div.crayons-story__top p')
        info.push({
          title: title_and_author[0].text.gsub(/\n/, '').strip.gsub(/\s+/, ' '), 
          author: title_and_author[1].text.gsub(/\n/, '').strip.gsub(/\s+/, ' ')
        })
      end
    end
    puts info
    get_input
  end

When I try the hashtag java, i get the result below

For javascript, i get the results below

When we use a tag that doesn't exist on dev.to yet like height, we should get our little message:

Here is the link to a github gist that contains the code:
Github gist

Until next week..

Resources

nokogiri gem
httparty gem
Web Scraping with Ruby

HOWTO parse HTML with Ruby & Nokogiri

Explaining S.O.L.I.D principles with Ruby code examples

Mbonu Blessing — Sat, 26 Sep 2020 09:10:00 +0000

Hello everyone, hope you week went well?

This week I will be giving code examples in ruby with reference to S.O.L.I.D principles explained in this article, The S.O.L.I.D Principles in Pictures by Ugonna Thelma. This is the best I have seen so far that explains it with clear images.

So what I am going to do it kind of show just code examples of her illustration in Ruby.

S — Single Responsibility

# don't do this

class JackOfAllTrade
  def initialize(name)
    @name = name.capitalize
  end

  attr_reader :name

  def cook
   "On it. #{name} is cooking your favorite food"
  end

  def garden
    "#{name} is planting new flowers in the garden"
  end

  def paint
    "#{name} is painting the walls in the sitting room"
  end

  def drive
    "#{name} is driving you to the airport"
  end
end

ngozi = JackOfAllTrade.new('Ngozi')
puts ngozi.cook
puts ngozi.garden
puts ngozi.paint
puts ngozi.drive

# => On it. Ngozi is cooking your favorite food
# => Ngozi is planting new flowers in the garden
# => Ngozi is painting the walls in the sitting room
# => Ngozi is driving you to the airport

# do this instead

class Chef
  def initialize(name)
    @name = name.capitalize
  end

  attr_reader :name

  def cook
   "On it. #{name} is cooking your favorite food"
  end
end

class Gardener
  def initialize(name)
    @name = name.capitalize
  end

  attr_reader :name

  def garden
    "#{name} is planting new flowers in the garden"
  end
end

class Painter
  def initialize(name)
    @name = name.capitalize
  end

  attr_reader :name

  def paint
    "#{name} is painting the walls in the sitting room"
  end
end

class Driver
  def initialize(name)
    @name = name.capitalize
  end

  attr_reader :name

  def drive
    "#{name} is driving you to the airport"
  end
end

ngozi_the_chef = Chef.new('Ngozi')
ngozi_the_gardener = Gardener.new('Ngozi')
ngozi_the_painter = Painter.new('Ngozi')
ngozi_the_driver = Driver.new('Ngozi')

puts ngozi_the_chef.cook
puts ngozi_the_gardener.garden
puts ngozi_the_painter.paint
puts ngozi_the_driver.drive

# => On it. Ngozi is cooking your favorite food
# => Ngozi is planting new flowers in the garden
# => Ngozi is painting the walls in the sitting room
# => Ngozi is driving you to the airport

# these should throw an `undefined method` error because it doesn't perform that function

puts ngozi_the_chef.garden
# => undefined method `garden' for #<Chef:0x00007ff4918305d0 @name="Ngozi"> (NoMethodError)

# puts ngozi_the_gardener.paint
# puts ngozi_the_painter.drive
# puts ngozi_the_driver.cook

O — Open-Closed

# don't do this

class Chef
  def initialize(name)
    @name = name.capitalize
    @description = 'cooking a delicious meal'
  end

  def cook
    "#{@name} is #{@description}"
  end

  attr_writer :description
end

ngozi_the_chef = Chef.new('ngozi')
puts ngozi_the_chef.cook
ngozi_the_chef.description = 'painting the house'
puts ngozi_the_chef.cook

# => Ngozi is cooking a delicious meal
# => Ngozi is painting the house

# do this instead

class Chef
  def initialize(name)
    @name = name.capitalize
  end

  def cook
    "#{@name} is cooking a delicious meal"
  end
end

class ChefAndPainter < Chef
  def paint
    "#{@name} is painting the walls in the sitting room"
  end
end

ngozi_the_chef = Chef.new('ngozi')
puts ngozi_the_chef.cook
ngozi_the_chef_and_painter = ChefAndPainter.new('ngozi')
puts ngozi_the_chef_and_painter.cook
puts ngozi_the_chef_and_painter.paint

# => Ngozi is cooking a delicious meal
# => Ngozi is cooking a delicious meal
# => Ngozi is painting the walls in the sitting room

L — Liskov Substitution

# don't do this

class Server
  def initialize(name)
    @name = name.capitalize
  end

  attr_reader :name

  def serve_coffee
   "I am #{name}. Here is your coffee"
  end

  def serve_water
    "I am #{name}. Here is your water"
  end
end

class ServerChild < Server
  undef_method :serve_coffee
end

lade = Server.new('lade')
puts lade.serve_coffee
evans = ServerChild.new('evans')
puts evans.serve_water
puts evans.serve_coffee

# => I am Lade. Here is your coffee
# => I am Evans. Here is your water
# => Traceback (most recent call last):
# => test.rb:45:in `<main>': undefined method `serve_coffee' for #<ServerChild:0x00007fc4ee851848 @name="Evans">

# do this instead

class Server
  def initialize(name)
    @name = name.capitalize
  end

  attr_reader :name

  def serve_coffee
   "I am #{name}. Here is your coffee"
  end

  def serve_water
    "I am #{name}. Here is your water"
  end
end

class ServerChild < Server
  def serve_coffee
    "I am #{name}. Here is your cappucino"
  end
end

lade = Server.new('lade')
puts lade.serve_coffee
evans = ServerChild.new('evans')
puts evans.serve_water
puts evans.serve_coffee

# => I am Lade. Here is your coffee
# => I am Evans. Here is your water
# => I am Evans. Here is your cappucino

I — Interface Segregation

# don't do this

class Robot
  def initialize
    @no_of_arms = 2
    @no_of_antennas = 4
  end

  def spin_around
    'I can spin around'
  end

  def rotate_arm
    "I am rotating my #{@no_of_arms} arms"
  end

  def paint_house
    "Painting the house with my painting brush arm"
  end

  def search_for_stations
    "#{@no_of_antennas} antennas connecting to the closest radio station"
  end
end

class PainterRobot < Robot
end

class RadioRobot < Robot
end

# RadioRobot should not know anything about painting and PainterRobot shouldn't concern itself with searching for stations

puts RadioRobot.new.paint_house
puts PainterRobot.new.search_for_stations

# => Painting the house with my painting brush arm
# => 4 antennas connecting to the closest radio station

# do this

class Robot
  def initialize
    @no_of_arms = 2
  end

  def spin_around
    'I can spin around'
  end

  def rotate_arm
    "I am rotating my #{@no_of_arms} arms"
  end
end

class PainterRobot < Robot
  def paint_house
   "Painting the house with my painting brush arm"
  end
end

class RadioRobot < Robot
  def initialize
    @no_of_antennas = 4
  end

  def search_for_stations
    "#{@no_of_antennas} antennas connecting to the closest radio station"
  end
end

puts RadioRobot.new.search_for_stations
puts PainterRobot.new.paint_house

# => 4 antennas connecting to the closest radio station
# => Painting the house with my painting brush arm

D — Dependency Inversion

# don't do this

class Robot
  def initialize
    @no_of_arms = 2
  end

  def spin_around
    'I can spin around'
  end

  def rotate_arm
    "I am rotating my #{@no_of_arms} arms"
  end
end

class PainterRobot < Robot
  def paint_house
   "Painting the house with my painting brush arm"
  end
end

puts PainterRobot.new.paint_house

# we want it to be able to paint with whatever tool we give it
# => Painting the house with my painting brush arm

# do this 

class Robot
  def initialize
    @no_of_arms = 2
  end

  def spin_around
    'I can spin around'
  end

  def rotate_arm
    "I am rotating my #{@no_of_arms} arms"
  end
end

class PainterRobot < Robot
  def initialize(tool)
    @tool = tool
  end

  def paint_house
   "Painting the house with my #{@tool} arm"
  end
end

puts PainterRobot.new('painting brush').paint_house
puts PainterRobot.new('paint sprayer').paint_house
puts PainterRobot.new('paint roller').paint_house

# => Painting the house with my painting brush arm
# => Painting the house with my paint sprayer arm
# => Painting the house with my paint roller arm

That's it for this article. You can read through the main article to understand the concepts more.

Leave your comments and thoughts below. I would love to read them.

Until next week.

Simple chatroom with Rails 6 and ActionCable

Mbonu Blessing — Fri, 18 Sep 2020 17:18:11 +0000

Hello everyone,

This week, we will be building a simple chatroom with Rails 6 and ActionCable. We are going to learn how ActionCable works and how to use it in Rails. You should have a basic understanding of Ruby and Rails to be able to follow along. We won't be authenticating the user nor saving the messages to the database so its going to be like an anonymous chat room were none of the messages are persisted.

Introduction

According to the ruby guides:

Action Cable seamlessly integrates WebSockets with the rest of your Rails application. It's a full-stack offering that provides both a client-side JavaScript framework and a server-side Ruby framework.

WebSockets provide a persistent connection between a client and server that both parties can use to start sending data at any time. I will include links to read more on WebSockets in the Resources section. Below are some points and explanations we need to note from the rubyguide.

A consumer is a client of a WebSocket Connection
A consumer can be subscribed to multiple cable channel
When a consumer is subscribed to a channel, they act as a subscriber
The connection between the subscriber and the channel is called a subscription
Each channel can then again be streaming zero or more broadcastings
A broadcasting is a pubsub link where anything transmitted by the broadcaster is sent directly to the channel subscribers who are streaming that named broadcasting

In summary, a client initiates a WebSocket connection. This connection is like a dedication line through which you can send and receive data between the client and the server. Through ActionCable, you subscribe to a channel and you are now called a subscriber. Other people also create a connection and subscribe to the channel. When a subscriber sends a message, it is then broadcasted to everyone subscribed to that channel.

Setting up the app

In the console, let's run the rails command to create a new app with postgresql database:

$ rails new chat_room --database=postgresql

Cd into the folder and create the database

$ cd chat_room
$ rails db:create

Next, let's design the page. I don't want to use a CSS library so we can focus on what's important.

Let's create a home controller with an index action.

$ rails g controller Home index

In the route file, let's change the get request to be the root path:

# config/routes.rb

root 'home#index'

Add the following code to your home/index.html.erb file

<div id="main">
  <h2>Chat room</h2>
  <div>
    <div id="messages">
      <p class="received">Hello</p>
      <p class="sent">Hi</p>
      <p class="received">How are you doing?</p>
      <p class="sent">I am doing alright</p>
    </div>
    <form id="send_message">
      <input type="text" id="message" name="message">
      <button>Send</button>
    </form>
  </div>
</div>

Some CSS for application.css

body {
  padding: 0;
  margin: 0;
}

h2 {
  margin: 0;
}

CSS for home.scss file

#main {
  height: 100vh;
  background-color: bisque;
  overflow: auto;

  h2 {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
  }

  >div {
    height: 90vh;
    background-color: black;
    width: 80%;
    margin: auto;
    border-radius: 5px;
    overflow: auto;
    position: relative;

    div#messages {
      height: 90%;
      width: 95%;
      color: white;
      margin: 14px auto;
      overflow: auto;
      display: flex;
      flex-direction: column;

      p {
        display: inline-block;
        padding: 10px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        margin-bottom: 5px;
        margin-top: 5px;
        max-width: 70%;
        width: max-content;

        &.received {
          background-color: chocolate;
          border-bottom-right-radius: 10px;
        }

        &.sent {
          border-bottom-left-radius: 10px;
          background-color: darkred;
          align-self: flex-end;
        }
      }
    }

    form#send_message {
      width: 95%;
      margin: auto;

      input {
        height: 30px;
        width: 90%;
        border-radius: 10px;
        border: 0;
      }

      button {
        height: 35px;
        width: 8.8%;
        border-radius: 20px;
        border: 0;
        background-color: tomato;
        color: white;
      }
    }
  }
}

And we should have this not-so-beatiful UI below:

Implementing room channel

Let's add jquery to the app and set that up

$ yarn add jquery

Update your webpack config to include jquery in its environment

// config/weboack/environment.js

const webpack = require('webpack')
environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery'
  })
)

Require jquery to your application.js file

// app/javascript/packs/application.js

require("jquery")

Next, we generate our channel

$ rails g channel chat_room

This should generate some files including chat_room_channel.rb and chat_room_channel.js. These are the 2 files we will be making our changes to.

Just to test that our channels are setup properly, let's add some minor code to our files:

# app/channels/chat_room_channel
def subscribed
  stream_from "chat_room_channel"
end

// app/javascript/channels/chat_room_channel.js

connected() {
    // Called when the subscription is ready for use on the server
    console.log("Connected to the chat room!");
  },

Starting up your server and visiting localhost:3000, you should see our message logged to the console.

Let's chat a little.
Update your chat_room_channel.js to include a new speak method that broadcasts and update to the received method that displays our message. We also need to export the ChatRoomChannel so we can access the speak method in other javascript files.

// app/javascript/channels/chat_room_channel.js
import consumer from "./consumer"

const chatRoomChannel = consumer.subscriptions.create("ChatRoomChannel", {
  connected() {
    // Called when the subscription is ready for use on the server
    console.log("Connected to the chat room!");
  },

  disconnected() {
    // Called when the subscription has been terminated by the server
  },

  received(data) {
    $('#messages').append('<p class="received"> ' + data.message + '</p>')
  },

  speak(message) {
    this.perform('speak', { message: message })
  }
});

export default chatRoomChannel;

In our application.js, we import the channel and add an event listener to the form. When the form is submitted, it gets the value of the input field and passes it to the speak method. The event listener also removes the content of the input field.

// app/javascript/packs/application.js

// other code
import chatRoomChannel from "../channels/chat_room_channel";

$(document).on('turbolinks:load', function () {
  $("form").on('submit', function(e){
    e.preventDefault();
    let message = $('#message').val();
    if (message.length > 0) {
      chatRoomChannel.speak(message);
      $('#message').val('')
    }
  });
})

Reload your page, and you should be seeing your messages;

But we have a little problem. Every message is showing up on the left as received even for the message sender. We need to be able to differentiate between the sender and the receiver. Since we are not using authentication or saving to the database, we need to be able to identify each person somehow.

I have a simple solution. We need to add a modal for everyone to add a name that will be saved to sessionStorage. I am using sessionStorage because i want the session to be cleared out once the user closes the tab and localStorage won't do that. We will also announce the user when they join or leave the channel.

Let's update our index.html.erb file to include the modal and remove the static messages we added earlier.

<div id="main">
  <h2>Chat room</h2>
  <div id="chat_body">
    <div id="messages">
    </div>
    <form id="send_message">
      <input type="text" id="message" name="message">
      <button>Send</button>
    </form>
  </div>
  <div id="modal">
    <div>
      <h4>Add a name</h4>
      <form id="set_name">
        <input type="text" id="add_name" name="add_name">
        <button>Submit</button>
      </form>
    </div>
  </div>
</div>

Let's also update the chat_room_channel.js file to announce when a user joins or leaves a room. We are also going to update the received method so we can format how each message will be displayed.

import consumer from "./consumer"

const chatRoomChannel = consumer.subscriptions.create("ChatRoomChannel", {
  connected() {
    console.log("Connected to the chat room!");
    $("#modal").css('display', 'flex');
  },

  disconnected() {

  },

  received(data) {
    if (data.message) {
      let current_name = sessionStorage.getItem('chat_room_name')
      let msg_class = data.sent_by === current_name ? "sent" : "received"
      $('#messages').append(`<p class='${msg_class}'>` + data.message + '</p>')
    } else if(data.chat_room_name) {
      let name = data.chat_room_name;
      let announcement_type = data.type == 'join' ? 'joined' : 'left';
      $('#messages').append(`<p class="announce"><em>${name}</em> ${announcement_type} the room</p>`)
    }
  },

  speak(message) {
    let name = sessionStorage.getItem('chat_room_name')
    this.perform('speak', { message, name })
  },

  announce(content) {
    this.perform('announce', { name: content.name, type: content.type })
  }
});

export default chatRoomChannel;

Next is the updated css file

// Place all the styles related to the Home controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: https://sass-lang.com/
#main {
  height: 100vh;
  background-color: bisque;
  overflow: auto;

  h2 {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
  }

  >div#chat_body {
    height: 90vh;
    background-color: black;
    width: 80%;
    margin: auto;
    border-radius: 5px;
    overflow: auto;
    position: relative;

    div#messages {
      height: 90%;
      width: 95%;
      color: white;
      margin: 14px auto;
      overflow: auto;
      display: flex;
      flex-direction: column;

      p {
        display: inline-block;
        padding: 10px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        margin-bottom: 5px;
        margin-top: 5px;
        max-width: 70%;
        width: max-content;

        &.received {
          background-color: chocolate;
          border-bottom-right-radius: 10px;
        }

        &.sent {
          border-bottom-left-radius: 10px;
          background-color: darkred;
          align-self: flex-end;
        }

        &.announce {
          align-self: center;
          font-style: italic;
          color: cyan;

          em {
            font-weight: 700;
            color: mediumorchid;
          }
        }
      }
    }

    form#send_message {
      width: 95%;
      margin: auto;

      input {
        height: 30px;
        width: 90%;
        border-radius: 10px;
        border: 0;
      }

      button {
        height: 35px;
        width: 8.8%;
        border-radius: 20px;
        border: 0;
        background-color: tomato;
        color: white;
      }
    }

  }
  div#modal {
    height: 100vh;
    position: absolute;
    top: 0;
    background-color: #000000bf;
    width: 100%;
    z-index: 2;
    display: flex;
    display: none;

    >div {
      width: 300px;
      background: white;
      margin: auto;
      padding: 30px;
      text-align: center;
      height: 150px;
      border-radius: 10px;

      input {
        height: 30px;
        border-radius: 10px;
        border: 2px dotted rebeccapurple;
        width: 100%;
        margin-bottom: 10px;
      }

      button {
        height: 35px;
        border-radius: 20px;
        border: 0;
        background-color: #673AB7;
        color: white;
        width: 80px;
      }
    }
  }
}

We also need to update our application.js to let us know when someone leaves and when someone joins.

import chatRoomChannel from "../channels/chat_room_channel";

$(document).on('turbolinks:load', function () {
  $("form#set_name").on('submit', function(e){
    e.preventDefault();
    let name = $('#add_name').val();
    sessionStorage.setItem('chat_room_name', name)
    chatRoomChannel.announce({ name, type: 'join'})
    $("#modal").css('display', 'none');
  });

  $("form#send_message").on('submit', function(e){
    e.preventDefault();
    let message = $('#message').val();
    if (message.length > 0) {
      chatRoomChannel.speak(message);
      $('#message').val('')
    }
  });

  $(window).on('beforeunload', function() {
    let name = sessionStorage.getItem('chat_room_name')
    chatRoomChannel.announce({ name, type: 'leave'})
  });
})

Finally, our chat_room_channel.rb file needs to be updated to include the announce method.

# app/channels/chat_room_channel.rb

class ChatRoomChannel < ApplicationCable::Channel
  def subscribed
    stream_from "chat_room_channel"
  end

  def unsubscribed
    # Any cleanup needed when channel is unsubscribed
  end

  def speak(data)
    ActionCable.server.broadcast "chat_room_channel", message: data["message"], sent_by: data["name"]
  end

  def announce(data)
    ActionCable.server.broadcast "chat_room_channel", chat_room_name: data["name"], type: data["type"]
  end
end

Modal to add your name

You are announced when you join the room

Simple back and forth between 2 subscribers. And the user is announced when they leave the channel

And this brings us to the end of this tutorial.

Let me know if you have any questions in the comment section.

Until next week.

Link to repo https://github.com/Nkemjiks/chat_room

Resources

Action Cable Overview - RubyGuide
An Introduction to WebSockets - Treehouse
Creating a Chat Using Rails' Action Cable

How to add and use Subdomains in your rails app

Mbonu Blessing — Fri, 11 Sep 2020 21:17:39 +0000

Hello everyone,

This week, I will be showing you how to write subdomains in your routes.rb file.

I was working on an app recently and was thinking of the best way to use the same server to serve different type of users and I discovered how some apps do this.

They use subdomains.

The main domain will be for marketing purposes or for the landing page and other necessary information while subdomains will be created for the different categories of users or products you might want to use.

Let's use google as an example. google.com points you to the search engine.

For the mail, you need to use the mail.google.com
For docs, slides, sheets or form, you have docs.google.com
For drive, you have drive.google.com etc

For this post, we will build a simple route file with 2 subdomain: admin and platform. Admin subdomain will serve admin users while platform subdomain will be used by the apps main users.

To define a subdomain, you use constraints.

# routes.rb

root "home#index"

constraints subdomain: "admin" do
 get "/" => "dashboard#index"
end

constraints subdomain: "platform" do
 get "/" => "platform#index"
end

From the above, we define a root path on the domain and defined two root paths for our different subdomain.

To reference this new path for a redirect or link_to, you just simple need to pass the subdomain to root_url and rails takes it up from there. Using root_path won't work here because it returns a relative path and not an actually path where the subdomain can be included.

# redirects
redirect_to root_url(subdomain: "admin")

redirect_to root_url(subdomain: "platform")

# link_to
link_to 'Dashboard', root_url(subdomain: "admin")

link_to 'Home', root_url(subdomain: "platform")

That's it for this week. Leave questions and comments below.

Until next week.

I need help finding a platform that focuses on unblocking other developers

Mbonu Blessing — Mon, 31 Aug 2020 15:29:38 +0000

Hello everyone,

I have been looking for a way to contribute to the tech community for a while. I have tried mentoring and open-source contribution but that hasn't really worked out for me.

But I know that one thing i enjoy doing is helping people when they are stuck or have a problem. I have decided to focus on that instead trying to do other things I am not really good at.

Does anyone know any community or platform where they mainly focus on debugging or unblocking other developers. I am mainly looking for somewhere for beginners or junior developers as I am still young in tech.

I am a full-stack developer with experience in React and Ruby on Rails.

I look forward to your suggestions.

Two ways to convert a string to an array in Ruby

Mbonu Blessing — Fri, 28 Aug 2020 20:56:22 +0000

Hello everyone.
This week, I will be sharing 2 ways I have learnt how to convert a string to an array of characters. A little backstory, I was solving an algorithm on Codewars and it required me converting the string to an array. I solved it with the method I know and after submitting, I scrolled through other answers to learn how others did theirs and possible pick up one or two new knowledge.

The two methods are chars and split. They both return an array of characters but one is better than the other.

Using Chars

Let's use the string 'programming'

word = 'programming'
word.chars

# => ["p", "r", "o", "g", "r", "a", "m", "m", "i", "n", "g"]

On a sentence, we showcase how to do this with the example below

sentence = 'Ruby is great'
sentence.chars

# => ["R", "u", "b", "y", " ", "i", "s", " ", "g", "r", "e", "a", "t"]

As you can see, it returns all the characters even the `space`

Using Split

To use split, we need to pass a parameter that tells it how to split the string.

word = 'programming'
word.split('') # '' tells it to return each characters

# => ["p", "r", "o", "g", "r", "a", "m", "m", "i", "n", "g"]

For a sentence, we might want to only return each words in it.

sentence = 'Ruby is great'
sentence.split(' ') # tells it to split anywhere there is a space

# => ["Ruby", "is", "great"]

We can also split at a character.

'kolloioll'.split('o')
# => ["k", "ll", "i", "ll"]

You can also pass regex to the split method

# split at every `fullstop` before a `comma`
"sha.,ger.,ffd.,uio.".split(/.(,)/)

# => => ["sha", ",", "ger", ",", "ffd", ",", "uio."]

Difference between them

Given that split works on string using regex, it fails on strings that contains invalid characters.

"love\x80light".chars

#=> ["l", "o", "v", "e", "\x80", "l", "i", "g", "h", "t"]

"love\x80light".split('')

#=> ArgumentError (invalid byte sequence in UTF-8)

Another difference is that unlike split where you can specify where to split from, you can't do that for chars. You can only use it when you need to return all the characters in a string as an array

Resources

Stackoverflow answer to difference between char and split
API dock - String split

Let me know if you have an comments below.

Until next week

Implementing Facebook authentication with Devise for your Rails 6 app

Mbonu Blessing — Fri, 21 Aug 2020 19:19:55 +0000

Hello everyone,

This week, I will be writing about how to setup Facebook authentication for your Rails app.

Prerequisites

An app using Rails 6 with devise setup for authentication
A working knowledge of creating a new Rails app
A working knowledge of devise for authentication
An active Facebook account

Facebook Authentication

To implement Facebook auth, we need to create an app on Facebook that will generate an APP_ID and APP_SECRET for setting up devise omniauth later.

Create Facebook app

Go to https://developers.facebook.com/
Click on My Apps in the navbar
Click on Add a new App
On the modal that pops up, select the For Everything Else option.
Next, add your App Display Name and click the Create App Id button
Complete the security check and this should redirect you to the app
On the sidebar, click on Setting and then click on Basic. You should be able to see your APP_ID and APP_SECRET. Copy and save for later.
In the App domains, add localhost. You can also add your add icon if you have one.
Scroll down to the end of the page and click on the Add Platform
On the modal that pops up, select Website
Add http://localhost
Save your changes

Setup Facebook Auth in devise

In this section, we will be setting up facebook auth in our rails app.

Add the omniauth-facebook gem to your gemfile

gem 'omniauth-facebook'

Run bundle install
Next we create a migration to add provider and uid to the user model. This stores the provider the user uses to register whether its facebook or google.

$ rails g migration AddOmniauthToUsers provider:string uid:string

Run rake db:migrate
Next, we need to update the devise initializer file to include the APP_ID and APP_SECRET we saved for later

# config/initializers/devise.rb
config.omniauth :facebook, "APP_ID", "APP_SECRET"

Note: If you chose to use the credentials to save your environment variables. You can use this command to edit it in your code editor. Run this code in your terminal. Change code part to your code editor if you don't use vscode.

$ `EDITOR="code --wait" bin/rails credentials:edit`

In the decrypted credential file, add the app_id and app_secret

facebook:
  APP_ID: '<facebook_app_id>'
  APP_SECRET: '<facebook_app_secret>'

So your initializer file update will be

config.omniauth :facebook, Rails.application.credentials.facebook[:APP_ID], Rails.application.credentials.facebook[:APP_SECRET], token_params: { parse: :json }

Next we need to make the user model omniauthable. Add this to the user model

# app/models/user.rb
devise :omniauthable, omniauth_providers: %i[facebook]

Next, we create an omniauth controller in a user folder to respond to facebook authentication.

# app/controllers/users/omniauth_callbacks_controller.rb

class Users::OmniauthCallbacksController < Devise::OmniauthCallbacksController
  def facebook
    @user = User.from_omniauth(request.env["omniauth.auth"])

    if @user.persisted?
      sign_in_and_redirect @user, event: :authentication #this will throw if @user is not activated
      set_flash_message(:notice, :success, kind: "Facebook") if is_navigational_format?
    else
      session["devise.facebook_data"] = request.env["omniauth.auth"].except(:extra) # Removing extra as it can overflow some session stores
      redirect_to new_user_registration_url
    end
  end

  def failure
    redirect_to root_path
  end
end

Next, we go back to the user model to add the from_omniauth self method. This method finds or creates a new user when they register. The name_split part of for those that store the first_name and last_name of their users.

# app/models/user.rb
def self.from_omniauth(auth)
  name_split = auth.info.name.split(" ")
  user = User.where(email: auth.info.email).first
  user ||= User.create!(provider: auth.provider, uid: auth.uid, last_name: name_split[0], first_name: name_split[1], email: auth.info.email, password: Devise.friendly_token[0, 20])
    user
end

Next, we update the routes file for include the new controller we just added

# config/routes.rb
devise_for :users, controllers: { omniauth_callbacks: 'users/omniauth_callbacks' }

Finally, we add the facebook button to our view using a facebook path provided by devise. You can use this same path for both registration and login. You just need to update the button description.

<%= link_to "Register with Facebook", user_facebook_omniauth_authorize_path %>

And that should add facebook auth to your app.

Other Authentication

The process is quite similar for google authentication. We need to create a project for the app and then create the credentials for auth. I am going to attach a link to create credentials for google auth and the omniauth-google gem.

Create credentials on google
Omniauth Google gem
Omniauth twitter gem
Twitter guide for creating an app

Let me know what you think and what to write about in the comment section.

Until next week

How best do I structure my User database?

Mbonu Blessing — Thu, 20 Aug 2020 17:58:31 +0000

Hi everyone,

I need help designing my user related database structure. I am building an app with Rails to allow house owners manage their various properties and I want to have different categories of users. There are the admins: they get the dashboard and do analytics etc. Then the main app users are owners themselves. I want the owner to be able to add a tenant to a flat and also add a caretaker to manage a building or more. Do you think I should use the same user table for these 3 with roles?

Any advice you give will be very helpful.

Thank you

Automatic like when you comment on an article

Mbonu Blessing — Fri, 14 Aug 2020 21:24:56 +0000

Hi,

Has anyone noticed that when you add a comment to an article, it has a like immediately? I am wondering if this was intentionally and would like to know how this helps the user experience if it was.

I wanted to report it as a bug but I can't decide which category it falls under.

Beginners guide to using array select method

Mbonu Blessing — Thu, 13 Aug 2020 15:22:35 +0000

Hello everyone,

This week, we will looking into an array method called select and how to use it.

The select method is one of the class method of the Array class that returns a new array of values that is true for the block that is passed to it.

Given an example array of numbers;

example_array1 = [1, 2, 3, 4, 5, 6]

To select all even numbers;

 example_array1.select { |item| item.even? }

# -> [2, 4, 6]

To select all odd numbers;

 example_array1.select { |item| item.odd? }

# -> [1, 3, 5]

Given another example array of strings

example_array2 = ['dog', 'chicken', 'cow', 'goat']

To select all string whose count is greater than or equal to 4;

 example_array2.select { |item| item.length >= 4 }

# -> ["chicken", "goat"]

To select all string whose count is equal to 3;

 example_array2.select { |item| item.length = 3 }

# -> ["dog", "cow"]

Given another example array of strings and numbers

example_array3 = ['dog', 4, 'chicken', 8,  'cow', 10,  'goat']

To select all the strings in the array;

 example_array3.select { |item| item.class == String }

# -> ["dog", "chicken", "cow", "goat"]

To select all the numbers in the array;

 example_array3.select { |item| item.class == Integer }

# -> [4, 8, 10]

Please feel free to add other ways you have used the select method.

Until next week.

How to render to different DOM structures in Rails based on view port

Mbonu Blessing — Fri, 07 Aug 2020 12:19:15 +0000

Hi,

I have a webpage that I want to render two different designs on based on if you are on a mobile device or laptop. I can easily use CSS to display or hide the classes but my main problem is that I have some datatables I am adding to the DOM but I need to target by ID. Here is what i have in my application.html.slim file

 body
    .ui.tab_desktop
      #left-column
        = render partial: 'layouts/sidebar'
      #right-column
        = render partial: 'layouts/header'
        = render 'layouts/flash'
        div id="context-#{controller_name}"
          = yield
        = render partial: 'layouts/footer'
    .ui.mobile
      = render partial: 'layouts/mobile_header'
      = render partial: 'layouts/mobile_sidebar'
      = render 'layouts/flash'
      div id="context-#{controller_name}"
        = yield
      = render partial: 'layouts/mobile_footer'

Since we know that ID is supposed to be unique, the tables will only show on the desktop. Is there are better way to only render this part below once for both the mobile and desktop view?

div id="context-#{controller_name}"
        = yield