SlideShare une entreprise Scribd logo
1  sur  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?

Contenu connexe

Tendances

How To Become a Front End Developer? Front End Developer Career Path, Salary ...
How To Become a Front End Developer? Front End Developer Career Path, Salary ...How To Become a Front End Developer? Front End Developer Career Path, Salary ...
How To Become a Front End Developer? Front End Developer Career Path, Salary ...Edureka!
 
Презентация на тему Мобильных технологии + курс от Мин образования
Презентация на тему Мобильных технологии + курс от Мин образованияПрезентация на тему Мобильных технологии + курс от Мин образования
Презентация на тему Мобильных технологии + курс от Мин образованияAzamat Kalmurzayev
 
Simple chat room using python
Simple chat room using pythonSimple chat room using python
Simple chat room using pythonVISHAL VERMA
 
What is Visual Studio Code?
What is Visual Studio Code?What is Visual Studio Code?
What is Visual Studio Code?Mindfire LLC
 
Dart presentation
Dart presentationDart presentation
Dart presentationLucas Leal
 
Android operating system by udayan thakurdesai
Android operating system by udayan thakurdesaiAndroid operating system by udayan thakurdesai
Android operating system by udayan thakurdesaiUdayan Thakurdesai
 
Flutter latest updates and features 2022
Flutter latest updates and features 2022Flutter latest updates and features 2022
Flutter latest updates and features 2022Ahmed Abu Eldahab
 
A seminar report on core java
A  seminar report on core javaA  seminar report on core java
A seminar report on core javaAisha Siddiqui
 
Geolocalização em PHP - Google Places, Maps e Routes
Geolocalização em PHP - Google Places, Maps e RoutesGeolocalização em PHP - Google Places, Maps e Routes
Geolocalização em PHP - Google Places, Maps e RoutesLuis Gustavo Almeida
 
Online test management system
Online test management systemOnline test management system
Online test management systemPrateek Agarwak
 
Introduction to Mobile Apps
Introduction to Mobile Apps Introduction to Mobile Apps
Introduction to Mobile Apps Shahryar Khan
 
Getting started with flutter
Getting started with flutterGetting started with flutter
Getting started with flutterrihannakedy
 
What is a Defect Life Cycle in Software Testing
What is a Defect Life Cycle in Software TestingWhat is a Defect Life Cycle in Software Testing
What is a Defect Life Cycle in Software TestingSneha Singh
 
Learn Entity Framework in a day with Code First, Model First and Database First
Learn Entity Framework in a day with Code First, Model First and Database FirstLearn Entity Framework in a day with Code First, Model First and Database First
Learn Entity Framework in a day with Code First, Model First and Database FirstJibran Rasheed Khan
 

Tendances (20)

How To Become a Front End Developer? Front End Developer Career Path, Salary ...
How To Become a Front End Developer? Front End Developer Career Path, Salary ...How To Become a Front End Developer? Front End Developer Career Path, Salary ...
How To Become a Front End Developer? Front End Developer Career Path, Salary ...
 
Презентация на тему Мобильных технологии + курс от Мин образования
Презентация на тему Мобильных технологии + курс от Мин образованияПрезентация на тему Мобильных технологии + курс от Мин образования
Презентация на тему Мобильных технологии + курс от Мин образования
 
Simple chat room using python
Simple chat room using pythonSimple chat room using python
Simple chat room using python
 
What is Visual Studio Code?
What is Visual Studio Code?What is Visual Studio Code?
What is Visual Studio Code?
 
Chat server
Chat server Chat server
Chat server
 
Dart presentation
Dart presentationDart presentation
Dart presentation
 
Protocols and tools
Protocols and toolsProtocols and tools
Protocols and tools
 
Android operating system by udayan thakurdesai
Android operating system by udayan thakurdesaiAndroid operating system by udayan thakurdesai
Android operating system by udayan thakurdesai
 
Flutter_ Basic Chat App UI.pptx
Flutter_ Basic Chat App UI.pptxFlutter_ Basic Chat App UI.pptx
Flutter_ Basic Chat App UI.pptx
 
Flutter latest updates and features 2022
Flutter latest updates and features 2022Flutter latest updates and features 2022
Flutter latest updates and features 2022
 
A seminar report on core java
A  seminar report on core javaA  seminar report on core java
A seminar report on core java
 
Geolocalização em PHP - Google Places, Maps e Routes
Geolocalização em PHP - Google Places, Maps e RoutesGeolocalização em PHP - Google Places, Maps e Routes
Geolocalização em PHP - Google Places, Maps e Routes
 
Online test management system
Online test management systemOnline test management system
Online test management system
 
Sgbd mongodb
Sgbd   mongodbSgbd   mongodb
Sgbd mongodb
 
Introduction to Mobile Apps
Introduction to Mobile Apps Introduction to Mobile Apps
Introduction to Mobile Apps
 
Flutter
FlutterFlutter
Flutter
 
Getting started with flutter
Getting started with flutterGetting started with flutter
Getting started with flutter
 
Creating Apps with .NET MAUI
Creating Apps with .NET MAUICreating Apps with .NET MAUI
Creating Apps with .NET MAUI
 
What is a Defect Life Cycle in Software Testing
What is a Defect Life Cycle in Software TestingWhat is a Defect Life Cycle in Software Testing
What is a Defect Life Cycle in Software Testing
 
Learn Entity Framework in a day with Code First, Model First and Database First
Learn Entity Framework in a day with Code First, Model First and Database FirstLearn Entity Framework in a day with Code First, Model First and Database First
Learn Entity Framework in a day with Code First, Model First and Database First
 

En vedette

Παράξενος Μαθηματικός Λογισμός
Παράξενος Μαθηματικός ΛογισμόςΠαράξενος Μαθηματικός Λογισμός
Παράξενος Μαθηματικός Λογισμός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
 

En vedette (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
 

Similaire à 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
 

Similaire à 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
 

Plus de 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
 

Plus de 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
 

Dernier

"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii SoldatenkoFwdays
 
What is Artificial Intelligence?????????
What is Artificial Intelligence?????????What is Artificial Intelligence?????????
What is Artificial Intelligence?????????blackmambaettijean
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenHervé Boutemy
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Manik S Magar
 
Training state-of-the-art general text embedding
Training state-of-the-art general text embeddingTraining state-of-the-art general text embedding
Training state-of-the-art general text embeddingZilliz
 
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
 
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxArtificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxhariprasad279825
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebUiPathCommunity
 
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
 
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
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024Stephanie Beckett
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsSergiu Bodiu
 
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024BookNet Canada
 
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsPixlogix Infotech
 
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
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxLoriGlavin3
 
What is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfWhat is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfMounikaPolabathina
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek SchlawackFwdays
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Commit University
 

Dernier (20)

"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko
 
What is Artificial Intelligence?????????
What is Artificial Intelligence?????????What is Artificial Intelligence?????????
What is Artificial Intelligence?????????
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache Maven
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!
 
Training state-of-the-art general text embedding
Training state-of-the-art general text embeddingTraining state-of-the-art general text embedding
Training state-of-the-art general text embedding
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .
 
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxArtificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptx
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio Web
 
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
 
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...
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
 
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
 
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and Cons
 
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
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptx
 
What is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfWhat is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdf
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!
 

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/

Notes de l'éditeur

  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.