Forem: Yaroslav Shmarov

TailwindCSS on Rails: Minimize Collapsible Sidebar

Yaroslav Shmarov — Sun, 30 Jun 2024 00:00:00 +0000

A ruby friend named Daniel emailed me a request for this feature:

Here’s my solution, Daniel:

✅ Collapsible sidebar
✅ Save state
✅ Elegant solution

First, create a stimulus controller to collapse sidebar. Write the current state to cookies

// app/javascript/controllers/sidebar_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["sidebarContainer"];

  toggle(e) {
    e.preventDefault();
    this.switchCurrentState();
  }

  switchCurrentState() {
    const newState = this.element.dataset.expanded === "true" ? "false" : "true";
    this.element.dataset.expanded = newState;
    document.cookie = `sidebar_expanded=${newState}`;
    // document.cookie = `sidebar_expanded=${newState}; path=/`;
  }
}

The toggle can be triggered by a button like this:

<%= button_to "Toggle", nil, data: { action: "click->sidebar#toggle" }

Toggling the button will update cookies[:sidebar_expanded].

This is accessible in CSS via [[data-expanded=false]_&]:. You can use it as a condition!

Here’s a sidebar that hides text like "Home" & "Buttons" when data-expanded=false:

<!-- app/views/layouts/_sidebar.html.erb -->
<nav class="bg-slate-400 hidden md:flex flex-col text-center p-4 justify-between sticky top-20 h-[calc(100vh-80px)]" data-controller="sidebar" data-expanded="<%= (cookies[:sidebar_expanded] || true) %>">
  <div class="flex flex-col text-left">
    <%= link_to root_path do %>
      <span>🏠</span>
      <span class="[[data-expanded=false]_&]:hidden">Home</span>
    <% end %>
    <%= link_to buttons_path do %>
      <span>🔘</span>
      <span class="[[data-expanded=false]_&]:hidden">Buttons</span>
    <% end %>
  </div>
  <div class="text-left">
    <%= button_to nil, data: { action: "click->sidebar#toggle" } do %>
      <span class="[[data-expanded=true]_&]:hidden">➡️</span>
      <span class="[[data-expanded=false]_&]:hidden">⬅️</span>
      <span class="[[data-expanded=false]_&]:hidden">Toggle</span>
    <% end %>
  </div>
</nav>

🤠 Voila!

Embedded Stripe Checkout

Yaroslav Shmarov — Wed, 24 Apr 2024 00:00:00 +0000

😖 I really dislike Stripe Elements: you have to build and style the checkout form yourself.

🤩 Instead, stripe-hosted full screen checkout is a much better approach where you outsource all the payment logic to Stripe. It looks great:

Heres a Github Repo where I have it implemented.

Stripe Hosted Checkout on SupeRails:

🥰🥰 But now you can use Embedded Stripe Checkout inside your app and keep your branding!

Here’s how you can implement Embedded Stripe Checkout:

Create a pricing page that redirects to the checkout page

# config/routes.rb
  get "pricing", to: "stripe/checkout#pricing"
  get "checkout/new", to: "stripe/checkout#checkout", as: "new_checkout"

Stripe Embedded Checkout API has ui_mode: :embedded and return_url params that you should set:

# app/controllers/stripe/checkout_controller.rb
  # GET
  def pricing
    lookup_key = %w[month year lifetime]
    @prices = Stripe::Price.list(lookup_keys: lookup_key, active: true,
                                 expand: ['data.product']).data.sort_by(&:unit_amount)
  end

  # GET
  def checkout
    price = Stripe::Price.retrieve(params[:price_id])
    @session = Stripe::Checkout::Session.create({
                                                  customer: current_user.stripe_customer_id,
                                                  # allow_promotion_codes: true,
                                                  # automatic_tax: {enabled: @plan.taxed?},
                                                  # consent_collection: {terms_of_service: :required},
                                                  # customer_update: {address: :auto},
                                                  # payment_method_collection: :if_required,
                                                  line_items: [{
                                                    price:,
                                                    quantity: 1
                                                  }],
                                                  mode: mode(price),
                                                  return_url: user_url(current_user),
                                                  ui_mode: :embedded
                                                })
  end

  private

  MODES = {
    'recurring' => 'subscription',
    'one_time' => 'payment',
    'setup' => 'setup'
  }.freeze

  def mode(price)
    MODES[price.type]
  end

Display links to checkout for each different price:

# app/views/stripe/checkout/pricing.html.erb
<% @prices.each do |price| %>
  <%= link_to "Checkout" new_checkout_path(price_id: price.id) %>
<% end %>

This will redirect to the checkout page. You will need some JS to embed the Stripe Checkout.

# app/views/stripe/checkout/checkout.html.erb
<%= javascript_include_tag "https://js.stripe.com/v3/" %>

<%= tag.div data: {
  controller: "stripe--embedded-checkout",
  stripe__embedded_checkout_public_key_value: Rails.application.credentials.dig(Rails.env, :stripe, :public),
  stripe__embedded_checkout_client_secret_value: @session.client_secret
} %>


