mobile senza frontiere
DESCRIPTION
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.TRANSCRIPT
Mobile senza FrontiereDRUPAL E TITANIUM
UN MATRIMONIO SENZA FRONTIERE
Alessio RiccoSoftware EngineerTitanium Certified App DeveloperTi.Roma - Roma Titanium Mobile MeetupEtnatraining Titanium Mobile Trainer WHYMCA Speaker
@alessioriccohttp://alessioricco.comhttp://www.linkedin.com/in/alessioriccohttp://www.slideshare.net/alessioricco
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)
Titanium Mobile
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
Windows,Views,Widgets
Views can have their properties customized, such as their border color and radius, can fire events such as swipe events or touches, and can optionally contain a hierarchy or other views as children.
Controls, or sometimes referred as widgets, are visual elements such as sliders, buttons and switches.
Windows are typically top-level visual constructs that are the main part of your interface.
An application will always have at least one window and windows can take different shapes and sizes, can have display and interaction properties such as fullscreen or modal and can be customized, such as changing their opacity or background color.
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();
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] ); }});
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
Mobile senza FrontiereDal talk dello scorso anno su MobileD! a Medici Senza Frontiere.
NEUTRALEINDIPENDENTEIMPARZIALE
Americas
Asia
Europe
Africa62.2%
10.8%
25.9%
1.1%
Programmi di intervento
HAITI (3872)
REPUBBLICA DEMOCRATICA DEL CONGO (2919)
SUD SUDAN (2169)
SOMALIA (1729)
NIGER (1705)
STAFF SUL POSTO
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
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.
Deploy?
Profili di installazione, resi semplici.Features e l’approccio code driven, ma anche installazioni pronte. Come?Profiler builder può darci una mano.
http://drupal.org/project/profiler_builder
La scelta tecnologica
Titanium e sito mobile per venire incontro all’approccio mobile first ed essere compatibile con tutti i tipi di dispositivi.
Consistenza e ottimizzazioneIl team redazionale è ristretto e ha bisogno di ottimizzare gli sforzi. Le informazioni e le notizie sono potenzialmente le stesse per tutte le piattaforme.Quindi una sola code base, molti front-end: la scelta è caduta su Domain Access e Domain Theme.
http://drupal.org/project/domain
domain_theme uno sguardo agli ingredienti: msf_app
I contenuti sono linkati tra loro, ma noi vogliamo sfruttare le transizioni native di Ti. Dobbiamo alterare gli <a href=””>.Scriviamo un hook_link nel template.php
Ti.App.fireEvent('openPage ', { url: check_plain(url(' <?php echo $vars['path'] )) . "?device=mobileapp"; ?>', section: 'single' , title: 'Back'});
domain_theme: msf_app
domain_theme uno sguardo agli ingredienti: msf_mobile
Tema separato con un menu ad hoc, senza l’alter dei link e template potenzialmente diversi
domain_theme: msf_mobile
Funzionalità dell’app
• import di playlist da YouTube
• donazioni con webform
• gateway pagamento Banca Sella
• gestione dati personali
app.msf.it
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?
tiConf
Valencia, feb 23-24th, 2013
for more info:http://2013.ticonf.eu/
Cross-Platform Titanium Apps & Drupal Web Servicesby Bob Sims
DICE GRAZIE A SPONSOR
MEDIA PARTNER
IN COLLABORAZIONE CON
FIRMATO: GLI ORGANIZZATORI ;)