Mobilizing Your Rails Application - Rails Underground, London, UK
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Mobilizing Your Rails Application - Rails Underground, London, UK

  • 12,485 views
Uploaded on

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 ...

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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
12,485
On Slideshare
11,901
From Embeds
584
Number of Embeds
20

Actions

Shares
Downloads
151
Comments
0
Likes
16

Embeds 584

http://axonflux.com 345
http://tomash.soup.io 87
http://www.slideshare.net 52
http://gruby.soup.io 46
http://www.soup.io 16
http://fittl.com 8
http://hosiawak.soup.io 6
http://bigbear3001.soup.io 6
http://posterous.com 5
http://propertiger.local 3
https://twimg0-a.akamaihd.net 1
https://twitter.com 1
http://ideathon.tumblr.com 1
http://oengelha.soup.io 1
http://alephfilm.blogspot.com 1
http://imanel.soup.io 1
http://fex.soup.io 1
http://itshorty.soup.io 1
http://soup.fin.io 1
http://www.slideee.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • We’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? <br /> <br /> 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. <br /> <br /> 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. <br /> <br /> 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. <br /> <br /> 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. <br /> <br /> 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. <br /> <br /> 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. <br /> <br /> 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. <br /> <br /> 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. <br /> <br /> 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. <br /> 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. <br /> <br /> 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. <br /> 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. <br /> <br /> 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. <br /> <br /> 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. <br /> <br /> 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. <br /> <br /> 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. <br /> <br /> 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 <br /> <br /> 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. <br /> <br /> 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;. <br /> /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. <br /> <br /> 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. <br /> <br /> 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. <br /> 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.

Transcript

  • 1. Mobilize Your Rails Application Brendan Lim brendan@intridea.com @brendanlim
  • 2. 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
  • 3. 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)
  • 4. Twitter Google Reader Present.ly
  • 5. We should cater to our mobile audience
  • 6. One Web Making the same information and services available to all users regardless of what device they are using.
  • 7. Problems with one web • Max resolution? • JavaScript support? • Flash support? • Connection speed?
  • 8. 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
  • 9. Mobile Fu class ApplicationController < ActionController::Base has_mobile_fu end
  • 10. Mobile Fu demo.presentlyapp.com iPhone Safari
  • 11. 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
  • 12. Mobile Fu <%= stylesheet_link_tag 'foo' %>
  • 13. Mobile Fu <%= stylesheet_link_tag 'foo' %> iPhone foo_iphone.css
  • 14. Mobile Fu <%= stylesheet_link_tag 'foo' %> iPhone foo_iphone.css Android foo_android.css
  • 15. Mobile Fu <%= stylesheet_link_tag 'foo' %> iPhone foo_iphone.css Android foo_android.css BlackBerry foo_blackberry.css
  • 16. Mobile Fu <%= stylesheet_link_tag 'foo' %> iPhone foo_iphone.css Android foo_android.css BlackBerry foo_blackberry.css Win Mobile foo_mobileexplorer.css
  • 17. Mobile Fu
  • 18. Mobile Fu Is the user using a mobile device? is_mobile_device?
  • 19. Mobile Fu Is the user using a mobile device? is_mobile_device? Is the user using a specific device? is_device?(‘blackberry’)
  • 20. 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?
  • 21. 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
  • 22. 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
  • 23. Rails iUI • Wrapper for iUI user interface framework • JavaScript & CSS framework for developing iPhone webapps • Can determine device orientation • Provides an ‘iPhone-Like’ experience
  • 24. Rails iUI
  • 25. Rails iUI Install iUI images & styles rake iui:install
  • 26. Rails iUI Install iUI images & styles rake iui:install Install compact version of iUI images & styles rake iui:install_compact
  • 27. 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
  • 28. Rails iUI class ApplicationController < ActionController::Base acts_as_iphone_controller end ../layouts/blah.iphone.erb <html> <head> ... <%= include_iui_files %> </head> ... </html>
  • 29. 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
  • 30. Rails iUI Create an iPhone style toolbar iui_toolbar(initial_caption,search_url = nil)
  • 31. Rails iUI Create an iPhone style button button_link_to(name,options,html_options = {})
  • 32. Rails iUI Creates an iPhone style TableView iui_list(items,options = {})
  • 33. Rails iUI Creates a grouped iPhone style Tableview iui_grouped_list(items,options = {}, &group_by_block)
  • 34. 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>
  • 35. 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)
  • 36. Short Message Service
  • 37. 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
  • 38. What tools can we use to send SMS messages from our Rails application?
  • 39. 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
  • 40. Clickatell require 'clickatell' api = Clickatell::API.authenticate('your_api_id', 'your_username', 'your_password') api.send_message('5558675309', 'Hello from clickatell')
  • 41. 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
  • 42. SMS Fu Wait, it’s free?
  • 43. SMS Fu Number: 555-867-5309 Carrier: AT&T 5558675309@txt.att.net
  • 44. SMS Fu class AwesomeController < ApplicationController has_sms_fu end deliver_sms(‘5558675309’,’at&t’, ‘hello!’)
  • 45. SMS Fu Deliver an SMS deliver_sms(number,carrier,message)
  • 46. SMS Fu Deliver an SMS deliver_sms(number,carrier,message) Retrieve SMS e-mail address get_sms_address(number,carrier)
  • 47. 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)
  • 48. 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
  • 49. 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....
  • 50. SMS Fu What if I want to add a new carrier?
  • 51. SMS Fu Add the following to .../config/sms_fu.yml carriers: ... ruby_mobile: name: Ruby-Mobile value: @txt.ruby-mobile.com
  • 52. SMS Fu deliver_sms(‘5558675309’, ’ruby_mobile’, ‘hello!’)
  • 53. Charges still apply to your users from flickr user ‘bowbrick’
  • 54. Well, how can I receive SMS or MMS from my Rails app?
  • 55. Short Codes Special short numbers that can be used to receive SMS or MMS messages from mobile phones
  • 56. 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 ...
  • 57. Textmarks • Offer a free and a paid service • Short code: 41411 • Shared with others • Choose your own keyword
  • 58. 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
  • 59. Textmarks http://myapp.com/sms/p/0 map.retrieve_sms ‘sms/:phone/:text’, :controller ...etc
  • 60. Textmarks def some_action ... render :text => ‘your response’ end
  • 61. Receiving SMS or MMS as e-mail is simple
  • 62. Multimedia Message Service • Can send photo, video, audio or other attachments • Most commonly used for photos • There’s a 300 KB limit • Multipart MIME
  • 63. The Problem with Receiving MMS Crap Crap Cat Crap
  • 64. MMS2R • Removes advertising • Eliminates default subjects • Decodes and extracts files from the multipart MIME e-mail • Most major carriers are supported
  • 65. MMS2R Create a new MMS2R object from a TMail object mms = MMS2R::Media.new(email)
  • 66. MMS2R Create a new MMS2R object from a TMail object mms = MMS2R::Media.new(email) Retrieve all media files from the MMS mms.media
  • 67. 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
  • 68. 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
  • 69. MMS2R mms.subject mms.body mms.default_media
  • 70. 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"
  • 71. MMS2R MMS2R is great for more than just MMS
  • 72. 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/
  • 73. Questions?