rails g stimulus stripe/embedded_checkout


// app/javascript/controllers/stripe/embedded_checkout_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static values = {
    publicKey: String,
    clientSecret: String,
  }

  async connect() {
    this.stripe = Stripe(this.publicKeyValue)
    this.checkout = await this.stripe.initEmbeddedCheckout({clientSecret: this.clientSecretValue})
    this.checkout.mount(this.element)
  }

  disconnect() {
    this.checkout.destroy()
  }
}

That’s it! Now you have the latest, coolest Stripe Checkout!

Don’t forget to also add:

Webhooks to create customers, handle successful and failed payments, subscription state changes
Billing portal for user to manage plan, change payment methods, see invoice history

See examples here: github.com/corsego/rails-7-stripe-subscriptions

Manage active sessions in Rails 2024

Yaroslav Shmarov — Sun, 24 Mar 2024 00:00:00 +0000

Ok, so sometimes to enchance security of your application you will want to allow users to see all the devices/browsers they are logged in with. You would also provided a button to sign out of a device/browser.

Here’s how you can do it:

1. Store current login (device/browser) info and ensure the current device/browser has not been logged out.

rails g resource Login user:references device_id ip_address user_agent


# app/models/user.rb
class User < ApplicationRecord
  has_many :logins, dependent: :destroy
end


# app/models/login.rb
class Login < ApplicationRecord
  belongs_to :user
end


# app/controllers/application_controller.rb
  include Users::LoginActivity

  # ensure this device has not been logged out
  before_action :validate_login, if: :current_user

  # this works with Devise
  # when logging a user in, register the current device
  def after_sign_in_path_for(resource_or_scope)
    set_login # this!
    root_path
  end


# app/controllers/concerns/users/login_activity.rb
module Users
  module LoginActivity
    extend ActiveSupport::Concern

    # included do
    # helper_method :set_login
    # end

    def set_login
      current_login = current_user.logins.where(device_id: device_id).first_or_create(ip_address: request.remote_ip, user_agent: request.user_agent, device_id: device_id)
      # current_login.touch
      # current_login.save
      session[:device_id] = device_id
      # cookies[:device_id] = device_id
    end

    def validate_login
      if Rails.env.test?
        # mock
        current_login = current_user.logins.create(device_id: "test_device_id")
      else
        current_login ||= current_user.logins.find_by(device_id: session[:device_id])
      end

      if current_login.nil?
        sign_out current_user

        flash[:notice] = 'Device not recognized'
        redirect_to new_user_session_path
      end
    end

    private

    def device_id
      Digest::SHA256.hexdigest("#{request.remote_ip}_#{request.user_agent}")
      # SecureRandom.hex
    end

  end
end

2. Views to see all logins of a user, log out of a select device/browser

# config/routes.rb
  namespace :users do
    resources :logins, only: %i[index destroy]
  end


# app/controllers/users/logins_controller.rb
class Users::LoginsController < Accounts::BaseController
  def index
    @logins = current_user.logins
  end

  def destroy
    @login = current_user.logins.find(params[:id])
    @login.destroy

    flash[:notice] = "You have been logged out of this device."
    redirect_to edit_user_registration_path
  end
end


# app/views/logins/index.html.erb
<% @logins.order(updated_at: :desc).each do |login| %>
  <div>
    <i class="<%= device_type_icon(login.user_agent) %>"></i>

    <%= device_description(login.user_agent) %>

    Last login at:
    <%= login.updated_at %>

    IP address:
    <%= login.ip_address %>

    <% if login.device_id == session[:device_id] %>
      current session
    <% else %>
      <%= link_to 'Disconnect', users_login_path(login), method: :delete %>
    <% end %>

  </div>
<% end %>

ℹ️ gem “device_detector” will help you decript user_agent info and make it user-friendly.

module LoginsHelper
  def device_description(user_agent)
    device = DeviceDetector.new(user_agent)
    "#{device.name} / #{device.os_name}"
  end

  def device_type_icon(user_agent)
    device = DeviceDetector.new(user_agent)

    case device.device_type
    when "tablet"
      "fa fa-tablet"
    when "smartphone"
      "fa fa-phone"
    when "desktop"
      "fa fa-desktop"
    end
  end
end

That’s it! 🤗

Inspired by:

Turbo 8 Prefetch (InstantClick)

Yaroslav Shmarov — Tue, 19 Mar 2024 00:00:00 +0000

Inspired by instaclick.io, instaclick has been added as a default behaviour in Turbo 8.

InstantClick makes an assumption about potential user behaviour: now whenever you hover on a link, it will fire a GET request to retrieve that page. So when you actually click on the link, it will load faster.

InstantClick/prefetch example:

Such a request will also have a header X-Sec-Purpose: prefetch

Here are a few tips based on the docs

These links will never be prefetched:

