Junio y Julio 2022: Flutter y Laravel Inertia

Hola a todos! por aqui paso a decir las buenas nuevas! este mes está dedicado a Flutter; en el cual, ya empecé a realizar algunos proyectos extras para el curso actual; ya estan listo los libros para Flutter y Laravel Inertia.

Estoy cocinando un curso sobre Laravel Inertia que seguirá los mismos lineamientos que el de Laravel Livewire al igual que un libro.

CONTENIDO DEL MES

Youtube:

1. Definir un container de Tailwind.css - Oruga UI Vue 3 #Laravel 9 | 16
2. Cambios en el componente de listado - Oruga UI Vue 3 #Laravel 9 | 17
3. Cambios en el componente de crear y editar - Oruga UI Vue 3 #Laravel 9 | 18
4. Instalar y configurar Vue CLI:   El asistente de línea de comandos - Naive UI Vue 3 #Django | 1
5. Crear un proyecto en Vue con Vue Cli - Naive UI Vue 3 #Django | 2
6. Multiples paginas con Vue Router - Naive UI Vue 3 #Django | 3
7. Manejador de Estado Provider en #Flutter
8. Configurar Axios en un proyecto en Vue - Naive UI Vue 3 #Django | 4
9. Publicar proyecto en Vue - Naive UI Vue 3 #Django | 5
10. Consumir listado mediante Axios en Rest Framework - Naive UI Vue 3 #Django | 6
11. Consumir listado mediante Axios en Rest Framework - Naive UI Vue 3 #Django | 7
12. Crear un Acordeón en Alpine.js
13. Configurar Vue Router para la navegación - Naive UI Vue 3 #Django | 8
14. Instalación y configuraicón de Naive UI Vue 3 #Django | 9
15. Configurar #Flutter Web con Firebase y Cloud Firestore 2022 1
16. Componente de tabla - Naive UI Vue 3 #Django | 10
17. Componente de Space - Naive UI Vue 3 #Django | 11
18. Rutas en CodeIgniter 4: Rutas comunes y primeros pasos
19. App To Do List, #Flutter Dialogo | 20

 Blog:

1. Crear mallado o wireframe en Three.js
2. Crear una esfera en Three.js
3. Los 10 mejores paquetes de Flutter 2022
4. La aplicación Flutter se atascó en "Ejecutando la tarea de Gradle 'assembleDebug'..."
5. Manejo de formularios en Laravel Inertia con Vue
6. Cómo arreglar el comando Laravel no encontrado para zsh en MacOS
7. Crear un plano en Three.js
8. Aplicar rotaciones en Three.js mediante figuras geométricas
9. Componente de mostrar mensaje de acción realizada en Laravel Livewire
10. Mensaje de acción realizada, toast en Vue 3 con Oruga UI
11. Formulario para editar registros en Laravel Inertia con Vue
12. Laravel Eloquent: retornar el id o PK como clave/key del campo en un array
13. Formulario para editar registros en Laravel Inertia con Vue
14. Primeros pasos con Flutter 3 - libro
15. Primeros pasos con Laravel Inertia - libro
16. Upload de archivos en Laravel Inertia
17. Manejando las rutas y URLs en CodeIgniter 4
18. Segunda aplicación creada en Electron.js: HTML y un poco de CSS

Mis cursos:

Curso de Flutter:

App de sitios

1. Crear proyecto
   1. Vamos a crear el nuevo proyecto.
2. Pantallas y navegación inicial
   1. Vamos a crear el esquema inicial para la aplicación de lugares.
3. PlaceIndex: Menú de acción
   1. Vamos a agregar un menú para agregar lugares.
4. PlaceAdd: Contenedor de imagen seleccionada
   1. Vamos a crear una caja para mostrar la imagen seleccionada.
5. PlaceAdd: Seleccionar una imagen desde la galería
   1. Vamos a configurar la app para seleccionar una imagen desde la app de galería.
6. PlaceAdd: Establecer imagen
   1. Vamos a establecer la imagen seleccionada por el usuario en el contenedor construido anteriormente.
7. PlaceAdd: Tomar una imagen con la cámara
   1. Vamos a configurar la app para seleccionar una imagen desde la app de la cámara.
8. PlaceAdd: Crear formulario
   1. Vamos a crear un formulario con un campo para crear un sitio con el nombre.
9. PlaceAdd: Crear modelo
   1. Vamos a crear un modelo de place.
