Rails iPhone App

17
Creación de Aplicaciones Móviles con Ruby on Rails Jürgen Feßlmeier @chinshr fesslmeier @codecuisine.de

description

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

Transcript of Rails iPhone App

Page 1: Rails iPhone App

Creación de Aplicaciones Móvilescon Ruby on Rails

Jürgen Feßlmeier@chinshr

[email protected]

Page 2: Rails iPhone App

Lo que el cliente quería

+ ? =

Page 3: Rails iPhone App

¿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

Page 4: Rails iPhone App

Así empezamos

config/initializers/mime_types.rb...Mime::Type.register_alias "text/html", :jqtouch...

Page 5: Rails iPhone App

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

Page 6: Rails iPhone App

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>

Page 7: Rails iPhone App

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 &nbsp;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>

Page 8: Rails iPhone App

Controller Simple

app/controllers/questions_controller.rbclass QuestionsController < ApplicationController def new format.jqtouch {} end

def create ... end

end

Page 9: Rails iPhone App

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>

Page 10: Rails iPhone App

¿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

Page 11: Rails iPhone App

¿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

Page 12: Rails iPhone App

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

Page 13: Rails iPhone App

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">..."}

Page 14: Rails iPhone App

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);

Page 15: Rails iPhone App

PhoneGap

• Download http://www.phonegap.com/• XCode http://developer.apple.com/• Build PhoneGap plugin y agregar a Xcode• Archivos estaticos van a

Page 16: Rails iPhone App

Xcode IDE

Page 17: Rails iPhone App

Demo