# current page
link_to "Comments", request.path
# anchor tags (obviously on current page)
link_to "Comments", "#comments"
# non-GET requests
link_to "Upvote", upvote_post_path(@post), data: {turbo_method: :post}
# other websites
link_to "Other website", "https://superails.com"

Disable prefetch:

link_to "Admin", admin_path, data: {turbo_prefetch: false}
link_to "Admin", admin_path, data: {turbo: false}

# disable for a block
<div data-turbo="false">
  link_to "Admin", admin_path
</div>

# disable globally in application.html.erb
<meta name="turbo-prefetch" content="true" />

Caution:

wrong assumptions can lead to more server load
you would not want to count these prefetch requests as page visits
whenever you re-hover on a link, it will trigger yet another request

Generate PDF with Ferrum (headless Chrome API)

Yaroslav Shmarov — Sat, 27 Jan 2024 00:00:00 +0000

Thanks to URLBOX for sponsoring this blogpost! Convert URL to PNG/PDF with UrlBox screenshot API. Urlbox also helps to block Ads & Popups, Bypass Captchas, Auto-Accept Cookies.

Usually I would use an HTML-to-PDF library to to generate and display a PDF.

An absolutely different , alternative way to view or download a page as PDF would be via a headless browser API.

Gem Ferrum lets you open a headless chrome browser and perform different actions (click link, take screenshot, open as PDF, etc.)

Why not use Ferrum to open or save a file as PDF?

Here’s how it could work:

Example of an HTML page ⤵️

Clicking the “View as PDF” link would open a link as PDF ⤵️

Install and use Gem Ferrum

Install the gem:

# Gemfile
gem "ferrum"

Add a route:

# config/routes.rb
get 'home/index'

Add an HTML page.

You can add a link_to render the page as PDF.

Notice I add a class .no-print, so that the link does not get displayed in print media type.

<!-- app/views/home/index.html.erb -->
<h1>Home#index</h1>
<p>Find me in app/views/home/index.html.erb</p>
<div class="no-print">
  <%= link_to "View as PDF", home_index_path(format: :pdf) %>
</div>

Add .no-print CSS class to elements that should not be printable:

/* app/assets/stylesheets/application.css */
@media print {
  .no-print {
    display: none !important;
  }
}

