Guarda il talk su http://www.youtube.com/watch?v=chnckmtMAJ0 E dai un giudizio su https://joind.in/talk/view/7706

1. Applicazioni mobile multipiattaforma
integrate con Drupal 7
Nuove possibilità di marketing con PhoneGap
Gianfranco Fedele
Web software analyst presso Insem spa
@gianfrasoft
gianfrasoft@gmail.com

2. Cos'è PhoneGap
(per gli amici Cordova)
• Adobe: PhoneGap is a free and open source
framework that allows you to create mobile apps
using standardized web APIs for the platforms you
care about.
• Apache: Cordova is a platform for building native
mobile applications using HTML, CSS and
JavaScript
• Ajaxian: a great solution for Web developers to
create applications with the technology they know
and love, without having to jump off of the cliff to
other proprietary worlds

3. Perché PhoneGap?
• E' semplice
• E' multipiattaforma
• Il know-how richiesto per lavorare con
PG è già presente nella figura
professionale dello sviluppatore Drupal
• Si integra facilmente con Drupal

4. In quale contesto conviene
utilizzare PhoneGap?
Possiamo identificare 2 contesti
principali nell'ambito dei quali le app
mobile vengono concepite:

5. In quale contesto conviene
utilizzare PhoneGap?
1. La app può essere sviluppata per
produrre un guadagno diretto mediante
attraverso la sua distribuzione
• Vendita
• Banner pubblicitari
• In-App Purchase

6. In quale contesto conviene
utilizzare PhoneGap?
2. La app viene sviluppata nel contesto di un
piano di marketing ovvero per distribuire
informazioni commerciali (Brand app):
• cataloghi di prodotti
• volantini pubblicitari
• informazioni posizionali
• e-commerce
• form di contatto

7. Perché le aziende vogliono
una brand app?

8. Perché le aziende vogliono
una brand app?
Ma in particolare, perché noi sviluppatori
non vogliamo dargliela?

9. Perché le aziende vogliono
una brand app?
Le app rappresentano un nuovo canale per
accedere ai servizi web.

10. Tempo dedicato all'utilizzo delle
app rispetto alla navigazione da
parte degli utenti di smartphone

11. Perché le app sono preferite
alla navigazione classica?
• Superano i limiti del Web, intimamente legato
all'idea di una navigazione caratterizzata da
uno scrolling verticale delle pagine
• Offrono un approccio alla navigazione delle
informazioni più gustoso (transizioni tra le viste,
animazioni, ecc.)
• Salvaguardano parte della user experience,
operando anche in assenza di connettività

12. Quali competenze servono per
intraprendere lo sviluppo delle
app mobile?
• iOS:
XCode – Cocoa – Objective-C
• Android
Java – Android SDK
• Windows Mobile
C# – Silverlight – Visual Studio 2010
...

13. Contenuto della
distribuzione di
Cordova-2.1.0
• Un archivio per ogni SO: iOS, Android,
WP7, ecc.
• Ogni archivio contiene un template per
lo sviluppo di applicazioni per ciascun
ambiente di sviluppo.

14. Contenuto della
distribuzione di
Cordova-2.1.0
• Ogni nuovo progetto PhoneGap
contiene una sottocartella www che a
sua volta contiene un file index.html
• Una app realizzata con PhoneGap crea
una vista full screen contenente una
WebView all'interno della quale viene
caricato il file index.html

15. Competenze necessarie per lo
sviluppo con PhoneGap
• Javascript
• HTML 5
• CSS 3
• SQLight

16. Competenze necessarie per lo
sviluppo con PhoneGap
• Javascript
• HTML 5
• CSS 3
• SQLight
L'integrazione con Drupal è già iniziata!

17. Quale architettura
Drupal-PhoneGap?

18. Quale architettura
Drupal-PhoneGap?

19. Quale integrazione tra
PhoneGap e Drupal
Sono possibili due approcci
• Caricamento diretto dei contenuti
• Interfacciamento coi servizi

20. Caricamento diretto dei
contenuti
Javascript è in grado di sfruttare la tecnologia
Ajax per operare modifiche del DOM della
pagina e quindi di caricare al volo le
informazioni da presentare all'utente.

21. Caricamento diretto dei
contenuti
La app interroga il portale a specifiche URL
dalle quali riceve codice HTML da caricare
direttamente nel DOM.
• Tema ad hoc con html.tpl.php “alleggerito”
• Views Datasource
• Imagecache
• Browscup

22. Interrogazione del portale
function ricerca_nodi_per_titolo(titolo)
{
$.ajax({
url: site_url + "view-nodi?title=" + titolo,
type: 'get',
error: function (XMLHttpRequest, textStatus, errorThrown)
{
navigator.notification.alert('Si è verificato un
problema durante la ricerca delle agenzie.', null, "La mia
applicazione", "Ok");
},
success: function(data)
{
$.each(data.nodes, function(node_index, node_value)
{
...
});
}
});
};

23. Interfacciamento coi
servizi
Accesso alle informazioni in formato di
scambio JSON o XML e trasformazione
negli oggetti che popoleranno il DOM
• Services
• Services Views

26. Interrogazione dei servizi
function connect()
{
$.ajax({
url: services_url + "system/connect.json",
type: 'post',
dataType: 'json',
error: function (XMLHttpRequest, textStatus,
errorThrown)
{
navigator.notification.alert('Errore di
connessione', null, "La mia applicazione", "Ok");
},
success: function (data)
{
...
}
});
};

27. Interrogazione dei servizi
function login()
{
$('#box-waiting').css('display', 'block');
$.ajax({
url: services_url + "user/login.json",
type: 'post',
data: 'username=' + encodeURIComponent(name) + '&password='
+ encodeURIComponent(pass),
dataType: 'json',
error: function(XMLHttpRequest, textStatus, errorThrown)
{
navigator.notification.alert('Si è verificato un
problema durante il login.', null, "La mia applicazione", "Ok");
},
success: function (data)
{
navigator.notification.alert('Bentornato!', null, "La
mia applicazione", "Ok");
});
};

28. Interrogazione dei servizi
function logout()
{
$.ajax({
url: services_url + "user/logout.json",
type: 'post',
dataType: 'json',
error: function(XMLHttpRequest, textStatus,
errorThrown)
{
navigator.notification.alert('Errore durante il
logout', null, "La mia applicazione", "Ok");
},
success: function (data)
{
navigator.notification.alert("Arrivederci.", null,
"La mia applicazione", "Ok");
}
});
};

29. Alcuni vantaggi offerti da
Drupal e PhoneGap

30. Alcuni vantaggi offerti da
Drupal e PhoneGap
• Javascript è nativamente asincrono
• Di default i session cookie sono gestiti
automaticamente dal WebView
• Nella app le immagini possono linkare
url disponibili sul portale Drupal
• Il layout della app può essere fluido o
addirittura adattivo

31. Alcuni svantaggi
• Le animazioni di transizione tra una vista e
l'altra vanno simulate con Javascript o CSS3
• Le librerie che solitamente si usano nei portali
possono appesantire le app e rallentarle su
dispositivi di vecchia generazione
• Le librerie di cui sopra spesso sono concepite
per il web ed adattate al mobile. Meglio fare
attenzione
• Ogni ambiente di sviluppo va opportunamente
configurato per PhoneGap

32. Q&A
Gianfranco Fedele
gianfrasoft@gmail.com

33. DICE GRAZIE A SPONSOR
MEDIA PARTNER
IN COLLABORAZIONE CON
FIRMATO: GLI ORGANIZZATORI ;)