Skip to content

Sumários

Jump to bottom Edit New page
fbfreitas edited this page Dec 2, 2024 · 15 revisions

Apresentação - 9/9/2024

  • Apresentação da disciplina de Programação na Internet - PI
  • Modo de funcionamento da UC
  • Moodle
    • Informação institucional
    • Divulgação de Mensagens
    • Publicação de notas
  • Slack
    • No nome de utilizador, usar primeiro e último nome seguido da turma, entre parênteses (e.g. "Filipe Freitas (leic32d)").
    • Workspace da Unidade Curricular
  • Regras de avaliação
  • Bibliografia

Git, GitHub - 13/9/2024

  • Comandos - init, status, add, commit, push, pull

Enquadramento da UC de PI. Linguagem JavaScript - 16/9/2024

  • World Wide Web (WWW)

    • História
    • Arquitetura
      • Cliente (browser)
      • Servidor de hipertexto
      • Protocolo de interação entre cliente e servidor (Hypertext Transfer Protocol)

  • Arquitetura Cliente <=> Servidor

  • Distinção entre tecnologias Web de cliente (browser) e servidor.

    • Cliente: HTML, CSS, JavaScript
    • Servidor: Node.js, PHP, Java, .NET, C/C++, etc.

  • Evolução histórica de IPW e crescendo da importância do Javascript.

  • Evolução histórica do Javascript desde o seu aparecimento em 1995 com o objetivo inicial de uma linguagem de scripting para o browser, até à versão EcmaScript 6

  • Análise das características da linguagem de programação Javascript:

  • Scopes:

    • let e const – variáveis que NÃO podem ser usadas fora do bloco em que foram declaradas. Temporal Dead Zone
    • var - scope da função onde é declarada. Recomendação de NÃO usar.

  • Sistema de tipos EcmaScript edição 6: Object e Primitivos (todos os outros que não são Object)

  • Tipos Primitivos: Undefined, Null, Boolean, Number, String.

  • operador typeof

  • Objetos

    • Um objeto em JavaScript é um contentor de pares nome-valor!
    • Objeto Literal: { prop1: valor1, prop: valor2, …}
    • propriedades são membros de um objeto que armazenam valores.
    • Uma propriedade que armazena uma função é um método
    • 2 sintaxes para acesso a propriedades:
      • Dot notation: - obj.propName
        • Apenas pode ser usada para acesso a propriedades com nomes que são identificadores válidos
      • Subscript notation
        • Aceder a uma propriedade com nome dado por uma expressão: obj[exp]
        • Pode ser usada para acesso a propriedades cujo nome não é um identificador válido
        • Chamar um método com nome dado por uma expressão: obj[exp]()
    • Introspeção sobre objetos em Javascript :
      • Enumeração sobre nomes das propriedades de um objeto – for(let key in objRef)

  • Arrays

    • Arrays literais: [“elem1”, , “elem2”] -- a posição 1 fica com o elemento undefined
    • Não são tipificados, logo são heterogéneos.
    • Os elementos são obtidos por uma chave numérica, ou em string, tal como para as outras propriedades
    • A principal diferença para os objetos é que têm uma propriedade length.

Recursos

Eloquent Javascript - Capitulo 1

Eloquent Javascript - Capitulo 2

Eloquent Javascript - Capitulo 4

  • As funções são declaradas como literais que criam um valor função. 2 formas (existe uma 3ª forma):
    • função sem nome - definição de função - e.g. function () {} (função anónima)
    • função com nome - declaração de função - e.g. function foo() {}
  • Uma função tem uma propriedade name que guarda o nome declarado na função.
  • Funções anónimas têm a propriedade name igual a string vazia ("").
  • O número de argumentos, não tem que coincidir com o número de parâmetros
  • Arrow Functions
  • Closure de uma função:
    • Criado um novo por cada invocação da função
    • Pode ter um tempo de vida superior à execução dessa chamada à função, se ficarem acessíveis funções criadas nessa chamada

Recursos

Eloquent Javascript - Capitulo 3

