Reutilización y Modularización de componentes con Laravel y Vue
Aquí quería mostrarte rapidito un componente que intenté ser bastante reutilizable por el uso que yo lo voy a dar que viene siendo el de pago este video va a ser un poquito largo porque te quiero mostrar muchas cosas pero espero que te haya te vaya resultar a la final un poco interesante al menos entender un poco como yo modularize un poco mis componentes es decir aquí yo fíjate que yo en la parte de Academia que es lab en la cual yo vendo tanto los cursos como los pad y también ahora estoy vendiendo los libros entonces básicamente son tres plataformas de pago distintas porque una cosa es comprar un pad otra cosa es comprar un libro y otra cosa es comprar un curso aunque esto depende mucho de ti te voy contando un poquito También la historia recuerda que yo comencé vendiendo primero los cursos y ahorita recientemente a la fecha en la cual grabé este video No lleva ni una semana al aire estoy vendiendo también los libros y de por medio también aquí empecé a vender los pack que los pack en caso de que no lo sepas es un conjunto de bueno pueden ser puros cursos pueden ser cursos y libros o pueden ser puros libros de momento son cursos y libros creo que no tengo ninguno con puros libros por ejemplo este son puros cursos entonces son paquetes pero por más que sea como puedes suponer es un tratamiento distinto sobre todo para el de los cursos y los libros aunque así aquí haciendo un pequeño paréntesis esto otra vez depende mucho de ti ya que a la final los cursos y los libros son estructuralmente similares tiene un título tiene un subtítulo tiene la descripción tiene contenido pero por más que sea los cursos van un poco más allá ya que lo tienes que estructurar en secciones y clases mientras que los libros es un simplemente un archivo y ya claro esto se puede manejar mediante una tabla relacional etcétera y hago todo esto porque recuerda que también aquí tenemos lo que son las relaciones polimórficas Yo nada más lo conozco en Laravel no conozco que otro framework lo maneje No es que sea la octava maravilla del mundo ya que lo podemos simular fácilmente pero por más que sea el Laravel Ya lo tenemos implementado de gratis te enseño un poquito la estructura la estructura de mis datos en caso de que te interese aquí tengo un problema Te lo estoy mostrando es directamente en el servidor porque Actualmente estoy trabajando con el CKEditor y lo deja a medias Entonces no me está arrancando la aplicación aquí aquí tengo el modelo de los Book que los libros aquí tenemos los campos y aquí el de los cursos que lo llamé aquí tutorial entonces son muy similares pero por más que sea lo maneje aparte esto otra vez antes de enseñarte la parte de los componentes una pequeña moraleja y es que por más que sea cuesta un poco a veces al principio como que modularizar todo ya que inicialmente tú dices Bueno voy a vender los cursos y ya pero pasado el tiempo tú dices Oye también voy a vender otra cosa entonces ahí hubiera hecho buena idea de que hubiera creado esta estructura más modular tal cual empecé ahorita hacer un poco con los libros no tanto a veces la estructura en sí porque a la final esto tiene sus eventualidades es de siempre va a tener Campos distintos entonces ahí o pudieras crear una genérica y luego crear algunas referenciales pero Ne es decir una fk pero siempre va a salir algo mal por ahí que te va a mandar todo el demonio entonces pero la parte de los pagos sí lo quise hacer más genérico ya que ese también es una parte pesada aquí yo la manej de cierta forma indicando tutorial payments tal cual puedes ver aquí pero aquí yo la manej un poco más flexible para los Boot y lo manej en un archivo llamado File payment As y ya en la cual se maneja lo que es el user el estatus bueno Esto s si está suscrito no es decir si por ejemplo lo devolvió aunque no tengo nada esto implementado todavía en el sistema el pago la razón por lo que lo abandonó es decir lo que está pidiendo la devolución el orden ID si utiliz un cupón el precio el fin payment ID Fíjate que ya esto es una relación polimórfica y es para que sea otra vez flexible ya que ahorita estoy vendiendo los libros Pero puede que más adelante decida vender no sé cositas en Blender o más adelante decida vender los videos o cualquier otro tipo de archivo que yo quiera otra vez promocionar desde mi web entonces por eso que lo manej de esta forma para que sea flexible ya que la parte del pago si es lo mismo para cualquier recurso que tú quieras vender va a tener la información que estás viendo en pantalla y es por eso al menos este sí lo quise dejar de esta forma para que pueda ser reutilizable fácilmente y te explico todo este infierno antes de entrar al detalle es porque a la final todo esto se maneja mediante pago y me parecía importante explicarte un poquito qué estructura tenía ahí por detrás Entonces ya a partir de ahora si te voy a explicar un poco lo que es la composición del plugin o mejor dicho qué es lo que hace el plugin Entonces por aquí por ejemplo Fíjate en este caso estoy autenticado es importante que lo notes estoy autenticado aquí tengo otra en la cual no estoy autenticado es una ventana de incógnito y ya ofrece algunas opciones Esta es el plugin que te voy a mostrar ahorita Bueno le llamo plugin pero es un componente Tenemos aquí la parte del cupón Y si está listo para pagar si doy aquí estoy listo para pagar me va a indicar o me va a mostrar el plugin de PayPal que a la fecha es el único que yo tengo disponible más adelante voy a colocar stripe por ejemplo y por aquí me me indica Cuál es el cobro Perfecto entonces e si no estoy autenticado y vengo aquí por ejemplo a pad fíjate voy a seleccionar cualquiera Fíjate que por aquí me da aquí inici són ya que tiene que tener un un usuario al cual va a destinar la compra en este caso sería que est autenticado pero aquí también tengo la opción de regalar un curso o el pack o lo que sea aquí no aparece porque no no lo habilité para acá pero aquí sí por ejemplo aparece si voy a otro contenido y aquí puedes ver otra diferencia aquí si por ejemplo voy a libro voy a abrir también aquí el de cursos voy a intentar comprar uno de estos libros doy a detalle aquí lo mismo Fíjate que aquí si aparece la opción de regalar el libro en la cual puedes colocar el email de la persona a la cual le quieres regalar el libro o en este caso el recurso Aquí también fíjate que cambian un poquito los textos aquí es regalar libro aquí por ejemplo para el de cursos voy a buscar alguno Que no que no tenga registrado va a aparecer es regalar el curso aquí es libros y aquí es cursos entonces puedes ir viendo un poco las diferencias ojo que otra vez Este es el personaje que estoy haciendo reutilizable Y ya creo que puedes ver el Por qué de esto porque es bastante opciones que yo tenemos y poco a poco lo he ido trabajando para que funcione de esta manera aquí esto Esto si no lo tengo a la mano que si coloco aquí un cupón el mismo recarga en base al precio que estemos colocando aquí que en este caso Son 5 pero si aplicas un cupón de $ automáticamente se coloca aquí $ aquí también puedes ver que empecé a ocultar o lo hice paso por paso para precisamente sea un poco más bueno entendible a la vista ya que hay algunas personas que me comentaron que se enredaban un poquito ya que cuando por ejemplo aplicaba el cupón lo que hacía era siempre aparecía el diálogo de PayPal por aquí entonces cuando yo aplicaba al el cupón lo que hacía era recargar o Llamar otra vez a una función que tengo ahí llamada PayPal nuevamente para construir Esto entonces se llamaba dos veces y parece que algunas personas me dijeron que le daba problemas Y a partir de ahí lo quise colocar un poco más claro más claro para que se entienda mejor ya que por ejemplo aquí no puedes avanzar O al menos que le aquí estoy listo para pagar pero creo que queda más entendible que tienes que aplicar el cupón antes de decir que vas a avanzar y aquí también aprovecha para colocar todas esas validaciones de que si por ejemplo estoy en incógnito y no auténtico me indica el botón de debes Iniciar sesión para comprar el curso cosa que no te va a aparecer Aquí sí ya tú inicias sesión por ejemplo por acá entonces puedes ver que es un poquito diferente y tiene varias opciones disponibles en resumen la parte del cupón si quieres regalar el curso que solamente lo tengo activo para los libros y los cursos para el pad no lo coloqué bueno el pad sería el que te mostraba por aquí y también en la navegación que tiene entonces aquí es un poco lo que en base a la al al esquema de modelos que te explicaba por acá me gustaría que analizaras comoo tú lo pudieras hacer modular para que lo puedas emplear en todas estas partes y otra vez ya creo que queda bastante Clara la razón ya que es un plugin un poquito extenso y se hace fastidioso si más adelante decido vender otra cosa que tenga que implementar todo esto otra vez y si en algún punto decido cambiar alguna característica de de uno no sé agregarle aquí otra opción más o una opción de regalar Ah no mentira también hay un cuarto caso que es cuando el recurso es gratis voy a buscar aquí alguno gratis lo que pasa es que creo que no tengo ya creo que los tengo registrad y aquí Este me está matando este no quiere funcionar No no va a funcionar pero si bueno de aquí creo que si lo puedo ver desde aquí que auténtica Pero al menos debería demostrar el el botón creo em ir gratis cursos a ver aquí hay uno Ver gratis ver a detalles creo que era aquí no era el otro e vengo aquí está Ver gratis no ya me registró para ver ahora se me olvidó cómo funciona mi aplicación Qué bonito No creo que detecta que no estoy autenticado y me manda para acá pero bueno si el recurso es gratis te aparece un botón que dice Ver gratis entonces todo eso lo hace el plugin que configuré en pantalla a la final Como te indicaba Son recursos distintos es decir libros cursos pad etcétera por lo tanto van a ser procesados ya que son modelos distintos desde controladores distintos ya que a la final esto es una aplicación en View que se conecta a una rapi entonces Te pudieras preguntar cómo hice esa conexión para hacerlo lo más modular posible ya sería complicado según la estructura Entonces por aquí voy a cerrar todo esto el componente lo llamé como payment plugin yo puedo payment aquí está payment plugin y voy a buscarlo aquí para ver dónde lo estamos empleando payment plugin aquí lo estoy empleando en estos tres lugares que son el de los cursos Bueno aquí Este es el de los libros el del pad y el de los cursos tal cu puedes ver y lo estoy empleando el componente que tenemos acá que es el que se encarga de hacer todo ese proceso Como te indicaba te voy a mostrar aquí un poquito los condicionales Aquí tengo la parte del regalo Aquí tengo la parte de aplicar el cupón aquí lo dej los comentarios aquí si es gratis Bueno aquí si está cargando aquí si también verifica si ya tienes por ejemplo en el pad que es el más complicado si ya voy descontando el el item Entonces si ya tienes todos los items de ese curso o de ese pad ya te indica aquí que ya tienes todo entonces te muestra otra cosa entonces puedes ver que hace muchas cositas el componente aquí el precio si es gratis Entonces no muestra esto no muestra esta parte de pago sino directamente se va un botón un botón que dice registrarse gratis o algo por el estilo que está bueno por ahí está bueno
Modularizar y reutilizar
Aquí un poco la magia que es un poco obvio es la parte de los usos de los Pro en este caso es para por ejemplo indica si es un paquete en este caso es para precisamente habilitar des habilitar la parte de regalar a otra persona entonces para eso puedo emplear esto aquí también la descripción bueno Esto es para la parte del manejo de PayPal Aquí es importante Por más que sea lo que procesa esto por detrás es un es un método en la resapi por lo tanto lo único que cambia es el slot el slot para procesar el archivo la cual Bueno A parte del slot también cambia lo que es la url y es por eso que aquí también le paso mediante para ver dónde está aquí está te muestro un poquito el proceso para que se entiendo un poco mejor qué es lo que hace por acá Bueno Este es el botón que indica si ya estás listo para pagar Entonces ya coloca de una el diálogo de PayPal y es por eso que llama esta función esta para la parte de regalar a otra persona que hace una verificación en este caso para mí es global Entonces lo establecí de esta forma pero en caso de que la ruta a la cual tú quieras llamar no sea global lo que pudieras hacer por aquí sería justamente aquí Este es el plugin de PayPal si ya viste ese curso ya esto no te debe parecer ninguna sorpresa pero fíjate que por más que sea la URL de proceso que indica que todo está okay Y es la que realmente procesa la orden es otra va a ser una URL distinta si es el pad si es un libro O si es un curso y por lo tanto se lo paso simplemente como parámetro pero lo que tenemos que ver que eso puede que cuesta a veces un poco que la final el proceso es el mismo independientemente de la URL Y de lo que realice en el servidor le vale le vale poco lo que a viu le interesa es pasarle los parámetros que él va a requerir que en este caso tenemos algunos comunes como es la slut que es el yo lo manej como si fuera el ID e la orden de PayPal para registrarlo en la base de datos y el cupón que puedo utilizar cupones en toda la aplicación aquí tenemos algunos parámetros adicionales que es otro punto importante que son estos parámetros adicionales si venimos acá que es un poco también lo diferente que tenemos aquí con los libros es que si voy a comprar alguno fíjate que por aquí arriba Aunque depende del libro o perdón depende del recurso te puede aparecer estas opciones tengo dos realmente voy a ver si encuentro uno con todas las opciones o lo puedo ver de acá no de aquí lo puedo ver mejor vengo aquí a cursos voy darle al del árabe que lo tiene todo este es el gratis este por ejemplo no este también lo lo tiene todo aquí fíjate Ah no tiene uno qué desgracia ya déjame buscarlo aquí está yo coloco estos diálogos bueno estos estas cajita para variar aquí el precio Fíjate que por defecto es ocho por lo tanto si aquí le doy Ya estoy listo me indicar que son $8 y si selecciono alguno de ellos por aquí me va a variar el precio pero fíjate que estos componentes no se encuentran a nivel y no tiene sentido que lo coloque aquí a nivel del payment Por qué no lo coloco aquí adentro porque yo quiero hacer el y lo más reutilizable posible y aquí otro punto que tenemos importante y es que tenemos que determinar Qué tipo de acciones es la que estamos implementando y si van a ser utilizables a lo largo de nuestra aplicación ya que oj esto lo pudiéramos colocar aquí perfectamente pero el problema es que ahí tenemos que colocar en condicional más para especificar Si queremos activar o no estas acciones según el recurso que queramos vender cosa que para mí no tiene sentido Ya que solamente se van a vender o se van a aplicar en los cursos ni en los libros ni en el pack por lo tanto es esto yo lo definí directamente en el de los cursos tal cual puedes ver por aquí y mediante las keys que puedes ver aquí que varía el precio lo que hago es redibujar el componente en cuestión voy a buscar aquí el de payment aquí Fíjate que le pasé la k Cuál es la aquí por ejemplo el precio el precio que va variando según la Selección del usuario y ahí puedes ver por cómo se redibuje el componente de de PayPal que tenemos aquí ya que la idea es que el primero el usuario seleccione estas opciones y a partir de ahí entonces habilite el resto del proceso que sería el pago también pueder ocultar esto mientras selecciona esto pero lo que pasa que seguramente el usuario no lo va a seleccionar o mejor dicho esto es opcional y por lo tanto lo dejé todo Al mismo nivel pero por más que sea si la adelanta aquí entonces Y selecciona esto por ejemplo aquí lo di estoy listo para pagar vas a ver que todo se redibuje otra vez y mediante el aquí entonces aquí también tienes un punto importante y es saber cuándo tienes que colocar ciertas características que sean reutilizables y cuando no en este caso otra vez para mí no tenía sentido colocar esos dos globos de manera reutilizable y qué coloca reutilizable lo que es el procesamiento lo que es el precio básicamente los props que puedes ver por acá y es la forma en la cual yo hice que el componente fuera reutilizable Mediante los props que otra vez yendo un poquito arriba son los que tenemos acá y precisamente es por eso que necesitamos esto de extra parámetros para la ruta de éxito que es para indicar en este caso si el usuario seleccionó o no esto y y a nivel del del del servidor le habilito esas características o no se las habilito según si las compró o no las compró y esto es precisamente el extrap suc Road que tenemos acá que si no tiene nada entonces le pasa un objeto vacío Recuerda que este es el operador de propagación que lo esto es un objeto Entonces esto también entonces propaga todo el objeto dentro de Dentro de este otro objeto y se lo pasa a la ruta de manera exitosa que tenga aquí configurada como puedes ver es un poco abstracto todo pero de esta forma lo logré modularizar y lo puedo utilizar este componente de de pago en cualquier parte y es básicamente eso lo que tienes que tener en mente lo primero es desde el lado del servidor ya para concluir un poco del lado del servidor tienes que hacer todo lo más modular posible que sea similar en el en la implementación en este caso todas mis rutas de éxito una vez comprada el recurso tienen una ruta a la cual llegar mediante el slot y es por eso que pude reutilizar todo mediante la ruta del slot y por más que sea también le paso aquí ya que es otra ruta ya que son recursos distintos aquí le suministro cuál es la ruta a la cual se tiene que ir o la cual se tiene que dirigir y le puede variar sol Los parámetros y es por eso que lo maneje de esta forma y se trata un poco de eso de ir analizando poco a poco cada movimiento que va a ser el componente para ir viendo cómo lo analizas y con los props es tu mejor ayuda para hacer precisamente esta labor Fíjate que por ejemplo hay rutas que aunque las definí aquí realmente no hace falta definirla por ejemplo la parte de El cupón yo lo evolucion para que también sea de tipo polimórfico y ahora lo puedo aplicar para los pad para los libros y para los cursos y cualquier otra cosa que quiera crear simplemente le coloca aquí Academy cupón y por aquí tenemos la relación polimórfica entonces también aquí podemos aprovechar lo que es lo que tenemos de la lado del Laravel es decir qué nos ofrece Laravel en este caso para hacer cosas reutilizables el Laravel nos ofrece las relaciones polimórficas y les Estoy aprovechando junto con los componentes en este caso es otra vez esta ruta no haría falta la de aplicar un cupón Ya que en base al comportamiento a la estructura que tenemos aquí el comportamiento es común en cualquier recurso que queramos aplicar un cupón pero aú así se lo pasé entonces Bueno espero que haya quedado un poco claro cualquier cosa que no entiendas Ya que s sé que es un poco abstracto pero aún así lo quise hacer por si te parece algo interesante o me entiendes algo de todo lo que yo comenté por aquí eh cualquier duda que tengas ahí me lo puedes comentar y cualquier cosa otro video te respondo ahí directamente en el comentario Así que nos vemos en otro video.
- Andrés Cruz
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter