Esercitazione 0 Strumenti per le esercitazioni - A.A. 2020 - 2021 Progettazione di Applicazioni Web T

Alma Mater Studiorum - Università di Bologna
     Scuola di Ingegneria e Architettura

Progettazione di Applicazioni Web T
         A.A. 2020 – 2021

        Esercitazione 0
  Strumenti per le esercitazioni

Agenda

§ Ambiente di sviluppo (IDE) Eclipse
  – caratteristiche generali
  – configurazione dell’ambiente di sviluppo
  – importazione/creazione di un progetto di esempio

§ Database servers
  – IBM DB2 Express-C, MySQL, Hsqldb

§ Ambiente di progettazione WebRatio
  – caratteristiche generali
  – attivazione al primo avvio
  – creazione di un progetto di esempio

§ Applicativo «Remo» per collegarsi ai PC del laboratorio da
  remoto
  – caratteristiche generali e linee guida di utilizzo

                                    Esercitazione 0        2

Eclipse, caratteristiche generali

§ Ambiente integrato di sviluppo (IDE)
   – interamente scritto in Java
   – multipiattaforma (Win/Mac/Linux/…)
   – multilinguaggio (tool anche per programmazione linguaggio C ad es.)
   – open source (controllato dalla Eclipse Foundation)

§ Architettura basata su tecnologie core e plug-in
   – fortemente modulare ed espandibile
   – adattabile (e adattato) alle più diverse esigenze attraverso l'installazione
     di cosiddetti “plug-in”

                                     Esercitazione 0                                3

Configurare il proprio ambiente di lavoro

§ Strumenti già presenti in laboratorio… ma a casa?
§ Java JDK e JRE (versione 11)
   – https://www.oracle.com/java/technologies/javase-jdk11-downloads.html

§ Eclipse IDE (2020-03 for Java Enterprice Edition Developers)
   – https://www.eclipse.org/downloads/packages/release/2020-03/r/eclipse-
     ide-enterprise-java-developers-includes-incubating-components
   – https://help.eclipse.org/2020-03/index.jsp
   – http://eclipsetutorial.sourceforge.net/
   – http://eclipsetutorial.sourceforge.net/totalbeginner.html

§ Troubleshooting
   – http://www.google.com/

                                    Esercitazione 0                          4

Primo impatto

§ Avviare Eclipse per la prima volta
   – scelta del direttorio per il Workspace (dove verranno salvati i progetti)
   – Welcome... eccetera: → Close
   – dovesse mai servire di nuovo: Help → Welcome
§ Workbench (area di lavoro) costituita da un insieme di View
  (viste)
   –   Package View (struttura logica dei progetti)
   –   Java Editor (scrittura del codice)
   –   Outline View (struttura del file aperto nell'editor)
   –   Console (stdout e stderr prodotti dalle attività eseguite)
   –   Problems (primo luogo dove guardare quando qualcosa va storto!!!)
        …e tante altre: Window → Show view

§ Perspective (prospettiva) come associazione di un preciso
  insieme di viste, in precise posizioni, per affrontare determinate
  operazioni (codifica, debug, Web, condivisione su SVN...)
   – Windows → Open perspective

                                   Esercitazione 0                               5

Perché un IDE

§ Numerose funzionalità “di comodo” per velocizzare la scrittura
  del codice e garantire la sua correttezza a tempo di
  compilazione
   – supporto per il refactoring (nomi di package, classe, metodi, variabili, ...)
   – generazione automatica di codice (costruttori, metodi getter/setter, …)
   – evidenziazione (parole chiave del linguaggio, errori, …)
   – messaggi di errore e consigli per risoluzione (a volte automatica)
   – autocompletamento (parentesi, nomi delle variabili,
     modificatori di tipo, …): si attiva da solo dopo un istante, o su
     comando: Ctrl+Space
   – ...
§ Tantissime funzionalità
   – Right-Click dovunque :)
   – menu Help → Search
   – sito di Eclipse, tutorial on-line (spesso persino animati)

                                     Esercitazione 0                            6

