2.5 How do individuals develop a cross-terminal product? [Ruby Tuesday's sharing] Simple Psychological Technology Team

2.5 How do individuals develop a cross-terminal product? [Ruby Tuesday's sharing] Simple Psychological Technology Team

2.5 How do individuals develop a cross-terminal product? [Ruby Tuesday's share]

Variant Response based on Ruby on Rails, and Browser gem to distinguish devices, use responsive design and Turbolinks to optimize user experience.

2.5 people?

  • 1 full stack (my^_^)
  • 1 Ruby programmer
  • 0.5 front-end development (part-time product manager)

Cross-terminal?

  • Computer: browser, WeChat PC version (PC version WeChat supports WeChat login)
  • Tablet: Browser, App (Android & iOS), WeChat
  • Mobile phone: browser, App (Android & iOS), WeChat

These terminals are not only used for access, but also need to support push and payment:

  • Notification channels: Email, SMS, WeChat, App push
  • Payment channels: Alipay, WeChat Pay, UnionPay

solution

  • Minimize development workload (limited personnel)
  • Use RoR's existing technology as much as possible
  • Identify specific terminals based on User Agent information

Depart from RoR

  • Use Turbolinks to optimize web page loading experience
  • Do not use the front-end MVC framework to increase the workload
  • Use responsive design + partial page Variant Response
  • Do not make separate pages for each terminal

Distinguish terminals based on browser

  • The dual meaning of browser: browser and browser gem
  • Each terminal has its own User Agent
  • Judge the current terminal type by extending the browser gem
  • By printing the terminal type to the body class, CSS can adjust the style in a targeted manner

Specific steps

1. Use and extend the browser gem to determine the terminal type

Browser::NAMES[:smileback] = 'SmileBack' #   App   User Agent  
Browser::NAMES[:wechat] = 'Wechat'
Browser::NAMES[:desktop] = 'Desktop'

class Browser
  module Meta
    class Smileback < Base
      def meta
        'smileback' if browser.smileback?
      end
    end

    class Wechat < Base
      def meta
        'wechat' if browser.wechat?
      end
    end

    class Desktop < Base
      def meta
        'desktop' if browser.desktop?
      end
    end
  end

  module Consoles
    def smileback?
      !(ua =~/smileback/i).nil?
    end

    def wechat?
      !(ua =~/MicroMessenger/i).nil?
    end

    def desktop?
      !mobile? && !wechat? && !smileback?
    end
  end
end
 

2. Add browser information in html body class to facilitate CSS application

 class=" Browser.new(ua: request.env['HTTP_USER_AGENT']).to_s %>"> 
--> 
body{/*   */}
body.desktop{/*   */}
body.mobile{/*   */}
body.wechat{/*   */}
 

3. Use Variant Response to make two or more sets of views for some pages with big differences

# application_controller.rb

before_action :detect_browser

private

def detect_browser
  request.variant = :mobile if Browser.new(ua: request.env['HTTP_USER_AGENT']).mobile?
end
 

The pages that need to be split are made into the following form:

app/views/pages/home.erb
app/views/pages/home.html+mobile.erb #    + 
 

4. Add helper to facilitate invoking in complicated situations, such as payment

# application_helper.rb

def browser
  @_browser ||= Browser.new(ua: request.env['HTTP_USER_AGENT'])
end
 
/  erb   slim  
- if browser.smileback?
  a.buttonhref="jdxlsmileback://recharges/#{resource.id}/pay" 
  = link_to ' ', pay_recharge_path(resource, unionpay: true), 'data-no-turbolink' => true
- elsif browser.wechat?
  - if current_user.weixin_id
    = link_to ' ', '#', id: 'wepay', class: 'button'
    = link_to ' ', pay_recharge_path(resource, unionpay: true), 'data-no-turbolink' => true
  - else
    = link_to ' ', pay_recharge_path(resource, unionpay: true), 'data-no-turbolink' => true, class: 'button'
- elsif browser.mobile?
  = link_to ' ', pay_recharge_path(resource, alipay: true), class: 'button', 'data-no-turbolink' => true
  = link_to ' ', pay_recharge_path(resource, unionpay: true), 'data-no-turbolink' => true
- else
  = link_to ' ', pay_recharge_path(resource, alipay: true), class: 'button', 'data-no-turbolink' => true
  = link_to ' ', pay_recharge_path(resource, scan_wepay: true)
  = link_to ' ', pay_recharge_path(resource, unionpay: true), 'data-no-turbolink' => true
 

Other experience

  • For iOS App, we use the WKWebView shell. WKWebView has better performance than UIWebView, but it has more restrictions. For details, you can Google.
  • For Android App, we use the default WebView, but no better alternative has been found.
  • We used to encapsulate the payment channel by ourselves, but now we find that Ping++ is also good, you can try it.

Here comes the point! ! !

What is simple psychology?

  • The largest Chinese language counseling platform
  • The most rigorous consultants are stationed in the audit
  • Determined to provide the most professional psychological services

The inner world is so big, do you want to take a look?

we need:

we provide:

  • The most humane working environment (boss and most employees have psychology professional background, programmers encourage teachers to be weak: smirk:)
  • Can work remotely in non-Beijing areas (the headquarter is located in Zhongguancun, Beijing)

Welcome to hook up hr@jiandanxinli.com

Take a break and take a look at the eye-catching photos (not PS)

Lady Queen (formerly known as Briquettes) and her children

Various handsome men and beautiful women gathering activities

To learn more about our company, you can move here: www.jiandanxinli.com/pages/37