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

Short link: http://bit.ly/polito-wa1

Latest news

  • 2021-02-16: Welcome to the 2021edition 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, Juan Pablo Sáenz, Luca Mannella
Official link: Portale della Didattica
GitHub Repository: https://github.com/polito-WA1-AW1-2021
Video lectures: YouTube Playlist
Slack workspace: WA1-2021

Class Hours

Day Hour Location Type Note
Thursday 08:30-10:00 Virtual Class  
Thursday 10:00-11:30 Virtual Class  
Monday 13:00-14:30 Virtual Lab starts on March 15
Monday 14:30-16:00 Virtual Lab starts on March 15
Monday 16:00-17:30 Virtual Lab starts on March 15

Schedule

icons8 github 48Reminder: slides are also available on GitHub (always update to the latest version, just clone the repository and 'pull' frequently)

DateTimeTypeTopicsResourcesVideoTeacher
2020-03-01 14:30-16:00 Lecture 01 Introduction to the course icons8 pdf 48 Screencast Fulvio Corno
2020-03-01 16:00-17:30 Lecture 02 JavaScript basics icons8 pdf 48 Screencast Fulvio Corno
2020-03-04 08:30-10:00 Lecture 03 JavaScript Objects icons8 pdf 48 Screencast Fulvio Corno
2020-03-04 10:00-11:30 Lecture 04 JavaScript Functions icons8 pdf 48 Screencast Fulvio Corno
2020-03-08 14:30-16:00 Lecture 05 Callbacks and Functional Programming icons8 pdf 48 Screencast Fulvio Corno
2020-03-08 16:00-17:30 Lecture 06 Asynchronous Programming and SQLite icons8 github 48 Screencast Fulvio Corno
2020-03-11 08:30-10:00 Lecture 07 Promises, async/await.   Screencast Fulvio Corno
2020-03-11 10:00-11:30 Lecture 08 Asynchronous JavaScript Exercises icons8 pdf 48icons8 github 48 Screencast Fulvio Corno
    Lecture 09 Web Architectures icons8 pdf 48 Screencast Fulvio Corno
2020-03-15 13:00-14:30 Lab 01 online Getting started with Node.js  icons8 pdf 48icons8 github 48 -- Alberto Monge Roffarello
2020-03-15 14:30-16:00 Lab 01 online Getting started with Node.js  icons8 pdf 48icons8 github 48 -- Juan Pablo Sáenz
2020-03-15 16:00-17:30 Lab 01 online Getting started with Node.js  icons8 pdf 48icons8 github 48 -- Luca Mannella
2020-03-18 08:30-10:00 Lecture 10 Introduction to HTML and CSS icons8 pdf 48  Screencast Fulvio Corno
2020-03-18 10:00-11:30 Lecture 11 Modern CSS and Bootstrap icons8 pdf 48 icons8 github 48 Screencast Fulvio Corno
2020-03-22 13:00-14:30 Lab 02 online  Getting started with HTML and CSS icons8 pdf 48 icons8 github 48 -- Alberto Monge Roffarello
2020-03-22 14:30-16:00 Lab 02 online  Getting started with HTML and CSS icons8 pdf 48 icons8 github 48 -- Juan Pablo Sáenz
2020-03-22 16:00-17:30 Lab 02 online Getting started with HTML and CSS icons8 pdf 48icons8 github 48 -- Luca Mannella
2020-03-25 08:30-10:00 Lecture 12 JavaScript in the Browser (loading, DOM manipulation) icons8 pdf 48 Screencast Fulvio Corno
2020-03-25 10:00-11:30 Lecture 13 JavaScript in the Browser (events, forms)   Screencast Fulvio Corno
    Lecture 14 The 'this' keyword icons8 pdf 48 Screencast Fulvio Corno
2020-03-29 13:00-14:30 Lab 03 online JS in the Browser icons8 pdf 48icons8 github 48   Alberto Monge Roffarello
2020-03-29 14:30-16:00 Lab 03 online JS in the Browser icons8 pdf 48icons8 github 48   Juan Pablo Sáenz
2020-03-29 16:00-17:30 Lab 03 online JS in the Browser icons8 pdf 48icons8 github 48   Luca Mannella
      Easter Break      
2020-04-08 08:30-10:00 Lecture 15 Introduction to React icons8 pdf 48icons8 github 48 Screencast Fulvio Corno
2020-04-08 10:00-11:30 Lecture 16 React Elements, JSX, Components icons8 pdf 48 Screencast Fulvio Corno
2020-04-12 13:00-14:30 BigLab 1A online BigLab 1 (part A): Getting started with React icons8 pdf 48    Juan Pablo Sáenz
2020-04-12 14:30-16:00 BigLab 1A online BigLab 1 (part A): Getting started with React icons8 pdf 48   Juan Pablo Sáenz
2020-04-12 16:00-17:30 BigLab 1A online BigLab 1 (part A): Getting started with React icons8 pdf 48   Luca Mannella
2020-04-15 08:30-10:00 Lecture 17 React Hooks.
Components and State.
icons8 pdf 48icons8 pdf 48icons8 github 48icons8 github 48
Screencast Fulvio Corno
2020-04-15 10:00-11:30 Lecture 18 Exercise on Components, props, and state icons8 github 48 Screencast Fulvio Corno
2020-04-19 13:00-14:30 BigLab 1B online

BigLab 1 (part B): React Components' State

icons8 pdf 48   Alberto Monge Roffarello
2020-04-19 14:30-16:00 BigLab 1B online

BigLab 1 (part B): React Components' State

icons8 pdf 48   Alberto Monge Roffarello
2020-04-19 14:30-16:00 BigLab 1B LABINF BigLab 1 (part B): React Components' State icons8 pdf 48   Juan Pablo Sáenz
2020-04-19 16:00-17:30 BigLab 1B online

BigLab 1 (part B): React Components' State

icons8 pdf 48   Luca Mannella
2020-04-22 08:30-10:00 Lecture 19 React Forms icons8 pdf 48 Screencast Fulvio Corno
2020-04-22 10:00-11:30 Lecture 20 React Context icons8 pdf 48 Screencast Fulvio Corno
2020-04-26 13:00-14:30 BigLab 1C online

BigLab 1 (part C): Filters & Forms

icons8 pdf 48   Alberto Monge Roffarello
2020-04-26 14:30-16:00 BigLab 1C online

BigLab 1 (part C): Filters & Forms

icons8 pdf 48   Alberto Monge Roffarello
2020-04-26 14:30-16:00 BigLab 1C LABINF BigLab 1 (part C): Filters & Forms icons8 pdf 48   Juan Pablo Sáenz
2020-04-26 16:00-17:30 BigLab 1C online

BigLab 1 (part C): Filters & Forms

icons8 pdf 48   Luca Mannella
2020-04-29 08:30-10:00 Lecture 21 React Router icons8 pdf 48icons8 github 48
Screencast Fulvio Corno
2020-04-29 10:00-11:30 Lecture 22 Javascript Prototypes, Classes, Modules icons8 pdf 48 Screencast Fulvio Corno
2020-05-03 13:00-14:30 BigLab 1D online BigLab 1 (part D): React Routes icons8 pdf 48   Alberto Monge Roffarello
2020-05-03 14:30-16:00 BigLab 1D online BigLab 1 (part D): React Routes icons8 pdf 48   Juan Pablo Sáenz
2020-05-03 16:00-17:30 BigLab 1D online BigLab 1 (part D): React Routes icons8 pdf 48   Luca Mannella
2020-05-06 08:30-10:00 Lecture 23 Express icons8 pdf 48 Screencast Fulvio Corno
2020-05-06 10:00-11:30 Lecture 24 HTTP APIs icons8 pdf 48 Screencast Fulvio Corno
2020-05-10 13:00-14:30 BigLab 2A online

