Con esta fusión implemento el apartado que permite a un profesor editar y crear el contenido de un curso (#93 y #94 ).
Para la realización de este apartado se han creado nuevos componente de Livewire que se encargan de la lógica y la visualización del mismo, que junto a Alpine.js y la librería SweetAlert 2 conforman todo la parte frontal de este apartado.
En esta sección podrá visualizar las secciones del curso, así como crear nuevas secciones o eliminar las existentes.
Por cada sección se listan sus lecciones, donde el profesor puede ver la información básica de cada una; su título , enlace al vídeo y plataforma a la que pertenece.
Al igual que con las secciones, puede crear nuevas lecciones o editar las existentes mediante un formulario.
Este formulario vuelve a usar la funcionalidad de autocompletar el slug, en este caso el de una lección a partir de su título, con la diferencia de que ahora se define como un método mágico del componente Livewire y no como un script de Javascript, ya que combinar eventos de livewire y alpine causaba conflictos.
Generación del iframe
De forma transparente al usuario he desarrollado un mecanismo mediante el que, a partir del enlace al vídeo que porporcione se generará el iframe que luego veremos en el visor de lecciones.
Esto es posible gracias al uso de expresiones regulares, con las que es posible segmentar la URL del enlace, y así local el ID del vídeo. Para cada plataforma será necesario definir el patrón de la expresión regular, así como el segmento en el que se ubica el ID del vídeo.
Estos patrones los he obtenido en Internet.
Observador de lecciones
Como novedad en el apartado técnico de la aplicación se ha definido un observador para las lecciones, el cual es un patrón de diseño que interviene en el momento de realizar ciertos cambios en los modelos. Laravel proporciona este mecanismo que he utilizado para trasladar la lógica que hay detrás de la composición del iframe.
Con este observador logro que el código del componente Livewire sea más limpio, aunque si no estás familiarizado con este concepto podría inducir a dudas, ya que en mi caso, al no ver que el iframe esta siendo prorporcionado por el observador, podría dar a pensar que no se está teniendo en cuenta.
Durante el desarrollo de este observador he detectado que sería adecuado incluir nuevas propiedades al modelo de la plataforma, ya que de lo contrario, el patrón de la regex, la posición del ID en la URL y el iframe tendrían que definirse manualmente dentro del observador, así como para validar la URL del formulario.
Con esta fusión implemento el apartado que permite a un profesor editar y crear el contenido de un curso (#93 y #94 ).
Para la realización de este apartado se han creado nuevos componente de Livewire que se encargan de la lógica y la visualización del mismo, que junto a Alpine.js y la librería SweetAlert 2 conforman todo la parte frontal de este apartado.
En esta sección podrá visualizar las secciones del curso, así como crear nuevas secciones o eliminar las existentes.
Por cada sección se listan sus lecciones, donde el profesor puede ver la información básica de cada una; su título , enlace al vídeo y plataforma a la que pertenece.
Al igual que con las secciones, puede crear nuevas lecciones o editar las existentes mediante un formulario.
Este formulario vuelve a usar la funcionalidad de autocompletar el slug, en este caso el de una lección a partir de su título, con la diferencia de que ahora se define como un método mágico del componente Livewire y no como un script de Javascript, ya que combinar eventos de livewire y alpine causaba conflictos.
Generación del iframe
De forma transparente al usuario he desarrollado un mecanismo mediante el que, a partir del enlace al vídeo que porporcione se generará el iframe que luego veremos en el visor de lecciones.
Esto es posible gracias al uso de expresiones regulares, con las que es posible segmentar la URL del enlace, y así local el ID del vídeo. Para cada plataforma será necesario definir el patrón de la expresión regular, así como el segmento en el que se ubica el ID del vídeo. Estos patrones los he obtenido en Internet.
Observador de lecciones
Como novedad en el apartado técnico de la aplicación se ha definido un observador para las lecciones, el cual es un patrón de diseño que interviene en el momento de realizar ciertos cambios en los modelos. Laravel proporciona este mecanismo que he utilizado para trasladar la lógica que hay detrás de la composición del iframe.
Con este observador logro que el código del componente Livewire sea más limpio, aunque si no estás familiarizado con este concepto podría inducir a dudas, ya que en mi caso, al no ver que el iframe esta siendo prorporcionado por el observador, podría dar a pensar que no se está teniendo en cuenta.
Durante el desarrollo de este observador he detectado que sería adecuado incluir nuevas propiedades al modelo de la plataforma, ya que de lo contrario, el patrón de la regex, la posición del ID en la URL y el iframe tendrían que definirse manualmente dentro del observador, así como para validar la URL del formulario.
Referencias
Capturas de pantalla
Listar secciones y lecciones
Formulario de lecciones