Roteiro de Atividade Prática
Nome: Turma:
.
Atividade: Implementando uma estrutura MVC em
um projeto web
Objetivos da aula:
Entender e aplicar o padrão de projeto Model-View-Controller (MVC) em um
projeto web, organizando o código e as pastas de forma eficiente para garantir
manutenibilidade e escalabilidade.
Situação-problema:
Você foi contratado para trabalhar em um projeto web que começou como um
protótipo simples, mas agora precisa evoluir para uma aplicação mais robusta
e organizada. A equipe decidiu adotar o padrão de projeto MVC para separar as
responsabilidades do código e melhorar a organização. Sua tarefa é criar a
estrutura inicial do projeto, implementando as pastas necessárias e começando
com uma página web básica que servirá como ponto de partida para a
aplicação.
Situação fictícia elaborada especialmente para o curso.
Passos para implementação:
Configuração da estrutura de pastas:
Crie uma nova pasta para o projeto e, dentro dela, organize as pastas
conforme a estrutura MVC:
Public: Coloque aqui os arquivos estáticos, como HTML, CSS, JavaScript e
imagens.
src: Dentro desta pasta, crie subpastas para models, views, e controllers. Esses
serão os componentes principais do padrão MVC.
Tests: Configure esta pasta para conter testes unitários e de integração.
[Link]: Se estiver utilizando [Link], configure este arquivo para
gerenciar as dependências do projeto.
Estrutura final das pastas:
meu-projeto/
│
├── public/
│ ├── css/
│ ├── js/
[SIS] [B1] [C3]
1/4
│ └── [Link]
│
├── src/
│ ├── models/
│ ├── views/
│ └── controllers/
│
├── tests/
│
└── [Link]
Implementação do Modelo (Model):
No diretório models, crie um arquivo chamado [Link] que servirá
como o modelo de dados para um produto na aplicação. Este arquivo
deve definir a estrutura básica de um produto, incluindo atributos como
nome, preco, e descricao.
Exemplo de código em JavaScript:
// src/models/[Link]
class Produto {
constructor(nome, preco, descricao) {
[Link] = nome;
[Link] = preco;
[Link] = descricao;
}
}
[Link] = Produto;
Implementação da Visão (View):
No diretório views, crie um arquivo HTML chamado [Link]. Este
arquivo deve ser uma página simples que exibe uma mensagem de boas-
vindas e uma introdução ao projeto.
Exemplo de código HTML:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Minha Página Web</title>
<link rel="stylesheet" href="css/[Link]">
</head>
[SIS] [B1] [C3]
2/4
<body>
<h1>Bem-vindo ao Meu Projeto MVC!</h1>
<p>Esta é uma introdução ao padrão MVC aplicado em um projeto
web.</p>
<script src="js/[Link]"></script>
</body>
</html>
Implementação do Controlador (Controller):
No diretório controllers, crie um arquivo chamado [Link].
Este arquivo deve conter a lógica que controla as interações entre a
visão e o modelo. Por exemplo, pode incluir uma função para criar um
novo produto e enviá-lo para ser exibido na visão.
Exemplo de código em JavaScript:
// src/controllers/[Link]
const Produto = require('../models/Produto');
function criarProduto(nome, preco, descricao) {
const novoProduto = new Produto(nome, preco, descricao);
return novoProduto;
}
[Link] = { criarProduto };
Integração dos componentes:
Agora que os três componentes principais (Model, View, Controller) estão
definidos, integre-os para que a aplicação funcione corretamente.
Configure o arquivo HTML para exibir informações sobre um produto
usando o controlador criado.
Exemplo de integração simples:
// src/[Link] (ponto de entrada do aplicativo)
const { criarProduto } = require('./controllers/ProdutoController');
const produto = criarProduto('Caneta Azul', 1.50, 'Caneta azul para escrever.');
[Link](`Produto Criado: ${[Link]} - R$${[Link]} - $
{[Link]}`);
Testando a aplicação:
No diretório tests, crie testes unitários para garantir que as funções do
controlador estejam funcionando corretamente. Isso pode incluir testes
[SIS] [B1] [C3]
3/4
para verificar se um produto é criado corretamente e se os dados são
manipulados conforme esperado.
Exemplo de teste simples:
// tests/[Link]
const { criarProduto } = require('../src/controllers/ProdutoController');
test('Criação de produto', () => {
const produto = criarProduto('Lápis', 0.50, 'Lápis para desenho.');
expect([Link]).toBe('Lápis');
expect([Link]).toBe(0.50);
expect([Link]).toBe('Lápis para desenho.');
});
Lista de materiais
Computador com acesso à internet.
Caderno para anotações.
Uma caneta.
[SIS] [B1] [C3]
4/4