Date post: | 22-May-2015 |
Category: |
Technology |
Upload: | carlo-frinolli-puzzilli |
View: | 406 times |
Download: | 1 times |
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 ;)