Accueil Blogue Conférences

2.5 Comment un individu peut-il développer un produit multi-plateformes? [Partage de Ruby Tuesday]

2015-09-08

Basé sur la Variant Response avec Ruby on Rails, et la gemme Browser pour différencier les appareils, en utilisant un design réactif et Turbolinks pour optimiser l’expérience utilisateur.

2.5 Individu?

Multi-plateformes?

Ces plateformes ne sont pas seulement utilisées pour l’accès mais doivent également prendre en charge les notifications push et les paiements :

Solutions

Partir de RoR

Différencier les plateformes en se basant sur le navigateur

Étapes spécifiques

1. Utiliser et étendre la gemme browser pour déterminer le type de plateforme

Browser::NAMES[:smileback] = 'SmileBack' # Notre identifiant d'agent utilisateur personnalisé pour notre application
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. Ajouter des informations de navigateur à la classe du corps HTML pour faciliter l’application du CSS

<body class="<%= Browser.new(ua: request.env['HTTP_USER_AGENT']).to_s %>"> <!-- La classe va afficher quelque chose comme chrome moderne mac webkit bureautique ou iphone ios mobile moderne autre safari5 webkit --!>
body { /* Style par défaut */ }
body.desktop { /* Style personnalisé pour les navigateurs de bureau */ }
body.mobile { /* Style personnalisé pour les navigateurs mobiles */ }
body.wechat { /* Style personnalisé pour WeChat */ }

3. Utiliser Variant Response pour les pages ayant des différences importantes pour créer deux ou plusieurs ensembles de vues

# 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

Les pages qui nécessitent une séparation, créez-les dans le format suivant :

app/views/pages/home.erb
app/views/pages/home.html+mobile.erb # Le format de nom de fichier est le format de réponse + nom de l'appareil

4. Ajouter un assistant pour les cas complexes, comme les paiements

# application_helper.rb

def browser
  @_browser ||= Browser.new(ua: request.env['HTTP_USER_AGENT'])
end
/ Trop paresseux pour convertir en format erb, le suivant est en format slim
- if browser.smileback?
  a.button href="jdxlsmileback://recharges/#{resource.id}/pay" Paiement Alipay
  = link_to 'Paiement UnionPay', pay_recharge_path(resource, unionpay: true), 'data-no-turbolink' => true
- elsif browser.wechat?
  - if current_user.weixin_id
    = link_to 'Paiement WeChat', '#', id: 'wepay', class: 'button'
    = link_to 'Paiement UnionPay', pay_recharge_path(resource, unionpay: true), 'data-no-turbolink' => true
  - else
    = link_to 'Paiement UnionPay', pay_recharge_path(resource, unionpay: true), 'data-no-turbolink' => true, class: 'button'
- elsif browser.mobile?
  = link_to 'Paiement Alipay', pay_recharge_path(resource, alipay: true), class: 'button', 'data-no-turbolink' => true
  = link_to 'Paiement UnionPay', pay_recharge_path(resource, unionpay: true), 'data-no-turbolink' => true
- else
  = link_to 'Paiement Alipay', pay_recharge_path(resource, alipay: true), class: 'button', 'data-no-turbolink' => true
  = link_to 'Paiement WeChat', pay_recharge_path(resource, scan_wepay: true)
  = link_to 'Paiement UnionPay', pay_recharge_path(resource, unionpay: true), 'data-no-turbolink' => true

Autres expériences

< Les raisons du choix de jsonapi-resources Harmonieux >
Retour à tous les articles