#1 Desarrollando un Proyecto Real con Laravel y Vue: Paso a Paso | GOGODEV
HTML-код
- Опубликовано: 23 окт 2023
- ¡Bienvenidos a un emocionante viaje de desarrollo de software! En este vídeo, te llevaremos de la mano a través de cada paso necesario para crear un proyecto real utilizando dos tecnologías increíbles: Laravel y Vue.js. Si eres un entusiasta del desarrollo web o un aspirante a desarrollador, ¡este contenido es perfecto para ti!
En esta serie de tutoriales, aprenderás cómo combinar el potente marco de trabajo de Laravel para el lado del servidor con la versatilidad y dinamismo de Vue.js en el lado del cliente. Vamos a abordar un proyecto práctico desde cero, mostrándote cada detalle del proceso.
Lo que cubriremos en este vídeo:
Configuración del entorno: Asegúrate de tener todo lo que necesitas para empezar, incluyendo la instalación de Laravel y configuración de un proyecto Vue.js.
Diseño de la base de datos: Planificaremos la estructura de nuestra base de datos y utilizaremos las migraciones de Laravel para crearla.
Creación de modelos y controladores: Implementaremos la lógica del servidor en Laravel, definiendo modelos y controladores para gestionar nuestros datos.
Autenticación de usuarios: Añadiremos la autenticación de usuarios y gestión de roles.
Desarrollo del frontend: Comenzaremos a construir la interfaz de usuario dinámica utilizando Vue.js con vite, creando componentes reutilizables y estableciendo rutas con Vue Router, además de usar Inertia para el panel de administración.
Comunicación entre frontend y backend: Conectar el frontend y el backend es crucial. Aprenderás a realizar solicitudes HTTP a través de API y a mostrar datos en tiempo real.
Implementación de funcionalidad: Agregaremos características específicas al proyecto, como la gestión de tareas, comentarios en tiempo real, o cualquier otro aspecto que deseemos explorar.
Nuestro objetivo es proporcionarte una comprensión sólida de cómo estos dos marcos de trabajo pueden trabajar juntos para construir aplicaciones web robustas y dinámicas.
No importa si eres un principiante o un desarrollador con experiencia, este vídeo te guiará a través de todo el proceso, explicando cada paso y resolviendo problemas comunes que puedes encontrar en el camino. Así que, prepárate para sumergirte en el desarrollo de aplicaciones web modernas con Laravel y Vue.js. ¡Suscríbete, activa las notificaciones y comencemos este emocionante proyecto juntos!
✅ Suscríbete Al Canal Para Ver Mas Videos: www.youtube.com/@GOGODEV/?sub...
✅ Enlaces Importantes:
👉 Si Buscas Una Comunidad Para Desarrolladores Visita: ademass.com/
✅ Conectate Conmigo:
👉 (X)Twitter: / jjruizempresa
==============================
✅ Otros videos que te pueden interesar:
👉 Dominando GraphQL: Curso Completo Para Desarrolladores | GOGODEV
• Dominando GraphQL: Cur...
👉 Guía Básica De ThreeJS: Dibuja En 3D En El Navegador Con JavaScript - Episodio 1 | GOGODEV
• Guía Básica De ThreeJS...
👉 Introducción al HTML5: Guía Completa 2023 - Episodio 1 | GOGODEV
• Introducción al HTML5:...
👉 Consumo De APIs Con Java - Tutorial Completo 2023 | GOGODEV
• Consumo De APIs Con Ja...
=============================
✅ Acerca de GOGODEV:
Canal creado con el ánimo de divulgar conceptos sobre programación informática, así como para formar futuros desarrolladores autodidactas en cualquier lenguaje de programación.
Programación en español. Explicación y divulgación de tecnologías.
Cursos y consejos sobre programación.
Programación fácil.
Formación para programadores.
Aprender a desarrollar de forma clara y concisa.
Tecnología sin rodeos.
Programación efectiva.
Todos los lenguajes y temáticas: Solidity, PHP, Laravel, C#, JavaScript, React, NextJS, Vue3, ReactNative, Angular, Blockchain, TypeScript, Python, Odoo, Django, Unity, Unreal Engine, Java, CSS3, HTML5.
¡De programador a programador!
📩 Email: jjruiz@gogodev.net
🔔 Subscribete A Mi Canal Para Ver Mas Videos:
www.youtube.com/@GOGODEV/?sub...
=====================
#DesarrolloWeb
#Laravel
#VueJS
#ProgramaciónWeb
#ProyectoReal
#DesarrolloDeSoftware
#TutorialesDeProgramación
#ProgramaciónEnPHP
#VueLaravel
#DesarrolloFrontend
#DesarrolloBackend
Descargo de responsabilidad: No aceptamos ninguna responsabilidad por ninguna pérdida o daño en el que se incurra si usted actúa o no actúa como resultado de escuchar cualquiera de mis publicaciones. Usted reconoce que utiliza la información que proporcionamos bajo su propio riesgo. Haga su propia investigación.
Descargo de responsabilidad de derechos de autor: según la Sección 107 de la Ley de derechos de autor de 1976, se permite el "uso justo" para fines tales como críticas, comentarios, informes de noticias, enseñanza, becas e investigación. El uso justo es un uso permitido por el estatuto de derechos de autor que de otro modo podría estar infringiendo. El uso personal, educativo o sin fines de lucro inclina la balanza a favor del uso justo
© GOGODEV 
Наука
De aca salimos pro en laravel y desarrollo web si o si! Por supuesto de la mano de un gran mentor! Gracias por todo!
A ti Luciano por el apoyo!
Excelente, justo lo que venia buscando. Gracias por el contenido tan bueno.
Justo lo que buscaba, ya que todos lo hacen en monolito. Espero con ansias los nuevos videos, saludos!.
Gracias es justo lo que estaba buscando y listo para continuar aprendiendo.
Es contenido de gran valor!!! Nuevo suscriptor a partir de hoy
Muchachos, vengo del futuro.
En caso de que esten teniendo problemas con la creacion de la clave foranea, tengan en cuenta el orden de crecion de las migraciones, en mi caso fue escencial haber creado la tabla levels primero, y si tienen algun otro problema con el tema de la syntax de la creacion de la clave foranea aqui esta otra syntax mas concisa
$table->foreignId('level_id')->constrained()
->cascadeOnDelete()->cascadeOnDelete();
PD: Es laravel 11
Nuevo suscriptor a partir de hoy. Excelente!
Q ganas de que siga esta serie, eres un grande!! Total admiración
Muchas gracias! Vuestro apoyo a los vídeos es suficiente pago. Un abrazo!
Excelente!! en espera de los siguientes videos
Gracias por el apoyo!
Muchas gracias por el gran trabajo que haces Juanjo, eres un crack!!!!!!!
¡¡Muchas gracias!!
Esta genial, gracias ..., a la espera del curso...
Muchas gracias!
Juanjo esperamos con mucha espectativa los siguientes videos, en lo referente al frontal creo que sería muy útil utilizar una plantilla administrativa con bootstrap, éxitos...
muchas gracias por estos vídeos estoy muy agradecido con usted!
Muchas gracias Francisco por tu apoyo!
Genial esta iniciativa, justo estoy haciendo una aplicacion sencilla con lo aprendido en los cursos de Laravel y Vue! Mil gracias!
Gracias por tu apoyo Gustavo!
Eres un grande... maestro..
Saludos Juanjo! que buena noticia! inician el taller de Laravel y Vue! lo he estado esperando por meses
Muchas gracias Zenen! De este sacaremos al menos dos clases a la semana, así que iremos rápidos y veloces, jeje- Un abrazo y a por ello!
Una genialidad tu trabajo. gracias profesor Juanjo. Exitos.
Muchas gracias, Iván!
Excelente estimado, como siempre eres calidad...!
Muchas gracias, Franc!
Excelente clase
Excelente, la explicación 100%
Muchas gracias!
He terminado el de VUE3 y Laravel... excelentes videos, Muchas gracias por tu esfuerzo, un genio!, aquí estamos a la espera de los siguientes videos de este curso! sería bueno implementar bootstrap o Vuetify para el front! (nose si sería posible incluir AdminLTE que es gratis)
gracias por tanto
¡Muchas gracias!
Exelente tutor, Cuando subes los demas videos
Bua lujazo!🎉
Muchas gracias Diego!
Excelente!
¡Muchas gracias!
muy bueno excelente
Muchas gracias!
siempre lo diré... Cómo haces para estar en muchas cosas? es increíble... ni siquiera he acabado el curso de Laravel y ya estás unos pasos más adelante... te felicito de corazón!
Muchas gracias! El secreto: dormir poco 🤣🤣
Enhorabuena, me ha encantado como has explicado (L)
Muchas gracias! 😊
Excelente
Muchas gracias Julio!
Ahora si se puso lo bueno.
jejeje
x2
Que buenos videos, esta tecnicamente completo, crees que podrias hacer algo para dockerizar todo el ambiente con docker compose, donde tengas un contenedor para el aplicativo monolito, otro con mysql, otro para el proyectito de cliente, creo que serian 3 contenedores en total los que pudieran convivir para este proyecto, estaria genial. Gracias por el material!
Videazo, muy bien explicado. Sería posible que en los componentes de vue integres algún template con bootstrap, muchos videos enseñan pero con tailwind y habemos muchos que por la parte del diseño preferimos bootstrap, y una última, ¿Para cuando estará la 2da parte?
Oído cocina!
Siguiente parte este lunes. Vamos a guardar lunes y miércoles para el taller
Hola. Muchas gracias por el curso, sirve un montón! Consulta, para cuándo estimas que estará por completo publicado acá en RUclips? Es decir, cuándo crees que saldrá la última parte?
Saludos!
Hola! Sí todo va bien , para Enero debería estar finalizado. En este caso hay un cliente que espera su entrega, por lo que habrá que darse prisa 😅
PERO QUE SORPRESA MAS GRATA!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Gracias por tu apoyo, César!
Yo estoy aprendiendo Laravel con su video, pero despues queria aprender Laravel + React, pero observo que usted enseña Vue.
Mi pregunta es?, es igual laravel + vue con la instalacion de laravel e inertia.
O es mejor tener una carpeta para laravel, y otra para vue realmente y completamente separados.
Vamos al lio.............gracias…una vez más....
¡Muchas gracias, David!
Este taller esta muy bueno muchas gracias, cada cuanto saldrá un nuevo video ?
Psdt sería genial un taller de Django con Vue.
La idea es sacar 2 a la semana. 👍
Oído cocina para Django vue!
Tengo laravel 11 y no me deja crear la migración del la tabla lessons y al parecer el problema esta en la asignacion de la foreign key
Gracias @GOGODEV por todo, nos vemos en el proximo y si tienes alguna noticia de mi github actions seria genial. me vive tirardo el error ese, que te mande la otra vez.
Ya te tengo la solución 👍. Nada más encuentre hueco te escribo por el discord y conectamos para subirla. Esta semana es que está siendo un poco caótica porque en dos estamos en Lisboa en el web summit, y hay mucho material que preparar, jeje.
@@GOGODEVuhhh genial, tranqui, espero, total ahora q esta el taller no voy a estar haciendo las prácticas.
Como comentario me me marco error en las migraciones por el tipo en las llaves foraneas unsignedInteger lo tuve quecambiar a unsignedBigInteger
Hola Juanjo, en el min 24:38 la relacion users--roles no seria uno a muchos ya que un usuario solo podria tener un rol?
Hola una consulta en que momento cuando creas el proyecto de laravel creas la parte de vue integrado en laravel, veo el video pero no lo analizo y ya en el segundo video tengo todo organizado migraciones seeders pero cuando llego a la parte del vue hay me quede, me podrias indicar, muy bueno el contenido de los videos, deseo continuar con lo que sigue
a mi me pregunta si para inertia me pregunta lo siguiente, es necesario una de estas configuraciones:
Would you like any optional features? [None]:
[none ] None
[api ] API support
[dark ] Dark mode
[verification] Email verification
[teams ] Team support
[ssr ] Inertia SSR
En este proyecto no se planea usar SSR o API?
Muchas gracias Mister Gogo
Gracias a ti por tu apoyo!
Genial!! 🤑
Una pregunta maestro el proyecto será api rest o monolito?
Veremos ambos.
La aplicación en sí misma será a través de API REST en Laravel con app vue con vite como consumidora.
El panel de administración del sistema para será en monolito con Inertia-Vue.
Tengo una pregunta en qué minuto se crearon los componentes de vue?
cuando actualizas el curso para laravel 11x?
Hola master, felicidades y gracias!! ¿Usaras Tailwinds?
Tomo nota de tailwind
mi duda es las clases de las funciones en los modelos no tendrian que ser privadas en lugar de publicas
En la documentación oficial de Laravel establecen el modificador de acceso para dichos métodos en public para ser utilizados por el generador de consultas; en cambio para los Accessors y Mutators la documentación los especifica en protected. Sigamos lo que nos dice la documentación oficial y así nos evitamos complicaciones más adelante en nuestros proyectos.
@@oswaldocalderon9535 no lo sabia evidentemente me as aclarado la duda
Buenas tardes , cuantos videos tendra el curso, y si usted sugier e usar inertia para panel administrativo existiendo otros como filament o adminlte? Muchas gracias por compartir su conocimiento.
¡Hola! La extensión la desconozco, ya que avanzaremos hasta finalizar todas las especificaciones, por lo que es difícil de prever. En cuanto al panel de administración, como siempre, depende. Para para paneles CRUD y no necesitan mucha personalización gráfica, quizás filament o orchid serían muy opciones. También depende por supuesto de la soltura que se tenga con vue + inertia, y lo habituados que estemos a trabajar con ellos. 👍
@@GOGODEV muchas gracias por su respuesta y muy contento por sus cursos , usted ha oído hablar de laravel splade? Me dijeron que era similar a inertia js, pero en este caso incrusta los componentes vue en la plantilla blade.
@@niobeldelpozonistal4385 Sí, es un mix entre blade e inertia para generar SPA's. Es muy interesante, si bien su uso aún no está tan extendido como el de inertia. A este último, quizás, le ha ayudado mucho el hecho de que paquetes principales como jetstream lo incluyan y trabajen con él, lo que ha favorecido su "estandarización" de uso
Cuando subes los siguientes videos?
El dos ya subido, y el 3 y el 4 salen mañana :) Disculpa la tardanza en constestar.
El orden para crear la tablas es importante de lo contrario hay errores en las migraciones
como ordeno la creacion de la tablas para que no me salga error. ? PorFavor?
@@fernandoiicerverajimenez4427 Primero hace levels, despues es indistinto
Holaa tienes algún video que explique como funcional el Laravel? soy nueva nueva...ví que estás desarrollando un Proyecto....pero como identificar cada una de las acciones que haces?
ruclips.net/video/aljDqJCYkIc/видео.html
Hola! Recien vuelvo con todo! Consulta, desde el comienzo hasta el minuto 13:35, son los requerimientos funcionales ? Verdad
Eso es, aunque de una forma 'poco ortodoxa', ya que en el vídeo se prima ir al código lo antes posible. Pero sí, sería un equivalente.
@@GOGODEV Barbaro! No fue al dope la materia de Ing. de Requermientos🤣
usan inertial ?
Que framework CSS / UI utilizarás tailwind, vuetify?
Para el admin panel vamos a ir con tailwind. Para la aplicación cliente todavía hay que decidirlo :)
sería muy bueno e instructivo fuera nuxt o quasar con sus respectivos ui
@@niobeldelpozonistal4385 oído cocina!
Sería bueno que uses un template admin boostrap 5
Oído cocina!
Que bn q no uses tanto paquete sino q uses
Laravel me gustaría recomendar un único paquete laravel módulos para hacer la aplicación más escalable y mantenible q bn q no uses paquetes como filament ni livewire q se limita a solo laravel con vue a amplían más más opciones
Muchas gracias!
Hola, me da error al generar la migración de la tabla lessons, ya que la tabla levels aun no está creada para que haga la relación foránea, pero veo que a ti te sale correcto, es algún tipo de configuración?
A mi me pasaba lo mismo, lo que hice fue, modificar en la migración lessons, la linea " $table->unsignedInteger('level_id');
" por " $table->unsignedBigInteger('level_id');", y ya me funcionó toodo
Yo uso Laravel 10 tambien me pasa creo que es eso. En el curso tambien tuve problemas
Lo he probado con
laravel 9 y el mismo fallo, en fin habra que dejar el curso
solucionado si no lo has resuelto dimelo y te digo lo que echo
@@josemanuelsanchezgil3063 que hiciste amigo?
Hola! Una consulta, mas o menos que tan complicado es .Vue. js para este proyecto ? No soy de .js 🤣. Recomiendas que vea el curso de Vue primero? yo a laravel lo utilizo a nivel monolito 😎
Puedes comenzar a ver el curso y, si ves que hay algún concepto de vue que no entiendes, yo suelo indicar la clase del curso de vue en la que lo tratamos
@@GOGODEV barbaro. Una consulta, este proyecto es el que corresponde con el cierre del curso Laravel a nivel profesional (primera parte MVC), o es de otra temática? Con Tailwinds habrá algún proyecto ? No requiere usar .js 😅
@@JC-df6eq Efectivamente, es ese. Hablamos sobre las diferentes opciones de frontal en el vídeo ;)
Una duda laravel trabaja mejor con vue? Todos los cursos que veo siempre son con vue, y yo estoy aprendiendo react😢
No te preocupes, puede usarse también con react. Vuen suele ser una opción común porque muchos paquetes lo integran por defecto en Laravel, pero también suelen hacerlo con react debido a su popularidad. En el caso de vue, el hecho de que sea open source ayuda a que se extienda su uso 👍
Tengo una consulta, a la hora de usar: php artisan migrate me da error: SQLSTATE[HY000]: General error: 1005 Can't create table `speaksmarter`.`lessons` (errno: 150 "Foreign key constraint is incorrectly formed") y esta tal cual que en el video...
Justamente tengo el mismo problema, ¿lograste solucionarlo?
Logré solucionarlo. Para ello, cambié el nombre del archivo "lessons" dentro de "migrations" cambiando el número que va después de la fecha de creación para que quedase abajo del todo siendo el valor "más grande" de todos.
Por ejemplo:
-> 2023_12_19_150100_create_lessons_table
Lo pasé a:
-> 2023_12_19_152122_create_lessons_table
También dentro de la migración de lessons, cambié:
De:
$table->unsignedInteger('level_id');
A:
$table->unsignedBigInteger('level_id');
@@alterskip7692 muchas gracias por compartir!! Tal vez sabes porqué debe ser BigInteger? cómo diste con esa solución? @gogodev
@@danieluxury¡No hay de qué! :D
Si te soy honesto, creo que simplemente lo busqué por Google y entre tantos foros, lo intenté y funcionó. No lo recuerdo exactamente, sorry.
muchas gracias,
me salvaste @@alterskip7692
Hola Juanjo estoy haciendo el curso y a la hora de hacer las migraciones me da un mensaje de error indicando que la clave foranea esta mal , he repasado tu video y no consigo que me funciones la migracion
Hola Adrián! Sí, es normal. Es por el orden en el que se crean las migraciones. Para que no te falle, en el orden de archivos de migración, el de la tabla referenciada debería ser anterior al que contiene la clave foránea, y no al revés. Con esto lo arreglas 👍
@@GOGODEV ya conseguí hacerlo gracias por el consejo
SQLSTATE[HY000]: General error: 1824 Failed to open the referenced table 'levels' (Connection: mysql, SQL: alter table `lessons` add constraint `lessons_level_id_foreign` foreign key (`level_id`) references `levels` (`id`) on delete cascade on update cascade) me sale este error ayuda por favor
Es debido a que la clave foránea referencia a una tabla que todavía no se ha creado. Se soluciona modificando el orden de las migraciones. En la siguiente clase, la número 2, justo comienzo explicando esto para aquellos a los que os ha ocurrido este error. 👍
Ya lo solucione de e otra forma. Pero gracias de todas formas. Y estupendo el proyecto y todos los contenidos del canal
Fui el like 666 😵
Ojala lo trabajes con microservicios para aprender más
Tendremos microservicios, conforme avancemos en el curso de Laravel hacia ellos, no te preocupes 👌👌
Que clase de brujeria es esa jaja como pasaste la creacion de la Foreign "level_id" en la migracion de Lessons, a mi me da error puesto que al momento de correr dicha migracion no existe la tabla "levels" tuve que poner esa relacion despues de que se crea la tabla levels.
😥😥😥😥😥😥 ya no puedo esperar al nuevo contenido
Trataremos de sacar dos vídeos por semana. No podemos hacer esperar mucho al cliente 😉
Usa AdminLTE para el backoffice
Oído cocina!
😂😂😂 odiando Figma muy fuerte jajaja
Jejeje se me dan fatal los programas de diseño
Muy larga la introducción 🥱🥱🥱
tapas el código con tu presencia. mejor ponte invisible