/* other css classes you might want to add */
@media print {
  body {
    -webkit-print-color-adjust: exact;
    background: #fff;
    background-color: #fff;
    float: none;
    display: block;
  }
  .no_margin {
    padding-left: 0px !important;
  }
  .no-print {
    display: none !important;
  }
  .printer-preview-content,
  .printer-preview-content_landscape {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .cover_div {
    display: table;
  }
}

Finally, use Ferrum to navigate to an internal or external URL and display it as PDF:

# app/controllers/home_controller.rb
class HomeController < ApplicationController
  def index
    respond_to do |format|
      format.html
      format.pdf do
        handle_pdf_format
      end
    end
  end

  private

  def handle_pdf_format
    filename = controller_name
    tmp = Tempfile.new("pdf-chrome-#{filename}")
    browser = Ferrum::Browser.new
    # browser.go_to("http://localhost:3000/home/index")
    browser.go_to(home_index_url)
    # browser.go_to("https://google.com")
    # click_on_text "Accept all"
    # browser.at_css(".QS5gu.sy4vM").click
    sleep(0.3)
    browser.pdf(
      path: tmp.path,
      format: "A4".to_sym,
      landscape: false,
      # margin: {top: 36, right: 36, bottom: 36, left: 36},
      # preferCSSPageSize: true,
      # printBackground: true
    )
    browser.quit
    pdf_data = File.read(tmp.path)
    pdf_filename = "#{filename}.pdf"
    send_data(pdf_data,
              filename: pdf_filename,
              type: "application/pdf",
              disposition: "inline")
  ensure
    tmp.close
    tmp.unlink
  end
end

It works well for publicly accessible URLs, however it is not so straightforwar for links that require current_user authentication. I’ve asked a question here https://github.com/rubycdp/ferrum/issues/423 and am hoping for an easy enough solution 🤠

Send SMS with Twilio in Rails

Yaroslav Shmarov — Sun, 26 Feb 2023 00:26:55 +0000

Over the years SMS has become a much less important way of communication , but it can still be useful for receiving important system notifications.

Common reasons to be using SMS in 2023:

Identity verification (confirm phone number via SMS)
Important appointment reminders (doctors appointment)
2 Factor Authentication via SMS (my grandma does not use 2FA apps)

For example, when I was creating a chatgpt account, it required a confirmed phone number. Most likely to decrease the amount of bots:

Twilio offers a very easy way to send SMS using Rails.

Access Twilio API keys

After creating an account, navigate to https://console.twilio.com

Save twilio credentials in your apps credentials.yml:

twilio:
  account_sid: AC714f90d7750d7cf2
  auth_token: c8671c5e8233b0
  from_phone_number: "+18305801212"
  dummy_to_phone_number: "+48537623523"

If you send messages while in trial mode, you must first verify your ‘To’ phone number (dummy_to_phone_number). Ensure that your phone number is in a valid geo & is verified.

Send SMS with Twilio in a Rails app

Install gem 'twilio-ruby':

bundle add twilio-ruby

Create a Service that you can call in your app:

# app/services/twilio/send_sms_service.rb
module Twilio
  class SendSmsService
    require 'twilio-ruby'

    def call(body, to_phone_number)
      account_sid = Rails.application.config_for(:settings).dig(:credentials, :twilio, :account_sid)
      auth_token = Rails.application.config_for(:settings).dig(:credentials, :twilio, :auth_token)
      from_phone_number = Rails.application.config_for(:settings).dig(:credentials, :twilio, :from_phone_number)
      dummy_to_phone_number = Rails.application.config_for(:settings).dig(:credentials, :twilio, :dummy_to_phone_number)

      begin
        @client = Twilio::REST::Client.new account_sid, auth_token
        message = @client.messages.create(
                           body:,
                           from: from_phone_number,
                           to: to(to_phone_number),
                           # media_url: ['https://demo.twilio.com/owl.png'] # MMS example
                          )
        puts message.sid
      rescue Twilio::REST::TwilioError => exception
        puts exception.message
      end
    end

    private

    def to(to_phone_number)
      return dummy_to_phone_number if Rails.env.development?

      to_phone_number
    end
  end
end

Call the service and send an SMS:

body = 'some text'
to_phone_number = '+38050554470367'
Twilio::SendSmsService.new.call(body, to_phone_number)

Testing with Rspec

Assuming from_phone_number = 18305803384, the test and stubbed Webmock request could look like this:

# spec/services/send_sms_service_spec.rb
require 'rails_helper'

RSpec.describe Twilio::SendSmsService do
  let(:body) { 'lorem ipsum' }
  let(:to_phone_number) { '+123456789' }
  let(:twilio_api_url) { "https://api.twilio.com/2010-04-01/Accounts/#{Rails.application.config_for(:settings).dig(:credentials, :twilio, :account_sid)}/Messages.json" }
  subject(:call) { described_class.new.call(body, to_phone_number) }

  before do
    stub_request(:post, twilio_api_url).to_return(status: 200)
  end

  context 'calls twilio api' do
    it 'sends request' do
      call
      expect(WebMock).to have_requested(:post, twilio_api_url).with(body: 'Body=lorem+ipsum&From=%2B18305803384&To=%2B123456789')
    end
  end
end

Final thoughts, next steps

Ideally, before sending transactional SMS messages, I would build a mechanism for the user to verify his phone number.

Here’s how it would work:

User inputs his phone number.
We generate random 6-digit token and send it to the user via SMS.
User receives SMS, submits token in a form.
If the token that the user submits is correct, we mark his phone number as verified.

Also, we might be able to track if an SMS has been delivered on Twilio’s side. Than we would mark the phone number as invalid if the SMS is not deliverable.

We can also try to validate the to_phone_number via Twilio lookup API.

It all depends on your unique usecase and how far your are willing to go :)

Live Visit Count for website or page. ActionCable, Turbo Broadcasts, Kredis

Yaroslav Shmarov — Wed, 15 Feb 2023 22:50:10 +0000

It’s amazing that now you can add advanced javascript/websockets features like “Live visitor count” without writing a single extra line of javascript!

A “live visitor count” feature can give users a “you are not alone” feeling. For example, when watching a live stream on youtube:

Another example - see other people that have the same google doc open:

“live visitor count” can also boost urgency (booking website example):

By the end of this article you will have created:

live counter of all visitors on the app
live conter of all visitors on a specific page or “inside a Room” (like google doc or youtube live video)

Explanation of the above GIF:

I have 2 browsers open. Each browser = different session.
When I open the website in the second browser, the visitor count goes from 1 to 2.
If the user closes the browser tab, visitor count will decrease by 1.
When I open a specific Room page, the visitor count goes from 1 to 2 for this particular Room.
If a user leaves the Room (closes tab or redirects), visitor count will decrease by 1.

Technologies we will need to implement the “live visitor count”:

ActionCable - the core technology, that lets us to establish a websockets connection, and see if a user connected or disconnected.
turbo/streams_channel.rb - a way to link a turbo stream with an ActionCable channel.
gem Kredis - a Redis adapter for Rails, where we will store the visitor ids (session_id).

1. Count all current visitors on your website

In this example we will not implement user authentication. We will identify separate users by sessions. One browser = one session.

To make session_id available within an ActionCable Channel, you have to add it inside Connection. The Connection has access to request and cookie data.

# app/channels/application_cable/connection.rb
module ApplicationCable
  class Connection < ActionCable::Connection::Base
    identified_by :session_user
    def connect
      self.session_user = request.session.id
    end
  end
end

Next, add a turbo_stream_from broadcast to your application layout.

Importantly, append the channel: VisitorChannel to connect to an ActionCable channel.

