7. Links de Navegación para los Chatbots

 

Links de Navegación para los Chatbots

1. Configuración del Entorno de Desarrollo

1.1. Comando dev en Laravel

Recientemente, Laravel ha incorporado el comando dev que ejecuta múltiples procesos simultáneamente:

bash

composer run dev

Procesos que ejecuta:

  • ✅ php artisan serve - Servidor de desarrollo

  • ✅ php artisan queue listen - Procesador de colas

  • ✅ php artisan bail - Logs en tiempo real

  • ✅ npm run dev - Compilación de assets front-end

1.2. Instalación de Concurrently

Si el comando solicita instalar concurrently:

bash

npm install --save-dev concurrently

Función de Concurrently:
Permite ejecutar múltiples comandos en paralelo desde un solo script.

2. Rutas para los Chatbots

2.1. Crear Rutas Resource

Editamos el archivo routes/web.php para agregar las rutas de los chatbots:

php

<?php


use App\Http\Controllers\ChatbotController;

use Illuminate\Support\Facades\Route;


Route::middleware([

    'auth:sanctum',

    config('jetstream.auth_session'),

    'verified',

])->group(function () {

    Route::get('/dashboard', function () {

        return Inertia::render('Dashboard');

    })->name('dashboard');


    // 👇 Agregar rutas resource para chatbots

    Route::resource('chatbots', ChatbotController::class);

});

2.2. Importar el Controlador

Asegúrate de importar el controlador al inicio del archivo:

php

use App\Http\Controllers\ChatbotController;

2.3. Rutas Generadas

El método resource() crea automáticamente:

Método

URI

Nombre

Función

GET

/chatbots

chatbots.index

Listar chatbots

GET

/chatbots/create

chatbots.create

Formulario de creación

POST

/chatbots

chatbots.store

Guardar nuevo chatbot

GET

/chatbots/{chatbot}

chatbots.show

Ver chatbot

GET

/chatbots/{chatbot}/edit

chatbots.edit

Editar chatbot

PUT/PATCH

/chatbots/{chatbot}

chatbots.update

Actualizar chatbot

DELETE

/chatbots/{chatbot}

chatbots.destroy

Eliminar chatbot

2.4. Verificación Temporal

Para probar, añadimos una respuesta temporal en el controlador:

php

// En app/Http/Controllers/ChatbotController.php

public function index()

{

    return 'Index de Chatbots'; // Temporal

}

3. Agregar Links de Navegación

3.1. Estructura de Archivos de Jetstream

La navegación se encuentra en:

text

resources/js/Layouts/AppLayout.vue

3.2. Navegación de Escritorio

Ubicación: Buscar la sección Navigation Links comentada.

Agregar el link:

vue

<template>

    <div class="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex">

        <!-- Dashboard Link -->

        <NavLink :href="route('dashboard')" :active="route().current('dashboard')">

            Dashboard

        </NavLink>


        <!-- 👇 Agregar Link de Chatbots -->

        <NavLink :href="route('chatbots.index')" :active="route().current('chatbots.*')">

            Chatbots

        </NavLink>

    </div>

</template>

3.3. Navegación Móvil (Responsive)

Ubicación: Buscar la sección Responsive Navigation Menu.

Agregar el link:

vue

<template>

    <!-- Responsive Navigation Menu -->

    <div :class="{'block': showingNavigationDropdown, 'hidden': ! showingNavigationDropdown}" class="sm:hidden">

        <div class="pt-2 pb-3 space-y-1">

            <!-- Dashboard Link -->

            <ResponsiveNavLink :href="route('dashboard')" :active="route().current('dashboard')">

                Dashboard

            </ResponsiveNavLink>


            <!-- 👇 Agregar Link de Chatbots -->

            <ResponsiveNavLink :href="route('chatbots.index')" :active="route().current('chatbots.*')">

                Chatbots

            </ResponsiveNavLink>

        </div>

    </div>

</template>

3.4. Componentes de Navegación

Los componentes utilizados son:

NavLink (para escritorio):

vue

<NavLink 

    :href="route('chatbots.index')" 

    :active="route().current('chatbots.*')"

>

    Chatbots

</NavLink>

ResponsiveNavLink (para móvil):

vue

<ResponsiveNavLink 

    :href="route('chatbots.index')" 

    :active="route().current('chatbots.*')"

>

    Chatbots

</ResponsiveNavLink>

4. Active State de la Navegación

4.1. Detección de Ruta Activa

javascript

// Active para todas las rutas de chatbots

:active="route().current('chatbots.*')"


// Active solo para el índice

:active="route().current('chatbots.index')"


// Active para rutas específicas

:active="route().current('chatbots.create') || route().current('chatbots.store')"

4.2. Ejemplos de Estado Activo

Ruta Actual

chatbots.*

chatbots.index

/chatbots

✅ Activo

✅ Activo

/chatbots/create

✅ Activo

❌ Inactivo

/chatbots/1/edit

✅ Activo

❌ Inactivo

5. Estructura Completa de AppLayout.vue

