Engenharia Web 2023

Foto pessoal

José Carlos Ramalho

Professor/Investigador/Empresário

Dep. Informática - Universidade do Minho

jcr@di.uminho.pt

Outras informações


Horário

Aula Teória:

  • terça das 9h às 11h, sala 3.1.02

Aulas Práticas:

  • Turno 2: quarta das 11h às 13h, sala 2.2.07
  • Turno 1: sexta das 11h às 13h, sala 2.2.09


Avaliação

  • 8 Trabalhos de casa (20%);
  • 1 Projeto em grupo até 3 elementos (30%)[nota mínima de 8 val.];
  • 1 Teste escrito (40%)[nota mínima de 8 val.];
  • Fator JCR (10%).

Datas importantes

  • 30 de Maio - teste escrito;
  • 26 de Junho a 1 de Julho - defesa do projeto.

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:
    1. Lista de pessoas
    2. Lista de pessoas ordenada
    3. 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;
    4. 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;
    5. 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:
    1. Lista de pessoas
    2. Lista de pessoas ordenada
    3. 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;
    4. 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;
    5. 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 Prática 10 (Qua:TP2): 2023-04-26

Construção de uma aplicação para gestão de listas de compras baseada em 3 serviços: api de dados, interface e autenticação.


Aula Prática 10 (Sex:TP1): 2023-04-28

Construção de uma aplicação para gestão de listas de compras baseada em 3 serviços: api de dados, interface e autenticação.


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.