1. Designing and developing mobile web applicationswithMockup, SenchaTouch and Sinatra Matteo Collina Daniele Bottillo @matteocollina @cribcaged7

2. WhoisMavigex Mavigexisanacademic spin-off of the Universityof Bologna whichfocuses on: Mobile applications Digitalsignage VoIPapplications Mobile broadcasting

5. Ph.D. Candidate @ UoB

7. Mobile Web Apps?

10. Powerfullanguage just like Java and Obj-C

12. Maximum Performance

14. Full hardware access

15. Mixed Native/Web code

17. Javascript Frameworks

18. enhanchesexisting mobile web sites hasunobtrusivebehaviour isnotstructuredenoughfor a full applicationdevelopment hassmall Javascript & CSS Files supportsmanydevices is in alpha status

19. derivesfromExtJS has MVC structure has the Look & Feelof native applications has big Javascript & CSS files isstable (butnot bug free, and you?)

20. Backend Technologies

22. Oftenthereis no backend

24. As oftenasnotthereis a backend

26. Exposureof JSON APIs

27. Fast-Fastdevelopment

28. Easy HTTP caching

29. Easy testing

31. JSON conversionis just a methodcallaway

32. ReallyflexibleAPIsfor HTTP caching

34. An IntegratedDevelopmentProcess

35. DevelopmentProcess

37. Viewall the reviews in a map

39. isdownloadablefrom the Android Market

40. is open source software, and the repository are on github:

41. App

42. PhoneGapIntegration

44. MockupsGeoReview

45. JSON APIsGeoReview POST /reviews params: { review:{ name: “Pippo”, stars: 3, comment: “the comment”, location: “…” } } response: { result: true }

46. JSON APIsGeoReview GET /reviews params: { lat: “..”, lng: “..”, radius: “..”} response: { status: true, reviews: [ { items: [ { name:"rff", comment:"fff", stars:4} ], total:1, lng:11.35, lat:44.49}, { items: [ { name: “gggg", comment:"Ggg", stars: 5 } ], total: 1, lng :11.35, lat:44.49 } ] }

48. Create anemptyindex.html

50. Controllersperformactions

52. creates the objectthatrepresents the entireapplicationExt.regApplication({ name: "GeoReview", tabletStartupScreen: "/mobi/resources/images/tablet_startup_screen.png", phoneStartupScreen: "/mobi/resources/images/phone_startup_screen.png", icon: "/mobi/resources/images/icon_app.png", launch: function() { GeoReview.views.viewport = newthis.views.Viewport(); }, … });

53. DevelopingwithSenchaGeoReview Organization views:

54. DevelopingwithSenchaGeoReview File Viewport.jsis the base viewof the application, whereall the views are declared. GeoReview.views.Viewport = Ext.extend(Ext.TabPanel, { fullscreen: true, cardSwitchAnimation: 'slide', dockedItems: [...], tabBar: { dock: 'bottom', layout: { pack: 'center' } }, initComponent: function (){ varviews = newObject(); views.mapContainer = newGeoReview.views.MapContainerPanel(); views.about = newGeoReview.views.AboutPanel(); Ext.apply(GeoReview.views, views); varitems = newArray(); items.push(GeoReview.views.mapContainer); items.push(GeoReview.views.about); Ext.apply (this, { items: items }); GeoReview.views.Viewport.superclass.initComponent.apply(this, arguments); } });

55. DevelopingwithSenchaGeoReview

56. DevelopingwithSenchaGeoReview Whereis the data? Inside Model! GeoReview.models.insertReview = function(values){ Ext.Ajax.request({ url: '/reviews', method: 'POST', reader: { type: 'json', root: 'status' }, params: { "review[name]": values.name, "review[stars]": values.stars, "review[comment]": values.comment, "review[location]": values.latLng.lat() + ";" + values.latLng.lng() }, success: function(response,opt) { … } }); }

57. DevelopingwithSenchaGeoReview Howtohandleuser flow? Inside Controller, ofcourse! Ext.regController("MapController", { insert: function(options) { GeoReview.views.mapContainer.setActiveItem(GeoReview.views.insertReview); GeoReview.views.insertReview.updateWithPosition(options.latLng); }, showMap: function() { GeoReview.views.mapContainer.setActiveItem(GeoReview.views.map); }, showList: function(options){ GeoReview.views.mapContainer.setActiveItem(GeoReview.views.listReview); GeoReview.views.listReview.updateWithPosition(options.latLng); GeoReview.models.listReview.load(options.records); } }); Ext.dispatch({ controller: "MapController", action: "insert", latLng: e.latLng });

58. BackendDevelopmentGeoReview Add a Review post '/reviews' do content_type :json review = Review.create(params["review"]) if review.new? { :status => false, :errors => review.errors.to_a }.to_json else { :status => true }.to_json end end

59. BackendDevelopmentGeoReview GetReviews get '/reviews' do content_type :json reviews = Review.geo_search(params) reviews_hash = reviews.inject({}) do |hash, value| key = value.location.inspect.hash hash[key] ||= { :lat => value.location[0], :lng => value.location[1], :total => 0, :items => [] } hash[key][:total] += 1 hash[key][:items] << { :name => value.name, :stars => value.stars, :comment => value.comment } hash end { :status => true, :reviews => reviews_hash.values }.to_json end

60. BackendDevelopmentGeoReview The ReviewModel class Review include Mongoid::Document field :name, :type => String field :stars, :type => Integer field :comment, :type => String field :location, :type => Array index [[ :location, Mongo::GEO2D ]], :min => -180, :max => 180 validates_inclusion_of :stars, :in => (1..5).to_a, :message => "%{value}must be between 1 and 5." validates_length_of :name, :minimum => 1 validates_length_of :comment, :minimum => 1 ... end

62. to bundle only the partsyouneed

64. normally, generating the CSS is just a ‘compass compile’ away

65. in the GeoReview project wehaveautomatizeditusing a rake task

67. herokuaddons:addmongohq:free

69. Links Mavigex: http://www.mavigex.com GeoReview: http://georeview.mavigex.com Sencha: http://www.sencha.com Sinatra: http://www.sinatrarb.com Ruby: http://www.ruby-lang.org Compass: http://compass-style.org/ Heroku: http://www.heroku.com MongoDB: http://www.mongodb.org

70. ThankYou!