Junio y Julio 2022: Flutter y Laravel Inertia
- Andrés Cruz
Libro y más contenido para el curso de Flutter; tambien un nuevo curso en 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:
- Definir un container de Tailwind.css - Oruga UI Vue 3 #Laravel 9 | 16
- Cambios en el componente de listado - Oruga UI Vue 3 #Laravel 9 | 17
- Cambios en el componente de crear y editar - Oruga UI Vue 3 #Laravel 9 | 18
- Instalar y configurar Vue CLI: El asistente de línea de comandos - Naive UI Vue 3 #Django | 1
- Crear un proyecto en Vue con Vue Cli - Naive UI Vue 3 #Django | 2
- Multiples paginas con Vue Router - Naive UI Vue 3 #Django | 3
- Manejador de Estado Provider en #Flutter
- Configurar Axios en un proyecto en Vue - Naive UI Vue 3 #Django | 4
- Publicar proyecto en Vue - Naive UI Vue 3 #Django | 5
- Consumir listado mediante Axios en Rest Framework - Naive UI Vue 3 #Django | 6
- Consumir listado mediante Axios en Rest Framework - Naive UI Vue 3 #Django | 7
- Crear un Acordeón en Alpine.js
- Configurar Vue Router para la navegación - Naive UI Vue 3 #Django | 8
- Instalación y configuraicón de Naive UI Vue 3 #Django | 9
- Configurar #Flutter Web con Firebase y Cloud Firestore 2022 1
- Componente de tabla - Naive UI Vue 3 #Django | 10
- Componente de Space - Naive UI Vue 3 #Django | 11
- Rutas en CodeIgniter 4: Rutas comunes y primeros pasos
- App To Do List, #Flutter Dialogo | 20
Blog:
- Crear mallado o wireframe en Three.js
- Crear una esfera en Three.js
- Los 10 mejores paquetes de Flutter 2022
- La aplicación Flutter se atascó en "Ejecutando la tarea de Gradle 'assembleDebug'..."
- Manejo de formularios en Laravel Inertia con Vue
- Cómo arreglar el comando Laravel no encontrado para zsh en MacOS
- Crear un plano en Three.js
- Aplicar rotaciones en Three.js mediante figuras geométricas
- Componente de mostrar mensaje de acción realizada en Laravel Livewire
- Mensaje de acción realizada, toast en Vue 3 con Oruga UI
- Formulario para editar registros en Laravel Inertia con Vue
- Laravel Eloquent: retornar el id o PK como clave/key del campo en un array
- Formulario para editar registros en Laravel Inertia con Vue
- Primeros pasos con Flutter 3 - libro
- Primeros pasos con Laravel Inertia - libro
- Upload de archivos en Laravel Inertia
- Manejando las rutas y URLs en CodeIgniter 4
- Segunda aplicación creada en Electron.js: HTML y un poco de CSS
Mis cursos:
Curso de Flutter:
App de sitios
- Crear proyecto
- Vamos a crear el nuevo proyecto.
- Pantallas y navegación inicial
- Vamos a crear el esquema inicial para la aplicación de lugares.
- PlaceIndex: Menú de acción
- Vamos a agregar un menú para agregar lugares.
- PlaceAdd: Contenedor de imagen seleccionada
- Vamos a crear una caja para mostrar la imagen seleccionada.
- PlaceAdd: Seleccionar una imagen desde la galería
- Vamos a configurar la app para seleccionar una imagen desde la app de galería.
- PlaceAdd: Establecer imagen
- Vamos a establecer la imagen seleccionada por el usuario en el contenedor construido anteriormente.
- PlaceAdd: Tomar una imagen con la cámara
- Vamos a configurar la app para seleccionar una imagen desde la app de la cámara.
- PlaceAdd: Crear formulario
- Vamos a crear un formulario con un campo para crear un sitio con el nombre.
- PlaceAdd: Crear modelo
- Vamos a crear un modelo de place.
- PlaceAdd: SQFlite para almacenar los sitios
- Vamos a instalar y configurar SQFlite para almacenar los place de manera persistente.
- PlaceAdd: Crear un place en la base de datos
- De manera demostrativa, se va a crear un registro en la base de datos.
- PlaceAdd: Guardar imagen en el dispositivo
- Vamos a registrar la imagen en una carpeta de la aplicación.
- PlaceIndex: Generar listado
- Vamos a generar un listado inicial.
- PlaceAdd: Guardar imagen en la base de datos
- Vamos a guardar la referencia a la imagen en la base de datos.
- PlaceIndex: Mostrar imagen en el listado
- Vamos a mostrar la imagen desde el listado.
- PlaceAdd: Validar imagen seleccionada
- Vamos a realizar una sencilla validación sobre la imagen seleccionada o no por el usuario y evitar enviar el formulario.
- Database: Completar CRUD para la base de datos
- Vamos a completar las operaciones CRUD con eliminar y actualizar.
- PlaceIndex: Implementar el efecto swipe para eliminar
- Vamos a implementar el efecto Swipe para eliminar desde el listado de sitios.
- PlaceAdd: Editar un sitio, navegación, parámetros y late
- Vamos a editar un sitio, comencemos con la navegación y recibiendo el parámetro del sitio.
- PlaceAdd: Editar un sitio, actualizar sitio
- Vamos a terminar la edición de un registro.
- PlaceAdd: Generar una Key para actualizar widget de imagen
- Vamos a crear una key para el componente de imagen y poder recargar la misma.
- Mensaje de confirmación con showSnackBar
- Vamos a mostrar un mensaje mediante un SnackBar al usuario cuando elimine o cree sitios.
App de sitios: Provider
- Árbol de widgets y manejadores de estado
- Daremos una explicación sobre el árbol de widget y la importancia de los manejadores de estados.
- Provider: Instalar y primeros pasos
- Daremos los primeros pasos con Provider instalandolo y mostrando como funciona.
- Provider: Configuración inicial
- Implementaremos la parte inicial de Providers.
- Provider: Agregar un sitio
- Vamos a implementar el apartado de agregar un sitio.
- Provider: MultiProvider
- Vamos a presentar la variación del multi provider para usar varios providers en la aplicación.
- Provider: Consumer
- Vamos a presentar la variación del Consumer, para interactuar con la clase provider.
- Provider: Resumen
- Vamos a resumir lo explicado hasta este punto con sus variantes.
- Provider: Modificar un sitio
- Vamos a implementar el apartado de modificar un sitio.
- Provider: Eliminar un sitio
- Vamos a implementar el apartado de eliminar un sitio.
TodoList: App web, estructura
- Crear proyecto
- Vamos a crear el nuevo proyecto.
- Definir el AppBar inicial
- Vamos a cambiar el diseño del appbar.
- AppBar: Crear componente de Dropdown
- Vamos a crear un listado de selección en el appbar.
- AppBar: Crear avatar
- Crear widget para el avatar en el appbar.
- AppBar: Diálogo para editar
- Vamos a crear un diálogo para editar la información del usuario.
- AppBar: Diálogo, crear formulario
- Vamos a crear el formulario
- AppBar: Diálogo, definir estilo al formulario
- Vamos a dar un poco de estilo al formulario.
- AppBar: Diálogo, establecer constraint al formulario
- Vamos a establecer reglas para limitar el tamaño del formulario.
- Extra: obtener el tamaño de un widget
- Vamos a definir conocer un mecanismo para obtener el tamaño de un widget.
- Body: Dividir en dos bloques
- Vamos a dividir el body en dos partes.
- Body: Configurar plugin de calendario para manejar las fecha
- Vamos a instalar un plugin de calendario.
- Crear el modelo para los to do
- Vamos a crear el modelo para los to do.
- Listado inicial
- Vamos a crear un listado inicial de to do estático.
- Listado animado
- Vamos a realizar una animación para el listado.
- Listado vacío
- Vamos a crear la página cuando no hay to do en el listado.
- Listado con imagen
- Vamos a crear un listado con imágenes.
- Deshabilitar/Habilitar imagen
- Vamos a crear una opción para ver u ocultar la imagen bajo demanda del usuario.
- Animación de las imágenes
- Vamos a usar el widget de AnimatedContainer para el efecto de desaparecer y aparecer las imágenes.
- Botones para crear un to do
- Vamos a crear dos botones para la acción de crear to do.
- Formulario to do: Crear el diálogo
- Vamos a crear el diálogo para manejar los to do.
- Formulario to do: Formulario inicial
- Vamos a crear el esquema inicial para el formulario.
- Formulario to do: Campo para la fecha
- Vamos a crear el campo para la fecha.
- Formulario to do: Fecha por defecto
- Vamos a establecer una fecha por defecto.
- Formulario to do: Seleccionar imagen
- Vamos a realizar la operación para seleccionar una imagen.
- Formulario to do: Validar y componer los datos
- Vamos a organizar los datos para crear el to do.
- Manejar listado de to do
- Vamos a crear un listado en base a to do.
- Filtros por fecha
- Vamos a crear un filtro para seleccionar las to do.
- Ordenación
- Vamos a implementar la ordenación del listado de to do.
- Modal para eliminar
- Vamos a crear el modal para eliminar los to do.
- Modal para eliminar: Reutilizar
- Vamos a pasar el mensaje para el dialog de confirmación.
- Edición de los to do: Estructura inicial
- Vamos a crear la funcionalidad de editar to do.
- Limpiar filtros
- Crearemos la opción para limpiar el filtro.
TodoList web: Adaptativa
- Bloque de calendario y listado
- Vamos a definir el bloque de calendario y listado como adaptable.
- Listado
- Vamos a cambiar el estilo si el tamaño es más pequeño.
TodoList web: Pequeños cambios
- Borde redondeado imágenes
- Vamos a colocar un bordeado para las imágenes.
- Separador entre columna
- Vamos a crear un separador entre el calendario y el listado.
- Overflow en reescalado
- Vamos a manejar un overflow que ocurre al momento de realizar la animación.
- Centrar titulo
- Vamos a centrar el título.
- Mover titulo izquierda
- Vamos a variar el título a la izquierda al momento de escalar la ventana.
TodoList: App web, Firebase on Cloud Firestore
- Preparar proyecto
- Vamos a crear el proyecto en firebase y configurar a nivel del proyecto.
- Primera conexión, crear un registro
- Vamos a probar la conexión anterior y crear un registro desde el proyecto en Firebase.
- Obtener un listado de to do mediante Firebase, primera conexión
- Vamos a consumir el listado de to do desde la base de datos.
- Construir un listado de to do desde firebase
- Vamos a crear un listado mediante los datos recibidos de Cloud Firestore.
- Demo: Consumir listado de manera asíncrona
- Vamos a realizar una demostración de cómo obtener los datos de Cloud Firestore quitando la sincronización.
- Error en el StreamBuilder
- Vamos a solventar un problema desde el StreamBuilder.
- Crear un to do en Firebase
- Vamos a crear un to do en Cloud Firestore desde la app.
- Pasar del modelo de todo a un QueryDocumentSnapshot
- Vamos a migrar desde un esquema de todo a QueryDocumentSnapshot.
- Actualizar un to do en Firebase, parte final
- Vamos a terminar el proceso de actualizar.
- Eliminar un to do en Firebase
- Vamos a implementar la función de eliminar un to do.
- Filtrado
- Vamos a habilitar el filtrado.
- Ordenación
- Vamos a habilitar una ordenación.
- Carga de imágenes con Firebase Storage
- Vamos a cargar imágenes en Firebase.
- Registrar imagen en la base de datos
- Vamos las imágenes en la base de datos.
- Mostrar imagen en el listado
- Vamos a mostrar imágenes de Firebase en listado de to do.
- Cambios en el widget de ImageField para la imagen
- 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