rails iphone app

Click here to load reader

Post on 15-May-2015

930 views

Category:

Technology

4 download

Embed Size (px)

DESCRIPTION

If we change inside and disarm ourselves by dealing constructively with negative thoughts and emotions, we can literally change the world.

TRANSCRIPT

  • Creacin de Aplicaciones Mvilescon Ruby on RailsJrgen [email protected]@codecuisine.de

  • Lo que el cliente quera+ ? =

  • Lo que acabamos usando?jqTouchJavaScript biblioteca basado en jQueryHTML5/CSS3Controls emuladosWebKit BrowsersMobile Safari, Chrome AndroidOpen SourcePhoneGapSirve como container de la aplicacin WebFramework para crear aplicaciones nativas con tecnologas WebiPhone, Android, Palm, Symbian, Blackberry

  • As empezamosconfig/initializers/mime_types.rb...Mime::Type.register_alias "text/html", :jqtouch...

  • Detectar user agentapp/controllers/application_controller.rbclass ApplicationController < ActionController::Base before_filter :adjust_request_format_for_mobile_device

    layout "application"

    def index format.jqtouch {} end protected def adjust_request_format_for_mobile_device request.format = :jqtouch \ if request.user_agent =~ /iphone|ipod|ipad/i end

    end

  • Layoutapp/views/layout/application.jqtouch.erb

    jQTouch App var jQT = new $.jQTouch({ icon: 'appicon.png', addGlossToIcon: true, startupScreen: 'appsplash.png', statusBar: 'default', ... }); /* Custom Style */

  • Pagina principalapp/views/application_controller/index.jqtouch.erb

    Logout Banking mit Freunden! Endlich ehrliche Geldtipps und Ratschlge von anderen Usern Die erste Bank die mir fr meineonline Aktivitten Geld gibt Community Transaktionen Mein Geld Information Gemeinsam mehr Geld.

    Geldfrage Back Logout

    Anonym Send

    ...

  • Controller Simpleapp/controllers/questions_controller.rbclass QuestionsController < ApplicationController def new format.jqtouch {} end

    def create ... end

    end

  • Formulario simpleapp/views/questions/new.jqtouch.erb

    Geldfrage Back Logout

    Anonym Send

  • Como hacer render?app/controllers/questions_controller.rbclass QuestionsController < ApplicationController def new format.jqtouch {} end

    def create @question = Question.new params[:question] if @question.save render :action => "show", :layout => false else render :action => "new", :layout => false end end

    end

  • Como hacer redirect?app/controllers/questions_controller.rbclass QuestionsController < ApplicationController def create ... # redirect_to no funciona...entonces render_json_response :redirect, :to => "/sessions/new" ... end

    protected

    def render_json_response(type, options={}) ... endend

  • No hay, entonces redirect con JSONapp/controllers/questions_controller.rbclass QuestionsController < ApplicationController def create ... end

    protected

    def render_json_response(type, options={}) default_json_structure = {:status => type, :html => nil, :js => nil, :message => nil, :to => nil, :user_id => nil}.merge(options) render_options = {:json => default_json_structure} render_options[:status] = 400 if type == :error render(render_options) endend

  • El cliente recibe JSON{status:"redirect",to:"/sessions/new#login"}{status:"error",message:"Try again!"}{status:"ok",js:"alert('Success!');"}{status:"error",html:"..."}

  • El cliente recibe JSONpublic/jqtouch/mobile.jsvar app = { json:function($form) { $.ajax({ type:$form.attr("method"), url:$form.attr("action"), dataType:"json", data:$form.serialize(), complete:function (XMLHttpRequest, textStatus) { var jsonResponse = window.eval("(" + XMLHttpRequest.responseText + ")"); if (jsonResponse.status == "error") { alert(jsonResponse.message); } elsif (jsonResponse.status == "redirect") { // insert page } } }); return false; }, ...}

    var jsonFn = function(e) { var $form = $(this).closest("form"); return app.json($form);};$("form.json a.send").live("tap", jsonFn);$("form.json").live("submit", jsonFn);

  • PhoneGapDownload http://www.phonegap.com/XCode http://developer.apple.com/Build PhoneGap plugin y agregar a XcodeArchivos estaticos van a

  • Xcode IDE

  • Demo