Designing and developing mobile web applications with Mockup, Sencha Touch and Sinatra

8,834 views

Published on

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
8,834
On SlideShare
0
From Embeds
0
Number of Embeds
5,837
Actions
Shares
0
Downloads
2
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Designing and developing mobile web applications with Mockup, Sencha Touch and Sinatra

  1. 1. Designing and developing mobile web applicationswithMockup, SenchaTouch and Sinatra<br />Matteo Collina<br />Daniele Bottillo<br />@matteocollina<br />@cribcaged7<br />
  2. 2. WhoisMavigex<br />Mavigexisanacademic spin-off of the Universityof Bologna whichfocuses on:<br />Mobile applications<br />Digitalsignage<br />VoIPapplications<br />Mobile broadcasting<br />
  3. 3. WhoWe Are<br />Daniele Bottillo: <br /><ul><li>Web mobile designer and developer
  4. 4. @cribcaged7</li></ul>Matteo Collina: <br /><ul><li>Software Engineer
  5. 5. Ph.D. Candidate @ UoB
  6. 6. @matteocollina</li></li></ul><li>Mobile Web Apps?<br />
  7. 7. Mobile Web Apps?<br />
  8. 8. vs<br />HTML5 and CSS3:<br /><ul><li>Look & Feelsimilarto native applications
  9. 9. Advancedgraphicseffects (gradients, fades, slides…)</li></li></ul><li>vs<br />Javascript:<br /><ul><li>Everybodythinktheyknowit :-)
  10. 10. Powerfullanguage just like Java and Obj-C
  11. 11. Severalframeworksfor mobile development</li></li></ul><li>vs<br />Native Applications:<br /><ul><li>Full controlof the Hardware
  12. 12. Maximum Performance
  13. 13. IDEs (Xcode, Eclipse)</li></li></ul><li>vs<br />PhoneGap:<br /><ul><li>AllowstoreachAppStoreswith Mobile Web Apps
  14. 14. Full hardware access
  15. 15. Mixed Native/Web code
  16. 16. Limitedperformances</li></li></ul><li>DevelopmentProcess<br />Write<br />Test<br />Native Approach<br />HybridApproach<br />Build<br />Build<br />Less Work <br />= <br />Less €<br />More Work <br />= <br />More €<br />
  17. 17. Javascript Frameworks<br />
  18. 18. enhanchesexisting mobile web sites<br />hasunobtrusivebehaviour<br />isnotstructuredenoughfor a full applicationdevelopment<br />hassmall Javascript & CSS Files<br />supportsmanydevices<br />is in alpha status<br />
  19. 19. derivesfromExtJS<br />has MVC structure<br />has the Look & Feelof native applications<br />has big Javascript & CSS files<br />isstable (butnot bug free, and you?)<br />
  20. 20. Backend Technologies<br />
  21. 21. Frontend + Backend<br />Native Apps<br /><ul><li>The frontend and the backend are developedseparately
  22. 22. Oftenthereis no backend
  23. 23. Whenbackendfunctionalityisneeded, the integrationiscomplex</li></ul>Mobile Web Apps<br /><ul><li>Frontend and Backend are tightlybound
  24. 24. As oftenasnotthereis a backend
  25. 25. Easy sharingof data between the browser and the JSON APIs</li></li></ul><li>BackendRequirements<br /><ul><li>REST principles
  26. 26. Exposureof JSON APIs
  27. 27. Fast-Fastdevelopment
  28. 28. Easy HTTP caching
  29. 29. Easy testing
  30. 30. Easy deployment</li></li></ul><li>Ruby + Sinatra<br /><ul><li>REST is just built-in
  31. 31. JSON conversionis just a methodcallaway
  32. 32. ReallyflexibleAPIsfor HTTP caching
  33. 33. Community madwithtesting</li></li></ul><li>Ruby + Sinatra<br />require 'sinatra'<br />get '/hi' do<br /> "Hello World!"<br />end<br />
  34. 34. An IntegratedDevelopmentProcess<br />
  35. 35. DevelopmentProcess<br />
  36. 36. ProblemDefinitionGeoReview<br />A simplegeolocalizedApptoreviewlocations. A user can:<br /><ul><li>Enter a star-basedreviewof some coordinates
  37. 37. Viewall the reviews in a map
  38. 38. View the reviewdetailsof a point</li></li></ul><li>GeoReview<br />The GeoReviewApp<br /><ul><li>isavailable at: georeview.mavigex.com
  39. 39. isdownloadablefrom the Android Market
  40. 40. is open source software, and the repository are on github:
  41. 41. App
  42. 42. PhoneGapIntegration
  43. 43. isnot bug free, butwhoitis?</li></li></ul><li>MockupsGeoReview<br />
  44. 44. MockupsGeoReview<br />
  45. 45. JSON APIsGeoReview<br />POST /reviews<br />params: <br />{ review:{ name: “Pippo”, stars: 3, comment: “the comment”, location: “…” } }<br />response:<br />{ result: true }<br />
  46. 46. JSON APIsGeoReview<br />GET /reviews<br />params: <br />{ lat: “..”, lng: “..”, radius: “..”}<br />response:<br />{ status: true,<br />reviews: <br /> [ { items: <br /> [ { name:"rff", comment:"fff", stars:4} ], <br /> total:1, lng:11.35, lat:44.49},<br /> { items: <br /> [ { name: “gggg", comment:"Ggg", <br />stars: 5 } ], <br /> total: 1, lng :11.35, lat:44.49 } ] }<br />
  47. 47. DevelopingwithSenchaGeoReview<br />Gettingstarted:<br /><ul><li>Download SenchaTouch
  48. 48. Create anemptyindex.html
  49. 49. Includethe JS+CSSlibraries</li></li></ul><li>DevelopingwithSenchaGeoReview<br />SenchaTouchis a MVC framework,<br />whatdoesitmean?<br /><ul><li>Views and models are separated
  50. 50. Controllersperformactions
  51. 51. Everycomponenthasitsowndefinition</li></li></ul><li>DevelopingwithSenchaGeoReview<br />File app.jsis the appconfiguration<br /><ul><li>where the applicationstarts
  52. 52. creates the objectthatrepresents the entireapplication</li></ul>Ext.regApplication({ <br />name: "GeoReview",<br />tabletStartupScreen: "/mobi/resources/images/tablet_startup_screen.png",<br />phoneStartupScreen: "/mobi/resources/images/phone_startup_screen.png",<br />icon: "/mobi/resources/images/icon_app.png",<br />launch: function() {<br />GeoReview.views.viewport = newthis.views.Viewport();<br /> },<br /> …<br />});<br />
  53. 53. DevelopingwithSenchaGeoReview<br />Organization views:<br />
  54. 54. DevelopingwithSenchaGeoReview<br />File Viewport.jsis the base viewof the application, whereall the views are declared.<br />GeoReview.views.Viewport = Ext.extend(Ext.TabPanel, {<br />fullscreen: true,<br />cardSwitchAnimation: 'slide',<br />dockedItems: [...],<br />tabBar: { dock: 'bottom', layout: { pack: 'center' } },<br />initComponent: function (){<br />varviews = newObject();<br />views.mapContainer = newGeoReview.views.MapContainerPanel();<br />views.about = newGeoReview.views.AboutPanel();<br />Ext.apply(GeoReview.views, views);<br />varitems = newArray();<br />items.push(GeoReview.views.mapContainer);<br />items.push(GeoReview.views.about);<br />Ext.apply (this, { items: items });<br />GeoReview.views.Viewport.superclass.initComponent.apply(this, arguments);<br /> } <br />});<br />
  55. 55. DevelopingwithSenchaGeoReview<br />
  56. 56. DevelopingwithSenchaGeoReview<br />Whereis the data? Inside Model!<br />GeoReview.models.insertReview = function(values){<br />Ext.Ajax.request({<br /> url: '/reviews',<br />method: 'POST',<br />reader: {<br />type: 'json',<br />root: 'status'<br /> },<br />params: {<br /> "review[name]": values.name,<br /> "review[stars]": values.stars,<br /> "review[comment]": values.comment,<br /> "review[location]": values.latLng.lat() + ";" + values.latLng.lng()<br /> },<br /> success: function(response,opt) {<br /> …<br /> }<br /> });<br />}<br />
  57. 57. DevelopingwithSenchaGeoReview<br />Howtohandleuser flow? Inside Controller, ofcourse!<br />Ext.regController("MapController", {<br />insert: function(options) {<br />GeoReview.views.mapContainer.setActiveItem(GeoReview.views.insertReview);<br />GeoReview.views.insertReview.updateWithPosition(options.latLng);<br /> },<br />showMap: function() {<br />GeoReview.views.mapContainer.setActiveItem(GeoReview.views.map);<br /> },<br />showList: function(options){<br />GeoReview.views.mapContainer.setActiveItem(GeoReview.views.listReview);<br />GeoReview.views.listReview.updateWithPosition(options.latLng);<br />GeoReview.models.listReview.load(options.records);<br /> }<br />});<br />Ext.dispatch({ <br /> controller: "MapController", <br /> action: "insert", <br />latLng: e.latLng<br />});<br />
  58. 58. BackendDevelopmentGeoReview<br />Add a Review<br />post '/reviews' do<br />content_type :json<br /> review = Review.create(params["review"])<br />if review.new?<br /> { :status => false, <br /> :errors => review.errors.to_a }.to_json<br /> else<br /> { :status => true }.to_json<br /> end<br />end<br />
  59. 59. BackendDevelopmentGeoReview<br />GetReviews<br />get '/reviews' do<br />content_type :json<br /> reviews = Review.geo_search(params)<br />reviews_hash = reviews.inject({}) do |hash, value|<br /> key = value.location.inspect.hash<br /> hash[key] ||= { :lat => value.location[0], <br /> :lng => value.location[1], <br /> :total => 0, <br /> :items => [] }<br /> hash[key][:total] += 1<br /> hash[key][:items] << { :name => value.name, :stars => value.stars, :comment => value.comment }<br /> hash<br /> end<br /> { :status => true, :reviews => reviews_hash.values }.to_json<br />end<br />
  60. 60. BackendDevelopmentGeoReview<br />The ReviewModel<br />class Review<br /> include Mongoid::Document<br /> field :name, :type => String<br /> field :stars, :type => Integer<br /> field :comment, :type => String<br /> field :location, :type => Array<br /> index [[ :location, Mongo::GEO2D ]], :min => -180, :max => 180<br />validates_inclusion_of :stars, :in => (1..5).to_a, <br /> :message => "%{value}must be between 1 and 5."<br />validates_length_of :name, :minimum => 1<br />validates_length_of :comment, :minimum => 1<br /> ...<br />end<br />
  61. 61. CSS GenerationGeoReview<br />SenchaTouchallowstobecustomizedbyregeneratingits CSS:<br /><ul><li>tochange the ‘basecolor’
  62. 62. to bundle only the partsyouneed
  63. 63. to do some crazy CSS personalization, likeinliningimages</li></li></ul><li>CSS GenerationGeoReview<br />In ordertoregenerate the CSS:<br /><ul><li>weusecompass, a rubylibrarytodinamically generate CSS templates
  64. 64. normally, generating the CSS is just a ‘compass compile’ away
  65. 65. in the GeoReview project wehaveautomatizeditusing a rake task
  66. 66. tosee more details, look at this blog post: http://www.sencha.com/blog/an-introduction-to-theming-sencha-touch/</li></li></ul><li>DeploymentGeoReview<br />Wedeployedour mobile web app on Heroku:<br /><ul><li>heroku create
  67. 67. herokuaddons:addmongohq:free
  68. 68. gitpushheroku</li></li></ul><li>Testing<br />Wehave a full departmentoftesters!<br />
  69. 69. Links<br />Mavigex: http://www.mavigex.com<br />GeoReview: http://georeview.mavigex.com<br />Sencha: http://www.sencha.com<br />Sinatra: http://www.sinatrarb.com<br />Ruby: http://www.ruby-lang.org<br />Compass: http://compass-style.org/<br />Heroku: http://www.heroku.com<br />MongoDB: http://www.mongodb.org<br />
  70. 70. ThankYou!<br />

×