En esta sesión introductoria, sentaremos las bases conceptuales fundamentales del desarrollo web moderno con Laravel. Nos centraremos en comprender qué es Laravel y por qué es considerado el framework líder para PHP, explorando su filosofía de desarrollo y ecosistema completo. Aprenderás los fundamentos de la arquitectura cliente-servidor, el protocolo HTTP/HTTPS y cómo se comunican las aplicaciones web modernas. Conocerás el ecosistema completo de Laravel incluyendo servidores web y tipos de hosting. Configurarás un entorno de desarrollo profesional con herramientas esenciales, Vite y Tailwind CSS para el frontend, y explorarás la anatomía interna de Laravel con el patrón MVC. El objetivo es que al finalizar, tengas una comprensión sólida de los fundamentos que sustentan el desarrollo web moderno con Laravel.
Introducción a Laravel Descubre qué es Laravel, su filosofía como framework «opinado» y el ecosistema completo que lo rodea. Aprenderás sobre Artisan (CLI), Tinker (REPL interactivo) y el Service Container como cerebro organizador de Laravel.
Arquitectura Cliente-Servidor Comprende cómo se comunican las aplicaciones web modernas. Explorarás el modelo cliente-servidor, los puertos de comunicación, el protocolo HTTP/HTTPS, los métodos HTTP (GET, POST, PUT, DELETE) y el concepto de stateless.
El Hogar de Laravel Conoce dónde vive y se ejecuta tu aplicación: servidores web (Nginx/Apache) como «porteros» de la aplicación, y tipos de hosting (Compartido, VPS, Dedicado, IaaS/Nube) para alojar aplicaciones Laravel.
Herramientas del Desarrollador Configura tu entorno de desarrollo profesional con las herramientas esenciales: CLI/Terminal (WSL2 en Windows), editores de código (VS Code/PHPStorm), gestores de dependencias (Composer y npm), control de versiones (Git), gestores de versiones (NVM), entornos con Docker y Laravel Sail, y herramientas de calidad de código (PHPStan, PHP_CodeSniffer, Laravel Pint) y depuración (Laravel Telescope).
Introducción al Frontend con Vite y Tailwind Aprende a integrar herramientas modernas de frontend con Laravel: Vite como compilador ultrarrápido (modos desarrollo y producción), y Tailwind CSS como framework «utility-first» con proceso de purge para CSS ultra-optimizado.
Anatomía de Laravel Explora la estructura de directorios esencial (app/, routes/, resources/, database/, public/), archivos clave (.env, index.php), el patrón MVC (Modelo-Vista-Controlador) con la analogía del restaurante, y el flujo completo desde la petición HTTP hasta la respuesta.
Diapositivas Presentación completa de todos los conceptos de la sesión con diagramas, analogías y ejemplos visuales.
| Objetivos de la Sesión 1 | Objetivos Generales del Curso |
|---|---|
| Objetivo 1: Comprender Laravel como framework «opinado» y su ecosistema | Objetivo General 2 |
| Objetivo 2: Entender cliente-servidor, HTTP/HTTPS y métodos CRUD | Objetivo General 2 |
| Objetivo 3: Identificar servidores web y tipos de hosting | Objetivo General 2 |
| Objetivo 4: Configurar entorno con CLI, editores, Composer, npm, Git y Docker/Sail | Objetivo General 1 |
| Objetivo 5: Conocer Vite y Tailwind CSS con optimización frontend | Objetivo General 1 |
| Objetivo 6: Explorar estructura, patrón MVC y flujo petición-respuesta | Objetivo General 2 |
Laravel 12.x Documentation - Documentación oficial completa
MDN Web Docs - HTTP - Documentación completa sobre HTTP
Docker Documentation - Documentación oficial de Docker
Laravel Sail Documentation - Guía oficial de Laravel Sail
WSL2 Documentation - Para usuarios de Windows
Vite Documentation - Documentación oficial de Vite
Tailwind CSS - Framework CSS utilitario
Laracasts - Tutoriales en video de Laravel
Laravel News - Noticias y artículos sobre Laravel
PHP.net - Documentación oficial de PHP
| Término | Definición |
|---|---|
| Framework | Conjunto de herramientas y reglas preestablecidas que permiten construir aplicaciones web de forma más rápida y organizada. |
| Framework «Opinado» | Framework que toma decisiones bien fundamentadas sobre la mejor manera de estructurar una aplicación basándose en experiencia de la comunidad. |
| Laravel | Framework de aplicaciones web basado en PHP, diseñado con sintaxis expresiva y elegante. |
| Artisan | Interfaz de línea de comandos (CLI) incluida con Laravel para acelerar el desarrollo generando componentes automáticamente. |
| Tinker | Consola interactiva REPL (Read-Eval-Print Loop) para probar código PHP en tiempo real con Laravel. |
| Service Container | Mecanismo que permite a Laravel crear automáticamente los objetos que el código necesita mediante inyección de dependencias. |
| Cliente-Servidor | Modelo de comunicación donde el cliente (navegador) solicita recursos y el servidor (Laravel) los procesa y responde. |
| Puerto | Número que identifica servicios específicos en un servidor (80 para HTTP, 443 para HTTPS, 8000 para desarrollo). |
| HTTP | Protocolo de Transferencia de Hipertexto, el idioma común para la comunicación web. |
| HTTPS | Versión segura de HTTP que añade cifrado TLS a la comunicación para privacidad e integridad de datos. |
| Stateless | HTTP no guarda memoria entre peticiones; cada petición es independiente. Laravel usa sesiones/cookies para mantener estado. |
| CRUD | Create, Read, Update, Delete - las 4 operaciones básicas correspondientes a POST, GET, PUT/PATCH, DELETE en HTTP. |
| Nginx/Apache | Servidores web que actúan como «porteros» recibiendo peticiones HTTP y pasándolas a Laravel para procesamiento PHP. |
| Hosting | Servicio que proporciona espacio en un servidor para alojar una aplicación web (Compartido, VPS, Dedicado, IaaS/Nube). |
| Composer | Gestor de dependencias estándar para PHP, esencial en el ecosistema Laravel. |
| npm Node Package Manager | gestor de paquetes para JavaScript y herramientas de frontend. |
| Git | Sistema de control de versiones distribuido que registra cambios en archivos a lo largo del tiempo. |
| Docker | Tecnología que permite empaquetar aplicaciones con sus dependencias en contenedores aislados y portátiles. |
| Laravel Sail | Interfaz de línea de comandos que simplifica Docker para Laravel, generando configuración automáticamente. |
| Vite | Herramienta de compilación moderna para frontend adoptada por Laravel con velocidad de desarrollo instantánea. |
| Tailwind CSS | Framework CSS «utility-first» que construye diseños con clases predefinidas directamente en HTML. |
| Purge | Proceso de Tailwind que elimina clases no utilizadas en producción, generando CSS ultra-optimizado (10-20 KB). |
| MVC | Patrón de diseño que separa la aplicación en Modelo (datos), Vista (presentación) y Controlador (coordinador). |
| .env | Archivo de configuración del entorno que contiene información sensible (credenciales BD, claves APIs). ¡Nunca subir a Git! |
| Laravel Telescope | Herramienta de depuración que permite monitorear solicitudes, excepciones, consultas de base de datos, eventos y más en tiempo real. |
| PHPStan | Herramienta de análisis estático de código PHP que encuentra errores sin ejecutar el código, mejorando la calidad del software. |
| PHP_CodeSniffer | Herramienta que detecta y puede corregir automáticamente violaciones de estándares de codificación como PSR-12. |
| Laravel Pint | Herramienta de formateo de código PHP oficial de Laravel, diseñada para mantener un estilo de código limpio y consistente. |
| PSR-12 | Estándar de codificación PHP que define reglas de formato para escribir código PHP consistente y legible. |
P: Al ejecutar wsl --install me dice que WSL ya está instalado. ¿Qué hago?
R: Esto es normal si ya habías instalado WSL antes. Puedes verificar qué distribuciones tienes con wsl -l -v. Si no tienes Ubuntu 24.04, instálala con wsl --install -d Ubuntu-24.04. Si ya la tienes, simplemente abre Windows Terminal y selecciona Ubuntu.
P: Docker Desktop no arranca o muestra errores relacionados con WSL2
R: Asegúrate de que WSL2 está correctamente instalado ejecutando wsl --status en PowerShell. Si ves errores, intenta: (1) Actualizar WSL con wsl --update, (2) Reiniciar el servicio con wsl --shutdown y volver a abrir Ubuntu, (3) Verificar en Docker Desktop Settings > Resources > WSL Integration que Ubuntu está habilitado.
P: El comando sail up -d --build falla con «port is already allocated»
R: El puerto 80 o 3306 está siendo usado por otro servicio (Apache, MySQL local, otro proyecto Docker). Soluciones: (1) Detén los servicios locales: sudo systemctl stop apache2 mysql en Ubuntu/WSL, (2) Cambia los puertos en .env de tu proyecto (por ejemplo: APP_PORT=8000), (3) Verifica proyectos Docker anteriores con docker ps y detenlos con sail down.
P: Veo «Connection refused» al intentar acceder a la aplicación
R: Verifica que los contenedores estén corriendo con sail ps. Si están «Up», el problema puede ser: (1) Espera 30-60 segundos tras ejecutar sail up, los contenedores tardan en estar listos, (2) Verifica que no tengas Apache local usando el puerto 80: sudo systemctl status apache2, (3) Intenta acceder a http://localhost:80 explícitamente o al puerto configurado en tu .env.
P: Las migraciones fallan con «Access denied for user»
R: Verifica tu archivo .env: (1) DB_HOST debe ser mysql (no 127.0.0.1), (2) DB_USERNAME debe ser sail, (3) DB_PASSWORD debe ser password, (4) DB_DATABASE debe coincidir con el nombre que elegiste. Después ejecuta sail down y sail up -d para reiniciar los contenedores.
P: El comando sail no se encuentra después de crear el alias
R: Debes recargar el archivo de configuración del shell: (1) En Ubuntu/WSL ejecuta source ~/.bashrc, (2) En macOS ejecuta source ~/.zshrc, (3) O simplemente cierra y vuelve a abrir la terminal. Verifica que estás en el directorio del proyecto antes de usar sail.
P: npm install o npm run build fallan con errores de permisos
R: Esto puede ocurrir por permisos de archivos entre Windows/WSL. Soluciones: (1) Ejecuta los comandos con sail npm install en lugar de npm install directamente, (2) Si el proyecto está en una carpeta Windows (/mnt/c/…), múevelo a tu home de WSL (~/development/), (3) Ejecuta sail down y sail up -d para reiniciar contenedores.
P: Telescope muestra «419 Page Expired» o errores CSRF
R: Esto suele pasar después de reiniciar contenedores. Soluciones: (1) Limpia la caché con sail artisan config:clear y sail artisan cache:clear, (2) Borra las cookies del navegador para localhost, (3) Verifica que el archivo .env tenga una APP_KEY generada (si no, ejecuta sail artisan key:generate).
P: Los estilos de Tailwind no se aplican en la página de bienvenida
R: Verifica: (1) Ejecutaste sail npm install para instalar dependencias, (2) Ejecutaste sail npm run build para compilar assets, (3) El archivo resources/css/app.css tiene el contenido correcto, (4) En welcome.blade.php está la directiva @vite([‘resources/css/app.css’]), (5) Limpia caché del navegador (Ctrl+F5 o Cmd+Shift+R).
P: PHPStan o PHP_CodeSniffer muestran muchos errores en archivos que no he modificado
R: Es normal. Estás analizando código generado por Laravel que sigue sus propias convenciones. Puedes: (1) Ignorar estos archivos añadiéndolos a la configuración de exclusión, (2) Enfocarte solo en analizar tu código en app/ con comandos específicos, (3) Para la práctica, solo necesitas demostrar que las herramientas funcionan, no corregir todos los errores.
P: ¿Puedo detener los contenedores cuando no estoy trabajando?
R: Sí, es recomendable para liberar recursos. Usa sail down para detener contenedores (los datos persisten en volúmenes). Para volver a trabajar, ejecuta sail up -d. Si quieres eliminar TODO incluyendo datos: sail down -v (¡cuidado, esto borra la base de datos!).
P: Al personalizar la tienda, ¿qué archivos debo modificar?
R: Solo necesitas modificar resources/views/welcome.blade.php cambiando los textos y datos estáticos (nombre de tienda, productos, contacto, redes sociales). NO modifiques la estructura HTML ni el CSS en resources/css/app.css. El objetivo es personalizar el contenido, no el diseño.
P: Al ejecutar wsl --install me dice que WSL ya está instalado. ¿Qué hago?
R: Esto es normal si ya habías instalado WSL antes. Puedes verificar qué distribuciones tienes con wsl -l -v. Si no tienes Ubuntu 24.04, instálala con wsl --install -d Ubuntu-24.04. Si ya la tienes, simplemente abre Windows Terminal y selecciona Ubuntu.
P: Docker Desktop no arranca o muestra errores relacionados con WSL2
R: Asegúrate de que WSL2 está correctamente instalado ejecutando wsl --status en PowerShell. Si ves errores, intenta: (1) Actualizar WSL con wsl --update, (2) Reiniciar el servicio con wsl --shutdown y volver a abrir Ubuntu, (3) Verificar en Docker Desktop Settings > Resources > WSL Integration que Ubuntu está habilitado.
P: El comando sail up -d --build falla con «port is already allocated»
R: El puerto 80 o 3306 está siendo usado por otro servicio (Apache, MySQL local, otro proyecto Docker). Soluciones: (1) Detén los servicios locales: sudo systemctl stop apache2 mysql en Ubuntu/WSL, (2) Cambia los puertos en .env de tu proyecto (por ejemplo: APP_PORT=8000), (3) Verifica proyectos Docker anteriores con docker ps y detenlos con sail down.
P: Veo «Connection refused» al intentar acceder a la aplicación
R: Verifica que los contenedores estén corriendo con sail ps. Si están «Up», el problema puede ser: (1) Espera 30-60 segundos tras ejecutar sail up, los contenedores tardan en estar listos, (2) Verifica que no tengas Apache local usando el puerto 80: sudo systemctl status apache2, (3) Intenta acceder a http://localhost:80 explícitamente o al puerto configurado en tu .env.
P: Las migraciones fallan con «Access denied for user»
R: Verifica tu archivo .env: (1) DB_HOST debe ser mysql (no 127.0.0.1), (2) DB_USERNAME debe ser sail, (3) DB_PASSWORD debe ser password, (4) DB_DATABASE debe coincidir con el nombre que elegiste. Después ejecuta sail down y sail up -d para reiniciar los contenedores.
P: El comando sail no se encuentra después de crear el alias
R: Debes recargar el archivo de configuración del shell: (1) En Ubuntu/WSL ejecuta source ~/.bashrc, (2) En macOS ejecuta source ~/.zshrc, (3) O simplemente cierra y vuelve a abrir la terminal. Verifica que estás en el directorio del proyecto antes de usar sail.
P: npm install o npm run build fallan con errores de permisos
R: Esto puede ocurrir por permisos de archivos entre Windows/WSL. Soluciones: (1) Ejecuta los comandos con sail npm install en lugar de npm install directamente, (2) Si el proyecto está en una carpeta Windows (/mnt/c/…), múevelo a tu home de WSL (~/development/), (3) Ejecuta sail down y sail up -d para reiniciar contenedores.
P: Telescope muestra «419 Page Expired» o errores CSRF
R: Esto suele pasar después de reiniciar contenedores. Soluciones: (1) Limpia la caché con sail artisan config:clear y sail artisan cache:clear, (2) Borra las cookies del navegador para localhost, (3) Verifica que el archivo .env tenga una APP_KEY generada (si no, ejecuta sail artisan key:generate).
P: Los estilos de Tailwind no se aplican en la página de bienvenida
R: Verifica: (1) Ejecutaste sail npm install para instalar dependencias, (2) Ejecutaste sail npm run build para compilar assets, (3) El archivo resources/css/app.css tiene el contenido correcto, (4) En welcome.blade.php está la directiva @vite([‘resources/css/app.css’]), (5) Limpia caché del navegador (Ctrl+F5 o Cmd+Shift+R).
P: PHPStan o PHP_CodeSniffer muestran muchos errores en archivos que no he modificado
R: Es normal. Estás analizando código generado por Laravel que sigue sus propias convenciones. Puedes: (1) Ignorar estos archivos añadiéndolos a la configuración de exclusión, (2) Enfocarte solo en analizar tu código en app/ con comandos específicos, (3) Para la práctica, solo necesitas demostrar que las herramientas funcionan, no corregir todos los errores.
P: ¿Puedo detener los contenedores cuando no estoy trabajando?
R: Sí, es recomendable para liberar recursos. Usa sail down para detener contenedores (los datos persisten en volúmenes). Para volver a trabajar, ejecuta sail up -d. Si quieres eliminar TODO incluyendo datos: sail down -v (¡cuidado, esto borra la base de datos!).
P: Al personalizar la tienda, ¿qué archivos debo modificar?
R: Solo necesitas modificar resources/views/welcome.blade.php cambiando los textos y datos estáticos (nombre de tienda, productos, contacto, redes sociales). NO modifiques la estructura HTML ni el CSS en resources/css/app.css. El objetivo es personalizar el contenido, no el diseño.
Configurar un entorno de desarrollo profesional completo con Docker, Laravel Sail y herramientas de calidad de código, creando un proyecto Laravel funcional con página de bienvenida personalizada y verificando el correcto funcionamiento de todos los servicios.