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

- Andrés Cruz

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

Curso en Legacy (No tendrá más actualizaciones)

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.  

 

 

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.

Andrés Cruz

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

Andrés Cruz En Udemy

Acepto recibir anuncios de interes sobre este Blog.

!Cursos desde!

10$

En Udemy

Quedan 4d 20:48!


Udemy

!Cursos desde!

4$

En Academia

Ver los cursos

!Libros desde!

1$

Ver los libros
¡Hazte afiliado en Gumroad!