Add a placeholder div visitors-counter where we will update the number of current visitors.

# app/views/layouts/application.html.erb
<%= turbo_stream_from :visitors, channel: VisitorChannel %>

Current website visitors: 
<span id="visitors-counter"></span>

Create an action cable channel. Don’t use the generator, because you will not need the other extra files and code that rails g channel visitor would give you. It has to inherit from Turbo::StreamsChannel. Add super. That way you will have streams_form automatically imported. You will have access to verified_stream_name_from_params that is :visitors for our current case.

In this case verified_stream_name_from_params = :visitors.

Create a redis unique list and add the session_user on subscribed, remove the user on unsubscribed.

Send a turbo stream broadcast to update this count in everyones views with Turbo::StreamsChannel.broadcast_update_to.

# app/channels/visitor_channel.rb
# class VisitorChannel < ApplicationCable::Channel
class VisitorChannel < Turbo::StreamsChannel
  def subscribed
    super
    visitors_online = Kredis.unique_list "visitors_online"
    visitors_online << session_user
    update_visitors_count(visitors_online)
  end

  def unsubscribed
    visitors_online = Kredis.unique_list "visitors_online"
    visitors_online.remove session_user
    update_visitors_count(visitors_online)
  end

  private

  def update_visitors_count(visitors_online)
    Turbo::StreamsChannel.broadcast_update_to(
      verified_stream_name_from_params,
      target: 'visitors-counter',
      html: visitors_online.elements.count
    )
  end
end

Success! Now every visitor of your application will see the visitor count!

Try opening/closing pages in your app from 2 different browsers and see the visitor_count change.

2. Count current visitors on a specific page

Maybe a more useful feature would be to see the quantity of users on a specific page. For example, we have a scaffold of Room and each room has a #show page.

In this case we will pass an additional room_id param to the turbo_stream_from.

Make the target also unique based on the room_id:

# app/views/rooms/show.html.erb
<%= turbo_stream_from @room, channel: RoomChannel, params: { room_id: @room.id } %>
<%#= turbo_stream_from @room, channel: RoomChannel, data: { room_id: @room.id } %>

People inside this room: <span id="room-<%= params[:room_id]%>-counter"></span>

Now we can access params[:room_id] from our room_channel.rb:

# app/channels/room_channel.rb
class RoomChannel < Turbo::StreamsChannel
  def subscribed
    super
    room_visitors = Kredis.unique_list "room_visitors"
    room_visitors << session_user
    target = "room-#{params[:room_id]}-counter"
    update_visitors_count(room_visitors, target)
  end

  def unsubscribed
    room_visitors = Kredis.unique_list "room_visitors"
    room_visitors.remove session_user
    target = "room-#{params[:room_id]}-counter"
    update_visitors_count(room_visitors, target)
  end

  private

  def update_visitors_count(room_visitors, target)
    Turbo::StreamsChannel.broadcast_update_to(
      verified_stream_name_from_params,
      target:,
      html: room_visitors.elements.count
    )
  end
end

Success! Now when you open a specific room page, it will register a new connection. See the “People inside this room” counter get updated:

That’s it. See you in the next one!

Omniauth without Devise

Yaroslav Shmarov — Tue, 07 Feb 2023 23:59:00 +0000

Previously I’ve covered Github omniauth with Devise, and Github omniauth with Devise without email registration.

An even simpler solution would be to sign in via a social login provider without Devise at all! Here’s the easiest way to do it.

First, add the omniauth gems:

# Gemfile
gem 'omniauth-github', github: 'omniauth/omniauth-github', branch: 'master'
gem "omniauth-rails_csrf_protection", "~> 1.0"

Add your social provider API credentials:

# https://github.com/omniauth/omniauth
# https://github.com/settings/applications/new
# echo > config/initializers/omniauth.rb
# config/initializers/omniauth.rb
Rails.application.config.middleware.use OmniAuth::Builder do
  provider :github, "GITHUB_ID", "GITHUB_SECRET"
end

Create a user model. We will also add a few static pages:

/landing_page that can be accessed without authentication
/dashboard that requires authentication

rails g controller static_pages landing_page dashboard
rails g model User email github_uid

Routes:

# config/routes.rb
  root 'static_pages#landing_page'
  get 'dashboard', to: 'static_pages#dashboard'

  get 'auth/github/callback', to: 'sessions#create'
  delete 'logout', to: 'sessions#destroy'
  # get 'login', to: redirect('/auth/github'), as: 'login'

Gems like devise provide some default methods, that we will have to add on our own now:

def current_user - get the current user from session params.
def user_signed_in? - check if there is a current user.
def require_authentication - to restrict controller actions for non-authenticated users.
helper_method :current_user - to make current_user available in views.

# app/controllers/application_controller.rb
class ApplicationController < ActionController::Base
  protect_from_forgery with: :exception
  helper_method :current_user

  def require_authentication
    redirect_to root_path, alert: 'Requires authentication' unless user_signed_in?
  end

  def current_user
    @current_user ||= User.find(session[:user_id]) if session[:user_id]
  end

  def user_signed_in?
    # converts current_user to a boolean by negating the negation
    !!current_user
  end
