SlideShare a Scribd company logo
1 of 77
Mobilize Your Rails
   Application
       Brendan Lim
   brendan@intridea.com
       @brendanlim
Why care about mobile
• Estimated 4 billion mobile users
• More mobile phones than personal
  computers

• In developing nations, a mobile phone
  is sometimes their only way to
  connect to the Internet
Some mobile stats
                                                         7.00


                                                         5.25


      6.7                                                3.50

                       4.0
                                                         1.75
                                            2.0
World Population                                         0
                   Mobile Users
                                     Mobile Web Access


                     (in billions)
Twitter   Google Reader   Present.ly
We should cater to our mobile audience
One Web
  Making the same information
and services available to all users
    regardless of what device
         they are using.
Problems with one web

• Max resolution?
• JavaScript support?
• Flash support?
• Connection speed?
Mobile Fu

• Can detect if a user is on a mobile
  device
• Ability to add custom styling based on
  the device’s user agent
• Helps bring us closer to one web
Mobile Fu




class ApplicationController < ActionController::Base
 has_mobile_fu
end
Mobile Fu

        demo.presentlyapp.com


        iPhone          Safari
Mobile Fu

respond_to do |format|
 format.html
 format.mobile
end

views/
 layouts/
   blah.html.erb
   blah.mobile.erb
 sessions/
   new.html.erb
   new.mobile.erb
Mobile Fu


    <%= stylesheet_link_tag 'foo' %>
Mobile Fu


    <%= stylesheet_link_tag 'foo' %>


iPhone         foo_iphone.css
Mobile Fu


    <%= stylesheet_link_tag 'foo' %>


iPhone         foo_iphone.css
Android        foo_android.css
Mobile Fu


    <%= stylesheet_link_tag 'foo' %>


iPhone         foo_iphone.css
Android        foo_android.css
BlackBerry foo_blackberry.css
Mobile Fu


    <%= stylesheet_link_tag 'foo' %>


iPhone         foo_iphone.css
Android        foo_android.css
BlackBerry foo_blackberry.css
Win Mobile foo_mobileexplorer.css
Mobile Fu
Mobile Fu


Is the user using a mobile device?
is_mobile_device?
Mobile Fu


Is the user using a mobile device?
is_mobile_device?

Is the user using a specific device?
is_device?(‘blackberry’)
Mobile Fu


Is the user using a mobile device?
is_mobile_device?

Is the user using a specific device?
is_device?(‘blackberry’)

Is the request format currently :mobile ?
in_mobile_view?
Mobile Fu

         ../layouts/blah.mobile.erb

  <%= mobile_xhtml_doctype(:mobile, ‘1.0’) %>
  <html>
   <head>
    ...
   </head>
   <body>
    ...
   </body>
  </html>

    http://mobiforge.com/designing/story/comparison-xhtml-mobile-
                        profile-and-xhtml-basic
Mobile Fu

         ../layouts/blah.mobile.erb
    <?xml version="1.0" charset="UTF-8" ?>
    <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD
    XHTML Mobile 1.0//EN" "http://
    www.wapforum.org/DTD/xhtml-mobile10.dtd">
    <html>
     <head>
      ...
     </head>
     <body>
      ...
     </body>
    </html>

    http://mobiforge.com/designing/story/comparison-xhtml-mobile-
                        profile-and-xhtml-basic
Rails iUI

• Wrapper for iUI user interface
  framework
• JavaScript & CSS framework for
  developing iPhone webapps
• Can determine device orientation
• Provides an ‘iPhone-Like’ experience
Rails iUI
Rails iUI


Install iUI images & styles
rake iui:install
Rails iUI


Install iUI images & styles
rake iui:install

Install compact version of iUI images & styles
rake iui:install_compact
Rails iUI


Install iUI images & styles
rake iui:install

Install compact version of iUI images & styles
rake iui:install_compact

Completely remove all iUI images & styles
rake iui:clean
Rails iUI


class ApplicationController < ActionController::Base
 acts_as_iphone_controller
end

         ../layouts/blah.iphone.erb
<html>
  <head>
  ...
  <%= include_iui_files %>
  </head>
  ...
</html>
Rails iUI

respond_to do |format|
 format.html
 format.iphone
end

views/
 layouts/
   blah.html.erb
   blah.iphone.erb
 blah/
   blah.html.erb
   blah.iphone.erb
Rails iUI


Create an iPhone style toolbar
iui_toolbar(initial_caption,search_url = nil)
Rails iUI


Create an iPhone style button
button_link_to(name,options,html_options = {})
Rails iUI


Creates an iPhone style TableView
iui_list(items,options = {})
Rails iUI


Creates a grouped iPhone style Tableview
iui_grouped_list(items,options = {}, &group_by_block)
Rails iUI


