Post on 15-May-2015
description
Creación de Aplicaciones Móvilescon Ruby on Rails
Jürgen Feßlmeier@chinshr
fesslmeier@codecuisine.de
Lo que el cliente quería
+ ? =
¿Lo que acabamos usando?
jqTouch• JavaScript biblioteca
basado en jQuery• HTML5/CSS3• Controls emulados• WebKit Browsers• Mobile Safari, Chrome
Android• Open Source
PhoneGap• Sirve como container de
la aplicación Web• Framework para crear
aplicaciones nativas con tecnologías Web
• iPhone, Android, Palm, Symbian, Blackberry
Así empezamos
config/initializers/mime_types.rb...Mime::Type.register_alias "text/html", :jqtouch...
Detectar user agent
app/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<!doctype html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <title>jQTouch App</title> <script type="text/javascript" charset="utf-8"> var jQT = new $.jQTouch({ icon: 'appicon.png', addGlossToIcon: true, startupScreen: 'appsplash.png', statusBar: 'default', ... }); </script> <style type="text/css" media="screen"> /* Custom Style */ </style> </head> <body> <div id="jqt"> <%= yield %> </div> </body></html>
Pagina principalapp/views/application_controller/index.jqtouch.erb<!-- home --><div id="home" class="current" style="top: 0px; "> <div class="toolbar"><a class="button logout" href="http://127.0.0.1:3000/m/session/destroy">Logout</a> <div class="logo"></div> </div> <div class="vertical-scroll"><div style="-webkit-transform: translate3d(0px, 0px, 0px); -webkit-transition-duration: 0ms; -webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1); "> <div class="startscreen"> <div class="image"> <h1>Banking mit Freunden!</h1> <i class="bubble1">„Endlich ehrliche Geldtipps und <br>Ratschläge von anderen Usern“</i> <i class="bubble2">„Die erste Bank die mir für meine<br>online Aktivitäten Geld gibt“</i> </div> </div> <ul class="main"> <li class="quest"> <a href="http://127.0.0.1:3000/m/community" class="required">Community</a> </li> <li class="euro_arrow"> <a href="http://127.0.0.1:3000/m/banking/transactions" class="required">Transaktionen</a> </li> <li class="euro"> <a href="http://127.0.0.1:3000/m/banking/my_money" class="required">Mein Geld</a> </li> </ul> <ul class="reco"> <li><a href="">Information</a></li> </ul> <p class="info"> Gemeinsam mehr Geld. </p> </div></div></div>
<form id=”question” action="/question/create"> <div class="toolbar"> <h1>Geldfrage</h1> <a class="back">Back</a> <a class="button" href="/session/destroy">Logout</a> </div>
<ul class="rounded"> <li><textarea placeholder="Question" name="smart_question[question]"></textarea></li> <li>Anonym<span class="toggle"><input type="checkbox" name="smart_question[anonymous]"/></span></li> </ul> <a class="whiteButton submit">Send</a> </form>
<div id="foo"> ...</div>
Controller Simple
app/controllers/questions_controller.rbclass QuestionsController < ApplicationController def new format.jqtouch {} end
def create ... end
end
Formulario simpleapp/views/questions/new.jqtouch.erb
<form id=”question” action="/question/create"> <div class="toolbar"> <h1>Geldfrage</h1> <a class="back">Back</a> <a class="button" href="/session/destroy">Logout</a> </div>
<ul class="rounded"> <li><textarea placeholder="Question" name="smart_question[question]"></textarea></li> <li>Anonym<span class="toggle"><input type="checkbox" name="smart_question[anonymous]"/></span></li> </ul> <a class="whiteButton submit">Send</a> </form>
¿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 JSON
app/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:"<div id="foo">..."}
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);
PhoneGap
• Download http://www.phonegap.com/• XCode http://developer.apple.com/• Build PhoneGap plugin y agregar a Xcode• Archivos estaticos van a
Xcode IDE
Demo