end

The button to /auth/github will redirect to the github login page.

# app/views/layouts/application.html.erb
<%= link_to 'Home', root_path %>
<% if current_user %>
  <%= current_user.email %>
  <%= link_to 'Dashboard', dashboard_path %>
  <%= button_to 'Logout', logout_path, method: :delete, data: { turbo: false } %>
<% else %>
  <%= button_to "Sign in with Github", "/auth/github", data: { turbo: false } %>
<% end %>

After successful authentication, the user should be redirected to sessions#create with request.env['omniauth.auth'].

# app/controllers/sessions_controller.rb
class SessionsController < ApplicationController
  def create
    @user = User.from_omniauth(request.env['omniauth.auth'])
    if @user.persisted?
      session[:user_id] = @user.id
      redirect_to dashboard_path, notice: "Logged in as #{@user.email}"
    else
      redirect_to root_url, alert: 'Failure'
    end
  end

  def destroy
    session[:user_id] = nil
    redirect_to root_path
  end
end

from_omniauth will find the users email and uid in the data provided by github, and find or create the user.

# app/models/user.rb
class User < ApplicationRecord
  validates :github_uid, presence: true, uniqueness: true
  validates :email, format: { with: URI::MailTo::EMAIL_REGEXP }, presence: true, uniqueness: true

  def self.from_omniauth(access_token)
    github_uid = access_token.uid
    data = access_token.info
    email = data['email']

    User.find_or_create_by(email:, github_uid:)
  end
end

Finally, require authentication to visit /dashboard:

# app/controllers/static_pages_controller.rb
class StaticPagesController < ApplicationController
  before_action :require_authentication, only: :dashboard

  def landing_page
  end

  def dashboard
  end
end

That’s it! Now you can use omniauth without devise!

How to use the Browser Geolocation API with StimulusJS and Rails

Yaroslav Shmarov — Sun, 05 Feb 2023 19:23:41 +0000

Task: get users coordinates from browser, redirect to page with coordinates in params:

To request users’ location, we will use Web/API/Geolocation/getCurrentPosition with StimulusJS.

Create stimulus controller:

rails g stimulus geolocation

// app/javascript/controllers/geolocation_controller.js
import { Controller } from "@hotwired/stimulus"

const options = {
  enableHighAccuracy: true,
  maximumAge: 0
};

// Connects to data-controller="geolocation"
export default class extends Controller {
  static values = { url: String }

  search() {
    navigator.geolocation.getCurrentPosition(this.success.bind(this), this.error, options);
  }

  success(pos) {
    const crd = pos.coords;
    // redirect with coordinates in params
    location.assign(`/locations/?place=${crd.latitude},${crd.longitude}`)
  }

  error(err) {
    console.warn(`ERROR(${err.code}): ${err.message}`);
  }
}

Finally, a button to get location:

<div data-controller="geolocation">
  <button data-action="geolocation#search">search near me</button>
</div>

💡 Interestingly, if you use this.success instead of this.success.bind(this), stimulus targets will not work within the success function.

Get address from coordinates

Get address (city, street...) based on coordinates using geocoder , and search near the address:

# app/javascript/controllers/geolocation_controller.js
- location.assign(`/locations/?place=${crd.latitude},${crd.longitude}`)
+ location.assign(`/locations/?coordinates=${crd.latitude},${crd.longitude}`)

# app/controllers/locations_controller.rb
  def index
+    if params[:coordinates].present?
+      place = Geocoder.search(params[:coordinates])
+      params[:place] = place.first.address
+    end

    if params[:place].present?
      @locations = Location.near(params[:place], params[:distance] || 10, order: :distance)
    else
      @locations = Location.all
    end
  end

That’s it! Now you can get Geolocation with Javascript and use it within a Rails app!

gem MapkickJS for beautiful JavaScript maps with one line of Ruby

Yaroslav Shmarov — Thu, 02 Feb 2023 19:28:28 +0000

MapkickJS is a javascript adapter to display coordinates on Mapbox maps. It requires a Mapbox API key.

mapkick-rb is a Ruby on Rails adapter for MapkickJS. It allows you to easily feed a JSON with coordinates and display a map within your Rails app.

To display a marker on a map, you need to know latitude and longitude GPS coordinates. gem Geocoder allows you to get coordinates based on an address (house, street, city, state, country).

Basic usage

After installing the gem, initialize your Mapkick API key.

# echo > config/initializers/mapbox.rb
# config/initializers/mapbox.rb
ENV["MAPBOX_ACCESS_TOKEN"] = "pk.eyJ1..."
# ENV["MAPBOX_ACCESS_TOKEN"] = Rails.application.credentials.dig(:mapkick_api_key)

Basic map with multiple options:

