1 00:00:02,200 --> 00:00:08,380 Ahora que tenemos el flujo básico hacia abajo, que podemos navegar entre nuestros productos, agregarlos al carrito y luego 2 00:00:08,410 --> 00:00:13,900 también usar el carrito para hacer un pedido y también ver ese pedido y, por supuesto, también 3 00:00:13,930 --> 00:00:15,040 editar el carrito 4 00:00:15,070 --> 00:00:20,530 si quisiéramos, ahora que todo está hecho, es hora de avanzar hacia la última parte de esta 5 00:00:20,530 --> 00:00:24,430 aplicación, que es, por supuesto, la parte donde puede agregar nuevos productos. 6 00:00:24,430 --> 00:00:29,960 Ahora, esa es también la parte que refinaremos más adelante porque más tarde, por supuesto, profundizaremos en el manejo de la entrada del 7 00:00:29,980 --> 00:00:36,770 usuario e incluso almacenaremos esos datos en un servidor, pero ya podemos comenzar aquí. Para comenzar, la pantalla del producto del usuario y 8 00:00:36,770 --> 00:00:37,910 la pantalla 9 00:00:37,910 --> 00:00:42,560 de edición del producto se volverán importantes ahora porque estas son las 10 00:00:42,560 --> 00:00:47,450 pantallas donde vemos todos nuestros productos y donde también podemos editar los productos. 11 00:00:47,480 --> 00:00:49,720 Entonces, comencemos con la pantalla de 12 00:00:49,750 --> 00:00:53,420 productos del usuario y conviértalo en un componente React importando 13 00:00:53,600 --> 00:01:01,970 React from React y, como era de esperar, importando cosas de React Native. Lo que quiero importar aquí es la lista plana nuevamente porque 14 00:01:01,970 --> 00:01:06,250 al final mostraré una lista de productos en la pantalla de 15 00:01:06,320 --> 00:01:08,260 productos de este usuario. 16 00:01:08,630 --> 00:01:15,650 Por lo tanto, aquí tenemos el componente de pantalla de productos de usuario que recibe accesorios 17 00:01:15,650 --> 00:01:22,960 y donde luego necesito devolver algunos jsx y, al final del archivo, exportaré este componente por defecto. 18 00:01:23,090 --> 00:01:29,670 Esa es mi configuración predeterminada de componentes que utilicé una y otra vez. Ahora aquí, quiero generar mis 19 00:01:30,000 --> 00:01:38,070 componentes, mis productos con una lista plana y reutilizaré ese componente de producto 20 00:01:38,070 --> 00:01:40,560 que construimos anteriormente. 21 00:01:40,560 --> 00:01:44,130 Entonces, de vuelta en los productos de usuario, podemos importar 22 00:01:47,030 --> 00:01:51,020 el artículo del producto desde la carpeta de componentes, así que 23 00:01:51,020 --> 00:01:57,090 vamos allí y allá, para comprar y luego ordenar, no ordenar sino el artículo del producto y 24 00:01:57,230 --> 00:02:03,320 aquí, por supuesto, también ingresamos algunos datos. Ahora los datos que quiero transmitir aquí deben ser 25 00:02:03,320 --> 00:02:06,140 los productos que pertenecían a mi usuario conectado. 26 00:02:06,140 --> 00:02:11,450 No tenemos un usuario conectado en este momento, pero si recuerda el reductor de productos, estamos fingiendo que 27 00:02:11,450 --> 00:02:17,300 tenemos porque allí tenemos esa matriz de productos de usuario que contiene todos los productos que en este caso aquí 28 00:02:17,300 --> 00:02:25,130 tienen una identificación de usuario, una identificación de propietario de U1 y supongo por el momento tener algunos datos ficticios de que estos son nuestros datos 29 00:02:25,130 --> 00:02:31,930 de usuario actualmente conectados, luego, por supuesto, esto será dinámico. Entonces, el producto de usuario es lo que 30 00:02:31,930 --> 00:02:37,930 necesitamos, de vuelta en la pantalla de productos de usuario, por lo tanto, necesitamos 31 00:02:37,930 --> 00:02:44,540 obtener esos datos de Redux con la ayuda del selector de uso de React Redux, así 32 00:02:44,560 --> 00:02:55,680 y aquí obtenemos nuestros productos de usuario llamando al selector de uso donde pasamos en esa función, obtiene el estado, luego llega a la parte de productos 33 00:02:55,680 --> 00:03:02,520 de los productos de nuestra tienda porque ese es el identificador que uso allí y luego, 34 00:03:02,520 --> 00:03:10,590 como acabo de decir, acceda a este campo de productos de usuario aquí, así que en la pantalla de 35 00:03:10,590 --> 00:03:18,990 productos de usuario, aquí acceso. productos de usuario. Los productos de usuario ahora son la matriz 36 00:03:18,990 --> 00:03:26,870 que alimentamos en los datos, como siempre aquí agregaré un extractor de claves que me da la identificación porque mi producto tal como está almacenado 37 00:03:26,880 --> 00:03:31,860 aquí en productos de usuario utiliza, por supuesto, mi modelo de producto al final y, por 38 00:03:31,860 --> 00:03:38,400 lo tanto, tiene una identificación que es un identificador único que puedo usar, así que lo usaré y, por supuesto, como 39 00:03:38,400 --> 00:03:46,830 siempre, también necesitamos agregar un elemento de representación, obviamente ya conoces ese patrón. Renderizar artículo obtiene los datos del artículo aquí y quiero devolver un nuevo 40 00:03:46,830 --> 00:03:53,130 artículo de producto para cada entrada aquí y el artículo del producto, si lo miramos, toma un par de datos. 41 00:03:53,670 --> 00:04:05,790 Aquí se necesita un accesorio de detalle a la vista, se necesita un accesorio de título, un accesorio de precio, un accesorio de imagen y luego también un accesorio de 42 00:04:05,790 --> 00:04:07,300 agregar al carrito. 43 00:04:07,400 --> 00:04:12,840 Ahora es posible que ya vea que no todos estos accesorios realmente se ajustan a nuestro propósito si lo 44 00:04:12,840 --> 00:04:18,840 usamos en la pantalla del producto del usuario porque esta no será una pantalla en la que podamos comprar productos, esta 45 00:04:18,840 --> 00:04:26,310 no es una pantalla donde quiero poder agregar productos a un carrito. Quiero mostrarlos como hago aquí con la imagen, el precio, etc., pero 46 00:04:26,310 --> 00:04:34,920 no me importa mucho si podemos hacer clic en ellos o en estos botones. Así que comenzaré a agregar el artículo 47 00:04:34,920 --> 00:04:39,310 del producto de esta manera, pero tendremos que ajustarlo. 48 00:04:39,510 --> 00:04:46,170 Entonces, lo que necesitamos es título, precio, imagen y ver detalles y agregar carrito. 49 00:04:46,170 --> 00:04:53,430 Entonces, necesitamos la imagen aquí y, por supuesto, es itemData. articulo. imageUrl porque no 50 00:04:53,430 --> 00:04:59,400 debes olvidar ese itemData. El elemento en los puntos finales en un 51 00:04:59,400 --> 00:05:08,540 producto como se define aquí en el modelo, por lo tanto, tendremos esta propiedad imageUrl y luego aquí también necesitamos el título al que se puede acceder 52 00:05:08,570 --> 00:05:17,840 a través de itemData. articulo. título. Necesitamos el precio al que se puede acceder con itemData. articulo. precio y si echamos un 53 00:05:17,840 --> 00:05:23,570 vistazo al componente del artículo del producto, eso cumple con todo lo que necesitamos aquí, pero 54 00:05:23,570 --> 00:05:30,380 ahora necesitamos ver los detalles y agregarlos al carrito y los agregaré temporalmente, pero tendremos que encontrar una solución diferente 55 00:05:30,380 --> 00:05:31,100 aquí. 56 00:05:31,100 --> 00:05:34,290 Por lo tanto, ver detalles es una función 57 00:05:34,290 --> 00:05:41,760 vacía en este momento y al agregar al carrito, también está vacía y lo implementaremos de manera diferente más adelante. 58 00:05:42,270 --> 00:05:47,370 Por el momento, sin embargo, estoy enviando un artículo de producto aquí y, por lo tanto, 59 00:05:47,370 --> 00:05:54,600 ahora podemos navegar a la pantalla de productos del usuario. Para llegar allí, es hora de volver al navegador de la tienda y, al 60 00:05:54,600 --> 00:06:00,420 final, quiero agregarlos a mi navegador de cajones, pero como una pila separada, al igual que los productos y pedidos son una pila 61 00:06:00,420 --> 00:06:03,120 separada, esta también debería ser una pila separada . 62 00:06:03,120 --> 00:06:11,160 Podemos simplemente copiar la pila del navegador de pedidos aquí, replicar esto e importar la pantalla del producto del usuario aquí, de modo 63 00:06:11,160 --> 00:06:11,550 que 64 00:06:11,580 --> 00:06:19,440 la pantalla de los productos del usuario desde la carpeta de pantallas, allí desde la carpeta del usuario y luego la pantalla 65 00:06:19,440 --> 00:06:27,180 del producto del usuario y mapear esto en la pila recién copiada. No nombraré el navegador de pedidos porque ya tengo 66 00:06:28,000 --> 00:06:35,140 ese nombre aquí, pero lo nombraré, digamos, quizás el navegador de administración y aquí, tengo mi identificador de productos 67 00:06:35,570 --> 00:06:43,900 de usuario que apunta a la pantalla de productos de usuario. Ahora aquí como un ícono, en el cajón 68 00:06:43,920 --> 00:06:51,670 quiero tener un md create e ios create icon y, aparte de eso, esto debería estar bien. 69 00:06:51,680 --> 00:06:55,460 Ahora solo necesitamos agregar este navegador a nuestro navegador de cajones. 70 00:06:55,460 --> 00:07:02,830 Allí agregaré la clave de administrador y apuntaré al navegador de administración, por lo que 71 00:07:02,830 --> 00:07:08,980 ahora deberíamos poder llegar a eso. Si volvemos a la aplicación, tenemos la entrada de 72 00:07:08,980 --> 00:07:14,080 administrador y si hago clic en ella, tenemos un problema con respecto a mis productos 73 00:07:14,090 --> 00:07:19,880 de usuario, el estado indefinido no es un objeto, echemos un vistazo rápido a la pantalla del producto 74 00:07:19,910 --> 00:07:25,880 de usuario, sí, eso debería sean productos porque nuestro segmento se denomina productos aquí en el reductor combinado. 75 00:07:25,880 --> 00:07:27,990 Así que aquí también debería 76 00:07:28,080 --> 00:07:34,590 haber productos, un pequeño error tipográfico de mi parte. Ahora esto se ve mejor y ahora, puede parecer que nada ha 77 00:07:34,590 --> 00:07:40,830 cambiado, pero en realidad, puedes ver que mis elementos de navegación se han ido porque ahora estoy en una nueva pantalla pero tengo mi 78 00:07:40,830 --> 00:07:42,910 lista anterior aquí pero con menos productos. 79 00:07:43,020 --> 00:07:47,190 Si compara Android donde estoy en la pantalla de inicio, tenemos más productos allí, ahora 80 00:07:47,190 --> 00:07:50,340 solo tengo aquellos donde U1 es la identificación del propietario. 81 00:07:50,730 --> 00:07:51,550 Eso es 82 00:07:51,960 --> 00:07:54,850 bueno, pero por supuesto no me gustan estos botones aquí y 83 00:07:54,930 --> 00:07:58,960 también quiero tener un elemento de menú aquí y un título de encabezado, por supuesto. 84 00:07:58,980 --> 00:08:03,930 Hay algunas cosas que debemos arreglar, por supuesto, estos botones son lo más importante o 85 00:08:03,930 --> 00:08:08,270 lo más llamativo que está mal. Aún así, comenzaré con el 86 00:08:08,270 --> 00:08:11,420 encabezado, en la pantalla de productos de usuario 87 00:08:11,450 --> 00:08:19,910 aquí, podemos agregar las opciones de navegación, pantalla de productos de usuario. opciones de navegación y allí, establezca un título de encabezado 88 00:08:19,910 --> 00:08:30,130 de sus productos, por ejemplo, y también necesitamos el botón de menú, por lo que también podemos ir a la pantalla de descripción general del 89 00:08:30,160 --> 00:08:35,930 producto y desde allí, copiar esta parte izquierda del encabezado aquí, volver a la pantalla 90 00:08:36,020 --> 00:08:39,620 del producto del usuario y agrega esto aquí. 91 00:08:39,620 --> 00:08:44,900 Ahora, sin embargo, necesitamos esa forma de función de las opciones de navegación donde al final devolvemos 92 00:08:44,900 --> 00:08:50,210 un objeto con todas las opciones allí, así que es algo que debemos cambiar de esta manera y 93 00:08:50,660 --> 00:08:55,880 también debemos asegurarnos de importar el elemento de los botones de encabezado y botón de encabezado 94 00:08:55,880 --> 00:09:00,300 Entonces, de vuelta en la pantalla de resumen del producto, aquí tengo estas 95 00:09:00,440 --> 00:09:03,310 importaciones aquí, cópielas de la pantalla de resumen del 96 00:09:03,440 --> 00:09:05,990 producto, vaya a la pantalla del producto 97 00:09:06,010 --> 00:09:09,050 del usuario y agréguelas allí, por ejemplo, para que 98 00:09:09,050 --> 00:09:10,940 importe todo lo que necesita. 99 00:09:10,940 --> 00:09:16,400 También necesitamos importar una API de plataforma porque también la estamos usando al configurar los botones de encabezado. 100 00:09:18,210 --> 00:09:25,800 Ahora al menos, cuando vamos al área de administración, tenemos nuestro título aquí, tenemos el cajón, el botón de menú 101 00:09:25,800 --> 00:09:26,860 nuevamente, pero 102 00:09:26,940 --> 00:09:29,250 ¿qué pasa con estos botones aquí? 103 00:09:29,310 --> 00:09:33,840 Tendremos que cambiar la apariencia de nuestro producto.