Curso: Flutter + Gemini - Aplicaciones con inteligencia artificial | por Fernando Herrera - [S2/L05] Flutter + Gemini: Aplicaciones con inteligencia artificial - Riverpod | config y providers

En este momento quiero que empecemos nuestro camino a manejar el estado de nuestra aplicación usando RiverPod. Para eso les voy a pedir que vaya a en el material a junto, ustedes estrenen un enlace que lo llevo directamente a la Alguien estáner o los primeros pasos con RiverPod. Recuerden muy importante de nuevo a seguridad de que todo lo que ustedes vean esté con este check puesto porque vamos a trabajar con el co-generation. Van a bajar un poco, esto ya lo hicimos en las instalaciones, todo esto ya lo tenemos, lo que sí quiero que nos enfuquemos es específicamente en cómo utilizar RiverPod.

Para usarlo nosotros podemos crear providers de esta manera que en este caso estaría proveyendo el valor de Hello World o este string con el decorador a Roba RiverPod. No se preocupen mucho por comprender todo esto, pero este decorador le va a indicar a nuestro co-generation que vamos a tener corriendo para que creen todo el código necesario para crearse un proveedor bastante optimizado para nuestra aplicación. Para poder utilizar estos proveedores tenemos que colocar nuestro provider scope en el punto más alto de nuestra aplicación que se recomienda que sea dentro del run-up. Entonces vamos a hacer esta instalación, vamos a gokerse a este provider scope, vamos a irnos a Visual Studio Code, ahora en su main, busquen el main app y si quieren ustedes pueden hacerlo siguiente.

Vorre en esta constante, pongan el provider scope, presionen enter para la instalación o para la referencia del RiverPod que aquí la tenemos y el chile sería nuestro main app, que por cierto no me gusta que se ame main app lo podíamos renombrar algo como Gemini app, ok, entonces sería Gemini app y Gemini app app por ahí. Entonces voy a grabarme los cambios, hago fures a desuplicación y esto debería de pues no crearles ni nada. Ok, ahora vamos a crearnos nuestro primer provider, yo no quiero hacer este texto, esto es muy general, lo que sí quiero hacer es crearme un provider, entonces voy a irme aquí en la carpeta de Presentation Provider y voy a crearme un archivo nuevo que se va a llamar user y un bajo provider.dat, en teoría en teoría nosotros no use, sería user, pero no, user provider.dat, aquí voy a crearme los dos usuarios de una vez, pero enturía ser bueno que hacieron un archivo para Gemini y otro archivo para la parte de nuestros usuarios normales, el usuario autenticado en nuestra aplicación. Bien, cómo funciona básicamente RiverPod?

