Vamos a crear una página de tareas desde cero:

 

Vamos a crear una página de tareas desde cero:

1️⃣ Crear la Migración (La tabla en la base de datos)

bash
php artisan make:model Tarea -m

Esto crea:

  • app/Models/Tarea.php (El modelo)

  • database/migrations/...create_tareas_table.php (La tabla)

2️⃣ Definir la estructura de la tabla

php
// En el archivo de migración
public function up()
{
    Schema::create('tareas', function (Blueprint $table) {
        $table->id();
        $table->foreignId('user_id')->constrained();
        $table->string('titulo');
        $table->text('descripcion')->nullable();
        $table->boolean('completada')->default(false);
        $table->timestamps();
    });
}

3️⃣ Ejecutar la migración

bash
php artisan migrate

4️⃣ Crear el Controlador con recursos

bash
php artisan make:controller TareaController --resource

5️⃣ Definir las Rutas

php
// routes/web.php
Route::middleware(['auth'])->group(function () {
    Route::resource('tareas', TareaController::class);
});

6️⃣ Modificar el Controlador

php
// app/Http/Controllers/TareaController.php

public function index()
{
    $tareas = Tarea::where('user_id', auth()->id())->get();
    return view('tareas', compact('tareas'));
}

public function store(Request $request)
{
    $tarea = Tarea::create([
        'user_id' => auth()->id(),
        'titulo' => $request->titulo,
        'descripcion' => $request->descripcion,
    ]);
    
    return redirect()->route('tareas.index');
}

💡 Parte 6: Trucos y Atajos para Principiantes

🔥 Atajos en el Navegador

  • Ctrl + Shift + R (Windows) o Cmd + Shift + R (Mac): Recarga forzada

  • F12 → Network → Disable cache: Desactiva la caché (útil para desarrollo)

🔧 Comandos Útiles

bash
# Ver todas las rutas disponibles
php artisan route:list

# Crear un controlador con métodos CRUD
php artisan make:controller TareaController --resource

# Crear un modelo con migración y controlador
php artisan make:model Tarea -mcr

# Limpiar la caché
php artisan cache:clear
php artisan config:clear
php artisan view:clear

# Reiniciar Vite (cuando los cambios no se ven)
# En la terminal de npm run dev, presiona: r + Enter

📝 Errores Comunes y Soluciones

ProblemaSolución
"No se encuentra el componente"Reinicia npm run dev
Los cambios no se venCtrl+Shift+R (recarga forzada)
Error de puerto ocupadophp artisan serve --port=8001
Error de compilaciónnpm install y luego npm run dev
Pantalla en blancoAbre consola (F12) y mira los errores

🎓 Parte 7: Ejercicio Práctico

Reto: Crea tu primera página con Vue

1. Crea el controlador:

bash
php artisan make:controller MiPrimeraController

2. En el controlador:

php
// app/Http/Controllers/MiPrimeraController.php

public function index()
{
    return view('mi-primera', [
        'mensaje' => '¡Hola, mundo!',
        'usuario' => auth()->user()
    ]);
}

3. Crea la ruta:

php
// routes/web.php
Route::get('/mi-primera', [MiPrimeraController::class, 'index']);

4. Crea la vista Blade:

blade
{{-- resources/views/mi-primera.blade.php --}}
<!DOCTYPE html>
<html>
<head>
    @vite('resources/css/app.css')
</head>
<body>
    <div id="app">
        <mi-componente mensaje="{{ $mensaje }}" :usuario='@json($usuario)'></mi-componente>
    </div>
    @vite('resources/js/app.js')
</body>
</html>

5. Crea el componente Vue:

vue
<!-- resources/js/Components/MiComponente.vue -->
<template>
    <div class="p-12 text-center">
        <h1 class="text-4xl font-bold text-blue-600">{{ mensaje }}</h1>
        <p class="mt-4 text-xl">Bienvenido, {{ usuario?.name || 'Visitante' }}! 🎉</p>
    </div>
</template>

<script>
export default {
    props: ['mensaje', 'usuario']
}
</script>

6. Registra el componente en app.js:

javascript
import MiComponente from './Components/MiComponente.vue';
app.component('mi-componente', MiComponente);

7. ¡Abre tu navegador en http://localhost:8000/mi-primera!

✅ Resumen para Principiantes

ConceptoExplicación Simple
LaravelEl "motor" que maneja la lógica y la base de datos
VueLo que ves en el navegador (interfaz)
BreezeUn proyecto ya empezado con autenticación
ViteEl compilador que actualiza automáticamente
npm run devComando mágico que actualiza todo automáticamente
Pages/Páginas completas (cada una es una ruta)
Components/Piezas pequeñas que usas en varias páginas
propsCómo recibes datos del backend en Vue

🚀 ¡Próximos Pasos!

  1. Practica: Crea una página con una lista de tareas

  2. Experimenta: Agrega un botón para añadir tareas

  3. Personaliza: Cambia colores y estilos

  4. Comparte: Muestra lo que has creado a alguien

🆘 ¿Tienes problemas para ver los cambios?

Método rápido para reiniciar:

bash
# 1. Detén npm run dev (Ctrl+C)
# 2. Limpia la caché
rm -rf node_modules/.vite
# 3. Reinicia
npm run dev
# 4. Recarga el navegador con Ctrl+Shift+R

¿Tienes preguntas? Recuerda:

  • Google es tu amigo

  • La documentación oficial es tu mejor aliada

  • Todos los programadores comenzaron donde estás tú

¡Ahora sí, a programar!

Comentarios

Publicar un comentario