<%= js_map [{latitude: 37.7829,
             longitude: -122.4190,
             label: 'My home',
             tooltip: 'Hello!'
            }],
            id: "cities-map",
            width: "800px",
            height: "500px",
            markers: {color: "#00FF00"},
            tooltips: { hover: false, html: true},
            style: "mapbox://styles/mapbox/outdoors-v12",
            zoom: 15,
            controls: true,
            refresh: 60 %>

Result:

HTML tooltips

Map with clickable links to locations:

Create a helper with a link:

# app/helpers/locations_helper.rb
module LocationsHelper
  def html_link_to_location(location)
    link_to location.name,
            location_url(location),
            target: '_blank',
            style: 'font-weight: bold; color: green'
  end
end

To be able to click on the tooltip, use the option { hover: false, html: true}.

Render the helper method in the tooltip param:

<%= js_map [{latitude: location.latitude,
             longitude: location.longitude,
             label: location.name,
             tooltip: html_link_to_location(location)}],
             tooltips: { hover: false, html: true} %>

Display multiple locations on the map, JSON

For this, the best way will be to render /locations.json:

<%= js_map locations_path(format: :json) %>

Customize the JSON:

// app/views/locations/_location.json.jbuilder
json.extract! location, :latitude, :longitude
json.label location.name
json.tooltip html_link_to_location(location)
// json.tooltip "#{html_link_to_location(location)} <br> #{location.address}"

Result:

With search params

In this final example, we will factor in having a search form for place and distance. The maps’ zoom will be smaller/higher based on the maximum search distance:

# app/controllers/locations_controller.rb
class LocationsController < ApplicationController
  before_action :set_location, only: %i[show edit update destroy]

  # GET /locations or /locations.json
  def index
    if params[:place].present?
      @locations = Location.near(params[:place], params[:distance] || 10, order: :distance)
      # this!
      @zoom = params[:distance].eql?('10') ? 13 : 10
    else
      @locations = Location.all
    end
    respond_to do |format|
      format.html
      format.json
    end
  end

Be sure to add the query params to the path in the view:

<%= js_map locations_path(format: :json, place: params[:place], distance: params[:distance]), zoom: @zoom %>

Result - smaller/bigger map zoom based on search params:

That’s it! Now you can build your own AIRNBN search frontend!

gem Geocoder - calculate coordinates, distances, search nearby

Yaroslav Shmarov — Tue, 31 Jan 2023 22:54:16 +0000

Geocoder gem allows you to preform different operations with coordinates.

Useful usage examples:

find latitude and longitude coordinates by address,
address by lat-lon coordinates,
find all Locations within a square (within_bounding_box)
find the distance between two Locations (distance_from)
find all Locations around X coordinates (near)
find all Locations around X location (nearbys)

Afterwards, when you have the coordinates of a location, you can use a separate Maps API to display them on a map.

Basic geocoder usage

Geocoder gem does a search via a Places API, and returns coordinates. The more detailed address you search for, the more precise the coordinates you will receive.

bundle add geocoder

# search
ua = Geocoder.search('Kyiv')
ua.first.coordinates
# => [50.4500336, 30.5241361] # latitude and longitude
ua.first.country
# => 'Ukraine'

fr = Geocoder.search('Notre dame cathedral paris')
fr.first.city
# => 'Paris'

# geographic_center
Geocoder::Calculations.geographic_center([ua.first.coordinates, fr.first.coordinates])
# => [50.51223060957045, 16.201193185230583]

Debug current HTTP request

You can get the current web requests country/ip/etc.

You can use it, for example, to geoblock countries like Ruzzia

# controller or view
request.location
request.location
request.location.try(:country)
# request.ip

Geocode a Rails model

Storing the address as a single string looks like a simple straightforward solution, however storing each address detail separately gives you more power.

A usual address on Google Maps has the sequence street, city, state, country, zip.

Scaffold your location model:

rails g scaffold Location latitude:float:index longitude:float:index street city state country zip
rails g scaffold Location latitude:float:index longitude:float:index address
rails db:migrate

Geocoder will automatically perform a search and find the latitude and longitude of your location.

To save compute power and API thresholds, it makes sence to geocode only if the address has changed.

Basic (one address field):

# app/models/location.rb
  geocoded_by :address   
  after_validation :geocode, if: :address_changed?
  # after_validation :geocode, if: ->(obj){ obj.address.present? and obj.address_changed? }

Advanced (multiple address fields):

# app/models/location.rb
  geocoded_by :address   
  after_validation :geocode, if: :address_changed? 

  def address 
    [street, city, state, country, zip].compact.join(', ')
  end

  private

  def address_changed?
    country_changed? ||
      state_changed? 
      city_changed? ||
      street_changed? ||
      zip_changed? ||
  end

DEMO DATA : seeds with a few real hotels in France

# db/seeds.rb
name = "Hôtel Martinez - The Unbound Collection by Hyatt"
address = "73 Bd de la Croisette, 06400 Cannes"
Location.create(name:, address:)

name = "Exclusive Hotel Belle Plage"
address = "2 Rue Brougham, 06400 Cannes"
Location.create(name:, address:)

name = "Best Western Premier Le Patio des Artistes - Cannes"
address = "6 Rue de Bône, 06400 Cannes"
Location.create(name:, address:)

name = "Le Negresco"
address = "37 Prom. des Anglais, 06000 Nice"
Location.create(name:, address:)

name = "Caesars Palace"
address = "3570 S Las Vegas Blvd, Las Vegas, NV 89109, United States"
Location.create(name:, address:)

Now you can find call geocoder methods on the model.

# geocode a single record:
address = Address.first
address.geocode
address.save

# geocode all:
Location.all.each { |location| location.geocode && location.save }

Location.geocoded
# => return objects with coordinates
Location.not_geocoded
# => return objects without coordinates

Location.first.to_coordinates
# => [51.51436195, 31.31593525714063]

Location.first.nearbys(20)
Location.first.nearbys(20, units: :km)
# => array of locations within 20 km of coordinates, excluding selected location
# ! useful to show "similar" or "nearby" feature

Location.near(Location.first, 20, units: :km, order: :distance)
Location.near('Omaha, NE, US', 20)
# => all locations within 20 km of coordinates
# ! useful for "find all next to...." feature

Location.first.distance_from(Location.second)
Location.first.distance_to(Location.second) # same as above
Location.first.distance_form([40.714,-100.234])
# => 1.8493403104012456

# all locations within square
sw_corner = [40.71, 100.23] 
ne_corner = [36.12, 88.65]
Location.within_bounding_box(sw_corner, ne_corner)

Search locations near

Having a search for for place and distance, you can find relevant Locations. This can be a vital feature when building a website like AirBnB or Booking.com.

Example query in human words: Find all locations within 10km distance from Chernihiv, Ukraine

# app/controllers/locations_controller.rb
class LocationsController < ApplicationController
  def index
    if params[:place].present?
      @locations = Location.near(params[:place], params[:distance] || 10, order: :distance)
    else
      @locations = Location.all
    end
  end
end

add a search form within a view:

<%= form_with url: locations_path, method: :get do |form| %>
  <%= form.label :place, "City, Country" %>
  <%= form.text_field :place, value: params[:place] %>

  <%= label :distance, "Distance, km" %>
  <%= text_field_tag :distance, [10, 20, 30], params[:distance] %>

  <%= form.submit "Search" %>
<% end %>

Display coordinates on static map

To display a market on a static image map, you would need to connect a places API.

There are a few options for using Places API:

From the above, I’ve tried only Mapbox. As long as you receive a Mapbox API key, you can display the map with an image_tag:

<%= image_tag "https://api.mapbox.com/styles/v1/mapbox/streets-v11/static/pin-s+ff2700(#{location.longitude},#{location.latitude})/#{location.longitude},#{location.latitude},13,0/300x200?access_token=#{Rails.application.credentials.dig(:mapbox_key)}" %>

There’s much more that we can do with coordinates. In the future I hope to explore:

gem Mapkick for displaying multiple Locations on a responsive map
different Geocoding API adapters (like Amazon Location API)
get browser location with Javascript

That’s it for now.

Parse a YML/YAML file in a Ruby on Rails app

Yaroslav Shmarov — Mon, 30 Jan 2023 18:00:25 +0000

Instead of storing static data a database, you can create a structured YML or JSON file and parse it from your Ruby/Rails app.

I really like the data structure of a .yml file, because it is much cleaner to write than .json.

Here’s an example list of schools in the YAML format:

# db/view_data/schools.yml
- name: Austin High School
  team_name: Austin Mustangs
  city: Houston
  state: TX
  primary_color: green
  secondary_color: white

- name: Bellaire High School
  team_name: Bellaire Cardinals
  city: Houston
  state: TX
  primary_color: red-lighter
  secondary_color: white

- name: Carnegie Vanguard High School
  team_name: Carnegie Vanguard Rhinos
  city: Houston
  state: TX
  primary_color: blue
  secondary_color: red-lighter

You can parse this data (convert it into a Hash or Array) using Ruby on Rails native yaml parsers!

Parse a local YAML file with pure Ruby :

require 'yaml'
path = "/Users/yaroslavshmarov/Documents/GitHub.nosync/schools.yml"
@schools = YAML::load File.open(path)

@schools.first.fetch('name')
# => "Austin High School"

Source: Ruby YAML docs

Parse a YAML file inside a Rails app:

# a controller action
  # @schools = YAML::load File.open("#{Rails.root.to_s}/db/fixtures/schools.yml") # ruby way
  @schools = YAML.load_file('db/fixtures/schools.yml') # rails way
  @schools.inspect

Render the results in a view:

# a view
<% @schools.each do |school| %>
  <%= school.fetch('name') %>
  <%= school['name'] %>
<% end %>

Source: Rails YAML.load_file docs

That’s it! 🤠