Your SlideShare is downloading. ×
0
Webkit meets native development
Webkit meets native development
Webkit meets native development
Webkit meets native development
Webkit meets native development
Webkit meets native development
Webkit meets native development
Webkit meets native development
Webkit meets native development
Webkit meets native development
Webkit meets native development
Webkit meets native development
Webkit meets native development
Webkit meets native development
Webkit meets native development
Webkit meets native development
Webkit meets native development
Webkit meets native development
Webkit meets native development
Webkit meets native development
Webkit meets native development
Webkit meets native development
Webkit meets native development
Webkit meets native development
Webkit meets native development
Webkit meets native development
Webkit meets native development
Webkit meets native development
Webkit meets native development
Webkit meets native development
Webkit meets native development
Webkit meets native development
Webkit meets native development
Webkit meets native development
Webkit meets native development
Webkit meets native development
Webkit meets native development
Webkit meets native development
Webkit meets native development
Webkit meets native development
Webkit meets native development
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Webkit meets native development

1,289

Published on

Integrazione tra il Webkit-engine ed una Applicazione nativa per iPad. …

Integrazione tra il Webkit-engine ed una Applicazione nativa per iPad.

Relatori:
Nicholas Valbusa – nicholas.valbusa@intesys.it
Alessandro Maroldi – alessandro.maroldi@intesys.it

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,289
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
26
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript

    • 1. Webkit Meets Native DevelopmentIntegrazione tra il Webkit-engine ed una Applicazione nativa per iPad.Relatori:Nicholas Valbusa – nicholas.valbusa@intesys.itAlessandro Maroldi – alessandro.maroldi@intesys.it
    • 2. Presentazione Presentazione 70 specialisti Intesys 1 Società controllata + 1 Consociata
    • 3. Presentazione Premesse e features (1/2)  Webkit: è un framework e motore di rendering (open-source), utilizzato in Safari, Google Chrome e altre applicazioni.  WebView: classe/object disponibile nell’SDK di iOS per gestire e visualizzare contenuti web tramite Webkit.  La nostra mission consiste nell’integrare all’interno di una applicazione nativa per iPad delle form di raccolta dati realizzate in HTML.  Istanzieremo quindi un browser all’interno della nostra applicazione, e faremo credere ad esso che il nostro iPad sia il suo webserver di riferimento.
    • 4. Presentazione Premesse e features (2/2)  Il nostro iPad intercetterà le chiamate delle form e salverà in locale i dati (quindi senza connettività) grazie a SQLite (nativo obj-c, non sqlite di webkit).  Faremo interagire le nostre form con Objective-C, iniettando dati all’interno del browser.  Interagiremo con diverse risorse locali già presenti sul device.  L’applicazione fungendo da (quasi) widget con un cron schedulato, si preoccuperà dellʼinvio dei dati raccolti ed altre funzionalità aggiunte.
    • 5. Presentazione Perché nativo, perché Webkit NATIVO WEBKIT  Storage SQL persistente  Facilità di sviluppo form  Criptaggio dei dati  Utilizzo standard web  Cronjob  Plugin per autocompletamento  Distribuzione su App Store  Alta personalizzazione grafica  Possibilità di istanziare il Webkit- engine  Meno dati scambiati con il server
    • 6. Presentazione Schema di funzionamento generale Gli utenti compileranno una form di profilazione su iPad ed i dati raccolti verranno inviati ad un webservice centrale.
    • 7. Presentazione Panoramica architetturale Il grafico descrive schematicamente come sarà l’architettura interna della nostra applicazione.
    • 8. Presentazione Gli argomenti che andremo ad affrontare  Realizzazione form  To the iPad  Rendering  Playing with delegate  Back to server  Mobilead: dal test alla pratica
    • 9. Presentazione Realizzazione
form To
the
iPad Rendering Playing
with
delegate Back
to
server MobiLead:
dal
test
alla
pra<ca Realizzazione form  Creazione form HTML  Deploy su webserver
    • 10. Presentazione Realizzazione
form To
the
iPad Rendering Playing
with
delegate Back
to
server MobiLead:
dal
test
alla
pra<ca Prima fase: creiamo una semplice form HTML Scriviamo una semplice form HTML senza preoccuparci di controlli, doctype, dichiarazioni, ecc.. – si preoccuperà di tutto più avanti la nostra applicazione ;) Siamo liberi di utilizzare anche HTML5 nella composizione della nostra form in quanto WebKit lo renderizza senza problemi.
    • 11. Presentazione Realizzazione