Configurazione ambiente Java in Eclipse

§ Gestione JRE di default
   – Window → Preferences → Java → Installed JREs → Selezionare la JDK
     desiderata
§ Aggiunta JDK11 tra le installed JREs
   – Add… → Standard VM → Next → JRE home: path della JDK (es:
     C:\Program Files\Java\jdk-11.0.10) → Finish

                                Esercitazione 0                          7

Gestione dei progetti

§ Creazione
    – File → New → Java Project / Project…

§ Importazione da file zip (esempi del corso)
    – File → Import → General → Existing Projects into Workspace → Next
      → Select archive file

  nota bene: nel workspace non possono
  esistere più progetti con lo stesso nome

   Occorre cancellare o rinominare quello
 già esistente, prima di importarne uno con
 lo stesso nome: diversamente, il progetto
      "omonimo" contenuto nel file ZIP
     non viene visualizzato tra i progetti
           individuati nell'archivio
      ERRORE COMUNE nelle prime
             esperienze di lab

                                         Esercitazione 0                  8

Importazione dello StartKit

§ Progetto Eclipse vuoto 00_PAWeb.zip
   – scaricabile dal sito del corso:
     sezione «Laboratorio», «Strumenti per le esercitazioni»,
     «Ambiente di sviluppo (IDE)» - StartKit di un progetto Eclipse vuoto
   – creato con Eclipse: contiene già tutte le librerie necessarie per lo
     svolgimento di tutte le esercitazioni guidate in laboratorio! J

§ Importare il progetto come da slide precedente, ovvero senza
  esploderne l'archivio su file system (lo farà Eclipse)

§ Problemi? (librerie, versioni JRE, ...)
   – vista Problems View: diagnosi

                                 Esercitazione 0                            9

Struttura del progetto
All'interno della directory radice
    – src: sorgente (file .java) dell'applicazione da sviluppare
    – test: sorgente delle routine di test (opzionali) che verificano il corretto
      funzionamento dell'applicazione
    – LIBRERIE (visualizzazione può variare da versione a versione di Eclipse):
      codice fornito da terze parti necessario allo sviluppo
        • JRE le classi base del runtime di Java (es: java.lang.String)
        • API e loro eventuale implementazione riferita dall'applicazione (es: JUnit per i
          test)
    – lib: direttorio che fisicamente contiene gli archivi .jar delle librerie in uso nel
      progetto (nota: alcune versioni di Eclipse “nascondono” le librerie aggiunte
      al build-path, onde evitare di visualizzare informazioni “doppie”)
    – resources: altre risorse da allegare alla versione distribuibile del progetto
      (immagini, file multimediali, …)

                                        Esercitazione 0                                10

Server database (1)
§ Il LAB4 è predisposto all’utilizzo di diversi server database
  (DBMS):
   § IBM DB2 Express-C
   § MySQL
   § Hsqldb

§ DB2 Express-C (V. 9.7) in LAB4 ha una “vera” configurazione
  client-server
   § PC client Windows + server dedicato Linux DIVA
§ MySQL e Hsqldb sono installati in versione stand-alone sui
  singoli PC
   § nella directory bin sono presenti i comandi per avviare e terminare il
     servizio database; sono inoltre disponibili i driver JDBC

                                 Esercitazione 0                       11

Server database (2)
§ Per ogni DBMS nella pagina “Laboratorio” del sito del corso
  potete trovare:
   § link ai siti ufficiali/file di installazione
   § driver JDBC (per lo sviluppo di applicazioni Java che si interfacciano
     a database residenti sul server)
   § Manualistica
§ Il DBMS di riferimento per noi è DB2 Express-C (per continuità
  didattica con il Corso di Sistemi Informativi T); si prega di
  prendere visione delle dispense
   § “DB2: Come collegarsi da remoto - rif. Corso Sistemi Informativi T)”
     (file L.00.DB2inLAB-SI-T)
   § “Note sull'utilizzo di DB2 in LAB4” (file L.00.DB2inLAB4)
  contenute nella pagina “Laboratorio” (Manualistica) del sito del
  corso, e di seguire le istruzioni in esse contenute per divenire
  “operativi” in LAB4
  …. ora comunque le commentiamo assieme! J
                                      Esercitazione 0                  12

