Official website of the course "Web Applications I" (code 01TXYOV, course 2) offered to students in the 1st year of the M.S. in Computer Engineering. Academic Year 2021/2022.

Short link to this page: https://bit.ly/polito-wa1-ii

Basic info

Course material (lectures and labs) is available in the Schedule section. Exam rules and past exams are available in the dedicated section.

Class hours

See the Schedule section for detailed information.

Schedule

This section hosts the schedule and learning materials of all the lectures and labs, with topics and deadlines described for each of them. Please, consider the following information as a tentatitive preview of the course organization; it is provided only for helping students organize and plan, and is subject to change without notice.

All slides, examples, exercises, and any other material used in the classroom and in the lab will be also posted in a GitHub repository. Moreover, all lectures will be video-recorded and will be available on the Portale della Didattica, as well as here and in a dedicated YouTube playlist.

Date	Type	Details	Time	Video	Teacher
		Code developed during the lectures (on GitHub)
01/03/2022	Lecture	Introduction to the course	08:30-10:00		Luigi De Russis
01/03/2022	Lecture	JavaScript: introduction	10:00-11:30		Luigi De Russis
03/03/2022	Exercise	Exercises on JavaScript (on GitHub)	08:30-10:00		Luigi De Russis
03/03/2022	Lecture	JavaScript: objects and functions	10:00-11:30		Luigi De Russis
08/03/2022	Lecture	JavaScript: async programming	08:30-10:00		Luigi De Russis
08/03/2022	Exercise	Exercise with functional methods	10:00-11:30		Luigi De Russis
10/03/2022	Lab	Getting started with Node.js (group I)	08:30-10:00	-	Luca Mannella
10/03/2022	Lab	Getting started with Node.js (group II)	10:00-11:30	-	Luca Mannella
15/03/2022	Lecture	JavaScript: async programming (cont'd)	08:30-10:00		Luigi De Russis
15/03/2022	Exercise	Exercise on async programming	10:00-11:30		Luigi De Russis
17/03/2022	Lab	Async programming in Node (group I)	08:30-10:00	-	Luigi De Russis
17/03/2022	Lab	Async programming in Node (group II)	10:00-11:30	-	Luigi De Russis
	Reading	Introduction to Web Architectures, HTML, and CSS	Due on 21/03
22/03/2022	Exercise	Review of Reading 1 through examples: Web Architecture. Introduction to HTML. Introduction to CSS.	08:30-10:00		Luigi De Russis
22/03/2022	Lecture	Modern CSS and Bootstrap (cont'd). Exercise.	10:00-11:30		Luigi De Russis
24/03/2022	Lab	Getting started with HMTL and CSS (group I)	08:30-10:00	-	Luigi De Russis
24/03/2022	Lab	Getting started with HMTL and CSS (group II)	10:00-11:30	-	Luigi De Russis
29/03/2022	Lecture	JavaScript in the browser	08:30-10:00		Luigi De Russis
29/03/2022	Exercise	Exercise on JavaScript in the browser	10:00-11:30		Luigi De Russis
31/03/2022	Lab	JavaScript in the browser (group I)	08:30-10:00	-	Luca Mannella
31/03/2022	Lab	JavaScript in the browser (group II)	10:00-11:30	-	Luca Mannella
	Reading	The 'this' keyword in JavaScript	Due on 04/04
05/04/2022	Lecture	Introduction to React	08:30-10:00		Luigi De Russis
05/04/2022	Lecture	React: elements and JSX. Exercise.	10:00-11:30		Luigi De Russis
07/04/2022	Lab	BigLab 1A: Getting started with React (group I)	08:30-10:00	-	Luca Mannella
07/04/2022	Lab	BigLab 1A: Getting started with React (group II)	10:00-11:30	-	Luca Mannella
12/04/2022	Lecture	React: props and state. Exercise.	08:30-10:00		Luigi De Russis
12/04/2022	Lecture	Forms in React. Exercise.	10:00-11:30		Luigi De Russis
		Easter vacation
21/04/2022	Lab	BigLab 1B: React components' state (group I)	08:30-10:00	-	Luca Mannella
21/04/2022	Lab	BigLab 1B: React components' state (group II)	10:00-11:30	-	Luca Mannella
26/04/2022	Exercise	Exercise on Forms and State (cont'd).	08:30-10:00		Luigi De Russis
26/04/2022	Lecture	Exercise on Forms and State (cont'd). React Context	10:00-11:30		Luigi De Russis
28/04/2022	Lab	BigLab 1C: Forms & Film Manipulation (group I)	08:30-10:00	-	Luca Mannella
28/04/2022	Lab	BigLab 1C: Forms & Film Manipulation (group II)	10:00-11:30	-	Luca Mannella
	Reading	Modules in JavaScript	Due on 03/05
03/05/2022	Lecture	React Router	08:30-10:00		Luca Mannella
03/05/2022	Exercise	Exercise on React Router	10:00-11:30		Luca Mannella
05/05/2022	Lab	BigLab 1D: Editing Films & React Routes (group I)	08:30-10:00	-	Luca Mannella
05/05/2022	Lab	BigLab 1D: Editing Films & React Routes (group II)	10:00-11:30	-	Luca Mannella
08/05/2022	-	BigLab 1 Submission Deadline	EoD
10/05/2022	Lecture	Express HTTP APIs	08:30-10:00		Luigi De Russis
10/05/2022	Exercise	Exercise on Express	10:00-11:30		Luigi De Russis
12/05/2022	Lab	BigLab 2A: APIs with Express (group I)	08:30-10:00	-	Luca Mannella
12/05/2022	Lab	BigLab 2A: APIs with Express (group II)	10:00-11:30	-	Luca Mannella
	Reading	Client-server interaction in React	Due on 16/05
17/05/2022	Lecture	Fetch. Review of the reading.	08:30-10:00		Luigi De Russis
17/05/2022	Lecture	useEffect and LifeCycle	10:00-11:30		Luigi De Russis
19/05/2022	Lab	BigLab 2B: APIs Integration - retrieve films from the backend (group I)	08:30-10:00	-	Luca Mannella
19/05/2022	Lab	BigLab 2B: APIs Integration - retrieve films from the backend (group II)	10:00-11:30	-	Luca Mannella
24/05/2022	Lecture	LifeCycle: advanced aspects	08:30-10:00		Luigi De Russis
24/05/2022	Exercise	Exercise on useEffect and fetch	10:00-11:30		Luigi De Russis
26/05/2022	Lab	BigLab 2C: Complete APIs Integration - Add, Edit, and Delete (group I)	08:30-10:00	-	Luca Mannella
26/05/2022	Lab	BigLab 2C: Complete APIs Integration - Add, Edit, and Delete (group II)	10:00-11:30	-	Luca Mannella
31/05/2022	Lecture	Authentication with Passport.js	08:30-10:00		Luigi De Russis
31/05/2022	Exercise	Exercise on authentication	10:00-11:30		Luigi De Russis
02/06/2022	-	No class (holiday)	-	-	-
07/06/2022	-	No class	-	-	-
09/06/2022	Lab	BigLab 2D: Multi-user Application with Authentication (group I)	08:30-10:00	-	Luca Mannella
09/06/2022	Lab	BigLab 2D: Multi-user Application with Authentication (group II)	10:00-11:30	-	Luca Mannella
12/06/2022	-	BigLab 2 Submission Deadline	EoD

Video Lectures

Development Resources

This section lists the software applications and the libraries used in the course. In addition, it includes some additional resources that might be useful for the creation of web applications.

Software In Use

• Node.js 16.14 (LTS) and npm
• Visual Studio Code
• Google Chrome or Mozilla Firefox (at least Chrome 88+ or Firefox 85+)
• React Developer Tools (Chrome extension or Firefox extension)
• DB Browser for SQLite
• git

Additional libraries (e.g., React, Express, sqlite, ...) will be installed via npm.

Guides and documentation

• Essential documentation around web technologies and development: Mozilla Developer Network (MDN)
• React official website and (beta) documentation
• Bootstrap 5.1 and React Bootstrap
• To dive deep into JavaScript's secrets: You Don't Know JS Yet (2nd edition)
• The Modern JavaScript Tutorial

Other Useful Resources

• Simulate a mobile device from a desktop browser (e.g., with Chrome's Device Mode)
• Web design:
  • Google Fonts is a great resource of easy-to-use fonts, while FontPair may help you pair them.
  • Wunderstock and Unsplash are a good starting point to find Creative Commons photos.
  • Adobe Color is an interactive web app to help you choose nice color schemes

Exam and BigLabs

This section contains the exam projects, BigLabs results, and related deadlines. In addition, it includes the exam rules.

BigLabs

The course includes two BigLabs, to be done in group and to submit through GitHub Classroom. Each BigLab counts up to 1 point on the final exam score (see the exam rules below).

• Instructions for using GitHub Classroom
• BigLab 1: FilmLibrary in React
  
  • BigLab 1A: Getting started with React
  • BigLab 1B: React components' state
  • BigLab 1C: Forms & Film Manipulation
  • BigLab 1D: Editing Films & React Routes
• BigLab 2: Fullstack FilmLibrary
  
  • BigLab 2A: APIs with Express
  • BigLab 2B: APIs Integration - retrieve films from the backend
  • BigLab 2C: Complete APIs Integration - Add, Edit, and Delete
  • BigLab 2D: Multi-user Application with Authentication

Exam Assignments

• Exam 1
• Exam 2
• Exam 3

Additional information:

• FAQ over the exam rules
• Instructions for submission using GitHub Classroom

Past exams: available in the 2020/2021 webpage of the English course.

Exam Rules

The exam of Web Applications I (WA1) will take place 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 (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.