Aplicações Informáticas B · 12.º Ano

Ideias de aprendizagem ativa

Introdução a APIs Web e AJAX

Através de atividades práticas, os alunos compreendem como as APIs e o AJAX transformam páginas estáticas em experiências dinâmicas. Trabalhar com chamadas reais a APIs públicas torna os conceitos abstratos de comunicação cliente-servidor tangíveis e significativos, ligando a teoria a contextos do mundo real que eles conhecem, como feeds de redes sociais ou mapas interativos.

• Aprendizagens Essenciais
• DGE: Secundário - Criação de Conteúdos Digitais
• DGE: Secundário - Redes e Sistemas de Comunicação

• 25–45 min
• Pares → Turma inteira
• 4 atividades

Atividade 01

• Ensino pelos Pares
• 30 min · Pares

Ensino pelos Pares: Primeira Chamada AJAX

Os alunos criam uma página HTML simples com JavaScript para fazer uma requisição AJAX a uma API pública como JSONPlaceholder. Registam a resposta JSON no ecrã e discutem o que mudou sem recarregar a página. Partilham o código com o parceiro para revisão mútua.

Como as APIs permitem a integração de diferentes serviços web?

Sugestão de Facilitação

Durante a atividade de pares, circule entre os alunos para garantir que todos conseguem fazer uma chamada AJAX básica antes de avançarem para manipular os dados recebidos.

O que observar

Peça aos alunos para escreverem num pequeno pedaço de papel: 1) Uma frase que explique a diferença principal entre uma requisição síncrona e uma requisição AJAX. 2) Um exemplo de um website onde eles notaram conteúdo a ser atualizado sem recarregar a página.

• Compreender
• Aplicar
• Analisar
• Criar
• Autogestão
• Competências Relacionais

Atividade 02

• Flipped Classroom
• 45 min · Pequenos grupos

Pequenos Grupos: Integração de API Meteorológica

Em grupos, integrem a API OpenWeatherMap para mostrar dados atuais de uma cidade escolhida. Configuram parâmetros como chave API gratuita, lidam com erros de rede e apresentam o resultado dinâmico. Discutem otimizações em plenário.

Analise os benefícios de usar AJAX para carregar conteúdo dinamicamente sem recarregar a página.

Sugestão de Facilitação

Na atividade de grupos sobre API meteorológica, forneça uma lista pré-selecionada de APIs gratuitas com documentação clara para evitar frustração por escolha excessiva.

O que observar

Durante a aula, apresente um snippet de código JavaScript que faz uma chamada AJAX a uma API simples. Pergunte aos alunos: 'Qual o método HTTP utilizado nesta requisição?', 'O que representa a variável `response` após a chamada ser bem-sucedida?', 'Como poderíamos exibir o nome de um utilizador a partir de um objeto JSON recebido?'

• Compreender
• Aplicar
• Analisar
• Autogestão
• Autoconsciência

Atividade 03

• Flipped Classroom
• 40 min · Turma inteira

Turma: Simulação de Ataque CORS

A turma testa requisições AJAX entre domínios diferentes para observar erros CORS. Usam ferramentas como Postman para simular servidores e debatem soluções como proxies. Registam observações em quadro partilhado.

Explique os desafios de segurança ao consumir APIs de terceiros.

Sugestão de Facilitação

Na simulação de ataque CORS, use um cenário fictício mas realista, como um pedido bloqueado a uma API externa, para que os alunos identifiquem a mensagem de erro e discutam soluções.

O que observar

Inicie uma discussão com a pergunta: 'Imaginem que estão a desenvolver uma aplicação que precisa de mostrar dados de utilizadores de um serviço externo. Quais seriam os principais riscos de segurança ao consumir diretamente uma API pública sem validação adequada dos dados recebidos?'

• Compreender
• Aplicar
• Analisar
• Autogestão
• Autoconsciência

Atividade 04

• Flipped Classroom
• 25 min · Individual

Individual: Debug de Código AJAX

Cada aluno recebe código AJAX com erros intencionais, como URL errada ou parsing JSON falhado. Identificam e corrigem, testando no browser. Enviaram relatório de lições aprendidas.

Como as APIs permitem a integração de diferentes serviços web?

Sugestão de Facilitação

No debug de código AJAX, forneça snippets com erros comuns (por exemplo, sintaxe incorreta em callbacks ou falta de tratamento de erros) para que os alunos pratiquem a identificação de problemas.

O que observar

Peça aos alunos para escreverem num pequeno pedaço de papel: 1) Uma frase que explique a diferença principal entre uma requisição síncrona e uma requisição AJAX. 2) Um exemplo de um website onde eles notaram conteúdo a ser atualizado sem recarregar a página.

• Compreender
• Aplicar
• Analisar
• Autogestão
• Autoconsciência

Algumas notas sobre lecionar esta unidade

Comece com analogias simples, como comparar uma chamada AJAX a uma chamada telefónica onde é possível ouvir música enquanto se espera pela resposta. Evite explicar AJAX e APIs separadamente; integre-os desde cedo com exemplos concretos. Pesquisas mostram que a aprendizagem é mais eficaz quando os alunos manipulam dados reais, mesmo em pequenas quantidades, do que com exemplos artificiais.

Os alunos deverão explicar como o AJAX evita recarregamentos de página e identificar o formato JSON como padrão de troca de dados. Também deverão reconhecer cenários onde APIs de terceiros são seguras ou arriscadas, justificando as suas escolhas com base em práticas observadas durante as atividades.

---

Atenção a estes erros comuns

• Durante a atividade 'Pares: Primeira Chamada AJAX', observe se os alunos assumem que todas as APIs requerem autenticação. A correção deve ser feita ao sugerir que experimentem APIs públicas sem chaves, como a JSONPlaceholder.

  Durante a atividade 'Pares: Primeira Chamada AJAX', aproveite para mostrar que muitas APIs públicas, como a JSONPlaceholder, não exigem autenticação. Peça aos alunos que façam uma chamada GET simples e discutam porque é que algumas APIs são abertas enquanto outras são fechadas.

• Durante a atividade 'Pequenos Grupos: Integração de API Meteorológica', esteja atento a afirmações como 'AJAX recarrega a página, mas escondido'.

  Durante a atividade 'Pequenos Grupos: Integração de API Meteorológica', peça aos alunos que cronometrem o carregamento de dados com e sem AJAX. Compare o tempo de resposta e a fluidez da página para corrigir a ideia de que a página é recarregada.

• Durante a atividade 'Turma: Simulação de Ataque CORS', verifique se os alunos acreditam que todas as APIs de terceiros são seguras por padrão.

  Durante a atividade 'Turma: Simulação de Ataque CORS', use um cenário onde os dados recebidos não são validados, como um campo 'idade' que aceita strings em vez de números, para mostrar riscos de injeção de dados. Discuta como validar sempre os dados recebidos antes de os usar no código.

---

Metodologias usadas neste resumo

• Ensino pelos Pares
• Flipped Classroom