Mobile senza frontiere

674 views
586 views

Published on

Nel 2012 avere un'app è una necessità per ogni azienda, figurarsi per una delle ONG più importanti del mondo: Medici Senza Frontiere.
Ottimizzare gli sforzi di budget in una organizzazione come questa è un dovere, così come dare la possibilità a tutti i sostenitori di farlo indipendentemente dalla propria piattaforma di riferimento: iOS o Android ma senza dimenticare le altre.
La parola d'ordine è allora sviluppo Crossplatform: il panorama dei framework per questo è variegato. Uno dei più famosi e potenti è Titanium Appcelerator di cui abbiamo parlato lo scorso anno in MobileD!
In questo talk parleremo meglio di alcuni rudimenti e approcci tipici di Titanium per poi capire come l'integrazione con Drupal è stata realizzata e come aver garantito una sola code base Drupal che alimenti le app (iOS e Android) e il sito mobile per le altre piattaforme.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
674
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
3
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Mobile senza frontiere

  1. 1. Mobile senza Frontiere DRUPAL E TITANIUM UN MATRIMONIO SENZA FRONTIERE
  2. 2. Alessio RiccoSoftware EngineerTitanium Certified App DeveloperTi.Roma - Roma Titanium Mobile MeetupEtnatraining Titanium Mobile TrainerWHYMCA Speaker@alessioriccohttp://alessioricco.comhttp://www.linkedin.com/in/alessioriccohttp://www.slideshare.net/alessioricco
  3. 3. Titanium Mobile• Single codebase to multiple platforms• Platform specific “look and feel”• Open Source and extensible (via Modules)• Javascript: you can reuse your skills• Quick development• Integrated IDE• Increasing speed• Native code (You need the specific platform SDK)
  4. 4. Titanium Mobile
  5. 5. Titanium Mobile• Native UI components• Location API• SQLite• Value persistence API• XHR• Facebook, Twitter, YQL• audio video streaming, media recording• CommonJS, Native code modules• Analytics• Cloud services• Integrated IDE
  6. 6. Windows,Views,WidgetsWindows are typically top-level visual constructs that arethe main part of your interface.An application will always have at least one window andwindows can take different shapes and sizes, can havedisplay and interaction properties such as fullscreen ormodal and can be customized, such as changing theiropacity or background color.Views can have their properties customized, such as theirborder color and radius, can fire events such as swipeevents or touches, and can optionally contain a hierarchy orother views as children.Controls, or sometimes referred as widgets, are visualelements such as sliders, buttons and switches.
  7. 7. Webview Apps<html> <head> <script> Ti.App.addEventListener("app:fromTitanium", function(e) { alert(e.message); }); </script> </head> <body> <button onclick="Ti.App.fireEvent(app:fromWebView, { message: event fired from WebView,handled in Titanium });">fromWebView</button> </body></html>var win = Ti.UI.createWindow();var webview = Ti.UI.createWebView({ url: logging.html});var button = Ti.UI.createButton({ title: fromTitanium, height: 50dp, width: 130dp});button.addEventListener(click, function(e) { Ti.App.fireEvent(app:fromTitanium, { message: event fired from Titanium, handled in WebView });});Ti.App.addEventListener(app:fromWebView, function(e) { alert(e.message);});win.add(webview);win.add(button);win.open();
  8. 8. Apps Webviewvar webview = Ti.UI.createWebView({ url: http://www.google.com});win.add(webview);webview.addEventListener(load,function(e) { var cookies =webview.evalJS("document.cookie").split(";"); Ti.API.info( "# of cookies -> " +cookies.length ); for (i = 0; i <= cookies.length - 1; i++) { Ti.API.info( "cookie -> " + cookies[i] ); }});
  9. 9. Carlo FrinolliCreative director @nois3labDocente tecnologie open web @IEDHackerTi.Roma - Roma Titanium Mobile Meetup@carl0s_http://www.nois3lab.ithttp://carlo.nois3lab.ithttp://www.linkedin.com/in/carlofrinolli
  10. 10. Mobile senza FrontiereDal talk dello scorso anno su MobileD!a Medici Senza Frontiere. Programmi di intervento Americas 10.8% Asia NEUTRALE 25.9% 62.2% Europe INDIPENDENTE Africa IMPARZIALE 1.1% STAFF SUL POSTO HAITI (3872) REPUBBLICA DEMOCRATICA DEL CONGO (2919) SUD SUDAN (2169) SOMALIA (1729) NIGER (1705)
  11. 11. L’esigenza• informare i propri sostenitori di iniziative umanitarie e interventi sul territorio• permettergli donazioni mobili indipendentemente dalla piattaforma (iOS, Android, Blackberry, etc.)• trasparenza dell’utente e integrità dei contenuti al cambiamento
  12. 12. Il contesto• Un software CMS semplice e potente: il nostro amico Drupal.• Limiti, il solito problema di Drupal database contiene configurazione e dati Features• Drupal come web service e contemporaneamente frontend.
  13. 13. Deploy?Profili di installazione, resi semplici.Features e l’approccio code driven, maanche installazioni pronte. Come?Profiler builder può darci una mano.http://drupal.org/project/profiler_builder
  14. 14. La scelta tecnologicaTitanium e sito mobile per venire incontroall’approccio mobile first ed essere compatibilecon tutti i tipi di dispositivi.
  15. 15. Consistenza e ottimizzazioneIl team redazionale è ristretto e ha bisogno diottimizzare gli sforzi.Le informazioni e le notizie sono potenzialmente lestesse per tutte le piattaforme.Quindi una sola code base, molti front-end: lascelta è caduta su Domain Access e DomainTheme.http://drupal.org/project/domain
  16. 16. domain_theme uno sguardo agli ingredienti: msf_appI contenuti sono linkati tra loro, ma noi vogliamosfruttare le transizioni native di Ti.Dobbiamo alterare gli <a href=””>.Scriviamo un hook_link nel template.phpTi.App.fireEvent(openPage , { url:check_plain(url( <?php echo $vars[path] )) . "?device=mobileapp"; ?>, section: single , title: Back});
  17. 17. domain_theme: msf_app
  18. 18. domain_theme uno sguardo agli ingredienti: msf_mobileTema separato con un menu ad hoc, senza l’alterdei link e template potenzialmente diversi
  19. 19. domain_theme: msf_mobile
  20. 20. Funzionalità dell’app• import di playlist da YouTube• donazioni con webform• gateway pagamento Banca Sella• gestione dati personali app.msf.it
  21. 21. To Do• base theme e subthemes• gestione del json di descrizione menu con hook_menu• gestione del path di sorgente del web service Drupal• Drupal e backbone.js?
  22. 22. tiConfCross-Platform Titanium Apps & Drupal Web Services by Bob Sims Valencia, feb 23-24th, 2013 for more info: http://2013.ticonf.eu/
  23. 23. DICE GRAZIE A SPONSOR MEDIA PARTNER IN COLLABORAZIONE CONFIRMATO: GLI ORGANIZZATORI ;)

×