Phiên bản xem di động cho Ruby on Rails

Question

Tôi sau một số xác nhận rằng tôi đang làm đúng. Tôi có của Ruby của tôi trên ứng dụng Rails trong cấu trúc sau:

/home
      about.rhtml
      index.rhtml
/hiển thị
      index.rhtml
/dữ liệu < --Đây được gọi là jQuery từ trang display \ index để cung cấp dữ liệu để hiển thị
      push.js.erb
      pull.js.erb
/layout
      home.rhtml
      display.rhtml

Tất cả mọi thứ đang làm việc tốt, nhưng bây giờ tôi muốn thêm trang web được nhắm mục tiêu cho thiết bị di động. Mặc dù iPhone hiển thị chính xác trang web nhưng sẽ rất tuyệt khi cung cấp trải nghiệm được nhắm mục tiêu nhiều hơn. Lý tưởng nhất, tôi đang nghĩ về việc có một iPhone.domain.com mà sẽ được chuyển hướng đến thông qua .htaccess.

Đối với điều này, tôi đã suy nghĩ về việc thêm cái nhìn khác cho mỗi thiết bị
/iPhone
      home.rhtml
      about.rhtml
      display.rhtml

Tuy nhiên, có vẻ như rất nhiều dữ liệu sẽ được sao chép, ví dụ trang về sẽ ở hai vị trí. Tôi đoán tôi có thể có một phần và làm một cái gì đó như render: partial => 'home/about' nhưng điều đó có vẻ hơi khó hiểu.

Tôi làm cách nào để phát triển trang web của mình để hỗ trợ điều này?

Tôi đã suy nghĩ về một cấu trúc như, nhưng một lần nữa không chắc chắn cách cấu trúc mã - làm cách nào để cho nó hiển thị chế độ xem trong thư mục iPhone ... trong khi không có bố cục chính được áp dụng
/display
     /iphone
            index.rhtml

tôi sẽ thực sự thích một số lời khuyên về cách tốt nhất để tiếp cận này và cấu trúc ứng dụng. Trong khi các ứng dụng theo một cấu trúc vào lúc này, họ có thể đi tắt theo các hướng khác nhau ..

Cảm ơn bạn

Bến

Answer 1

Tôi thực sự khuyên bạn nên để cấu trúc bộ điều khiển giống nhau trên tất cả các loại thiết bị. Đặc biệt nếu bạn đang sử dụng các tuyến RESTful của Rails, các bộ điều khiển của bạn phải được kết hợp chặt chẽ với mô hình miền của dữ liệu của bạn. Cho dù dữ liệu đó sau đó được trình bày cho trình duyệt trên máy tính để bàn, với iPhone, đến một loại thiết bị di động khác, đến một ứng dụng REST API JSON/XML, vv chủ yếu là vấn đề của lớp trình bày chứ không phải lớp điều khiển/định tuyến.

Vì vậy, một giải pháp thanh lịch sẽ là:

1. Phát hiện loại thiết bị dựa trên User Agent (bạn có thể muốn tham khảo các cơ sở dữ liệu User Agent WURFL);
2. sử dụng cơ chế Rails 'respond_to để hiển thị định dạng chế độ xem khác nhau cho từng loại thiết bị;
3. xác định bố cục cho từng loại thiết bị (ví dụ: sử dụng loại tài liệu Tiểu sử trên thiết bị di động XHTML cho thiết bị di động);
4. bao gồm các tệp CSS khác nhau tùy thuộc vào loại thiết bị.

Có một số plugin cố gắng làm cho việc này trở nên dễ dàng hơn: hãy xem mobile Fu của brendanlim và iNET Rails noelrappin (cả trên GitHub). Ngoài ra Brendan Lim's presentation at Rails Underground có một vài ý tưởng.

gì bạn nên nhắm đến là một cái gì đó như:

def show 
    @foo = Foo.find(params[:id]) 
    respond_to do |format| 
    format.html  # => show.html.erb 
    format.iphone  # => show.iphone.erb 
    format.blackberry # => show.blackberry.erb 
    end 
end 

Bạn cũng nên cho phép người dùng trên các thiết bị di động để ghi đè lên các phát hiện tác nhân người dùng nếu họ thực sự muốn xem phiên bản máy tính để bàn của trang web. Cookie có thời gian hết hạn dài có lẽ là cách tốt nhất để thực hiện việc này, để trang web ghi nhớ lựa chọn tiếp theo khi người dùng quay lại. Một số thiết bị di động có hỗ trợ cookie rác, nhưng sau đó có thể họ sẽ không muốn phiên bản máy tính để bàn của trang web vì nó có thể sẽ không hoạt động.

Answer 2

trước hết, bạn nên sử dụng .html.erb làm mẫu mở rộng của bạn

thứ hai bạn có thể sử dụng logic để phát hiện loại bố cục để sử dụng dựa trên tác nhân người dùng (request.user_agent).

layout :site_layout 

def site_layout 
    some_way_to_detect_the_layout_to_use 
end 

Lưu ý, user_agent có thể giả mạo, vì vậy giải pháp phải đủ "tốt" cho 99,9% trường hợp.

Answer 3

Iphone thực sự làm một công việc khá tốt khi hiển thị các trang web mà không có bất kỳ định dạng đặc biệt nào.

Tuy nhiên, nội dung nổi trên điện thoại Android của tôi dường như bị cắt và do đó, chế độ xem tùy chỉnh cho điện thoại đó là bắt buộc. Để đạt được điều này bạn cần phải tạo ra một bố cục khác nhau (ví dụ mobile_application.html.erb) và trong application_controller bạn thêm dòng sau:

layout :select_layout 

    def select_layout 
    session.inspect # force session load 
    if session.has_key? "layout" 
     return (session["layout"] == "mobile") ? "mobile_application" : "application" 
    end 
    return detect_browser 
    end 

    def detect_browser 
    agent = request.headers["HTTP_USER_AGENT"].downcase 
    MOBILE_BROWSERS.each do |m| 
     return "mobile_application" if agent.match(m) 
    end 
    return "application" 
    end 

nơi MOBILE_BROWSERS là một mảng của chuỗi tác nhân người dùng bạn muốn kết hợp như một thiết bị di động.

tôi đã viết một blog về vấn đề này ở đây:

http://www.arctickiwi.com/blog/2-mobile-enable-your-ruby-on-rails-site-for-small-screens

Cheers

Answer 4

Rails 4.1 bao gồm biến thể, một tính năng mới tuyệt vời mà:

Cho phép bạn có mẫu khác nhau và phản hồi hành động cho cùng một loại mime (nói, HTML). Đây là một viên đạn ma thuật cho bất kỳ ứng dụng Rails nào phục vụ khách hàng di động. Bây giờ bạn có thể có các mẫu riêng lẻ cho màn hình máy tính để bàn, máy tính bảng và điện thoại trong khi chia sẻ tất cả cùng một logic điều khiển.

Trong trường hợp của bạn, bạn chỉ cần thiết lập các biến thể cho iphone trong một before_action, ví dụ:

class HomeController < ApplicationController 
    before_action :detect_iphone 
    def index 

    respond_to do |format| 
     format.html    # /app/views/home/index.html.erb 
     format.html.phone   # /app/views/home/index.html+phone.erb 
    end 
    end 

    private 
    def detect_iphone 
     request.variant = :iphone if request.user_agent =~ /iPhone/ 
    end 
end 

What's new in Rails 4.1