10. PlaceAdd: SQFlite para almacenar los sitios
    1. Vamos a instalar y configurar SQFlite para almacenar los place de manera persistente.
11. PlaceAdd: Crear un place en la base de datos
    1. De manera demostrativa, se va a crear un registro en la base de datos.
12. PlaceAdd: Guardar imagen en el dispositivo
    1. Vamos a registrar la imagen en una carpeta de la aplicación.
13. PlaceIndex: Generar listado
    1. Vamos a generar un listado inicial.
14. PlaceAdd: Guardar imagen en la base de datos
    1. Vamos a guardar la referencia a la imagen en la base de datos.
15. PlaceIndex: Mostrar imagen en el listado
    1. Vamos a mostrar la imagen desde el listado.
16. PlaceAdd: Validar imagen seleccionada
    1. Vamos a realizar una sencilla validación sobre la imagen seleccionada o no por el usuario y evitar enviar el formulario.
17. Database: Completar CRUD para la base de datos
    1. Vamos a completar las operaciones CRUD con eliminar y actualizar.
18. PlaceIndex: Implementar el efecto swipe para eliminar
    1. Vamos a implementar el efecto Swipe para eliminar desde el listado de sitios.
19. PlaceAdd: Editar un sitio, navegación, parámetros y late
    1. Vamos a editar un sitio, comencemos con la navegación y recibiendo el parámetro del sitio.
20. PlaceAdd: Editar un sitio, actualizar sitio
    1. Vamos a terminar la edición de un registro.
21. PlaceAdd: Generar una Key para actualizar widget de imagen
    1. Vamos a crear una key para el componente de imagen y poder recargar la misma.
22. Mensaje de confirmación con showSnackBar
    1. Vamos a mostrar un mensaje mediante un SnackBar al usuario cuando elimine o cree sitios.

App de sitios: Provider

1. Árbol de widgets y manejadores de estado
   1. Daremos una explicación sobre el árbol de widget y la importancia de los manejadores de estados.
2. Provider: Instalar y primeros pasos
   1. Daremos los primeros pasos con Provider instalandolo y mostrando como funciona.
3. Provider: Configuración inicial
   1. Implementaremos la parte inicial de Providers.
4. Provider: Agregar un sitio
   1. Vamos a implementar el apartado de agregar un sitio.
5. Provider: MultiProvider
   1. Vamos a presentar la variación del multi provider para usar varios providers en la aplicación.
6. Provider: Consumer
   1. Vamos a presentar la variación del Consumer, para interactuar con la clase provider.
7. Provider: Resumen
   1. Vamos a resumir lo explicado hasta este punto con sus variantes.
8. Provider: Modificar un sitio
   1. Vamos a implementar el apartado de modificar un sitio.
9. Provider: Eliminar un sitio
   1. Vamos a implementar el apartado de eliminar un sitio.

TodoList: App web, estructura

1. Crear proyecto
   1. Vamos a crear el nuevo proyecto.
2. Definir el AppBar inicial
   1. Vamos a cambiar el diseño del appbar.
3. AppBar: Crear componente de Dropdown
   1. Vamos a crear un listado de selección en el appbar.
4. AppBar: Crear avatar
   1. Crear widget para el avatar en el appbar.
5. AppBar: Diálogo para editar
   1. Vamos a crear un diálogo para editar la información del usuario.
6. AppBar: Diálogo, crear formulario
   1. Vamos a crear el formulario
7. AppBar: Diálogo, definir estilo al formulario
   1. Vamos a dar un poco de estilo al formulario.
8. AppBar: Diálogo, establecer constraint al formulario
   1. Vamos a establecer reglas para limitar el tamaño del formulario.
9. Extra: obtener el tamaño de un widget
   1. Vamos a definir conocer un mecanismo para obtener el tamaño de un widget.
10. Body: Dividir en dos bloques
    1. Vamos a dividir el body en dos partes.
11. Body: Configurar plugin de calendario para manejar las fecha
    1. Vamos a instalar un plugin de calendario.
12. Crear el modelo para los to do
    1. Vamos a crear el modelo para los to do.
13. Listado inicial
    1. Vamos a crear un listado inicial de to do estático.
14. Listado animado
    1. Vamos a realizar una animación para el listado.
15. Listado vacío
    1. Vamos a crear la página cuando no hay to do en el listado.
