MVC Atividade — TypeScript + Node.js + SQLite (Prisma) + Express 5 + Twig

Aplicação MVC para a disciplina de Desenvolvimento Web (Prof. Marcos Aurélio). Stack: TypeScript (ESM/NodeNext), Express 5, Prisma (SQLite), Twig.

Nota: A camada de View será evoluída depois em sala — este projeto já entrega Models, Controllers e Rotas funcionando (CRUD básico de Posts, Categorias e Tags).

---

✅ Requisitos

• Node.js 20+
• npm 8+
• SQLite (embutido; o arquivo do banco será database.sqlite na raiz)

---

📦 Setup (instalação)

# 1) Clonar o repositório
git clone https://github.com/cai0duque/mvc-atvd.git
cd mvc-atvd

# 2) Instalar dependências
npm install

# 3) Gerar o Prisma Client (necessário para o runtime)
npx prisma generate

# 4) Criar/atualizar o banco de dados (SQLite) com as tabelas do schema
npx prisma migrate dev --name init

O datasource do Prisma (em prisma/schema.prisma) aponta para file:../database.sqlite — ou seja, o banco fica na raiz do projeto como database.sqlite.

---

▶️ Rodando a aplicação

# compilar TypeScript para dist/
npm run build

# iniciar servidor (Express 5)
npm start
# → http://localhost:3000

• O servidor registra o Twig e procura as views primeiro em dist/View; se não encontrar, usa src/View automaticamente.
• Rotas principais estão listadas mais abaixo.

Modo desenvolvimento (opcional)

# recompila continuamente
npm run dev

---

🧭 Rotas

Método	Rota	Descrição
GET	/	Home (IndexController)
GET	/posts	Lista posts (PostsController)
GET	/post/:id	Exibe 1 post (PostController)
GET	/post/create	Form de criação de post (Twig)
POST	/post/create	Cria post
GET	/user	Lista usuários (UserController)
GET	/category	Lista categorias (JSON)
GET	/category/:id	Posts da categoria por id (JSON)
GET	/category/slug/:slug	Posts da categoria por slug (JSON)
POST	/category/create	Cria categoria (JSON)
GET	/tag	Lista tags (JSON)
POST	/tag/create	Cria tag (JSON)

Views Twig incluídas: src/View/index.twig, post.twig, user.twig, layout.twig, post/form.twig. Categorias e Tags hoje respondem JSON (views serão trabalhadas em sala).

---

🌱 Popular o banco (Seed) — recomendado

Opção A) Script de seed com Prisma (rápido e reprodutível)

1. Crie src/seed.ts:

import pkg from "@prisma/client";
const { PrismaClient } = pkg;
const prisma = new PrismaClient();

await prisma.user.create({ data: { nome: "Caio" } });
const cat  = await prisma.category.create({ data: { nome: "Geral", slug: "geral" } });
const auth = await prisma.author.create({ data: { nome: "Autor Padrão" } });
const tag  = await prisma.tag.create({ data: { nome: "TypeScript", slug: "ts" } });

await prisma.post.create({
  data: {
    titulo: "Primeiro post",
    conteudo: "Olá, mundo!",
    userId: 1,
    categoryId: cat.id,
    authorId: auth.id,
    tags: { connect: [{ id: tag.id }] },
  },
});

await prisma.$disconnect();
console.log("✅ Seed ok");

2. Adicione o script no package.json:

{
  "scripts": {
    "build": "tsc",
    "start": "node dist/main.js",
    "seed": "npm run build && node dist/seed.js",
    "dev": "tsc -w"
  }
}

3. Execute:

npm run seed
npm start

Opção B) Inserir via cURL (APIs já disponíveis)

Necessário ter ao menos 1 User no banco (crie via Opção A ou Prisma Studio).

Criar categoria:

curl -X POST http://localhost:3000/category/create \
  -H "Content-Type: application/json" \
  -d '{"nome":"Tutoriais","slug":"tutoriais"}'

Criar tag:

curl -X POST http://localhost:3000/tag/create \
  -H "Content-Type: application/json" \
  -d '{"nome":"Node","slug":"node"}'

Criar post (via formulário): acesse http://localhost:3000/post/create.

Prisma Studio (visual)

npx prisma studio

---

🧱 Implementações (resumo)

Models (Prisma + camada base)

• AbstractModel com load(where), save(), delete().

• Post, User, Category, Author, Tag (helpers findAll, findById, create, update, destroy).

• Schema Prisma:

  • Post → userId (obrigatório), categoryId?, authorId?, tags (N-N).
  • Índices únicos em Category.slug e Tag.slug.

Controllers (herdam de AbstractController)

• Base AbstractController com execute(), getParams(), getMethod(), render/json/redirect.
• IndexController, PostsController, PostController, UserController.
• Post/CreateController, Category/CategoryController, Category/CreateController, Tag/TagController, Tag/CreateController.

Rotas

• Todas as rotas configuradas em src/main.ts (Express 5, ESM/NodeNext, Twig via createRequire).

---

🛠️ Notas técnicas / Troubleshooting

• ESM/NodeNext: imports relativos precisam terminar com .js nos arquivos .ts (ex.: import X from "./foo.js").

• Prisma Client não encontrado / named export: rode npx prisma generate. Em ESM, o padrão usado é:

  import pkg from "@prisma/client";
  const { PrismaClient } = pkg;

• Views não encontradas: se der Failed to lookup view .../dist/View, o projeto já usa fallback para src/View. Verifique se os .twig estão em src/View.

• Porta em uso: mude a porta via PORT=4000 npm start (Linux/Mac) ou set PORT=4000 && npm start (Windows PowerShell).

---

📚 Comandos úteis

# abrir Prisma Studio
npx prisma studio

# rebuild limpo (Windows PowerShell)
if (Test-Path dist) { Remove-Item -Recurse -Force dist }
npm run build && npm start

---

📜 Itens de entrega (checklist)

• ✅ AbstractModel com load/save/delete.
• ✅ AbstractController com execute/getParams/getMethod.
• ✅ Models Category, Author, Tag (além de Post e User).
• ✅ Controllers pedidos implementados.
• ✅ Rotas criadas e respondendo.
• ✅ Código organizado (TypeScript + ESM), comentários pontuais.
• ✅ Repositório público no GitHub.