Curso Crear Widgets en Flutter con una RestApi en Laravel y Django
- Andrés Cruz
Este curso tiene el objetivo de construir una aplicación en conjunto con Laravel o Django y Flutter; de tal manera que la aplicación de Flutter va a necesitar de un 100% de la app de Laravel mediante una Rest Api para poder funcionar. Lo siguiente que tienes que tener en cuenta, es que este no es un curso para aprender a desarrollar desde cero en Flutter y/o Laravel; tienes que tener conocimientos en estos frameworks para poder tomar estos cursos (en mi perfil puedes ver un curso de Laravel desde cero así como el curso de Crea apps en Android e iOS con una Rest Api en CodeIgniter 3 que tenemos una sección para aprender a desarrollar desde cero en Flutter.)
Construir widgets de manera dinámica mediante un backend y RestApi
La idea es simple: CONSTRUIR WIDGETS DE MANERA DINÁMICA mediante una RESTAPI desde manera dinámica en base a un esquema que armamos y administramos mediante un módulo de Dashboard en Laravel, Vamos a permitir construir distintos widgets como botones, chis, textos e imágenes de manera dinámica en base a un esquema que recibimos desde la Rest Api. Mediante la aplicación web, Laravel o Django, vamos a crear un esquema para la gestión de textos, botones y otros widgets; también vamos a crear como modelos los elementos más importantes que podamos administrar en Flutter, con este esquema, lo exportamos mediante una Rest Api, para que la aplicación en Flutter la consuma. En la aplicación de Flutter, vamos a crear distintas capas:
- Modelos
- Páginas
- Proveedores de contenido
- Clases para construir widgets en específico
- Pool de datos
Y todo esto lo vamos a definir para que todo funcione de manera conjunta. En definitiva, vamos a crear dos aplicaciones que a la final se comportan como una sola; esta estructura de aplicación que vamos a crear nos habré las puertas a crear aplicaciones más complejas o específicas en donde en pocas palabras necesitamos tener TODO el control de la información o pantallas que vamos a desplegar mediante una aplicación el Flutter.
App: Backend y RestApi en Laravel
Para la aplicación de Laravel vamos a trabajar con:
- Controladores
- Modelos
- Vistas
- Helpers y Facades
- Rest Api
- Rutas
- Formularios
- Validaciones de datos
- Bootstrap 5
- Módulo de usuario
- Creación de CRUDs
En pocas palabras, aprenderemos a crear las estructuras necesarias, la lógica y la organización para trabajar con distintos frameworks y que TODO esto funcione en conjunto perfectamente; para esto vamos a necesitar crear tanto la parte administrativa, es decir nuestro dashboard o módulo de gestión -backend- y una Rest Api para que sea consumida mediante Flutter.
App: Backend y RestApi en Django
Para la aplicación de Django será el mismo backend que con el de Laravel pero con Django:
- Vistas (controladores en el MVC)
- Modelos
- Creación de CRUDs desde la app de Admin
- Rest Api con Django Rest Framework (en desarrollo)
- ContentTypes (en desarrollo)
En pocas palabras, aprenderemos a crear las estructuras necesarias, la lógica y la organización para trabajar con distintos frameworks y que TODO esto funcione en conjunto perfectamente.
Organización del curso
En el curso vamos a ir paso a paso en donde cada sección nos hacer a mas y mas a la app final, en cada sección vamos a ir construyendo un módulo para nuestra aplicación, vamos a comenzar con la construcción de la maqueta de la aplicación, en Flutter; Flutter al ser un framework modular o que nos permite construir aplicaciones de manera modular, es ideal para hacer maquetas; por supuesto que Flutter sirve para muchísimo más, pero esta son unas de sus grandes bondades; por lo tanto, vamos a construir la maqueta con algunos widgets que vamos a querer ser administrables de manera dinámica en las aplicaciones de Laravel y Django:
En la siguientes secciones arrancamos a hacer los módulos administrables para los widgets y las Rest Api para poder consumir los mismos en Laravel y Django:
Para luego pasar a consumir la Rest Api desde la aplicación en Flutter; vamos a crear todo el esquema necesario para tal fin, modelos, proveedores de contenido, trabajar con los Future y todo para consumir la RestApi de nuestros frameworks web.
Seguiremos así hasta dotar la app de más y más funcionalidades y hacerla más interesante, dando comportamiento programados desde los backends y Flutter, agrupando widgets, creando CRUDs completos y mucho más.
Recuerda que puedes ver las introducciones de todas las secciones para que sepas exactamente qué vamos a abordar en cada sección en la lista de reproducción en YouTube para el curso.
Por aquí tienes el listado completo de clases que vamos a cubrir en el libro y curso:
Introducción
-
1 Introducción
-
2 Estructura del curso
-
3 Requisitos para tomar el curso
Requisitos para tomar el curso
Flutter: Preparar el entorno para desarrollar
-
1 ¿Qué es Flutter?
-
2 Los widgets como componentes fundamentales en Flutter
-
3 Instalaciones necesarias: Android Studio, git y VSC
Vamos a instalar Flutter en nuestra PC y configurar el Path del sistema.
-
4 Instalando Flutter en MacOS y Windows
Vamos a instalar Flutter en nuestra PC y configurar el Path del sistema.
-
5 Configurar Flutter en Windows: VS
Vamos a configurar C++ para Desktop en Windows.
-
6 Extra: Instalar Flutter en una Mac con M1
Extra: Instalar Flutter en una Mac con M1
-
7 Configurando Flutter en nuestro equipo Mac o Windows y el VSC
Vamos a configurar nuestro equipo para que una vez tengamos instalado Flutter, ahora podamos emplearlo sin problemas en nuestro equipo.
-
8 Crear un emulador en Android Studio
Vamos a crear un emulador en Android Studio que es el que vamos a emplear para el curso.
-
9 Atajo de teclado en VSC
Vamos a conocer algunos atajos de teclado que te recomiendo si desarrollas en VSC.
-
10 Crear una aplicación mediante la línea de comandos
Atajo de teclado en VSC
-
11 Crear una aplicación mediante Visual Studio Code
Vamos a conocer como podemos crear un proyecto en Flutter mediante VSC.
-
12 Elementos básicos de una aplicación
Vamos a presentar la estructura base de un proyecto en Flutter.
-
13 Seleccionar dispositivo al momento de desarrollar
Vamos a aprender a seleccionar un dispositivo para desarrollar.
Flutter: Creando la maqueta de la aplicación
-
1 Introducción
-
2 Creando la aplicación
Vamos a crear la aplicación en Flutter.
-
3 Widgets a tomar en cuenta para nuestro proyecto
Vamos a tomar como referencia algunos widgets que podemos emplear para nuestro proyecto.
-
4 Construir una página para construir un widget de chip
Vamos a crear una página base con un chip.
-
5 Drawer: Crear la clase DrawerItem
Vamos a construir la clase para crear un item del menú.
-
6 Drawer: Crear los primeros items
Vamos a crear los primeros items para el menú lateral.
-
7 Drawer: Crear el Drawer
Vamos a crear el menú lateral.
-
8 Construir el ruteo en el main
Vamos a crear los componentes de ruta en la función de main.
-
9 Crear modelo para el chip
Vamos a crear un modelo de chip, teniendo en cuenta los elementos que necesitamos para crear el mismo.
-
10 Crear modelo para el botón
Vamos a crear un modelo de botón.
-
11 Construir un chip a partir de un modelo chip
Vamos a crear un widget de chip a partir del modelo del mismo.
-
12 Construir un componentes de listado de chips
Vamos a crear listados de del widgets chips.
-
13 Crear una clase para construir un chip por vez
Vamos a crear una clase para construir los widget de chips-
-
14 Construir un componente de listado de botones
Vamos a crear un componente para crear listado de botones.
-
15 Construir una clase genérica para construir un listado de widgets
Comparación de pasar clase por argumento hasta llegar a la función
-
16 Construir un componente para los textos
Vamos a construir un componente para un listado de textos.
-
17 Construir un componente para las imágenes
Vamos a construir un componente para un listado de imágenes que vamos a cargar vía una URL http.
-
18 Mezclar de componentes en una página
Vamos a hacer una mezcla de widgets de todos los componentes anteriores en una sola página.
Laravel: Preparar el entorno para desarrollar
-
1 Preparar el entorno en Windows
Vamos a aprender a instalar el ecosistema para desarrollar en Laravel, este excelente software nos trae todo lo que necesitamos desde un simple instalador.
-
2 Preparar el entorno en Mac
Conoceremos como preparar el ecosistema en Mac con Sail y Docker
-
3 Crear nuestra aplicación en Laravel (Solo si empleas Windows)
Vamos a crear nuestra aplicación en Laravel, mediante la terminal o consola de comandos que nos trae instalada Laragon y mediante composer.
-
4 Estructura básica de carpetas y archivos
Vamos a dar un rápido vistazo a la estructura del proyecto, conocer de manera inicial la estructura de carpetas y archivos.
-
5 Demo: Actualizar path de PHP en Windows
Vamos a actualizar el path del sistema para PHP.
-
6 Extensiones para PHP
Vamos a instalar una extensión para trabajar con PHP.
Laravel: construir modelos y cruds iniciales
-
1 Introducción
-
2 Crear un proyecto en Laravel
Vamos a crear nuestro proyecto en Laravel.
-
3 Crear y configurar la base de datos
Vamos a crear y configurar la base de datos.
-
4 Crear controladores iniciales
Vamos a crear algunos de los controladores de tipo CRUD para la gestión de los widgets.
-
5 Definir y agrupar rutas
Vamos a definir las rutas para hacer el CURD correspondiente.
-
6 Incluir Bootstrap y el módulo de usuario
Vamos a incluir Bootstrap y generar el módulo de usuario.
-
7 Usar Bootstrap 5
Vamos a hacer un cambio para la versión actual de Laravel, que sería pasar de Bootstrap 4 a 5
-
8 Ejecutar las migraciones para crear tablas base
Vamos a ejecutar las migraciones para crear las tablas de usuario.
-
9 Registrar un usuario
Vamos a registrar un usuario para poder emplearlo más adelante.
-
10 Crear migración para los grupos
Vamos a crear una migración para una entidad de grupos.
-
11 Crear una migración para los botones
Vamos a crear una migración para una entidad de los botones.
-
12 Crear una migración para los textos
Vamos a crear las migraciones para los textos.
-
13 Ejecutar las migraciones
Vamos a ejecutar todas las migraciones anteriores.
-
14 Crear plantilla maestra para el CRUD/dashboard
Vamos a crear la plantilla que vamos a emplear para nuestro CRUD.
-
15 Crear vista para mostrar errores del formulario
Vamos a crear una vista para mostrar los errores de los formularios.
-
16 Crear vista para mensajes
Vamos a crear una vista para mostrar los mensajes vía flash.
-
17 CRUD Botón: Crear formulario de creación
Vamos a crear un formulario para la creación de un botón.
-
18 CRUD Botón: Desarrollar función de create (mostrar form)
Vamos a desarrollar la función que se encarga de mostrar el formulario anterior.
-
19 CRUD Botón: Obtener los grupos
Vamos a crear algunos grupos y mostrarlos en un listado.
-
20 CRUD Botón: Método old para los valores anteriores
Vamos a configurar un método llamado old para mostrar los valores anteriores del formulario.
-
21 CRUD Botón: Crear validador del request
Vamos a crear el validator para nuestro request.
-
22 CRUD Botón: Especificar los campos de asignación masiva en el modelo
Vamos a especificar los campos que vamos a guardar en la base de datos para nuestro botón.
-
23 CRUD Botón: Guardar el nuevo botón
CRUD Botón: Guardar el nuevo botón
-
24 CRUD Botón: Listado paginado
Vamos a construir un listado paginado para los botones.
-
25 CRUD Botón: Editar
Vamos a crear la opción de editar un botón.
-
26 CRUD Botón: Eliminar
Vamos a crear la opción de eliminar un botón.
-
27 CRUD Botón: Definir botón para crear
Vamos a definir un botón o enlace para crear un botón.
-
28 CRUD Chip: Crear
Vamos a hacer el CRUD para crear un chip<br /> <br /> .
-
29 CRUD Texto: Crear
Vamos a hacer el CRUD para crear un texto.
-
30 CRUD Imágenes: Crear y listado
Vamos a hacer el CRUD para crear una imagen; las fase de crear y listado.
-
31 CRUD Imágenes: Eliminar y editar imagen
Vamos a hacer el CRUD para crear una imagen; las fase de eliminar y editar.
Extra Laravel: Mejorar el aspecto y funcionalidades base
-
1 Introducción
-
2 Proteger módulo admin con login
Vamos a proteger el dashboard con usuario y contraseña.
-
3 Crear un menú de navegación
Vamos a crear un menú de navegación para el CRUD.
-
4 Colocar una iconografía
Vamos a incluir una iconografía para la app.
-
5 Emplear algunos íconos de fontawesome
Vamos a configurar la iconografía en la página de index.
-
6 Cambios generales
Vamos a hacer varios cambios visuales en el dashboard.
Django: Preparar el entorno para desarrollar
-
1 Instalar Python
Vamos a enseñar como podemos instalar Python y algunas consideraciones a tener en cuenta.
-
2 Instalar Visual Studio Code
Vamos a instalar el IDE que vamos a emplear en este curso para desarrollar nuestras aplicaciones en Python y Django.
-
3 Configurar nuestro Editor
Vamos a crear la carpeta de nuestro proyecto que vamos a emplear en esta sección para realizar las distintas pruebas y conocer Python.
-
4 Software necesario
Vamos a hablar sobre parte del software necesario para este curso.
Laravel: Construir Api Rest
-
1 Introducción
-
2 Crear controladores para la Rest Api
Vamos a crear todos los controladores de tipo Rest para nuestra app.
-
3 Botones Rest: Listado paginado
Vamos a crear un recurso rest paginado para los botones.
-
4 Botones Rest: Todo los registros
Vamos a crear un recurso rest para todos los botones.
-
5 Botones Rest: Por Id
Vamos a crear un recurso rest para obtener el detalle de un botón.
-
6 Crear definición para una respuesta genérica
Vamos a crear una capa para devolver una cabecera genérica para la respuesta.
-
7 Chips Rest
Vamos a crear los recursos rest para los chips.
-
8 Imagenes Rest
Vamos a crear los recursos rest para las imágenes.
-
9 Textos Rest
Vamos a crear los recursos rest para los textos.
-
10 Grupos Rest
Vamos a crear unos recursos rest para obtener el grupo
-
11 Construir recurso Rest para obtener el widget dado el identificador del grupo
Vamos a construir recursos rest para todos los widgets para que dado el identificador del grupo, devuelva los widgets.
Django: construir modelos y cruds iniciales
-
1 Introducción
-
2 El ambiente virtual para nuestro proyecto
Vamos a crear el espacio virtual para nuestro proyecto en Django.
-
3 Crear un proyecto y aplicación en django
Vamos a crear el proyecto y aplicación inicial en Django.
-
4 Desarrollar nuestro proyecto en VSC
Vamos a configurar nuestro proyecto con Visual Studio Code.
-
5 Crear nuestro hola mundo y ejecutar la aplicación
Vamos a crear nuestro el hola mundo en django y determinar que todo funcione correctamente.
-
6 Crear base de datos y conexión
Vamos a crear la configuración para que nuestro proyecto en Django pueda trabajar con MySQL; y también vamos a crear la base de datos.
-
7 Registrar aplicación
Vamos a registrar la aplicación.
-
8 Crear modelos iniciales
Vamos a crear los modelos para nuestros widgets.
-
9 Crear función str para los modelos
Vamos a crear la función para representar un objeto mediante un String.
-
10 Carga de imágenes
Vamos a realizar el proceso de carga de la imagen.
-
11 Ejecutar migraciones y crear tablas
Vamos a crear las migraciones y las tablas asociadas.
-
12 Crear superusuario
Vamos a crear el superusuario para poder emplear el módulo de admin.
-
13 Registrar modelos en la app Admin de Django
Vamos a registrar los modelos que creamos anteriormente para que la podamos administrar en la aplicación de Admin.
-
14 Crear datos iniciales
Vamos a cargar algunos datos iniciales.
Django: Construir Api Rest
-
1 Introducción
-
2 Crear aplicación para la Api Rest
Vamos a crear una aplicación para trabajar con la Api Rest.
-
3 Instalar Django Rest Framework
Vamos a instalar nuestro DRF para crear una Rest Api.
-
4 Activar la paginación
Vamos a activar la paginación de manera global en nuestro proyecto.
-
5 Crear el serializar para los botones
Vamos a crear el serializar para los botones y especificar con qué datos vamos a trabajar
-
6 Crear clase "Listado" para obtener todos los botones
Vamos a crear la clase para obtener el listado de todos los botones.
-
7 Crear clase "Detalle" para obtener por el ID del botón
Vamos a crear la clase para obtener el detalle del botón.
-
8 Crear urls
Vamos a crear las urls para probar la Rest Api.
-
9 Probar Rest Api inicial para los botones
Vamos a cargar algunos datos y probar la Api Rest.
-
10 Retornar un json personalizado: Crear función y listado botones
Vamos a retornar un json personalizado para nuestra Rest Api; vamos a crear la función y emplearla en nuestro listado de botones.
-
11 Retornar un json personalizado: Detalle botón
Vamos a implementar la nueva función con la respuesta personalizada para el json en nuestro listado.
-
12 Crear clase de paginación personalizada
Vamos a crear una clase personalizada para la paginación.
-
13 Crear clase para manejar la paginación de los botones
Vamos a adaptar una nueva clase para los botones y la paginación.
-
14 Crear funcion (o clase) para obtener los botones por grupo
Vamos a crear una función/clase para obtener los botones según el ID del grupo.
-
15 Tarea: Crear los recursos para el resto de los widgets
Vas a hacer los recursos de la Api Rest para el resto de los widgets o modelos que tenemos registrados.
-
16 Consumir las imágenes vía HTTP
Consumir las imágenes vía HTTP
-
17 Recurso Rest para los grupos
Vamos a crear los recursos para los grupos.
-
18 Consideración para el recurso rest en los grupos
Consideración para el recurso rest en los grupos
Flutter: Consumir Api Rest
-
1 Introducción
-
2 Incluir el paquete para hacer peticiones http
Crea Widgets en Flutter con una RestApi en Laravel y Django
-
3 Laravel: Consumir la Api Rest mediante la IP de la PC
Vamos a obtener la URL (IP) para poder consumir la Rest Api de Laravel.
-
4 Django: Consumir la Api Rest mediante la IP de la PC
Vamos a realizar algunas configuraciones y explicaciones con el proyecto de Django.
-
5 Laravel y Django: IP estática
Laravel y Django: IP estática
-
6 Crear archivo global para las configuraciones del proyecto
Vamos a crear un archivo para colocar la URL base de la Rest.
-
7 Laravel y Django: BASEURL
Laravel y Django: BASEURL
-
8 Crear el proveedor de datos para el botón
Vamos a crear el proveedor de contenidos para el botón (el que se conecta y obtiene los datos de la Rest Api.)
-
9 Django: Consumir la Api Rest mediante la IP de la PC
Vamos a realizar algunas configuraciones y explicaciones con el proyecto de Django.
-
10 Crear el método constructor para convertir un json a un objeto/botón
Vamos a convertir un json a un botón mediante un constructor.
-
11 Resumen
Vamos a dar un pequeño resumen de los vídeos anteriores de esta sección.
-
12 Crear el FutureBuilder para consumir y mostrar respuesta de la Rest
Vamos a crear el widget de tipo FutureBuilder para consumir el método asíncrono anterior.
-
13 Reparar error con el casteo de los colores.
Vamos a reparar el problema con el casteo de los colores.
-
14 Crear un FutureBuilder genérico
Vamos a crear un método para el futureBuilder genérico.
-
15 Chips: Crear y emplear la conexión de la Rest Api
Vamos a crear, configurar y emplear la conexión de la rest para los chips.
-
16 Textos: Crear y emplear la conexión de la Rest Api
Vamos a crear, configurar y emplear la conexión de la rest para los textos.
-
17 Imágenes: Crear y emplear la conexión de la Rest Api
Vamos a crear, configurar y emplear la conexión de la rest para los imágenes.
-
18 Laravel y Django: Consumir la imagen
Laravel y Django: Consumir la imagen
Django: Mix de widgets
-
1 Introducción
-
2 Problema con el Django Admin y presentación del módulo a construir
Vamos a hablar sobre el problema principal de la aplicación que sería la de ser poco flexibles para incorporar nuevos elementos.
-
3 Crear modelo, migración y tabla para los mixs
Vamos a crear el modelo y la migración para los mixs.
-
4 Crear un formulario personalizado para los grupos
Vamos a crear el template para manejar un formulario personalizado para los grupos.
-
5 Capturar petición post del formulario: response_change
Vamos a sobrescribir un método para procesar la petición del formulario.
-
6 Capturar petición get del formulario: change_view
Vamos a sobrescribir un método para procesar la petición de creación del formulario y carga de datos.
-
7 Imprimir listado de botones
Vamos a crear un listado para pintar todos los botones.
-
8 Imprimir listado del resto de los widgets
Vamos a crear el listado/select para el resto de los widgets.
-
9 Componer HTML del formulario
Vamos a arreglar un poco el diseño del formulario admin.
-
10 Crear el resto del formulario
Vamos a agregar el campo de orden.
-
11 Procesar el formulario
Vamos a procesar el formulario enviado por el usuario y crear el mix y guardarlo en la base de datos.
-
12 Pintar nuestro formulario solo en edición
Vamos a colocar colocar un condicional para pintar el formulario solo en edición.
-
13 ¿Tarea? Edición de los mixs por grupo Id
Vas a crear la sección de edición para los mixs,
-
14 Hacer recurso Rest
Vamos a hacer un recurso rest para consumir los mixs.
Laravel: Mix de widgets
-
1 Crear la estructura (migración y tabla BD) para guardar mix de widgets
Vamos a crear la estructura para manejar la mezcla de widgets.
-
2 Crear controlador y modelo para el mix
Vamos a crear el controlador y modelo para los mix.
-
3 Crear rutas
Vamos a crear las rutas que vamos a emplear para hacer la gestión.
-
4 CRUD mix widgets: Definir formulario para Crear y editar
Vamos a crear el formulario que vamos a emplear para la gestión de los mix.
-
5 CRUD mix widgets: Definir formulario para Crear y editar parte 2
Parte dos del formulario.
-
6 CRUD mix widgets: Crear en registro en BD
Vamos a crear el proceso para guardar un mix.
-
7 CRUD mix widgets: Actualizar el registro en BD
Vamos a crear el proceso para actualizar un mix.
-
8 CRUD mix widgets: Listado
Vamos a construir el listado para administrar los mixs de un grupo.
-
9 Hacer recurso Rest
Vamos a hacer un recurso rest para consumir los mixs.
Flutter: Consumir Mix de widgets
-
1 Introducción
-
2 Crear método constructor para los mix
Vamos a crear el método constructor para consumir los mixs de la Rest.
-
3 Crear proveedor de contenido para el mix
Vamos a crear el proveedor de contenidos.
-
4 Rediseñar la página para los mix
Vamos unos cambios importantes para la página del mix que pueda emplear la conección de la Rest.
-
5 Definir pantalla de selección de grupos mix
Vamos a crear una página inicial para seleccionar los grupos.
Extra Laravel: RestApi estilo CRUD de notas
-
1 Introducción
-
2 Crear la estructura
Vamos a crear la estructura para crear el CRUD.
-
3 Crear el controlador y el modelo
Vamos a crear el controlador y el modelo para la Api.
-
4 Crear las rutas
Vamos a crear las rutas que vamos a emplear.
-
5 Crear el CRUD para las notas parte 1
Vamos a crear la primera parte de la Rest, el recurso para obtenerlos todos paginados, el detalle individual y la eliminación.
-
6 Crear el CRUD para las notas parte 2
Vamos a crear la segunda y última parte que sería para crear y actualizar notas.
-
7 Presentación Postman
Vamos a presentar el cliente que vamos a emplear para hacer peticiones a nuestra Rest.
-
8 Probar CRUD mediante Postman
Vamos a probar la rest anterior.
Extra Django: RestApi estilo CRUD de notas título contenido
-
1 Crear modelo y migración de notas
Vamos a crear el esquema o el modelo principal que sería el de notas.
-
2 Definir el modelo en el archivo de admin
Vamos a definir la clase modelo de notas en el archivo de admin para crear el CRUD automático.
-
3 Crear la Rest tipo CRUD para las notas
Vamos a crear la Rest, el recurso para obtenerlos todos paginados, el detalle individual y la eliminación.
-
4 Asignación de rutas internas mediante un comportamiento de la Rest Api
Vamos a hablar un poco sobre la capa de personalización que permisos para la Rest automatizada de tipo CRUD.
Extra Flutter: Enviar peticiones CRUD a la RestApi de Notas
-
1 Introduccion
-
2 Crear página inicial
Vamos a crear la estructura y la página inicial que será la de listado para las notas.
-
3 Listado: Crear un listado estático
Vamos a crear un listado estático.
-
4 Listado: Crear un listado paginado
Vamos a crear un listado paginado.
-
5 Listado: Colocar widget de carga
Vamos a mostrar un widget de carga cuando estamos cargando datos.
-
6 Listado: Crear modelo y proveedor de contenido para las notas
Vamos a crear el modelo y el proveedor de datos para las notas.
-
7 Listado: Adaptar al modelo de notas
Vamos a terminar de adaptar la página de listado de notas, para que trabaje con las notas.
-
8 Formulario: Crear estructura inicial
Vamos a crear el esquema de formulario inicial.
-
9 Formulario: Colocar dentro de una carta
Vamos a colocar el formulario dentro de una carta para mejorar el aspecto.
-
10 Formulario: Enviar mensaje al procesar la data: SnackBar
Vamos a enviar un mensaje de éxito al momento de enviar el formulario.
-
11 Formulario: Asociar controles para obtener los valores de los TextField
Vamos a asociar controladores a los campos del formulario para acceder a sus valores.
-
12 Formulario: Crear nota en la Rest Api
Vamos a crear los procesos para crear una nota mediante nuestro provider.
-
13 Formulario: Procesar respuesta de error
Vamos a manejar el estado de error de la respuesta.
-
14 Formulario: Procesar respuesta de éxito
Vamos a procesar cuando la respuesta es exitosa, es decir, se creo la nota.
-
15 Formulario: Crear efecto swipe para el listado
Vamos a instalar un paquete que nos provee el efecto swipe para las notas.
-
16 Formulario: Habilitar edición desde el listado
Vamos a crear el efecto swipe para las notas.
-
17 Formulario: Cambios funcionales
Vamos a hacer algunos cambios en las páginas de listado y save de las notas para adaptar el esquema de edición.
-
18 Formulario: Modificar provider
Vamos a modificar el provider de las notas para la actualización.
-
19 Formulario: Actualizar una nota
Vamos a actualizar la nota.
-
20 Eliminar una nota
Vamos a implementar todo para eliminar una nota.
-
21 Recargar TODO el listado al retornar al listado desde edición
Recargar TODO el listado al retornar al listado desde edición
Laravel: Definir el comportamiento para los widgets
-
1 Introducción
-
2 Crear la migración y el modelo
Crear la migración y el modelo para trabajar con los comportamientos.
-
3 Crear el controlador y la ruta
Vamos a crear el controlador y la ruta para manejar el comportamiento.
-
4 Definir las relaciones mórficas en los modelos widgets
Vamos a definir las relaciones mórficas para los widgets en los modelos.
-
5 Demo: Ejemplo funcional de lo que queremos construir
Vamos ha crear un ejemplo funcional de que es lo que queremos construir en esta sección.
-
6 Crear formulario y validaciones para el comportamiento
Vamos a crear el formulario para la gestión de los comportamientos.
-
7 Formulario genérico de comportamiento
Vamos a crear un formulario genérico para poder emplear en el resto de los widgets.
-
8 Problema con la columna content2 al ser vacía
Vamos a corregir un problema con la columna de contenido secundaria.
-
9 Pasar el comportamiento desde la Rest Api
Vamos a pasar el comportamiento con el resto de los widgets.
-
10 Recursos Rest y configuraciones de ejemplo para trabajar en la siguiente sección
Vamos a explicar cuáles fueron los cambios y las configuraciones que vamos a emplear para los comportamientos en la siguiente sección.
Django: Definir el comportamiento para los widgets
-
1 Introduccion
-
2 Entender el uso básico de los ContentType en Django
Vamos a explicar como funciona el contentType en Django.
-
3 Crear el modelo de comportamiento
Vamos a crear el modelo para manejar el comportamiento.
-
4 ContentType: Dar los primeros pasos
Vamos a dar los primeros pasos con el ContentType para saber cómo puedes emplearlos para las relaciones más comunes.
-
5 ContentType: Crear la relación invertsa, GenericRelation
Vamos a crear la relación inversa, para obtener el botón dado el comportamiento.
-
6 Crear GenericRelation para el resto de los widgets
Vamos a adaptar el comportamiento genérico para el resto de los widgets/modelos.
-
7 Crear formulario para administrar el comportamiento
Vamos a crear el formulario para administrar los comportamientos.
-
8 Cargar datos por defecto del comportamiento: change_view
Vamos a precargar la data del comportamiento en el formulario.
-
9 Procesar los datos del comportamiento: response_change
Vamos a procesar la data del comportamiento.
-
10 Validar que el content_1 este presente
Vamos a validar que el content_1 este presente.
-
11 Opcional: Eliminar comportamiento
Vamos a eliminar el comportamiento dado una condición.
-
12 Crear clase con funciones personalizadas para procesar el formulario
Vamos a crear una clase base para el comportamiento y de esta manera extender para el resto de los widgets/modelos.
-
13 Adaptar los recursos rest para devolver el comportamiento
Vamos a modificar nuestras clases serialziadas para que devuelvan el comportamiento.
-
14 Crear el campo opcional en DRF para el tipo
Vamos a aprender a especificar campos de manera dinámica con valores estáticos o predefinidos.
Flutter: Definir el comportamiento para los widgets
-
1 Introduccion
-
2 GestureDetector, para agregar el evento click a cualquier widget
Vamos a crear un componente para hacer clickable cualquier elemento o widget.
-
3 Consumir el comportamiento de manera opcional en los widgets
Vamos a hacer el desarrollo para consumir el comportamiento.
-
4 Django: Adaptar el consumo del comportamiento en Django
Vamos a realizar algunos cambios en el recurso que estamos consumiendo para el comportamiento para que trabaje correctamente con la RestApi de Django.
-
5 Desarrollar recurso para manejar el comportamiento
Vamos a crear un recurso para trabajar con el comportamiento.
-
6 Definir el comportamiento para una URL externa
Vamos a trabajar en el comportamiento para desplegar una URL en un navegador.
-
7 Pase del contexto a los métodos builds de los widgets
Vamos a pasar el contexto a los métodos que se encargan de construir los widgets para poder realizar algunas operaciones, por ejemplo, la navegación.
-
8 Definir el comportamiento para una URL recurso (Mix)
Vamos a desarrollar el comportamiento de desplegar un mix.
-
9 Asignación de rutas internas mediante un comportamiento de la Rest Api
Asignación de rutas internas mediante un comportamiento de la Rest Api
Django: Proteger la RestApi con tokenAuth
-
1 Introducción
-
2 Proteger Rest Api
Vamos a proteger la RestApi en DRF de manera global.
-
3 Crear la Rest tipo CRUD para las notas
Vamos a crear la Rest, el recurso para obtenerlos todos paginados, el detalle individual y la eliminación.
-
4 Probar el token
Vamos a probar el token generado en nuestra RestApi.
-
5 Cerrar sesión
Vamos a crear una función para poder destruir el token.
-
6 Verificar el token de autenticación
Vamos a crear una función para verificar si el token es correcto o no.
Laravel: Proteger la RestApi con tokenAuth
-
1 Presentación e instalación de Laravel Passport
Vamos a presentar rapidamente Laravel Passport como el paquete que vamos a emplear para proteger la RestApi.
-
2 Configurar nuestro proyecto
Vamos a realizar las configuraciones necesarias en nuestro proyecto para Passport.
-
3 Crear controlador y ruta para el login
Vamos a crear la función de login para generar el token auth de nuestro usuario.
-
4 Probar el token
Vamos a hacer una prueba con la función de login y consumir un recurso rest protegido.
-
5 ¿Laravel Passport redirecciona a la página de login?
Vamos a evidenciar un pequeño problema que puede ocurrir cuando trabajamos con la RestApi en Laravel.
-
6 ¿Laravel Passport redirecciona a la página de login?
Vamos a evidenciar un pequeño problema que puede ocurrir cuando trabajamos con la RestApi en Laravel.
-
7 Verificar el token de autenticación
Vamos a crear una función para verificar si el token es correcto o no.
-
8 Cerrar sesión
Vamos a crear una función para poder destruir el token.
Flutter: Adaptar la app a la Rest Api protegida
-
1 Introducción
-
2 Primeras pruebas con la autenticación requerida en la Rest
Vamos a realizar algunas pruebas para poder consumir la Rest Api protegida por el token de autenticación.
-
3 Crear una clase base para los providers y adaptar el proveedor para los grupos
Vamos a crear una clase base para poder reutilizar el apartado de enviar el token de autenticación.
-
4 Tarea: Replicar en el resto de las clases providers
Vamos a replicar los cambios en el resto de los providers.
-
5 Preferencias de usuario para el token
Vamos a instalar y configurar el plugin para trabajar con las dependencias de usuario.
-
6 Crear página de login
Vamos a crear una página para manejar el login.
-
7 Mandar a la página de login si el token no está definido
Si el usuario no está autenticado, desde la app lo mandamos a la página de login.
-
8 Definir validaciones para el formulario
Vamos a crear las validaciones para el formulario para el login.
-
9 Enviar petición al servidor y guardar el token
Vamos a enviar la petición al servidor para generar el token y a posterior guardarlo en las preferencias del usuario.
-
10 Consultar el tokenAuth desde BaseProvider
Vamos a realizar las modificaciones para que desde el proveedor base se consuma el token.
-
11 Cerrar sesión
Vamos a desarrollar la opción para cerrar la sesión del usuario.
-
12 Procesar petición por login fallido
Vamos a procesar la petición de login fallida.
-
13 Bloquear botón al momento de realizar la petición
Vamos a bloquear el botón al momento de enviar una petición en nuestro formulario.
-
14 Verificar token al arrancar la aplicación
Vamos a verificar si el token es válido para ingresar en la app en Flutter.
Flutter: Crear sistemas de cartas con Drag and Drop
-
1 Introducción
-
2 Crear la página
Vamos a crear la estructura inicial para manejar esta nueva sección.
-
3 Primeros pasos con el Drag
Vamos a conocer el componente llamado Draggable en Flutter.
-
4 Crear un componente de cartas
Vamos a crear un componentes de cartas.
-
5 Reto: Adaptar el Drag a las cartas
Vamos a hacer las cartas arrastrables/drag
-
6 Eliminar la carta cuando termine el Drag
Vamos a eliminar una carta mediante los callbacks.
-
7 Crear paneles a la derecha e izquierda
Vamos a adaptar el eje para que al hacer el drag solamente se mueva en el eje de las x.
-
8 DragTarget, registra cuando el Drag terminó
Vamos a crear un objetivo para el elemento Drag.
-
9 Mover carta de manera horizontal
Vamos a mover la carta solamente en un eje.
-
10 Remover carta al entrar en los DragTarget
Vamos a remover la carta solamente cuando lo dejemos en un widget de tipo DragTarget.
-
11 Crear popup para indicar respuesta
Vamos a crear un popup para mostrar una respuesta al momento de arrastrar la carta.
-
12 Animar popup
Vamos a animar el popup anterior.
-
13 Animar Carta
Vamos a animar la carta anterior.
-
14 Arreglar overflow del texto
Vamos a mostrar una solución del problema de visualización del texto en el popup cuando ocurre la animación.
-
15 Animar DragTarget cuando se mueva un elemento arrastrable
Vamos a colocar una sencilla animación cuando arrastramos un elemento Draggable dentro de un DragTarget.
-
16 ¡Importante!
¡Importante!
Flutter: Dar funcionalidad al sistema de cartas
-
1 Introducción
-
2 Crear Modelo
Vamos a crear el modelo de datos para construir el sistema de cartas.
-
3 Data inicial de prueba
Vamos a generar algo de data de pruebas para crear el modelo anterior.
-
4 Cartas: Definir el color
Vamos a definir los colores para las cartas.
-
5 Cartas: Crear cartas con el nuevo modelo
Vamos a crear las cartas con el modelo que construimos anteriormente.
-
6 Cartas: Colocar título
Vamos a colocar el título al renglón de preguntas que estamos mostrando.
-
7 Cartas: Definir imágenes
Vamos a definir la imagen a la carta.
-
8 Cartas: Definir imágen y título
Vamos a colocar el título o la pregunta a la carta.
-
9 Cartas: Procesar respuesta del usuario
Vamos a procesar y mostrar las respuestas del usuario.
-
10 Opcional: Extensiones
Vamos a realizar un paso completamente opcional, para extender el uso del string mediante las extensiones en Dart.
-
11 Cartas: Colocar mensaje de finalización
Vamos a colocar un mensaje de finalización al momento de terminar las preguntas.
-
12 Mostrar resultado al usuario en tiempo real
Vamos a mostrar cuántas preguntas hay en total, y respondió de manera correcta o incorrecta al usuario.
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter