Rails Action Pack Variants
24/06/2019
Responsive yapılar, akıllıca tasarlanmış, sayfaların boyutlarına(platformlara) göre şekillenen yetenekli ve esnek tasarım yapılarıdır ve günümüzde de çokca tercih edilmektedir.
Responsive tasarımların bu çok yetenkli halleri, içinde yüklü miktarda JS, CSS ve HTML kodu bulundurmasına sebep oluyor. Bu durum özellikle de mobil cihazların arayüz kullanımlarında hatrı sayılır hız kayıplarına neden oluyor.
Neyse ki Ruby on Rails 4.1 ile birlikte "Action Pack Variants"
adında yeni bir özellik duyuruldu. Action Pack Variants, **siteye hangi platformdan girdiğinizi tespit eder ve
tarayıcınıza hangi platformun sayfasını yükleyeceğine karar verir. Bu sayede sayfaların yüklenme hızları artmış olur.
Bugün de sizlerle Rail Action Pack Variants'ı Rails 4.1 ve sonrası projelerde nasıl kullacağını göstermek adına bir uygulama yapacağız.
Rails Action Pack Variants Uygulaması
Demo için kurulum:
Öncelikle Action Pack Variantlarını denemek için bir controller oluşturalım.
1 rails g controller Homes show
Action Pack Variantlarını denerken rahat edebilmemiz açsından projemizin açılış sayfasını Homes#show
olarak güncelleyelim.
1Rails.application.routes.draw do
2 resource :home, only: [:show]
3 root to: "homes#show"
4end
Gerekli hazırlıkları tamamladık. Peki Action Pack Variantlarını nasıl kullancağız?
Application controller içinde detect_browser adında bir method oluşturuyoruz ve içine aşağıda bulunan satırları yapıştırıyoruz. (Ben "detect_browser" olarak isimlendirdim fakat siz başka bir method ismi de verebilirsiniz.) Ve bu oluşturulmuş olduğumuz detect_browser methodunu da before_action ile çağırıyoruz.
1class ApplicationController < ActionController::Base
2 # Prevent CSRF attacks by raising an exception.
3 # For APIs, you may want to use :null_session instead.
4 protect_from_forgery with: :exception
5
6 before_action :detect_browser
7
8private
9 def detect_browser
10 case request.user_agent
11 when /iPad/i
12 request.variant = :tablet
13 when /iPhone/i
14 request.variant = :phone
15 when /Android/i && /mobile/i
16 request.variant = :phone
17 when /Android/i
18 request.variant = :tablet
19 when /Windows Phone/i
20 request.variant = :phone
21 else
22 request.variant = :desktop
23 end
24 end
25end
Peki, Nasıl Çalışır?
detect_browser
çağırıldığında request.variant
olması gerektiği gibi ayarlanır. Biz örneğimizde sayfamıza tablet, telefon ya da masaüstünden mi girdiğini tespit ediyoruz.
NOT:
before_filter
,before_action
ile aynı işi yapmaktadır. Rails 5.1 den itibaren debefore_filter
kullanımdan kaldırılmıştır.
Bu yapı piyasada bulunan bazı cihazların hangi platforma ait olduğunu tespit edemeyebilir. Bu sorun bazı cihaz üreticilerinin, cihazın hangi platforma dahil olduğunu uygun şekilde belirtmemesinden kaynaklanır. Fakat günün sonunda çoğu cihazın hangi platforma dahil olduğunu bu yapı ile tayin edebiliriz.
view katmanı:
Şimdi ise farklı ekranlarda görmek istediğimiz view katmanlarını oluşturalım. View dosyalarını oluştururken isimlendirmeyi aşağıdaki yapıda oluşturuyoruz.
"show.html+platform_adı
.erb"
Öncelikle varsayılan olan masaüstü view'imizi oluşturalım. Bu kısımda herhangi bir platform adı belitmemize gerek yok.
show.html.erb
1<div class="jumbotron jumbotron-fluid bg-warning">
2 <div class="container text-dark">
3 <h1 class="display-2">Desktop</h1>
4 <h1 class="display-4">All other users get redirected here.</h1>
5 </div>
6</div>
Telefon için olan görünümü ayarlamak için phone
etiketini kullanıyoruz.
show.html+phone.erb
1<div class="jumbotron jumbotron-fluid bg-success">
2 <div class="container text-white">
3 <h1 class="display-2">Phone</h1>
4 <h1 class="display-4">You are running on a smart phone</h1>
5 </div>
6</div>
Tablet ekranları için de tablet
etiketini kullanarak view dosyamızı oluşturuyoruz.
show.html+tablet.erb
1<div class="jumbotron jumbotron-fluid bg-danger">
2 <div class="container text-white">
3 <h1 class="display-2">Tablet</h1>
4 <h1 class="display-4">You are running on a tablet.</h1>
5 </div>
6</div>
Evet şu an yapıyı kurmuş bulunmaktayız.
Peki nasıl test edicez?
Google developer tools'u kullanarak sistemi kolayca test edebilirz.
- İlk olarak varsayılan olarak ayarladığımız. Masaüstü görünümü ile karşılaşacağız.
- Diğer platformlardan nasıl göründüğünü görmek için;
CTRL
+ SHIFT
+ I
ile google developers tool'u açıyoruz ve ardından görüntülemek istediğimiz platformu resimdeki gibi belirliyoruz.
NOT: Platform değiştirdikten sonra sayfayı yenilemeyi unutmayın! Şu an yaptığımız işlem bir responsive tasarımı simüle etmekten ziyade platform özeline oluşturulmuş biricik bir sayfanın görüntüleme işlemidir.
- Evet, anasayfamızı her platform için farklı şekilde tasarlayıp görüntüledik
(view katmanı)
. Peki bunu controller katmanı için de yapmak mümkün mü?
controller katmanı:
format.html
yapıları içinde platformlara özel sorgular yapabiliyoruz. Mesela internet Explorer 6/7 kulanan kullanıcıları tespit edip onlara tarayıcılırını güncellemeleri gerektiğini gösterebiliriz.
1class HomesController < ApplicationController
2 def show
3 @device = "others"
4 respond_to do |format|
5
6 format.html.phone do # phone variant
7 # add code here for phones
8 end
9
10 format.html.tablet do # tablet variant
11 # add code here for tablets
12 end
13
14 format.html.desktop do
15 # add code here for desktops and other devices
16 end
17 end # end respond_to
18 end # end show
19end # end class
View katmanında hangi variantın kullanıldığını tespit etmek istersek?
Bunu yapmanın kolay bir yolu var. Bu örneğe bakarak bunu anlayabilir ve siz de kodunuzu buna benzeterek sorununuzu çözebilirsiniz.
1<!DOCTYPE >
2<html>
3 <head>
4 <title>ActionPackVariantsExample</title>
5 <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
6 <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
7 <%= csrf_meta_tags %>
8 </head>
9 <body>
10 <%= yield %>
11
12 <% if request.variant.include? :tablet %>
13 <small>Welcome Tablet User</small>
14 <% elsif request.variant.include? :phone %>
15 <small>Welcome Phone User</small>
16 <% end %>
17 </body>
18</html>
- Anlatımımızın sonuna geldik umarım sizler için faydalı olmuştur. Bir daha görüşümek üzere. İyi çalışmalar. :)
> Kaynakça