Curso Crear Widgets en Flutter con una RestApi en Laravel y Django

• Categorías
• /
• Android
• /
• Curso Crear Widgets en Flutter con una RestApi en Laravel y Django

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:

1. Modelos
2. Páginas
3. Proveedores de contenido
4. Clases para construir widgets en específico
5. 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:

1. Controladores
2. Modelos
3. Vistas
4. Helpers y Facades
5. Rest Api
6. Rutas
7. Formularios
8. Validaciones de datos
9. Bootstrap 5
10. Módulo de usuario
11. 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:

1. Vistas (controladores en el MVC)
2. Modelos
3. Creación de CRUDs desde la app de Admin
4. Rest Api con Django Rest Framework (en desarrollo)
5. 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.