iPhone Web Development and Ruby On Rails


Published on

iPhone Web Development and Ruby On Rails. Creating iPhone web applications in Ruby On Rails using the iWebKit toolkit

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

iPhone Web Development and Ruby On Rails

  1. 1. iPhone Web Applications in Rails José de Leon and Bonnie Gabrick K-LUG May 13, 2010
  2. 2. About This Talk <ul><li>Overview of Ruby on Rails
  3. 3. Overview of iWebKit
  4. 4. Demos </li></ul>
  5. 5. About Ruby <ul><li>Created by Yukihiro “Matz” Matsumoto in Japan, 1995
  6. 6. Ruby is a multi-paradigm, interpreted programming language : </li><ul><li>Imperative
  7. 7. Object-oriented
  8. 8. Functional programming (map/reduce functions AKA collect, select) </li></ul><li>Familiarity with Perl, Smalltalk, Java, LISP, C++ is an asset </li></ul>
  9. 9. About Rails <ul><li>Conception of David Heinemeier-Hansson
  10. 10. Based on work derived from Basecamp, a web-based project-management application
  11. 11. Extracted as a distinct framework, Summer 2004
  12. 12. 1.0 release in December 2005 </li></ul>“ Rails is a full-stack framework for developing database-backed web applications according to the Model-View-Control pattern.”
  13. 13. Rails Embodies Best Practices <ul><li>Model-View-Controller (MVC) – separation of data, operations on data, presentation of data
  14. 14. ActiveRecord Pattern – Object/Relational Mapping (ORM)
  15. 15. REST web application paradigm: </li><ul><li>Emphasis on unique URIs/URLs (routes/resources)
  16. 16. Handling protocol verbs of HTTP (requests) (POST/GET/PUT/DELETE)
  17. 17. Consistent data representations (HTML/XML/JSON) (responses) </li></ul></ul>
  18. 18. Rails Applications <ul><li>Occupies a “sweet spot” of front-end web applications for a database
  19. 19. Original front-end for Twitter
  20. 20. Front-end for Hulu.com
  21. 21. 37signals.com suite of applications, including Basecamp Project Management
  22. 22. Redmine project management
  23. 23. Learning Spaces Technology Listings for WSU Teaching, Learning and Technology </li></ul>
  24. 24. Overview of iWebKit <ul><li>HTML 5 and CSS 3 based web framework
  25. 25. Home website: http://iwebkit.net/
  26. 26. Can use iWebKit with any web development framework in any language you can create HTML from: PHP, Java/JVM languages, Python, .NET languages
  27. 27. Combining iWebKit with Rails allows for very fast prototyping of mobile web applications </li></ul>
  28. 28. About HTML 5 and CSS 3 <ul><li>Much more than the VIDEO tag
  29. 29. Emphasis on semantics of actual content in the Document Object Model (DOM)
  30. 30. Canvas element allows for enhanced graphics
  31. 31. Geo-Location information support
  32. 32. Local database support (stronger persistence in web apps)
  33. 33. Web-worker threads support (threads in web apps)
  34. 34. All combine to provide stronger support for richer web applications than ever before
  35. 35. Demo: http://apirocks.com/html5/html5.html </li></ul>
  36. 36. Demo <ul><li>Women's Building Library Book List </li><ul><li>Catalog from library established during 1893 World's Fair, gathering contributions of women to the world of letters (destroyed 1911) </li></ul><li>CRUD rapid application development with scaffolding (using SQLite)
  37. 37. Integration of iWebKit
  38. 38. Fully customized application integrated with iWebKit, replacing scaffolding with a componentized approach (some gotchas) </li></ul>
  39. 39. iWebKit on Rails <ul>Changes to be made: <li>Copy images in the iWebKit distribution to the Rails public/folder
  40. 40. Change iWebKit CSS: image resource paths in the CSS file are adjusted to point to the Rails public/ folder
  41. 41. Place iWebKit CSS & JavaScript in their respective subdirectories in the Rails public/ folder
  42. 42. Change default index.html file in the original iWebKit distribution into a Rails ERB (.html.erb) template that loads the iWebKit CSS + JavaScript, and replace class templates in the views/layouts folder </li></ul>
  43. 43. iWebKit on Rails <ul>Download iWebKit from http://iwebkit.net Unzip the downloaded ZIP archive. There should be a “Framework” folder inside of the unzipped archive folder. </ul><ul><li>Copy the images/ and thumbs/ folders in the Framework folder into the Rails public/ folder
  44. 44. Inside the Framework/javascript folder of the extracted ZIP archive, copy functions.js into Rails public/javascripts/ folder </li></ul>
  45. 45. iWebKit on Rails <ul><li>Inside the Framework/css folder of the extracted ZIP archive, open up developer-style.css in a text editor.
  46. 46. Perform a search-and-replace on ../images replacing it with /images
  47. 47. Save the result in your Rails public/stylesheets folder, and give it the name iwebkit.css </li></ul>
  48. 48. iWebKit on Rails <ul><li>Inside the Framework folder of the extracted ZIP archive, open up index.html in a text editor.
  49. 49. Add the following two lines inside the <head> section of index.html (above the <title> tag works best) </li></ul><%= javascript_include_tag &quot;functions&quot; %> <%= stylesheet_link_tag &quot;iwebkit&quot; %> <ul><li>Remove the <link> and <script> tags from the <head> section of index.html
  50. 50. Replace the opening <body> and closing </body> tags and replace the deleted content with the Rails <%= yield %> tag
  51. 51. Save the result in your Rails app/views/layouts folder as index.html.erb
  52. 52. For each class.html.erb file representing each class in the Rails app/views/layouts folder, replace that file with the index.html.erb created in Step 10. </li></ul>
  53. 53. iWebKit on Rails <ul>Optional (better desktop support): <li>Add the following META tag to enable Google Chrome Frame loading for Internet Explorer </li></ul><meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;chrome=1&quot;> <ul><li>Add a background-color declaration to the &quot;body&quot; selector in iwebkit.css </li></ul>background-color: #CCC; Default Rails scaffolding uses JavaScript to confirm item deletes; add confirmation-of-removal form and delete the item upon submission of this form (HTTP POST) in the controller.