BigLab 2 (part A): APIs with Express

icons8 pdf 48    Alberto Monge Roffarello
2020-05-10 14:30-16:00 BigLab 2A online

BigLab 2 (part A): APIs with Express

icons8 pdf 48    Juan Pablo Sáenz
2020-05-10 16:00-17:30 BigLab 2A online

BigLab 2 (part A): APIs with Express

icons8 pdf 48   Luca Mannella
2020-05-13 08:30-10:00 Lecture 25 Fetch API, Client-server integration icons8 pdf 48icons8 pdf 48 Screencast Fulvio Corno
2020-05-13 10:00-11:30 Lecture 26 Component LifeCycle, useEffect icons8 pdf 48icons8 github 48 Screencast Fulvio Corno
2020-05-17 13:00-14:30 BigLab 2B online

BigLab 2 (part B): APIs Integration

 icons8 pdf 48   Alberto Monge Roffarello 
2020-05-17 14:30-16:00 BigLab 2B online

BigLab 2 (part B): APIs Integration

 icons8 pdf 48    Juan Pablo Sáenz 
2020-05-17 16:00-17:30 BigLab 2B online

BigLab 2 (part B): APIs Integration

icons8 pdf 48    Luca Mannella 
2020-05-20 08:30-10:00 Lecture API calls in React icons8 pdf 48 Screencast Fulvio Corno
2020-05-20 10:00-11:30 Lecture Exercise on of useEffects and API calls icons8 github 48 Screencast Fulvio Corno
2020-05-24   BigLab 2C online

BigLab 2 (part C): Complete APIs Integration

icons8 pdf 48    Alberto Monge Roffarello
2020-05-24   BigLab 2C online

BigLab 2 (part C): Complete APIs Integration

icons8 pdf 48     Juan Pablo Sáenz
2020-05-24   BigLab 2C online

BigLab 2 (part C): Complete APIs Integration

 icons8 pdf 48     Luca Mannella 
2020-05-27   Lecture Info about the esam
Authentication and Passport.JS (part 1)
icons8 pdf 48 ScreencastScreencast Fulvio Corno
2020-05-27   Lecture Authentication and Passport.JS (part 2)   Screencast Fulvio Corno
2020-05-31   BigLab 2D online

BigLab 2 (part D): Authentication

icons8 pdf 48    Alberto Monge Roffarello
2020-05-31   BigLab 2D online

BigLab 2 (part D): Authentication

icons8 pdf 48    Juan Pablo Sáenz
2020-05-31   BigLab 2D online

BigLab 2 (part D): Authentication

 icons8 pdf 48   Luca Mannella 
2020-06-03 -- -- --      
2020-06-03 10:00-11:30 Seminar Seminar by Consoft Sistemi SPA (in Italian)   link on Slack  
2020-06-07   Lab online

Final Lab: Deploying React+Express applications in Heroku

icons8 pdf 48    Alberto Monge Roffarello
2020-06-07   Lab online

Final Lab: Deploying React+Express applications in Heroku

icons8 pdf 48    Juan Pablo Sáenz
2020-06-07   Lab online

Final Lab: Deploying React+Express applications in Heroku

 icons8 pdf 48   Luca Mannella 
2020-06-09     Publication of the Project Text for Exam # 1      
2020-06-10 -- -- --      
2020-06-10 10:00-11:30 Q&A Q&A about the text of Exam #1   Screencast Fulvio Corno
2020-06-28 14:30-15:30 Q&A Q&A about the text of Exam #2   Screencast Fulvio Corno
2020-08-23 10:15-10:45 Q&A Q&A about the text of Exam #3   Screencast Fulvio Corno

 

 


Resources

Lecture slides

Labs

Software tools

On-line documentation

 


Exam

Exam Assignments

 

 

 

Exams from previous years

Year 2019/2020

Additional information:

Exam Rules

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.