WebRatio, caratteristiche generali

§ Ambiente di sviluppo per la progettazione di applicazioni
  Web
   – basato su Eclipse e include il Web server Tomcat
   – nato per il linguaggio WebML. Oggi supporta lo standard OMG IFML
   – multipiattaforma (Win/Mac/Linux)
   – home page: https://www.webratio.com
   – il software WebRatio è già presente nei PC del laboratorio. Al primo
     avvio, lo studente deve attivarlo inserendo il seriale fornito dal
     docente …ma a casa?
   – per installare WebRatio sul proprio PC, è disponibile una guida dedicata
     all’interno del direttorio privato dedicato su OneDrive
     … orala commentiamo assieme J
§ WebRatio si focalizza su diversi aspetti:
   – progettazione model-driven di applicazioni Web: dati, ipertesto,
     gestione dei contenuti e ipertesto avanzato
   – generazione automatica del codice della applicazione Web progettata
     (rif. tecnologie: JSP, servlet, Javascript, e HTML5)

                                   Esercitazione 0                         13

Attivazione di WebRatio (1)

§ Al primo avvio WebRatio deve essere attivato
   – Inserire il nome e il seriale forniti dal docente (rif. direttorio privato su OneDrive)
   – Click su «Activate»

                                        Esercitazione 0                                14

Attivazione di WebRatio (2)

§ Selezionare l’attivazione License Server mode
   – License Server mode → Next

                                  Esercitazione 0   15

Attivazione di WebRatio (3)

§ Inserire le informazioni del server di licenza
   – Protocol: http
   – Server Address: webratiolm.ing.unibo.it
   – Port: 8080
   – Web Application Name: lsw7

                                  Esercitazione 0   16

Attivazione di WebRatio (4)

§   Al termine della procedura, Click su «Finish» per attivare e avviare WebRatio

                                     Esercitazione 0                           17

Creazione di un primo progetto

§ Creare un nuovo progetto Web
   – File → New → Web Project → Project name → Finish
   – Indicare “HelloWorld” come nome del progetto

                                 Esercitazione 0        18

Struttura di un progetto

§ Componenti principali
   – Domain Model
   – Site Views
   – Service Views
   – Module Definitions

                              Esercitazione 0   19

Navigare un progetto (1)

§ Nell’area di lavoro principale è anche possibile navigare diversi
  progetti creati
   – anche se oggi abbiamo solo il progetto HelloWorld
§ Nella parte inferiore della finestra sono presenti diverse schede
   – Project: scheda sempre presente, elenca le view del progetto
   – Domain Model: scheda sempre presente, rappresenta il modello di
     dominio (logica di business)
   – Site View: scheda che può essere aggiunta dal progettista, rappresenta
     l’ipertesto e l’ipertesto avanzato

                                  Esercitazione 0                             20

Navigare un progetto (2)

§ Nella finestra di sinistra sono presenti ulteriori view, ognuna
  delle quali permette di navigare tra i diversi progetti del
  workspace e/o ispezionare il progetto selezionato
   – WebRatio Explorer view: struttura ad albero con tutti i progetti del
     workspace
   – Outline view: struttura del progetto selezionato

                                    Esercitazione 0                         21

Aggiunta di una Site View

§ Torniamo alla scheda Project di HelloWorld
   – Right-Click sulla voce Site Views → Add Site View → Name:Public →
     Finish
   – ci sono diverse opzioni che possono essere controllate in questa finestra;
     per ora manteniamo le opzioni predefinite e facciamo clic su “Finish”
   – fatto ciò, una nuova scheda viene creata con il nome che abbiamo appena
     digitato

                                   Esercitazione 0                           22

Aggiunta di una pagina (1)

§ Spostiamoci sulla Site View creata
   – Click sull’omonima scheda
