EJE CENTRAL: Arquitectura Unificada con Organización de Snippets
Para implementar las "carpetas", necesitamos un nuevo concepto clave: una tabla para las categorías (categories) y una relación con la tabla de snippets (snippets).
Relación Arquitectónica (Nivel Doctorado):
• Entidad Nueva: Category (Tu Carpeta).
• Relación: Uno a Muchos. Una Category puede tener muchos Snippets, pero cada Snippet pertenece a una única Category.
• Implementación: Añadiremos la llave foránea category_id a la tabla snippets.
--------------------------------------------------------------------------------
PASO A PASO: PROYECTO UNIFICADO CON CARPETAS Y TARJETAS
FASE 1: Configuración Base, Base de Datos y Autenticación
1.1. Creación del Proyecto Único
Creamos nuestro proyecto principal.
# 1. Crear el proyecto Laravel (única vez)
composer create-project laravel/laravel snippet-org-master
cd snippet-org-master
1.2. Configuración de PostgreSQL
Adaptamos el archivo .env para la conexión con PostgreSQL, siguiendo la adaptación necesaria para el entorno.
# Archivo .env
DB_CONNECTION=pgsql
DB_HOST=127.0.0.1
DB_PORT=5432
DB_DATABASE=snippets_db_organizado
DB_USERNAME=tu_usuario_pgsql
DB_PASSWORD=tu_clave_pgsql
1.3. Vistas y Autenticación (Login / Registro con Formularios)
Instalamos Laravel UI para obtener las vistas de scaffolding (login y registro) y preparar el proyecto para formularios HTML.
# 1. Instalar el paquete de interfaz
composer require laravel/ui
# 2. Generar vistas de autenticación (Login/Registro) y layouts
php artisan ui bootstrap --auth
# 3. Compilar los assets para estilos
npm install
npm run dev
Al hacer esto, las rutas de login y register ya están en routes/web.php y usan el sistema de sesiones, crucial para la parte de formularios.
1.4. Modelos y Migraciones (¡La Nueva Estructura!)
Necesitamos dos modelos y dos migraciones: Category y Snippet.
A. Modelo y Migración de Category (La Carpeta)
php artisan make:model Category -m
Definición de la Migración categories:
// database/migrations/..._create_categories_table.php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
public function up(): void
{
Schema::create('categories', function (Blueprint $table) {
$table->id();
// NAME: Nombre de la carpeta (ej: 'Scripts Python', 'Queries SQL')
$table->string('name', 100)->unique();
$table->string('description')->nullable(); // Opcional
$table->timestamps();
});
}
// ...
};
B. Modelo y Migración de Snippet (Con Llave Foránea)
Creamos el modelo Snippet e inmediatamente modificamos la migración para añadir la llave foránea category_id.
php artisan make:model Snippet -m
Definición de la Migración snippets:
// database/migrations/..._create_snippets_table.php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
public function up(): void
{
Schema::create('snippets', function (Blueprint $table) {
$table->id();
// Llave Foránea: Conexión con la tabla 'categories'
$table->foreignId('category_id')
->constrained() // Crea la restricción automática
->onDelete('cascade'); // Si borras la carpeta, se borran los snippets.
$table->string('title', 255);
$table->text('code');
$table->string('language', 50);
$table->timestamps();
});
}
// ...
};
C. Ejecución de la Migración
# Ejecutamos las dos migraciones en PostgreSQL
php artisan migrate
1.5. Configuración de Relaciones en los Modelos
En los modelos, definimos las relaciones para que Laravel sepa cómo están conectadas las "carpetas" y los "snippets" (Nivel Doctorado - Eloquent ORM).
// app/Models/Category.php
// ...
use Illuminate\Database\Eloquent\Relations\HasMany;
class Category extends Model
{
protected $fillable = ['name', 'description'];
// Una categoría tiene muchos snippets (1:N)
public function snippets(): HasMany
{
return $this->hasMany(Snippet::class);
}
}
// app/Models/Snippet.php
// ...
use Illuminate\Database\Eloquent\Relations\BelongsTo;
class Snippet extends Model
{
protected $fillable = ['title', 'code', 'language', 'category_id'];
// Un snippet pertenece a una categoría (N:1)
public function category(): BelongsTo
{
return $this->belongsTo(Category::class);
}
}
--------------------------------------------------------------------------------
FASE 2: Implementación de la API REST (JSON)
La API debe ser capaz de aceptar y validar el nuevo campo category_id.
2.1 Creación del Controlador API
php artisan make:controller Api/SnippetApiController --resource
2.2 Lógica API ()
En la lógica store y update, la validación es clave: debemos asegurar que el category_id sea requerido y que realmente exista en la tabla categories.
// app/Http/Controllers/Api/SnippetApiController.php
// ... (Imports: Request, Validator, Snippet, Category) ...
public function store(Request $request)
{
$rules = [
'title' => 'required|string|max:255',
'code' => 'required|string',
'language' => 'required|string|max:50',
// ¡Validación Mejorada para la carpeta!
'category_id' => 'required|exists:categories,id|integer',
// 'exists:categories,id' asegura que el ID de la categoría exista en la tabla 'categories'.
];
$validator = Validator::make($request->all(), $rules);
if ($validator->fails()) {
return response()->json(['status' => 400, 'errors' => $validator->errors()], 400);
}
$snippet = Snippet::create($request->all());
return response()->json(['status' => 201, 'message' => 'Creado', 'data' => $snippet], 201);
}
public function index()
{
// Cargar la relación para obtener el nombre de la carpeta en la respuesta JSON
$snippets = Snippet::with('category')->get();
// Ahora el JSON incluirá el nombre de la categoría del snippet.
return response()->json(['status' => 200, 'data' => $snippets], 200);
}
// ... (Otros métodos CRUD devolviendo JSON) ...
2.3 Rutas de la API
// routes/api.php
use App\Http\Controllers\Api\SnippetApiController;
// (Opcional: Agregar middleware de autenticación con token si se usa Sanctum, como se mencionó)
Route::resource('snippets', SnippetApiController::class)
->only(['index', 'store', 'show', 'update', 'destroy']);
--------------------------------------------------------------------------------
FASE 3: Implementación WEB (Formularios y Vistas en Tarjetas)
Usaremos el generador CRUD para las categorías y luego para los snippets, para obtener rápidamente los formularios.
3.1 Instalación del Generador CRUD
composer require ibex/crud-generator --dev
php artisan vendor:publish --tag=crud
3.2 Generación del CRUD de CATEGORIES (Las Carpetas)
Necesitas un CRUD para crear, editar y eliminar las carpetas/categorías.
# Creamos el CRUD para las carpetas
php artisan make:crud categories
Esto genera las vistas y el controlador CategoryController.php para gestionar tus carpetas.
3.3 Generación del CRUD de SNIPPETS
# Creamos el CRUD para los snippets
php artisan make:crud snippets
Nota Importante: El generador crea el controlador web (SnippetController) y las vistas, pero deberás modificar manualmente el formulario de creación (create.blade.php) y edición (edit.blade.php) para incluir un campo de selección (<select>) que liste las categorías disponibles.
3.4 Rutas Web (Protegidas)
Añadimos las rutas de los dos recursos en routes/web.php y las protegemos con el middleware auth.
// routes/web.php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\SnippetController;
use App\Http\Controllers\CategoryController;
Auth::routes();
Route::get('/', [App\Http\Controllers\HomeController::class, 'index'])->name('home');
Route::middleware('auth')->group(function () {
// 1. CRUD de Carpetas/Categorías
Route::resource('categories', CategoryController::class);
// 2. CRUD de Snippets
Route::resource('snippets', SnippetController::class);
});
3.5 Mejora de Vistas: Visualización en Tarjetas
El generador CRUD generó una tabla simple. Para mostrar el código como tarjetas bonitas, debes editar la vista principal: resources/views/snippets/index.blade.php.
Objetivo (Nivel Avanzado): Remplazar el HTML de tabla por un loop que use la estructura de tarjeta (asumiendo que Bootstrap está instalado por el paso 1.3).
Ejemplo Esquemático de Modificación de Vistas:
{{-- resources/views/snippets/index.blade.php --}}
@extends('layouts.app')
@section('content')
<div class="container">
<h1>Mis Snippets Organizados</h1>
<a href="{{ route('snippets.create') }}" class="btn btn-primary mb-3">Crear Nuevo Snippet</a>
<div class="row">
{{-- Iteramos sobre la lista de snippets --}}
@foreach ($snippets as $snippet)
<div class="col-md-4 mb-4">
{{-- Estructura de Tarjeta (Card) --}}
<div class="card shadow">
<div class="card-header bg-primary text-white">
{{ $snippet->title }}
<span class="badge bg-secondary float-end">{{ $snippet->language }}</span>
</div>
<div class="card-body">
{{-- Mostramos el nombre de la carpeta/categoría --}}
<p class="card-text text-muted small">
Carpeta: <strong>{{ $snippet->category->name }}</strong>
</p>
{{-- Vista previa del código (limitada) --}}
<pre class="bg-light p-2 rounded small overflow-auto" style="max-height: 100px;">
<code>{{ Str::limit($snippet->code, 150) }}</code>
</pre>
<a href="{{ route('snippets.show', $snippet->id) }}" class="btn btn-sm btn-info">Ver Detalle</a>
<a href="{{ route('snippets.edit', $snippet->id) }}" class="btn btn-sm btn-warning">Editar</a>
{{-- Formulario para eliminar (como se muestra en el ejemplo CRUD) --}}
<form action="{{ route('snippets.destroy', $snippet->id) }}" method="POST" class="d-inline">
@csrf
@method('DELETE')
<button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('¿Seguro?')">Eliminar</button>
</form>
</div>
</div>
</div>
@endforeach
</div>
</div>
@endsection
Al incorporar estas modificaciones, tu proyecto unificado estará completo: los datos se guardan en PostgreSQL con una estructura de organización (categorías), la API sirve JSON con la relación cargada, y la interfaz web presenta la información de manera visualmente atractiva mediante tarjetas.
Comments