Ficha 02 · Geração de código, frameworks, automação e segurança

<div class="cartao"><h3>{{nome}}</h3><p>{{preco}} EUR</p></div>

const dados = [{ nome: "Cabaz", preco: 12 }, { nome: "Mel", preco: 6 }];

O motor de templates substitui os marcadores `{{nome}}` e `{{preco}}` pelos valores do segundo objeto do array (`{ nome: "Mel", preco: 6 }`). O template é sempre o mesmo; só os dados mudam entre cartões.

</div>


### Exercício 2 · Scaffolding: o que é gerado e porquê

Um técnico corre `npx plop componente` e responde "Quiz" à pergunta do nome. O gerador produz `Quiz.tsx`, `Quiz.test.tsx` e `Quiz.module.css`. Explica a vantagem de usar este gerador em vez de criar os três ficheiros manualmente sempre que se cria um componente novo.

<div class="resposta"></div>




### Exercício 3 · Framework flexível: plugin vs alterar o núcleo

Um técnico precisa de acrescentar uma funcionalidade a um framework de terceiros. Explica a diferença entre alterar diretamente o código-fonte do framework e usar um sistema de **plugins/hooks**, e diz qual é a boa prática.

<div class="resposta"></div>




### Exercício 4 · Escolher uma biblioteca

Um projeto precisa de uma biblioteca de datas. Existem duas opções: A, atualizada há 3 anos, sem documentação, 2 KB; B, atualizada este mês, bem documentada, 45 KB. Qual escolherias e que critério pesou mais na tua decisão?

<div class="resposta"></div>




### Exercício 5 · Automatizar ou não automatizar

Para cada situação, decide se vale a pena automatizar (escrever um script) ou não, e justifica com a regra "automatiza o que se repete três ou mais vezes":

(a) Gerar 60 páginas de exercícios a partir de um ficheiro de dados.
(b) Renomear um único ficheiro de imagem antes de o publicar.

<div class="resposta"></div>




### Exercício 6 · Testar em diferentes plataformas

Um componente interativo funciona perfeitamente no Chrome do computador do programador, mas um utilizador reporta que "não aparece nada" no Safari do telemóvel. Descreve dois passos concretos para investigar e prevenir este tipo de problema no futuro.

<div class="resposta"></div>




### Exercício 7 · Encontrar a falha de segurança

O código abaixo insere um comentário de utilizador diretamente no HTML. Identifica a falha e corrige-a.

```js
function mostrarComentario(comentario) {
  document.getElementById("caixa").innerHTML = comentario;
}