====== Programmazione Web ======
----
===== News =====
* **11 Settembre 2017**: **L'appello** per l'esame in presenza è stato spostato a venerdì **29 Settembre 2017**, alle 10:00. Guardate sotto la sezione "Modalità di Esame" che è stata aggiornata
* **7 Settembre 2016**: La pagina del corso è on-line. Gli studenti che devono sostenere l'esame negli appelli dell'A.A. 2015/16 debbono fare riferimento alla pagina del corso dell'anno scorso: [[didattica:triennale:pw:ay_1516:main|Programmazione Web A.A. 2015/16]]
----
===== Informazioni Generali =====
**Docente**:
* Leonardo Mostarda più docenti esterni di aziende specializzate
----
===== Obiettivi del Corso =====
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.
----
===== Calendario delle Lezioni =====
* [[https://drive.google.com/drive/folders/0BzDyK245kXvlOXpyaHhmU2NMX2s?usp=sharing|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
----
===== Contenuti del Corso =====
* 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
----
===== Strumenti =====
* 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
----
===== Modalità di Frequenza =====
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 [[http://didattica.cs.unicam.it/doku.php?id=didattica:triennale:pw:ay_1617:main#materiale|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:
- 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
- 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
- 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
- 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.
- 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
----
===== Materiale =====
**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: [[https://drive.google.com/open?id=0BzDyK245kXvlSVVhYk80YXlTZVU|video lezione webex pt.2]]
* Lezione 6: [[https://drive.google.com/file/d/0BzDyK245kXvlTVladUVyZHhyYjQ/view?usp=sharing|video lezione webex]]
* Lezione 7: [[https://drive.google.com/file/d/0BzDyK245kXvlbDlPaG12SmNGbnc/view?usp=sharing|video lezione webex pt.1]], [[https://drive.google.com/open?id=0BzDyK245kXvlQkVvSzE2eDJobGM|video lezione webex pt.2]]
* Lezione 8: [[https://drive.google.com/open?id=0BzDyK245kXvlMmxXNTF0Mk93dVE|video lezione webex]]
* Lezione 9: [[https://drive.google.com/open?id=0BzDyK245kXvlODlicmhSbmlwcWs|pt.1]] [[https://drive.google.com/open?id=0BzDyK245kXvla1piTFNJWVcydTA|pt.2]]
* Lezione 10: [[https://drive.google.com/open?id=0BzDyK245kXvlUFU1RXRyWFBpUHc|pt.1]] [[https://drive.google.com/open?id=0BzDyK245kXvlNy05TmxKYVlXZkU|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)**
* [[http://slides.com/extrategy/angular-2-12#/|Slide lezione]]
**Lezione 6 (Git e altri tool)**
* [[https://drive.google.com/file/d/0BzDyK245kXvlTVladUVyZHhyYjQ/view?usp=sharing|video lezione]]
* Git - [[https://www.slideshare.net/matteogavagnin/git-bestpractices?qid=21554667-7f40-455d-8233-a58ba3fc2ce8&v=&b=&from_search=5|Slide]] su termini e parole chiave
* Git - [[http://rogerdudler.github.io/git-guide/index.it.html|comandi base]]
* Git - [[https://git-scm.com/book/it/v1/Strumenti-di-Git-Accantonare|Stash]], accantonare le modifiche senza committarle
* Git - [[http://stackoverflow.com/questions/3689838/difference-between-head-working-tree-index-in-git|differenza tra index e HEAD]]
* Git client - [[http://sourcetreeapp.com|SourceTree]] o [[https://www.gitkraken.com|GitKraken]]
* [[http://github.com|GitHub]] - hosting open di server git
* [[http://gitlab.com|GitLab]] - hosting privato di server git, da installare sul proprio server
* [[https://mobirise.com|Mobirise]] - free responsive website drag&drop editor
* [[https://v4-alpha.getbootstrap.com|Bootstrap]] - framework to build responsive websites
* Bootstrap - come funziona il [[http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works|grid system]]
* Esercitazioni
* clone, push, commit
- Ordered List Itema gruppi, create un repository su github a gruppo (aggiungete gli altri come collaboratori)
- clonatelo tutti localmente
- un collaboratore fa delle modifiche -->stage-->commit-->push
- gli altri fanno pull
* merge e conflitti
- provate a modificare file diversi, file uguali su righe diverse, file uguali sulle stesse righe
- imparate a gestire i conflitti e i merge
* CLI (command line interface)
- non dimenticate la riga di comando, fate le stesse prove da terminale/bash/prompt
**Lezione 7 (NodeJS)**
* [[https://drive.google.com/file/d/0BzDyK245kXvlbDlPaG12SmNGbnc/view?usp=sharing|video lezione pt.1]], [[https://drive.google.com/open?id=0BzDyK245kXvlQkVvSzE2eDJobGM|pt.2]]
* Server side vs Client side - [[http://www.codeconquest.com/website/client-side-vs-server-side/|Example]]
* Closure - how to use it [[https://howtonode.org/why-use-closure|example]]
* MEAN - [[https://www.slideshare.net/ibuildingsIT/mean-35687380?qid=dfad8d98-1754-417b-aed7-cdf68546f94c&v=&b=&from_search=2|Lo stack MEAN]]
* JSON - [[https://www.tutorialspoint.com/json/json_overview.htm|basic tutorial]]
* NodeJs (package.js, install, etc.)- [[https://www.tutorialspoint.com/nodejs/nodejs_npm.htm|tutorial for beginners]]
* .env - How to create and read a config param in Node [[https://www.npmjs.com/package/node-env-file|example]]
* Winston - Advanced logging [[http://tostring.it/2014/06/23/advanced-logging-with-nodejs/|tutorial]]
* Heroku - How to deploy a Nodejs server to Heroku cloud [[https://scotch.io/tutorials/how-to-deploy-a-node-js-app-to-heroku|how to]]
* Express - get params of the routes [[https://scotch.io/tutorials/use-expressjs-to-get-url-and-post-parameters|tutorial]]
* Express - esempio completo con backend e frontend angolar, per file upload [[https://scotch.io/tutorials/angular-file-uploads-with-an-express-backend|tutorial]]
* Angularjs - a very good [[https://www.codeschool.com/courses/shaping-up-with-angularjs|tutorial]]
**Lezione 8 (MongoDb)**
* [[https://drive.google.com/open?id=0BzDyK245kXvlMmxXNTF0Mk93dVE|video lezione]]
* panoramica stack MEAN{{ :didattica:triennale:pw:ay_1516:architettura.pdf |}}
* MongoDB - [[https://www.slideshare.net/savez/mongodb-15962567?qid=26c128fb-365c-43fc-bbbf-2cb35d0e6463&v=&b=&from_search=6|panoramica e carrellata comandi[1]]], [[https://www.slideshare.net/mixmax99/webinar-back-to-basics-01-introduzione?qid=26c128fb-365c-43fc-bbbf-2cb35d0e6463&v=&b=&from_search=18|[2]]]
* NOSQL - [[https://www.slideshare.net/yourAlbertoOlla/introduzione-database-nosql?qid=26c128fb-365c-43fc-bbbf-2cb35d0e6463&v=&b=&from_search=10|intro]]
* MongoDB - [[https://www.slideshare.net/yourAlbertoOlla/mongodb-in-un-app?qid=26c128fb-365c-43fc-bbbf-2cb35d0e6463&v=&b=&from_search=7|Affinità tra Mongo e RDBMS]]
* MongoDB - [[https://www.slideshare.net/yourAlbertoOlla/schema-dinamico|schema dinamico]], [[https://www.slideshare.net/yourAlbertoOlla/schema-design-52534839?qid=26c128fb-365c-43fc-bbbf-2cb35d0e6463&v=&b=&from_search=9|Schema Design]], [[https://www.slideshare.net/yourAlbertoOlla/join-transaction-e-prejoin|Pre-Join]]
* MongoDB - [[https://www.slideshare.net/yourAlbertoOlla/json-e-bson|BSON]]
* MongoDB vantaggi - [[https://www.slideshare.net/mixmax99/mongodb-quantificare-il-vantaggio-di-business?next_slideshow=1|perchè utilizzare NOSQL?]]
* MongoDB comandi [[https://www.slideshare.net/mixmax99/webinar-back-to-basics-session-4-indexing?qid=26c128fb-365c-43fc-bbbf-2cb35d0e6463&v=&b=&from_search=11|esempi di query e indici [1]]], [[https://www.slideshare.net/mixmax99/2014-it-app-dev-series-03-interagire-con-il-database-40438650?qid=26c128fb-365c-43fc-bbbf-2cb35d0e6463&v=&b=&from_search=16|[2]]]
* Mongoose - [[http://mongoosejs.com|official page]]
* Mongoose - [[http://mongoosejs.com/docs/models.html|models]]
* Mongoose - [[http://mongoosejs.com/docs/schematypes.html|field types]]
* Mongoose - [[http://mongoosejs.com/docs/validation.html|fields validation]]
* Mongoose - [[https://scotch.io/tutorials/using-mongoosejs-in-node-js-and-mongodb-applications|Nodejs tutorial]]
* NodeJs, Express - [[https://scotch.io/tutorials/keeping-api-routing-clean-using-express-routers|come organizzare le route]]
**Lezione 9 (JWT)**
* [[https://drive.google.com/open?id=0BzDyK245kXvlMmxXNTF0Mk93dVE|video lezione pt.1]] [[https://drive.google.com/open?id=0BzDyK245kXvla1piTFNJWVcydTA| pt.2]]
* JWT - [[https://scotch.io/tutorials/the-anatomy-of-a-json-web-token|Json Web token]]
* JWT - [[https://ponyfoo.com/articles/json-web-tokens-vs-session-cookies|token vs session authentication (lettura)]]
* JWT - [[https://auth0.com/blog/cookies-vs-tokens-definitive-guide/|token vs session authentication (con esempi di codice)]]
* JWT Auth0 - [[https://scotch.io/tutorials/the-easiest-way-to-add-authentication-to-any-app|approfondimento]]
* JWT+Node - [[https://scotch.io/tutorials/authenticate-a-node-js-api-with-json-web-tokens|Tutorial]]
* [[https://jwt.io|www.jwt.io]]
**Lezione 10 (promesse Q)**
* [[https://drive.google.com/open?id=0BzDyK245kXvlUFU1RXRyWFBpUHc|video pt.1]]
* [[https://drive.google.com/open?id=0BzDyK245kXvlNy05TmxKYVlXZkU|video pt.2]]
* [[https://github.com/De-Lac/NodeJs_server_examaple/blob/master/README.md|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.
* [[https://github.com/De-Lac/AngularJs_client_example|Esempio di client Angular su GitHub]]. Scaricare, studiare e sviluppare secondo le specifiche del vostro progetto.
----
===== Esami =====
====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 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 [[https://github.com/De-Lac/NodeJs_server_examaple|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 [[https://www.youtube.com/watch?v=sYJh6m3IWIU&t=261s|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 [[didattica:triennale:pw:ay_1516:main|Programmazione Web A.A. 2015/16]]