Linguagem JavaScript: Funções Continuação - 27/9/2024

  • Higher-Order Functions

  • Função Construtora - Chamada realizada com o operador prefixo new

    • O operador new altera o significado do this que refere o objecto criado;
    • O construtor retorna implicitamente o novo objecto (this) a não ser que haja retorno explícito;

  • Prototypes

    • O protótipo tem a semântica do padrão de desenho Prototype
    • O protótipo serve de “modelo” à criação de novos objectos
    • Cada objecto tem uma propriedade implícita que refere o seu protótipo.
    • Exemplos de actualização do prototype e reflexo nos objectos com esse prototype
    • Properties Lookup (o objecto tem precedência sobre o protótipo)
      • Primeiro procura no objecto uma propriedade com o nome igual
      • Caso não encontre, então procura no prototype uma propriedade com esse nome prototype chain

  • 4 formas de chamar uma função:

    1. Como uma função -- this igual ao objeto global ou undefined (se em modo strict)
    2. Como um método -- this igual ao target e.g. target.methodName()
    3. Como construtor -- this igual ao objeto criado e.g. new funcName()
    4. com apply() ou call()

  • Modo strict

Recursos

Node.js: Introdução - 27/9/2024

  • Node.js: Google's V8 JavaScript engine + event loop + low-level I/O API;

  • Node Package Manager (npm)

    • É constituído por 3 componentes:
    • npm CLI
      • npm init -y - Cria um ficheiro package.json
      • npm install mocha chai --save-dev - instala mocha e chai como dependência de desenvolvimento.

  • ECMAScript Modules

    • "type": "module" no ficheiro package.json

  • Testes unitários com a framework Mocha

    • Executar testes
      • "scripts": { "test": "mocha"} no ficheiro package.json
      • npm run test
  • Event Loop para executar operações (na forma de callbacks) quando um evento ocorre.
  • Felix Geisendörfer: “everything runs in parallel except your code.”
  • Os callbacks NÃO são interrompidos por outros callbacks, nem correm em paralelo com outros callbacks.
  • Do ponto de vista da linguagem JavaScript o Node.js oferece um ambiente single-threaded.
  • Todas as operações de I/O do Node.js podem ser executadas em paralelo e.g. ler ficheiros; pedidos HTTP,….
  • As operações de I/O usam técnicas non-blocking.

Distinção entre os modelos:

  • single-threaded com IO bloqueante
  • multi-threaded
  • single-threaded com IO não-bloqueante assíncrono

Distinção entre modelo de chamada síncrono versus assíncrono.

  • Esquematização num diagrama de sequência que evidencia a diferença entre o modelo de chamada síncrono vs assíncrono.
  • Exemplo de bloqueio da thread principal Node.js
  • callback (err, data) => {...}

Recursos

