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: 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

  • 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 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

Materiale

Webinar del corso

Testi e Risorse di Riferimento

Lezione 5 (Angular)

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)

Lezione 8 (MongoDb)

Lezione 9 (JWT)

Lezione 10 (promesse Q)

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.

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 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