Aula Teórica 1: 2023-02-13

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.

Aula Teórica 2: 2023-02-20

Tutorial sobre XML e tecnologias associadas.

Tutorial inicial de nodejs.

Aula Teórica 3: 2023-02-27

Tutorial sobre o Node Package Manager (NPM).

Tutorial sobre o json-server: como criar uma API de dados em 5 minutos!

Aula Teórica 4: 2023-03-06

Tutorial sobre formulários HTML: alguns exemplos.

Como tratar e servir recursos estáticos usados nos websites: folhas de estilo, imagens, snippets de JS.

Como recolher a informação do body de pacotes HTTP e processá-la.

Aula Teórica 5: 2023-03-13

Geração de aplicações web com o Express.

Introdução aos conceitos de roteador, controlador, template de página HTML e modelo.

A linguagem PUG para especificação de templates HTML.

Aula Teórica 6: 2023-03-20

Introdução ao MongoDB: criação de bases de dados e coleções.

Linguagem de query: comandos básicos e suas aplicações.

Aula Teórica 7: 2023-03-27

Introdução à programação do lado do cliente: DOM e framework jQuery.

Construção de pequenos exemplos demonstrativos.

Aula Teórica 7: 2023-04-03

Envio e recepção de ficheiros entre cliente e servidor: upload e download.

Aula Teórica 9: 2023-04-24

Introdução à autenticação: autenticação com username e password.

Json Web Tokens: criação e verificação.

Aula Teórica 10: 2023-05-08

Autenticação utilizando o módulo passport-local-mongoose.

Utilização de Json Web Tokens na proteção de serviços.

Aula Teórica 11: 2023-05-15

Teste de avaliação.

Dataset sobre emprego científico.

Aula Prática 1: 2023-02-13

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.

Especificação em XML do manifesto a ser usado nas submissões dos TPC.

Dataset do Mapa Virtual para os exercícios.

Ferramentas usadas: VS Code, Oxygen, e um browser.

Material desenvolvido na aula: template.html, geraHTML.py, mapa.html e manifesto.xml

Slides apresentados na aula: RPCW2023 e HTML.

TPC1: página web (letra H) + completar o mapa virtual com as ligações de cada cidade (cada ligação deve ser um link com o texto a ser o nome da cidade e a indicação da distância).

Aula Prática 2: 2023-02-20

Criação dum DTD para um manifesto: manifesto.dtd.

Exercícios de criação de servidores HTTP simples com nodejs:

• Servidor simples;
• Servidor simples numa sintaxe alternativa;
• Módulo simples;
• Servidor simples com utilização de funcionalidades de um módulo externo;
• Servidor com utilização de funcionalidades de um módulo externo (mais completo>);
• Servidor simples com observação do URL;
• Servidor simples com um logger básico;
• Servidor simples com processamento da querystring;
• Servidor simples com dois serviços;
• Servidor simples a servir uma página Web;
• Servidor de páginas web / ficheiros;
• Páginas web usadas no exercício.

Ferramentas usadas: VS Code, Oxygen, nodejs, curl, postman, python e um browser.

Dataset dos arqueossítios para o TPC2.

TPC2: O TPC consiste na criação dum servidor dos registos do dataset. Sugere-se a sua divisão nas tarefas seguintes (apenas as 2 primeiras são obrigatórias):

• Processamento do dataset com uma script em Python, usando os módulos BeautifulSoup e lxml, para desmembrar o dataset criando um ficheiro para cada registo: arq1.xml, arq2.xml, ..., arqn.xml
• Criar um servidor node que sirva os registos:
  • localhost:porta/1 (envia o arq1.xml a quem fez o pedido)
  • localhost:porta/2 (envia o arq2.xml a quem fez o pedido)
  • localhost:porta/...
• Criar a página "index.html" (usando Python) para ser servida quando alguém pede: "localhost:porta/";
• Converter os arqx.xml em arqx.html, usando o BeautifulSoup ou outro e servir os registos em HTML.

Aula Prática 3: 2023-02-27

Guião seguido na aula: RPCW2023-aula3.pdf.

Exercícios realizados na aula:

• Dataset usado na aula;
• Script Python para adicionar um id a cada registo;
• Script JS com um pedido GET;
• Script JS (v2) com um pedido GET;
• Framework de CSS: W3.css;
• Módulo JS com os geradores de páginas HTML;
• Servidor node da App "Pessoas".

TPC3: O TPC consiste na criação dum serviço de consulta sobre o dataset de pessoas (continuação do trabalho realizado na aula). Sugere-se a sua divisão nas tarefas seguintes:

• Criação duma página inicial com as seguintes operações disponíveis:
  • Listar as pessoas: apresenta uma lista de indivíduos numa tabela exibindo os campos id, nome, idade, sexo e cidade;
  • Ao clicar numa linha da tabela o sistema deverá responder com uma página HTML com toda a informação da pessoa;
  • Distribuição por sexo: o sistema deverá responder com uma página onde se possa consultar o número de pessoas de cada sexo e aceder à lista dessas pessoas;
  • Distribuição por desporto: o sistema deverá responder com uma página onde se possa consultar o número de pessoas que pratica cada um dos desportos (esta lista deverá estar ordenada descendentemente) e aceder à lista dessas pessoas;
  • Top10 de profissões: o sistema deverá responder com uma página onde se possa consultar as 10 profissões mais exercidas e aceder à lista de pessoas de cada uma das profissões.

Aula Prática 4: 2023-03-06

Guião seguido na aula: aula4.html.

Material de suporte fornecido no início da aula.

Exercícios realizados na aula:

• Warmup exercise: CSV2JSON;
• Form Server;
• Templates used by Form Server;
• Students Server;
• Templates used by Students Server.

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 5: 2023-03-13

Guião seguido na aula: aula5.html.

Desenvolvimento da aplicação de gestão de alunos na nova arquitetura.

Aplicação desenvolvida na aula.

TPC5: This week's Work Assignement has the following tasks:

• Recreate TPC4 App with the new framework and methodology.

Aula Prática 6: 2023-03-20

Guião seguido na aula: aula6.html.

Exemplos de ligação ao MongoDB.

Desenvolvimento da aplicação de gestão de alunos com ligação ao MongoDB.

Aplicação desenvolvida na aula.

TPC6: This week's Work Assignement has the following tasks:

• Recreate TPC4 App with data persistence taken care by MongoDB.

Aula Prática 7: 2023-03-27

Guião seguido na aula: aula7.html.

Construção duma API de dados: Gestão de Exames Médicos Desportivos.

Programação do loado do cliente: pequenas aplicações.

Weekly assignments: from now on students must be fully dedicated to the final project.

Aula Prática 8: 2023-04-03

Construção de uma aplicação para gestão de ficheiros: upload, download, modais.

Aula Prática 9: 2023-04-24

Aplicação demo de autenticação: Ficheiro ZIP.

Aula Prática 10: 2023-05-08

Serviço de autenticação: Ficheiro ZIP.

Aula Prática 11: 2023-05-15

Teste de avaliação.

Dataset sobre emprego científico.