Categoria: Notizie

Ultima modifica: 11 Febbraio 2022

Visite: 1600

Programma:

Il corso è pensato per introdurre chi già programma per il web (anche eventualmente a livello amatoriale) all’uso di Node e React per la realizzazione di applicazioni REST, single-page, e orientate ai componenti.
L’impostazione del corso è eminentemente pratica: i partecipanti affronteranno lo sviluppo di un’applicazione tutorial, semplice ma completa (DB + Server + Client) attraverso la quale verranno illustrati i principali aspetti di Node e React.

Il tutto sarà incorniciato in una breve inquadratura teorica, alla quale agganciare i vari aspetti che verranno mostrati. L’obiettivo è un saper fare che sia tuttavia guidato dalla comprensione dei meccanismi che soggiacciono ai sistemi, linguaggi, protocolli e framework utilizzati.

Al termine i partecipanti saranno in grado di impostare le basi di un’applicazione gestionale, e avranno il quadro necessario per poter approfondire autonomamente gli aspetti di maggior interesse.

Date

Il corso è strutturato su 12 ore, divise in 4 lezioni di 3 ore ciascuna.

Lezione 1.

Mercoledì 23/2. orario 14.15-17.15
- Schema architetturale di una Web App
- Veloce ripasso su protocollo HTTP, Json
- Installazione e uso di base di Node.JS e npm
- Creazione di un semplice web server con Node.JS
- Collegamento con MySQL (package mysql)

Lezione 2.

Giovedì 3/3. orario 14.15-17.15
- Architettura di base di una Web App
- Cenni su REST Impostazione di un server per l’applicazione tutorial tramite Node con uno schema di partenzadel DB
- realizzazione di GET/POST/PUT/DELETE di un oggetto rilevante per l’applicazione

Lezione 3.

Mercoledì 9/3. orario 14.15-17.15
- il Client: UI e DOM. Architettura a componenti e MVVM, concetto di single page web app.
- Presentazione di un mockup di esempio per l’applicazione tutorial realizzato con Bootstrap (HTML + CSS)
- Scheletro di una React App e realizzazione di un primo componente
- JSX
- Property binding fra componenti: l’applicazione tutorial legge i dati dal server (HTTP.get) e li mostra all’utente

Lezione 4
Data da definire

- Event binding sulla UI in React: l’applicazione tutorial interagisce con l’utente
- Il concetto di stato nei componenti React
- Realizzazione di una form in React nell’applicazione tutorial
- Inviare dati al server con HTTP.post + JSON
- Completamento dell’applicazione tutorial, invocazione di put/delete

Prerequisiti

Per poter seguire il corso è opportuno:
● conoscere almeno a livello base HTML e CSS (saper “interpretare” un documento html con indicazioni di stile espresse tramite CSS, e saperlo modificare facendo uso di guide di riferimento)
● conoscere a livello base il funzionamento di un DB MySQL e saper interpretare un’istruzione SQL (non verrà chiesto di scriverne nessuna, ma le useremo nei nostri esempi quindi è opportuno saperle leggere)
● saper programmare in Javascript
Per partecipare attivamente ed essere in grado di affrontare le esercitazioni inoltre è altamente consigliato:
● conoscere le caratteristiche di Javascript versione ES2016+ (farò un recap veloce se necessario ma non potrò dedicarvi moltissimo tempo) : in particolare classi, arrow functions, import/export, uso di Promise per la gestione di chiamate asincrone (queste ultime due cose soprattutto per la parte su React)
● avere qualche base di programmazione Javascript per il web, in particolare:
○ DOM=Domain Object Model, cos’è e com’è strutturato, non ci servirà che si conosca l’API per l’interrogazione del DOM perché la useremo poco, ma bisogna sapere che esiste e i principi di base su cui si fonda. Si veda ad esempio:
https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction
○ Ajax per l’aggiornamento dinamico delle pagine web (non c’è molto da sapere: in pratica, come funziona fetch: https://developer.mozilla.org/en-US/docs/Web/API/fetch).
○ JSON come formato di interscambio (non c’è molto da sapere, se non cos’è e che aspetto ha un file JSON). Si veda ad es: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON

Strumenti di sviluppo da preinstallare
Per lo sviluppo sarà necessario aver installato e funzionante sul proprio computer:
- un server MySQL e un qualche software per consultarlo; un approccio semplice può essere quello di installare uno stack LAMP (XAMPP/WAMP/MAMP a seconda del sistema operativo), che fornisce di solito anche PhpMyAdmin per la consultazione del DB.
● MAMP (Mac OS, Windows): https://www.mamp.info/en/mamp/
● WAMP (Windows): https://www.wampserver.com/en/
● XAMPP (Linux, Windows, Mac OS): https://www.apachefriends.org/it/index.html
- un ambiente di sviluppo per applicazioni Web. Io userò WebStorm di JetBrains che è gratuito per docenti e studenti (bisogna fare richiesta di una licenza educational); una validissima alternativa è Visual Studio Code che è completamente free.
● https://www.jetbrains.com/webstorm/
● https://code.visualstudio.com/
- Postman, un applicativo per “collaudare” richieste HTTP, ci servirà per testare il server Node che costruiremo. https://www.postman.com/downloads/
Per velocizzare la prima lezione, potrà inoltre essere opportuno avere già installato Node.JS: https://nodejs.org/en/download/

Iscrizione:

Entro Domenica 20 Febbraio alle ore 23:00

https://bit.ly/corsonodereact

Modalità di erogazione:

Online in modalità sincrona su piattaforma da definire.

Docente:

Dott.ssa Claudia Picardi, Dipartimento di Informatica - Università di Torino
claudia.picardi@unito.it