Mobile communication and interaction shouldn't just be limited to voice. There are many ways to effectively take advantage of mobile technology that can help us build better Rails application tailored to portable devices. Taking your application into the mobile space is easier than one would think. Find out why it’s important to go mobile and just how to do so.
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)
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
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
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
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....
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
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
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
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/
We&#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.
There&#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&#x2019;s more mobile phones in the world than personal computers -- which actually makes sense. I personally don&#x2019;t know anybody that doesn&#x2019;t actually have a mobile phone. Who here doesn&#x2019;t have a phone? Who here knows somebody without a phone?
It&#x2019;s also good to point out that in some developing nations a mobile phone is sometimes their only way to reach the internet.
So here&#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&#x2019;s a large audience that we should try tap into.
Our mobile phones are almost wirelessly connected all of the time. We have access to all of our favorite services within the cloud.
We&#x2019;re probably pretty familiar with these examples. Here&#x2019;s twitter, google reader, and presently -- these screenshots shows these different web applications rendered specifically for mobile devices.
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&#x2019;ing or MMS&#x2019;ing from their phones.
In this talk I won&#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&#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.
What we&#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&#x2019;s also referred to as the &#x2018;ubiquitous web&#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&#x2019;d be able to interact with on their desktop or laptop computer.
It&#x2019;s because of hardware and software specific reasons that we&#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.
Here you can see both a regular request from a standard web browser and one from mobile safari through an iPhone
This is just a simple example of what we&#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&#x2019;t automagically convert your old HTML views to mobile ones -- so it&#x2019;s still up to you though to create these views yourself.
Have any of you used browserized styles? It&#x2019;s a plugin by my co-worker Michael Bleigh? For those of you who aren&#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&#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&#x2019;s looking for is to change the code within the plugin. I&#x2019;ll be making this more easily configurable rather soon.
Have any of you used browserized styles? It&#x2019;s a plugin by my co-worker Michael Bleigh? For those of you who aren&#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&#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&#x2019;s looking for is to change the code within the plugin. I&#x2019;ll be making this more easily configurable rather soon.
Have any of you used browserized styles? It&#x2019;s a plugin by my co-worker Michael Bleigh? For those of you who aren&#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&#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&#x2019;s looking for is to change the code within the plugin. I&#x2019;ll be making this more easily configurable rather soon.
Have any of you used browserized styles? It&#x2019;s a plugin by my co-worker Michael Bleigh? For those of you who aren&#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&#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&#x2019;s looking for is to change the code within the plugin. I&#x2019;ll be making this more easily configurable rather soon.
Here&#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.
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&#x2019;s part of the user agent string. I&#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.
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&#x2019;s part of the user agent string. I&#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.
Some mobile browsers depend on the mobile doctype declaration to properly set what&#x2019;s displayed. Mobile Fu has a little helper for that since it&#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.
So here&#x2019;s what it ends up outputting. Definitely makes it much easier than memorizing all of this.
I&#x2019;m sure we all know what SMS is but here&#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&#x2019;t know how to use their phones. It&#x2019;s supported by almost all mobile phones out there. If your phone doesn&#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.
Here&#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.
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&#x2019;t want it anymore there&#x2019;s a rake task for that as well.
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&#x2019;t want it anymore there&#x2019;s a rake task for that as well.
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.
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.
To create the standard blue iPhone toolbar, you&#x2019;d have to use the iui_toolbar method. This takes in a caption and an optional search_url. It&#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.
If you want to create an iPhone style button element you can use the button_link_to helper, which is pretty straight forward.
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, &#x201C;caption&#x201D; and &#x201C;url&#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 &#x2018;More&#x2019; results. The object you pass into the &#x2018;more&#x2019; option must also respond to the same &#x201C;caption&#x201D; and &#x201C;url&#x201D; methods.
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.
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.
Rails IUI will send a parameter named &#x2018;position&#x2019; to the action that you specify called. This position parameter will either return &#x201C;0 for Upright, &#x201C;90&#x201D; for counter clockwise landscape, or &#x201C;-90&#x201D; for clockwise landscape.
Also, one thing that we&#x2019;ve done is just use Mobile Fu and include the standard IUI files -- which has worked out quite well for us.
Onto Short Message Service -- or SMS for short.
I&#x2019;m sure we all know what SMS is but here&#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&#x2019;t know how to use their phones. It&#x2019;s supported by almost all mobile phones out there. If your phone doesn&#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.
Now, let&#x2019;s dive in and see just what tools we can use to integrate SMS into our Rails apps.
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&#x2019;t checked out to see the price for sending txt messages within the UK. One of the big benefits here is that it&#x2019;s a highly reliable service and that you don&#x2019;t need to know the recipient&#x2019;s carrier to fire off a text message.
Here&#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 &#x2018;send_message&#x2019; with the phone number and your message.
SMS Fu is a free solution that leverages e-mail to send a user a text message. It&#x2019;s because of this reason that you will need to know the recipient&#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&#x2019;ve been adding in support for a good chunk of international carriers lately.
Maybe a few of you might be scratching your heads wondering how its free?
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&T in the US. If we know the number, that&#x2019;s generally the front end of the e-mail. For AT&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&#x2019;s device in the form of an SMS.
A good thing to point out here is that I&#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&#x2019;t heard of such issues yet.
Integrating SMS Fu into your application is rather simple. You&#x2019;re going to want to include it in your controllers by specifying has_sms_fu. Once you&#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.
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.
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.
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.
Here&#x2019;s a VERY small list of some of the carriers supported. There&#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.
Here are some good examples of apps that allow you to use short codes. On the top left there&#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.
Short codes are also referred to as short numbers. I&#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&#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, &#x201C;text VOTE to 12345&#x201D; -- VOTE would be the keyword.
Have any of you heard of Textmarks? It&#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.
So when you setup your account it&#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 &#x201C;KEYWORD this is a test&#x201D;, /1 would be &#x201C;this&#x201D;.
/0 represents the whole string and /p represents the phone number of the sender.
In this example we&#x2019;re going to want to process the whole string that the user sends us after the keyword.
Within Textmarks you&#x2019;re going to want to add this URL to your account.
In this example we&#x2019;re going to want to process the whole string that the user sends us after the keyword.
Within Textmarks you&#x2019;re going to want to add this URL to your account.
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
MMS2R is a gem that allows us to strip out the user-generated content from the highly polluted MMS&#x2019;s from carriers all over the world. MMS2R
Here I&#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&#x2019;s kind of obvious but to retrieve the subject you&#x2019;d just call the subject method on the MMS2R object.
Here I&#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&#x2019;s kind of obvious but to retrieve the subject you&#x2019;d just call the subject method on the MMS2R object.
Here I&#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&#x2019;s kind of obvious but to retrieve the subject you&#x2019;d just call the subject method on the MMS2R object.
This is a photo of another MMS received as an e-mail. The carrier for this is MMS is OperatorOne, which I don&#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.
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.