Update for week 28-04Nov - Vue + Rest API Laravel, Drawer in Flutter, Inertia Tests


Hello everyone, welcome to another week in which I will tell you about the updates for the week of October 28th to November 4th.

YouTube

So here we start with a demo, in this case for the todolist type application for the Laravel inertia course. Here we have what is precisely a video that I published of the entire application that we built that I found interesting and that is that when we click on simply a spam, for example a P, whatever you want, we convert it to a Test field, an input so that we can edit it. This was, as they say, a little trick that we did there to be able to edit everything online.

We have what is part of the basic Laravel course, the Laravel course that I am publishing from the previous version that is for the Rest API. We are there creating an application with Vue and consuming the Rest API and in this case to create a post, the update from last week.

Another very interesting video that is focused on either inertia or Livewire, it doesn't matter, but it is for the listeners part. The listeners are directly for Laravel, how you can register them, or well, how the schema works. Here we have the Livewire computed properties.

I'm telling you about a video that is personal again because I consider, at least for me, that Google Keep is the best ally for what is a developer in this case like me, even for day-to-day notes since it is a completely free application, it is a multiplatform application and unlike Evernote, which was also free before, it will not keep popping up an alert every time and it will not block us for a certain number of computers. In which you have to have the application installed, which in Evern would only be two, and since it is from Google, I really like Google services, it is integrated with everything else, so it works great for me. It could improve a little bit what is the management of the text content, which seems a little simple to me, but it works quite well. We can copy images from the clipboard, we can put a simple list like the one we see below by placing the asterisk and little else.

Another personal video in this case to create a custom scaffold in this case it is associated with Flutter another thing that I recommend that is exactly what I did for the Academy application that I repeat certain styles So this is what I did I created a custom scaffold a personalized widget that I simply used instead of the traditional scaffold on each of the pages I used this to be able for example to take advantage of the Drawer and any other configuration that you want to put there to execute before starting after pages or whatever you want.

It is also part of the basic Laravel course in this case for the update and creation process and this would be the update but the same as I was telling you.

This is to remove characters from CKEDITOR in this case associated with the Livewire course and this is interesting for when you are copying html content that I have not published the video to date but suppose that eh is one you are copying html content from a third party agent, that is to say for example I do it from Google docs that I am exporting the books then it generates many attributes many things that I do not want I want to clean it a little before saving it then I do it just before saving in the database just when I am getting the data from the sec editor I do an additional process to clean up all these attributes that I do not want here through the source tab remember that you can do this operation here we continue this is also a video a bit of a personal nature is for the configuration parts of the environment var are my recommendations that I make to you when you want to upload a project in Laravel to production that in a few words always has to simplify the file as much as possible so that you do not have any problem in production more than anything so that some configuration can be changed quickly when we are doing some test we do not realize since when the configurations are at the level of the corresponding folders or the corresponding files, the pune file is much safer, it is more than everything is focused on the development part at least That is my recommendation to you.

Review of the unit tests since right now in the Laravel inertia course I am working with the unit or integration tests and here I am starting the section is doing a review of the tests in case you are also interested in working with the tests, with this we finish everything that is related to the YouTube publication.

Courses

So now we go with the updates at the level of the courses that I continue working on in the Livewire and Inertia courses here in the Livewire course that remembers that what is used here is vitaminized components in Laravel with Blade then to make the client part more versatile, Alpine is used. This if we compare it with Inertia that uses Vue, then here we are giving a small introduction to the pjs knowing its basic characteristics. If you already know Vue, you are in luck since it is more or less the same 80% 70% of the framework, you can say that it is practically the same but removing the V for an X and some other thing there in the way in which the components are implemented, here is a class that I had missed for the todolist application that I finished last week and there are some synchronization problems that we have in inertia, then I am showing you there some cb that we have that we can use to reload in a certain way not the page but the Proc of all so that they are displayed based on the creation and deletion changes, here the testing part. as I was telling you, we start with a step, a basic test starting from what we have, the basic arab, what we already know from the basic course and here we see the small changes since remember that here in basic Laravel we are going to be a Blade and here it would already be an emp component, so obviously things change, we have a very interesting object there which is the page object that we have both at the time of development and also in the tests, so here we are going to know it a little more in detail since we need to know the structure that we have for the tests, that is to say, this blessed assertion method that we have here to know exactly what we have there, what we can evaluate and well here are some very important methods, the has and the where, which I told you about in the course, the has is to simply test that the PR is there and the We we can already test it with a specific value, as you can see here, here we test which categories exist and here we already test for a specific value. Well here are some more things that you can do in this way to test a specific value, we finish the test and now with this, this This is what I just recorded in the part of finishing the test for the detailed blog module and also starting with the listing one. Now we need to configure the authentication database and so on. But let's go to the home, we continue a little bit with what is the shopping cart here. We are finishing some details, or rather, here we are finishing the details since the last section is this one for Alpin and that's it.

