STUDIO E IMPLEMENTAZIONE DI UNO STRUMENTO DI

CONFIGURAZIONE E VISUALIZZAZIONE DI DATI DI

PROGETTO, NELL’AMBITO DELLE APPLICAZIONI CAE

(COMPUTER AIDED ENGINEERING)

CORSO DI LAUREA IN INGEGNERIA INFORMATICA

DIA - UNIVERSITÀ DEGLI STUDI DI TRIESTE

MATTEO MIOTTO

Relatore: prof. ALBERTO BARTOLI

Correlatore: ing. SERGIO BENEDETTI

Applicazione web

Controllo e collaborazione nella progettazione e nello

sviluppo di un prodotto in ambito ingegneristico

Scenario: SOMO

Ambito d’uso

Organizzazioni, anche geograficamente distribuite

Progetti multidisciplinari che coinvolgono più dipartimenti

Es.: Modellazione, simulazione, raccolta e analisi dei dati, processi decisionali

Problema: utenti «diversi»

Responsabilità diverse

Utenti di SOMO

Professionisti che ricoprono ruoli diversi

Utenti diversi hanno bisogno di informazioni diverse

Competenze diverse

Necessità diverse

Necessità diverse

Complessità diverse

Priorità diverse

Personalizzazione di alcune pagine dell’applicazione web

Soluzione: personalizzazione

NO PERSONALIZZAZIONE PERSONALIZZAZIONE

utente A (ruolo X)

utente B (ruolo Y)

utente A (ruolo X)

utente B (ruolo Y)

(Necessità, complessità, priorità)

Cosa?

Progettare e realizzare strumento per la

personalizzazione delle pagine di SOMO

Obiettivo tesi: cosa?

Integrazione in SOMO

Strumento fruibile da browser senza la necessità di

componenti aggiuntivi

Esempio di componenti aggiuntivi: Flash, Silverlight, …

Obiettivo tesi: perché?

Perché?

Esplorare le opportunità di personalizzazione in SOMO

Stato dell’arte

Le applicazioni web utilizzate nello stesso ambito di

SOMO non offrono soluzioni simili

I tratti innovativi riguardano soprattutto le tecnologie impiegate

Lavoro di tesi svolto presso Esteco S.p.A.

«Personalizzazione» è un trend in crescita nelle applicazioni enterprise

Valutazione di eventuali benefici per gli utenti

Obiettivi tattici

Studio delle tecnologie necessarie e sviluppo Agile

Vincoli di progetto sulle tecnologie

HTML, CSS, JavaScript, JavaEE (Enterprise Edition)

Obiettivo tesi: come?

(HTML5, CSS3, JavaScript), JSF JavaServer Faces, JPA Java Persistence API

Funzionalità fruibili da browser senza necessità di componenti aggiuntivi

JavaEE: piattaforma lato server usata in SOMO

Metodologie Agile: Framework Scrum

Requisiti: in generale

WIDGET PAGE MANAGER

Componenti

informativi

configurabili

PAGE EDITOR

Personalizzazione di

una qualsiasi pagina

di SOMO

Gestione delle

versioni e scelta di

quella da utilizzare

Posizionamento,

ridimensionamento,

configurazione di..

Molteplici

versioni

personalizzate

Requisiti: widget

Componente autonomo che contiene informazioni

configurabili

Informazioni e configurazioni sono definite dallo sviluppatore

Si richiede la definizione di linee guida per la costruzione

Uniformare la struttura e il funzionamento

Prevedere la possibilità che sviluppatori di terze parti producano widget

Ha attributi: Categoria, Scope, Dimensioni di default

Tipo di informazioni contenute (es: tabella)

Ambito (pagina) di applicazione

Dimensioni predefinite (altezza, larghezza)

Requisiti: page editor

Strumento di personalizzazione, integrato in SOMO

Accessibile da qualsiasi pagina considerata «personalizzabile»

Contiene lista di widget utilizzabili

Disponibili in base allo scope

Mostra informazioni reali

Anteprima fedele delle informazioni contenute nella pagina

Modifica delle configurazioni causa aggiornamento delle informazioni

Utilizza i widget senza conoscerne il contenuto

Aggiunta, Rimozione, Posizionamento, Ridimensionamento

Requisiti: page manager

Strumento per la gestione di molteplici versioni

personalizzate di una pagina

Accessibile dal Page Editor

Permette semplici operazioni sulle versioni (pagine)

Creazione, Modifica, Rimozione

Impostazione come «corrente»

Progettazione page editor: layout

MENU DI SOMO EDITOR ACTION PANE

WIDGET STORE DESIGN AREA

F-SHAPED PATTERN

Progettazione widget: widget container

Contenitore del widget

Permette al Page Editor di gestire il widget senza conoscerne il contenuto

Possiede informazioni per gestire il contenuto

Posizione, Dimensione, Come recuperare il contenuto, Come applicare le

configurazioni

RIMOZIONE E ACCESSO ALLA CONFIGURAZIONE

RESIZE GRIP

POSIZIONAMENTO

MEDIANTE DRAG & DROP

WIDGET WRAPPER

Progettazione widget: contenuto

2 viste: informazioni reali + configurazioni applicabili

Visualizzate alternativamente nel widget wrapper

Definite dallo sviluppatore, rispettando vincoli su struttura e funzionamento

WIDGET VIEW CONFIGURATION VIEW

Esempio:

Progettazione widget: contenuto

Problema

Generazione e caricamento del contenuto possono

richiedere tempi non trascurabili

Es: Generare un grafico può richiedere qualche decina di secondi

Quando si presenta?• Aggiunta di un widget alla design area

• Caricamento della pagina nella design area

• Applicazione delle configurazioni

Ricorda: Si vuole che i widget di una pagina contengano informazioni reali

Soluzione: caricamento asincrono del contenuto

Utente può interagire con page editor e widget container

POSIZIONE: COPPIA DI COORDINATE

SUDDIVISIONE IN N COLONNE

Progettazione page editor: design area

ALTEZZA E LARGHEZZA MULTIPLI DI BASE DIMENSION

WIDGET BASE DIMENSION

(1,4)6x1

(2,1)3x3

Progettazione page manager: layout

FINESTRA POPUPDETTAGLIO +

GESTIONE

CREA NUOVA PAGINA O CHIUDI

PAGE BOX:

ANTEPRIMA + NOME

Demo: esempio d’uso

Personalizzazione della dashboard di SOMO

Sono stati creati 3 widget a fini dimostrativi

VIDEO DEMO

Conclusioni: obiettivi raggiunti

Strumento integrato in SOMO per la creazione e la

gestione di pagine personalizzate

Fruibile da browser senza necessità di componenti aggiuntivi

Attualmente

Test e validazione (tecnica e funzionale)

Aspetti tecnici validazione: usabilità e performance

Definizione di linee guida e creazione infrastruttura per

widget di terze parti

Sviluppati anche da terze parti

Conclusioni: sviluppi futuri

Rafforzamento linee guida per costruzione widgetEvoluzione dell’infrastruttura

Consolidamento integrazione in SOMO

Evoluzione del Page Manager

Es: introduzione di funzionalità di condivisione pagine

Sviluppo di nuovi widget

Estensione della «personalizzazione» ad altre pagine

In futuro

Ingresso in ambiente di produzione se validazione positiva

Grazie per l’attenzione