Aula Prática - Promises - 30/9/2024

  • Modelos assíncronos:

    1. callback (err, data) => {...} -- err e data traduzem os 2 casos de sucesso ou falha.
    2. Promise é um objecto que encapsula os dois possíveis resultados: sucesso ou falha
    3. async / await -- semelhante ao idioma síncrono.

  • Uma Promise pode:

    • adicionar um callback a cada caso através de .then() ou .catch()
    • ter um dos 3 estados: pending, fulfilled , ou rejected

  • Exemplo de leitura dum ficheiro

    • Modo assíncrono com callback
    • Modo assíncrono com `Promise

Recursos

  • URI (Uniform Resource Identifier) - Identificador único de um recurso

    • URN (Uniform Resource Name) - Identifica o recurso por nome
    • URL ( Uniform Resource Locator) - Identifica o recurso indicando a forma de acesso e a sua localização

  • URL

    • Sintaxe:
    URL = scheme:[//[userinfo@]host[:port]]path[?query][#fragment]

  • HTTP (Hypertext Transfer Protocol)

    • Características do HTTP:
      • nível aplicacional
      • stateless
      • pedido-resposta
      • o protocolo subjacente deve suportar entrega fiável – e.g. TCP.

  • Demonstração de pedidos GET e resposta HTTP;

  • Gamas de códigos de estado HTTP:

    • 1xx - Resposta informativa
      • Mais relevantes: 100
    • 2xx - Sucesso
      • Mais relevantes: 200 e 201
    • 3xx - Redirecionamento
      • Mais relevantes: 301 e 302
    • 4xx - Erro de cliente
      • Mais relevantes: 400, 403 e 404
    • 500 - Erro no servidor
      • 500, 502 e 504

  • Pedidos HTTP GET usando Promises

Promises, World Wide Web, URIs, Protocolo HTTP - 14/9/2024

  • Interface de Promise

    • Criação de uma Promise resolvida: Promise.resolve
    • Criação de uma Promise rejeitada: Promise.reject
    • Criação de uma Promise que se resolve quando todas as promises passadas como argumento estiverem resolvidas: Promise.all()

Recursos

Async/Await

  • async / await -- construção da linguagem que permite ter uma chamada assíncrona, escrita num idioma semelhante ao síncrono.
  • O código que fica a seguir a um await é executado na continuação da Promise
  • awaitsó pode ser chamado em funções async
  • Função construtora: new Promise( /* executor */ function(resolve, reject) { ... } )

World Wide Web, URIs, Protocolo HTTP (Continuação)

  • World Wide Web

    • Perspetiva Histórica
    • Princípios da World Wide Web
      • Identificação - URI
      • Interação - HTTP
      • Formatos - HTML, Json, Texto, etc.

  • Revisão sobre URIs

  • HTTP (Hypertext Transfer Protocol)

    • Características do HTTP:
      • nível aplicacional
      • stateless
      • pedido-resposta
      • o protocolo subjacente deve suportar entrega fiável – e.g. TCP.
    • Sintaxe de um pedido HTTP: <Request Line>\r\n [<HeaderFields>\r\n]+ \r\n
      • Request Line: <RequestMethod> <Uri> <HttpVersion>
        • RequestMethod: 'GET´| ´POST|PUT|DELETE`, ...
        • Uri: Uri absoluto para o recurso ou apenas a componente da path e seguintes
        • HTTP/1.1
      • HeaderFields: Pares <Name>: <Value>
        • Headers pedido: Host, Accept, Cookie, etc
        • Headers resposta: Server, Set-Cookie, Cache-Control
        • Headers entidade (podem ser usados nos pedidos e respostas): Content-Type, Content-Length, Content_Encoding
      • Corpo da pedido (aka. body or payload), caso exista

  • Sintaxe de uma resposta HTTP:

    • Response Line: <HttpVersion> <StatusCode> <StatusMessage>
    • [<HeaderFields>\r\n]+
    • Corpo da resposta (aka. body or payload), caso exista

  • Pedidos e resposta HTTP via telnet:

    > set crlf
    > open www.isel.pt 80
    > uma vez crlf 
    > GET / HTTP/1.1
    > Host: www.isel.pt
    > duas vezes crlf

    HTTP/1.1 303 See Other
    Content-Type: text/html; charset=UTF-8
    Location: https://www.isel.pt/
    Server: Microsoft-IIS/8.5
    Date: Mon, 01 Nov 2021 17:48:58 GMT
    Content-Length: 143

    <head><title>Document Moved</title></head>
    <body><h1>Object Moved</h1>This document may be found <a HREF="https://www.isel.pt/">here</a></body>

  • Demonstração de pedidos e resposta HTTP via curl, browser e Postman;

  • Métodos HTTP

    • GET
    • PUT
    • DELETE
    • POST

  • Classificação dos métodos HTTP:

Método Seguro Idempotente
GET v v
PUT v
DELETE v
POST

  • Seguro

    Request methods are considered “safe” if their defined semantics are essentially read-only; i.e., the client does not request, and does not expect, any state change on the origin server as a result of applying a safe method to a target resource.

  • Idempotente

    A request method is considered “idempotent” if the intended effect on the server of multiple identical requests with that method is the same as the effect for a single such request.

  • Headers

    • Accept
    • Content-type - text/html, text/plain, application/json, application/x-www-form-urlencoded, etc.
    • Content-Length
    • Authorizaton
    • etc.

Recursos

ElasticSearch Web API - 18/10/2024

  • ElasticSearch - schema-free + RESTful + NoSQL
  • ElasticSearch - Armazena e indexa documentos JSON via HTTP
  • run: > elasticsearch
  • RESTFull API
  • Elastic - Recursos = Documentos JSON
  • Documentos JSON URI = elastic host``/``indice``/``type
    • curl http://localhost:9200/_cat/indices -- listar índices
    • curl http://localhost:9200/_all -- detalhes de todos os índice
    • curl http://localhost:9200/books -- detalhes de um índice, e.g. books
    • curl http://localhost:9200/books/_search -- listar documentos de um índice, e.g. books
    • curl http://localhost:9200/books/_doc/b01 -- detalhes de um documento com _id = b01
  • Manipular:
    • curl -X PUT http://localhost:9200/books -- Criar um índice, e.g. books
    • curl -X DELETE http://localhost:9200/books -- Apagar índice
    • curl -X DELETE http://localhost:9200/books/_doc/b01 -- Apagar o documento com _id = b01
    • curl -X POST versus PUT para criar um documento.