§ Struttura della Site View
   – Pannello dei component: pannello sulla sinistra dell’area di lavoro, con i
     componenti, suddivisi in gruppi, utili alla progettazione
   – Barra degli strumenti: barra presente nella parte superiore dell’area di
     lavoro, con gli strumenti utili alla progettazione

                                    Esercitazione 0                               23

Aggiunta di una pagina (2)

§ Selezionare il component Page
   – Pannello dei component → Click sul gruppo containers → Click sul
     component Page
   – il puntatore del mouse diventerà un «+»
§ Aggiungere la pagina alla Site View
   – Click sull’area di lavoro

                                  Esercitazione 0                       24

Aggiunta di una pagina (3)

§ Il nome della pagina può essere immediatamente modificato
  (scegliamo, ad esempio, il nome “Hello”)
   – da notare che tutte le proprietà degli elementi del pannello possono
     essere sfogliati e modificati nella vista Properties nella finestra in
     basso a sinistra
   – se selezioniamo il componente Page creato, possiamo vedere che la
     proprietà Name ha valore "Page 1" e che modifichiamo in "Hello"

                                  Esercitazione 0                             25

Aggiunta di un messaggio ad una pagina (1)

§ Ora vogliamo aggiungere un messaggio di benvenuto alla Site
  View:
   – Pannello dei component → Click sul gruppo View Components → Click
     sul component Message → Click sull’area di lavoro
   – possiamo rinominarlo come abbiamo fatto per la Pagina in "Welcome"

                                 Esercitazione 0                          26

Aggiunta di un messaggio ad una pagina (2)

§ Ora vogliamo aggiungere un messaggio di benvenuto alla Site
  View:
   – modificare il nome di questo componente messaggio in “Welcome”
   – modificare il contenuto del messaggio direttamente nelle proprietà della
     vista: Properties → Message Text → Click Edit Icon -> Text:Hello World!
     → OK

                                   Esercitazione 0                          27

Generazione di un'applicazione Web (1)

§ WebRatio permette inoltre di generare automaticamente la
  nostra "HelloWorld" Web Application:
   – partendo dalla sua progettazione, crea il codice corrispondente
   – distribuisce l'applicazione Web sul Server Web Tomcat (che include)
   – apre l'applicazione Web nel browser
§ Tutto ciò viene fatto automaticamente cliccando sul pulsante
  “Generate and Run”.

                                   Esercitazione 0                         28

Generazione di un'applicazione Web (2)

                Esercitazione 0          29

L’Applicativo «Remo»

§ Sistema per la gestione delle connessioni remote ai PC dei
  laboratori
   – con Remo lo studente può utilizzare le macchine del laboratorio da
     remoto
   – Remo garantisce identica configurazione hardware/software per
     tutti gli studenti durante le esercitazioni guidate dal docente e
     durante gli esami finali
   – per indicazioni dettagliate sull’utilizzo di Remo, fare riferimento
     alla guida presente all’interno del direttorio privato dedicato al
     corso su OneDrive, come da indicazioni del docente
     …. ora comunque la commentiamo assieme! J

                                Esercitazione 0                      30

Tips & Tricks
§ Il filesystem del LAB4 è accessibile in sola lettura
   § solo la directory c:\temp è accessibile in scrittura; il suo contenuto
     viene cancellato sistematicamente
   § ogni utente ha a disposizione 200MB di spazio per il profilo
§ Si consiglia vivamente di presentarsi alle esercitazione con una
  memoria esterna (512MB sono più che sufficienti)
   § tale memoria verrà utilizzata per contenere il workspace di
     Eclipse/WebRatio
   § in tal modo sarà possibile salvare il lavoro svolto, ad esempio, i
     progetti realizzati, la configurazione dei workspace, ecc.
§ Infine, alla pagina “Laboratorio” del sito del corso
  (http://www-db.disi.unibo.it/courses/PAW/) potete trovare:
   § link al software utilizzato nelle esercitazioni e relativa manualistica
   § un progetto vuoto Eclipse pronto all’uso (StartKit.zip)

                                  Esercitazione 0                         31