[drupalday2017] - Contenuti educativi digitali aperti, creare contenuti e dis...
Drupal Day 2012 - Applicazioni mobile multipiattaforma integrate con Drupal 7 Nuove possibil…
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
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
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
24.
25.
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");
}
});
};
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