Aulas Teóricas e Práticas (ordem cronológica)
Aula Teórica 1: 2023-02-14
Por lapso relativo ao horário do docente, não foi lecionada...
Aula Prática 1 (Qua e Sex): 2023-02-15/17
Apresentação da UC e do seu método de funcionamento.
Introdução ao HTML: crash course sobre os conceitos fundamentais na construção duma página web.
Pequena tutorial sobre formatos textuais que iremos usar para assegurar a persistência de dados: CSV, JSON e XML.
Exercício: criação duma template HTML para consulta dum mapa virtual.
Exercício: criação duma script em Python que lê o dataset e povoa a template com a informação criando uma página estática com um índice de navegação.
Dataset do Mapa Virtual para os exercícios.
Desenvolvimentos da aula: template.html,
Script python geradora da página web,
Página final gerada.
Slides apresentados na aula: EngWeb2023 e HTML.
Ferramentas usadas: VS Code, e um browser.
Aula Prática 2: 2023-02-22/24
Exercícios de criação de servidores HTTP simples com nodejs:
Ferramentas usadas: VS Code, nodejs, curl e um browser.
TPC2: O TPC consiste na criação dum servidor das páginas web de cada uma das cidades do dataset do mapa.
Sugere-se a sua divisão nas tarefas seguintes:
- Processamento do dataset com uma script em Python, para desmembrar o dataset
criando uma página web para cada cidade: c1.html, c2.html, ..., cn.html, e uma página principal, de nome
"index.html", com um índice de cidades (poderá ser um índice a dois níveis: lista de distritos ordenada
alfabeticamente e para cada distrito uma sublista de cidades ordenadas alfabeticamente);
- A página de cada cidade deverá conter a informação da cidade e um bloco com as ligações a outras cidades,
cada ligação materializada num link que corresponde a nova chamada ao servidor como se descreve abaixo.
- Criar um servidor node que sirva os registos:
- localhost:porta/ (envia a página index.html a quem fez o pedido)
- localhost:porta/c1 (envia a página c1.html a quem fez o pedido)
- localhost:porta/c2 (envia a página c2.html a quem fez o pedido)
- localhost:porta/...
- Todos os links inseridos nas páginas HTML devem ser chamadas ao servidor, na forma "localhost:porta/...".
Aula Teórica 2 (Ter): 2023-02-28
Introdução à gestão de módulos e setup de aplicações com o npm (Node Package Manager).
Construção rápida de APIs de dados REST: o módulo json-server.
Desenvolvimentos da aula:
Aula Prática 3 (Qua:TP2): 2023-03-01
Construção de um serviço que recebe pedidos e responde com páginas HTML preenchidas
com dados recuperados do serviço desenvolvido na aula teórica.
Desenvolvimentos da aula:
TPC3: Completar o serviço iniciado na aula com o seguinte:
- Criar uma resposta ao pedido:
localhost:porta/
que responde
com uma página contendo uma lista de links para várias coisas:
- Lista de pessoas
- Lista de pessoas ordenada
- Distribuição por sexo: faz um pedido ao servidor que responde com uma
página onde se pode consultar numa tabela quantas pessoas de cada sexo estão
registadas, ao clicar no número de pessoas deverá fazer novo pedido ao
servidor que responderá com uma lista dessas pessoas;
- Distribuição por desporto: faz um pedido ao servidor que responde com uma
página onde se pode consultar numa tabela quantas pessoas que praticam cada desporto estão
registadas, ao clicar no número de pessoas deverá fazer novo pedido ao
servidor que responderá com uma lista dessas pessoas;
-
Top10 de profissões: faz um pedido ao servidor que responde com uma
página onde se pode consultar numa tabela as 10 profissões mais exercidas,
ao clicar no número de pessoas deverá fazer novo pedido ao
servidor que responderá com uma lista dessas pessoas.
-
Na página da lista de pessoas, ao clicar no nome duma pessoa deverá fazer um
pedido ao serviço que deverá responder com a página individual da pessoa com
a sua informação.
- Extra: Utilizem o dataset grande, ou juntem-nos todos obtendo um dataset com
16000 pessoas. Os resultados serão mais interessantes.
Aula Prática 3 (Sex:TP2): 2023-03-03
Construção de um serviço que recebe pedidos e responde com páginas HTML preenchidas
com dados recuperados do serviço desenvolvido na aula teórica.
Desenvolvimentos da aula:
TPC3: Completar o serviço iniciado na aula com o seguinte:
- Criar uma resposta ao pedido:
localhost:porta/
que responde
com uma página contendo uma lista de links para várias coisas:
- Lista de pessoas
- Lista de pessoas ordenada
- Distribuição por sexo: faz um pedido ao servidor que responde com uma
página onde se pode consultar numa tabela quantas pessoas de cada sexo estão
registadas, ao clicar no número de pessoas deverá fazer novo pedido ao
servidor que responderá com uma lista dessas pessoas;
- Distribuição por desporto: faz um pedido ao servidor que responde com uma
página onde se pode consultar numa tabela quantas pessoas que praticam cada desporto estão
registadas, ao clicar no número de pessoas deverá fazer novo pedido ao
servidor que responderá com uma lista dessas pessoas;
-
Top10 de profissões: faz um pedido ao servidor que responde com uma
página onde se pode consultar numa tabela as 10 profissões mais exercidas,
ao clicar no número de pessoas deverá fazer novo pedido ao
servidor que responderá com uma lista dessas pessoas.
-
Na página da lista de pessoas, ao clicar no nome duma pessoa deverá fazer um
pedido ao serviço que deverá responder com a página individual da pessoa com
a sua informação.
- Extra: Utilizem o dataset grande, ou juntem-nos todos obtendo um dataset com
16000 pessoas. Os resultados serão mais interessantes.
Aula Teórica 3 (Ter): 2023-03-07
As operações de CRUD no json-server..
Desenvolvimento duma aplicação para a gestão dos alunos da UC.
Desenvolvimentos da aula:
Aula Prática 4 (Qua:TP2): 2023-03-08
Construção de uma aplicação web para gestão dos alunos da UC.
Desenvolvimentos da aula:
TPC4: This week's Work Assignement has the following tasks:
- Create a Single Page Application (SPA) for toDo lists;
- Main page should have 3 areas: insert form, toDo task list and resolved task list;
- Task model is composed by: dateDued (deadline); who (who is supposed to do it) and what (task description);
- Add edit and delete operations to both lists;
- To implement edit and delete study howto make PUT and DELETE requests to json-server;
- When a task is submitted through the form, it will appear in toDO list;
- Add a button to each task in toDo list to change the status to solved (task should move form one list to
the other);
- Possible extras: maintain lists of task types, task descriptions, ..., that are preloaded into select components... make a nice interface, even responsive.
Aula Prática 4 (Sex:TP1): 2023-03-10
Construção de uma aplicação web para gestão dos alunos da UC.
Desenvolvimentos da aula:
TPC4: This week's Work Assignement has the following tasks:
- Create a Single Page Application (SPA) for toDo lists;
- Main page should have 3 areas: insert form, toDo task list and resolved task list;
- Task model is composed by: dateDued (deadline); who (who is supposed to do it) and what (task description);
- Add edit and delete operations to both lists;
- To implement edit and delete study howto make PUT and DELETE requests to json-server;
- When a task is submitted through the form, it will appear in toDO list;
- Add a button to each task in toDo list to change the status to solved (task should move form one list to
the other);
- Possible extras: maintain lists of task types, task descriptions, ..., that are preloaded into select components... make a nice interface, even responsive.
Aula Teórica 4 (Ter): 2023-03-14
Introdução à framework Express: os conceitos de pipeline de execução, roteadores, controladores e modelos.
Geração semi-automática de aplicações web com o Express..
Conversão da aplicação desenvolvida na última aula para esta nova estrutura.
Aula Prática 5 (Qua:TP2): 2023-03-15
Construção de uma aplicação web para gestão dos alunos da UC com a framework Express.
Desenvolvimentos da aula:
TPC5: This week's Work Assignement is the recreation of TPC4
with Express framework as practiced in classroom.
Aula Prática 5 (Sex:TP1): 2023-03-17
Construção de uma aplicação web para gestão dos alunos da UC com a framework Express.
Desenvolvimentos da aula:
TPC5: This week's Work Assignement is the recreation of TPC4
with Express framework as practiced in classroom.
Aula Teórica 5 (Ter): 2023-03-21
Introdução MongoDB: conceitos e linguagem de query.
Como ligar uma aplicação ao MongoDB: o ORM mongoose.
Pequenos exemplos de teste.
Aula Prática 6 (Qua:TP2): 2023-03-22
Substituição do json-server pelo MongoDB na Aplicação de Gestão de alunos.
Construção de uma API de dados para um modelo simples: registo de treinos desportivos.
Desenvolvimentos da aula:
TPC6: This week's Work Assignement has the following tasks:
- Get back to the persons dataset and analyse it;
- Create a REST API able to perform CRUD operations on it, and consider that the information
will be stored in MongoDB;
- Create a program in a language of your choice that reads tha dataset file and makes requests to
your API to load all records on MongoDB;
- As an extra, add the following operations to your classroom API (Treinos):
GET /treinos/modalidades
- It should return a JSON string with a list of all modalidades, without duplicates
and in alphabetical order;
GET /treinos/duracao
- It should return a number matching the total added duration of all records;
GET /treinos/atletas
- It should return a JSON string with a list of all athlete names, without duplicates
and in alphabetical order.
Aula Prática 6 (Sex:TP1): 2023-03-24
Substituição do json-server pelo MongoDB na Aplicação de Gestão de alunos.
Construção de uma API de dados para um modelo simples: registo de treinos desportivos.
Desenvolvimentos da aula:
TPC6: This week's Work Assignement has the following tasks:
- Get back to the persons dataset and analyse it;
- Create a REST API able to perform CRUD operations on it, and consider that the information
will be stored in MongoDB;
- Create a program in a language of your choice that reads tha dataset file and makes requests to
your API to load all records on MongoDB;
- As an extra, add the following operations to your classroom API (Treinos):
GET /emds/modalidades
- It should return a JSON string with a list of all modalidades, without duplicates
and in alphabetical order;
GET /emds/aptos
ou GET /emds?status=apto
- It should return the number of records with
resultado:true
;
GET /emds/atletas
- It should return a JSON string with a list of all athlete names, without duplicates
and in alphabetical order.
Aula Teórica 6 (Ter): 2023-03-28
Introdução à programação do lado do cliente: DOM e framework jQuery.
Construção de pequenos exemplos demonstrativos.
Aula Prática 7 (Qua:TP2): 2023-03-29
Construção de uma aplicação para gestão de ficheiros: upload, download, modais.
Aula Prática 7 (Sex:TP1): 2023-03-31
Construção de uma aplicação para gestão de ficheiros: upload, download, modais.
Aula Teórica 7 (Ter): 2023-04-11
Introdução às queries com "pipelines de agregação" no MongoDB.
Criação duma API de dados para um modelo com estruturas aninhadas: operações CRUD sobre
estruturas aninhadas.
Aula Prática 8 (Qua:TP2): 2023-04-12
Construção duma aplicação web constituída por 3 serviços, a api de dados, a interface e o serviço de
autenticação.
Aula Prática 8 (Sex:TP1): 2023-04-14
Construção duma aplicação web constituída por 3 serviços, a api de dados, a interface e o serviço de
autenticação.
Aula Teórica 8 (Ter): 2023-04-18
Introdução à autenticação: autenticação básica com username e password.
Utilização dos módulos passport e passport-local.
Desenvolvimento de uma App exemplo com persistência dos utilizadores em json-server.
Aula Prática 9 (Qua:TP2): 2023-04-19
Alterar a autenticação apresentada na aula teórica para preservar os utilizadores em MongoDB.
Construção de um serviço de autenticação baseado em JSON Web Tokens (JWT).
Aula Prática 9 (Sex:TP1): 2023-04-21
Alterar a autenticação apresentada na aula teórica para preservar os utilizadores em MongoDB.
Construção de um serviço de autenticação baseado em JSON Web Tokens (JWT).
Aula Teórica 9 (Ter): 2023-05-02
Utilização e gestão de cookies entre cliente e servidor.
Aula Teórica 10 (Ter): 2023-05-09
Introdução à distribuição de aplicações em containers docker.
Criação de alguns docker exemplo.
Aula Prática 11 (Qua:TP2): 2023-05-10
Resolução de uma ficha de trabalho: o mapa virtual.
Aula Prática 11 (Sex:TP1): 2023-05-12
Resolução de uma ficha de trabalho: o mapa virtual.