Mobile senza frontiere

Mobile senza Frontiere
DRUPAL E TITANIUM
UN MATRIMONIO SENZA FRONTIERE

Alessio Ricco
Software Engineer
Titanium Certiﬁed App Developer
Ti.Roma - Roma Titanium Mobile Meetup
Etnatraining Titanium Mobile Trainer
WHYMCA Speaker

@alessioricco
http://alessioricco.com
http://www.linkedin.com/in/alessioricco
http://www.slideshare.net/alessioricco

Titanium Mobile

• Single codebase to multiple platforms

• Platform speciﬁc “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 speciﬁc platform SDK)

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
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.

Views can have their properties customized, such as their
border color and radius, can ﬁre 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.

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 Webview
var 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 Frinolli
Creative director @nois3lab
Docente tecnologie open web @IED
Hacker
Ti.Roma - Roma Titanium Mobile Meetup

@carl0s_
http://www.nois3lab.it
http://carlo.nois3lab.it
http://www.linkedin.com/in/carlofrinolli

Mobile senza Frontiere
Dal 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)

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 conﬁgurazione 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 ﬁrst ed essere compatibile
con tutti i tipi di dispositivi.

Consistenza e ottimizzazione
Il 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 uno sguardo
agli ingredienti: msf_mobile

Tema separato con un menu ad hoc, senza l’alter
dei link e template potenzialmente diversi

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
Cross-Platform Titanium Apps & Drupal Web Services
by Bob Sims

Valencia, feb 23-24th, 2013

for more info:
http://2013.ticonf.eu/

DICE GRAZIE A SPONSOR

MEDIA PARTNER

IN COLLABORAZIONE CON

FIRMATO: GLI ORGANIZZATORI ;)

Mobile senza frontiere

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (17)

Ähnlich wie Mobile senza frontiere

Ähnlich wie Mobile senza frontiere (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (9)

Mobile senza frontiere