5.1. Ejemplo de Implementación

vue

<template>

    <div class="min-h-screen bg-gray-100">

        <nav class="bg-white border-b border-gray-100">

            <!-- Primary Navigation Menu -->

            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

                <div class="flex justify-between h-16">

                    <div class="flex">

                        <!-- Logo -->

                        <div class="shrink-0 flex items-center">

                            <Link :href="route('dashboard')">

                                <ApplicationLogo class="block h-9 w-auto" />

                            </Link>

                        </div>


                        <!-- Navigation Links - Desktop -->

                        <div class="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex">

                            <NavLink 

                                :href="route('dashboard')" 

                                :active="route().current('dashboard')"

                            >

                                Dashboard

                            </NavLink>

                            <NavLink 

                                :href="route('chatbots.index')" 

                                :active="route().current('chatbots.*')"

                            >

                                Chatbots

                            </NavLink>

                        </div>

                    </div>


                    <!-- Settings Dropdown -->

                    <div class="hidden sm:flex sm:items-center sm:ml-6">

                        <!-- ... código del dropdown ... -->

                    </div>


                    <!-- Hamburger -->

                    <div class="-mr-2 flex items-center sm:hidden">

                        <button @click="showingNavigationDropdown = ! showingNavigationDropdown" class="...">

                            <!-- ... -->

                        </button>

                    </div>

                </div>

            </div>


            <!-- Responsive Navigation Menu -->

            <div :class="{'block': showingNavigationDropdown, 'hidden': ! showingNavigationDropdown}" class="sm:hidden">

                <div class="pt-2 pb-3 space-y-1">

                    <ResponsiveNavLink 

                        :href="route('dashboard')" 

                        :active="route().current('dashboard')"

                    >

                        Dashboard

                    </ResponsiveNavLink>

                    <ResponsiveNavLink 

                        :href="route('chatbots.index')" 

                        :active="route().current('chatbots.*')"

                    >

                        Chatbots

                    </ResponsiveNavLink>

                </div>

            </div>

        </nav>


        <!-- Page Content -->

        <main>

            <slot />

        </main>

    </div>

</template>

6. Verificación de Funcionamiento

6.1. Pasos para Probar

  1. Iniciar sesión con el usuario de prueba

    • Email: usuario@prueba.com

    • Contraseña: password

  2. Acceder al Dashboard

    • Verificar que el link "Chatbots" aparece

  3. Navegación de Escritorio

    • Pantalla ancha: Ver el link en la barra superior

  4. Navegación Móvil

    • Pantalla pequeña: Abrir el menú hamburguesa

    • Verificar que el link aparece en el menú responsive

6.2. Prueba de Estado Activo

  1. Hacer clic en "Chatbots"

  2. Verificar que el link se resalta (estado activo)

  3. La URL debe ser /chatbots

6.3. Prueba de Rutas

Si el controlador devuelve "Index de Chatbots" temporalmente:

php

// En ChatbotController.php

public function index()

{

    return 'Index de Chatbots';

}

Deberías ver el texto en la página.

7. Consideraciones sobre Localización

7.1. Textos en Inglés

En este curso utilizamos textos en inglés para simplificar:

vue

<!-- Texto en inglés -->

<NavLink :href="route('chatbots.index')">

    Chatbots

</NavLink>

7.2. Para Localización (Opcional)

Si necesitas traducciones, consulta:

Ejemplo con localización:

vue

<NavLink :href="route('chatbots.index')">

    {{ $t('navigation.chatbots') }}

</NavLink>

8. Solución de Problemas Comunes

8.1. Error: Route not defined

Problema: route('chatbots.index') no funciona

Solución:

bash

php artisan route:clear

php artisan route:cache

8.2. El link no aparece

Verificar:

  1. El usuario está autenticado

  2. La ruta está definida correctamente

  3. El archivo AppLayout.vue está actualizado

  4. Los assets están compilados: npm run dev

8.3. El estado activo no funciona

Verificar el patrón de ruta:

vue

<!-- Correcto -->

:active="route().current('chatbots.*')"


<!-- Incorrecto (solo funciona para index) -->

:active="route().current('chatbots.index')"

9. Extensiones y Mejoras

9.1. Agregar Íconos

vue

<template>

    <NavLink :href="route('chatbots.index')" :active="route().current('chatbots.*')">

        <!-- Con ícono -->

        <svg class="w-4 h-4 inline-block mr-2" ...>

        Chatbots

    </NavLink>

</template>

9.2. Contador de Chatbots

vue

<template>

    <NavLink :href="route('chatbots.index')" :active="route().current('chatbots.*')">

        Chatbots

        <span class="ml-2 px-2 py-1 text-xs bg-gray-200 rounded-full">

            {{ chatbotsCount }}

        </span>

    </NavLink>

</template>


<script setup>

import { computed } from 'vue';

import { usePage } from '@inertiajs/vue3';


const chatbotsCount = computed(() => {

    return usePage().props.auth.user.chatbots_count ?? 0;

});

</script>

9.3. Submenú de Chatbots

vue