Respond to change in the iPhone’s orientation
observe_orientation_change(url_options = {})

  <html>
   <head>
    <meta name=‘viewport’ content=‘width=device-
    width, user-scalable=no”>
    <%= observe_orientation_change(:controller
        => ‘sample’, :action => ‘flip’ %>
   </head>
   <body <%= register_orientation_change %>>
    ...
   </body>
  </html>
Rails iUI


Respond to change in the iPhone’s orientation
observe_orientation_change(url_options = {})

params[:position] =
   “0”      Upright (portrait)
   “90”     Counter clockwise (landscape)
   “-90”    Clockwise (landscape)
Short Message Service
Short Message Service

• Text messages are read by about 94%
  of their recipients.
• Supported by almost all mobile
  phones out there
• Good for quick notifications
• Generally limited to 160 characters
What tools can we use to
send SMS messages from
  our Rails application?
Clickatell
• Paid solution
• Uses Clickatell’s API
• Currently around 5-7 pence per text
  message sent within the UK
  (depending on carrier destination)
• No need to know the recipient’s
  carrier
Clickatell



require 'clickatell'



api = Clickatell::API.authenticate('your_api_id',
'your_username', 'your_password')

api.send_message('5558675309', 'Hello from
clickatell')
SMS Fu
• Doesn’t cost the sender anything
• Leverages e-mail to send an SMS
• You need to know the recipient’s
  carrier
• Not as many supported carriers as
  Clickatell
SMS Fu




         Wait, it’s free?
SMS Fu




 Number: 555-867-5309   Carrier: AT&T


 5558675309@txt.att.net
SMS Fu




class AwesomeController < ApplicationController
has_sms_fu
end

deliver_sms(‘5558675309’,’at&t’, ‘hello!’)
SMS Fu


Deliver an SMS
deliver_sms(number,carrier,message)
SMS Fu


Deliver an SMS
deliver_sms(number,carrier,message)


Retrieve SMS e-mail address
get_sms_address(number,carrier)
SMS Fu


Deliver an SMS
deliver_sms(number,carrier,message)


Retrieve SMS e-mail address
get_sms_address(number,carrier)


Custom select box with carriers
carrier_select(field_name,default_text)
SMS Fu


Deliver an SMS
deliver_sms(number,carrier,message)


Retrieve SMS e-mail address
get_sms_address(number,carrier)


Custom select box with carriers
carrier_select(field_name,default_text)


Retrieve back carrier options for select
carrier_collection
SMS Fu


     Supported Carriers
 Alltell, Ameritech, AT&T, Bell South
 Mobility, BlueSkyFrog, Boost Mobile,
  Cellular South, Kajeet, Metro PCS,
    Powertel, PSC Wireless, Qwest,
   Southern Link, Spring, Rodgers,
  Suncom, T-Mobile, Virgin Mobile,
 Verizon Wireless, E-Plus, O2, Orange,
          Telconica, Vodafone....
SMS Fu




     What if I want to add a
        new carrier?
SMS Fu


      Add the following to
     .../config/sms_fu.yml

   carriers:
    ...
    ruby_mobile:
      name: Ruby-Mobile
      value: @txt.ruby-mobile.com
SMS Fu




deliver_sms(‘5558675309’,
  ’ruby_mobile’, ‘hello!’)
Charges still apply to your users




         from flickr user ‘bowbrick’
Well, how can I receive
SMS or MMS from my
       Rails app?
Short Codes
Special short numbers that can be
  used to receive SMS or MMS
  messages from mobile phones
Short Codes
• MMS support added last year
• Crazy Expensive
 • Monthly fees up to $1000/mo
 • Setup fees close to $5000
• Many companies share short codes
• Some free solutions ...
Textmarks

• Offer a free and a paid service
• Short code: 41411
• Shared with others
• Choose your own keyword
Textmarks


 Special URL Variables
    • 1 - 9 Represents different words from the
      message sent.

    • 0 Represents the whole string
    • p Sender’s phone number
    • u Unique identifier for the phone number
    • k Keyword sent in message
    • t The time of the request
Textmarks

    http://myapp.com/sms/p/0
  map.retrieve_sms ‘sms/:phone/:text’,
            :controller ...etc
Textmarks




 def some_action
  ...
  render :text => ‘your response’
 end
Receiving SMS or MMS
  as e-mail is simple
Multimedia Message Service

• Can send photo, video, audio or other
  attachments
• Most commonly used for photos
• There’s a 300 KB limit
• Multipart MIME
The Problem with
         Receiving MMS
                       Crap

 Crap
Cat
 Crap
MMS2R
• Removes advertising
• Eliminates default subjects
• Decodes and extracts files from the
  multipart MIME e-mail
• Most major carriers are supported
MMS2R


Create a new MMS2R object from a TMail object
mms = MMS2R::Media.new(email)
MMS2R


Create a new MMS2R object from a TMail object
mms = MMS2R::Media.new(email)

Retrieve all media files from the MMS
mms.media
MMS2R


Create a new MMS2R object from a TMail object
mms = MMS2R::Media.new(email)

Retrieve all media files from the MMS
mms.media

Retrieve the intended attachment
mms.default_media
MMS2R


Create a new MMS2R object from a TMail object
mms = MMS2R::Media.new(email)

Retrieve all media files from the MMS
mms.media

Retrieve the intended attachment
mms.default_media

Retrieve the intended message
mms.body
MMS2R



mms.subject


mms.body

mms.default_media
MMS2R

 Example of a Carrier Template
 mms.myhelio.com.yml
 ---
 ignore:
   image/gif:
   - top.gif
   - bottom.gif
   - middle_img.gif
   text/html:
    - /<html>s+<head>s+<meta http-equiv="Content-Type
 " content="text/html; charset=iso-8859-1">s
 +<title>MMS Email</title>/im
 transform:
   text/plain:
   - - /Note:s{1,2}.*?s+message:s{1,2}(.+)$/m
     - "1"
MMS2R




   MMS2R is great for
   more than just MMS
Mobile Fu
http://github.com/brendanlim/mobile-fu/

               Rails IUI
 http://github.com/noelrappin/rails-iui/

               Clickatell
     http://clickatell.rubyforge.org/

                SMS Fu
 http://github.com/brendanlim/sms-fu/

                MMS2R
   http://github.com/monde/mms2r/
Questions?

More Related Content

What's hot

An Introduction to the WSO2 API Manager
An Introduction to the WSO2 API Manager An Introduction to the WSO2 API Manager
An Introduction to the WSO2 API Manager WSO2
 
서버 성능에 대한 정의와 이해
서버 성능에 대한 정의와 이해서버 성능에 대한 정의와 이해
서버 성능에 대한 정의와 이해중선 곽
 
Kakao Cloud Native Platform, 9rum
Kakao Cloud Native Platform, 9rumKakao Cloud Native Platform, 9rum
Kakao Cloud Native Platform, 9rumif kakao
 
[OpenStack Days Korea 2016] Track1 - Monasca를 이용한 Cloud 모니터링
[OpenStack Days Korea 2016] Track1 - Monasca를 이용한 Cloud 모니터링[OpenStack Days Korea 2016] Track1 - Monasca를 이용한 Cloud 모니터링
[OpenStack Days Korea 2016] Track1 - Monasca를 이용한 Cloud 모니터링OpenStack Korea Community
 
Deep dive into highly available open stack architecture openstack summit va...
Deep dive into highly available open stack architecture   openstack summit va...Deep dive into highly available open stack architecture   openstack summit va...
Deep dive into highly available open stack architecture openstack summit va...Arthur Berezin
 
Transforming to Microservices
Transforming to MicroservicesTransforming to Microservices
Transforming to MicroservicesKyle Brown
 
How OpenShift SDN helps to automate
How OpenShift SDN helps to automateHow OpenShift SDN helps to automate
How OpenShift SDN helps to automateIlkka Tengvall
 
Schema Registry 101 with Bill Bejeck | Kafka Summit London 2022
Schema Registry 101 with Bill Bejeck | Kafka Summit London 2022Schema Registry 101 with Bill Bejeck | Kafka Summit London 2022
Schema Registry 101 with Bill Bejeck | Kafka Summit London 2022HostedbyConfluent
 
Deploying Confluent Platform for Production
Deploying Confluent Platform for ProductionDeploying Confluent Platform for Production
Deploying Confluent Platform for Productionconfluent
 
IBM MQ and Kafka, what is the difference?
IBM MQ and Kafka, what is the difference?IBM MQ and Kafka, what is the difference?
IBM MQ and Kafka, what is the difference?David Ware
 
Event driven workloads on Kubernetes with KEDA
Event driven workloads on Kubernetes with KEDAEvent driven workloads on Kubernetes with KEDA
Event driven workloads on Kubernetes with KEDANilesh Gule
 
OpenStackで始めるクラウド環境構築入門
OpenStackで始めるクラウド環境構築入門OpenStackで始めるクラウド環境構築入門
OpenStackで始めるクラウド環境構築入門VirtualTech Japan Inc.
 
eZ Publish Caching Mechanisms
eZ Publish Caching MechanismseZ Publish Caching Mechanisms
eZ Publish Caching MechanismsKaliop-slide
 
Service Mesh with Apache Kafka, Kubernetes, Envoy, Istio and Linkerd
Service Mesh with Apache Kafka, Kubernetes, Envoy, Istio and LinkerdService Mesh with Apache Kafka, Kubernetes, Envoy, Istio and Linkerd
Service Mesh with Apache Kafka, Kubernetes, Envoy, Istio and LinkerdKai Wähner
 
Building Large-Scale Stream Infrastructures Across Multiple Data Centers with...
Building Large-Scale Stream Infrastructures Across Multiple Data Centers with...Building Large-Scale Stream Infrastructures Across Multiple Data Centers with...
Building Large-Scale Stream Infrastructures Across Multiple Data Centers with...DataWorks Summit/Hadoop Summit
 
Accelerating DevOps with ChatOps
Accelerating DevOps with ChatOpsAccelerating DevOps with ChatOps
Accelerating DevOps with ChatOpsRohan Rath
 
Heroku Connect: The New Way to Build Connected Customer Applications
Heroku Connect: The New Way to Build Connected Customer ApplicationsHeroku Connect: The New Way to Build Connected Customer Applications
Heroku Connect: The New Way to Build Connected Customer ApplicationsHeroku
 
Designing a complete ci cd pipeline using argo events, workflow and cd products
Designing a complete ci cd pipeline using argo events, workflow and cd productsDesigning a complete ci cd pipeline using argo events, workflow and cd products
Designing a complete ci cd pipeline using argo events, workflow and cd productsJulian Mazzitelli
 

What's hot (20)

An Introduction to the WSO2 API Manager
An Introduction to the WSO2 API Manager An Introduction to the WSO2 API Manager
An Introduction to the WSO2 API Manager
 
서버 성능에 대한 정의와 이해
서버 성능에 대한 정의와 이해서버 성능에 대한 정의와 이해
서버 성능에 대한 정의와 이해
 
Kakao Cloud Native Platform, 9rum
Kakao Cloud Native Platform, 9rumKakao Cloud Native Platform, 9rum
Kakao Cloud Native Platform, 9rum
 
[OpenStack Days Korea 2016] Track1 - Monasca를 이용한 Cloud 모니터링
[OpenStack Days Korea 2016] Track1 - Monasca를 이용한 Cloud 모니터링[OpenStack Days Korea 2016] Track1 - Monasca를 이용한 Cloud 모니터링
[OpenStack Days Korea 2016] Track1 - Monasca를 이용한 Cloud 모니터링
 
Deep dive into highly available open stack architecture openstack summit va...
Deep dive into highly available open stack architecture   openstack summit va...Deep dive into highly available open stack architecture   openstack summit va...
Deep dive into highly available open stack architecture openstack summit va...
 
API Gateway report
API Gateway reportAPI Gateway report
API Gateway report
 
Transforming to Microservices
Transforming to MicroservicesTransforming to Microservices
Transforming to Microservices
 
How OpenShift SDN helps to automate
How OpenShift SDN helps to automateHow OpenShift SDN helps to automate
How OpenShift SDN helps to automate
 
Schema Registry 101 with Bill Bejeck | Kafka Summit London 2022
Schema Registry 101 with Bill Bejeck | Kafka Summit London 2022Schema Registry 101 with Bill Bejeck | Kafka Summit London 2022
Schema Registry 101 with Bill Bejeck | Kafka Summit London 2022
 
Deploying Confluent Platform for Production
Deploying Confluent Platform for ProductionDeploying Confluent Platform for Production
Deploying Confluent Platform for Production
 
IBM MQ and Kafka, what is the difference?
IBM MQ and Kafka, what is the difference?IBM MQ and Kafka, what is the difference?
IBM MQ and Kafka, what is the difference?
 
API and Microservices Management
API and Microservices ManagementAPI and Microservices Management
API and Microservices Management
 
Event driven workloads on Kubernetes with KEDA
Event driven workloads on Kubernetes with KEDAEvent driven workloads on Kubernetes with KEDA
Event driven workloads on Kubernetes with KEDA
 
OpenStackで始めるクラウド環境構築入門
OpenStackで始めるクラウド環境構築入門OpenStackで始めるクラウド環境構築入門
OpenStackで始めるクラウド環境構築入門
 
eZ Publish Caching Mechanisms
eZ Publish Caching MechanismseZ Publish Caching Mechanisms
eZ Publish Caching Mechanisms
 
Service Mesh with Apache Kafka, Kubernetes, Envoy, Istio and Linkerd
Service Mesh with Apache Kafka, Kubernetes, Envoy, Istio and LinkerdService Mesh with Apache Kafka, Kubernetes, Envoy, Istio and Linkerd
Service Mesh with Apache Kafka, Kubernetes, Envoy, Istio and Linkerd
 
Building Large-Scale Stream Infrastructures Across Multiple Data Centers with...
Building Large-Scale Stream Infrastructures Across Multiple Data Centers with...Building Large-Scale Stream Infrastructures Across Multiple Data Centers with...
Building Large-Scale Stream Infrastructures Across Multiple Data Centers with...
 
Accelerating DevOps with ChatOps
Accelerating DevOps with ChatOpsAccelerating DevOps with ChatOps
Accelerating DevOps with ChatOps
 
Heroku Connect: The New Way to Build Connected Customer Applications
Heroku Connect: The New Way to Build Connected Customer ApplicationsHeroku Connect: The New Way to Build Connected Customer Applications
Heroku Connect: The New Way to Build Connected Customer Applications
 
Designing a complete ci cd pipeline using argo events, workflow and cd products
Designing a complete ci cd pipeline using argo events, workflow and cd productsDesigning a complete ci cd pipeline using argo events, workflow and cd products
Designing a complete ci cd pipeline using argo events, workflow and cd products
 

Viewers also liked

Παράξενος Μαθηματικός Λογισμός
Παράξενος Μαθηματικός ΛογισμόςΠαράξενος Μαθηματικός Λογισμός
Παράξενος Μαθηματικός Λογισμόςgiatousfilous
 
ExL Pharma Clinical Trials Phase I and Phase IIa Conference Brochure: Phase 1...
ExL Pharma Clinical Trials Phase I and Phase IIa Conference Brochure: Phase 1...ExL Pharma Clinical Trials Phase I and Phase IIa Conference Brochure: Phase 1...
ExL Pharma Clinical Trials Phase I and Phase IIa Conference Brochure: Phase 1...bryonmain
 
Journey to agra
Journey to agraJourney to agra
Journey to agraHeena Modi
 
Interview with Warren Buffet
Interview with Warren BuffetInterview with Warren Buffet
Interview with Warren BuffetHeena Modi
 
Mahatma Gandhi
Mahatma GandhiMahatma Gandhi
Mahatma GandhiHeena Modi
 
Presentation1[1]
Presentation1[1]Presentation1[1]
Presentation1[1]gueste3727
 
Software Testing Services
Software Testing ServicesSoftware Testing Services
Software Testing ServicesFuad Mak
 
ROI Conference 2013 - Your Social Success Story
ROI Conference 2013 - Your Social Success StoryROI Conference 2013 - Your Social Success Story
ROI Conference 2013 - Your Social Success StoryChris Treadaway
 
Liam Mc Cormick Architecture
Liam Mc Cormick ArchitectureLiam Mc Cormick Architecture
Liam Mc Cormick ArchitectureDamien Wilson
 
Bio - Jean Fares Couture
Bio - Jean Fares CoutureBio - Jean Fares Couture
Bio - Jean Fares CoutureNorma HAYEK
 
Buffalo Social Media Summit Presentation
Buffalo Social Media Summit PresentationBuffalo Social Media Summit Presentation
Buffalo Social Media Summit PresentationChris Treadaway
 
The Path to Social ROI - Facebook Marketing Success Summit 2012
The Path to Social ROI - Facebook Marketing Success Summit 2012The Path to Social ROI - Facebook Marketing Success Summit 2012
The Path to Social ROI - Facebook Marketing Success Summit 2012Chris Treadaway
 

Viewers also liked (20)

Παράξενος Μαθηματικός Λογισμός
Παράξενος Μαθηματικός ΛογισμόςΠαράξενος Μαθηματικός Λογισμός
Παράξενος Μαθηματικός Λογισμός
 
Indian Art
Indian ArtIndian Art
Indian Art
 
ExL Pharma Clinical Trials Phase I and Phase IIa Conference Brochure: Phase 1...
ExL Pharma Clinical Trials Phase I and Phase IIa Conference Brochure: Phase 1...ExL Pharma Clinical Trials Phase I and Phase IIa Conference Brochure: Phase 1...
ExL Pharma Clinical Trials Phase I and Phase IIa Conference Brochure: Phase 1...
 
Journey to agra
Journey to agraJourney to agra
Journey to agra
 
Milieu
MilieuMilieu
Milieu
 
Milieu
MilieuMilieu
Milieu
 
Interview with Warren Buffet
Interview with Warren BuffetInterview with Warren Buffet
Interview with Warren Buffet
 
Mahatma Gandhi
Mahatma GandhiMahatma Gandhi
Mahatma Gandhi
 
Fisketur til Mozambique, marts 2010
Fisketur til Mozambique, marts 2010Fisketur til Mozambique, marts 2010
Fisketur til Mozambique, marts 2010
 
Presentation1[1]
Presentation1[1]Presentation1[1]
Presentation1[1]
 
Linkedin power point
Linkedin power pointLinkedin power point
Linkedin power point
 
Software Testing Services
Software Testing ServicesSoftware Testing Services
Software Testing Services
 
ROI Conference 2013 - Your Social Success Story
ROI Conference 2013 - Your Social Success StoryROI Conference 2013 - Your Social Success Story
ROI Conference 2013 - Your Social Success Story
 
Fiske Tur Afrika
Fiske Tur AfrikaFiske Tur Afrika
Fiske Tur Afrika
 
Liam Mc Cormick Architecture
Liam Mc Cormick ArchitectureLiam Mc Cormick Architecture
Liam Mc Cormick Architecture
 
Bio - Jean Fares Couture
Bio - Jean Fares CoutureBio - Jean Fares Couture
Bio - Jean Fares Couture
 
Buffalo Social Media Summit Presentation
Buffalo Social Media Summit PresentationBuffalo Social Media Summit Presentation
Buffalo Social Media Summit Presentation
 
Concepting
ConceptingConcepting
Concepting
 
The Path to Social ROI - Facebook Marketing Success Summit 2012
The Path to Social ROI - Facebook Marketing Success Summit 2012The Path to Social ROI - Facebook Marketing Success Summit 2012
The Path to Social ROI - Facebook Marketing Success Summit 2012
 
LectureNotes-01-DSA
LectureNotes-01-DSALectureNotes-01-DSA
LectureNotes-01-DSA
 

Similar to Mobilizing Your Rails Application - Rails Underground, London, UK

AppsFuel, il nuovo marketplace per mobile web app e mobile site!
AppsFuel, il nuovo marketplace per mobile web app e mobile site!AppsFuel, il nuovo marketplace per mobile web app e mobile site!
AppsFuel, il nuovo marketplace per mobile web app e mobile site!Mobile Web Italy Meetup
 
IBM Mobile portal experience
IBM Mobile portal experienceIBM Mobile portal experience
IBM Mobile portal experienceVincent Perrin
 
Mobile applications chapter 4
Mobile applications chapter 4Mobile applications chapter 4
Mobile applications chapter 4Akib B. Momin
 
Hybrid vs Native vs Web Apps
Hybrid vs Native vs Web AppsHybrid vs Native vs Web Apps
Hybrid vs Native vs Web AppsPoluru S
 
Mobile Web High Performance
Mobile Web High PerformanceMobile Web High Performance
Mobile Web High PerformanceAmjad Rafique
 
The Mobile Web Revealed For The Java Developer
The Mobile Web Revealed For The Java DeveloperThe Mobile Web Revealed For The Java Developer
The Mobile Web Revealed For The Java Developerbalunasj
 
Mobile Web Best Practices
Mobile Web Best PracticesMobile Web Best Practices
Mobile Web Best PracticesWoody Pewitt
 
Introduction to iPhone App Development - midVentures DESIGN+DEVELOP
Introduction to iPhone App Development - midVentures DESIGN+DEVELOPIntroduction to iPhone App Development - midVentures DESIGN+DEVELOP
Introduction to iPhone App Development - midVentures DESIGN+DEVELOPKeyLimeTie
 
Mobile App Development
Mobile App DevelopmentMobile App Development
Mobile App DevelopmentChris Morrell
 
10 Things To Make You a Great Mobile Web Developer
10 Things To Make You a Great Mobile Web Developer10 Things To Make You a Great Mobile Web Developer
10 Things To Make You a Great Mobile Web DeveloperTellago
 
10 things to make you a Great Mobile Web Developer
10 things to make you a Great Mobile Web Developer10 things to make you a Great Mobile Web Developer
10 things to make you a Great Mobile Web DeveloperChris Love
 
10 Things To Make You a Great Mobile Web Developer
10 Things To Make You a Great Mobile Web Developer10 Things To Make You a Great Mobile Web Developer
10 Things To Make You a Great Mobile Web DeveloperTellago
 
Capitalizing on the Mobile Web
Capitalizing on the Mobile WebCapitalizing on the Mobile Web
Capitalizing on the Mobile WebBrandon Eley
 
Macronimous web solutions
Macronimous web solutionsMacronimous web solutions
Macronimous web solutionsPromoteFirst
 
An Intro to Macronimous
An Intro to Macronimous An Intro to Macronimous
An Intro to Macronimous Macronimous
 
Building mobile website with Joomla - Joomla!Days NL 2010 #jd10nl
Building mobile website with Joomla -  Joomla!Days NL 2010 #jd10nlBuilding mobile website with Joomla -  Joomla!Days NL 2010 #jd10nl
Building mobile website with Joomla - Joomla!Days NL 2010 #jd10nlJoomla!Days Netherlands
 
Architecting mobile solutions
Architecting mobile solutions Architecting mobile solutions
Architecting mobile solutions Sachin Bhosale
 

Similar to Mobilizing Your Rails Application - Rails Underground, London, UK (20)

chapter2
chapter2chapter2
chapter2
 
AppsFuel, il nuovo marketplace per mobile web app e mobile site!
AppsFuel, il nuovo marketplace per mobile web app e mobile site!AppsFuel, il nuovo marketplace per mobile web app e mobile site!
AppsFuel, il nuovo marketplace per mobile web app e mobile site!
 
DDive- Giuseppe Grasso - mobile su Lotus
DDive- Giuseppe Grasso - mobile su LotusDDive- Giuseppe Grasso - mobile su Lotus
DDive- Giuseppe Grasso - mobile su Lotus
 
IBM Mobile portal experience
IBM Mobile portal experienceIBM Mobile portal experience
IBM Mobile portal experience
 
Mobile applications chapter 4
Mobile applications chapter 4Mobile applications chapter 4
Mobile applications chapter 4
 
Hybrid vs Native vs Web Apps
Hybrid vs Native vs Web AppsHybrid vs Native vs Web Apps
Hybrid vs Native vs Web Apps
 
Mobile Web High Performance
Mobile Web High PerformanceMobile Web High Performance
Mobile Web High Performance
 
The Mobile Web Revealed For The Java Developer
The Mobile Web Revealed For The Java DeveloperThe Mobile Web Revealed For The Java Developer
The Mobile Web Revealed For The Java Developer
 
Mobile Web Best Practices
Mobile Web Best PracticesMobile Web Best Practices
Mobile Web Best Practices
 
Introduction to iPhone App Development - midVentures DESIGN+DEVELOP
Introduction to iPhone App Development - midVentures DESIGN+DEVELOPIntroduction to iPhone App Development - midVentures DESIGN+DEVELOP
Introduction to iPhone App Development - midVentures DESIGN+DEVELOP
 
SWTT 140407 session01
SWTT 140407 session01SWTT 140407 session01
SWTT 140407 session01
 
Mobile App Development
Mobile App DevelopmentMobile App Development
Mobile App Development
 
10 Things To Make You a Great Mobile Web Developer
10 Things To Make You a Great Mobile Web Developer10 Things To Make You a Great Mobile Web Developer
10 Things To Make You a Great Mobile Web Developer
 
10 things to make you a Great Mobile Web Developer
10 things to make you a Great Mobile Web Developer10 things to make you a Great Mobile Web Developer
10 things to make you a Great Mobile Web Developer
 
10 Things To Make You a Great Mobile Web Developer
10 Things To Make You a Great Mobile Web Developer10 Things To Make You a Great Mobile Web Developer
10 Things To Make You a Great Mobile Web Developer
 
Capitalizing on the Mobile Web
Capitalizing on the Mobile WebCapitalizing on the Mobile Web
Capitalizing on the Mobile Web
 
Macronimous web solutions
Macronimous web solutionsMacronimous web solutions
Macronimous web solutions
 
An Intro to Macronimous
An Intro to Macronimous An Intro to Macronimous
An Intro to Macronimous
 
Building mobile website with Joomla - Joomla!Days NL 2010 #jd10nl
Building mobile website with Joomla -  Joomla!Days NL 2010 #jd10nlBuilding mobile website with Joomla -  Joomla!Days NL 2010 #jd10nl
Building mobile website with Joomla - Joomla!Days NL 2010 #jd10nl
 
Architecting mobile solutions
Architecting mobile solutions Architecting mobile solutions
Architecting mobile solutions
 

More from Brendan Lim

Developing Cocoa Applications with macRuby
Developing Cocoa Applications with macRubyDeveloping Cocoa Applications with macRuby
Developing Cocoa Applications with macRubyBrendan Lim
 
Introduction to Palm's Mojo SDK
Introduction to Palm's Mojo SDKIntroduction to Palm's Mojo SDK
Introduction to Palm's Mojo SDKBrendan Lim
 
Building Native Apps With Titanium Mobile
Building Native Apps With Titanium MobileBuilding Native Apps With Titanium Mobile
Building Native Apps With Titanium MobileBrendan Lim
 
Im Mobile Who's Coming With Me
Im Mobile Who's Coming With MeIm Mobile Who's Coming With Me
Im Mobile Who's Coming With MeBrendan Lim
 
MacRuby to The Max
MacRuby to The MaxMacRuby to The Max
MacRuby to The MaxBrendan Lim
 
The Lure Of Ubiquitous Mobile
The Lure Of Ubiquitous MobileThe Lure Of Ubiquitous Mobile
The Lure Of Ubiquitous MobileBrendan Lim
 
Mobilizing Your Rails Application - LA Ruby Conference 2009
Mobilizing Your Rails Application - LA Ruby Conference 2009Mobilizing Your Rails Application - LA Ruby Conference 2009
Mobilizing Your Rails Application - LA Ruby Conference 2009Brendan Lim
 

More from Brendan Lim (7)

Developing Cocoa Applications with macRuby
Developing Cocoa Applications with macRubyDeveloping Cocoa Applications with macRuby
Developing Cocoa Applications with macRuby
 
Introduction to Palm's Mojo SDK
Introduction to Palm's Mojo SDKIntroduction to Palm's Mojo SDK
Introduction to Palm's Mojo SDK
 
Building Native Apps With Titanium Mobile
Building Native Apps With Titanium MobileBuilding Native Apps With Titanium Mobile
Building Native Apps With Titanium Mobile
 
Im Mobile Who's Coming With Me
Im Mobile Who's Coming With MeIm Mobile Who's Coming With Me
Im Mobile Who's Coming With Me
 
MacRuby to The Max
MacRuby to The MaxMacRuby to The Max
MacRuby to The Max
 
The Lure Of Ubiquitous Mobile
The Lure Of Ubiquitous MobileThe Lure Of Ubiquitous Mobile
The Lure Of Ubiquitous Mobile
 
Mobilizing Your Rails Application - LA Ruby Conference 2009
Mobilizing Your Rails Application - LA Ruby Conference 2009Mobilizing Your Rails Application - LA Ruby Conference 2009
Mobilizing Your Rails Application - LA Ruby Conference 2009
 

Recently uploaded

Potential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsPotential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsRavi Sanghani
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .Alan Dix
 
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxPasskey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxLoriGlavin3
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxLoriGlavin3
 
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Alkin Tezuysal
 
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...panagenda
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxLoriGlavin3
 
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteTake control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteDianaGray10
 
Connecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfConnecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfNeo4j
 
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality AssuranceInflectra
 
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Mark Goldstein
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch TuesdayIvanti
 
Sample pptx for embedding into website for demo
Sample pptx for embedding into website for demoSample pptx for embedding into website for demo
Sample pptx for embedding into website for demoHarshalMandlekar2
 
Data governance with Unity Catalog Presentation
Data governance with Unity Catalog PresentationData governance with Unity Catalog Presentation
Data governance with Unity Catalog PresentationKnoldus Inc.
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxLoriGlavin3
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxLoriGlavin3
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxLoriGlavin3
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Farhan Tariq
 
Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rick Flair
 
Generative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersGenerative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersRaghuram Pandurangan
 

Recently uploaded (20)

Potential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsPotential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and Insights
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .
 
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxPasskey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
 
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
 
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
 
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteTake control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test Suite
 
Connecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfConnecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdf
 
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
 
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch Tuesday
 
Sample pptx for embedding into website for demo
Sample pptx for embedding into website for demoSample pptx for embedding into website for demo
Sample pptx for embedding into website for demo
 
Data governance with Unity Catalog Presentation
Data governance with Unity Catalog PresentationData governance with Unity Catalog Presentation
Data governance with Unity Catalog Presentation
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...
 
Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...
 
Generative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersGenerative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information Developers
 

Mobilizing Your Rails Application - Rails Underground, London, UK

  • 1. Mobilize Your Rails Application Brendan Lim brendan@intridea.com @brendanlim
  • 2.
  • 3. Why care about mobile • Estimated 4 billion mobile users • More mobile phones than personal computers • In developing nations, a mobile phone is sometimes their only way to connect to the Internet
  • 4. Some mobile stats 7.00 5.25 6.7 3.50 4.0 1.75 2.0 World Population 0 Mobile Users Mobile Web Access (in billions)
  • 5.
  • 6. Twitter Google Reader Present.ly
  • 7. We should cater to our mobile audience
  • 8.
  • 9. One Web Making the same information and services available to all users regardless of what device they are using.
  • 10. Problems with one web • Max resolution? • JavaScript support? • Flash support? • Connection speed?
  • 11. Mobile Fu • Can detect if a user is on a mobile device • Ability to add custom styling based on the device’s user agent • Helps bring us closer to one web
  • 12. Mobile Fu class ApplicationController < ActionController::Base has_mobile_fu end
  • 13. Mobile Fu demo.presentlyapp.com iPhone Safari
  • 14. Mobile Fu respond_to do |format| format.html format.mobile end views/ layouts/ blah.html.erb blah.mobile.erb sessions/ new.html.erb new.mobile.erb
  • 15. Mobile Fu <%= stylesheet_link_tag 'foo' %>
  • 16. Mobile Fu <%= stylesheet_link_tag 'foo' %> iPhone foo_iphone.css
  • 17. Mobile Fu <%= stylesheet_link_tag 'foo' %> iPhone foo_iphone.css Android foo_android.css
  • 18. Mobile Fu <%= stylesheet_link_tag 'foo' %> iPhone foo_iphone.css Android foo_android.css BlackBerry foo_blackberry.css
  • 19. Mobile Fu <%= stylesheet_link_tag 'foo' %> iPhone foo_iphone.css Android foo_android.css BlackBerry foo_blackberry.css Win Mobile foo_mobileexplorer.css
  • 21. Mobile Fu Is the user using a mobile device? is_mobile_device?
  • 22. Mobile Fu Is the user using a mobile device? is_mobile_device? Is the user using a specific device? is_device?(‘blackberry’)
  • 23. Mobile Fu Is the user using a mobile device? is_mobile_device? Is the user using a specific device? is_device?(‘blackberry’) Is the request format currently :mobile ? in_mobile_view?
  • 24. Mobile Fu ../layouts/blah.mobile.erb <%= mobile_xhtml_doctype(:mobile, ‘1.0’) %> <html> <head> ... </head> <body> ... </body> </html> http://mobiforge.com/designing/story/comparison-xhtml-mobile- profile-and-xhtml-basic
  • 25. Mobile Fu ../layouts/blah.mobile.erb <?xml version="1.0" charset="UTF-8" ?> <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http:// www.wapforum.org/DTD/xhtml-mobile10.dtd"> <html> <head> ... </head> <body> ... </body> </html> http://mobiforge.com/designing/story/comparison-xhtml-mobile- profile-and-xhtml-basic
  • 26. Rails iUI • Wrapper for iUI user interface framework • JavaScript & CSS framework for developing iPhone webapps • Can determine device orientation • Provides an ‘iPhone-Like’ experience
  • 28. Rails iUI Install iUI images & styles rake iui:install
  • 29. Rails iUI Install iUI images & styles rake iui:install Install compact version of iUI images & styles rake iui:install_compact
  • 30. Rails iUI Install iUI images & styles rake iui:install Install compact version of iUI images & styles rake iui:install_compact Completely remove all iUI images & styles rake iui:clean
  • 31. Rails iUI class ApplicationController < ActionController::Base acts_as_iphone_controller end ../layouts/blah.iphone.erb <html> <head> ... <%= include_iui_files %> </head> ... </html>
  • 32. Rails iUI respond_to do |format| format.html format.iphone end views/ layouts/ blah.html.erb blah.iphone.erb blah/ blah.html.erb blah.iphone.erb
  • 33. Rails iUI Create an iPhone style toolbar iui_toolbar(initial_caption,search_url = nil)
  • 34. Rails iUI Create an iPhone style button button_link_to(name,options,html_options = {})
  • 35. Rails iUI Creates an iPhone style TableView iui_list(items,options = {})
  • 36. Rails iUI Creates a grouped iPhone style Tableview iui_grouped_list(items,options = {}, &group_by_block)
  • 37. Rails iUI Respond to change in the iPhone’s orientation observe_orientation_change(url_options = {}) <html> <head> <meta name=‘viewport’ content=‘width=device- width, user-scalable=no”> <%= observe_orientation_change(:controller => ‘sample’, :action => ‘flip’ %> </head> <body <%= register_orientation_change %>> ... </body> </html>
  • 38. Rails iUI Respond to change in the iPhone’s orientation observe_orientation_change(url_options = {}) params[:position] = “0” Upright (portrait) “90” Counter clockwise (landscape) “-90” Clockwise (landscape)
  • 40. Short Message Service • Text messages are read by about 94% of their recipients. • Supported by almost all mobile phones out there • Good for quick notifications • Generally limited to 160 characters
  • 41. What tools can we use to send SMS messages from our Rails application?
  • 42. Clickatell • Paid solution • Uses Clickatell’s API • Currently around 5-7 pence per text message sent within the UK (depending on carrier destination) • No need to know the recipient’s carrier
  • 43. Clickatell require 'clickatell' api = Clickatell::API.authenticate('your_api_id', 'your_username', 'your_password') api.send_message('5558675309', 'Hello from clickatell')
  • 44. SMS Fu • Doesn’t cost the sender anything • Leverages e-mail to send an SMS • You need to know the recipient’s carrier • Not as many supported carriers as Clickatell
  • 45. SMS Fu Wait, it’s free?
  • 46. SMS Fu Number: 555-867-5309 Carrier: AT&T 5558675309@txt.att.net
  • 47. SMS Fu class AwesomeController < ApplicationController has_sms_fu end deliver_sms(‘5558675309’,’at&t’, ‘hello!’)
  • 48. SMS Fu Deliver an SMS deliver_sms(number,carrier,message)
  • 49. SMS Fu Deliver an SMS deliver_sms(number,carrier,message) Retrieve SMS e-mail address get_sms_address(number,carrier)
  • 50. SMS Fu Deliver an SMS deliver_sms(number,carrier,message) Retrieve SMS e-mail address get_sms_address(number,carrier) Custom select box with carriers carrier_select(field_name,default_text)
  • 51. SMS Fu Deliver an SMS deliver_sms(number,carrier,message) Retrieve SMS e-mail address get_sms_address(number,carrier) Custom select box with carriers carrier_select(field_name,default_text) Retrieve back carrier options for select carrier_collection
  • 52. SMS Fu Supported Carriers Alltell, Ameritech, AT&T, Bell South Mobility, BlueSkyFrog, Boost Mobile, Cellular South, Kajeet, Metro PCS, Powertel, PSC Wireless, Qwest, Southern Link, Spring, Rodgers, Suncom, T-Mobile, Virgin Mobile, Verizon Wireless, E-Plus, O2, Orange, Telconica, Vodafone....
  • 53. SMS Fu What if I want to add a new carrier?
  • 54. SMS Fu Add the following to .../config/sms_fu.yml carriers: ... ruby_mobile: name: Ruby-Mobile value: @txt.ruby-mobile.com
  • 55. SMS Fu deliver_sms(‘5558675309’, ’ruby_mobile’, ‘hello!’)
  • 56. Charges still apply to your users from flickr user ‘bowbrick’
  • 57. Well, how can I receive SMS or MMS from my Rails app?
  • 58. Short Codes Special short numbers that can be used to receive SMS or MMS messages from mobile phones
  • 59.
  • 60. Short Codes • MMS support added last year • Crazy Expensive • Monthly fees up to $1000/mo • Setup fees close to $5000 • Many companies share short codes • Some free solutions ...
  • 61. Textmarks • Offer a free and a paid service • Short code: 41411 • Shared with others • Choose your own keyword
  • 62. Textmarks Special URL Variables • 1 - 9 Represents different words from the message sent. • 0 Represents the whole string • p Sender’s phone number • u Unique identifier for the phone number • k Keyword sent in message • t The time of the request
  • 63. Textmarks http://myapp.com/sms/p/0 map.retrieve_sms ‘sms/:phone/:text’, :controller ...etc
  • 64. Textmarks def some_action ... render :text => ‘your response’ end
  • 65. Receiving SMS or MMS as e-mail is simple
  • 66. Multimedia Message Service • Can send photo, video, audio or other attachments • Most commonly used for photos • There’s a 300 KB limit • Multipart MIME
  • 67. The Problem with Receiving MMS Crap Crap Cat Crap
  • 68. MMS2R • Removes advertising • Eliminates default subjects • Decodes and extracts files from the multipart MIME e-mail • Most major carriers are supported
  • 69. MMS2R Create a new MMS2R object from a TMail object mms = MMS2R::Media.new(email)
  • 70. MMS2R Create a new MMS2R object from a TMail object mms = MMS2R::Media.new(email) Retrieve all media files from the MMS mms.media
  • 71. MMS2R Create a new MMS2R object from a TMail object mms = MMS2R::Media.new(email) Retrieve all media files from the MMS mms.media Retrieve the intended attachment mms.default_media
  • 72. MMS2R Create a new MMS2R object from a TMail object mms = MMS2R::Media.new(email) Retrieve all media files from the MMS mms.media Retrieve the intended attachment mms.default_media Retrieve the intended message mms.body
  • 74. MMS2R Example of a Carrier Template mms.myhelio.com.yml --- ignore:   image/gif:   - top.gif   - bottom.gif   - middle_img.gif   text/html:    - /<html>s+<head>s+<meta http-equiv="Content-Type " content="text/html; charset=iso-8859-1">s +<title>MMS Email</title>/im transform:   text/plain:   - - /Note:s{1,2}.*?s+message:s{1,2}(.+)$/m     - "1"
  • 75. MMS2R MMS2R is great for more than just MMS
  • 76. Mobile Fu http://github.com/brendanlim/mobile-fu/ Rails IUI http://github.com/noelrappin/rails-iui/ Clickatell http://clickatell.rubyforge.org/ SMS Fu http://github.com/brendanlim/sms-fu/ MMS2R http://github.com/monde/mms2r/

Editor's Notes

  1. We&amp;#x2019;re a products and services company that works primarily with Rails based out of Washington DC. We also do mobile application development for all major platforms.
  2. There&amp;#x2019;s around 4 billion or so mobile users right now in the world. I believe it was around 3 billion last year, which shows that this number is growing quite quickly. An interesting fact is that there&amp;#x2019;s more mobile phones in the world than personal computers -- which actually makes sense. I personally don&amp;#x2019;t know anybody that doesn&amp;#x2019;t actually have a mobile phone. Who here doesn&amp;#x2019;t have a phone? Who here knows somebody without a phone? It&amp;#x2019;s also good to point out that in some developing nations a mobile phone is sometimes their only way to reach the internet.
  3. So here&amp;#x2019;s a nice chart that puts things into perspective. The world population is now around 6.7 billion people and the number of mobile users is sitting at 4 billion and those with web access is around half of that. That&amp;#x2019;s a large audience that we should try tap into.
  4. Our mobile phones are almost wirelessly connected all of the time. We have access to all of our favorite services within the cloud.
  5. We&amp;#x2019;re probably pretty familiar with these examples. Here&amp;#x2019;s twitter, google reader, and presently -- these screenshots shows these different web applications rendered specifically for mobile devices.
  6. We need to make sure that we take care of all of our mobile users. We should make our application accessible by as many mobile users as we can, all over the world. Not only should we allow them to browse our application from their phones but we should also allow them to interact with our site using SMS, MMS, or e-mail. Many web apps allow us to update our status, upload photos or attachments, just by e-mailing, SMS&amp;#x2019;ing or MMS&amp;#x2019;ing from their phones.
  7. In this talk I won&amp;#x2019;t be talking about how you can make a WAP or WML version of your site. Users that spend a good amount of time browsing the web on their mobile devices normally can access the real or mobile web. We&amp;#x2019;re going to explore ways to optimize your application for these mobile devices. We can still take care of these users by allowing them to interact with us through SMS.
  8. What we&amp;#x2019;re all trying to strive for is One Web. One web is making the same information and services available to all users regardless of what device they are using. It&amp;#x2019;s also referred to as the &amp;#x2018;ubiquitous web&amp;#x2019;. So if a person is on their phone we want them to be able to interact with the same type of services that they&amp;#x2019;d be able to interact with on their desktop or laptop computer.
  9. It&amp;#x2019;s because of hardware and software specific reasons that we&amp;#x2019;re unable to reach One Web just yet. Unless your Rails application consists of a very simple text-only view, having just one view for all devices is not a good solution at all. Because of different hardware we have to think of the maximum resolution supported. We need to think about providing a slimmed down version of our UI because connection speed may still be an issue. Also, some devices do not support JavaScript or Flash -- so we need to make sure to take these factors into account as well.
  10. Here you can see both a regular request from a standard web browser and one from mobile safari through an iPhone
  11. This is just a simple example of what we&amp;#x2019;re doing to get mobile users to use your mobile template. This is all pretty straight forward. In your respond_to block we added format.mobile. What Mobile Fu does is compare the user agent of the device hitting your application -- and if it matches one of the user agents from its predefined list, it sets the request format to mobile. As you can see on the bottom -- we actually still have to create our own separate views that are specific to our mobile devices. Mobile Fu doesn&amp;#x2019;t automagically convert your old HTML views to mobile ones -- so it&amp;#x2019;s still up to you though to create these views yourself.
  12. Have any of you used browserized styles? It&amp;#x2019;s a plugin by my co-worker Michael Bleigh? For those of you who aren&amp;#x2019;t familiar -- what browserized styles does is allow you to provide browser specific styling. You could have your stylesheet link tag just like it is there and if someone were to go to visit your app using IE it would load an IE specific stylesheet. Mobile Fu works the same way. Mobile Fu includes a modified version of browserized styles that overrides your default stylesheets for specific devices, if the file exists. So, depending on what device you have, mobile fu looks for a specific stylesheet. It&amp;#x2019;s pretty straight forward. If somebody hits your device from an iphone it will look for, in this case, foo_iphone, android would be foo_android, and so on. At the moment, the only way to change what it&amp;#x2019;s looking for is to change the code within the plugin. I&amp;#x2019;ll be making this more easily configurable rather soon.
  13. Have any of you used browserized styles? It&amp;#x2019;s a plugin by my co-worker Michael Bleigh? For those of you who aren&amp;#x2019;t familiar -- what browserized styles does is allow you to provide browser specific styling. You could have your stylesheet link tag just like it is there and if someone were to go to visit your app using IE it would load an IE specific stylesheet. Mobile Fu works the same way. Mobile Fu includes a modified version of browserized styles that overrides your default stylesheets for specific devices, if the file exists. So, depending on what device you have, mobile fu looks for a specific stylesheet. It&amp;#x2019;s pretty straight forward. If somebody hits your device from an iphone it will look for, in this case, foo_iphone, android would be foo_android, and so on. At the moment, the only way to change what it&amp;#x2019;s looking for is to change the code within the plugin. I&amp;#x2019;ll be making this more easily configurable rather soon.
  14. Have any of you used browserized styles? It&amp;#x2019;s a plugin by my co-worker Michael Bleigh? For those of you who aren&amp;#x2019;t familiar -- what browserized styles does is allow you to provide browser specific styling. You could have your stylesheet link tag just like it is there and if someone were to go to visit your app using IE it would load an IE specific stylesheet. Mobile Fu works the same way. Mobile Fu includes a modified version of browserized styles that overrides your default stylesheets for specific devices, if the file exists. So, depending on what device you have, mobile fu looks for a specific stylesheet. It&amp;#x2019;s pretty straight forward. If somebody hits your device from an iphone it will look for, in this case, foo_iphone, android would be foo_android, and so on. At the moment, the only way to change what it&amp;#x2019;s looking for is to change the code within the plugin. I&amp;#x2019;ll be making this more easily configurable rather soon.
  15. Have any of you used browserized styles? It&amp;#x2019;s a plugin by my co-worker Michael Bleigh? For those of you who aren&amp;#x2019;t familiar -- what browserized styles does is allow you to provide browser specific styling. You could have your stylesheet link tag just like it is there and if someone were to go to visit your app using IE it would load an IE specific stylesheet. Mobile Fu works the same way. Mobile Fu includes a modified version of browserized styles that overrides your default stylesheets for specific devices, if the file exists. So, depending on what device you have, mobile fu looks for a specific stylesheet. It&amp;#x2019;s pretty straight forward. If somebody hits your device from an iphone it will look for, in this case, foo_iphone, android would be foo_android, and so on. At the moment, the only way to change what it&amp;#x2019;s looking for is to change the code within the plugin. I&amp;#x2019;ll be making this more easily configurable rather soon.
  16. Here&amp;#x2019;s an example of the app being viewed on a BlackBerry Pearl and the iPhone. They are both hitting the same view but within those views are some helpers that are being used to determine what specific device they are using -- by knowing what device they are using we can display different elements. Also, since we have device specific styling, we can also change the way certain elements appear on each device.
  17. Here are a few of the helpers provided by mobile fu. You can check to see generally if a person is using a mobile device. You can look for a specific device -- which just checks to see if that&amp;#x2019;s part of the user agent string. I&amp;#x2019;ve found it helpful to use these items together to determine if a device supports JavaScript or not. Also if you want to present your users with an option to switch to the full standard view -- you can do so by checking to see first if they are currently in the mobile view or not.
  18. Here are a few of the helpers provided by mobile fu. You can check to see generally if a person is using a mobile device. You can look for a specific device -- which just checks to see if that&amp;#x2019;s part of the user agent string. I&amp;#x2019;ve found it helpful to use these items together to determine if a device supports JavaScript or not. Also if you want to present your users with an option to switch to the full standard view -- you can do so by checking to see first if they are currently in the mobile view or not.
  19. Some mobile browsers depend on the mobile doctype declaration to properly set what&amp;#x2019;s displayed. Mobile Fu has a little helper for that since it&amp;#x2019;s not all that easy to remember. You can define the mobile profile version you want on the top of your mobile layout. You can see just what is supported by each mobile doctype version by going to the URL below -- or a simple google search would do just fine.
  20. So here&amp;#x2019;s what it ends up outputting. Definitely makes it much easier than memorizing all of this.
  21. I&amp;#x2019;m sure we all know what SMS is but here&amp;#x2019;s some facts about it before we dive in. Their read by about 94% of their recipients. The other 6% either are ignoring you or don&amp;#x2019;t know how to use their phones. It&amp;#x2019;s supported by almost all mobile phones out there. If your phone doesn&amp;#x2019;t support SMS I highly suggest you get a new phone and donate your old one to a museum. SMS is a good way for you to notify your users of some sort of event since its only limited to about 160 characters.
  22. Here&amp;#x2019;s two screens of what you can pull off with Rails IUI. If any of you are familiar with the Rhodes framework that allows you to build native iPhone apps using Ruby -- you probably know that they use IUI to emulate the looks of a native application.
  23. Once you install the Rails IUI plugin you have to install the base IUI javascript, styling, and images. You can choose to do a plain install or you can install a compact version. If you decide you don&amp;#x2019;t want it anymore there&amp;#x2019;s a rake task for that as well.
  24. Once you install the Rails IUI plugin you have to install the base IUI javascript, styling, and images. You can choose to do a plain install or you can install a compact version. If you decide you don&amp;#x2019;t want it anymore there&amp;#x2019;s a rake task for that as well.
  25. To start off with Rails IUI you need to add acts_as_iphone_controller to one of your controllers. Then you need to create an iphone specific layout and include the required IUI files. You can do this by calling include_iui_files within the head of your layout.
  26. So, just like Mobile Fu we will have to specify a format in our respond_to block for the iphone -- and we will need to create iphone specific layouts and views.
  27. To create the standard blue iPhone toolbar, you&amp;#x2019;d have to use the iui_toolbar method. This takes in a caption and an optional search_url. It&amp;#x2019;s not actually shown here in this screenshot but if a search_url is provided a search button will appear on the top right.
  28. If you want to create an iPhone style button element you can use the button_link_to helper, which is pretty straight forward.
  29. In order to create a list you can pass in an array of your objects to the iui_list helper. One really big thing to note here is that the objects within your array are expected to respond to the methods, &amp;#x201C;caption&amp;#x201D; and &amp;#x201C;url&amp;#x201D;. Your also allowed to pass in an option called :more which allows you to specify a cell that is used at the very bottom of your list. A good example for usage of this last row would be to add a link for &amp;#x2018;More&amp;#x2019; results. The object you pass into the &amp;#x2018;more&amp;#x2019; option must also respond to the same &amp;#x201C;caption&amp;#x201D; and &amp;#x201C;url&amp;#x201D; methods.
  30. You can also have a grouped style list or tableview. The iui_grouped_list helper is jus tlike the iui_list helper but it takes in a group_by_block. The items within your array will be grouped depending on how they respond to your group_by_block.
  31. Rails IUI also lets you perform an action based on the orientation of the device. You can setup a callback using the observe_orientation_change helper. As you can see you have to include this within the head of your layout. Also, you must also use the register_orientation_change helper on your body tag. So when you tilt the device from portrait to landscape you can have your application adjust accordingly.
  32. Rails IUI will send a parameter named &amp;#x2018;position&amp;#x2019; to the action that you specify called. This position parameter will either return &amp;#x201C;0 for Upright, &amp;#x201C;90&amp;#x201D; for counter clockwise landscape, or &amp;#x201C;-90&amp;#x201D; for clockwise landscape. Also, one thing that we&amp;#x2019;ve done is just use Mobile Fu and include the standard IUI files -- which has worked out quite well for us.
  33. Onto Short Message Service -- or SMS for short.
  34. I&amp;#x2019;m sure we all know what SMS is but here&amp;#x2019;s some facts about it before we dive in. Their read by about 94% of their recipients. The other 6% either are ignoring you or don&amp;#x2019;t know how to use their phones. It&amp;#x2019;s supported by almost all mobile phones out there. If your phone doesn&amp;#x2019;t support SMS I highly suggest you get a new phone and donate your old one to a museum. SMS is a good way for you to notify your users of some sort of event since its only limited to about 160 characters.
  35. Now, let&amp;#x2019;s dive in and see just what tools we can use to integrate SMS into our Rails apps.
  36. If you have the budget for a paid solution then Clickatell would be a solution that I would highly recommend. It costs about four cents US per txt message sent within the United States. I sadly haven&amp;#x2019;t checked out to see the price for sending txt messages within the UK. One of the big benefits here is that it&amp;#x2019;s a highly reliable service and that you don&amp;#x2019;t need to know the recipient&amp;#x2019;s carrier to fire off a text message.
  37. Here&amp;#x2019;s a quick run down on how to send a text message using the Clickatell gem. After you sign up for an account at Clickatell, your provided with your API key. You want to use that plus your username and password to authenticate. From there you can quickly fire off a text message by calling &amp;#x2018;send_message&amp;#x2019; with the phone number and your message.
  38. SMS Fu is a free solution that leverages e-mail to send a user a text message. It&amp;#x2019;s because of this reason that you will need to know the recipient&amp;#x2019;s carrier before you can actually send something off. There is not as many supported carriers as Clickatell -- although the list of supported carriers is always growing. I&amp;#x2019;ve been adding in support for a good chunk of international carriers lately.
  39. Maybe a few of you might be scratching your heads wondering how its free?
  40. Like I mentioned earlier -- you need to know the carrier before you can actually firing off a text message. SMS Fu has a predefined set of carriers and their e-mail extensions. This example is for AT&amp;T in the US. If we know the number, that&amp;#x2019;s generally the front end of the e-mail. For AT&amp;T we know that the extension for them is txt.att.net. If we fire off an e-mail to this address, the contents of the email are sent to that user&amp;#x2019;s device in the form of an SMS. A good thing to point out here is that I&amp;#x2019;ve seen some issues with international carriers. Some mobile carriers demand that their users subscribe to an E-Mail to SMS gateway service on their plan before they can actually receive these messages. Within the US I haven&amp;#x2019;t heard of such issues yet.
  41. Integrating SMS Fu into your application is rather simple. You&amp;#x2019;re going to want to include it in your controllers by specifying has_sms_fu. Once you&amp;#x2019;ve done that you can simple call the deliver_sms method with the number, carrier, and the message. By default your message will be truncated to 160 characters -- although you can pass in an option to override this if you feel like getting a little dangerous.
  42. So you just saw how to fire off an SMS to a user provided that you have their number, and the carrier their using. If you want to retrieve the SMS address we will send out you can call get_sms_address with the number and the carrier. Also, since we have our own pre-defined set of supported carriers, you can use the carrier_select form helper to display a select box with all the carrier values from SMS Fu predefined. If you just want to retrieve back the carriers to use as options for your select box you can just call carrier_collection from your views.
  43. So you just saw how to fire off an SMS to a user provided that you have their number, and the carrier their using. If you want to retrieve the SMS address we will send out you can call get_sms_address with the number and the carrier. Also, since we have our own pre-defined set of supported carriers, you can use the carrier_select form helper to display a select box with all the carrier values from SMS Fu predefined. If you just want to retrieve back the carriers to use as options for your select box you can just call carrier_collection from your views.
  44. So you just saw how to fire off an SMS to a user provided that you have their number, and the carrier their using. If you want to retrieve the SMS address we will send out you can call get_sms_address with the number and the carrier. Also, since we have our own pre-defined set of supported carriers, you can use the carrier_select form helper to display a select box with all the carrier values from SMS Fu predefined. If you just want to retrieve back the carriers to use as options for your select box you can just call carrier_collection from your views.
  45. Here&amp;#x2019;s a VERY small list of some of the carriers supported. There&amp;#x2019;s been quite a few carriers added within the past few months. There are more carriers supported in the US than International but you can easily add your own -- and if you do, please patch SMS Fu so we can have a nice list of supported carriers.
  46. Here are some good examples of apps that allow you to use short codes. On the top left there&amp;#x2019;s Dodgeball, which I believe got acquired by Google. It allows you to lookup a venue or an event. Amazon allows you to purchase items just by interacting via text. Google SMS allows you to retrieve a whole bunch of information -- weather, mobies, stocks, maps, flights, directions, etc.
  47. Short codes are also referred to as short numbers. I&amp;#x2019;m sure we all know what they are. They are expensive and can cost up to $1000 a month if you were to lease your own vanity number. It&amp;#x2019;s a little cheaper if you end up choosing a random number or offer to share numbers with other companies and just have your own unique keyword. Most companies choose to share the same number but have different keywords because of this reason. An example of a keyword is when you hear on a TV show, &amp;#x201C;text VOTE to 12345&amp;#x201D; -- VOTE would be the keyword.
  48. Have any of you heard of Textmarks? It&amp;#x2019;s a free short code service that lets you share a single short code. The free solution includes ads in the responses back to your user. Also, because of the ads, you cannot utilize all 160 characters When you sign up you choose your own unique Keyword that a user has to type in when they send a message to 41411. They use this keyword to route the message to your service.
  49. So when you setup your account it&amp;#x2019;ll ask you for a URL to send the message that was retrieved. With that URL you specify you can ask Textmarks to only send back certain pieces of the message or the whole thing. They allow you to accept variables /0 through /9. /1 through /9 allows you to choose specific words from the message sent. If you send a text to &amp;#x201C;KEYWORD this is a test&amp;#x201D;, /1 would be &amp;#x201C;this&amp;#x201D;. /0 represents the whole string and /p represents the phone number of the sender.
  50. In this example we&amp;#x2019;re going to want to process the whole string that the user sends us after the keyword. Within Textmarks you&amp;#x2019;re going to want to add this URL to your account.
  51. In this example we&amp;#x2019;re going to want to process the whole string that the user sends us after the keyword. Within Textmarks you&amp;#x2019;re going to want to add this URL to your account.
  52. Most cell phones will actually allow you to send an SMS or MMS to an actual e-mail address. The cost to you is free, although standard carrier charges for SMS and MMS will still apply to the person sending the text message
  53. MMS2R is a gem that allows us to strip out the user-generated content from the highly polluted MMS&amp;#x2019;s from carriers all over the world. MMS2R
  54. Here I&amp;#x2019;m creating an MMS2R media object by passing in a TMail object. Once you have this new object you can call the media method to retrieve all media items in an array. MMS2R also can try and determine the attachment that the sender intended to send to you. It can also pull back the intended full body that the sender tried to send your way and the subject. It&amp;#x2019;s kind of obvious but to retrieve the subject you&amp;#x2019;d just call the subject method on the MMS2R object.
  55. Here I&amp;#x2019;m creating an MMS2R media object by passing in a TMail object. Once you have this new object you can call the media method to retrieve all media items in an array. MMS2R also can try and determine the attachment that the sender intended to send to you. It can also pull back the intended full body that the sender tried to send your way and the subject. It&amp;#x2019;s kind of obvious but to retrieve the subject you&amp;#x2019;d just call the subject method on the MMS2R object.
  56. Here I&amp;#x2019;m creating an MMS2R media object by passing in a TMail object. Once you have this new object you can call the media method to retrieve all media items in an array. MMS2R also can try and determine the attachment that the sender intended to send to you. It can also pull back the intended full body that the sender tried to send your way and the subject. It&amp;#x2019;s kind of obvious but to retrieve the subject you&amp;#x2019;d just call the subject method on the MMS2R object.
  57. This is a photo of another MMS received as an e-mail. The carrier for this is MMS is OperatorOne, which I don&amp;#x2019;t believe is supported out of the box by MMS2R. If this operator did have a template and if we were to retrieve this e-mail as a TMail object then convert it to an MMS2R Media object we could easily strip out the subject, body, and the intended attachment by the person who sent it.
  58. You can see the images and the text and html that is ignored in the body of the mms email -- Also the transform section is used to extract out the intended text from the cluttered mms email. This example here is for a north american carrier called Helio. If you want to you can fork MMS2r and create your own templates and request a pull.