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.
| Title: | Web Applications I |
| Credits: | 6 credits |
| Alphabetic division: | Course 2 - surnames JZ-ZZ |
| Year: | 1st year M.S. Computer Engineering |
| Semester | 2nd semester (March-June) |
| Language: | English |
| Main teacher: | Luigi De Russis |
| Other teachers: | Luca Mannella |
| Official link: | Portale della Didattica |
| GitHub organization: | https://github.com/polito-WA1-AW1-2022 |
| Videolectures: | YouTube Playlist and Portale della Didattica |
| Slack workspace: | wa1-2022-kz |
Class hours
See the Schedule section for detailed information.
| Day | Hour | Location | Type | Note |
|---|---|---|---|---|
| Tuesday | 08:30-10:00 | Room 9i | Class | |
| Tuesday | 10:00-11:30 | Room 9i | Class | |
| Thursday | 08:30-10:00 | Room 1i | Lab (group I) | From week 2 |
| Thursday | 10:00-11:30 | Room 1i | Lab (group II) | From week 2 |
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 | 08:30-10:00 |  |
Luigi De Russis | |
| 01/03/2022 | Lecture | 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: |
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). |
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 | 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 (cont'd) | 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: StudyPlan [PDF version] (deadline 2022-06-22 at 23:59)
- We solicit comments on the document until Friday June 10.
- Slack channel dedicated to the exam: #exam1-study-plan.
- Link for project skeleton and exam submission (on GitHub Classroom).
- Exam 2: SolveMyRiddle (deadline 2022-07-14 at 23:59)
- In case of doubts or questions, feel free to comment on the document linked above - the final version will be published on June 30.
- Slack channel dedicated to the exam: #exam2-riddles.
- Link for project skeleton and exam submission (on GitHub Classroom).
- Exam 3: Categories (deadline 2022-09-01 at 23:59)
- In case of doubts or questions, add a comment in the document linked above - the final version will be published on August 20.
- Slack channel dedicated to the exam: #exam3-categories.
- Link for project skeleton and exam submission (on GitHub Classroom).
Past exams: available on the 2020/2021 webpage of the English course.
Exam Rules
The Web Applications I (WA1)/Applicazioni Web I (AW1) exam will be as described in the following.
The exam consists of a web application project to be developed according to the specifications published 20 days in advance of each official exam date ("data appello"), plus an oral discussion of such a project. For each official date, a new assignment will have to be developed.
The web application project must be developed during the 20 days by each student INDIVIDUALLY. During the oral exam, each student should be able to prove that they were able to develop the project in full autonomy by showing complete and full knowledge of every part of their submitted solution.
The final version of the project must be submitted before the deadline, according to the provided technical instructions.
If such instructions are not carefully followed, the exam will be considered failed. This includes, for instance, if the project cannot be run and tested as-is by the teacher with the required configuration.
A few days after publishing the assignment, the teachers will be available to discuss potential doubts about it (e.g., unclear or ambiguous requirements). Any interested student will be able to ask questions asynchronously. After such a clarification phase, a “final” version of the text will be published.
The submission deadline for the project is 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. Depending on the number of submissions, such a process might take several days. Projects that do not meet minimum criteria will be evaluated as insufficient, with consequent exam failure, 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, and 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 a time slot for the discussion, that will take place in person. Some form of identification (ID card or passport, etc.) is required. The oral exam aims to ensure that each student has developed the web application by themselves and to evaluate how much the student can explain the exact behavior of the code. The source code will be opened on the teacher's computer. We will follow the same procedure if the oral exam is done remotely (for those who are duly authorized, only).
Therefore, during the oral exam, the student must be able to explain every aspect of the project. This includes, but is not limited to, the reasons behind the architectural choices for their application, how any specific fragment of code works, why it was implemented in that way, 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 codebase, readiness, and clarity in the replies.
There will be 24 marks assigned to the project and 6 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 exam 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). Please, also notice that the score of the BigLabs will last for an entire year (i.e., until the new edition of the course starts).
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 failed, and the students will be notified about the situation.
RECOMMENDATIONS
During the oral exam, each student 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, we recommended that the student carefully rehearse and review the code shortly before the oral exam.
As in any programming assignment, it is possible to search online for suggestions and examples about solving specific programming issues during the development phase, which can be incorporated into 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.).
In the solution, it is recommended to employ all the good practices and sound programming techniques explained during the lectures. Substantial deviations from such patterns will have to be duly justified during the oral exam. If not adequately justified, they will cause a reduction of the final mark and potentially 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 functions such as date/time handling, presentation aspects, predefined components (e.g., calendars), and similar items are allowed.
If React requires certain programming patterns, those must be followed. For example, it is NOT allowed to use JQuery or JS directly to modify DOM content within the browser. It is not allowed to use server-side technologies other than 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.