Bueno, no es más que una simple función que regresa una pieza de estado que nosotros queremos preservar en nuestra aplicación, eso sería todo, por ejemplo sería algo como Gemini user, ok, recuerden que estoy trabajando como una función, paréntesis, ya voy a colocar algo por ahí, abro y ser hoy ya ves y pocas palabras lo que voy a querer colocar por acá sería lo que nosotros tenemos en nuestro Basic Prompt Screen, entonces ustedes se acuerdan, tenemos aquí nuestro Gemini user, si ustedes quieren lo podemos cortar, pero aquí me va a fallar esto, me va a dar más caro un error, pero cortenlo, voy a regresar por acá, lo pegamos dentro de la función y si ustedes se fiquen exactamente lo mismo, aquí no he hecho nada, nada, nada diferente, y voy a hacer un return de el Gemini user, ok, simplemente creamos una función que regresa ese Gemini user, eso sería todo, pueden mencionar control.com por acá y podemos importar de Florel Chat Types todo esa parte y esto es básicamente mi provider, no es más, de nuevo que una función que regresa una pieza de estado que quiero que sea global en mi aplicación, o una pieza que yo que quiero que viva en cierto punto de mi aplicación, solamente son globales pero pueden ser, inclusive el escopo de ser menor, otra cosa que siempre he recomendado a pesar de que esta función en teoría podría de inferir cuál es el tipo de retorno, en este caso es el tipo user, Gemini user, siempre es bueno que nosotros definamos los valores de retorno, por ejemplo esto va a regresar de mi types punto un user, eso es lo que va a retornar, ok, esto es simplemente ese tipo de retorno, ustedes no quieren poner a roba Types, ustedes simplemente pues lo importan de otra manera y ya está, a lo podríamos hacer así si ustedes no les gusta, aquí queda mucho su descripción, ok, pero con ustedes miren los ejemplos del Florel Chat, van a ver que lo ponen con el roba Types, ok, lo voy a hacer así, bien pero esto simplemente sigue siendo una función, todavía no es un provide de RiverPod, para que esto sea un provide de RiverPod, voy a poner a roba RiverPod, versioning enter y lo toman de las anotaciones, lo toman de sus anotaciones y luego aquí nosotros vamos a tener acceso a el ref y el ref lo tomamos de RiverPod de esta manera, el ref es una referencia a nuestro Proiderescope, podríamos verlo de esa manera, no sé, si ustedes se acuerdan en el main, nosotros colocamos aquí el providerescope, en el cual ofrece un ámbito donde todos nuestros Proiders van a alojarse, vas a ver cual están activos, cual están, bueno ya, pues fueron destruidos, cuál es hay que recrear, o cuando ustedes necesiten acceso a otro provider, ustedes pueden usar este ref, ok, bien, para crear el provider, porque esto simplemente es una función, pero para crear el provider, nosotros ocupamos colocar el siguiente código, vamos a poner parte, termina en puntuicoama y tiene que escribir el mismo nombre de la chivo que ustedes se encuentran, que este caso sería user y un bajo provider, por favor escribieron lo igual, user y un bajo provider, provider.g.dart, este.g.dart, esto es un chivo que todavía no existe, van a ver, no está creado, no hay nada en este path y obviamente esto me va a marcar un error, para que nosotros creemos este archivo, de forma automática que literalmente hay adentro, donde está el provider y todo el gestor de estado para ese proveedor, nosotros ocupamos ejecutar algo que tenemos por acá, ocupamos ejecutar este dar run, build run, nuestro build run is lo que tenemos que hacer, copiense este comando, controlse, ahora la terminal integrada de su editor de código o la terminal fuera de su proyecto en cualquier lugar, bueno fuera de mi su estudio code, la terminal que ustedes quieren usar, pero necesito que dejen ejecutando este comando, la primera vez va a demorar un poquito porque van a analizar todo y luego cada vez que detecte algún cambio, entonces ahí donde lo va a ejecutar específicamente, de nuevo la primera vez puede tardar un poco, entonces experiencia un segundo, van a ver que aquí el error ya desapareció y nos creó el archivo.g.dart, a veces ese chivo tiene un icono diferente como gris porque eso es un archivo generado, ustedes no van a modificar ni necesitan comprender nada lo que está por acá, todo este es el código respectivo para poder manejar ese provider que nosotros tenemos de nuestro Jamie News, y eso sería todo, eso es todo lo que hay que hacer por acá, este es nuestro primer primer provider que mantiene la información del Jamie News, me voy a regresarme aquí a Basic Prompt Screen, van a ver que aquí tenemos el error porque obviamente no tenemos este usuario, si quieren estos mensajes borrenlos o coméntelo todo porque realmente no lo vamos a usar de esta manera, vamos a quedarnos un provider para manejar de sus mensajes, coméntelo, estoy aquí ya no lo vamos a ocupar, pero lo que sin necesito es que tengamos acceso a el Jamie News en este Basic Prompt Screen, para hacer eso ustedes van a dejar el cursor encima del estéslis widget y si tiene la instalada a las extinciones de RiverPod, ustedes van a ver que debería detener una opción por acá de transformarlo en consumer widget, no me aparece por acá que mala, suerte antes me aparecía, bueno un consumer widget, eso es lo que vamos a tomar por ahí, este consumer widget por favor importe también de flore RiverPod, entonces este consumer widget me va a permitir a mí dentro de mi método, Bill, tener acceso a un widget ref, widget ref, widget ref, que es básicamente el mismo ref que habíamos visto en el provider, solo que aquí ya tenemos acceso a todos los widgets dentro del proceso de construcción, o mejor dicho a todos nuestros providers dentro del proceso de construcción y nos permite estar pendientes de que se algo cambia, entonces podríamos poner aquí final Jamie News, esto sería igual a nuestro ref.watch porque queremos estar pendientes de los cambios que sucedan en ese provider, aunque en teoría no a cambiar, nunca es tu usuario, no lo pretendo cambiar, pero el watch está pendiente del mismo y sí es su usuario cambia o ese provider cambia, entonces vuelve a redujar este widget, aquí tenemos nuestro watch y ahora ocupamos nuestro Gemini User Provider, Gemini User Provider y van a decir, y este Gemini User Provider de dónde está saliendo, ustedes se fijan este Gemini User Provider, debería aprecier de nuestros providers que sería este de acá, pero yo en ningún lugar creé físicamente este Gemini User Provider, la verdad es que sí lo creamos, van a ver que aquí no tenemos ese Gemini User Provider, pero dentro del archivo construido, van a ver que por aquí tenemos nuestro Gemini User Provider, ahí está, ven, aquí está la definición del mismo, pero ustedes no necesitan venir a modificar eso, lo que tienen que saber es que RiverPod genera automáticamente ese Gemini User y este Gemini User es lo que nosotros vamos a identificar para digamos si queremos crear algún mensaje, que sería de nuestros types, punto message, voy a poner aquí un text message, aquí el autor sería nuestro Gemini User, usamos exactamente igual, si quieren el aire pueden poner cualquier cosa por ahora solo voy a tener uno, y el texto que diga hola mundo, hola mundo, si ustedes graban los cambios y entramos a nuestro chat, deberíamos debería ver que Gemini mando ese hola mundo, si ustedes salieran mañana llegan y cambian este usuario, por ejemplo, Gemini o Google lo que sea, entonces cuando la aplicación, bueno, detectar al cambio, porque la verdad es que el cambio lo estoy haciendo fuera, aquí deberíamos debería ver ese Google Gemini, pero por ahora podemos dejar los enamas Gemini, no más se falta poner nada más, bien este text message lo vamos a borrar porque en las próximas clases todavía quiero seguir trabajando con otros pro aides que vamos a necesitar, no? igual esto por ahora lo pueden comentar porque todavía no lo estoy usando era un simple ejemplo, lo dejamos así por ahora y lo veo en la próxima lección