Differences

This shows you the differences between two versions of the page.

--- didattica:triennale:pw:ay_1718:main [2017/09/16 19:26]
mescal removed
+++ — (current)
@@ Line 1: / Line 1: @@
-====== Programmazione Web ======
-----
-===== News =====
-<WRAP center round important 95%>
-  * <wrap em>**11 Settembre 2017**</wrap>: **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
-  * <wrap em>**7 Settembre 2016**</wrap>: 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]]
-</WRAP>
-----
-===== Informazioni Generali =====
-<WRAP box round 95% center>
-**Docente**:
-  * Leonardo Mostarda più docenti esterni di aziende specializzate
-</WRAP>
-----
-===== Obiettivi del Corso =====
-<WRAP box round 95% center>
-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.
-</WRAP>
-----
-===== Calendario delle Lezioni =====
-<WRAP box round 95% center>
-  * [[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
-</WRAP>
-----
-===== Contenuti del Corso =====
-<WRAP round 95% center box>
-  * 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
-</WRAP>
-----
-===== Strumenti =====
-<WRAP round 95% center box>
-  * 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
-</WRAP>
-----
-===== Modalità di Frequenza =====
-<WRAP round 95% center box>
-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_1718: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
-</WRAP>
-----
-===== Materiale =====
-<WRAP box round center 95%>
-**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.
-</WRAP>
-----
-===== Esami =====
-<WRAP box round center 95%>
-====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 [[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]]
-</WRAP>