Your SlideShare is downloading. ×
Designing and developing mobile web applications with Mockup, Sencha Touch and Sinatra
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

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

7,424
views

Published on


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

No Downloads
Views
Total Views
7,424
On Slideshare
0
From Embeds
0
Number of Embeds
17
Actions
Shares
0
Downloads
2
Comments
0
Likes
3
Embeds 0
No embeds

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

Transcript

  • 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
  • 3. WhoWe Are
    Daniele Bottillo:
    • Web mobile designer and developer
    • 4. @cribcaged7
    Matteo Collina:
    • Software Engineer
    • 5. Ph.D. Candidate @ UoB
    • 6. @matteocollina
  • Mobile Web Apps?
  • 7. Mobile Web Apps?
  • 8. vs
    HTML5 and CSS3:
    • Look & Feelsimilarto native applications
    • 9. Advancedgraphicseffects (gradients, fades, slides…)
  • vs
    Javascript:
    • Everybodythinktheyknowit :-)
    • 10. Powerfullanguage just like Java and Obj-C
    • 11. Severalframeworksfor mobile development
  • vs
    Native Applications:
    • Full controlof the Hardware
    • 12. Maximum Performance
    • 13. IDEs (Xcode, Eclipse)
  • vs
    PhoneGap:
    • AllowstoreachAppStoreswith Mobile Web Apps
    • 14. Full hardware access
    • 15. Mixed Native/Web code
    • 16. Limitedperformances
  • DevelopmentProcess
    Write
    Test
    Native Approach
    HybridApproach
    Build
    Build
    Less Work
    =
    Less €
    More Work
    =
    More €
  • 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
  • 21. Frontend + Backend
    Native Apps
    • The frontend and the backend are developedseparately
    • 22. Oftenthereis no backend
    • 23. Whenbackendfunctionalityisneeded, the integrationiscomplex
    Mobile Web Apps
    • Frontend and Backend are tightlybound
    • 24. As oftenasnotthereis a backend
    • 25. Easy sharingof data between the browser and the JSON APIs
  • BackendRequirements
  • Ruby + Sinatra
    • REST is just built-in
    • 31. JSON conversionis just a methodcallaway
    • 32. ReallyflexibleAPIsfor HTTP caching
    • 33. Community madwithtesting
  • Ruby + Sinatra
    require 'sinatra'
    get '/hi' do
    "Hello World!"
    end
  • 34. An IntegratedDevelopmentProcess
  • 35. DevelopmentProcess
  • 36. ProblemDefinitionGeoReview
    A simplegeolocalizedApptoreviewlocations. A user can:
    • Enter a star-basedreviewof some coordinates
    • 37. Viewall the reviews in a map
    • 38. View the reviewdetailsof a point
  • GeoReview
    The GeoReviewApp
    • isavailable at: georeview.mavigex.com
    • 39. isdownloadablefrom the Android Market
    • 40. is open source software, and the repository are on github:
    • 41. App
    • 42. PhoneGapIntegration
    • 43. isnot bug free, butwhoitis?
  • MockupsGeoReview
  • 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 } ] }
  • 47. DevelopingwithSenchaGeoReview
    Gettingstarted:
    • Download SenchaTouch
    • 48. Create anemptyindex.html
    • 49. Includethe JS+CSSlibraries
  • DevelopingwithSenchaGeoReview
    SenchaTouchis a MVC framework,
    whatdoesitmean?
    • Views and models are separated
    • 50. Controllersperformactions
    • 51. Everycomponenthasitsowndefinition
  • DevelopingwithSenchaGeoReview
    File app.jsis the appconfiguration
    • where the applicationstarts
    • 52. creates the objectthatrepresents the entireapplication
    Ext.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
  • 61. CSS GenerationGeoReview
    SenchaTouchallowstobecustomizedbyregeneratingits CSS:
    • tochange the ‘basecolor’
    • 62. to bundle only the partsyouneed
    • 63. to do some crazy CSS personalization, likeinliningimages
  • CSS GenerationGeoReview
    In ordertoregenerate the CSS:
    • weusecompass, a rubylibrarytodinamically generate CSS templates
    • 64. normally, generating the CSS is just a ‘compass compile’ away
    • 65. in the GeoReview project wehaveautomatizeditusing a rake task
    • 66. tosee more details, look at this blog post: http://www.sencha.com/blog/an-introduction-to-theming-sencha-touch/
  • DeploymentGeoReview
    Wedeployedour mobile web app on Heroku:
    • heroku create
    • 67. herokuaddons:addmongohq:free
    • 68. gitpushheroku
  • Testing
    Wehave a full departmentoftesters!
  • 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!