Introducción a Alpine JS

  1. Introducción a Alpine.js

    1. Vamos a hablar un poco sobre el framework.

  2. Livewire y Alpine

    1. Vamos a comparar ambos frameworks.

  3. Preparar un proyecto

    1. Vamos a crear un proyecto para trabajar con Alpine.

  4. Mostrar contenido HTML con variables reactivas: x-data, click y x-show

    1. Vamos a conocer el esquema básico, con un componente para mostrar u ocultar bajo demanda.

  5. Campos de textos y variables: x-model y x-text

    1. Vamos a mapear una variable a un campo de texto.

  6. Atributos: x-bind

    1. Vamos a presentar el bind de atributos.

  7. Atributos: clases

    1. Vamos a mostrar el bind de clases.

Integración con Inertia - To Do List

  1. Extra: Problemas de Sync, Otras soluciones

    1. Vamos a dar algunas consideraciones que puedes tener en cuenta para sincronizar las operaciones.

Integración con Inertia - Pruebas

  1. Repaso

    1. Presentamos conceptos claves e importancias de las pruebas.

  2. Prueba base

    1. Vamos a crear la prueba básica como lo haríamos en Laravel básico.

  4. De Laravel a Inertia

    1. Vamos a conocer el método de aserción de inertia.

  5. Objeto $page

    1. Conoceremos el objeto de page retornado por el método de aserción.

  6. Método has

    1. Vamos a conocer cómo emplear el método de has.

  8. Método where

    1. Vamos a conocer el método de where para comprobar por valores.

  9. has y where: Anidaciones

    1. Vamos a conocer cómo inspeccionar datos anidados.

  10. Terminar la prueba

    1. Palabras finales sobre la prueba actual.

  12. Blog: Prueba para el detalle

    1. Crearemos la prueba para el detalle de un post en el blog.

  13. Dashboard: Prueba para listado

    1. Prueba para el dashboard del listado.

  14. Dashboard, Categoría: Prueba para crear, GET

    1. Prueba para el formulario de creación de una categoría

 

Integración con Livewire - Carrito Compras

  1. Correcciones y actualizar cantidades del ítem en el carrito

    1. Voy a mostrarte los cambios realizados para reparar el error que aparecía al momento de agregar el item y de modificar cantidades.

  2. Calcular total de ítems

  3. Vamos a calcular el total de elementos en el carrito.

  4. Mostrar carrito con el total

    1. Vamos a mostrar el total en una vista y crear el botón de carrito mostrando el total.

Blog

As for the blog, it's more or less the same here we have How can you manage user preferences is a json field it's a fairly personal video that I use for the Academy application instead of having a field for the user to select if they want dark mode another field for if I want to activate autoplay and anything else that comes to mind For example right now I'm aligning the flurer application the little float button then there you would have to create another field if I wanted to synchronize it I simply have a single field to manage these preferences and I manage it through a json I'll explain a little bit what the structure is that I'm following well this is from the previous Channel I mean the new YouTube channel which in this case is I bought the metaquest more than anything I wanted it to develop but since I have them I like to use the devices as who says m multipurpose and I'm trying one or another game there and my personal opinion In case you're interested here we continue a little bit with the application in Flutter in this case some things that I'm getting from the flurer application of Academia de Academia that it is so that you can vary the scaffold or create a Custom Scaffold it is a bit of what was mentioned before and with this you can vary several things both the content that you are seeing if it is fixed here what is the scaffold or if the screen is smaller you do not have space and you turn it into a hamburger menu I am explaining here the advantages of Google kit that I mentioned to you before the listener events that I also mentioned to you before that it was associated here in this case to the Arabic course but you can apply it to the basic Arabic course updated from last week and also what I was telling you about the field here also the bottom sheet in flutter how you can implement it in flutter and with this we would finish updates and the field was this what I was telling you here we have a spam that is to show a normal list when we click on it what we do is edit or go to editing mode this field here we are taking advantage of the advantages that javascript brings us which is that we can create options like this even if they do not exist then here we set it to true and in conditional base that we have up here this will be shown if this is negative or simply is not defined but if it is positive we go to edit mode then Note that it is the same field but here we can edit it and when we hit enter we can edit the field So it is an intelligent update in the field in situ or on the site I found it interesting as I was telling you and I wanted to show it to you here so okay and here we reset everything so that when we hit enter it goes to spam again So this is basically all the updates that we saw for the week mentioned.

- Andrés Cruz

En español

Andrés Cruz

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz En Udemy

Acepto recibir anuncios de interes sobre este Blog.

Udemy

!Cursos desde!

4$

En Academia

Ver los cursos

!Libros desde!

1$

Ver los libros
¡Hazte afiliado en Gumroad!
© 2024 Copyright | Contacto | Acerca de | Versión PC