01UDFOV - Applicazioni Web I (corso 2 - 2020/2021)

Details

Pagina ufficiale del corso "Applicazioni Web I" (codice 01UDFOV, corso 2) offerto agli studenti del primo anno della laurea magistrale in Ingegneria Informatica del Politecnico di Torino.

Questa pagina si riferisce alla versione 2020/2021 del corso. Dall'anno accademico 2021/2022, il materiale dell'unico corso di Applicazioni Web I è disponibile all'indirizzo http://media.polito.it/aw1

Link breve a questa pagina: http://bit.ly/polito-aw1

Informazioni in breve

Il materiale relativo alle lezioni e ai laboratori è disponibile nella sezione Calendario. Le regole d'esame e la modalità di comunicazione con e dai docenti sono disponibili nelle relative sezioni.

Titolo: Applicazioni Web I
Crediti: 6 crediti
Divisione alfabetica: Corso 2 - cognomi M-Z
Anno: Primo anno della laurea magistrale
Semestre: Secondo semestre (Marzo-Giugno)
Lingua: Italiano
Docente titolare: Luigi De Russis
Docente collaboratore: Luca Mannella
Pagina ufficiale: Guida dello studente
Organizzazione GitHub: https://github.com/polito-WA1-AW1-2021
Video-lezioni: Playlist YouTube

Orario generale del corso

Fare riferimento alla sezione Calendario per eventuali variazioni e dettagli.

GiornoOraDoveTipoNote
Lunedì 10:00-11:30 Online Lab (gruppo I) Dalla 3a settimana
Lunedì 11:30-13:00 Online/Aula 3R Lab (gruppo II) Dalla 3a settimana
Giovedì 8:30-10:00 Online Lezione  
Giovedì 10:00-11:30 Online Lezione  

 


Calendario

Questa sezione contiene il calendario del corso e il materiale di tutte le lezioni e i laboratori, con gli argomenti (e le eventuali scadenze) per ognuno di esso. Per favore, considerate le seguenti informazioni come un'anteprima provvisoria dell'organizzazione del corso, fornite per aiutare gli studenti ad organizzarsi e a pianificare la loro partecipazione. Essendo provvisorie, tali informazioni possono cambiare in ogni momento.

Tutte le slide, gli esempi, gli esercizi e ogni altro materiale utilizzato durante le lezioni e i laboratori saranno anche resi disponibili in un repository su GitHub. Inoltre, tutte le lezioni saranno video-registrate e rese disponibili sia sul Portale della Didattica sia in una playlist YouTube dedicata.

Legenda
Tipo: L = Lezione, EA = Esercitazione in aula, EL = Esercitazione di laboratorio
Docenti: LDR = Luigi De Russis, LM = Luca Mannella

DataTipoDettagliOraVideoDocente
01/03/2021 L

Introduzione al corso

 10:00-11:30 icons8 play button 48 LDR
01/03/2021 L JavaScript: introduzione 11:30-13:00 icons8 play button 48 LDR
04/03/2021 L JavaScript: oggetti e funzioni 08:30-10:00 icons8 play button 48 LDR
04/03/2021 EA

Esercizi su JavaScript

 10:00-11:30 icons8 play button 48  LDR
           
    Codice sviluppato durante le lezioni delle settimane 1-2 (su GitHub)      
08/03/2021 L JavaScript: callback e programmazione funzionale 10:00-11:30 icons8 play button 48 LDR
08/03/2021 EA

Esercizio con metodi funzionali

 11:30-13:00 icons8 play button 48 LDR
11/03/2021 L

JavaScript: programmazione asincrona (continua)

 08:30-10:00 icons8 play button 48 LDR 
11/03/2021 EA

Esercizi su JavaScript

 10:00-11:30 icons8 play button 48 LDR
  L Architetture Web - icons8 play button 48 LDR
           
    Codice sviluppato durante le lezioni della settimana 3 (su GitHub)      
15/03/2021 EL

Iniziare a lavorare in node.js (turno 1 - online)

 10:00-11:30 - LM
15/03/2021 EL

Iniziare a lavorare in node.js (turno 2 - online)

 11:30-13:00 - LM