form To
the
iPad Rendering Playing
with
delegate Back
to
server MobiLead:
dal
test
alla
pra<ca Salviamo la nostra form sul webserver Pubblichiamo la nostra form su un indirizzo che sia accessibile dalla nostra applicazione per iPad. (Un url pubblico andrà benissimo, es. www.example.org/mia_form.html). Desktop rendering (lo spartano risultato ottenuto fino ad ora):
    • 12. Presentazione Realizzazione
form To
the
iPad Rendering Playing
with
delegate Back
to
server MobiLead:
dal
test
alla
pra<ca To the iPad  Otteniamo la form su iPad  Pre-rendering: head replace  Rilevamento immagini e salvataggio locale
    • 13. Presentazione Realizzazione
form To
the
iPad Rendering Playing
with
delegate Back
to
server MobiLead:
dal
test
alla
pra<ca Otteniamo via http la nostra form su iPad In Objective-C, bastano poche righe per effettuare una chiamata http ed ottenere il contenuto del nostro file sotto forma di stringa. A questo punto, prima di renderizzare la form nel motore WebKit, “giocheremo” un po’ con la stringa che contiene l’HTML, aggiungendo dichiarazioni, controlli, e molte altre cose lato client.
    • 14. Presentazione Realizzazione
form To
the
iPad Rendering Playing
with
delegate Back
to
server MobiLead:
dal
test
alla
pra<ca Pre-rendering: Head replace 1) Sul nostro iPad, risiede un file chiamato intestazione_form.txt che useremo al posto dell’head della form. Il nostro file sarà così composto: 2) Leggiamo il file in Objective-C: 3) Infine, sostituiamo il nostro head a quello (vuoto) già presente nella form:
    • 15. Presentazione Realizzazione
form To
the
iPad Rendering Playing
with
delegate Back
to
server MobiLead:
dal
test
alla
pra<ca Rileviamo le immagini e salviamole in locale Uno dei requisiti della nostra applicazione prevede il funzionamento anche in assenza di connettività. Per questo motivo, andremo a trovare tutte le immagini a cui fa riferimento la form e le salveremo in locale. Quindi, aggiorneremo i riferimenti nei tag <img> di modo da far puntare gli indirizzi al “nuovo” path locale della relativa immagine. (non abbiate paura della quantità di codice della prossima slide – si commenta da solo!)
    • 16. Presentazione Realizzazione
form To
the
iPad Rendering Playing
with
delegate Back
to
server MobiLead:
dal
test
alla
pra<ca Rileviamo le immagini e salviamole in locale (2a parte - codice)
    • 17. Presentazione Realizzazione
form To
the
iPad Rendering Playing
with
delegate Back
to
server MobiLead:
dal
test
alla
pra<ca Rendering  Rendering con UIWebView (Webkit)  Il delegato di UIWebView  Inclusione risorse esterne
    • 18. Presentazione Realizzazione
form To
the
iPad Rendering Playing
with
delegate Back
to
server MobiLead:
dal
test
alla
pra<ca Renderizziamo la form tramite Webkit 1) Prima di tutto, creiamo un oggetto di tipo UIWebView, ovvero l’istanza del nostro browser WebKit che useremo per renderizzare la form. Nota: il nostro oggetto viene dichiarato come IBOutlet per consentire ad Interface Builder (il software che si occupa della creazione delle interfacce) di collegare il nostro oggetto dalla view al codice.
    • 19. Presentazione Realizzazione
form To
the
iPad Rendering Playing
with
delegate Back
to
server MobiLead:
dal
test
alla
pra<ca Il nostro ViewController verrà dichiarato come delegato di tipo <UIWebViewDelegate>, dato che dovrà ricevere gli eventi che la nostra WebView scatenerà durante la sua esecuzione. Più avanti tra qualche slide, avremo quindi a disposizione i seguenti metodi: Segnaliamo quindi alla nostra WebView (il browser) che il suo delegato sarà il nostro controller (in questo caso “self”, dato che il nostro delegato corrisponde alla classe attuale.
    • 20. Presentazione Realizzazione
form To
the
iPad Rendering Playing
with
delegate Back
to
server MobiLead:
dal
test
alla
pra<ca Carichiamo quindi la nostra form all’interno della WebView, impostando il baseURL che utilizzerà il browser (ovvero la nostra directory che contiene le risorse – file Javascript, CSS, immagini, ecc.): Il path di base che verrà impostato nel nostro browser sarà quindi una stringa simile a questa: E verrà “appeso” ogni volta che useremo un puntamento relativo ad una risorsa dalla nostro form, ad esempio:
    • 21. Presentazione Realizzazione
form To
the
iPad Rendering Playing
with
delegate Back
to
server MobiLead:
dal
test
alla
pra<ca Verrà renderizzata la nostra form html. Le risorse incluse nella nostra applicazione verranno quindi utilizzate dalla form (stili css, script javascript, immagini). Il prossimo passaggio che affronteremo consisterà nel leggere la lista dei comuni italiani (precaricati sul DB della nostra applicazione) e utilizzarli come autocompletamento per uno qualsiasi dei campi della form.
    • 22. Presentazione Realizzazione
form To
the
iPad Rendering Playing
with
delegate Back
to
server MobiLead:
dal
test
alla
pra<ca Playing with delegate  Da SQLite al browser, passando per Obj-C  Javascript Injection  UIWebViewDelegate  Intercettiamo le chiamate del browser  Un finto webserver  Protocolli custom
    • 23. Presentazione Realizzazione
form To
the
iPad Rendering Playing
with
delegate Back
to
server MobiLead:
dal
test
alla
pra<ca Da SQLite al Browser, passando per Obj-C 1) Estraiamo i dati dei comuni italiani dal DB SQLite della nostra applicazione, e prepariamoci una stringa nel formato di un due array Javascript.
    • 24. Presentazione Realizzazione
