Official website of the course "Web Applications I" (code 01TXYOV) offered to students in the 1st year of the M.S. in Computer Engineering.
This page contains the archived version for the 2019/2020 edition of the course. Short link to the current edition: http://bit.ly/polito-wa1
Latest news
- 2020-03-04: New video with Course Introduction, and Welcome e-mail sent to all students
- 2020-02-26: Welcome to the first edition of the course! Happy web to everybody!
Basic information
Ttle: | Web Applications I |
Credits: | 6 CFU |
Year: | 1st year Computer Engineering |
Semestre: | 2nd semester (March-June) |
Language: | English |
Main teacher: | Fulvio Corno |
Other teachers: | Alberto Monge Roffarello Luigi De Russis |
Official link: | Portale della Didattica |
GitHub Repository: | https://github.com/polito-WA1-2020 |
Video lectures: | YouTube Playlist |
Class Hours
Day | Hour | Location | Type | Note |
Thursday | 08:30-10:00 | Room 4T | Class | |
Thursday | 10:00-11:30 | Room 4T | Class | |
Friday | 08:30-10:00 | LABINF | Lab (group 1/2) | starts on the 3rd week |
Friday | 10:00-11:30 | LABINF | Lab (group 2/2) | starts on the 3rd week |
Schedule
Date | Time | Type | Details | Video | Teacher |
---|---|---|---|---|---|
2020-03-04 | Lecture 01 | Introduction to the course | ![]() |
Fulvio Corno | |
2020-03-07 | Lecture 02 | Introduction to Javascript (part 1) | ![]() |
Fulvio Corno | |
2020-03-11 | Exercise 03 | JavaScript Exercises (part 1) GitHub repository js-exercises |
![]() |
Fulvio Corno | |
2020-03-12 | 10:00-11:30 | Video Chat 01 | Discussion and Q&A over the previous lessons | ![]() |
Fulvio Corno |
2020-03-13 | Lecture 04-P1, 04-P2 | Architecture of the web | ![]() ![]() |
Fulvio Corno | |
2020-03-17 | Lecture 05 | Introduction to Javascript (part 2) - a. Objects and Functions | ![]() |
Fulvio Corno | |
2020-03-18 | Lecture 06 | Introduction to Javascript (part 2) - b. Callbacks, Timers, Dates | ![]() |
Fulvio Corno | |
2020-03-19 | 10:00-11:30 | Video Chat 02 | Discussion and Q&A over the previous lessons | ![]() |
Fulvio Corno |
2020-03-20 | 08:30-10:00 | Laboratory |
Lab 1 (group 1/2, A-L): Getting started with Node.js
|
- | Alberto Monge Roffarello |
2020-03-20 | 10:00-11:30 | Laboratory |
Lab 1 (group 2/2, M-Z): Getting started with Node.js
|
- | Luigi De Russis |
2020-03-23 | Lecture 07 | Structure of a Web Page: HTML | ![]() |
Fulvio Corno | |
2020-03-23 | Lecture 08-P1 | Structure of a Web Page: CSS (part 1: the language) | ![]() |
Fulvio Corno | |
2020-03-24 | Lecture 08-P2 | Structure of a Web Page: CSS (part 2: layout and Bootstrap) GitHub repository html-css-examples |
![]() |
Fulvio Corno | |
2020-03-26 | 10:00-11:30 | Video Chat 03 | Discussion and Q&A over the previous lessons | ![]() |
Fulvio Corno |
2020-03-27 | 08:30-10:00 | Laboratory |
Lab 2 (group 2/2, M-Z): Getting started with HTML and CSS
|
- | Alberto Monge Roffarello |
2020-03-27 | 10:00-11:30 | Laboratory |
Lab 2 (group 1/2, A-L): Getting started with HTML and CSS
|
- | Luigi De Russis |
2020-03-31 | Lecture 09-P1 | JavaScript in the Browser: Environment, DOM | ![]() |
Fulvio Corno | |
2020-03-31 | Lecture 09-P2 | JavaScript in the Browser: Events - GitHub repository js-dom-examples |
![]() |
Fulvio Corno | |
2020-04-01 | Lecture 10 | JavaScript: Asynchronous Programming | ![]() |
Fulvio Corno | |
2020-04-02 | 10:00-11:30 | Video Chat 04 | Discussion and Q&A over the previous lessons | ![]() |
Fulvio Corno |
2020-04-03 | 08:30-10:00 | Laboratory |
Lab 3 (group 1/2, A-L): JavaScript in the Browser
|
-- | Alberto Monge Roffarello |
2020-04-03 | 10:00-11:30 | Laboratory |
Lab 3 (group 2/2, M-Z): JavaScript in the Browser
|
-- | Luigi De Russis |
Easter Vacations (no classes or lab on 9-10 April) | |||||
2020-04-09 | Lecture 11 | JavaScript: Functional Programming | ![]() |
Fulvio Corno | |
2020-04*11 | Lecture 12-P1, 12-P2 | JavaScript: Prototypes, Classes, Methods | ![]() ![]() |
Fulvio Corno | |
2020-04-09 | Lecture 13 | JavaScript: the 'this' keyword | ![]() |
Fulvio Corno | |
2020-04-09 | Lecture 14 | HTML5 Forms | ![]() |
Fulvio Corno | |
2020-04-16 | 10:00-11:30 | Video Chat 05 | Discussion and Q&A over the previous lessons | ![]() |
Fulvio Corno |
2020-04-17 | 08:30-10:00 | Laboratory |
Lab 4 (group 2/2, M-Z): More JavaScript in the Browser
|
-- | Alberto Monge Roffarello |
2020-04-17 | 10:00-11:30 | Laboratory |
Lab 4 (group 1/2, A-L): More JavaScript in the Browser
|
-- | Luigi De Russis |
2020-04-20 | Lecture 15 | HTTP | ![]() |
Fulvio Corno | |
2020-04-20 | Lecture 16 | The Express Web server - GitHub repository express-ex0 |
![]() |
Fulvio Corno | |
2020-04-20 | Lecture 17 | REST API - GitHub repository express-ex0 |
![]() |
Fulvio Corno | |
2020-04-21 | Lecture 18 (exercise) | Example client-server application (server side) - GitHub repository ex-express-fetch |
![]() |
Fulvio Corno | |
2020-04-23 | 10:00-11:30 | Video Chat 06 | Discussion and Q&A over the previous lessons | ![]() |
Fulvio Corno |
2020-04-24 | 08:30-10:00 | Laboratory |
Lab 5 (group 1/2, A-L): REST with Express
|
-- | Alberto Monge Roffarello |
2020-04-24 | 10:00-11:30 | Laboratory |
Lab 5 (group 2/2, M-Z): REST with Express
|
-- | Luigi De Russis |
2020-04-27 | Lecture 19 | JavaScript Fetch API | ![]() |
Fulvio Corno | |
2020-04-27 | Lecture 20 (exercise) | Example client-server application (server side) - GitHub repository ex-express-fetch |
![]() |
Fulvio Corno | |
2020-04-28 | Lecture 21 | Introduction to React - GitHub repository react-byhand - GitHub repository react-first |
![]() |
Fulvio Corno | |
2020-04-30 | 08:30-10:00 | Laboratory |
Lab 6 (group 2/2, M-Z): Interacting with REST API
|
-- | Alberto Monge Roffarello |
2020-04-30 | 10:00-11:30 | Laboratory |
Lab 6 (group 1/2, A-L): Interacting with REST API
|
-- | Luigi De Russis |
2020-05-01 | Holiday (May 1st) - the lab is anticipated to the day before, April 30 | ||||
2020-05-04 | Lecture 22-P1, 22-P2 | React Elements, JSX, Components - GitHub repository for the GameButtons example |
![]() ![]() |
Fulvio Corno | |
2020-05-06 | Lecture 23 (exercise) | Example React Applications: Creating the components - GitHub repository for the React Scores example |
![]() |
Fulvio Corno | |
2020-05-07 | 10:00-11:30 | Video Chat 07 | Discussion and Q&A over the previous lessons | ![]() |
Fulvio Corno |
2020-05-08 | 08:30-10:00 | Laboratory |
Lab 7 (group 1/2, A-L): Getting started with React
|
-- | Alberto Monge Roffarello |
2020-05-08 | 10:00-11:30 | Laboratory |
Lab 7 (group 2/2, M-Z): Getting started with React
|
-- | Luigi De Russis |
2020-05-11 | Lecture 24-P1, 24-P2 | React Context, Life Cycle and Forms | ![]() ![]() |
Fulvio Corno | |
Lecture 25 (exercise) | Example React Applications: State and Forms - GitHub repository for the React Scores example (with_state branch) |
![]() |
Fulvio Corno | ||
2020-05-14 | 10:00-11:30 | Video Chat 08 | Discussion and Q&A over the previous lessons | ![]() |
Fulvio Corno |
2020-05-15 | 08:30-10:00 | Laboratory |
Lab 8 (group 2/2, M-Z): React: State and Life Cycle
|
-- | Alberto Monge Roffarello |
2020-05-15 | 10:00-11:30 | Laboratory |
Lab 8 (group 1/2, A-L): React: State and Life Cycle
|
-- | Luigi De Russis |
Lecture 26 | Client-Server interactions in React | ![]() |
Fulvio Corno | ||
Lecture 27 | CORS - Cross Origin Resource Sharing | ![]() |
Fulvio Corno | ||
(exercise) | Example React Applications: Integrating the server side - GitHub Repository for Example React Client-Server Application |
-- | Fulvio Corno | ||
2020-05-21 | 08:30-10:00 | Laboratory |
Lab 9 (group 1/2, A-L): React meets REST API
|
-- | Alberto Monge Roffarello |
2020-05-21 | 10:00-11:30 | Laboratory |
Lab 9 (group 2/2, M-Z): React meets REST API
|
-- | Luigi De Russis |
2020-05-21 | 16:00 | Video Chat 09 | Discussion and Q&A over the previous lessons | N/A | Fulvio Corno |
Lecture 28 | React Router | ![]() |
Fulvio Corno | ||
Lecture 29 | Authentication with JWT | ![]() |
Fulvio Corno | ||
2020-05-28 | 10:00-11:30 | Video Chat 10 | Discussion and Q&A over the previous lessons | ![]() |
Fulvio Corno |
2020-05-29 | 08:30-10:00 | Laboratory | Lab 10 - Part 1 (group 2/2, M-Z): The Task Manager App - The End | -- | Alberto Monge Roffarello |
2020-05-29 | 10:00-11:30 | Laboratory | Lab 10 - Part 1 (group 1/2, A-L): The Task Manager App - The End | -- | Luigi De Russis |
Lecture 30 | React Hooks | ![]() |
Fulvio Corno | ||
2020-06-04 | 10:00-11:30 | Video Chat 11 | Discussion and Q&A over the previous lessons | ![]() |
Fulvio Corno |
2020-06-05 | 08:30-11:30 | Laboratory |
Lab 10 - Part 2: The Task Manager App - The End.
|
-- | Alberto Monge Roffarello |
2020-06-09 | Exam preparation | Publication of the project assignment for the exam of 29/06/2020 | |||
2020-06-12 | 09:00-11:00 | Exam preparation | Discussion and Q&A over the exam assignment | ![]() |
Fulvio Corno Alberto Monge Roffarello |
2020-06-23 | Exam preparation | Publication of the project assignment for the exam of 13/07/2020 | |||
2020-06-30 | 09:00-11:00 | Exam preparation | Discussion and Q&A over the exam assignment | ![]() |
Fulvio Corno |
2020-08-20 | Exam preparation | files/courses/01TXYOV/2020/exam/WA1_exam3_scheduling.pdf | |||
2020-08-26 | 10:00-11:00 | Exam preparation | Discussion and Q&A over the exam assignment | ![]() |
Fulvio Corno |
Resources
Lecture slides
- Lecture slides are linked in the Schedule section, according to the lecture when they were first explained
- For easier download (and continuous update), all slides are also available from the course materials on GitHub
Video lectures
- Screencasts of the video lectures are available on the Portale della Didattica, on YouTube
- Lecture videos may also be downloaded with BitTorrent: https://academictorrents.com/details/ffdcaa1b2bca554612545c0394318d60e6b3796b
Labs
The text of the labs will be published some days in advance on GitHub. You are assumed to try and solve the exercise on your own. On the lab dates (Friday morning), you may connect via Zoom to get help and speak with the teachers.
Exam
Exam Assignments
- Exam #1: Car Rental (deadline: 28/06/2020 23:59)
- Video-chat for clarifications: Friday 12/06 h 9:00-11:00
- Slack channel for discussion and Q&A: #exam1-car-rental
- On-line document with the answers to questions raised on Slack
- Link for project skeleton and exam submission (on GitHub Classroom)
- Exam #2: Kanban (deadline: 12/07/2020 23:59)
- Video-chat for clarifications: Friday 12/06 h 9:00-11:00
- Slack channel for discussion and Q&A: #exam2-kanban
- On-line document with the answers to questions raised on Slack
- Link for project skeleton and exam submission (on GitHub Classroom)
- Exam #3: Scheduling (deadline: 09/09/2020 23:59)
- Video-chat for clarifications: Wednesday 26/08 h 10:00 - see video recording
- Slack channel for discussion and Q&A: #exam3-scheduling
- On-line document with the answers to questions raised on Slack
- Link for project skeleton and exam submission (on GitHub Classroom)
- Exam #4: Pizza (deadline: 20/01/2021 23:59)
- Video-chat for clarifications: Thusday 07/01/2021 h. 15:00 see video recording
- Slack channel for discussion and Q&A: #exam4-pizza
- On-line document with the answers to questions raised on Slack
- Link for project skeleton and exam submission (on GitHub Classroom)
Additional information:
- Instructions for submission using GitHub Classroom
- FAQ over the exam rules - updated 2020-06-11
Exam Rules
The exam of Web Applications I (WA1), due to the COVID-19 emergency, will take place from remote as described in the following.
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 (unclearly or ambiguously expressed requirements etc.). 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. Minimum criteria will be specified in the exam text.
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 PC 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 PC which will share the screen with the student.
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 8 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 and the score assigned at the end of the oral exam. 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.
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.