Applicazioni Web: Progettazione e Sviluppo PDF

Applicazioni Web: Progettazione e Sviluppo 1. Architettura delle applicazioni web (modello Client/Server, TCP/IP, HTTP) 2. Architettura delle applicazioni dinamiche (AJAX, MVC) 3. Progettazione Client (JavaScript, React) 4. Progettazione Server (Nodejs) Esame Scritto: - Domande chiuse con s...

Applicazioni Web: Progettazione e Sviluppo 1. Architettura delle applicazioni web (modello Client/Server, TCP/IP, HTTP) 2. Architettura delle applicazioni dinamiche (AJAX, MVC) 3. Progettazione Client (JavaScript, React) 4. Progettazione Server (Nodejs) Esame Scritto: - Domande chiuse con soglia di sbarramento - Domande miste (spiegazione, trascina, pezzi di codice, aperte) + 5 punti di Laboratorio: - 2 totali di 4 esercizi in itinere (0,5 ciascuno - Martedì, di cui il primo già metà Ottobre) - 3 svolgimento di esercizio finale Esami Parziali, corrisponde al 1° Appello di 6: - Metà Novembre - Inizio Gennaio Con una domanda in più per un totale di 32 punti Programmazione in JavaScript Code Writing è una forma di comunicazione tra persone, eseguibile solo su macchina con obiettivo di formare nella mente del lettore la stessa immagine che aveva lo scrittore. Programmare significa definire una sequenza di azioni, che determinano la soluzione ad un dato problema utilizzando un linguaggio di programmazione comprensibile dal computer. Le istruzioni fondamentali sono: - Dichiarazione delle variabili: dare un nome a spazi di memoria per contenere i dati, e possono essere semplici o composte - Assegnamento: scrivere un valore in una variabile - Scelta Condizionale: definire quali sequenza di azioni eseguire - Ripetizione di sequenze di azioni su dati diversi - Espressione: operazioni di trasformazione dei dati - Funzione: assegnare un nome ad una sequenza di azioni - Lettura/Scrittura: riceverete dati in ingresso e produrre soluzioni in uscita JavaScript è un linguaggio di scripting interpretato da un Engine ed eseguito dal browser in maniera simultanea, mentre Nodejs viene eseguito dal server. Permette di rendere le pagine HTML dinamiche, ovvero di inserire programmi che modificano il comportamento e le visualizzazioni. - Capacità di effettuare richieste in formato HTTP al server in maniera trasparente all’utente - Capacità di rendere asincrona la comunicazione tra browser e web server Può richiedere dati in trentini di testo puri e XML (più diffuso JSON). Programmazione Imperativa 1. Dichiarazione delle variabili semplici: memorizzare valori di un certo tipo, che può essere numerico, di caratteri o logici, ma in JavaScript non viene specificato 1 2. Assegnamento di un valore ad una variabile 3. Scelta Condizionale Per migliorare il programma: Permette di visualizzare il valore della variabile indicata Espressione è una combinazione di valori, variabili ed operatori, che generano un nuovo valore. JavaScript prevede operatori unari, binari, ternari a seconda di quanti valori vengono combinati: - Aritmetici + - * / % - Relazionali > >= < Vite > Create > npm dev Costruzione del pacchetto ridistribuibile Dalla cartella del progetto: npm run build Ciò permette di creare una cartella dist che contiene il codice React dell’applicazione ottimizzato in asset static, risolvendo problemi di dipendenza Create React App è un ambiente confortevole, ma molto articolato e pesante per imparare React. Non gestisce la logica di backend e i database, in quanto crea soltanto una catena di build per il frontend. Dalla linea di comando: npx create-react-app esreact cd esreact npm start 35 Basi di React React è una libreria di JavaScript, perciò il codice sorgente è composto unicamente da codice JavaScript- Per poter renderizzare dell’HTML nelle pagine si utilizza una funzione ReactDOM.render(), che ha lo scopo di renderizzare il codice HTML dentro all’elemento HTML prendendo come argomento: - Codice HTML - Elemento HTML JavaScript XML JSX è un estensione di sintatti per JavaScript e permette di scrivere HTML in React senza aver bisogno di metodi supplementari, come createElement(), appendChild() L’utilizzo di JSK non è obbligatorio, ma permette di scrivere applicazioni React più agevolmente. Con JSX è possibile scrivere delle espressioni dentro le parentesi graffe { }, e possono essere variabili, proprietà o qualsiasi espressione valida JavaScript. JSX esegue l’espressione e restituisce il risultato Per scrivere HTML su più righe con JSX è necessario inserire l’HTML dentro parentesi tonde ( ) Il codice HTML deve essere contenuto dentro un unico livello principale. Si può usare un qualsiasi tag HTML come contenitore o utilizzare il componente … , che può essere scritto anche come …. Raccoglie gli elementi ma non renderizza alcun tag. 36 JSX segue le regole XML, quindi tutti i tag devono essere chiusi React Components I componenti sono porzioni di codice riusabile e indipendete e possono essere innestati l’uno dentro l’altro per comporre la visualizzazione finale. NB: Unico elemento root Si comportano come delle funzioni JavaScript: accettano dei parametri arbirtari, props, e restituiscono degli elementi HTML. Si suddividono in: 1. Stateless Components - Function Components Sono il modo più semplice per definire un componente: accettano come parametro l’oggetto props e restituisce un elemento React 2. Stateful Components - Class Components Si utilizzano le classi ES6 per creare un Class Component Creato un componente con un file.js, è necessario esportarlo per poter essere utilizzato in altri parti dell’applicazione, mentre nei file in cui viene utilizzato deve essere importato in modo da poterlo richiamare con la sintassi 37 Props Sono gli argomenti da passare ai componenti. Con le props è possibile renderizzare il componente con delle proprietà specifiche e possono essere qualsiasi cosa (testi, variabili, stili, funzioni ecc.). La sintassi per inserire delle props dentro un componente è uguale a quella utilizzare per gli attributi HTML propsName = “value”. Se non è una stringa ma una variabile allora è sufficiente sostituire le virgolette con le parentesi graffe { }, propsName = {value} Le props sono in sola lettura, e quindi, quando vengono passate ad un componente, devono essere considerate come costanti. Perciò possono essere usate all’interno del componente come proprietà che non vanno mai modificate. State Le interfacce utente delle applicazioni sono dinamiche e cambiano nel tempo. I componenti React, oltre alle props, possono definire uno stato, che permette ai componenti di modificare il loro output nel tempo in seguito ad azioni dell’utente, a risposte dalla rete API e a qualsiasi altra cosa possa far renderizzare un output diverso di volta in volta. Lo state è privato ed è completamente gestito dal componente stesso, e quindi non viene passato esternamente. Le funzione sono stateless e quindi non possono avere uno stato, mentre le classi stateful, possono accedere all’oggetto state. Per gestire uno stato occorre: - Definire il valore iniziale dello stato nel costruttore - Utilizzare setState per modificare lo stato Quando lo stato cambia, l’interfaccia si aggiorna per riflettere i cambiamenti. NB: Lo stato non deve essere mai modificato direttamente tramite assegnazione diretta di un nuovo valore Hooks - Stateful Components E’ un nuovo modo per definire i componenti facendo uso delle funzioni componenti e allo stesso tempo permette di avere accesso allo State. React non pianifica la rimozione del supporto alle classe, che pertanto possono essere utilizzate ancora senza problemi. Inoltre permettono di semplificare la scrittura del codice e di condividere alcune logiche tra componenti. 38 React fornisce alcuni Hooks predefiniti, come useState per la gestione degli stati, che accetta un argomento, ovvero il valore dello stato iniziale, e restituisce due valori: - Stato corrente - Funzione che permette di aggiornare lo stato Class: Hooks: Domande: Prop o State? 1. Si ha un componente che renderizza un bottone, e tale bottone è generico e può essere utilizzato in qualsiasi punto dell’interfaccia. Come si fa a definire la label del bottone? 39 2. Si vuole che il componente permetta di renderizzare tipologie diverse di bottoni, come full, outline text, ecc., e tale bottone è generico e può essere utilizzato in qualsiasi punto dell’interfaccia in una qualsiasi delle due varianti. Come si fa a definire con quale variante renderizzare il bottone? 3. Il bottone creato con il componente visualizza un layout differente a seconda del suo stato: per esempio se viene premuto mostra un’icona di loading finchè l’azione non è terminata. Cosa si deve utilizzare per fare in modo che il bottone cambi a seconda del suo stato? 4. Si sta creando un componente per rappresentare un orologio. La posizione delle lancette è determinata dall’orario corrente ricavato ogni 100ms. Cosa si deve utilizzare per fare in modo che le lancette di muovano correttamente quando l’orario cambia? 5. Si è creato un componente che mostra una barra di navigazione, e si vuole mantenere il codice genreico e riutilizzabile in altri progetto perciò non si vogliono avere link diretti dentro al componente ma il componente deve solo visualizzare ciò che gli viene fornito. Cosa si deve utilizzare per poter visualizzare correttamente i link? 40 Organizzazione dei File React non impone una determinata organizzazione dei file all’interno di un progetto, si è perciò liberi di seguire la linea che si preferisce. Tuttavia esistono alcuni approci utilizzati più frequentemente come il ragruppamente per funzionalità o quello per tipologia di contenuto: cartella per le API, una per i componenti. L’unico accorgimento è quello di evitare un eccessivo annidiamento di cartelle poiché questo potrebbe risultare scomodo nella scrittura degli import e nella gestione di eventuali spostamenti di file. Il progetto iniziale presenta: 1. src, contiene tutti i file sorgenti dell’applicazione, e in questa cartella si organizzano i componenti, i css, gli assets (immagini, documenti). Per convenszione ogni file che contiene un componente ha come nome il nome stesso del componente con la lettera maiuscola a. index.js, chiama la funzione ReactDOM.render passando come argomenti: - Componente , ovvero il componente root, che include tutti gli altri componenti E’ inizialmente creato come Function Component, ma se necessario, può essere modificato per utilizzare gli Hooks oppure convertirlo in classe - Div con id=“root”, che si trova nel file public/index.html b. App.j, dove viene definito il componente che viene importato in index.js 2. public, contiene una serie di file pubbblici (index.html) 3. node_modules, contiene tutti i moduli che servono per l’applicazione, sia quelli necessari a React di base sia quelli aggiuntivi installati manualmente 4. package.json, contiene una serie di metadati utili per il progetto - name, contiene il nome del progetto - version, definisce la versione del progetto - dependencies, contiene una lista di tutti i moduli installati nel progetto (npm install module-name) - scripts, contiene i comandi per avviare il progetto in modalità sviluppo (npm start), testarlo (npm test) o creare una versione ottilizzata per la pubblicazione (npm run build) 41