<template>

    <div class="relative group">

        <NavLink :href="route('chatbots.index')" :active="route().current('chatbots.*')">

            Chatbots

            <svg class="inline-block ml-1 w-4 h-4" ...>

        </NavLink>

        <div class="absolute left-0 mt-1 hidden group-hover:block bg-white shadow-lg rounded">

            <Link :href="route('chatbots.create')" class="block px-4 py-2 hover:bg-gray-100">

                Crear Chatbot

            </Link>

            <Link :href="route('chatbots.index')" class="block px-4 py-2 hover:bg-gray-100">

                Ver Todos

            </Link>

        </div>

    </div>

</template>

10. Resumen

10.1. Pasos Realizados

  1. ✅ Configurado el comando dev para desarrollo

  2. ✅ Definidas las rutas resource para chatbots

  3. ✅ Agregados links en navegación de escritorio

  4. ✅ Agregados links en navegación móvil

  5. ✅ Configurado estado activo de los links

10.2. Archivos Modificados

Archivo

Cambio

routes/web.php

Agregar Route::resource('chatbots', ...)

resources/js/Layouts/AppLayout.vue

Agregar links de navegación

10.3. Resultado Final

  • ✅ Link "Chatbots" visible en navegación de escritorio

  • ✅ Link "Chatbots" visible en menú móvil

  • ✅ Estado activo cuando se navega en rutas de chatbots

  • ✅ Protección con autenticación

¡La navegación para los chatbots está lista para usar! 🚀

Comentarios

Publicar un comentario

Entradas más populares de este blog

1. Introducción al curso de Chatbots personalizados con Laravel & OpenAI

  1-Curso de Chatbots Personalizados con Laravel y OpenAI Introducción ¡Bienvenido al curso de chatbots personalizados con Laravel y OpenAI! Saul Sotelo desarrollador certificado en Laravel. En este tutorial práctico, aprenderás a construir desde cero una aplicación de chatbots con inteligencia artificial. 1. Descripción General de la Aplicación La aplicación que construiremos permitirá a los usuarios: Crear múltiples chatbots personalizados Asignar nombres y system prompts a cada chatbot Seleccionar modelos de OpenAI Configurar parámetros como la temperatura Añadir fuentes de conocimiento (PDFs y páginas web) Mantener conversaciones con los chatbots 2. Funcionalidades Paso a Paso 2.1. Creación de un Chatbot Paso 1: Asignar un nombre El usuario puede nombrar cada chatbot para identificarlos fácilmente Paso 2: Definir el System Prompt Es el mensaje inicial que guía el comportamiento del chatbot Importante: Este prompt NO se muestra al usuario final Ejemplo: "Eres un experto en gast...
Leer más

2. Prerequisitos para el Curso de Chatbots con Laravel y OpenAI

2. Prerequisitos para el Curso de Chatbots con Laravel y OpenAI   Perfil del Estudiante Este curso está diseñado específicamente para desarrolladores con experiencia previa en Laravel. Sin embargo, si estás comenzando, no te preocupes: tenemos recursos recomendados para ponerte al día. 1. ¿Para Quién es Este Curso? Nivel de Experiencia Requerido Nivel Recomendación Avanzado ✅ ¡Perfecto! Estás listo para comenzar Intermedio ✅ Con conocimientos básicos de Laravel, podrás seguir el curso Principiante ⚠️ Te recomendamos tomar cursos introductorios primero 2. Cursos Recomendados para Principiantes Si apenas estás comenzando con Laravel, te sugerimos completar estos cursos primero: 2.1. Laravel desde Cero Descripción: Curso fundamental que cubre todo lo necesario sobre los fundamentos de Laravel Qué aprenderás: ✅ Estructura básica de Laravel ✅ Rutas y controladores ✅ Vistas y Blade ✅ Eloquent ORM ✅ Migraciones y bases de datos ✅ Validaciones y formularios Duración: Completo para dominar ...
Leer más

4. Herramientas de Calidad

  Configuración de Quality Tools para Laravel y JavaScript 1. Introducción a las Herramientas de Calidad 1.1. ¿Por qué usar Quality Tools? Cuando desarrollamos, es común olvidar detalles de formato como: Posición de llaves de apertura Comas al final de arrays Indentación consistente Orden de clases CSS Beneficios: ✅ Código más legible y consistente ✅ Menos tiempo en revisiones de código ✅ Estándares uniformes en equipos ✅ Enfoque en funcionalidades, no en formato 2. Configuración de Laravel Pint (PHP) 2.1. ¿Qué es Laravel Pint? Laravel Pint es una herramienta de formateo de código diseñada específicamente para proyectos Laravel. Utiliza PHP CS Fixer internamente y sigue los estándares: PSR-2 - Estándar de codificación PSR-4 - Estándar de autoloading 2.2. Verificación en composer.json Laravel Pint ya viene incluido por defecto en las dependencias de desarrollo: json "require-dev" : {      "laravel/pint" : "^1.0" } 2.3. Uso Básico de Laravel Pint Ejecutar ...
Leer más