Aprende a manejar la API de descanso en Flutter

1. INTRODUCCIÓN AL CURSO: manejo de las solicitudes de red y la integración API es uno de los problemas que enfrentan los principiantes de flutter. En este curso, vamos a crear una aplicación de compras normal que muestra una lista de productos que se obtienen a través de internet en nuestra aplicación más plana será la integración fija o APA. Para ello, se trata una API de descanso en línea gratuita que podemos usar siempre necesitemos acomodar eso para nuestra aplicación de comercio electrónico sin tener nuestro propio servidor backend. Además, al tratar con API, podemos obtener una gran cantidad de datos que pueden tener numerosos campos. Y así es mejor convertir a todos y cada uno de los Jason en objetos Dart. Este concepto se llama json parsing, que también discutiremos más adelante. Entonces sin perder más tiempo, Empecemos. 2. ¿Qué es la solicitud de Http: Hola, bienvenidos de nuevo al nuevo video. En este módulo, estaremos hablando de cómo implementar las llamadas API rest en Florida. Si planeas desarrollar apps que obtengan datos de internet, necesitarás saber cómo realizar solicitudes de red y cómo manejar las respuestas correctamente. Así que definitivamente, cuando estás construyendo una aplicación del mundo real, habrá muchos escenarios en los que tienes que buscar datos del servidor o tienes que tomar ayuda de algunas API en tu aplicación. Ya sea que se haya utilizado API o API de Google o lo que sea. En esos escenarios, hay que saber manejar las API de manera efectiva. Entonces ahora la pregunta es, ¿qué es una solicitud de red? En términos simples, cuando abres una aplicación como WhatsApp, Instagram o Twitter en tu smartphone. App, intenta obtener los últimos datos de una ubicación remota, generalmente llama a este servidor. El servidor es un lugar centralizado que almacena la mayoría de los datos de los usuarios. La app que estás usando se llama cliente. Por lo que hay dos términos llamados un servidor y un cliente. Cliente es la aplicación, y es que sea cual sea la aplicación o aplicación de Android o iOS que estés usando. Y servidor es la base de datos que se almacena en una ubicación distante. Entonces ese es un concepto muy básico. Ahora bien, ¿qué es una API RESTful? El resto es sinónimo de Transferencia Representacional Estatal. Se trata de una interfaz de programa de aplicación que es API, es decir esta solicitud HTTP para obtener o enviar datos entre computadoras. Así que solo recuerda, la comunicación entre un cliente y un servidor ocurre mayormente a través de API RESTful. Eso es todo. La forma más básica de forma realista es una URL que el cliente utiliza para hacer una solicitud al servidor. Por lo que si ves alguna API o un comer, obtendrás una URL, que tenías que enviar la solicitud. Es decir, tienes que golpear esa URL en particular. Y al recibir una solicitud exitosa, el servidor comprueba el punto final de la URL, hace algún procesamiento y envía los datos solicitados de vuelta al cliente. Entonces esta es una forma muy sencilla de explicar, definitivamente en esa cosa técnica central, es, podría ser un poco complejo también, pero solo hay que recordar que enviaremos una solicitud al servidor el servidor nos dará algunos datos. Eso es todo. Ahora, hay diferentes métodos que usas en una API de descanso. Entonces hay muchos de ellos entonces, pero los más utilizados son 4. En primer lugar es la solicitud GET. Simplemente significa que desea obtener algunos datos de una solicitud de base de datos remota usando get only retrieve data, lo que significa que no tienen otro efecto bajo esos datos en particular. Eso significa que solo irás a leer los datos. No se puede cambiar nada usando la solicitud GET. No post solicitud. Las solicitudes de publicación envían datos a ese recurso específico. Utiliza el método para enviar datos al servidor, como información de clientes o cargas de archivos. Por lo que indirectamente solo recuerda que si tienes que enviar algo del cliente al servidor y guardarlo en el servidor. En ese escenario, se utiliza la solicitud de publicación. El tercero se retrasa. Por lo que hace lo que dice que borra el recurso específico del servidor. Y el cuarto se pone, es decir reemplaza, o se puede decir, actualiza todas las representaciones actuales de los recursos objetivo. Eso significa que ya has enviado algunos datos al servidor, pero más adelante, quieres actualizar esa auditoría de campo en particular, particularmente de datos como edad o número de teléfono. Entonces en ese caso, se utiliza la solicitud PUT. Por lo que definitivamente son una solicitud de parche y pocas más. Si quieres saber de todas las solicitudes, solo puedes buscarlo en google. Pero la mayoría de las veces cuando estás construyendo una aplicación, estás trabajando con esto para solicitarlo. Ahora en aleteo, definitivamente si quieres hacer algo, tenemos que conseguir esa dependencia. Entonces para la solicitud HTTP, también, hay una dependencia llamada el paquete HTTP es simplemente anexar su navegador, vaya a dev y simplemente escriba http. Y luego recuerda seleccionar este. Esto es de ese propio equipo de Dart. Sí, desplázate hacia abajo y copia esa dependencia. Y en tu aplicación puedes pegarlo. Solo recuerda, si quieres crear un nuevo proyecto, entonces también puedes hacerlo ahora mismo estoy usando nuestro proyecto anterior, pero estaré quitando estos códigos anteriores. Entonces, si lo deseas, solo puedes pausar el video y simplemente escribir Florida, crear algo nuevo proyecto y comenzar desde el principio. Depende de ti. Nuestra carta pub get se está ejecutando. Se va a conseguir la dependencia y sí, está hecho. Ahora nuestra dependencia HTTP está instalada. Lo siguiente que estaré haciendo es eliminar los archivos anteriores. Y ahora en la carpeta mid lib, crearé nuevas carpetas como primero es verde, y la segunda es carpeta de servicios. Y dentro de la pantalla, crearé servicios home dot dot y insights. Recuerdo que crearé API de servicio dot dot. Entonces simplemente lo que hice fue yo, organizo nuestros códigos de manera limpia. Es como si todas las pantallas estuvieran en la carpeta de pantallas. Todos los servicios API que son código del lado del servidor más antiguo o lo que sea que esté interactuando con la API estarán en el punto punto de servicio API. De esta manera, tienes una separación de código y tendrás este modelo MVC, es decir Model View Controller pattern también. Es una buena práctica. No, no quieres escribir todos tus códigos al azar y en un solo archivo. Será muy difícil para ti organizarte o depurar a largo plazo. Eso es todo. Hemos entendido qué es STDP, cuáles son sus métodos diferentes, y cómo instalar el paquete HTTP en nuestro proyecto. En la próxima sesión, utilizaremos algunas API reales y las llamaremos API usando esa solicitud GET. Gracias. Nos vemos en el siguiente video. 3. Implementar la solicitud de GET a un servidor: Hola. En esta sesión, estaremos utilizando una API de descanso real con el nombre de fijo o APA. En Internet, obtendrás, obtienes muchas APIs, pero usaremos una API ficticia para que sea, sea de uso gratuito. Y podemos hacer lo que queramos. Con esta API. Podemos obtener algunos datos falsos de comercio electrónico. que simplemente significa que si quieres obtener productos, categorías, usuarios o lo que sea, puedes obtenerlas de esta APM. Trae tu editor de texto a medida que traes tu navegador, y simplemente escribe fijo o APA. Y el primero que aparece, hay que dar clic en él. La URL es falsa tienda Api.com. Entonces sí, esto es todo. No tienes que crear ninguna cuenta ni nada para usarla. Estos son los recursos que nos da los productos. Nos da el Ejército atrapado, nos da usuarios y fichas de inicio de sesión. Y estas otras rutas. Es decir, estaba hablando de Nike. Hay URLs y pod. Se pueden decir puntos finales. Tienes que enviar solicitud. Entonces estos son los puntos finales. Por lo que simplemente si hago clic en él, ver en la parte superior se puede ver tienda falsa, Api.com slash products. Esta es la URL, y cuando pulses esa URL, esta es la respuesta que obtendrás. Entonces es en ese formato JSON. Tiene id título, luego descripción, imagen, precio. Entonces estos son los datos que nos va a dar y vamos a utilizar esos, esos datos en nuestra IU. Así que solo recuerda, después de completar esta API de tienda falsa, puedes tener API de Noticias, puedes tener API de blog. Hay muchas otras API. Si lo desea, puede probarlo por su cuenta. Pero empecemos con esta semana APA. Lo primero que tenemos que hacer es crear una función que manejará esa solicitud GET. Eso simplemente significa que esta función interactuará con la API. Por lo que a partir de ahora, escribiremos los servicios API, es decir todos los servicios que están relacionados con las API. En este expediente separado. No queremos escribir todo en la IU. Simplemente importemos el paquete HTTP al principio. Esta es la forma de hacerlo. Entonces simplemente crearé la clase de servicio API. Esta clase la podemos usar en cualquier parte de nuestra aplicación creando un objeto y luego llamando directamente a estas funciones. Ahora la primera función que crearemos es GET o post. Por lo que será una sincronía. Ahora, tenemos que escribir la URL al principio. La URL es esta. Simplemente puedes obtener la URL desde la parte superior. Sólo tienes que copiarlo y ir y pegar aquí. Ahora, para enviar una solicitud get en el uso de este paquete HTTP, no se puede enviar directamente la cadena. Tienes que convertirlo en barras URI. Y dentro de ella. Hay que mencionar yarda y punto. Este es el método o esta es la forma de hacerlo. Simplemente lo recuerdas. Definitivamente. Te acostumbrarás a ello. Ahora. Ahora tenemos la URL a golpear para enviar la solicitud. Ahora es el momento. Obtenemos el resultado que está usando el paquete HTTP. Es el punto p. Y luego se puede ver que hay un montón de solicitudes obtener post parche. Pero queremos esa petición GET. Y dentro de ella simplemente escribes la URL del producto. ¿De acuerdo? Tienes que devolverlo. Ahora. Puede imprimir el código de estado de punto resultante. Si son 200, entonces hemos conseguido con éxito esa respuesta. Si es 404, entonces esa página no existe. Y además, si quieres, sólo puedes nombrar. Se. Responde como se puede por nombre sólo usted puede entender que esta variable tiene la respuesta de la solicitud GET. Y por último, hay que devolver este cuerpo de respuesta en ese formato JSON. Por lo que sólo, derecho Jason, usted tiene que importar esos datos convertir y simplemente vamos a escribir json dot, decodificar y response.body aquí. Por lo que nuestra función o método se completa. Es así como enviamos una solicitud de get. Entonces simplemente se puede ver, lo primero fue escribir una URL. Segundo fue obtener la respuesta usando esta respuesta http.get. Y después de este STDP get, podemos devolver el cuerpo de respuesta a la interfaz de usuario que llama a esta función. ¿ De acuerdo? Por lo que la siguiente parte es mostrar estos datos en nuestra página de inicio. Simplemente en el punto de casa, crear puntos. inicio de UI básica. Entonces el retorno es falso. Dan, app. En la barra de aplicaciones. Yo morí. Entonces lo haré centrado. El título es igual a verdadero, elevación es igual a 0. Y voy a dar color de fondo como colores de fondo punto acento rojo. En el cuerpo. Estaremos utilizando futuro Builder ya que esa función es un futuro. Y futuro, simplemente escribiré punto de respuesta API, obtendré todos los posts. Ver aquí hemos creado este objeto de esa clase y simplemente llamar a esa función futura. Por lo que esta es la primera vez que vas a utilizar una función futura real. En los videos anteriores, simplemente estábamos enloqueciendo esa función. Pero ahora es una verdadera función de servidor que tardará algún tiempo en ejecutarse. En el constructor, tendremos un texto y una instantánea. Entonces como de costumbre, al principio mismo, comprobaremos si snapshot que tiene datos o bien retorno centro indicador de progreso circular. Y si tiene datos por el momento, sólo estamos enviando un texto de éxito. Porque quiero ver la salida al principio, esa salida en la consola de depuración al principio. Entonces reiniciemos. Bajar nuestra aplicación. ver, tenemos este éxito aquí, pero en la consola de depuración se puede ver response.status code es 200 y el cuerpo de respuesta es así. Es decir, es una lista de mapa. Entonces en los primeros datos. Este es el primer dato. Por lo que tiene id título, descripción. Esto está en el formato JSON. Para generar estos datos en la interfaz de usuario aquí, simplemente usaremos un widget Builder de punto de vista de lista. Vista de lista punto Widget Builder, igual que el widget ListView. Aquí. Esos datos pueden ser ilimitados. Es decir, no sabemos el número de elementos en esa lista. Entonces simplemente escribiremos aquí la longitud de esa lista. constructor de puntos de vista de lista tiene dos parámetros. El primero es el recuento de artículos y el segundo es el constructor de artículos. Item Builder es una función que tiene contextos y ese índice, índice es la posición de ese elemento en la lista que parte de 0. Por lo que el índice comienza desde 0123 hasta el número de elementos en esa lista menos uno. Porque si hay cinco elementos en la lista, por lo que el índice será de 0 a cuatro. Por lo tanto, simplemente, el recuento de elementos será datos de punto de instantánea, longitud de punto, porque instantánea que los datos es este. Y vamos a estar usando su longitud. Entonces solo recuerden, si estamos devolviendo algo en el futuro, ese futuro lo hará. Esos datos se almacenan en esta variable instantánea. De acuerdo, ahora tenemos un constructor de puntos de vista de lista. Y en el constructor de artículos, tenemos que devolver ¿cuál debería ser el rígido en esa IU? Es decir, ¿qué debemos volver a la pantalla de IU? Y voy a volver lista azulejo. Ahora simplemente en ese título, escribiré datos de punto de instantánea. Entonces indexar eso es porque es una lista, tenemos que usar este índice el cual partirá de 0. Esto sí imagina 0 contaminación es esta. ¿ De acuerdo? Entonces aquí estamos aquí ahorita en este dato que esto. Entonces este será uno de aquí. Este será uno, supongo que aún aquí. Sí. Sí, sigue aquí, Es el segundo que es el índice uno. Entonces aquí simplemente sacaré el título aquí. Eso es checkout. Si hago esto, ¿tenemos algún error o obtenemos los datos? Tuvimos ese error, está bien, está bien, lo siento, lo siento. Sólo tenemos que cortarlo y pegarlo aquí. Y si no tiene datos que simplemente le devolveremos el indicador de progreso. Fue un error muy tonto. Pero estas cosas suceden. De acuerdo. Ahora vamos a revisar otra vez. ver que se está cargando y luego tenemos esos datos. Y como es una lista de datos de vista, es desplazable. Tenemos esta mochila, camisa slim, chamarra de algodón, mucha cosa. Entonces tenemos todos los datos. Y espero que hayas entendido cómo he usado esa cosa de Jason. Simplemente los datos de puntos instantáneos son esa lista, ese índice de lista en profundidad. He ido a anochecer 0 posición, que es esta. Y desde la posición 0, he dado salida a esta clave de título porque sé que está en el mapa que es formato JSON, así que solo tengo que usar ese valor de clave. Ahora del título en el liderato, estaré usando la propiedad de imagen. Red de puntos de imagen. Entonces simplemente aquí Escriba Snapshot índice de datos de punto que imagen. Y simplemente escribiré altura como 5030. Ahora, vamos a guardar y ver. Comprueba de nuevo si está funcionando correctamente. Sí. A ver tenemos las imágenes del servidor. Entonces es la primera vez que tus datos son reales, que vienen del servidor y tu aplicación se ve bastante bien. Lo siguiente que haría es usar ese subtítulo. Y en ese texto usaré índice de datos de puntos de instantánea, y luego usaré esa cosa del precio. Y como es un entero, lo convertiré a una cadena, C 1091. Pero quiero agregar signo de dólar también. Y para escribir dólares. Y no se puede simplemente escribir este símbolo porque Florida tiene un significado diferente para él. Por lo que hay que usar dólar de retroceso como este. Y simplemente subiré precio es igual a dólar de barra invertida luego más. Y cuando revisas la salida, se ve muy bien. Se ve bastante bien. Espero que lo hayan entendido. Hasta ahora. Estábamos usando esta solicitud get. Ese es el primero donde obtenemos todos los productos. Ese segundo método HTTP o la ruta son los productos, luego un producto en particular, lo que simplemente significa cómo se puede obtener este único producto detalles. Entonces esto también es muy importante. Si da clic en él, puede ver la salida. Este es sólo el detalle de uno que es un solo producto. Por lo tanto, si ha utilizado cualquier aplicación de comercio electrónico cuando hace clic en ese producto, aparece otra página donde tiene los detalles detallados del producto, imagen del producto, la categoría del producto y luego el botón Agregar al carrito también. Entonces para usar esto, nuevamente, hay que crear una nueva función. Entonces, que será simplemente un solo detalle del producto. Para obtener el único detalle del producto cómo se hace. Vamos a tratar de hacerlo. En primer lugar. Después de este post de guitarra, simplemente copiaré esto, lo pegaré, y lo nombraré, obtendré solo producto. Y el nombre de la variable será solo producto, URL. Y también esa URL API es ID aquí. Y definitivamente es único porque no sabemos en qué va a hacer clic el usuario. Entonces tenemos que enviarlo Id mientras estamos llamando a esta función como argumento. Entonces simplemente, este es el Maktab. Para obtener ese detalle de un producto en particular. Todo será igual. Sólo la URL es diferente ahora, y estamos enviando el ID también. Ahora dentro de la carpeta de pantalla, crea otro nombre de archivo, pantalla Detalle del producto. Por lo que cuando el usuario haga clic en este producto en particular, debe ser enviado a esa pantalla de Detalles del Producto usando llevar el ID del producto. Así que simplemente ingrese material. Entonces tenga un widget con estado llamado detalle del producto. Y ahora solo recuerda que está aceptando e id Y lo enviaremos al constructor. Ahora en esa función de factura, simplemente escribe andamio. Entonces otra vez, lo mismo, AB bar. Luego dentro de un color de fondo colorea el acento rojo. Y en su cuerpo. Tenemos que volver a usar ese futuro constructor para llamar a nuestra función de encuestas API. Dot obtiene un solo producto y este ID, y este ID viene a través del constructor. En el contexto. Instantánea. A continuación, verifique instantánea que tenga datos, si no, devuelva un indicador de progreso circular. Eso es todo. Nuevamente, simplemente regresaré aquí el próximo éxito, sólo para mostrarles cómo se hace. ¿ Funciona o no? En la pantalla de inicio? En la vista de lista, tienes que usar esa propiedad on tap. Estarás enviando ese envío al usuario a la pantalla Detalle del Producto. Adl pegar este código. Solo hay que recordar cómo empujar código y todo su detalle de producto muy básico. Y en el ID, simplemente tienes que ser ese índice y luego simplemente escribir ID. Ahora si lo guardo y hago clic en el primer elemento, C, Se está mostrando. Y luego en la consola de depuración se puede ver la salida. Eso es id title, otra vez, lo mismo. Por lo que simplemente hay que exhibir. Usa este detalle para mostrar los que están en la interfaz de usuario, como hicimos en la página principal. Por lo que en la pantalla del producto, simplemente retire este texto y devuelva un contenedor. Y el contenedor sólo da margen al principio. Entonces niño será columna porque hay una gran cantidad de datos. Ahora simplemente al principio, voy a tener esta red de puntos de imagen que parece punto de datos. Y ahora es índice no estará ahí porque estáticamente es un mapa, no una lista. ¿ Verdad? Imagen que altura de 200 y peso de infinito de doble punto, es decir, peso total de la pantalla. Y luego usa VJ centrado y un niño apareció precio. Por lo que de nuevo, voy a usar dólares lo mismo que los datos de punto de instantánea y trata de cadena y dar un poco de estilo también. Ahora el estilo será el tamaño de fuente de 25 y el peso de la fuente. Peso de la fuente, audaz. Vamos a guardarlo. Shack. Ver. Se ve tan bien. Ahora lo que voy a hacer es simplemente dar un poco de espaciado en la parte superior usando esta caja de tamaño y dar Tipo D. Así que la imagen será letal abajo y entre la imagen y el precio también voy a dar alguna altura de diez para que tengamos este espaciado aquí. Y en la columna voy a estar usando principal existe alineación que inicio. Sabrás por qué lo he hecho en los próximos widgets que estaremos usando. Pero por el momento, tenemos una interfaz de usuario de aspecto muy bonito, que tiene todos los productos en la primera pantalla. Y cuando hago clic en este producto, eso significa chaqueta de algodón. Ver con la imagen, esa es la imagen del producto y ese precio se está mostrando. Entonces eso es todo. Espero que hayan disfrutado construyendo este video. Aquí. Hemos utilizado esta solicitud HTTP GET. Así que solo recuerda, estos son el único código requerido. Primero esa URL en segundo lugar es http.get. Y luego, por último, hay que devolver la respuesta y decodificándola en formato adyacente. Eso es todo. En el siguiente video, completaremos toda esta página mostrando todos los detalles como descripción, categoría y botón Agregar al carrito. Hasta entonces, sólo trata de entender el código correctamente. Si no lo has entendido, solo mira ese video otra vez. Pero por favor no te saltes ningún concepto. Gracias. 4. Cómo encontrar los datos de Json de la API: En la última sesión, pudimos buscar el detalle de un producto en particular. Y pudimos rendirlo en la interfaz de usuario. Hasta ahora, solo se muestra la imagen en el precio. Pero hoy, en esta sesión, seguiremos mostrando todos los detalles como descripción, categoría. Y si tengo un botón Agregar al carrito también. Comencemos a terminar página de detalles del producto. Tenemos esta imagen. Después en el centro. Tenemos ese precio. Entonces vamos a tener una caja de tamaño para dar poco de espacio y tener una altura de diez. Después tener un widget donde mostraremos ese título. Diversos mostraron ese título y vamos a darle un poco de estilismo. Solo queremos que el tamaño de la fuente sea 25. A ver. De acuerdo, lo tenemos. Ahora. La región del texto. Vamos a tenerlo chip widget. Si no lo haces barato, lo harás simplemente, si ves eso, sabrás que es una especie de etiquetas. Si has visto alguna etiqueta que sea electrónica o la categoría tagging o hashtags. Este tipo de rígido se está utilizando. Por lo que aquí vamos a mostrar que obtener grado. Y vamos a tenerlo cubiertas. Tengamos al día siguiente. Fuente, tamaño 15 y colores más fríos puntean blanco. Y en esa forma. Tengamos un color de fondo. Colores, el azul, gris. Vamos a comprobarlo. ver, yo estaba hablando de este widget. También. Si lo desea, puede tener la alineación del eje transversal como oscura para que todo venga aquí. De este lado, así. Depende de ti, lo que quieras. Esto, estas son cosas de estilismo muy básicas. No es gran cosa. Nuevamente, tener una caja de tamaño. Y entonces finalmente, mostraremos esa descripción. Todas las llaves están aquí. Dentro de la respuesta. Se puede ver la imagen de descripción. Y ahora voy a guardar y ver esta es la descripción. Por lo que si lo desea, puede hacer algún estilo o algún tamaño de fuente. Simplemente lo estoy dejando así. Ahora. Vamos a tener aquí un botón Agregar al carrito. Se lo daré como Botón Flotante, botón acción flotante. Entonces digamos un botón de acción flotante. Entonces niño. En el niño. Tengamos el ícono. Agregar carrito de compras, tarjeta de compra delineada en el pecho. No estamos haciendo nada. ver, aquí tenemos esto. Simplemente le daré el color de fondo trasero, de color verde. Y también cambiaré la ubicación del botón de acción flotante. Le daré ubicación de botón de acción flotante, el flotador central. Así que a ver, se ve decente. También se realiza nuestra página de detalles del producto. Si acudes a cualquier otro producto, consulta todos los detalles están aquí. El título de la categoría, precio, todo se ve perfecto. Ahora, cuando vamos a la API de tienda falsa, podemos ver que hemos hecho este endpoint que es conseguir productos más antiguos, obtener un producto en particular. Ahora es el momento de que consigamos las categorías. ver si damos click en él, hay 12344 categorías. Por lo que vamos a mostrar esas categorías en nuestra IU. En primer lugar, crearemos una función que interactuará. Yo sólo copiaré pegar y bien, obtener el arenoso. No es aceptar nada. Esto estará recibiendo una URL. Aquí. Este es el punto final. Por lo que ahora esta función va al servidor y obtiene en la categoría presente Indus EPI. No definitivamente. Para eso, de nuevo, tenemos que crear una nueva pantalla. Voy a nombrarlo todo categoría punto, punto. Espero que estén entendiendo eso, todo eso ahora es muy fácil implementar solicitud GET. Todo es básicamente lo mismo. Simplemente estamos completando nuestra IU para que se vea muy bien. En la antigua categoría punto punto donde simplemente material importante. Después crea un widget sin estado llamado get a goodie. Ahora tienen una barra de andamios. Murió de. Siguiente. Consigue que las golosinas tengan fondo de color de colores que son rojos y lo envían a través en el cuerpo. Tendremos ese futuro. ¿ Será eso otra vez? Ya que estará interactuando con nuestra función. Ahora, usa el objeto de nuestra clase para llamar a la función get all category. En el constructor. Tendremos contexto y una instantánea de sumidero. Simplemente tenemos que comprobar si el punto de instantánea tiene datos. De no ser así, le devolveremos un conjunto de indicador de progreso más fresco. Si instantánea que tiene el diablo, esto por el tiempo que se devuelve, devolver un éxito. Ahora, lo que se puede hacer es que debemos navegar a la pantalla. Y para eso, en la página principal, estaré creando algunos botones. Lo será, puedo, pero tendrá un ícono. Puedo empezar a ver lista. Ahora navegaremos a la pantalla de categorías. Mi diseño de página TDL. Tendremos un contexto. Y esto. Entonces vamos a ver cómo, cuál es la salida en la consola de depuración. Se puede. Ver aquí este es el botón de icono que tenemos, que es el todas las categorías que si hago clic en él, tenemos este éxito y ver, esta es la respuesta de salida del servidor. Por lo que ahora simplemente en la página de categoría antigua, voy a devolver una vista de lista Constructor. Ya que es una lista. Recuento de elementos, datos de puntos instantáneos, longitud de punto. Y en el constructor de Item, simplemente tendré contextos e índice. Ahora, tenemos este índice y ahora vamos a devolver un widget de tarjeta. Este es otro widget. Supongo que es un widget realmente básico que tiene un alivio, solo le dará un poco de margen y luego le dará una forma de borde rectangular redondeado, borde, radio de borde, circular 15. Y luego en ese niño, tendrás un contenedor. Esto es sólo una cosa básica donde mostraré estos electrónicos. La alegría sigue siendo colección todo. Ahora aquí en ese texto, mostraré datos de puntos de instantánea y luego indexaré directamente. Y lo haré mayúscula. Sólo para mirar buen día. Voy a dar un tamaño de fuente de 25. Ahora vamos a ver. Echemos un vistazo a la salida. Ahora cuando hago clic en él. Ver electrónica, joyería, ropa de hombre, mujer. Entonces se ve muy bien. Se ve decente. Se puede decir al menos este margen y relleno donde solía dar el espaciado dentro de un exterior estas tarjetas. Y definitivamente al dar clic en esta tarjeta, deberíamos ir a una pantalla donde se mostrarán todos los productos relacionados con esta categoría. Para eso en la tarjeta, solo lo envolveremos con un widget de tintero y no tendremos la función de tap, que usaremos más adelante para buscar productos por categorías. Entonces eso es todo por este video. En el siguiente video, vamos a buscar los productos por sus categorías. Ngo. 5. Aplicación de compras básica: Hola, bienvenidos de nuevo. En esta sesión, completaremos esa solicitud GET. Y hasta ahora, pudimos buscar las categorías y mostrarlas en nuestra aplicación. Pero ahora es el momento de buscar productos basados en estas categorías. Eso significa que si hago clic en electrónica, entonces debería aparecer una nueva pantalla que contenga todos los productos electrónicos. Y para ese punto final es este, que es categoría de productos. Y luego tenemos que enviar este nombre de categoría. Entonces como siempre, comencemos con la API al principio. Entonces para eso, solo copiaré esto y lo pegaré aquí. Yo lo pondré nombre, obtén producto. Al conseguir. Ahora aceptará un gato de cadena llamado este nombre de categoría. Y el nombre de la variable. Voy a cambiar esto para buscar producto. Consigue lo arenoso que eres. Puedes nombrar lo que quieras. Y aquí el endpoint es como esta categoría y luego ese nombre de gato. Entonces a ver, así es como se hace y si damos click en él, nos dará respuesta. Con productos Alda. Ahora tenemos lista la función, pero también deberíamos crear una nueva pantalla, que llamaremos a esta función. Nombraré categoría de edad, producto punto punto. Y ahora importaré mi TDL. Que un estado menos rígido de una pantalla. Aceptará un nombre de categoría en el constructor. Tenemos que asignar eso a esta variable. Ahora, vamos al andamio. Después AB bar. En ese título. Voy a dar este nombre de categoría a mayúsculas. Este debe ser el título y los colores de fondo. Kettler empieza a leer. Y luego se reparte la etiqueta central. Ahora bien, lo que queremos es cuando damos click en esto, este pitch debería abrirse. Entonces vayamos a categoría petrolera. Y en el tintero, tenemos que usar navegador, dot bush. Entonces mi TDL Page Layout, Ver Reveal, y luego el nombre productos grano. Y entonces tenemos que mandar ese nombre en particular. Obtendremos el nombre de los datos de la instantánea y luego indexaremos. Vamos a probarlo. A ver qué pasa. Ahora cuando voy a Categorías y hago clic en joyería. Ver estas alegrías está ahí en el bar AB. Si hago clic en electrónica, la electrónica está ahí. Por lo que ahora simplemente usaremos un futuro constructor dentro de la página de producto de categoría. Y justo después de que el nombre correctamente. De acuerdo, Así que en el cuerpo, Tengamos un futuro constructor. Nan. Entonces futuro será App Service, obtener producto por categoría y luego enviar que obtenga la variable de nombre arenoso. Y en el constructor, tendremos un contexto. Como siempre, supongo que sólo lo aprenderás. Ahora. Lo mismo lo estamos haciendo una y otra vez. Tal vez nunca contextos. Y luego una sola instantánea. Lo comprobaremos. Si instantánea que tiene datos y retorno circular indicador de progreso circular. Esto lo hemos hecho más que, incluso olvidé cuántas veces hemos hecho estas cosas. Ahora si tiene los datos, usaremos un generador de vista de lista. Ahora, esta IU deseará lo mismo que la IU de inicio. Este constructor ListView. Esa categoría. Simplemente giraremos este constructor de ListView. Y en primer lugar, sólo voy a comprobar si todo está correcto aquí. Datos de punto de instantánea, punto, del, precio de índice que esta pantalla de producto voy a importar. De acuerdo, vamos a echarle un vistazo. Si hay algún error. Cuando hago clic en electrónica, no pasó nada. A ver, ¿Tiene algún error o error? Producto por categoría? Bueno, producto por categoría. Entonces tenemos esta función. Reiniciemos ahora y luego verifiquemos si aún persiste algún error. Saben, supongo que simplemente no guardé el archivo. Eso está bien. Pero véalo mostrando ahora, si voy y joyas solo las cosas de joyero realmente están ahí y si hago clic en él, esta página de detalles del producto aparecerá. Entonces está funcionando muy bien. Y supongo que nuestra esta porción está hecha. Ahora, cuando pensamos en cualquiera, se puede decir aplicación de comercio electrónico definitivamente hay un carrito de compras que no hemos usado aquí. Entonces vamos a ver ese documento de recursos. Y aquí puedes ver que podemos conseguir un carrito también, cual nos dará algunos productos si enviamos una identificación de usuario. Así que por favor tómese el tiempo para leer estos documentos. Aprenderás mucho. Hay muchos puntos finales. Misma. Estoy usando algunas de ellas solo para mostrarte cómo se hace. Ahora estaremos implementando la página del carrito. En primer lugar, implementaremos una función que obtendrá esa tarjeta. Entonces sólo voy a ponerle un nombre, obtener tarjeta. Aceptará una identificación de usuario. Y lo voy a nombrar buscar productos de tarjeta. Y entonces el punto final es. Esta tarjeta y luego el ID de usuario. Este es el punto final de la API del carrito. Por lo que ya que es una API ficticia, tenemos que usar detalles de usuario ya existentes en sus productos de automóviles. No podemos insertar nuestros propios datos de verdad. Tomaremos un ID de usuario de uno para buscar que está en simplemente recuerda, lo que sea que estemos haciendo es solo un dato falso. Yo lo haría, solo quiero que entiendas el concepto de HTTP y cómo buscar y mostrar los datos en la interfaz de usuario. Eso es todo, nada más que eso. Ahora, vamos a crear una página de pantalla de guardia. Punto verde de Dios. Después importa material. Tengamos una pantalla de estado menos rígida de tarjetas. Entonces como usted deberá, tendremos es andamio. Entonces en ese título. ¿ Verdad? Usted es. Dios, se verá profesional. Entonces algunos Ted igual que antes hemos hecho esto tantas veces, supongo que ahora tenías un experto en estas cosas. Ahora, en el órgano, tendremos unos cuantos presididos a un constructor que aceptará si futuro consigue tarjeta. Y voy a enviar un ID de usuario uno, que ya sé es que está ahí en el fijo o API. Sólo tiene que utilizar la documentación de esa API. Una vez más, si no has entendido instantánea que tiene centro de datos, ese es indicador de progreso circular. Aquí. Apenas por el momento, estoy leyendo un texto de éxito para que podamos obtener ese resultado en la consola de depuración. Ahora, obviamente tenemos que navegar a la pantalla también. Por lo que la casa, ir a la barra de aplicaciones y voy a copiar este botón de icono y pegarlo. Y ahora este será carrito de compras. Y esa página será pantalla de guardias. Vamos a comprobarlo. ver, tenemos esta tarjeta. Puedo oír. Ahora si hago clic en el ícono del carrito, esa respuesta es esta. Nos da una respuesta de 200. Es decir, fue un éxito. Tenemos el ID ID de usuario uno. Entonces. Nuestra principal preocupación es la clave de productos más fáciles. Por lo que la clave del producto tiene un valor de una matriz, que consiste en el ID del producto y la cantidad. Por lo que aquí estamos consiguiendo ese ID de producto solamente. Por lo que tenemos que utilizar a los futuros constructores con el fin buscar detalles de la tarjeta al principio y luego luego buscar producto. Eso es definitivamente que queremos el nombre del producto y la imagen del producto de este ID de producto. Entonces comencemos para eso. Simplemente, vamos a escribir si snapshot que tiene datos, entonces tendremos una lista de productos, que es, que es esta clave, que es clave de productos. Ahora, estaremos usando y List View builder. Mostrar todos esos productos. Y en el recuento de artículos, estaré usando productos dot land. Y en el constructor de ítems, estaré usando contexto e índice. Ahora, empieza la diversión porque de nuevo, tenemos que usar un futuro. Porque ahora tenemos que obtener el detalle del producto del ID del producto que ya hemos hecho antes. Entonces simplemente tenemos que escribir APIs, encuestas, punto consigue un solo producto. Y luego simplemente iré a usar estos productos, luego indexar y luego este ID de producto. Así. Ahora, otra vez tendré contextos de Rick y luego viendo instantánea esa derecha. Esta vez voy a nombrar es instantánea de arcos. Y luego de nuevo, tenemos que comprobar si un solo punto de instantánea tiene datos. Esta vez, estaré regresando primera vez un indicador de progreso lineal. Y ahora tendré un estilo de lista que contiene todos los detalles. Simplemente en el estilo de lista. Tendré ese título al principio y les mostraré que está funcionando. Canta datos de punto de instantánea, luego título. Vamos a comprobar si está funcionando o no. Saca tu solicitud. Y entonces simplemente si hago clic en ese carrito, C, C, tenemos los tres artículos que están en el carrito. Esta lógica es un poco difícil, pero hay que pausar el video y entenderlo correctamente clave. En el primer futuro constructor, estamos recibiendo el carro. En el segundo constructor futuro, estamos obteniendo el nombre de la imagen del producto y un precio de ese ID de producto. En el líder, utilizaré la red de puntos de imagen y luego simplemente hundiré los datos de puntos de imagen. Y luego imagen. Simplemente le daré una altura de 40. Que en el subtítulo, escribiré ese precio o no el precio. Me refiero a esa cantidad. Cuánto lo he pedido. Ese no soy yo, eso, ese dato de API ficticio. Y es una cantidad, así que hay que cambiarla a cuerda. Y luego en ese trailing, tendré un botón de icono y se eliminará el ícono. Eso es producto retrasado. Estoy construyendo todo esto para que sea más, cargue mucho más aplicación del mundo real y no solo una aplicación ficticia. Esperemos que todo esté funcionando bien. Trae tu emulador que código al carrito. Y mira, se ve perfecto. Tenemos ese título, tenemos la imagen, y también tenemos la cantidad. Entonces esto ahora se ve como una página de carrito del mundo real. Sólo necesitamos es un pedido básico Ahora botón aquí. Podemos darle en la propiedad de navegación inferior del andamio. Andamio, en lugar de usar botón de acción flotante, estaré usando, pero barra de navegación. Y aquí tendré un contenedor. Y entonces sólo le daré una altura de 60. Peso del infinito de doble punto, es decir todo el ancho. Colores verdes. Y en ese niño tendrá una región centro de texto, que sí, que tenemos en el orden justo ahora. Y luego solo dale un poco de estilo de texto. Color, colores, blanco, tamaño de fuente. Tamaño de fuente. Yo le daré 30. Guárdalo. Y ver esta página se ve mejor que cualquier otra aplicación que esté n aquí, esa aplicación básica voy a decir, porque tenemos nuestras categorías, cuando damos click en ella, tenemos los productos. Ver, tenemos estos productos. Si hacemos clic en algún producto, el producto Dale está ahí y este error es sólo porque la página no era desplazable. Para resolver esa sumadora, simplemente podemos ir a la pantalla Detalle del producto. Y aquí en el contenedor, sólo lo envolveré con ellos. Vista de desplazamiento infantil individual. Eso es todo. ver, el error se ha ido. Estas son las cosas básicas que hay que tener en cuenta mientras construimos una aplicación que podríamos olvidar. Y habrá pocos dólares en ella, pero se puede resolver muy fácilmente. Con esto, que GET solicita porción finalmente se completa. Hemos aprendido mucho. En la próxima sesión. Estaremos hablando de cómo manejar la solicitud de post. Entonces sólo sigue practicando. 6. Manejo de la solicitud de POST: Hola, bienvenidos a esta nueva sesión. Hasta ahora, solo estábamos discutiendo sobre esa solicitud GET. Pero es hora de que estudiemos también las otras peticiones. Porque obviamente ahora tenemos los datos. Pero mucho tiempo estaremos Impulsando datos también. Entonces es que estaremos enviando datos también hasta el momento que tengamos que usar la solicitud de post. Entonces ahora cómo manejar post request? Ya sabemos que se reduce enviar datos a un servidor. Lo usamos en escenarios como subir un archivo, enviar datos de un formulario. En una solicitud de publicación. parámetros adicionales como cabeceras y cuerpos También se envíanparámetros adicionales como cabeceras y cuerposjunto con la solicitud que contiene nuestros datos. Ahora, en nuestra API, tenemos este usuario de inicio de sesión, es decir usuario login y punto también, que es una solicitud de post. Y tenemos que enviar nombre de usuario y contraseña. Y como es una API ficticia, tenemos que enviar este nombre de usuario y contraseña solamente. Entonces sólo tendrá éxito y enviará una ficha enferma. Lo que simplemente significa, sí, las credenciales de usuario son reales, son, son válidas. Ahora vamos a las encuestas APA, y aquí estaremos creando una solicitud de post. Simplemente será un inicio de sesión de usuario futuro. Y luego aceptará un nombre de usuario y una contraseña de cadena. Entonces esta es una muy profesional o esta forma de escribir la usarás en la aplicación del mundo real también. Si hubiera querido, podría haber escrito directamente o hardcode el nombre de usuario contraseña aquí. Pero quiero que sea mucho más dinámico. Tendremos una URL de inicio de sesión, barras URI. Y esto definitivamente estará ahí en el punto final de la URL. Y después de eso, tendremos arte y luego iniciar sesión. ¿ De acuerdo? Ahora es el momento de lo nuevo, que es la respuesta. La respuesta será x al post p dot por primera vez, y tendrá nuestra URL de inicio de sesión. Ahora. Tenemos que enviar un nombre de usuario y contraseña en esa parte. Por lo que sólo voy a decir aquí, nombre de usuario, nombre de usuario, y luego contraseña, contraseña. Entonces así es como lo enviamos. Eso es todo. No fue un gran problema, supongo, porque también es una petición en la que simplemente simplemente no hacemos mucho. Tenemos nuestra respuesta y la cual aceptará una URL, cualquier cuerpo. Ahora aquí, simplemente escribiría vestido, bonos, puntos, punto, código de estado, y todo debería estar ahí. De acuerdo, lo siento, olvidé usar esperar. Este fue un error muy tonto. Entonces solo recuerda cuando estamos haciendo este tipo de petición, esperar es muy importante. Por lo que ahora usaremos el endpoint login user login de la APA. Devolverá un token si se ejecuta con éxito. Ahora tenemos la función, es hora de crear la pantalla, que es la pantalla de inicio de sesión. Es tan bueno que nuestra aplicación está siendo, se ve cada vez más profesional y cada vez más terminada. Ahora vamos a tener una pantalla de inicio de sesión. Entonces scanf teléfono, barra de aplicaciones. Entonces tengamos que llamarla tienda Florida. Puedes nombrar lo que quieras. Solo estoy usando un nombre al azar. Y entonces el color de fondo se coloreará comenzó en X. Y ahora en el cuerpo, tendré un contenedor. Tendrá algunos márgenes de Duan De, deshacerse de media query punto de contextos tamaño de punto, ancho de punto, y altura como cuando se debe tomar toda la altura. ¿ De acuerdo? Ahora en ese niño, vamos a tener una columna en esta matriz insulina hombres como centrado y cruz x es un elemento así como enviarlo porque quiero que esos campos estén en el centro de la pantalla. Por lo que tendremos dos campos de texto, es decir nombre de usuario, contraseña. Pero antes que nada, puedo, convertiré en la página principal. Será la página principal de nuestra aplicación. Ahora si refresco, podemos ver esta es la prueba de flor afilada. Y ahora entonces pantalla de inicio de sesión. Tendremos, estoy a controlador de edición de texto también. ¿ Cuándo nombraríamos controlador con edición de texto y para aprender. Y segundo controlador, cuando hablamos controlador. Ahora, como dije antes, tenemos que usar el nombre de usuario y contraseña que aquí se dan. Por lo que sólo lo copiaré. Y aquí en ese texto lo pegaré. Y otra vez, voy a copiar esa contraseña aquí. Y aquí fui pegar la contraseña también, porque debería estar predefinida. Ahora en los niños, lo tengamos a campos de texto. Ya sabemos cómo usar este TextField, cómo decorarlo. Estos no son recién hechos. Lo hemos hecho en las sesiones anteriores. Tendrá una decoración de entrada, etiquetado, uso y nombre. Y entonces tendré algo de frontera también. Después de eso, tendré una caja de tamaño. Escribo D. Y luego de nuevo, tendré este campo de texto, que será una contraseña. Ahora después del campo de texto, tendremos un botón simplemente en el contenedor. Le daré una altura de 50. Y deshacerse de media query dot height, que es todo el ancho de la pantalla. Discordia en su lugar ese niño, tendré un botón elevado. Y en ese niño, simplemente escribiré login. Y le daré un poco de estilismo. Uno dice 25, peso de la fuente con la pelota. De acuerdo. ver, tenemos nuestra pantalla de inicio de sesión y se ve bastante bonita. Si lo deseas, puedes tener alguna imagen de logo aquí, Depende de ti. Entonces simplemente en el botón elevado, escribiré, llamaré a que nuestra función de inicio de sesión aquí. Espera el inicio de sesión de usuario del servicio API. El nombre de usuario escribiré nombre controlador punto texto, y la contraseña escribiré contraseña controlador punto texto. Digamos nulla. Vamos a comprobar si está funcionando correctamente o no. Si hago clic en el botón Iniciar sesión, veamos esa consola, veamos que son 200 y tenemos nuestro token con nosotros. Entonces como tenemos nuestro token funcionando, lo que queremos es que si el usuario inicia sesión con éxito, entonces debería ser enviado a la pantalla de inicio, igual que cualquier otra aplicación del mundo real. Entonces este token, lo guardaremos aquí en esta variable. Y luego comprobaremos si token, es decir get token. Y el valor del token no es igual a nulo. Porque si se llama ninguno, es decir, estamos enviando algunos datos. Entonces simplemente escribiremos, si no es igual a nulo, es decir, es correcto. Utilizarás un snack bar para mostrar un comentario al usuario al que ha ingresado. Credenciales correctas. Simplemente escribimos el texto. Éxito. Y yarda Token ID es. Y simplemente imprimiré, imprimiré token al usuario así. Y voy a dar algunos antecedentes llevados a ello. Note el verde, es decir para dab snack, pero estoy dando este color de fondo. Ahora después de eso, lo que quiero es se muestre el snack bar durante dos segundos, y luego navegaremos por eso. Para esa duración de dos segundos, tengo que usar este futuro, la función delete para que lea do segundo, y luego navegue con nosotros. Después navega hasta la pantalla de inicio. Diseño de página de Darian. Y luego la pantalla de inicio. Y la página principal. Así. Vamosa la página principal. Y si ese token no está ahí, es decir, hay algún error. Entonces otra vez, mostraremos el snack bar. Pero aquí, en primer lugar, escribirás nombre de usuario o contraseña, incorrecta. Nombre de usuario, contraseña en correcto. Y el color debe ser rojo. En este caso. Vamos a comprobarlo si está funcionando correctamente o no. En primer archivo, escribiré un nombre de usuario incorrecto hoy, eliminaré esto para y luego dar clic en Iniciar sesión. Ver nombre de usuario o contraseña incorrecta. En nuestra consola de depuración también, tenemos un mensaje como este. Pero, ¿y si lo hago correcto? Y luego haga clic en Iniciar sesión. Tenemos este mensaje de éxito 2. Segundo, nos envían a la pantalla de inicio. Wow, se ve **** bonito. Y finalmente hemos entendido cómo usar esta solicitud de publicación también. Entonces como nosotros, estábamos enviando un dato en el cuerpo de la solicitud, era una solicitud de post. Por lo que hay que recordar cuándo usar las solicitudes GET, cuándo usar post request. Pero al menos tenemos esta app funcionando. Cuando nos refrescamos. Obviamente llegará a la pantalla de inicio, pero ahora tienes una aplicación básica para mostrar a tus amigos que has construido algo desde cero. Ahora no eres principiante, eres intermedio en la programación de Florida. Espero que hayan disfrutado hasta ahora. En la próxima sesión, estaremos hablando de las últimas dos solicitudes, que son PUT request y una delete request. Por lo que definitivamente disfrutaremos trabajando en esas características también. Entonces sólo trata de entender el código profundamente. Si tiene alguna duda más y todas, por favor. También puedes buscarlo en Google. Nuestros nos piden en la forma libre y todo. Pero definitivamente, es un concepto muy importante. Y mientras estás facturando APIs con NodeJS MongoDB, entonces tienes que usar estos HttpRequest muchas veces. Gracias. 7. SOLICITUD DE PONER y ELIMINAR: Hola, bienvenidos de nuevo. En los videos anteriores, hemos aprendido a usar GET y publicar solicitudes. En este video, estaremos aprendiendo sobre la solicitud PUT. La solicitud se utiliza básicamente para obtener los datos y el servidor. Por lo que en esta API de tienda falsa, actualizaremos nuestra tarjeta cuando hagamos clic en el botón Agregar al carrito. Es decir, cuando hacemos clic en este botón, algún código debería ejecutarse. Pero solo recuerda, es una API falsa por lo que nada se actualizará para ti. Simplemente podemos ver la respuesta que conforma esa consola. Sólo tienes que ir a la API de la tienda de freak, luego detalles sobre los perros. Aquí podrás obtener todas las APIs que soporta. Voy a venir y dar clic en esto, actualizar la tarjeta. Y ahora aquí puedes ver método se pone y tenemos que mandar saludos, ID de usuario, fecha, y los productos. Y los productos es si eso es lo de colección, es decir lista de mapa que contiene el ID del producto. Eso es todo. Entonces sí, puedes usar o parchear lo que quieras. Voy a estar usando para que eso se ejecute. Simplemente vayamos a nuestro archivo punto punto de servicios API. Y aquí estaré creando solicitud PUT. Entonces vamos a crear tarjeta de fecha de almuerzo. Será una función sinc. Y ahora acepta un ID de usuario y un ID de producto. ¿De acuerdo? Después de eso, tendremos esta URL. Como siempre. Voy a nombrarlo simplemente actualizar URL. Y la URL serán tarjetas de barra diagonal y una identificación de usuario. Así que así y ID de usuario. De acuerdo, solo voy a hacer esta d pequeña d. Después de eso, tengo que crear las funciones que es una respuesta y luego esperar. Y ahora estaremos usando STDP dot put. La URL será URL de actualización. Y entonces el cuerpo será un mapa. Y ahora tengo, tenemos que enviar las claves, estas ID de usuario. Será una cuerda. Solo recuerda aquí, cada clave tendrá un valor de cadena. A lo que quiero decir con eso es que simplemente te mostraré luego la fecha. Sólo escribiremos fecha, hora, punto, fecha y hora, punto, punto a cadena. Entonces tenemos que convertir estas cosas en cadena. Y luego los productos. Y será una lista, Ok? Listado de mapa. Y aquí simplemente escribiré aquí ID del producto, ID del producto y cantidad d t. Y luego hacer esta cadena de lista con el fin de que funcione. Ahora como siempre, solo imprima el código de estado de respuesta. Y luego imprimir sí une el cuerpo. Y después de eso, devolveré JSON decode response.body, pero no estaremos haciendo nada. Solo estoy haciendo la función para que entiendas cómo hacerlo cuando tienes una API en tiempo real. Ahora tenemos la función arriba. Pasemos al detalle del producto. Aquí. En el botón de acción flotante. Aquí simplemente lo haré un fregadero con un peso. Seré una cosa. Servicio Apa, tarjeta de actualización de puntos, luego ID de usuario. Sabré que enviaré uno ya que está codificado. Y luego este ID de producto es este ID. Yo también estoy enviando esta identificación. Después de eso, sólo podemos tener un susto, caer, caer, el mensajero de contextos, show de puntos, snack bar. Y luego snack bar. Simplemente puede escribir el producto agregado al carrito. Entonces estos son solo comentarios falsos. Pero el código de la solicitud HTTP es real. Vamos a sacarlo. Ahora, cuando vayas a esta pantalla de chamarra, cuando haga clic en este botón Agregar al carrito, ver producto añadido al carrito. En la salida se puede ver ID, ID de usuario, fecha, y un producto que es ID, ID del producto es tres. Nosotros lo enviamos tres. Es por eso que esto en última instancia significa que nuestra solicitud PUT está funcionando perfectamente. Imagínate que sería un dato real y sólo estamos actualizando esos datos en el servidor. Datos. Las solicitudes finales que estaremos discutiendo es la solicitud de eliminación. Por lo que la solicitud de eliminación se utiliza para eliminar estos datos en el servidor. Por lo que aquí borraremos nuestra tarjeta. Pretenderemos eliminar nuestro carrito cuando hagamos clic en el botón Eliminar en la pantalla del carrito, ese es este botón. Estebotón. Cuando hacemos clic en esto, solo deberíamos obtener la retroalimentación. Y como siempre, es una API falsa. Nosotros sólo, sólo veremos la respuesta en la consola. Así que crea una solicitud como solicitud retrasada, retrasada que simplemente una función de tarjeta retrasada. A continuación, cadena ID de usuario. Por lo que sólo conseguiremos el ID de usuario y eliminaremos su tarjeta. Sólo estoy tratando de hacerte entender. Sé que no tiene ningún sentido solo trabajar con API falsas. Pero confía en mí, esto te ayudará mucho. Ahora. Solo tenemos que conseguir esta misma URL. La única diferencia será que las peticiones HTTP a aquí solo escribiremos respuesta es igual a esperar http dot retrasado, retrasado URL de la tarjeta. Entonces esto es lo que debemos hacer. Y después de eso, simplemente escribimos respuesta, código de estado. Imprimir respuesta el cuerpo, y devolver json punto d código response.body. Ahora en la API de pedido fijo, puedes ver que esta es una página de carrito retrasado. Y aquí la URL es como este carrito y el ID de usuario, y solo hay que enviarles mi tercio de retrasado. Y luego en la salida, obtendremos los productos de fecha de ID de usuario. Eso es todo. Vamos a probarlo. Vayamos a la página de la pantalla de la tarjeta. Y luego en ese trailing, tenemos esto en elogios. Y aquí simplemente escribiremos un servicio de APIs de peso Dot, Delete Cut. Y luego solo enviaremos un ID de usuario de uno. Ya que hubiera sido una aplicación real, entonces podrías estar obteniendo su ID de usuario de Firebase o donde quieras. Y después de eso, solo tendremos un mensajero de andamios y simplemente mostraremos un snack bar. Simplemente muestra un snack bar. Tener el contenido como elemento eliminado correctamente. Eso es todo. Vamos a probarlo. ¿ Funciona o no? Ahora ve a la pantalla de la tarjeta. Y ahora justo, despejaré la consola. Y ahora cuando hago clic en este botón eliminar, ver elemento eliminado con éxito. Y tenemos este ID de artículo, ID de usuario, fecha, y estos otros productos, ver 61. Por lo que agregamos liderando la tarjeta correcta. Yo solo quería implementar una función delete y hacerte entender cómo está funcionando. Sé que aquí se está borrando todo el carrito, pero deberíamos quitar un producto en ese caso. Espero que lo hayan entendido. Tienes que actualizar esa tarjeta. Es decir, si elimino esto al servidor, simplemente retire ese producto de este elemento de la lista. Dependede ti. Pero al menos debes conocer el concepto y cómo escribirlo correctamente. Tan alto, espero que hayan disfrutado de este video. Hemos hablado de toda esa petición, ya sea GET, post, PUT, delete. Por lo que en el siguiente video, por fin estaremos discutiendo sobre la solicitud autenticada. Y ese será el video final de nuestro módulo HTTP. Y Q. 8. Realizar solicitudes autenticadas: Hola, bienvenidos de nuevo. En esta sesión estaremos hablando de cómo realizar solicitudes autenticadas. Así que hasta ahora, estábamos usando una API a la que podíamos acceder directamente y no requiere ninguna clave de autenticación. Pero este no es el caso la mayoría de las veces cuando estamos construyendo aplicación. Para obtener datos de muchos servicios web, es necesario proporcionar una clave de autorización o autenticación. Hay muchas formas de hacerlo, que discutiremos ahora. Ahora la primera forma es ese método de arte básico, autenticación básica significa que la aplicación cliente envía el nombre de usuario y contraseña al servidor en las solicitudes HTTP. Entonces simplemente cuando tengamos una contraseña de nombre de usuario, usaremos un arte básico. Y el disco también se puede hacer usando dos maneras. O tenemos que enviar esos detalles en el parámetro body o la otra forma es codificar esas credenciales con UTF-8 y luego pasarlo en el parámetro headers. Hagamos lo primero que es, cuando enviamos esos detalles en el parámetro body, simplemente saca tu archivo de servicios API. Y vamos a crear una función llamada autenticación de usuario. Y ahora aquí tenemos un nombre de usuario y una contraseña de cadena. Ahora no tenemos ninguna URL en la actualidad. Estoy justo ahora mostrándote el código del curso de pato que es cómo hacerlo. Porque definitivamente podrías tener una API como un servidor AWS más o un servidor NodeJS o lo que sea. Sólo estoy usando una cosa ficticia. Eso es api dot en alguna parte, I0, lo que sea. No tiene ningún sentido. Ahora bien, la cosa es, lo importante está aquí, es la respuesta. Ahora cuando escribimos, la respuesta es igual a esperar http dot. Cuando estamos enviando esos datos en el cuerpo, no podemos tener una solicitud get. Siempre tenemos que usar el post request. Entonces sólo podemos enviar parametro de fiesta. Ahora en el cuerpo, simplemente usaré este nombre de usuario, nombre de usuario y contraseña, como esta contraseña. Y después de eso, como siempre, se puede imprimir la respuesta. Sólo lo estoy diciendo de nuevo que aquí no estamos usando ninguna API. Solo quiero mostrarte el código de cómo autenticar STDP también, porque todo va a ser igual que lo hemos hecho antes. La única diferencia es que usamos este parámetro party. Así que imagina que este es tu servidor NodeJS y estamos enviando el nombre de usuario contraseña para la autenticación. Este es uno de los arte básico. Ese segundo es enviar los detalles usando el encabezado de autorización que podemos hacer. Simplemente así. De acuerdo, yo simplemente crearía otra función para que recuerdes usuario o tercer IgG y yo sólo escribiré sesión. Ahora, voy a quitar estas cosas del cuerpo. Y como no estamos usando body, podemos dar una solicitud GET también porque lo es, estamos enviando ese detalle a través de encabezados. Ahora tenemos la primera codificación, esos detalles como este arte básico. Entonces lo primero será esta palabra clave básica. Después de eso, tendremos codificación base 64. Y por dentro solo escribiré UDF código de ocho puntos. Y aquí escribirás tu nombre de usuario y contraseña. Simplemente. Nombre de usuario y contraseña. Este código, hay que recordar este básico es el prefijo que vamos a estar usando. Hay otro prefijo que estaremos usando en tan solo unos segundos. Pero así es como tenemos la clave de autorización que codifica. Y luego en esa solicitud GET, simplemente escriba encabezados. Después usa el mapa. Y la primera clave que usas es el tipo de contenido. Será aplicación Jason. Y el segundo es la autorización. Esto es de lo que estamos hablando. Y tendrá estas credenciales básicas. Eso es todo. Así es como se hace. Por lo que esta es la forma de enviar nombre de usuario y contraseña y además no sólo nombre de usuario y contraseña. Puede haber algunos sitios web o APS que le pidieron que enviara el código API aquí. Es decir, no siempre es necesario usar este tipo de nombre de usuario y contraseña. También depende de la API con la que estés trabajando. Ahora. Primero fue el arte básico. Ahora la segunda es la cerveza. La autenticación de cerveza simplemente significa que tenemos que autenticar usando un token en lugar de un nombre de usuario y contraseña. Ahora si tienes un token, esa API especifica que tienes que usar este prefijo cerveza. Así es como se hace. Nada mucho. Sobre Lee. En la autorización. Tienes esta cerveza para palabra clave y ese valor token. Eso es todo. Eso es el acceso a conservar pose. E imagina que aquí tenemos este token de acceso. Algún valor para transmitir. Se puede decir algún valor token, eso es todo. Entonces así es como usas ese mejor arte. Sólo lo estoy diciendo otra vez. Si tiene una API que tiene su propia clave de API, cambie la clave de autorización a esa clave específica. A veces algunas API dicen que en el encabezado la clave debe ser así, y luego el valor del token. Por lo que hay que leer la documentación de esa API con mucho cuidado para que no cometas ningún error. Pero sólo recuerda el código aquí. Esto se hace la mayoría de las veces cuando estamos haciendo cualquier tipo de autenticación. Sé que podrías estar preguntando, vale, pero no había una API real. Entonces solo te estoy mostrando algunos ejemplos. Uno, puedes ir y probar esta noticia api dot ORG. Te dará todas las novedades, últimas noticias y todo. Puedes obtener la clave API desde aquí y leer la documentación sobre cómo usar esa API para autenticarte. La segunda clave API que puedes obtener es esta OMB DAPI. Simplemente tienes que ir y dar clic en esta clave API y escribir tu correo electrónico aquí y enviar. De esta manera obtendrás tu clave API y solo podrás comenzar directamente a acceder a toda la base de datos de películas desde aquí. Las otras API o si un par aquí también puedes conseguir el EPI por ti mismo. Y luego estas son las API que proporcionan una API meteorológica actual de Cali PA. Ver así. Por lo que sólo tenemos que leer la documentación es correcta y probarla por su cuenta. En esta pandemia si lo desea, también puede obtener esa API de seguimiento de COVID donde obtendrá todos los datos relacionados con COVID-19 en todo el mundo. Con esto también, puedes construir tu propia aplicación. Por lo que espero que hayan disfrutado de esta sesión. Si lo deseas, solo puedes tocar aquí y probar por tu cuenta. Intenta cometer tantos errores para que al final, te conviertas en un mejor desarrollador. Gracias. 9. Por qué necesitamos modelos: Hola, bienvenidos de nuevo. En este módulo, estaremos hablando cuáles son nuestros modelos y por qué lo necesitamos exactamente. Modelo es sólo la clase utilizada para representar un determinado dato. Cualquier aplicación funcionará con varios tipos de datos, obviamente, usando modelos, es más fácil llamar a los datos y pasarlos por la aplicación. Entonces si recuerdas de los ejemplos anteriores, lo que hicimos es que solíamos pasar datos de una pantalla a otra directamente. Ese es el mapa en sí o el tramo de valor del mapa que le estábamos pasando. Pero en aplicación real, los datos que provengan del servidor tendrán una estructura compleja. Y no podríamos recordar esa clave de cada dato. Por eso utilizamos modelos. Al escuchar este ejemplo, se puede ver cómo creamos nuestros modelos. Supongamos que tenemos un dato de un usuario. Entonces creamos un usuario de clase y Dan paloma, los valores que existe, es decir, todos los datos que hay dentro de lo habitual. Tu debe escribirse así en forma de variables de instancia, como int final, id, nombre de cadena final. Entonces un constructor debe estar ahí para que podamos pasar el valor y se le asignará. Y esta función de fábrica no es más que una forma de transformar esos datos, datos cartográficos que vienen de fuera. Y luego devolver un objeto de esta clase. En palabras simples, desde Firebase o desde la API, obtenemos datos mapeados que pueden mapear datos. lo enviaremos aquí, es decir usuario de Jason. Y entonces devolverá un objeto. Eso es todo. Entonces estos son los términos que usamos generalmente mientras trabajamos con modelos. Eso es serialización y deserialización. La serialización es convertir a objeto inteligente a Jason. Y la deserialización es convertir objeto de datos JSON. desaceleración es lo que haremos la mayor parte del tiempo. Es decir, los datos que vienen en ese JSON o el formato de mapa se convertirán en un objeto oscuro. Sé que podría ser, estar sintiéndote abrumado por este concepto, pero es muy fácil de hacer una vez que lo agarres el cuelgue. Entonces aquí necesitamos crear una clase para lidiar con la desaceleración. Y se llama la clase modal. Entonces podrías estar pensando, vale, pero sin modelos también, pudimos realizar nuestra tarea. Es decir, esa aplicación funcionaba perfectamente. Entonces, ¿por qué necesitamos modelos exactamente para nuestra aplicación? Entonces mira este ejemplo. Aquí tenemos estos datos en el formato de mapa nombre, ID de usuario, correo electrónico. Las representaciones anteriores representan un dato de usuario muy básico. Podemos ver nos dimos cuenta de que la cadena JSON usando esa biblioteca de conversión de dardos como lo estábamos haciendo antes. Y luego eso lo convierte en un valor de cadena y devuelve valor de mapa. El valor entonces se puede acceder de la siguiente manera. Es decir, una vez que decodificamos la cadena JSON, después de eso, podemos simplemente imprimir hi y luego user y username, ese es el nombre es la clave de esto. Mapa de correo electrónico es otra clave y ID de usuario y otra clave. Entonces esto es lo que estábamos haciendo antes. Ahora, estudiemos cuál es el tema con este enfoque. Desafortunadamente, la decodificación JSON devuelve un mapa, significa que no conoces ese tipo de valores de datos hasta el tiempo de ejecución. Entonces aquí, el correo electrónico o este ID de usuario es un entero que no sabemos hasta y a menos que lo imprimimos aquí. Y si está mostrando algún error o lo que sea. Con este enfoque, pierdes mayoría de las características del lenguaje estáticamente tipado. Eso es seguridad de tipo, autocompletado y, lo más importante, excepciones en tiempo de compilación. Entonces runtime, ok, lo conseguimos. Pero compilar el tiempo mientras estamos escribiendo el código. Entonces también no se mostrará nos dan ningún error. Pero cuando estamos usando modelos, nos dirá que es un entero. No use cadena o cualquiera que sea la excepción, es. Esta no es una buena práctica. Por ejemplo, siempre que accedas a los campos de nombre o correo electrónico, también podrías introducir rápidamente un error tipográfico. Ya que supongamos aquí su nombre odia el correo electrónico. Podría ser E, dash mail o lo que sea. Aquí es ID de usuario, yo es capital. Podríamos escribirlo pequeño. Este tipo de errores son muy comunes cuando estamos programando. Entonces para combatir estos problemas entran en juego modelos y definimos estrictamente el tipo de los valores como este. Aquí lo definimos estrictamente. Es un entero, es una cadena. Entonces así es como estamos en un lado más seguro mientras construimos una aplicación. Y eventualmente hace que el código sea menos propenso a errores ya que la mayoría de las áreas se manejan durante el tiempo de compilación. Espero que hayas entendido por qué necesitamos modelos y quizás no hayas entendido cómo crearlos, pero no un tema. En la próxima sesión, estaremos creando nuestro primer modelo. Gracias. 10. Creación de nuestra primera clase de modelo: Hola. En esta sesión estaremos creando nuestra primera clase modelo. Entonces antes de eso, saca tu Código VS. Y yo emulé. Si presiono sobre cualquier producto que en la consola de depuración, puedes ver que todas las propiedades son datos que tiene. Y con respecto a esto, tenemos que crear nuestra clase modelo en la carpeta hoja. Vamos a crear una nueva carpeta llamada modelos. Y dentro de él, vamos a crear producto dot dot file. Para crear un modelo de vidrio. Primero, crea una clase llamada producto. Y ahora aquí entran Alda, todos estos datos como variables de instancia. Es decir, diré tinta final, ID, luego cuerda final, título, luego levántate. Aquí es un poco complicado, así que es doble. Y además no estoy usando ningún tipo de datos. Después de eso, podemos tener la descripción final de la cadena, luego la pantalla final, la cadena, lo siento, la categoría, y luego la imagen final de la cadena. Entonces sí, estos son los datos que tendrá un producto. Ahora después de eso, crea un constructor. Por lo mismo. Ahora tengo que escribir requerido. Entonces este id de punto requerido tes dot title required. Estos rayos, estos descripción, este punto obtienen grado, esta imagen. Por lo que ahora tenemos nuestra clase de modelo de producto. Tiene todos los datos's. Ahora tenemos que crear una función que aceptará a Jason como entrada, y luego devolverá este objeto de producto. Ahora para crearlo, simplemente tenemos que escribir producto de Jason. Entonces aceptará una cadena de valores dinámicos llamada Jason. Simplemente escribiré JSON. Entonces simplemente devolverá un producto. Ahora arriba en el producto, pronto tendremos id del producto. entonces le dicen Jason BJ descripción de Jason BJ, no es esta corrupción. Entonces obtén grado, grado Jason. Y entonces finalmente tenemos imagen. Así que mira, estas son todas las claves que ya se mencionan aún esta imagen de descripción de categoría de precio. Ahora cuando llamemos a esta función, enviaremos aquí estos datos y nos dará un objeto de producto. Eso es todo. Hemos creado con éxito nuestro primer modelo. Ahora. Para usarlo. Tenemos que ir a nuestro archivo punto de servicios API. Y es hora de que hagamos los cambios necesarios a la función. Sepa que hay muchas funciones y vamos a empezar con esto, consigue toda la función post aquí. En primer lugar, sólo le daré un tipo de retorno. De lista de producto. Eso es todo. Entonces este es el tipo de retorno. Ahora simplemente, crearé una lista vacía al principio de los productos, nombra todos los productos, y se vaciará. Ahora, voy a tener este Jason Dodd decodificar cuerpo en una variable aquí. Y voy a recorrer esta cosa de Jason que son todos los productos. Voy a recorrer y obtener un producto en particular aquí. Y simplemente, en los todos los productos, agregaré producto de Jason y enviaré aquí el JSON. Eso es todo. Y al final, voy a devolver esto todos los productos, es decir lista de productos. Entonces lo que he hecho aquí es ante todo, he creado un array vacío, que pasaremos al final. Y contendrá el objeto producto es será lista de objeto producto. Ahora estos Jason response.body estarán en el formato JSON, en la lista de formato JSON. Por lo que simplemente pasaremos por él y agregaremos todo el producto después de convertirlo a través de esto. Eso es producto que desde JSON dentro de esta lista de producto y devolvió este todos los productos. Después de esto, tenemos que hacer los cambios en la pantalla de inicio donde se está saliendo. Aquí, de donde estamos consiguiendo los productos. Por lo que esta instantánea asíncrona nos dará ahora un objeto, no un objeto, será lista de productos. Entonces, en primer lugar, lo que voy a hacer es simplemente crear una variable que contendrá los datos del índice. Ese es un solo producto aquí. Ya que está en bucle a través de toda la instantánea, nos dará un solo producto aquí. Y después, simplemente tenemos que escribir el título del punto del producto como este. Entonces es tan sencillo. Producto, imagen, producto, el precio punto toString. Y luego al final aquí solo escribiré producto, ID del producto. Así. Vamos a comprobar si está funcionando o no. He reiniciado la aplicación, pero antes de eso, solo se puede ver lo fácil que es ahora generar el valor. No tenemos que escribir la clave una y otra vez, solo podemos usar directamente este operador de punto y obtendremos los datos. Consiste. Ahora cuando haga clic en este botón de inicio de sesión, aquí, encontrarán todos los datos que ya estaban allí anteriormente, pero ahora estamos usando modelos aquí. Entonces esta es una explicación mínima muy desnuda de los modelos y por qué la usamos. Y confía en mí, cuando tengas muchos datos, los modelos te serán muy útiles. En el siguiente video, utilizaremos modelos para el detalle del producto y otras páginas también. Gracias. 11. Cambios necesarios en el frente: Hola. En el último video, hacemos esos cambios en la pantalla de inicio para que podamos obtener esos datos de la API y cambiar eso adyacente a nuestra clase de modelo, es decir, el producto modela menos. Por lo que ahora en esta sesión, realizaremos los cambios requeridos en la función de producto único también. Para devolver el modelo. Saca tu editor VSCode, y ve a las encuestas APA dot nine. Eso obtiene una sola función de producto. Simplemente lo haremos, no devolveremos un JSON. En cambio, voy a mantener estos datos en cada tienda, estos datos en una variable llamada orinal. Y entonces simplemente giraré producto dot de Jason y pasaré el cuerpo en él. Por lo que devolverá un solo objeto de producto. Y eso es lo que necesitamos. ¿De acuerdo? Ahora definitivamente si hemos hecho el cambio en un solo producto, tenemos que ir a la pantalla Detalle del Producto también. Hacer los cambios para usar un modelo. En lugar de esto de Jason. Tenemos a nuestro futuro constructor aquí. Estamos consiguiendo el modelo que es el modelo del producto. En esta instantánea. Aquí, simplemente escribiré estos tipos de datos es producto y luego lo almacenaré en Snapshot dot data. ¿ De acuerdo? Ahora tenemos este producto aquí y simplemente simplemente voy a quitar todo aquí. Y saqué imagen punto, luego producto punto precio que producto punto categoría de producto. Y por último, descripción del punto del producto. que puedas ver por ti mismo que es mucho limpio y más fácil cuando estamos usando modelos. Porque definitivamente mientras escribimos mapa, ese es Jason, podemos hacer algún error en esa clave que estos algún error ortográfico o lo que sea. Entonces es mejor si usamos modelos. Vamos a probarlo. ¿ Funciona correctamente o no? Cuando hago clic en Iniciar sesión, vamos a la pantalla de inicio. Y si doy click en este producto C, no hay error. Yo he hecho esos cambios, pero está funcionando a la perfección. Entonces podrías estar pensando, vale, nuestro trabajo aquí está hecho. Pero si hago clic en este botón de tarjeta, entonces verás este error porque olvidamos esa pantalla de la tarjeta índice también. Tenemos que hacer eso cambia ya que también está usando esta función. Esto consigue un solo producto aquí. Entonces de igual manera, aquí tenemos que hacer lo mismo. Utilizaré este tipo de datos de producto. Y luego sincroniza los datos de puntos de instantánea. ¿ De acuerdo? Y luego simplemente escribe aquí, product dot, product dot image. Entonces aquí esta cantidad, está bien porque estamos recibiendo esta cantidad de aquí. Entonces no tenemos que cambiar esto. Pero bueno, tengo nodo check, no hay otra cosa que cambiar. Volvamos a ver nuestra aplicación. Si está funcionando bien o no. Hago clic en el inicio de sesión. De acuerdo. Estamos en la pantalla de inicio. Ahora, cuando hago clic en la tarjeta, ven que no hay ningún error. Ahora porque aquí otra vez, estamos usando modelos en lugar de mapa o datos crudos de Jason. Eso es todo. Es así como debemos usar e implementar modelos. En el siguiente video, hablaremos algunas otras herramientas que nos ayudarán a hacer modelos fácilmente. Gracias. 12. Herramienta para generar modelos con facilidad: Hola. Entonces hasta ahora v, estamos creando nuestros modelos por nuestra cuenta. Entonces aquí, supongamos que en este producto, era fácil porque sólo había cuatro variables o datos. Por eso hicimos todo esto por nuestra cuenta. Pero muchas veces cuando estamos usando APIs, habrá datos que son muy complejos. Entonces, en ese escenario, podríamos necesitar algunas herramientas que nos ayuden a hacer nuestra construcción nuestros modelos fácilmente. En el mercado, son pocas las herramientas disponibles solo para facilitar mucho esta tarea. Hay dos enfoques. Uno está usando una herramienta en línea y el otro enfoque es usar dependencias. Por lo que aquí se puede ver que tenemos una dependencia llamada JSON serializable. Esta la puedes usar si quieres. Definitivamente mucha gente lo usa. Simplemente te mostraré Jason serializable. De acuerdo, y luego escucharé que empacé. A ver este es el paquete del que estoy hablando. Esto se llama Jason serializable. Si lo deseas, puedes usarlo definitivamente encontrarás una gran cantidad de recursos sobre cómo usarlo. Pero en esta sesión, estaré usando esta herramienta en línea llamada esta app quick type.io. ¿ Son esto también perfecto. Es que ambos son muy utilizados. Así que a ver si simplemente escribo revoloteó nuestro dardo Jason para modelar. Entonces aquí conseguirás los dos. De acuerdo, supongo. Sí, Esto es analizar al instante json en cualquier idioma. ¿ De acuerdo? Tenemos esto aquí. Y para hacerlo prácticamente, estaré usando un APA diferente. Antes estábamos usando esta API de tienda falsa. Pero ahora no quiero usar esta API porque ya sabemos que los datos son los que está proporcionando. Por lo que estaré usando este frutal vice.com. Es un servicio web que proporciona datos para todo tipo de frutas. Es una API gratuita. Por eso lo estoy usando. Y aquí puedes ver todos los puntos finales. Permite. Para que podamos obtener esos datos de una fruta en particular como esta. Y también podemos obtener todos los frutos de este punto final, es decir APS slash fruits slash on. Este punto final nos da una lista de datos de este mapa que contiene todos los frutos. Por lo que sin perder más tiempo, me gustaría mostrarte cómo usar esta app quick.io para crear modelos. Entonces aquí simplemente escribiré apple y tecleo enter. Nos dará la estructura de datos así. Aquí se puede decir que no es tanto complejo, pero esta cadena KEY, el valor es cadena, cadena, esto es un entero, pero estas nutriciones es de nuevo un valor de mapa que contiene claves de cadena y dobles como valores. Entonces simplemente copiaré esta estructura e iré a esa app dot quick type y la pegaré aquí. Pero antes de pegar y solo recuerda tu idioma, tienes que usar Dart. Y entonces simplemente voy a quitar todo aquí, pegarlo en el nombre. Tienes que escribir este nombre de fruta. Tú y no tienes que hacerlo, puedes agregar lo que yo quiera. Pero como es un dato de una fruta en particular, estoy leyendo. ¿ De acuerdo? Ahora en la salida ves tenemos este modelo aquí. Esto, muchas cosas se han hecho de forma automática o bien lo que tenía, teníamos que escribir todo por nuestra cuenta y esto no es factible todo el tiempo. Entonces simplemente, lo que haré ahora es copiar todo, copiar todos esos datos, e ir a nuestro Código VS. Y dentro de la carpeta models, simplemente crearé un modelo llamado Fruit dot dot y luego pegaré todo aquí. Entonces podrías estar diciendo esta época, esto es sólo porque esos datos aquí no son nulos, así. Y como se requiere, por lo que tenemos que simplemente escribir la palabra clave requerida para que este error se haya ido. Eso es todo. Entonces la nutrición también, tenemos que pegarla y Alda agregó ahora está arreglada. Entonces si miras en la clase de hoy, lo único que se requiere es esto. Estos son los datos o las variables. Entonces a través de este constructor, estamos aceptando esto de Jason. Ya lo hicimos en el producto. ¿ Por qué? Cuando estábamos usando fija o API, se está creando automáticamente. Esta cosa Json es simplemente crear un adyacente estos datos en el formato JSON y es a partir de Jason crea los datos en este formato de modelo. Y ahora podrías estar pensando por qué hay dos clases diferentes, clase de nutrición también. Sólo porque el valor de estas nutriciones vuelve a ser un mapa. Entonces lo que tengamos en mapa volverá a convertirse en una clase. Por lo que esta nutrición tiene carbohidratos, proteínas , grasas, calorías, Hoover, estos valores en ella. Entonces de nuevo, esta es una clase y confía en mí, esto nos va a ayudar mucho porque ahora mismo todos esos datos tienen su tipo de datos intacto. Entonces no haremos ningún error con dosis. Y si quieres ver qué respuesta obtendremos así, simplemente puedes ir y diapers.com así y simplemente escribir, esta es la respuesta con la que nos estaremos ocupando. Podrías estar abrumado ahora mismo, pero confía en mí, esto es justo, este dato es solo un dato. Y después de eso, se está repitiendo con diferentes, diferentes frutas. Eso es todo. Por lo que hemos aprendido a crear nuestro modelo JSON. Sin corazón, sin escribir todo por nuestra cuenta. Yo suelo usar este tipo de herramientas en línea porque, hace el trabajo muy rápido y no tenemos que estresarnos por los tipos de datos y si es algo, si hay algo mal en él. Por lo que en el siguiente video, vamos a estar creando nuestras funciones en los servicios API vio archivo dardo con el fin de obtener todos los datos de frutas y mostrarlo en nuestra aplicación. Gracias. 13. Consume un nuevo api de descanso: Bienvenido de nuevo. Por lo que ahora tenemos listo nuestro modelo. Es hora. Creamos una función en nuestros servicios API dot dot file. Para que como antes, podamos buscar los frutos, todos los datos de frutos. Así que simplemente baja y da un comentario sobre obtener frutas. Entonces simplemente, tendremos una función futura llamada get on fruits y definitivamente ganará como función sinc. Entonces tendremos la variable URL de la fruta. Y aquí analizaremos nuestro URI, que es URL, que está aquí. Perdón, sí. Cuál será esta API slash, frutas slash esta. Simplemente ve y pégalo. Estoy usando este refresco API gratis. No tengo que crear las claves API de cuenta estos datos nulos. Pero tú, ya te he enseñado a hacer solicitud autenticada también. Por lo que si quieres, puedes probar con otras API también. Por lo que aquí tenemos esta respuesta. Simplemente que es el p dot get. Después en la URL de la fruta. Así. Entonces lo que haré es simplemente crear una variable de partido. Y Jen, aquí escribiré código json dot d para que pueda convertir a una cadena de este cuerpo de respuesta a un mapa. Eso es todo. Esto es sólo el trabajo de esta decodificación json dot. Convierte una cadena a un formato JSON. Eso es todo. Ahora aquí. Antes lo que hicimos fue aquí creamos una lista de variables de producto y luego la asignamos a una matriz vacía. Y luego simplemente, usamos este bucle for y agregamos todos y cada uno de los datos. Ese es este solo dato en esto. Pero ahora les mostraré una forma diferente de hacer lo mismo. Simplemente, solo hace el trabajo en una línea, ese frente de estudio. Obtendré esta lista de fruta. Voy a ponerle nombre a todas las frutas. Entonces simplemente escribiré mapa de puntos de fiesta. Voy a conseguir una fruta en particular aquí. Y luego, y lo enviaré a través los dos días desde la función JSON. ¿De acuerdo? Y simplemente al fin crearé, haré todo a una lista. Lo que está haciendo es mapear a través del cuerpo, esa es esta respuesta. Y luego convirtiendo todas y cada una de las vías que sean adyacentes al objeto frutal y luego devolviéndolo. Esto significa que lo está devolviendo. Y por último, todo después de esto se hace, se hace este mapeo. Todo se convertirá a una lista. Eso es todo. Y simplemente voy a devolver todos los frutos aquí. Y esta función, le daré esta lista genérica de tipo de datos de frutas para que sepamos lo que está devolviendo. ¿De acuerdo? Por lo que esta porción está hecha. Nuestra función está lista. Ahora toca crear una nueva pantalla para que podamos mostrar estos valores al applet en la aplicación. Simplemente lo nombraré todas las frutas punto, punto. Ahora, como de costumbre, importa material. Entonces cada clase de lista estatal de la voy a nombrar frutas pantalla. Ahora devolverá un andamio en app. Vamos a darle una elevación de 0. Color de fondo de colores punto arreglar x. y esta vez, le daré todos los frutos. Y luego centro que dibujé en ese cuerpo. Tengamos un futuro constructor. Espero que ahora estés muy cómodo con este tipo de código porque lo estamos haciendo desde mucho tiempo. Estoy usando servicios API, luego obtengo todas las frutas. Simple como eso. Ese constructor tendrá un contexto y una instantánea. Será en una sola instantánea. Entonces lo comprobaré. Si instantánea DOD tiene la paloma. De no ser así, devolveré un indicador circular de progreso. Y si tiene datos, volveré en list view dot builder. Ahora, el recuento de artículos será punto de instantánea, punto, punto, longitud. Y constructor de artículos se habrá ido, textos e índice. Así que ahora aquí voy a crear una variable, un tipo float, y almacenar este valor de instantánea en una instantánea de datos de punto y luego el índice. Por lo que será ese producto singular. Eso es todo. Y luego lo devolveré, devolveré una tarjeta. Y dentro de ella, tendré una propiedad infantil y luego el presupuesto estilo lista. Entonces en ese título, tendré un centro y luego el niño, que nos mostrará cuál nos mostrará el nombre de la fruta, es decir nombre food dot. Tan sencillo como eso. Sólo por los objetos ahora somos capaces de generar o utilizar nuestras variables con tanta facilidad. Y luego en el subtítulo, me gustaría mostrar todos los valores nutricionales, es decir, proteínas, carbohidratos y grasas. Esos simplemente, voy a tener un widget de texto. Escribirá cartón altas tasas. Y ahora concatenaré este valor frutal. Y luego un punto, luego nutriciones, luego punto y ver. Ahora simplemente puedo usarlo carburos desde aquí solo porque se guarda en otro objeto. O bien tuve que usar estos carbohidratos clave y definitivamente voy a hacer el error aquí. Simplemente lo copiaré y lo pegaré dos veces. El segundo será la proteína. Simplemente será proteína. Y la tercera serán las grasas. Y simplemente será gordo. Eso es todo. Ahora en la fila voy a dar una alineación del eje principal de la alineación principal existe espacio de puntos de manera uniforme, sólo para que se vea bien. Ahora, para probarlo, tenemos que ir a nuestro archivo principal dot dot. Y en lugar de este archivo de inicio de sesión, tenemos que escribir esta pantalla de frutas. Eso es todo. Vamos a comprobarlo. He reiniciado mi aplicación. De acuerdo, la pantalla se ve bien y ver todos esos datos están aquí. Manzana, albaricoques, plátano, y esta grasa proteica de carbohidratos. Si lo deseas, puedes emitir este pedido familiar Janus, sea cual sea este número de calorías. Si lo desea, puede emitir esos también. No estoy usando la propiedad principal así como la propiedad trailing del estilo de lista. Sólo quiero mostrarte cómo se hace. Cómo podemos crear modelos tan fácilmente usando herramientas en línea. Y además, hemos consumido con éxito una nueva API que es esta afrutada sabia. Y si lo deseas, puedes crear diferentes pantallas también con el fin mostrar un solo detalle de fruta si quieres, depende de ti. Pero espero que hayan disfrutado de nuestros videos hasta aquí. Este modelo fue muy importante porque en la aplicación del mundo real, crearás modelos para todo lo que sean usuarios, contextos, o cualquier dato o información que tengas en tu crearás modelos para eso. Entonces eso es todo para esta sesión. Nos vemos en el siguiente módulo. Gracias.