16. Listado con imagen
    1. Vamos a crear un listado con imágenes.
17. Deshabilitar/Habilitar imagen
    1. Vamos a crear una opción para ver u ocultar la imagen bajo demanda del usuario.
18. Animación de las imágenes
    1. Vamos a usar el widget de AnimatedContainer para el efecto de desaparecer y aparecer las imágenes.
19. Botones para crear un to do
    1. Vamos a crear dos botones para la acción de crear to do.
20. Formulario to do: Crear el diálogo
    1. Vamos a crear el diálogo para manejar los to do.
21. Formulario to do: Formulario inicial
    1. Vamos a crear el esquema inicial para el formulario.
22. Formulario to do: Campo para la fecha
    1. Vamos a crear el campo para la fecha.
23. Formulario to do: Fecha por defecto
    1. Vamos a establecer una fecha por defecto.
24. Formulario to do: Seleccionar imagen
    1. Vamos a realizar la operación para seleccionar una imagen.
25. Formulario to do: Validar y componer los datos
    1. Vamos a organizar los datos para crear el to do.
26. Manejar listado de to do
    1. Vamos a crear un listado en base a to do.
27. Filtros por fecha
    1. Vamos a crear un filtro para seleccionar las to do.
28. Ordenación
    1. Vamos a implementar la ordenación del listado de to do.
29. Modal para eliminar
    1. Vamos a crear el modal para eliminar los to do.
30. Modal para eliminar: Reutilizar
    1. Vamos a pasar el mensaje para el dialog de confirmación.
31. Edición de los to do: Estructura inicial
    1. Vamos a crear la funcionalidad de editar to do.
32. Limpiar filtros
    1. Crearemos la opción para limpiar el filtro.

TodoList web: Adaptativa

1. Bloque de calendario y listado
   1. Vamos a definir el bloque de calendario y listado como adaptable.
2. Listado
   1. Vamos a cambiar el estilo si el tamaño es más pequeño.

TodoList web: Pequeños cambios

1. Borde redondeado imágenes
   1. Vamos a colocar un bordeado para las imágenes.
2. Separador entre columna
   1. Vamos a crear un separador entre el calendario y el listado.
3. Overflow en reescalado
   1. Vamos a manejar un overflow que ocurre al momento de realizar la animación.
4. Centrar titulo
   1. Vamos a centrar el título.
5. Mover titulo izquierda
   1. Vamos a variar el título a la izquierda al momento de escalar la ventana.

TodoList: App web, Firebase on Cloud Firestore

1. Preparar proyecto
   1. Vamos a crear el proyecto en firebase y configurar a nivel del proyecto.
2. Primera conexión, crear un registro
   1. Vamos a probar la conexión anterior y crear un registro desde el proyecto en Firebase.
3. Obtener un listado de to do mediante Firebase, primera conexión
   1. Vamos a consumir el listado de to do desde la base de datos.
4. Construir un listado de to do desde firebase
   1. Vamos a crear un listado mediante los datos recibidos de Cloud Firestore.
5. Demo: Consumir listado de manera asíncrona
   1. Vamos a realizar una demostración de cómo obtener los datos de Cloud Firestore quitando la sincronización.
6. Error en el StreamBuilder
   1. Vamos a solventar un problema desde el StreamBuilder.
7. Crear un to do en Firebase
   1. Vamos a crear un to do en Cloud Firestore desde la app.
8. Pasar del modelo de todo a un QueryDocumentSnapshot
   1. Vamos a migrar desde un esquema de todo a QueryDocumentSnapshot.
9. Actualizar un to do en Firebase, parte final
   1. Vamos a terminar el proceso de actualizar.
10. Eliminar un to do en Firebase
    1. Vamos a implementar la función de eliminar un to do.
11. Filtrado
    1. Vamos a habilitar el filtrado.
12. Ordenación
    1. Vamos a habilitar una ordenación.
13. Carga de imágenes con Firebase Storage
    1. Vamos a cargar imágenes en Firebase.
14. Registrar imagen en la base de datos
    1. Vamos las imágenes en la base de datos.
15. Mostrar imagen en el listado
    1. Vamos a mostrar imágenes de Firebase en listado de to do.
16. Cambios en el widget de ImageField para la imagen
    1. Aplicaremos algunos cambios en el campo de ImageField para el manejo de la imagen.

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

Andrés Cruz En Udemy