Esposizione RIA

1,056 views

Published on

thesis presentation

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

  • Be the first to like this

No Downloads
Views
Total views
1,056
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Esposizione RIA

  1. 1. SVILUPPO DI UNA APPLICAZIONE WEB CON TECNOLOGIE RIA UNIVERSITA DEGLI STUDI DI PAVIA   - sede di Mantova FACOLTA DI INGEGNERIA MAZZANTI LUCA
  2. 2. <ul><li>Web 2.0 </li></ul><ul><li>il Progetto </li></ul><ul><li>Cos’è il Web 2.0 </li></ul><ul><li>Le RIA </li></ul><ul><li>Tecnologie di sviluppo </li></ul><ul><ul><li>Ajax </li></ul></ul><ul><ul><li>Wicket </li></ul></ul><ul><li>Il Prodotto </li></ul><ul><li>Analisi </li></ul><ul><li>Sviluppo </li></ul>Road Map
  3. 3. Web 2.0 <ul><li>Un insieme di principi e di procedure attorno alle quali gravitano alcuni siti che dimostrano questa novità. </li></ul>Rich Internet Applications Social Network Vuole informare che il Web è maturato, e dispone di tecnologie che permettono un nuovo approccio, un interazione bidirezionale tra utente ed il servizio offerto. Tra le varie sfaccettature di questo fenomeno abbiamo:
  4. 4. Il Web come Piattaforma di Sviluppo <ul><li>Grazie a fattori come: </li></ul><ul><li>l’affermazione della banda larga </li></ul><ul><li>lo sviluppo su di una piattaforma aperta </li></ul><ul><li>la disponibilità di una grande community di sviluppatori </li></ul><ul><li>adozione di nuove tecnologie e soluzioni </li></ul><ul><li>il Web può diventare la nuova piattaforma </li></ul>Il Web come piattaforma significa poter utilizzare Internet e il Web stesso per realizzare vere e proprie applicazioni software
  5. 5. Rich Internet Applications Le Rich Internet Applications sono applicazioni web che possiedono le caratteristiche e le funzionalità delle tradizionali applicazioni per computer, senza però necessitare dell'installazione sul disco fisso. Il Web come piattaforma significa poter utilizzare Internet e il Web stesso per realizzare vere e proprie applicazioni software. Sfruttare i processi e le infrastrutture esistenti. Distribuzione e ubiquità di lavoro Componenti e piattaforma
  6. 6. Vantaggi delle RIA <ul><li>Le RIA offrono alle organizzazioni un modo conveniente per distribuire applicazioni moderne con i seguenti concreti vantaggi in termini di business: </li></ul><ul><li>Possibilità di offrire un'esperienza utente più avanzata e accattivante. </li></ul><ul><li>Stare al passo con le sempre maggiori esigenze degli utenti. </li></ul><ul><li>Raggiungere il 99% dei desktop abilitati a Internet e 300 milioni di dispositivi. </li></ul><ul><li>Sfruttare il personale, i processi e le infrastrutture esistenti. </li></ul>
  7. 7. AJAX: Asynchronous JavaScript and XML <ul><li>La tecnica Ajax utilizza una combinazione di: </li></ul><ul><li>HTML e CSS per il markup e lo stile. </li></ul><ul><li>DOM manipolato attraverso JavaScript per l’interazione. </li></ul><ul><li>XML come formato di scambio dei dati. </li></ul><ul><li>l'oggetto XMLHttpRequest per l'interscambio asincrono dei dati tra il browser dell'utente e il web server. </li></ul>AJAX è asincrono nel senso che i dati extra sono richiesti al server e caricati in background senza interferire con il comportamento della pagina esistente. Si basa su uno scambio di dati in background fra web browser e server, che consente l'aggiornamento dinamico di una pagina web
  8. 8. Utilizzo Ajax <ul><li>Prelevarne una referenza dal browser: </li></ul><ul><li>Aprire una connessione verso un URL: </li></ul><ul><li>Specificare una funzione di callback per ricevere la risposta: </li></ul><ul><li>E poi inviare la richiesta: </li></ul>if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else […] xhr.open(“GET”,“page.jsp?id=”+encodeURI(myId), true); xhr.onreadystatechange = function(){ processReqChange(req); } xhr.send(null);
  9. 9. Wicket <ul><li>Wicket è un component-based web application framework scritto in Java. </li></ul><ul><li>Le funzionalità di punta di questo framework sono elencate di seguito: </li></ul><ul><ul><li>Separazione dei contenuti Non viene mescolato codice HTML e codice Java, e non viene aggiunta sintassi speciale ai file HTML. </li></ul></ul><ul><ul><li>Componenti Ogni componente è rappresentato da una classe Java, molto simile a framework di costruzione delle GUI lato desktop come Swing o SWT. </li></ul></ul><ul><ul><li>Gestione della Sessione </li></ul></ul><ul><ul><li>Wicket invece gestisce automaticamente lo stato delle pagine, in maniera trasparente . </li></ul></ul><ul><ul><li>Toolkit AJAX </li></ul></ul><ul><ul><li>Contiene un Ajax Engine proprietario e i componenti si interfacciano ad esso. </li></ul></ul>Wicket cerca di semplificare il difficoltoso incontro tra il protocollo HTTP stateless ed il lato server side di programmazione Java.
  10. 10. Gestione della Sessione semplificato <ul><li>HTTP è stateless , non da supporto per gestire conversazioni tra client e server. </li></ul><ul><li>La gestione della sessione è indispensabile in una applicazione web, deve essere gestita: </li></ul><ul><ul><li>Programmando in JSP viene utilizzata come contenitore, spesso in maniera confusionale. </li></ul></ul><ul><ul><li>Wicket invece gestisce automaticamente lo stato delle pagine, in maniera trasparente e pulita aiutando di parecchio il processo di sviluppo del software. </li></ul></ul>
  11. 11. Sviluppare in Wicket <ul><li>E’ possibile progettare componenti secondo i costrutti Java. </li></ul><ul><li>La parte di vista è affidata a dei templates HTML. </li></ul><html> <head/> <body> <a wicket:id=“link”/> <span wicket:id=“label”> Ho cliccato x volte </span> </body> </html> public class LinkCounter extends WebPage {    public LinkCounter() {   add(new AjaxFallbackLink(&quot;link&quot;) { @Override public void onClick(AjaxRequestTarget target) { counter++; target.addComponent(label); } });   add(new Label(&quot;label&quot;, new PropertyModel(this, &quot;counter&quot;))); CODE VIEW 1 4 3 2 6 5
  12. 12. Suite Easy SpareCat <ul><li>Permette di creare, pubblicare e mantenere aggiornati in maniera semplice ed efficace cataloghi illustrati di parti di ricambio di prodotti. </li></ul><ul><li>Associare: </li></ul><ul><li>i dati economici e tecnici provenienti da sistemi ERP </li></ul><ul><li>le tavole da un sistema CAD per creare delle referenze alle righe delle tabelle della distinta base di prodotto </li></ul>GESTIONALE AZIENDALE RIGHE ORDINE / PREVENTIVAZIONE GESTIONALE AZIENDALE EXCEL, ASCII …. DISEGNI ESPLOSI GESTIONE DISTINTE AUTHORING CATALOGO PUBBLICAZIONE DISTINTA RICAMBI DISTINTA RICAMBI DISTINTA PRODOTTI DISTINTA FORNITORI INTERNET EASY SPARECAT
  13. 13. Il Progetto: Easy Sparecat Web Viewer Navigazione dei cataloghi Ricerca delle spare parts Acquisto degli articoli Visualizzazione degli esplosi Distinta associata
  14. 14. Analisi <ul><li>Dei requisiti </li></ul><ul><li>Delle tecnologie </li></ul><ul><li>Prototipo </li></ul><ul><li>Dei rischi </li></ul><ul><li>L’applicazione richiedeva particolari funzionalità e fasi, suddivise all’incirca in queste: </li></ul><ul><li>Visualizzare un immagine vettoriale e renderne sensibili i callout ad eventi interni/esterni. </li></ul><ul><li>Creare un interfaccia il più vicino possibile alle RIA per accrescere l’esperienza dell’utente. </li></ul><ul><li>Avere particolari personalizzazioni </li></ul><ul><li>Riscrivere le vecchie funzionalità dell’applicativo precedente sulla chiave delle nuove librerie. </li></ul><ul><li>Sicurezza. Localizzazione,… </li></ul>
  15. 15. Analisi <ul><li>Dei requisiti </li></ul><ul><li>Delle tecnologie </li></ul><ul><li>Prototipo </li></ul><ul><li>Dei rischi </li></ul>FLEX AJAX JSF Pesantezza d’esecuzione Tool di sviluppo Rich Experience Facilità costruzione Interfacce Utente Dipende dal toolkit Comunicazione con middle tier REST da implementare Possibilità integrazione Tavola Svg
  16. 16. Analisi <ul><li>Dei requisiti </li></ul><ul><li>Delle tecnologie </li></ul><ul><li>Prototipo </li></ul><ul><li>Dei rischi </li></ul><ul><li>Viene effettuata la stesura di un prototipo, contenente alcune delle principali funzioni che dovrà avere il prodotto finale: </li></ul><ul><li>la visualizzazione della tavola con sensibilizzazione degli hotspot </li></ul><ul><li>la comunicazione tra componente rappresentante la tavola e la pagina contenente i dati </li></ul><ul><li>recupero dei dati dal business tier e rappresentazione di essi in un albero </li></ul><ul><li>gestione degli oggetti in sessione </li></ul>
  17. 17. Analisi <ul><li>Dei requisiti </li></ul><ul><li>Delle tecnologie </li></ul><ul><li>Prototipo </li></ul><ul><li>Dei rischi </li></ul>Sviluppare in Flex comporterebbe l’introduzione di una parte critica al progetto, non controllabile né prevedibile in tempo e in riuscita. La decisione quindi è quella di attuare la visualizzazione dell’immagine vettoriale tramite un Applet java scritta utilizzando delle librerie già conosciute, e sviluppare l’interfaccia visuale in AJAX. Sono a disposizione dei programmatori vari Toolkits di sviluppo Ajax: alcuni offrono librerie Javascript, altri aggiungono a queste la possibilità di utilizzarle tramite un linguaggio secondario, tra quelli lato server.
  18. 18. Sviluppo <ul><li>Un applicativo che consente la navigazione dei cataloghi tramite internet. </li></ul>deve poter essere integrato in un portale, per la gestione degli ordini delle parti di ricambio <ul><li>Cosa cambia dalla versione precedente: </li></ul><ul><ul><li>gli oggetti di Business </li></ul></ul><ul><ul><li>l’accesso ai dati </li></ul></ul><ul><ul><li>Lo stile dell’interfaccia </li></ul></ul>
  19. 19. Navigazione Per ogni elemento vi è un pannello di info.
  20. 20. Albero dei Cataloghi Due esempi del punto di forza dato dalla gestione della Pubblicazione dei Cataloghi
  21. 21. Tavola <ul><li>Pannello della tavola </li></ul>Pannello delle parti di ricambio Sensibilizzazione Pallinatura Carrello
  22. 22. Personalizzazioni <ul><li>Personalizzazione user-friendly dell’aspetto grafico </li></ul>
  23. 23. Personalizzazioni <ul><li>Interfacciamento al portale ed al gestionale aziendale </li></ul>
  24. 24. Personalizzazioni <ul><li>Gestione delle utenze e di cosa possono vedere </li></ul><ul><ul><li>Filtro di visualizzazione dei Cataloghi </li></ul></ul><ul><ul><li>Filtro di visualizzazione degli attributi degli elementi </li></ul></ul>
  25. 25. Conclusioni <ul><li>Utilizzare sapientemente uno strumento adeguato può comportare delle migliorie non indifferenti sia nel prodotto che nella gestione del progetto nel tempo. </li></ul><ul><ul><li>Essere “early mover” nell’approccio alle tecnologie </li></ul></ul><ul><ul><li>Spostare lo sviluppo verso il Web (maggiore distribuzione) </li></ul></ul><ul><li>Ringrazio Prosolvia-tech per aver dato spazio all’analisi, ad una scelta ed alla concretizzazione del progetto. </li></ul>

×