Actualización semana 17Fe-24Fe - Cursos Django Store y Vue + RestApi + Oruga UI + Tailwind
Youtube Blog - Django, Store, PayPal, listado, Filtrado, CodeIgniter, Vue, axios, Tailwind. Cursos Django Store y Vue + RestApi + Oruga UI + Tailwind
Hola a todos y bienvenidos otra vez a otras actualizaciones semanales y paso a hablar sobre todas las actualizaciones ocurridas desde el 17 de febrero hasta el 24 de febrero que es la fecha actual
YouTube y Blog
Aquí tenemos las actualizaciones de la semana pasada claro está.
Este primer bloque es o forma parte de la actualización que estoy haciendo el curso de CodeIgniter 4 que es referente a consumir nuestra RestAPI en CodeIgniter 4 mediante una aplicación en Vue Entonces estamos en la fase de entender el porqué de axios que es el reemplazo de los fetch aquí te hablo un poco sobre la ventaja que tenemos de acos sobre los getch por ejemplo el soporte y también una sintaxis un poco más expresiva y también aquí estamos conociendo ya que también la idea es conocer cómo funciona Vue es como quien dice un minicurso desde cero para Vue la reactividad en Vue en el uso de la async y la await justamente cuando estamos aquí haciendo la petición axios por lo demás aquí estamos también trabajando en la parte de obtener el detalle de una película para poder utilizar esta información como parte del formulario al momento de editar y finalmente enviar esta data al servidor
- Crear un proyecto en Django - 02 - https://www.youtube.com/watch?v=UawAf8-FbAQ
- Crear aplicación en Django, el mejor framework web para Python - 03 - https://www.youtube.com/watch?v=4E3gv4H8Hgg
- Modelos - Django Tienda en línea - 04 - https://www.youtube.com/watch?v=cCZRMxkI9TA
- Registrar aplicación y migraciones - Django Tienda en Línea - 05 - https://www.youtube.com/watch?v=gUc3i9VrvEw
- Vistas bases, listado y detalle - Tienda Online Django - 06 - https://www.youtube.com/watch?v=dW6GsiUiJKQ
Por aquí también tenemos la tienda en línea que estamos creando con diango que sería la aplicación que tenemos por aquí atrás entonces lo que estamos haciendo por acá es desde cero crear el proyecto esto también lo puedes tomar como una introducción rápida a lo que sería Django entonces si quieres aprender Django aquí estoy yendo un poquito más al grano más rápido aquí también creamos la aplicación primero el proyecto recordemos que primero tenemos que crear el proyecto un proyecto tiene cero o N aplicaciones entonces lo siguiente que hacemos vamos creando aquí los modelos que vamos a emplear para la aplicación en Django luego creamos las migraciones y las ejecutamos en nuestra base de datos y finalmente aquí también tenemos la vista pase que sería la la de listado y la de detalle ya que es otra vez una especie de tienda en línea muy sencillita aquí tenemos la de listado y aquí tenemos la de detalle :
- Axios en reemplazo de los fetch en la app de Vue 3 con CodeIgniter 4 - 10 - https://www.youtube.com/watch?v=29Fw8dKUHPQ
- Componente de listado: v-for, Reactividad y async await -15 - https://www.youtube.com/watch?v=A3EBE0sWGYk
- SaveComponent.vue: Editar: Obtener la película - Rest API CodeIgniter 4 - 30 - https://www.youtube.com/watch?v=gvqpwR1fCzM
- SaveComponent.vue: Editar: Enviar data al servidor - Api CodeIgniter 4 - 31 - https://www.youtube.com/watch?v=4rrT7ShgTts
Video promocional que ya también te voy a mostrar un poquito sobre cómo funciona que es es un visor web que estoy creando para los libros directamente en la web de Academia en este caso tenemos tanto la aplicación móvil con Flutter con menos funcionalidades y también lo tenemos en la aplicación web que es la que tiene más funcionalidades y voy agregando poco a poco.
Nueva funcionalidad en la App Academia, Visor web: Notas, Zoom y FullScreen - https://www.youtube.com/watch?v=B0vPMQteWCY
Aquí también para el nuevo canal lo mismo de siempre evaluando las evaluando mecánica jugabilidad y lo que puedes ver aquí de este juego que está viendo aquí en pantalla
Nueva funcionalidad en la App Academia, Visor web: Notas, Zoom y FullScreen - https://www.youtube.com/watch?v=B0vPMQteWCY
Vamos a este pequeño monstruo que es el que nos trae también a esta nueva actualización que hice a nivel de la aplicación de Academia:
https://academy.desarrollolibre.net/
El window.getSelection() selection nos permite dado un trozo de texto al momento de seleccionar poder hacer algo y esto viene siendo lo interesante el pequeño problema es que esto es un pequeño monstruo más que todo cóm funciona ya que lo que está haciendo aquí es dado este párrafo él me va a dar información sobre el texto seleccionado que en pocas palabras sería el rango y también el texto seleccionado ya con eso podemos hacer un montón de cosas entonces cuál es el problema varias cositas pero por ejemplo cuando queramos construir otra vez todo este toda esta selección ya que aquí estoy agregando por ejemplo una nota y en el mismo párrafo hay otra nota previa, la generación del rango depende de la posición de la primera nota, lo cual, hace que la nota dependa de la segunda y es un problema manejar todo el rango, eso es lo que explicamos en:
window.getSelection() en JavaScript - El suplicio de la selección de Texto - https://www.youtube.com/watch?v=_0Jl-iiGNro
Cursos y Libros
Estamos terminando lo que es a nivel del curso estamos aquí hablando Tailwind recordemos que en el curso lo que hicimos fue CodeIgniter 4 más una RestAPI más Vue y aquí también faltó colocar más oruga u entonces recordemos que oruga UI nos da ya los componentes listos pero no lo no como quien dice completamente finalizados siempre faltan algunos pading algunas cositas y para eso podemos emplear sss propio o directamente Tailwind que en este caso estamos empleando también Tailwind así que también vamos a ver los pasos de instalaciones que varían un poquito con referente a su predecesora vamos aí otra vez aplicando estilos puntuales por ejemplo para los textos diálogos de eliminar y lo que puedes ver aquí en pantalla definimos en componente de carta para mejorar la presentación y un poco más:
Tailwind: Textos
Vamos a personalizar el texto.
Tailwind: Diálogo de Eliminar
Vamos a trabajar en el diálogo de eliminar.
Tailwind: Mostrar operación a realizar en Formulario
Vamos a mostrar la operación a realizar en el formulario.
Tailwind: Carta
Vamos a crear un componente de carta.
Acomodar alineado SaveComponent
Vamos a acomodar el estilo de la página de SaveComponent.
Acomodar alineado SaveComponent: Parte 2
Vamos a completar el ejercicio anterior.
ListComponent.vue: Mostrar label del registro a eliminar
Vamos a mostrar en el diálogo, el título de la película a eliminar.
Tarea: CRUD categorías
Vas a crear el CRUD para las categorías.
También aquí tenemos lo que es la tienda en línea en Django 5 en la cual estamos trabajando la parte de el listado que era el que puedes ver por acá aquí tenemos para limpiar los filtros seleccionar la categoría y todo esto lo estamos haciendo con dango directamente y a partir de aquí vamos a implementar una pequeña tienda en línea que es la idea de la temática de esta sección por lo tanto vamos a hacerlo mediante PayPal vamos a conocer un poco que es el ppal el modo de desarrollo para obtener las claves y todo lo demás y poder comunicarnos con es Api la parte de cómo crear configuraciones personalizadas en de dango para poder establecer esas claves en un lugar seguro y que simplemente la podos referenciar y no tener que estar copiando y pegando cada rato la misma bendita clave en toda la aplicación sino tenerlas en un solo lugar y luego la referenciamos y luego a partir de Aquí hacemos las primeras configuraciones con el plugin de PayPal que sería el que puedes ver por acá comenzamos con el cliente y luego estamos ya pasando al servidor qué es lo que estamos manejando por acá así que eso serían todas las actualizaciones para esta semana:
Listado: Establecer los valores del servidor
Vamos a establecer los valores en el filtro del servidor.
Listado: Limpiar Filtro
Vamos a implementar un botón de limpiar filtro.
PayPal: Modo Desarrollador
Vamos a hablar sobre cómo implementar PayPal en la app en Django.
PayPal: Cliente: Primeros pasos
Vamos a configurar el JS de Paypal CDN.
Configuraciones personalizadas en Django
Vamos a aprender a crear nuestras propias configuraciones.
PayPal Cliente: Configurar Monto
Vamos a configurar el monto al plugin de PayPal.
PayPal Cliente: onApprove
Vamos a implementar la función para aprobar la orden el el cliente.
Enviar ordenID al servidor
Vamos a pasar la orden al servidor.
PayPal Servidor, Paquete para realizar peticiones http
Instalamos un paquete para realizar peticiones HTTP.
PayPal Servidor, Crear clase PayPal
Creamos la clase PayPal para manejar los pagos.
Sin más que decir nos vemos la semana próxima
- Andrés Cruz
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter