Update week 17Fe-24Fe - Django Store and Vue + RestApi + Oruga UI + Tailwind courses

Youtube Blog - Django, Store, PayPal, Listing, Filtering, CodeIgniter, Vue, Axios, Tailwind. Courses Django Store and Vue + RestApi + Caterpillar UI + Tailwind

Hello everyone and welcome back to another weekly update and I'm going to talk about all the updates that occurred from February 17th to February 24th which is the current date.

YouTube and Blog

Here we have the updates from last week of course.

This first block is or is part of the update that I am doing on the CodeIgniter 4 course that is about consuming our RestAPI in CodeIgniter 4 through a Vue application. So we are in the phase of understanding why axios is the replacement for fetch. Here I talk to you a little about the advantage that we have of acos over getch, for example the support and also a slightly more expressive syntax. Here we are also getting to know how Vue works, it is like saying a mini-course from scratch for Vue, the reactivity in Vue in the use of async and await, just when we are here making the axios request. Otherwise, here we are also working on the part of obtaining the details of a movie to be able to use this information as part of the form when editing and finally sending this data to the server.

• 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

Here we also have the online store that we are creating with diango, which would be the application that we have back here, so what we are doing here is creating the project from scratch, you can also take this as a quick introduction to what Django would be, so if you want to learn Django, here I am getting a little more to the point, faster. Here we also create the application, first the project, remember that first we have to create the project, a project has zero or N applications, so the next thing we do is create the models here that we are going to use for the application in Django, then we create the migrations and execute them in our database and finally here we also have the pass view, which would be the list view and the detail view since it is again a kind of very simple online store, here we have the list view and here we have the detail view:

• 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

Promotional video that I'm also going to show you a little about how it works, which is a web viewer that I'm creating for the books directly on the Academia website. In this case, we have both the mobile application with Flutter with fewer features and we also have it in the web application, which is the one with the most features and I'm adding it little by little.

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/

The window.getSelection() selection allows us given a piece of text at the time of selecting to be able to do something and this is being the interesting thing the little problem is that this is a little monster more than all how it works since what it is doing here is given this paragraph it will give me information about the selected text which in a few words would be the range and also the selected text and with that we can do a lot of things so what is the problem several little things but for example when we want to build again all this selection since here I am adding for example a note and in the same paragraph there is another previous note, the generation of the range depends on the position of the first note, which makes the note depend on the second and it is a problem to manage the entire range, that is what we explain in:

window.getSelection() en JavaScript - El suplicio de la selección de Texto - https://www.youtube.com/watch?v=_0Jl-iiGNro

Courses and Books

We are finishing what is at the course level, we are here talking about Tailwind, remember that in the course what we did was CodeIgniter 4 plus a RestAPI plus Vue and here we also missed placing more caterpillar u then remember that caterpillar UI gives us the components ready but not as who says completely finished, there are always some pading missing, some things and for that we can use our own sss or directly Tailwind, in this case we are also using Tailwind, so we are also going to see the installation steps that vary a little with reference to its predecessor, let's go there again applying specific styles, for example for the texts, delete dialogs and what you can see here on the screen we define in the letter component to improve the presentation and a little more:

1. Tailwind: Textos

   1. Vamos a personalizar el texto.

2. Tailwind: Diálogo de Eliminar

   1. Vamos a trabajar en el diálogo de eliminar.

3. Tailwind: Mostrar operación a realizar en Formulario

   1. Vamos a mostrar la operación a realizar en el formulario.

4. Tailwind: Carta

   1. Vamos a crear un componente de carta.

5. Acomodar alineado SaveComponent

   1. Vamos a acomodar el estilo de la página de SaveComponent.

6. Acomodar alineado SaveComponent: Parte 2

   1. Vamos a completar el ejercicio anterior.

7. ListComponent.vue: Mostrar label del registro a eliminar

   1. Vamos a mostrar en el diálogo, el título de la película a eliminar.

8. Tarea: CRUD categorías

   1. Vas a crear el CRUD para las categorías.

Also here we have what is the online store in Django 5 in which we are working on the listing part that was the one you can see here we have to clean the filters, select the category and all this we are doing directly with dango and from here we are going to implement a small online store which is the idea of ​​the theme of this section therefore we are going to do it through PayPal we are going to learn a little about what the main development mode is to obtain the keys and everything else and to be able to communicate with the Api the part of how to create custom configurations in dango to be able to establish those keys in a safe place and that we can simply reference it and not have to be copying and pasting the same blessed key every time throughout the application but have them in one place and then we reference it and then from here we make the first configurations with the PayPal plugin that would be the one you can see here we start with the client and then we are already moving on to the server which is what we are handling here so that would be all the updates for this week:

1. Listado: Establecer los valores del servidor

   1. Vamos a establecer los valores en el filtro del servidor.

2. Listado: Limpiar Filtro

   1. Vamos a implementar un botón de limpiar filtro.

3. PayPal: Modo Desarrollador

   1. Vamos a hablar sobre cómo implementar PayPal en la app en Django.

4. PayPal: Cliente: Primeros pasos

   1. Vamos a configurar el JS de Paypal CDN.

5. Configuraciones personalizadas en Django

   1. Vamos a aprender a crear nuestras propias configuraciones.

6. PayPal Cliente: Configurar Monto

   1. Vamos a configurar el monto al plugin de PayPal.

7. PayPal Cliente: onApprove

   1. Vamos a implementar la función para aprobar la orden el el cliente.

8. Enviar ordenID al servidor

   1. Vamos a pasar la orden al servidor.

9. PayPal Servidor, Paquete para realizar peticiones http

   1. Instalamos un paquete para realizar peticiones HTTP.

10. PayPal Servidor, Crear clase PayPal

    1. Creamos la clase PayPal para manejar los pagos.

Without further ado, see you next week.

24-02-2025 - Andrés Cruz

En español