18/03/2021 L

Introduzione a HTML

CSS

 08:30-10:00 icons8 play button 48  LDR
18/03/2021 L CSS moderno e Bootstrap (continua) 10:00-11:30 icons8 play button 48 LDR 
           
    Codice sviluppato durante le lezioni della settimana 4 (su GitHub)      
22/03/2021 EL

HTML e CSS in pratica (turno 1 - online)

 10:00-11:30 - LM
22/03/2021 EL

HTML e CSS in pratica (turno 2 - online)

 11:30-13:00 - LM
25/03/2021 L

JavaScript nel browser

 08:30-10:00 icons8 play button 48 LDR
25/03/2021 L

JavaScript nel browser (continua)

 10:00-11:30 icons8 play button 48 LDR
  L JavaScript: 'this' - icons8 play button 48 LDR
           
29/03/2021 EL

JavaScript nel browser (turno 1 - online)

 10:00-11:30 - LM
29/03/2021 EL

JavaScript nel browser (turno 2 - online)

 11:30-13:00 - LM
    Vacanze di Pasqua      
08/04/2021 L Introduzione a React 08:30-10:00 icons8 play button 48 LDR
08/04/2021 L React: elementi e JSX 10:00-11:30 icons8 play button 48 LDR
           
    Codice sviluppato durante le lezioni della settimana 6 (su GitHub)      
12/04/2021 EL BigLab 1 - parte A: Iniziare a lavorare con React (turno 1 - online) 10:00-11:30 - LM
12/04/2021 EL BigLab 1 - parte A: Iniziare a lavorare con React (turno 2 - online) 11:30-13:00 - LM
15/04/2021 L

React: props e stato

Hooks: introduzione e useState

 08:30-10:00 icons8 play button 48 LDR
15/04/2021 EA

Esercizio su componenti, props e stato

 10:00-11:30 icons8 play button 48 LDR
           
    Codice sviluppato durante le lezioni della settimana 7 (su GitHub)      
19/04/2021 EL BigLab 1 - parte B: Stato dei componenti di React (turno 1 - online) 10:00-11:30 - LM
19/04/2021 EL BigLab 1 - parte B: Stato dei componenti di React (turno 2 - in presenza/online) 11:30-13:00 - LM
22/04/2021 L

React: form (con esercizio)

 08:30-10:00 icons8 play button 48 LDR
22/04/2021 L

React: context

 10:00-11:30 icons8 play button 48 LDR
           
    Codice sviluppato durante le lezioni della settimana 8 (su GitHub)      
26/04/2021 EL BigLab 1 - parte C: Filtri & Form (turno 1 - online) 10:00-11:30 - LM
26/04/2021 EL BigLab 1 - parte C: Filtri & Form (turno 2 - in presenza/online) 11:30-13:00 - LM
29/04/2021 L React Router (con esercizio) 08:30-10:00 icons8 play button 48 LDR
29/04/2021 L JavaScript: classi e moduli 10:00-11:30 icons8 play button 48 LDR
           
    Codice sviluppato durante le lezioni della settimana 9 (su GitHub)      
03/05/2021 EL BigLab 1 - parte D: React Routes (turno 1 - online) 10:00-11:30 - LM
03/05/2021 EL BigLab 1 - parte D: React Routes (turno 2 - in presenza/online) 11:30-13:00 - LM
06/05/2021 L

Express

HTTP API

 08:30-10:00 icons8 play button 48 LDR
06/05/2021 EA

Esercizio su Express e API HTTP

 10:00-11:30 icons8 play button 48 LDR
           
09/05/2021 - Consegna del BigLab 1: risultati
 EOD    
    Codice sviluppato durante le lezioni della settimana 10 (su GitHub)      
10/05/2021 EL BigLab 2 - parte A: API con Express (turno 1 - online) 10:00-11:30 - LM
10/05/2021 EL BigLab 2 - parte A: API con Express (turno 2 - in presenza/online) 11:30-13:00 - LM
13/05/2021 L

Fetch

Interazione client-server con React

 08:30-10:00 icons8 play button 48 LDR
13/05/2021 L Lifecycle dei componenti e useEffect 10:00-11:30 icons8 play button 48 LDR
           
    Codice sviluppato durante le lezioni della settimana 11 (su GitHub)      
17/05/2021 EL BigLab 2 - parte B: Integrazione delle API (turno 1 - online) 10:00-11:30 - LM
17/05/2021 EL BigLab 2 - parte B: Integrazione delle API (turno 2 - in presenza/online) 11:30-13:00 - LM
20/05/2021 L Lifecycle: aspetti avanzati (continua) 08:30-10:00 icons8 play button 48 LDR
20/05/2021 EA

Esercizio su useEffect e fetch

 10:00-11:30 icons8 play button 48 LDR
           
    Codice sviluppato durante le lezioni della settimana 12 (su GitHub)      
24/05/2021 EL BigLab 2 - parte C: Integrazione completa delle API (turno 1 - online) 10:00-11:30 - LM
24/05/2021 EL BigLab 2 - parte C: Integrazione completa delle API (turno 2 - in presenza/online) 11:30-13:00 - LM
27/05/2021 L Autenticazione con Passport.js 08:30-10:00 icons8 play button 48 LDR
27/05/2021 EA

Esercizio sull'autenticazione

Progetto react-scores e il suo server con autenticazione (su GitHub)

 10:00-11:30 icons8 play button 48 LDR
           
31/05/2021 EL BigLab 2 - parte D: Autenticazione (turno 1 - online) 10:00-11:30 - LM
31/05/2021 EL BigLab 2 - parte D: Autenticazione (turno 2 - in presenza/online) 11:30-13:00 - LM
03/06/2021 - (no lezione) - - -
03/06/2021 - Seminario: Consoft 10:00-11:30 Link su Slack LDR
           
06/06/2021 - Consegna del BigLab 2: risultati
 EOD    
07/06/2021 EL Deployment di un'app React+Express su Heroku (turno 1 - online) 10:00-11:30 - LM
07/06/2021 EL Deployment di un'app React+Express su Heroku (turno 2 - in presenza) 11:30-13:00 - LM
08/06/2021 - Pubblicazione specifiche progetto d'esame (I appello) - - -
10/06/2021 - (no lezione) - - -
10/06/2021 - Q&A sulle specifiche di progetto per il primo appello d'esame 10:00-11:30 icons8 play button 48 LDR
28/06/2021 - Q&A sulle specifiche di progetto per il secondo appello d'esame 14:30-15:30 icons8 play button 48 LDR
25/08/2021 - Q&A sulle specifiche di progetto per il terzo appello d'esame 10:00-11:00 icons8 play button 48 LDR

Video-lezioni

 
 

Risorse per lo sviluppo

Questa sezione contiene la lista delle applicazioni software e delle librerie utilizzate durante il corso. Inoltre, presenta alcune risorse aggiuntive che possono essere utili per la creazione di applicazioni web.

Software in uso

Installeremo poi le altre librerie necessarie (per es., React, Express, sqlite, ...) tramite npm.

Documentazione e guide

Altre risorse utili

  • Simulare un dispositivo mobile da browser desktop, per esempio con il Device Mode di Chrome
  • Web design:
    • Google Fonts è un'ottima risorsa per font pronti all'uso. FontPair può aiutare ad abbinarli.
    • Wunderstock e Unsplash sono buoni punti di partenza per cercare foto e immagini campione con licenza Creative Commons.
    • Adobe Color è un'applicazione web interattiva per aiutare a scegliere schemi di colori che stanno bene insieme.

Comunicazioni e novità

Tutte le ore di lezione verranno svolte in maniera sincrona su Zoom, così come il turno di laboratorio online. Questa sezione riporta gli altri strumenti asincroni e le occasioni di comunicazione e dialogo, con i docenti e tra studenti.

Chat

Per le comunicazioni durante il corso, utilizzeremo Slack (*) come strumento principale. Tutte le comunicazioni, siano esse avvisi, link, novità, ecc. avverranno unicamente nel workspace dedicato al corso su Slack.

Tutti gli studenti devono, quindi, essere presenti nel workspace Slack del corso, chiamato "AW1 2021 (M-Z)". Per registrarvi al workspace, dovete usare il vostro indirizzo mail @studenti.polito.it, mentre potete scegliere a piacere un nickname da utilizzare. Il link per la registrazione è https://join.slack.com/t/aw1-2021-m-z/signup.

Non useremo, pertanto, né le e-mail né gli avvisi sul Portale della Didattica.

Tramite Slack, i docenti pubblicheranno novità, aggiornamenti, ecc. mentre gli studenti potranno usarlo sia per comunicare tra di loro sia con i docenti, anche fuori dall'orario del corso. Per esempio, gli studenti possono fare domande visibili a tutti i loro colleghi iscritti al corso o privatamente ai docenti, ricevendo - ovviamente! - una risposta da almeno un docente (e in tempi ragionevoli). Useremo Slack, inoltre, anche come chat durante le lezioni, sfruttando un canale dedicato e attivo durante e nei momenti intorno alle ore di lezione.

(*) Se non sapete cos'è Slack, potete dare un'occhiata a questo tutorial ufficiale. Slack è disponibile sul web, come applicazione desktop e come applicazione mobile. Potete scaricare le app di Slack a partire da questo link: https://slack.com/downloads/.

Ricevimento studenti

Il docente titolare del corso sarà disponibile per ricevimento studenti tutti i mercoledì dalle ore 16:00 alle ore 17:00 su Zoom.

Gli studenti possono collegarsi liberamente durante l'intera ora, nel caso in cui avessero domande, dubbi o curiosità che possono essere più facilmente risolti a voce (e/o tramite condivisione dello schermo). Essendo un'ora di consulenza, quindi facoltativa, non c'è problema se nessuno si collega: il docente terrà comunque aperta la chiamata per l'intera ora.

Il link per accedere all'ora di ricevimento studenti sarà fisso per tutto il semestre e sarà pubblicato su Slack durante la prima settimana di corso.


Esame e BigLab

Questa sezione contiene i testi dei progetti d'esame e le relative scadenze per la consegna. Inoltre, riporta le regole d'esame. Come noterete, le regole d'esame sono in inglese: questo per evitare problemi di allineamento tra i vari corsi italiano e inglese di Applicazioni Web I. 

BigLab

Il corso prevede, quest'anno, due BigLab, da svolgere a gruppi e da consegnare tramite GitHub Classroom. Ogni BigLab può valere fino a 1 punto sul voto finale d'esame (vedi le regole d'esame riportate di seguito).

Prove d'esame

Informazioni aggiuntive:

Esami passati: disponibili sul sito del corso in italiano del 2019/2020.

Regole d'esame

The exam of Web Applications I (WA1), due to the COVID-19 pandemic, will take place as described in the following, typically from remote.

The exam consists in a web application project to be developed according to the specifications that will be published 20 days in advance with respect to each official exam date ("data appello"), plus an oral discussion of such project. For each official date a new assignment, different from the previous one, will have to be developed. The assignment is valid ONLY for the official exam date to which it is explicitly connected.

The web application project must be developed by each student INDIVIDUALLY. During the oral exam each student should be able to prove that he/she was able to develop the project in full autonomy by showing complete and full knowledge of every part of his/her project solution.
Before the deadline (typically, the official exam date), the final version of the project will have to be submitted according to the provided technical instructions.

If instructions are not carefully followed, for instance if the project cannot be run and tested as is by the teacher with the standard configuration (as per the technical instructions), the exam will be considered as failed.

A few days after publishing the assignment the teachers will be available in a video-chat to discuss potential doubts about the assignment (e.g., unclearly or ambiguously expressed requirements). Any interested student will be able to participate in the question-answer session, or to ask questions over Slack.

The submission deadline for the project is at 23:59 of the day before the official exam date.
For submitting the exam, it is mandatory to enroll in the exam booking ("prenotazione esami"). The students admitted to the exam will be those that are correctly enrolled AND have turned in the project before the deadline. There will be no penalty for students who enroll but do not submit the project (they will be marked as "absent").

After the submission deadline, the teachers will evaluate the submitted solutions and provide a score for each one of them. Depending on the number of submissions, such process might take some days. Also, projects which do not meet minimum criteria will be evaluated as insufficient, with consequent failure of the exam, without the possibility to access the oral exam.

The evaluation criteria for the submitted project will be: functional completeness, absence of unhandled errors, client-server organization, component architecture according to the React guidelines, clarity and organization of the code.

Then, a schedule will be published for the oral exam. Each student deemed sufficient for the project part will be allocated to a time slot, during which he/she will be remotely connected with the teacher (with some other students as witnesses as required by the official examination rules by the Politecnico). The student will have to show some form of identification (ID card or passport, etc.) before the discussion, and he/she will be alone in front of the computer with the webcam turned on. The aim of the oral exam is to ensure that each student developed the web application by him/herself, and to evaluate how much the student can explain the exact behaviour of the code. The source code will be opened by on the teacher's computer which will share the screen with the student. In the eventuality that the oral exam will be done in-person, we will follow the same procedure.

Therefore, during the oral exam the student must be able to explain everything about the project that is asked by the teacher. This includes, but is not limited to, the reasons behind the architectural choices for his/her own application, the details about how any specific fragment of code works, why it was implemented in that way, and what alternatives could have been used, etc.

The evaluation criteria for the oral will be: theoretical and practical knowledge of the project design, theoretical and practical knowledge of the project code base, readiness and clarity in the replies.

There will be 24 marks assigned to the project, and 6 marks assigned to the oral discussion. The minimum project score to be admitted to the oral discussion is 12. The oral is mandatory (students can refuse to take the oral, of course, and the score will be nullified). The final score after the oral can not be refused.

The final mark will be the sum of the scores for the submitted project, the score assigned at the end of the oral exam, and the results from the BigLabs (if submitted). If the exam results in a failure, even just for the oral part, the score for the project will NOT be carried over to the next official exam dates: the new project corresponding to the new exam date will have to be developed. Please, also notice that the score of the BigLabs will last for an entire year (i.e., 4 exam sessions, until the beginning of a new edition of the course).

Since the exam is essentially the design of an application with rather generic specifications, it is not acceptable that the submitted solutions are excessively similar among them, which would indicate that the solution has not been developed autonomously. Similarity checks will be run after the deadline. In this case the exam will be considered as failed and the students notified about the situation.

RECOMMENDATIONS:

Each student, during the oral exam, must be able to immediately find and carefully explain any part of the code in the project that implements a given feature asked by the teacher. Therefore, it is strongly recommended that the student carefully rehearse and review the code shortly before the oral exam. Situations in which the student claims not to be able to "remember" things (where the code is, in which file, why it works that way, etc.) due to any reason (for instance "it has been a few days since I developed it", or similar claims) will lead to immediate exam failure.

As in any programming assignment, during the development phase, it is possible to search online for suggestions and examples about how to solve specific programming issues, which can be incorporated in the final solution. However, regardless of the source, the student must be able to explain how the code submitted as the final solution works, regardless of the source (online examples, templates, etc.). Verbatim copy of portions of code without the student being able to explain how it works will be subject to strong penalty in the final mark if found during oral examination.

In the solution, it is recommended to employ all the good practices and good programming techniques explained during the lectures. Strong deviations from such patterns will have to be duly justified during the oral exam and, if not adequately justified, will cause a reduction of the final mark, and potentially also a failed exam.

Regarding the use of external libraries/templates/modules: as a general rule, the use of the techniques shown during the classes is preferred. The use of external modules and libraries for non-essential functions is allowed: examples are date/time handling, presentation aspects, predefined components (e.g., calendars), and similar items.
If React requires the use of certain programming patterns, those must be followed. As an example, it is NOT allowed to use JQuery or JS directly to modify DOM content within the browser. It is NOT allowed to use frameworks different from React (Vue, Angular, etc.). It is not allowed to use server-side technologies different from those shown in the classes: Express, with SQLite to implement DB access, and the React internal web server must be used. Also, remember that the solution MUST be submitted in a way that can be readily tested by the teacher with the commands specified in the technical instructions. Any solution not running in this way will be considered as failed.