> curl -X PUT --data '{ "name" : "Filipe" }' -H "Content-Type: application/json" http://localhost:9200/books/_doc/b01
> curl -X POST --data '{ "name" : "Joao" }' -H "Content-Type: application/json" http://localhost:9200/books/_doc

Recursos

Módulo Express - 21-10-2024

  • Utilização do módulo 'express' para implementação de um servidor HTTP

  • Módulo Express:

    • Módulo que disponibiliza uma framework web robusta e extensível

    • Routing

      • Determina como a aplicação responde a um pedido para um endpoint
      • Registo de rotas/endpoints
        • Método HTTP
        • path
        • handler - função que é invocada quando há um pedido para a rota registada

    • Passagem de parâmetros/dados por:

      • route parameters
      • query-string
      • corpo do pedido

    • Acesso ao corpo do pedido HTTP req.body

      • É necessário um middleware para cada content-type
      • Built-in middlewares
        • express.static - serve conteúdos estático
        • express.json - parsing de payloads JSON
        • express.urlencoded - parsing de URL-encoded payloads
      • Para outros content types são necessários middlewares externos

Recursos

Linguagem HTML

  • Hypertext Markup Language (HTML)
    • Define a estrutura e significado (semântica) dos documentos
    • Elementos, marcas (Tags) e Atributos
    • Nós de texto
    • Estrutura base de um Documento HTML:
      • <!DOCTYPE html>
      • <html>
      • <body>
      • <head>
      • <meta charset="utf-8">
    • self-closing elements: <img>, <br>, <hr>, etc
    • Elementos sem qualquer significado semântico. Apenas servem como contentores para aplicar estilo : <div> e <span>
    • Criação de hyperlinks: <a href="http://shayhowe.com">Shay</a>

Handlebars

  • npm install hbs

  • Handlebars templates

    • view
    • model
    • Instruções de controlo de fluxo na view handlebars :
      • {{#each property-array}} … {{/each}}
      • {{#if }} ...{{else }}
    • Integração com Express - ver módulo server.js

  • Implementação do módulo tasks-web-ui.js

Recursos

Handlebars

HTML Forms

  • Content-Type: application/x-www-form-urlencoded
  • express.urlencoded middleware
  • Post/Redirect/Get - ver tasks-web-ui.js
  • Testes de integração
    • supertest - npm install supertest --save-dev
    • tasks-api.test.js
  • Aula Prática

Cascading Style Sheets

  • express.static - serve conteúdos estático
  • Cascading Style Sheets (CSS)
    • Linguagem de apresentação para definir a aparência do conteúdo
    • CSS: Regra, Selector, Properties e Values
    • Sintaxe: selector { propriedade:valor; ...}
    • Seletores simples:
      • Tipo (elemento): p
      • Classe: .someClass
      • Id: #someId
    • Seletores Combinados
      • Descendentes: p span
      • Filhos: p > span
  • Bootstrap
  • Handlebars - layout.hbs e {{{body}}}

Recursos

Express Middlewares, Cookies e Estado de sessão

  • Middlewares

    • São funções que têm acesso ao objeto Request (req) e Response (res) e a função next, no cíclo de atendimento de um pedido HTTP.
    • função com o descritor (req, resp, next) => void
    • Podem realizar as seguintes tarefas:
      • Executar código
      • Alterar os objetos Request e Response
      • Terminar o pedido (enviando a resposta)
      • Invocar o middleware seguinte

  • Cookies

    • Request header Cookie
    • Response header Set-Cookie
    • Atributos: Expire, path, etc.
    • Módulo cookie-parser
    • Exemplo de utilização de cookies - cesto de compras

  • Módulo expressSession

    • Exemplo de utilização com o cesto de compras

Módulo Passport

  • Passport middlewares

    • passport.initialize()
    • passport.session()

  • Functions

    • login and logout
    • serialize and deserialize
Add a custom footer
Add a custom sidebar

Clone this wiki locally