3. Instalación de una App Laravel con Inertia y Jetstream: Paso a Paso

 

Instalación y Configuración del Proyecto Chatbots con Laravel 11

1. Creación del Proyecto Laravel

1.1. Ubicación y Comando

Estando dentro de la carpeta de proyectos de Herd, ejecutamos:

bash

composer create-project laravel/laravel chatbots "11.*"

Importante: Este curso está hecho con Laravel versión 11, por lo que debemos especificar la versión para evitar problemas de compatibilidad.

1.2. Verificación de la Instalación

Una vez terminada la instalación:

• ✅ Se han ejecutado las migraciones automáticamente

• ✅ Por defecto utiliza SQLite como base de datos

• ✅ La aplicación está lista para funcionar

---

2. Instalación de Jetstream

2.1. Requerir el Paquete

bash

cd chatbots

composer require laravel/jetstream

2.2. Instalar Jetstream con Inertia

bash

php artisan jetstream:install inertia

Opciones seleccionadas:

Opción	Selección	Descripción
Dark Mode	✅ Sí	Soporte para modo oscuro
Teams	✅ Sí	Gestión de equipos
API	✅ Sí	Soporte para API tokens
Email Verification	✅ Sí	Verificación de correo electrónico
SSR	❌ No	Dejamos fuera para simplificar
Testing Suite	✅ Pest	Usamos Pest para los tests

Nota sobre SSR: Si deseas aprender sobre Server-Side Rendering con Inertia (Vue o React), recomiendo los cursos específicos disponibles.

2.3. Ejecutar Migraciones

Durante la instalación, se agregarán nuevas migraciones. Aceptamos ejecutarlas:

bash

¿Deseas ejecutar las migraciones? (yes/no) [no]: yes

---

3. Configuración del Entorno

3.1. Cambiar la Base de Datos

Modificamos el archivo .env para cambiar de SQLite a MySQL:

Antes:

env

DB_CONNECTION=sqlite

# DB_HOST=127.0.0.1

# DB_PORT=3306

# DB_DATABASE=laravel

# DB_USERNAME=root

# DB_PASSWORD=

Después:

env

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=chatbots

DB_USERNAME=root

DB_PASSWORD=

3.2. Crear la Base de Datos

bash

php artisan migrate

Si la base de datos no existe, Laravel preguntará:

bash

¿Quieres crear la base de datos? (yes/no) [no]: yes

Para usuarios de Windows, escribir yes sin tildes.

---

4. Configuración del Entorno de Desarrollo

4.1. URL de la Aplicación

Para trabajar con Herd, cambiamos la URL en el archivo .env:

env

APP_URL=http://chatbots.test

4.2. Iniciar el Servidor de Desarrollo

bash

npm run dev

Ahora podemos acceder a nuestra aplicación en:

text

http://chatbots.test

---

5. Configuración de Datos de Prueba

5.1. Modificar el Database Seeder

Editamos el archivo database/seeders/DatabaseSeeder.php para personalizar el usuario de prueba:

php

public function run(): void

{

    \App\Models\User::factory()->create([

        'name' => 'Usuario Prueba',

        'email' => 'usuario@prueba.com',

    ]);

}

Datos por defecto:

• Email: El que definamos

• Contraseña: password (definido en el factory)

5.2. Crear Alias para Migraciones

Para facilitar el desarrollo, creamos un alias:

bash

alias mfs="php artisan migrate:fresh --seed"

Este comando:

• 🔄 Refresca todas las migraciones

• 🌱 Ejecuta los seeders

• 🚀 Deja la base de datos lista para pruebas

---

6. Verificación de la Instalación

6.1. Acceder a la Aplicación

1. Abrir navegador en http://chatbots.test

2. Verificar que la aplicación carga correctamente

3. Iniciar sesión con el usuario de prueba:

• Email: usuario@prueba.com

• Contraseña: password

6.2. Funcionalidades de Jetstream

Una vez logueados, tendremos acceso a:

• ✅ Dashboard principal

• ✅ Gestión de equipos (Teams)

• ✅ Perfil de usuario

• ✅ Tokens API

• ✅ Modo oscuro disponible

---

7. Estructura del Proyecto

7.1. Tecnologías Instaladas

Componente	Tecnología
Backend	Laravel 11
Frontend	Vue.js + Inertia.js
Autenticación	Jetstream
Base de Datos	MySQL
Testing	Pest

7.2. Comandos Útiles para el Desarrollo

bash

# Iniciar servidor de desarrollo

npm run dev

# Refrescar base de datos con datos de prueba

php artisan migrate:fresh --seed

# Limpiar caché de la aplicación

php artisan optimize:clear

# Crear un nuevo usuario de prueba

php artisan db:seed

---

8. Recomendaciones de Flujo de Trabajo

8.1. Inicializar Git

bash

git init

git add .

git commit -m "Instalación inicial del proyecto"

8.2. Editor de Código

• Recomendado: PhpStorm (como se muestra en el curso)

• Alternativas: VS Code, Sublime Text, etc.

---

9. Notas Adicionales

9.1. Sobre TDD (Test Driven Development)

No es requisito para este curso:

• No se requiere conocimiento previo de TDD

• Los tests no serán el foco principal

Si deseas aprender TDD:

• Revisa el curso "Desarrollo de una API con Laravel" en aprendible.com

9.2. Recursos para SSR

Si deseas aprender sobre Server-Side Rendering con Inertia:

• 📘 Curso de Inertia con Vue SSR

• ⚛️ Curso de Inertia con React SSR

---

10. Verificación Final

Checklist de instalación:

• □ Laravel 11 instalado correctamente

• □ Jetstream con Inertia instalado

• □ Base de datos MySQL configurada

• □ Migraciones ejecutadas

• □ Usuario de prueba creado

• □ npm run dev funcionando

• □ Acceso a http://chatbots.test

• □ Login exitoso con usuario de prueba

---

11. Resumen de Comandos

bash

# 1. Crear proyecto

composer create-project laravel/laravel chatbots "11.*"

# 2. Instalar Jetstream

composer require laravel/jetstream

php artisan jetstream:install inertia

# 3. Configurar base de datos

# Editar .env para usar MySQL

# 4. Migrar

php artisan migrate

# 5. Iniciar frontend

npm run dev

# 6. Comando útil

php artisan migrate:fresh --seed

---

¡Listo para Comenzar!

Con todos estos pasos completados, tenemos nuestra aplicación de Laravel con Jetstream, Inertia y Vue.js lista para el desarrollo de los chatbots con OpenAI.

En la siguiente lección: Comenzaremos a construir la funcionalidad de chatbots.