Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Functional widgets in Rails        Sebastian Sito
Co to jest widget?  mała aplikacja wbudowana w stronę  WWW  może być funkcjonalna lub statyczna
Przykład? AlleWidget Google Gadgets Facebook like buttons
Na początek statyczny content<script type="text/javascript"  src="http://hostapp.com/api/widget/main"></script>
Uwaga na Operę!<script type="text/javascript"  src="http://hostapp.com/api/widget/main.js"></script>
Po stronie aplikacjiapp/controllers/widget_controller.rbclass Api::WidgetController < ApplicationController   layout :nil ...
Po stronie aplikacjiapp/views/api/widget/main.js.erbdocument.write(<div id="widget">);<%= @title %>document.write(</div>);
Personalizacja widgetuapp/controllers/widget_controller.rbclass Api::WidgetController < ApplicationController   layout :ni...
Personalizacja widgetuconfig/routes.rbnamespace :api do  match /widget/:action/:api_key,     :controller => widget,     :a...
Personalizacja widgetu<script type="text/javascript">  var __apiKey = "qcg35cgwhojpm839v5";</script><script type="text/jav...
Widget funkcjonalnyMamy problem: aplikacja i widget to dwie różne domeny!
JSONP z pomocąCzęsto używany, żeby obejść problemy związane zkomunikacją między domenami.JSONvar xhr = new XMLHttpRequest(...
JSONP z pomocąJSONPvar tag = document.createElement("script");tag.src = http://somewhere?callback=foo;document.getElements...
Jaka jest różnica?Różnica w zapytaniu JSONP polega na tym, że odpowiedź jestprzekazywana jako argument wywołania funkcji -...
Jaka jest różnica?Różnica w zapytaniu JSONP polega na tym, że odpowiedź jestprzekazywana jako argument wywołania funkcji -...
JSONP i Rails 3Musimy obsłużyć:http://hostapp.com/api/widget/action?callback=foo
JSONP i Rails 3Musimy obsłużyć:http://hostapp.com/api/widget/action?callback=fooOdpowiedź można sformułować tak:render :js...
JSONP i Rails 3Musimy obsłużyć:http://hostapp.com/api/widget/action?callback=fooOdpowiedź można sformułować tak:render :js...
SameOriginPolicyclass Api::WidgetController < ApplicationController   after_filter :set_access_control_headersend
SameOriginPolicyclass Api::WidgetController < ApplicationController   after_filter :set_access_control_headersenddef set_a...
Wszystko razemJeśli widget ma wiele funkcji, trzeba jakoś sprytnie ustalićsposób komunikacji.
Wszystko razemJeśli widget ma wiele funkcji, trzeba jakoś sprytnie ustalićsposób komunikacji.
Ładowanie widgetuPomysł polega na umieszczeniu całej logiki komunikacji iwidoku w samym widgecie, dzięki czemu zaoszczędzi...
Logika widgetuif(window.Widget == undefined) {   window.Widget = {     Settings: {},     API: {},     Handlers: {},     GU...
UstawieniaSettings: {  api: {     url: "http://hostapp.com/api/widget"  }}
APIAPI: {  call: function(action, data) {  var url = Widget.Settings.api.url + / +     action;  data[api_key] = __apiKey; ...
Rails responsedef widget_response(action, data)  response_hash = {:action => action,     :data => data}  render :json => r...
APIAPI: {  responseHandler: function() {    Widget.Handlers[action](response.data)  }}
HandlersHandlers: {  init: function(data) {     // populate widget with data     // and draw some GUI     Widget.GUI.rende...
Jeszcze ciekawiej: IFRAME w widgecieCo jeśli w swoim widgecie uruchomimy jeszcze inną stronę wIFRAME i będziemy chcieli mi...
Jeszcze ciekawiej: IFRAME w widgecieCo jeśli w swoim widgecie uruchomimy jeszcze inną stronę wIFRAME i będziemy chcieli mi...
Jeszcze ciekawiej: IFRAME w widgecieCo jeśli w swoim widgecie uruchomimy jeszcze inną stronę wIFRAME i będziemy chcieli mi...
PrzykładHost Apphttp://rails-widget-example.heroku.comWidget<!doctype html><html><head><title>Widget Client</title>  <scri...
Dzięki :)E-mail  sebastian@emaire.comTwitter  @sebastiandreakeKod aplikacji live  https://github.com/dreake/widget
Upcoming SlideShare
Loading in …5
×

Functional widgets in Rails

1,545 views

Published on

Published in: Technology, Business
  • Be the first to comment

  • Be the first to like this

Functional widgets in Rails

  1. 1. Functional widgets in Rails Sebastian Sito
  2. 2. Co to jest widget? mała aplikacja wbudowana w stronę WWW może być funkcjonalna lub statyczna
  3. 3. Przykład? AlleWidget Google Gadgets Facebook like buttons
  4. 4. Na początek statyczny content<script type="text/javascript" src="http://hostapp.com/api/widget/main"></script>
  5. 5. Uwaga na Operę!<script type="text/javascript" src="http://hostapp.com/api/widget/main.js"></script>
  6. 6. Po stronie aplikacjiapp/controllers/widget_controller.rbclass Api::WidgetController < ApplicationController layout :nil def main respond_to do |format| format.js end endend
  7. 7. Po stronie aplikacjiapp/views/api/widget/main.js.erbdocument.write(<div id="widget">);<%= @title %>document.write(</div>);
  8. 8. Personalizacja widgetuapp/controllers/widget_controller.rbclass Api::WidgetController < ApplicationController layout :nil before_filter :validate_api_key def main respond_to do |format| format.js end endend
  9. 9. Personalizacja widgetuconfig/routes.rbnamespace :api do match /widget/:action/:api_key, :controller => widget, :api_key => /.*/endapp/controllers/api/widget_controller.rbdef validate_api_key render :text => Invalid API key unless params[:api_key] and return render :text => Wrong API credentials if not User.find_by_key(params[:api_key]) and returnend
  10. 10. Personalizacja widgetu<script type="text/javascript"> var __apiKey = "qcg35cgwhojpm839v5";</script><script type="text/javascript" src="http://hostapp.com/api/widget/main"></script>
  11. 11. Widget funkcjonalnyMamy problem: aplikacja i widget to dwie różne domeny!
  12. 12. JSONP z pomocąCzęsto używany, żeby obejść problemy związane zkomunikacją między domenami.JSONvar xhr = new XMLHttpRequest();xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { // success };};xhr.open("GET", "http://somewhere", true);xhr.send();
  13. 13. JSONP z pomocąJSONPvar tag = document.createElement("script");tag.src = http://somewhere?callback=foo;document.getElementsByTagName("head")[0].appendChild(tag);
  14. 14. Jaka jest różnica?Różnica w zapytaniu JSONP polega na tym, że odpowiedź jestprzekazywana jako argument wywołania funkcji - stąd parametrcallback.WAŻNE!W odróżnieniu od zwykłego zapytania XHR w zapytaniuJSONP nie można wyłapać błędów - dostajemy poprostuParseError
  15. 15. Jaka jest różnica?Różnica w zapytaniu JSONP polega na tym, że odpowiedź jestprzekazywana jako argument wywołania funkcji - stąd parametrcallback.WAŻNE!W odróżnieniu od zwykłego zapytania XHR w zapytaniuJSONP nie można wyłapać błędów - dostajemy poprostuParseError Na szczęście jQuery robi to za nas!
  16. 16. JSONP i Rails 3Musimy obsłużyć:http://hostapp.com/api/widget/action?callback=foo
  17. 17. JSONP i Rails 3Musimy obsłużyć:http://hostapp.com/api/widget/action?callback=fooOdpowiedź można sformułować tak:render :json => @items.to_json, :callback => params[:callback]
  18. 18. JSONP i Rails 3Musimy obsłużyć:http://hostapp.com/api/widget/action?callback=fooOdpowiedź można sformułować tak:render :json => @items.to_json, :callback => params[:callback]Otrzymujemy błędy z powodu innej domeny z którą chcemy siępołączyć?
  19. 19. SameOriginPolicyclass Api::WidgetController < ApplicationController after_filter :set_access_control_headersend
  20. 20. SameOriginPolicyclass Api::WidgetController < ApplicationController after_filter :set_access_control_headersenddef set_access_control_headers headers[Access-Control-Allow-Origin] = * headers[Access-Control-Request-Method] = *end
  21. 21. Wszystko razemJeśli widget ma wiele funkcji, trzeba jakoś sprytnie ustalićsposób komunikacji.
  22. 22. Wszystko razemJeśli widget ma wiele funkcji, trzeba jakoś sprytnie ustalićsposób komunikacji.
  23. 23. Ładowanie widgetuPomysł polega na umieszczeniu całej logiki komunikacji iwidoku w samym widgecie, dzięki czemu zaoszczędzimy narequestach (będziemy wysyłać i odbierać tylko dane)<script type="text/javascript" src="http://hostapp.com/api/widget/main"></script>app/views/api/widget/main.js.erbif(window.Widget == undefined) { window.Widget = { // logic here}}
  24. 24. Logika widgetuif(window.Widget == undefined) { window.Widget = { Settings: {}, API: {}, Handlers: {}, GUI: {} }}$(document).ready(function() {Widget.API.call(init, {});});
  25. 25. UstawieniaSettings: { api: { url: "http://hostapp.com/api/widget" }}
  26. 26. APIAPI: { call: function(action, data) { var url = Widget.Settings.api.url + / + action; data[api_key] = __apiKey; $.ajax({url: url,data: data,crossDomain: true, dataType: "jsonp", success: Widget.API.responseHandler });}
  27. 27. Rails responsedef widget_response(action, data) response_hash = {:action => action, :data => data} render :json => response_hash.to_json, :callback => params[:callback]end
  28. 28. APIAPI: { responseHandler: function() { Widget.Handlers[action](response.data) }}
  29. 29. HandlersHandlers: { init: function(data) { // populate widget with data // and draw some GUI Widget.GUI.render(data); }}
  30. 30. Jeszcze ciekawiej: IFRAME w widgecieCo jeśli w swoim widgecie uruchomimy jeszcze inną stronę wIFRAME i będziemy chcieli mieć możliwość odpowiedzieć zniego na pewne zdarzenie w IFRAME?
  31. 31. Jeszcze ciekawiej: IFRAME w widgecieCo jeśli w swoim widgecie uruchomimy jeszcze inną stronę wIFRAME i będziemy chcieli mieć możliwość odpowiedzieć zniego na pewne zdarzenie w IFRAME? Hash pooling
  32. 32. Jeszcze ciekawiej: IFRAME w widgecieCo jeśli w swoim widgecie uruchomimy jeszcze inną stronę wIFRAME i będziemy chcieli mieć możliwość odpowiedzieć zniego na pewne zdarzenie w IFRAME? Hash poolingWidget.interval = setInterval(handleWindowHash, 1000)teraz z wewnątrz IFRAME zmieniamy hash okna nadrzędnegowindow.location.hash = "trigger_sth"
  33. 33. PrzykładHost Apphttp://rails-widget-example.heroku.comWidget<!doctype html><html><head><title>Widget Client</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> var __userSecret = 8102260836164404; </script> <script type="text/javascript" src="http:// rails-widget-example.heroku.com/api/widget/main.js"> </script></head> <body><div><h1>Widget example</h1></div><div id="widget_placeholder"></div> </body></html>
  34. 34. Dzięki :)E-mail sebastian@emaire.comTwitter @sebastiandreakeKod aplikacji live https://github.com/dreake/widget

×