Caricamento in corso...
Applicazioni Web I
01UDFOV
A.A. 2024/25
Lingua dell'insegnamento
Italiano
Corsi di studio
Corso di Laurea Magistrale in Ingegneria Informatica (Computer Engineering) - Torino
Organizzazione dell'insegnamento
| Didattica | Ore |
|---|---|
| Lezioni | 21 |
| Esercitazioni in aula | 21 |
| Esercitazioni in laboratorio | 18 |
Docenti
| Docente | Qualifica | Settore | h.Lez | h.Es | h.Lab | h.Tut | Anni incarico |
|---|---|---|---|---|---|---|---|
| De Russis Luigi | Professore Associato | IINF-05/A | 21 | 21 | 0 | 0 | 3 |
Collaboratori
Didattica
| SSD | CFU | Attivita' formative | Ambiti disciplinari | ING-INF/05 | 6 | C - Affini o integrative | Attività formative affini o integrative |
|---|
2024/25
L'insegnamento, erogato in italiano nel secondo semestre del primo anno per la Laurea Magistrale in Ingegneria Informatica, presenta le principali tecniche per la realizzazione di applicazioni web, concentrandosi in particolare sulla programmazione front-end, utilizzando il linguaggio JavaScript e un framework di programmazione lato client.
Saranno trattati i principali paradigmi di programmazione necessari per realizzare il front-end di una moderna applicazione web, approfondendo le problematiche a livello di codice JavaScript e studiando gli approcci utilizzati da un framework ampiamente utilizzato.
L'insegnamento permetterà allo studente/ssa di acquisire le competenze di base necessarie ad affrontare le principali scelte progettuali nell'ambito degli argomenti svolti.
The course, taught in Italian in the second semester of the first year of the Master of Science in Computer Engineering, aims at presenting the main techniques for creating distributed web applications, focusing in particular on the front-end programming, using the JavaScript language and a client-side programming framework.
The main programming paradigms useful for the needs of the front-end of a modern web application will be considered, both by analyzing their impact in term of native JavaScript code and by studying the approaches provided by a dominant framework.
The topics presentation will enable the student to gain the basic skill to manage the main design choices within the mentioned topics.
- Conoscere i principali aspetti delle ultime versioni di HTML, CSS e JavaScript.
- Aver acquisito la capacità di usare JavaScript in modo avanzato per la realizzazione di applicazioni web a livello di front-end.
- Conoscere le basi di un framework per la realizzazione di applicazioni web in JavaScript.
- Essere pienamente capaci di realizzare applicazioni web complete, in modalità "single page application", con l'utilizzo di un semplice backend come server API.
- Conoscere e riconoscere le principali problematiche di robustezza, sicurezza, interoperabilità e prestazioni delle applicazioni studiate e relative best practice.
Knowledge of the main aspects of HTML, CSS, Javascript
Ability to use a Javascript at an advanced level for creating web applications at the front-end level.
Basic knowledge of a framework for creating web applications in Javascript
Ability to create complete web applications, also in the ?single page application? modality, by using a simple back-end server.
Knowledge of the main issues regarding robustness, security, interoperability, usability and performance of the studied applications, and their applicable best practices.
- Capacità di programmazione in linguaggi procedurali e ad oggetti, e relative abilità di debugging.
- Conoscenza base di HTML e CSS.
- Conoscenza base delle architetture web e del protocollo HTTP.
- Conoscenze di tipo pratico di database relazionali e SQL.
Ability to program in procedural languages and object oriented languages, and corresponding debugging skills.
Basic knowledge of HTML, SQL and databases.
Basic knowledge of web architectures and of the HTTP protocol.
- Richiami di architetture web, HTML5, CSS.
- Layout complessi, framework CSS. Cenni di web design.
- JavaScript come linguaggio. Variabili e oggetti. Esecuzione nel browser e in Node.js.
- Interazione con un database SQLite in applicazioni Node.js.
- Gestione di form e di tabelle. DOM. Eventi. Callback. Closure.
- Web server e il framework Express.
- JSON. HTTP API. Programmazione asincrona (async/await, Promise, fetch).
- Single Page Applications. Programmazione reattiva. Introduzione a React.
- Applicazioni React. Web Componenti. JSX.
- Autenticazione e autorizzazione di API.
- Architettura di un'applicazione complessa. Routing di eventi. Gestione dello stato.
- Esempi di applicazioni.
Recall of web architectures, HTML5, CSS.
Complex layouts, CSS frameworks. Notions of web design.
Javascript as a language. Variables and objects. Execution in the browser and in nodejs.
Handling forms and tables. DOM. Events. Callbacks. Closures.
Ajax. JSON. REST. CRUD operations. Asynchronous programming (async/await, Promise, Fetch).
Single Page Applications. Reactive programming. Introduction to ReactJS.
React applications. Web Components. JSX.
Introduction to authentication and authorization.
Architecture of a complex application. Event routing. State management.
Deployment and publication of applications.
Application examples.
Le comunicazioni con i docenti, gli studenti e le studentesse avverranno tramite strumenti di messaggistica (per esempio, con un gruppo Telegram).
Le comunicazioni con i docenti e i partecipanti al corso avverranno tramite strumenti di messaggistica (per esempio, con un gruppo Telegram).
Oltre alle lezioni e alle esercitazioni svolte in aula (4 crediti), l'insegnamento include delle esercitazioni di laboratorio (2 crediti) sull'applicazione delle tecniche presentate in aula.
Circa il 60% delle ore in aula saranno dedicate a lezioni teoriche mentre il restante 40% sarà dedicato allo sviluppo di esercizi (un'applicazione web sarà costruita incrementalmente per illustrare i vari argomenti affrontati). Gli studenti e le studentesse sono invitate a seguire le ore in aula con il loro computer così da programmare insieme al docente. Gli esercizi svolti in classe saranno condivisi online subito dopo il loro svolgimento.
Tutte le lezioni e gli esercizi in aula saranno comunque video-registrati e resi disponibili online.
I laboratori consisteranno nell'applicazione delle tecniche apprese in aula, costruendo in maniera incrementale un'applicazione web di complessità crescente. Durante i laboratori gli studenti e le studentesse discuteranno con i docenti le loro soluzioni agli esercizi assegnati. Il materiale relativo ai laboratori sarà gestito attraverso una piattaforma basata su Git (per esempio, GitHub). I laboratori si svolgeranno in aule normali e i partecipanti dovranno lavorare sul proprio computer.
In addition to classes, that include both lectures and exercises in classroom (4 credits), the course includes laboratory exercises (2 credits) on the application of the presented techniques.
The laboratories will consist in the application of the techniques learnt during the classes, by incrementally building a web application of increasing complexity. During the labs the students will discuss with the teachers on their solutions to the assigned exercises. The lab material will be managed through a Git-based platform.
Il docente fornirà il materiale (slide e link a risorse disponibili online) in una pagina dedicata sul sito: https://elite.polito.it.
Ulteriori risorse sono liberamente disponibili su web e saranno richiamate durante le lezioni (https://developer.mozilla.org, https://react.dev, https://javascript.info, ecc).
Libri di testo suggeriti per approfondimenti personali:
- M. Haverbeke, Eloquent Javascript (https://eloquentjavascript.net)
- A. Accomazzo, A. Lerner, N. Murray, C. Allsopp, D. Guttman, T. McGinnis, Fullstack React, 2019
The teacher will provide the material (copy of slides and links to on-line resources) on the website of the course.
Many useful resources are also freely available on the web (https://developer.mozilla.org, https://reactjs.org/, https://javascript.info/, etc).
Some suggested textbooks for personal in-depth study:
M. Haverbeke, Eloquent Javascript (https://eloquentjavascript.net/)
A. Accomazzo, A. Lerner, N. Murray, C. Allsopp, D. Guttman, T. McGinnis, Fullstack React, 2019
Slides; Esercizi; Esercizi risolti; Esercitazioni di laboratorio; Esercitazioni di laboratorio risolte; Video lezioni dell’anno corrente; Video lezioni tratte da anni precedenti;
Lecture slides; Exercises; Exercise with solutions ; Lab exercises; Lab exercises with solutions; Video lectures (current year); Video lectures (previous years);
E' possibile sostenere l’esame in anticipo rispetto all’acquisizione della frequenza
You can take this exam before attending the course
Modalità di esame: Prova orale obbligatoria; Elaborato progettuale individuale;
Exam: Compulsory oral exam; Individual project;
...
L'esame consiste nella verifica delle conoscenze teoriche e delle abilità pratiche descritte nei campi precedenti. Tale verifica sarà effettuata tramite lo sviluppo di un progetto individuale seguito da una discussione orale.
Il progetto consisterà nella creazione di un'applicazione web utilizzando le conoscenze acquisite durante l'insegnamento. Per ogni sessione di esame, le specifiche del progetto saranno assegnate 20 giorni prima la data dell'esame stesso. Solo gli studenti che invieranno la propria soluzione prima della scadenza saranno ammessi alla discussione orale. L'intero processo di assegnazione del progetto, sviluppo e consegna finale sarà gestita dalla piattaforma GitHub.
L'applicazione web consegnata sarà valutata dai docenti durante la prova orale, verificando le funzionalità implementate e le tecniche di programmazione adottate rispetto alle specifiche ricevute. La conoscenza dettagliata del codice sorgente consegnato sarà verificata durante l'esame orale, insieme all'abilità di discutere il progetto alla luce degli argomenti trattati nell'insegnamento stesso. La prova orale avrà una durata prevista di 20-30 minuti per progetto e si svolgerà in un'aula o in un laboratorio.
La valutazione sarà espressa su una scala da 0 a 30, con il progetto che varrà fino a 26 punti e la prova orale fino a 4. Fino a 2 punti aggiuntivi saranno assegnati ai progetti che dimostreranno una particolare qualità nonché precisione e ricchezza delle risposte durante l’orale. Grazie a questi ulteriori punti, sarà possibile raggiungere una valutazione pari a 30L.
Gli studenti e le studentesse con disabilità o con Disturbi Specifici di Apprendimento (DSA), oltre alla segnalazione tramite procedura informatizzata, sono invitati a comunicare anche direttamente al/la docente titolare dell'insegnamento, con un preavviso non inferiore ad una settimana dall'avvio della sessione d'esame, gli strumenti compensativi concordati con l'Unità Special Needs, al fine di permettere al/la docente la declinazione più idonea in riferimento alla specifica tipologia di esame.
Exam: Compulsory oral exam; Individual project;
Exam modality: mandatory oral colloquium to discuss the individual project.
The exam consists in the verification of the above described expected knowledge and practical skills, through a practical test, followed by an oral discussion. The test consists in creating a web application using the knowledge gained in the course.
For the test, an exercise will be assigned about 3 weeks in advance of each exam date. Only students who submit their solution before the deadline are admitted to the oral test.
The web application is evaluated by the teacher during the oral session, by verifying the functionality of the web application, the adopted programming techniques, according to a checklist that depends on the test. The detailed knowledge of the submitted source code by the student is also checked, with his ability to discuss the project in light of the course topics.
In addition to the message sent by the online system, students with disabilities or Specific Learning Disorders (SLD) are invited to directly inform the professor in charge of the course about the special arrangements for the exam that have been agreed with the Special Needs Unit. The professor has to be informed at least one week before the beginning of the examination session in order to provide students with the most suitable arrangements for each specific type of exam.