• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Designing and developing mobile web applications with Mockup, Sencha Touch and Sinatra
 

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

on

  • 6,992 views

 

Statistics

Views

Total Views
6,992
Views on SlideShare
2,851
Embed Views
4,141

Actions

Likes
3
Downloads
2
Comments
0

21 Embeds 4,141

http://www.matteocollina.com 2834
http://www.mavigex.com 562
http://dev-web.mavigex.com 387
http://www.whymca.org 214
http://localhost 71
http://mavigex.com 25
http://www.collina.me 17
http://www.techgig.com 7
https://www.linkedin.com 5
http://www.verious.com 3
http://www.mastertouch.it 3
http://twitter.com 2
http://paper.li 2
http://ec2-54-246-69-132.eu-west-1.compute.amazonaws.com 2
https://www.matteocollina.com 1
http://www.linkedin.com 1
http://www.mastermobile.it 1
http://www.google.it 1
https://github.com 1
http://xplatform.mavigex.com 1
http://www.google.fr 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • Designing and developing mobile web applicationswithMockup, SenchaTouch and Sinatra
      Matteo Collina
      Daniele Bottillo
      @matteocollina
      @cribcaged7
    • WhoisMavigex
      Mavigexisanacademic spin-off of the Universityof Bologna whichfocuses on:
      Mobile applications
      Digitalsignage
      VoIPapplications
      Mobile broadcasting
    • WhoWe Are
      Daniele Bottillo:
      • Web mobile designer and developer
      • @cribcaged7
      Matteo Collina:
      • Software Engineer
      • Ph.D. Candidate @ UoB
      • @matteocollina
    • Mobile Web Apps?
    • Mobile Web Apps?
    • vs
      HTML5 and CSS3:
      • Look & Feelsimilarto native applications
      • Advancedgraphicseffects (gradients, fades, slides…)
    • vs
      Javascript:
      • Everybodythinktheyknowit :-)
      • Powerfullanguage just like Java and Obj-C
      • Severalframeworksfor mobile development
    • vs
      Native Applications:
      • Full controlof the Hardware
      • Maximum Performance
      • IDEs (Xcode, Eclipse)
    • vs
      PhoneGap:
      • AllowstoreachAppStoreswith Mobile Web Apps
      • Full hardware access
      • Mixed Native/Web code
      • Limitedperformances
    • DevelopmentProcess
      Write
      Test
      Native Approach
      HybridApproach
      Build
      Build
      Less Work
      =
      Less €
      More Work
      =
      More €
    • Javascript Frameworks
    • enhanchesexisting mobile web sites
      hasunobtrusivebehaviour
      isnotstructuredenoughfor a full applicationdevelopment
      hassmall Javascript & CSS Files
      supportsmanydevices
      is in alpha status
    • derivesfromExtJS
      has MVC structure
      has the Look & Feelof native applications
      has big Javascript & CSS files
      isstable (butnot bug free, and you?)
    • Backend Technologies
    • Frontend + Backend
      Native Apps
      • The frontend and the backend are developedseparately
      • Oftenthereis no backend
      • Whenbackendfunctionalityisneeded, the integrationiscomplex
      Mobile Web Apps
      • Frontend and Backend are tightlybound
      • As oftenasnotthereis a backend
      • Easy sharingof data between the browser and the JSON APIs
    • BackendRequirements
      • REST principles
      • Exposureof JSON APIs
      • Fast-Fastdevelopment
      • Easy HTTP caching
      • Easy testing
      • Easy deployment
    • Ruby + Sinatra
      • REST is just built-in
      • JSON conversionis just a methodcallaway
      • ReallyflexibleAPIsfor HTTP caching
      • Community madwithtesting
    • Ruby + Sinatra
      require 'sinatra'
      get '/hi' do
      "Hello World!"
      end
    • An IntegratedDevelopmentProcess
    • DevelopmentProcess
    • ProblemDefinitionGeoReview
      A simplegeolocalizedApptoreviewlocations. A user can:
      • Enter a star-basedreviewof some coordinates
      • Viewall the reviews in a map
      • View the reviewdetailsof a point
    • GeoReview
      The GeoReviewApp
      • isavailable at: georeview.mavigex.com
      • isdownloadablefrom the Android Market
      • is open source software, and the repository are on github:
      • App
      • PhoneGapIntegration
      • isnot bug free, butwhoitis?
    • MockupsGeoReview
    • MockupsGeoReview
    • JSON APIsGeoReview
      POST /reviews
      params:
      { review:{ name: “Pippo”, stars: 3, comment: “the comment”, location: “…” } }
      response:
      { result: true }
    • 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 } ] }
    • DevelopingwithSenchaGeoReview
      Gettingstarted:
      • Download SenchaTouch
      • Create anemptyindex.html
      • Includethe JS+CSSlibraries
    • DevelopingwithSenchaGeoReview
      SenchaTouchis a MVC framework,
      whatdoesitmean?
      • Views and models are separated
      • Controllersperformactions
      • Everycomponenthasitsowndefinition
    • DevelopingwithSenchaGeoReview
      File app.jsis the appconfiguration
      • where the applicationstarts
      • 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();
      },

      });
    • DevelopingwithSenchaGeoReview
      Organization views:
    • 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);
      }
      });
    • DevelopingwithSenchaGeoReview
    • 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) {

      }
      });
      }
    • 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
      });
    • 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
    • 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
    • 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
    • CSS GenerationGeoReview
      SenchaTouchallowstobecustomizedbyregeneratingits CSS:
      • tochange the ‘basecolor’
      • to bundle only the partsyouneed
      • to do some crazy CSS personalization, likeinliningimages
    • CSS GenerationGeoReview
      In ordertoregenerate the CSS:
      • weusecompass, a rubylibrarytodinamically generate CSS templates
      • normally, generating the CSS is just a ‘compass compile’ away
      • in the GeoReview project wehaveautomatizeditusing a rake task
      • 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
      • herokuaddons:addmongohq:free
      • gitpushheroku
    • Testing
      Wehave a full departmentoftesters!
    • 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
    • ThankYou!