Rails iPhone App
Download as PPT, PDF0 likes395 views
If we change inside and disarm ourselves by dealing constructively with negative thoughts and emotions, we can literally change the world.
![Pagina principal app/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>](https://image.slidesharecdn.com/railsappsmovilesfesslmeier-100920065456-phpapp01/85/Rails-iPhone-App-7-320.jpg)
![Formulario simple app/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>](https://image.slidesharecdn.com/railsappsmovilesfesslmeier-100920065456-phpapp01/85/Rails-iPhone-App-9-320.jpg)
![¿Como hacer render ? app/controllers/questions_controller.rb class 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](https://image.slidesharecdn.com/railsappsmovilesfesslmeier-100920065456-phpapp01/85/Rails-iPhone-App-10-320.jpg)
![No hay, entonces redirect con JSON app/controllers/questions_controller.rb class 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) end end](https://image.slidesharecdn.com/railsappsmovilesfesslmeier-100920065456-phpapp01/85/Rails-iPhone-App-12-320.jpg)
Rails iPhone App
- 1. Creación de Aplicaciones Móviles con Ruby on Rails Jürgen Feßlmeier @chinshr fesslmeier @codecuisine.de
- 2. Lo que el cliente quería + ? =
- 3. ¿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
- 4. Así empezamos config/initializers/mime_types.rb ... Mime::Type.register_alias "text/html" , :jqtouch ...
- 5. Detectar user agent app/controllers/application_controller.rb class 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
- 6. Layout app/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>
- 7. Pagina principal app/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>
- 8. Controller Simple app/controllers/questions_controller.rb class QuestionsController < ApplicationController def new format.jqtouch {} end def create ... end end
- 9. Formulario simple app/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>
- 10. ¿Como hacer render ? app/controllers/questions_controller.rb class 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
- 11. ¿Como hacer redirect ? app/controllers/questions_controller.rb class QuestionsController < ApplicationController def create ... # redirect_to no funciona...entonces render_json_response :redirect, :to => "/sessions/new" ... end protected def render_json_response(type, options={}) ... end end
- 12. No hay, entonces redirect con JSON app/controllers/questions_controller.rb class 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) end end
- 13. 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">..."}
- 14. El cliente recibe JSON public/jqtouch/mobile.js var 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);
- 15. PhoneGap Download http://www.phonegap.com/ XCode http://developer.apple.com/ Build PhoneGap plugin y agregar a Xcode Archivos estaticos van a
- 16. Xcode IDE
- 17. Demo