Programmazione Web

Docente:

• Leonardo Mostarda più docenti esterni di aziende specializzate

L'obiettivo del corso è introdurre gli studenti al mondo della programmazione web attraverso uno stack moderno ma di facile comprensione. Alla fine del corso ogni studente sarà in grado di sviluppare e gestire il progetto di un'applicazione web completa (frontend + backend). Il corso darà inoltre le basi delle metodologie agili e dei più comuni strumenti utilizzati nell'ambito dello sviluppo web.

Il corso avrà un approccio learning by doing. Gli studenti si dovranno dividere in gruppi e affrontare un vero progetto seguendo una traccia. Tutto il codice sarà pubblico su github e il progetto live in modo che sia visibile e valutabile da tutti.

• link ai video delle lezioni
• 05/04/2017 14-16 Introduzione al corso e agli strumenti
• 12/04/2017 11-16 Rapid Prototyping & agile methodology (dalle 11 alle 13 l'aula sarà AB1)
• 19/04/2017 11-16 HTML+ CSS & responsive interface
• 26/04/2017 11-16 Javascript
• 03/05/2017 11-16 Angular 1
• 10/05/2017 11-16 Git + Tool
• 17/05/2017 11-16 Node
• 31/05/2017 11-16 Mongodb e mongoose
• 07/06/2017 11-16 Sviluppo API Rest autenticate con JWT
• 14/06/2017 11-16 promesse Q in javascript
• 21/06/2017 11-15 Laboratorio e ripasso

• Nozioni base di Programmazione Web
• Architetture Client/Server
• Installazione e configurazione dei vari componenti software per lo sviluppo, test e deployment di applicazioni Web (Nodejs, Mongodb, ecc.)
• Linguaggi e Tool di sviluppo lato client: HTML 5, CSS, JavaScript, Angular
• Linguaggi e Tool di sviluppo lato server

• un laptop personale con mac o linux (anche macchina virtuale)
• editor di testo (consigliato https://code.visualstudio.com/ )
• Node.js installato (per il backend - consigliata v6.10.1 LTS https://nodejs.org/it/ )
• Studio3T (ex MongoChef - client per MongoDb)
• Heroku.com
• Github.com
• Trello.com

Le lezioni saranno tutte di 4 ore (tranne la prima di introduzione al corso che sarà di 2 ore).

Tutte le lezioni saranno trasmesse come webinar e registrate per essere seguite anche da remoto real-time o in un momento successivo. Tutti i link delle lezioni saranno messi nella sezione materiale di questa pagina

Ogni lezione avrà una parte introduttiva fatta dal docente con slide teoriche più live code e degli esercizi pratici che gli studenti dovranno svolgere per far emergere eventuali criticità/dubbi.

Durante il corso gli studenti dovranno sviluppare un progetto seguendo una delle tracce proposte. Il consiglio è di affrontare il progetto in gruppi di 3 o 4 persone.

Ogni gruppo dovrà scegliere una traccia tra le 5 seguenti e dovrà implementare tutte le 5 user story indicate nella traccia più altre 5 a libera scelta.

Tracce:

1. Homebanking
   • come utente voglio poter accedere ad un’area privata tramite username e password
   • come utente voglio poter leggere i miei movimenti bancari
   • come utente voglio poter stampare un report dei miei movimenti bancari
   • come utente voglio poter effettuare un bonifico
   • come utente voglio poter avere un grafico che mi illustra in maniera sintetica la mia situazione in banca
2. Piano di studio
   • come utente voglio poter accedere ad un’area privata tramite username e password
   • come admin voglio poter modificare il piano di studio
   • come studente voglio potermi iscrivere ad un esame
   • come professore voglio poter caricare ed inviare i risultati degli esami agli studenti
   • come studente voglio visualizzare la mia carriera universitaria anche con l’ausilio di grafici
3. App per pagamenti & prestiti online
   • come utente voglio poter accedere ad un’area privata tramite username e password
   • come utente voglio poter inviare del denaro ad un altro utente
   • come utente voglio poter richiedere un prestito P2P dentro l’app rispettando le leggi italiane
   • come utente voglio poter investire in un prestito chiesto da un altro utente
   • come admin voglio poter moderare le richieste di prestito
4. Gestione magazzino Ecommerce
   • come admin voglio poter accedere ad un’area privata tramite username e password
   • come admin voglio gestire le rimanenze e i re-ordini dei prodotti
   • il server deve inviare una email all’admin quando sta per terminare un prodotto
   • come admin voglio poter creare e inserire un nuovo prodotto (con proprietà come nome, descrizione, peso, ecc.)
   • come user voglio essere avvertito quando un prodotto terminato, risulta nuovamente disponibile.
5. Client Web di GIT
   • come utente voglio poter accedere ad un’area privata tramite username e password
   • come utente voglio poter leggere la lista dei miei repo
   • come utente voglio poter vedere il codice di un repo
   • come utente voglio poter vedere un grafico che mi illustri l’alberatura dei branch di un repo
   • come utente voglio poter fare un pull-request da un branch

Webinar del corso

• Lezione 1 https://www.youtube.com/watch?v=1no4NKsczRw
• Lezione 2: mattina https://www.youtube.com/watch?v=UfnQJAEafKg / pomeriggio https://www.youtube.com/watch?v=2iVpGC7MPy8
• Lezione 3: mattina https://www.youtube.com/watch?v=7dVwc3_5xPE / pomeriggio https://www.youtube.com/watch?v=Hrwf2P7EYvs
• Lezione 4: mattina https://www.youtube.com/watch?v=pfoDnilCd2w / pomeriggio https://www.youtube.com/watch?v=m00Dmuwvx7M
• Lezione 5: video lezione webex pt.2
• Lezione 6: video lezione webex
• Lezione 7: video lezione webex pt.1, video lezione webex pt.2
• Lezione 8: video lezione webex
• Lezione 9: pt.1 pt.2
• Lezione 10: pt.1 pt.2

Testi e Risorse di Riferimento

• Spotify Method http://blog.crisp.se/wp-content/uploads/2014/10/Screen-Shot-2014-10-07-at-08.20.00.png
• Manifesto Agile http://agilemanifesto.org/iso/it/manifesto.html
• What do Prototypes Prototype https://pdfs.semanticscholar.org/30bc/6125fab9d9b2d5854223aeea7900a218f149.pdf
• repo lezione 3 con esempi html e css https://github.com/e-xtrategy/unicam-html-css
• html tag list https://www.w3schools.com/tags/default.asp
• css props https://www.w3schools.com/cssref/default.asp
• conditional comments https://www.quirksmode.org/css/condcom.html
• You don't know JS https://github.com/getify/You-Dont-Know-JS
• Documentazione angularjs https://docs.angularjs.org
• Tutorial angularjs https://docs.angularjs.org/tutorial
• Guida MongoDb https://docs.mongodb.com/manual/tutorial/install-mongodb-on-windows/#run-mongodb-community-edition

Lezione 5 (Angular)

• Slide lezione

Lezione 6 (Git e altri tool)

• video lezione
• Git - Slide su termini e parole chiave
• Git - comandi base
• Git - Stash, accantonare le modifiche senza committarle
• Git - differenza tra index e HEAD
• Git client - SourceTree o GitKraken
• GitHub - hosting open di server git
• GitLab - hosting privato di server git, da installare sul proprio server
• Mobirise - free responsive website drag&drop editor
• Bootstrap - framework to build responsive websites
• Bootstrap - come funziona il grid system
  • Esercitazioni
    • clone, push, commit
      1. Ordered List Itema gruppi, create un repository su github a gruppo (aggiungete gli altri come collaboratori)
      2. clonatelo tutti localmente
      3. un collaboratore fa delle modifiche –>stage–>commit–>push
      4. gli altri fanno pull
    • merge e conflitti
      1. provate a modificare file diversi, file uguali su righe diverse, file uguali sulle stesse righe
      2. imparate a gestire i conflitti e i merge
    • CLI (command line interface)
      1. non dimenticate la riga di comando, fate le stesse prove da terminale/bash/prompt

Lezione 7 (NodeJS)

• video lezione pt.1, pt.2
• Server side vs Client side - Example
• Closure - how to use it example
• MEAN - Lo stack MEAN
• JSON - basic tutorial
• NodeJs (package.js, install, etc.)- tutorial for beginners
• .env - How to create and read a config param in Node example
• Winston - Advanced logging tutorial
• Heroku - How to deploy a Nodejs server to Heroku cloud how to
• Express - get params of the routes tutorial
• Express - esempio completo con backend e frontend angolar, per file upload tutorial
• Angularjs - a very good tutorial

Lezione 8 (MongoDb)

• video lezione
• panoramica stack MEANarchitettura.pdf
• MongoDB - panoramica e carrellata comandi[1], [2]
• NOSQL - intro
• MongoDB - Affinità tra Mongo e RDBMS
• MongoDB - schema dinamico, Schema Design, Pre-Join
• MongoDB - BSON
• MongoDB vantaggi - perchè utilizzare NOSQL?
• MongoDB comandi esempi di query e indici [1], [2]
• Mongoose - official page
• Mongoose - models
• Mongoose - field types
• Mongoose - fields validation
• Mongoose - Nodejs tutorial
• NodeJs, Express - come organizzare le route

Lezione 9 (JWT)

• video lezione pt.1 pt.2
• JWT - Json Web token
• JWT - token vs session authentication (lettura)
• JWT - token vs session authentication (con esempi di codice)
• JWT Auth0 - approfondimento
• JWT+Node - Tutorial
• www.jwt.io

Lezione 10 (promesse Q)

• video pt.1
• video pt.2
• Esempio di server su GitHub. Scaricare, studiare e sviluppare secondo le specifiche del vostro progetto.

Lezione 11

• Esercitazione finale mercoledì 28 dalle 11:00 in poi. Sono inoltre disponibile a chiarire eventuali dubbi e argomenti. Visto l'esame di sistemi del 29, se volete possiamo fare solo mattina, e programmare un altro incontro.
• Esempio di client Angular su GitHub. Scaricare, studiare e sviluppare secondo le specifiche del vostro progetto.

Modalità di Esame

Tutti i gruppi dovranno consegnare il loro codice tramite un repository github. Tutte le commit dovranno essere fatte dagli studenti dal proprio account personale in modo da rendere evidente chi ha fatto cosa.

Nel readme del repository deve essere presente:

• link all’app deployata su heroku
• procedura per far partire in locale il progetto
• procedura per deployare
• descrizione dell’architettura del codice e delle cartelle
• link ai wireframe
• nome e cognome di tutti gli studenti del gruppo con numero di matricola

Si potrà dare l’esame in 2 modi:

• Giornata di presentazione dal vivo il giorno 29 settembre 2017 con inizio alle ore 10: presentando dal vivo il proprio progetto. Tutti i membri del gruppo dovranno parlare e avranno a disposizione massimo 10 minuti, più 5 per le domande. Preparate un pdf con il testo del progetto, le user stories implementate, una descrizione dell'architettura del progetto (struttura file, componenti software ecc.) e qualche screenshot della demo live
• Consegna asincrona: inviando il link al repo a daniele.fani@unicam.it con oggetto “consegna esame programmazione web 2017”. Nel caso di consegna asincrona si dovrà:
  • riempire il file ReadMe del repo GitHub. Potete prendere spunto dal mio esempio
  • scrivere nel ReadMe di GitHub il testo del progetto (con le varie user stories) ed eventuali credenziali per l'accesso Admin
  • fare un breve video di presentazione del progetto (qui un esempio) e scrivere nel ReadMe il link youtube. Nel video tutti i membri del gruppo illustrano il progetto. Potete anche comparire qualche secondo solo all'inizio, dove vi presentate, e poi proseguite con le voci fuori campo che commentano delle slide e la demo live.
  • link a un pdf con il contenuto simile al readme (membri gruppo, testo progetto, user stories, link a GitHub e video, architettura componenti software..)

La consegna asincrona potrà essere effettuata a partire dall’inizio della prima sessione di esami dopo la fine del corso in qualsiasi momento. La registrazione ufficiale avverrà alla prima data a calendario accademico disponibile.

Modalità di Valutazione

I docenti assegneranno da 1 a 3 punti per ogni user story completata. Le 10 user story daranno un punteggio massimo di 30.

Nota

gli studenti che vogliono sostenere l'esame negli appelli ancora disponibili dell'A.A. 2015/2016 consultino la pagina web del corso dell'anno accademico 2015/16 Programmazione Web A.A. 2015/16