form To
the
iPad Rendering Playing
with
delegate Back
to
server MobiLead:
dal
test
alla
pra<ca Da SQLite al Browser, passando per Obj-C Ecco quindi la nostra “stringa” pronta per essere inviata al browser.
    • 25. Presentazione Realizzazione
form To
the
iPad Rendering Playing
with
delegate Back
to
server MobiLead:
dal
test
alla
pra<ca JavaScript Injection 2) Passiamo i nostri array Javascript al browser “iniettandoli” via Objective-C con una chiamata di tipo Javascript: La funzione stringByEvaluatingJavascript invia del codice JS al browser, eseguendolo come se fosse la pagina stessa a chiamare il codice. Potremmo ad esempio dichiararci una funzione come stringa, ed inviarla al browser per farla definire nel DOM, oppure iniettare delle chiamate jQuery come in questo esempio: Nel nostro caso, utilizziamo jQuery Autocomplete per agganciare il nostro array ad un comodo autocompletamento durante la digitazione nel campo:
    • 26. Presentazione Realizzazione
form To
the
iPad Rendering Playing
with
delegate Back
to
server MobiLead:
dal
test
alla
pra<ca Intercettiamo le chiamate del browser Uno dei punti fondamentali della nostra applicazione, consiste nell’intercettare le chiamate che il browser esegue, e manipolarle/estrarne dei dati. Il nostro controller grazie alle funzionalità offerte da <UIWebViewDelegate> potrà implementare il seguente metodo: Questo metodo, verrà chiamato ogni volta che il nostro browser inizierà una chiamata, e noi ci preoccuperemo di restituire TRUE/FALSE dicendo al browser se iniziare tale chiamata o tralasciarla. Nello specifico, il metodo verrà chiamato al submit della nostra form. La variabile “request” conterrà tutte le informazioni che ci serviranno: url, header e body della chiamata, dati GET/POST.
    • 27. Presentazione Realizzazione
form To
the
iPad Rendering Playing
with
delegate Back
to
server MobiLead:
dal
test
alla
pra<ca UIWebViewDelegate Dalla documentazione ufficiale:
    • 28. Presentazione Realizzazione
form To
the
iPad Rendering Playing
with
delegate Back
to
server MobiLead:
dal
test
alla
pra<ca Dentro al metodo, controlliamo prima di tutto se il body della chiamata è valorizzato (ovvero se ci sono dei dati in POST) e poi recuperiamo i dati “postati” sotto forma di stringa serializzata – formato standard con cui vengono inviati i dati nelle chiamate HTTP. Un’altra funzionalità che possiamo sfruttare con questo metodo, consiste nel chiamare url particolari (con un protocollo personalizzato) dal nostro browser e riconoscerli lato Obj-C, in modo da poterli gestire come desideriamo.
    • 29. Presentazione Realizzazione
form To
the
iPad Rendering Playing
with
delegate Back
to
server MobiLead:
dal
test
alla
pra<ca Possiamo simulare delle chiamate AJAX verso un url fittizio, intercettarle tramite Objective-C, effettuare le nostre operazioni ed iniettare del codice Javacript. Un vero e proprio (finto) webserver locale!
    • 30. Presentazione Realizzazione
form To
the
iPad Rendering Playing
with
delegate Back
to
server MobiLead:
dal
test
alla
pra<ca Siamo liberi di inventarci un nostro protocollo, e successivamente riconoscerlo guardando lʼindirizzo dellʼURL della nostra variabile “request”. Per esempio, riconosciamo un indirizzo e chiamiamo una funzione passandogli come parametro i dati ricevuti dalla chiamata AJAX:
    • 31. Presentazione Realizzazione
form To
the
iPad Rendering Playing
with
delegate Back
to
server MobiLead:
dal
test
alla
pra<ca Back to server I dati ritornano all’ovile  Scheduliamo un cron locale sul dispositivo  Criptiamo i dati prima di inviarli  Prepariamo una NSMutableURLRequest  Settiamo i dati da inviare via POST  Inviamo i dati ad un webservice e riceviamo una risposta
    • 32. Presentazione Realizzazione
form To
the
iPad Rendering Playing
with
delegate Back
to
server MobiLead:
dal
test
alla
pra<ca Scheduliamo un cron (script) locale sul dispositivo Il modo più semplice ed immediato per creare un cron sul nostro dispositivo, consiste nel creare un timer che lanci un metodo ripetutamente ad intervalli regolari. Possiamo anche sfruttare alcuni metodi utili dell’AppDelegate per monitorare lo stato della nostra applicazione:
    • 33. Presentazione Realizzazione
form To
the
iPad Rendering Playing
with
delegate Back
to
server MobiLead:
dal
test
alla
pra<ca Criptaggio dei dati da inviare I dati che stiamo raccogliendo sono sensibili, quindi abbiamo deciso di utilizzare un algoritmo di tipo sha1 per inviare i dati al webservice in maniera criptata. Esistono diverse librerie “light” ed open-source per effettuare la codifica delle stringhe lato Obj-C.
    • 34. Presentazione Realizzazione
form To
the
iPad Rendering Playing
with
delegate Back
to
server MobiLead:
dal
test
alla
pra<ca Dopo aver raccolto i dati dalla form, tramite Objective-C effettuiamo una chiamata http verso il nostro webservice inviando le informazioni sul server:
    • 35. Presentazione Realizzazione
form To
the
iPad Rendering Playing
with
delegate Back
to
server MobiLead:
dal
test
alla
pra?ca Mobilead: dal test alla pratica  Presentazione  Architettura  Caratteristiche tecniche ulteriori  Immagini dimostrative
    • 36. Presentazione Realizzazione
form To
the
iPad Rendering Playing
with
delegate Back
to
server MobiLead:
dal
test
alla
pra?ca Presentazione MobiLead Lead Generation and Survey MobiLead è un’applicazione di Intesys appositamente studiata per raccogliere lead e interviste con la massima facilità e accuratezza. Provala ora! App store > Mobilead user: whymca password: whymca
    • 37. Presentazione Realizzazione
form To
the
iPad Rendering Playing
with
delegate Back
to
server MobiLead:
dal
test
alla
pra?ca Caratteristiche tecniche ulteriori A quanto descritto fino ad ora, si aggiungono molte più caratteristiche e funzionalità:  All’avvio, viene richiesto il login (associato ad un cliente sul back-end via web) e viene scaricato e “parsato” un file XML contenente la lista degli eventi attivi.  Ogni evento contiene la form HTML e numerosi altri dati tra cui la data di apertura/chiusura evento ed altre personalizzazioni grafiche.  La lista eventi + forms vengono salvate in locale sul dispositivo, ed è presente una funzionalità di sincronizzazione con il webservice.  Il dispositivo mette a disposizione localmente i framework di jQuery, jQuery UI e Cufon.
    • 38. Presentazione Realizzazione
form To
the
iPad Rendering Playing
with
delegate Back
to
server MobiLead:
dal
test
alla
pra?ca Accesso protetto Lista Eventi
    • 39. Presentazione Realizzazione
form To
the
iPad Rendering Playing
with
delegate Back
to
server MobiLead:
dal
test
alla
pra?ca Raccolta Lead o Survey con maschere personalizzabili
    • 40. Presentazione Realizzazione
form To
the
iPad Rendering Playing
with
delegate Back
to
server MobiLead:
dal
test
alla
pra?ca Intesys MobiLead Cosa permette di fare?  Raccogliere profili utenti (anagrafica, indirizzo mail, contatti telefonici)  Raccogliere survey/interviste Su quali piattaforme funziona?  iPad  Android Quando si usa?  In occasione di stand, fiere, eventi e manifestazioni  In tutte le occasioni che richiedono una raccolta contatti veloce e puntuale
    • 41. Grazie per lavostra attenzione.Any questions?Nicholas Valbusa – nicholas.valbusa@intesys.it - twitter: @squallstarAlessandro Maroldi – alessandro.maroldi@intesys.it - twitter: @alexmaroldiIntesysVia Roveggia, 122A - 37136 Veronavoice +39 045 503663 - fax +39 045 503604info@intesys.it – www.intesys.it

    ×