1 00:00:02,060 --> 00:00:03,200 Entonces, planifiquemos 2 00:00:03,200 --> 00:00:08,920 la aplicación que crearemos y crearemos una aplicación de compras básica, una tienda 3 00:00:08,930 --> 00:00:17,120 en línea básica en una aplicación que podría decir. Por lo tanto, en esta aplicación aquí, definitivamente necesitaremos un montón de 4 00:00:17,120 --> 00:00:17,680 productos 5 00:00:17,710 --> 00:00:24,590 que se pueden enumerar, por lo que tendremos una pantalla de descripción general del producto donde veremos estas tarjetas con nuestros 6 00:00:24,680 --> 00:00:30,770 productos, con una imagen, con el título y el precio tal vez, algo así y también un carrito 7 00:00:30,770 --> 00:00:37,930 o un botón para agregar al carrito y un botón de detalles, así que básicamente un botón que nos permite ir 8 00:00:37,970 --> 00:00:42,440 a una página de detalles y un botón que nos permite agregar esto 9 00:00:42,440 --> 00:00:43,730 a un carrito. 10 00:00:43,760 --> 00:00:47,060 Porque si tocas este botón de carrito aquí, entonces 11 00:00:47,060 --> 00:00:53,900 si seleccionas este botón de carrito, entonces esto se agrega a un carrito y puedes llegar a ese carrito con 12 00:00:53,900 --> 00:00:56,360 un botón de acción aquí en la 13 00:00:56,390 --> 00:01:01,300 barra de acción, así que en el encabezado superior, allí I quiero tener un 14 00:01:01,570 --> 00:01:08,060 ícono de carrito de este tipo, probablemente un poco mejor que el que dibujé aquí, pero este ícono aquí 15 00:01:08,060 --> 00:01:14,480 al final nos permite ir a una página separada a partir de entonces, una pantalla separada de esta 16 00:01:14,480 --> 00:01:23,240 aplicación donde, por supuesto, también podemos volver Aquí veremos como una suma total en dólares a lo que se suman los artículos totales de nuestro carrito 17 00:01:23,510 --> 00:01:26,910 y luego una lista de nuestros artículos como un libro 18 00:01:26,930 --> 00:01:28,360 y cuánto cuesta y 19 00:01:28,520 --> 00:01:29,510 algo así. 20 00:01:29,540 --> 00:01:33,140 Entonces, básicamente, vemos nuestro carrito aquí, vemos una suma de eso 21 00:01:33,140 --> 00:01:35,580 y luego vemos los artículos individuales y, 22 00:01:35,630 --> 00:01:42,470 por supuesto, también quiero tener un botón que me permita ordenar lo que está en el carrito y en realidad ese botón 23 00:01:42,530 --> 00:01:46,070 no debe estar debajo de este , así que aquí tendremos 24 00:01:46,070 --> 00:01:47,530 un botón de pedido. 25 00:01:47,600 --> 00:01:48,890 En realidad, esto debería estar 26 00:01:48,890 --> 00:01:53,450 aquí, así que aquí quiero tener una fila donde tengamos la suma total y luego al lado, el botón de pedido. 27 00:01:54,110 --> 00:01:55,310 Así que ese 28 00:01:55,310 --> 00:01:57,250 es básicamente el objetivo, pero puedes 29 00:01:57,250 --> 00:02:02,930 colocar esto donde quieras, al final, queremos tener un botón que nos permita ordenar lo que tengamos 30 00:02:02,930 --> 00:02:03,470 en 31 00:02:03,470 --> 00:02:12,150 el carrito y en cada artículo del carrito aquí, también quiero tener un icono de basura aquí, lo que me permite eliminar un artículo del carrito. 32 00:02:12,200 --> 00:02:22,300 Entonces, cuando esto hace un pedido, este ícono aquí básicamente eliminará un artículo del 33 00:02:22,300 --> 00:02:23,410 carrito. 34 00:02:23,410 --> 00:02:24,220 Así que 35 00:02:24,220 --> 00:02:29,760 esa es la idea, por supuesto, si agrega el mismo artículo varias veces al carrito, no debe agregar 36 00:02:29,830 --> 00:02:36,520 varias filas para eso, sino que aquí, también quiero mostrar una cantidad del artículo que simplemente aumenta si lo agregamos más a 37 00:02:36,520 --> 00:02:41,920 menudo al carrito y que disminuye si lo eliminamos hasta que se eliminen todos los artículos, en cuyo 38 00:02:41,920 --> 00:02:44,080 caso la fila completa se eliminaría aquí. 39 00:02:44,080 --> 00:02:46,000 Así es como funcionará esta página 40 00:02:46,000 --> 00:02:54,070 de carrito, esta es la página de resumen aquí, por supuesto, también podemos tocar el botón de detalles o tal vez el artículo en general, por lo 41 00:02:54,070 --> 00:02:56,950 que en cualquier lugar de la imagen o algo 42 00:02:56,980 --> 00:03:00,250 así y luego deberíamos ser llevados a un Página de detalles. 43 00:03:00,250 --> 00:03:04,810 Entonces, esa es otra pantalla en esta aplicación donde, por supuesto, también podemos retroceder. 44 00:03:04,810 --> 00:03:08,190 Esa es la página de detalles del 45 00:03:08,260 --> 00:03:12,490 icono donde deberíamos ver la imagen, probablemente deberíamos ver el 46 00:03:12,490 --> 00:03:23,710 título aquí en el encabezado, por lo que ese sería el título del elemento. Luego, debajo de eso, vemos como el precio, vemos la 47 00:03:24,190 --> 00:03:32,300 descripción y probablemente también queremos tener un botón para comprar aquí, donde también podemos agregar 48 00:03:32,310 --> 00:03:37,460 artículos al carrito aquí. Así que ese es el flujo de nuestros productos que 49 00:03:37,470 --> 00:03:38,630 tenemos aquí. Ahora, 50 00:03:38,640 --> 00:03:44,060 lo importante en esta aplicación será que no solo podemos ver los productos y comprarlos 51 00:03:44,060 --> 00:03:50,010 y agregarlos al carrito, etc., sino que, por supuesto, también podemos ver nuestros pedidos y, lo más importante, 52 00:03:50,130 --> 00:03:52,110 que también podemos agregar nuevos productos. 53 00:03:52,110 --> 00:03:59,100 Por lo tanto, aquí, necesitamos un cajón y este cajón nos presentará un par de opciones. Ahora, la primera opción, por supuesto, es que 54 00:03:59,120 --> 00:04:05,940 vamos a nuestra tienda, por así decirlo, esta es la parte aquí donde estamos cuando 55 00:04:05,940 --> 00:04:07,770 comienza la aplicación. 56 00:04:07,830 --> 00:04:10,110 La segunda opción debe ser 57 00:04:10,110 --> 00:04:17,340 nuestros pedidos y la tercera opción debe ser como una opción de administración de productos, donde podemos administrar nuestros propios 58 00:04:17,370 --> 00:04:19,920 productos que desea ofrecer a otros usuarios. 59 00:04:19,950 --> 00:04:22,810 Entonces, como dije, comprar es básicamente lo que ya vemos. 60 00:04:22,830 --> 00:04:31,500 Ahora, si tocamos pedidos, bueno, entonces quiero que me lleven a una pantalla donde, por supuesto, también podemos abrir ese cajón 61 00:04:31,500 --> 00:04:34,540 porque eso nos permitirá regresar, pero en 62 00:04:34,590 --> 00:04:40,530 esa pantalla deberíamos ver los pedidos donde básicamente tenemos artículos donde vemos como la suma 63 00:04:40,960 --> 00:04:49,800 de ese orden, la fecha y luego también un botón donde podemos tocar donde vemos más detalles y si tocamos este botón, 64 00:04:49,800 --> 00:04:56,850 entonces tenemos esta área opcional que se abre o cierra y allí, yo básicamente quiero ver los 65 00:04:56,860 --> 00:05:02,040 artículos del pedido, que es básicamente lo que teníamos en el carrito. 66 00:05:02,040 --> 00:05:09,810 Así que teníamos dos libros aquí con un precio de 19, por ejemplo, bueno, esto aparecería aquí en el área de 67 00:05:09,810 --> 00:05:11,590 detalles cuando abramos esto. 68 00:05:11,610 --> 00:05:12,490 Así que esa es 69 00:05:12,540 --> 00:05:13,230 la idea 70 00:05:13,230 --> 00:05:18,030 aquí en el pedido, podemos expandir un pedido para que no solo veamos la suma y la fecha, sino que también 71 00:05:18,030 --> 00:05:19,200 veamos los artículos del carrito 72 00:05:19,230 --> 00:05:23,720 que colocamos allí básicamente, así que básicamente lo que teníamos aquí en el carrito, eso aparece en las órdenes. 73 00:05:23,960 --> 00:05:25,380 Así que esa es 74 00:05:25,380 --> 00:05:33,480 la pantalla de pedidos, también tenemos productos administrados y quizás dibujemos esto aquí. Los productos administrados son otra área de esta aplicación donde también tenemos 75 00:05:33,480 --> 00:05:40,620 ese botón de menú para abrir ese cajón nuevamente para que podamos acceder a las otras partes de la aplicación, pero 76 00:05:40,620 --> 00:05:47,130 aquí en la pantalla de productos administrados donde tenemos nuestros propios productos, por lo que los productos de usuario 77 00:05:47,280 --> 00:05:52,980 y en esta aplicación, todavía no agregaremos autenticación, pero agregaremos esto más tarde, pero aquí tenemos nuestros 78 00:05:53,340 --> 00:05:55,380 propios productos. Aquí la 79 00:05:55,380 --> 00:06:01,290 idea es nuevamente que básicamente vemos una lista de productos que está bastante cerca de lo que vemos aquí 80 00:06:01,350 --> 00:06:08,790 en la pantalla de la tienda, de modo que tenemos nuestras tarjetas aquí con una imagen, con el título y el precio tal vez, 81 00:06:08,790 --> 00:06:11,980 así que Puede reutilizar esta lista aquí probablemente, pero, por 82 00:06:12,510 --> 00:06:18,720 supuesto, las opciones que tenemos en cada producto son diferentes. En lugar de agregarlo a un 83 00:06:18,720 --> 00:06:22,400 carrito y ver los detalles, podemos eliminarlo, ese 84 00:06:22,440 --> 00:06:28,710 es un botón y también podemos editarlo. Por supuesto, solo podemos editar nuestros propios productos, pero nuevamente, no 85 00:06:28,710 --> 00:06:35,400 tendremos una asignación de usuario real aquí, podemos hacer esto con alguna identificación de usuario ficticia que adjuntamos a cada producto, pero 86 00:06:35,730 --> 00:06:37,470 eso es todo por ahora. 87 00:06:37,530 --> 00:06:39,330 Entonces tenemos el botón editar y 88 00:06:39,330 --> 00:06:41,920 eliminar, ahora además aquí en el encabezado, por lo 89 00:06:41,940 --> 00:06:47,640 que necesitamos más espacio aquí, en el encabezado también tendremos un botón de acción que nos permite agregar un 90 00:06:47,640 --> 00:06:48,390 nuevo producto. 91 00:06:48,390 --> 00:06:53,310 Entonces, básicamente, eso debería ser un poco más amplio aquí, dibujé esto demasiado estrecho. 92 00:06:53,340 --> 00:07:00,030 Entonces tenemos este botón de acción aquí y este botón de acción aquí, este botón más, esto debería llevarnos 93 00:07:00,030 --> 00:07:02,480 a una nueva página donde podemos 94 00:07:02,490 --> 00:07:12,630 agregar un nuevo producto, así que esto nos llevará a la página de producto agregado aquí donde, por supuesto, podemos ir De vez en cuando, podemos agregar un nuevo producto 95 00:07:12,720 --> 00:07:19,720 y eso nos permite agregar un título aquí con una entrada de texto y esa entrada de texto también puede estar 96 00:07:19,720 --> 00:07:23,650 debajo de la etiqueta del título, puede construir esto como lo desee. 97 00:07:23,670 --> 00:07:25,770 Deberíamos poder agregar el 98 00:07:25,890 --> 00:07:32,390 precio, deberíamos poder agregar la descripción aquí, podría ser una entrada multilínea aquí, 99 00:07:32,400 --> 00:07:36,530 por supuesto, también debemos poder agregar una imageUrl. 100 00:07:36,570 --> 00:07:41,460 Entonces eso es lo que podemos agregar aquí y luego necesitamos un botón aquí en la barra de acción, un botón de 101 00:07:41,460 --> 00:07:46,440 marca de verificación o algo así que nos permita confirmar esto. No nos preocuparemos demasiado por todo el manejo de las 102 00:07:46,440 --> 00:07:47,120 entradas del 103 00:07:47,130 --> 00:07:52,230 usuario aquí en esta etapa porque tendré un módulo separado donde profundizaré en todos los detalles allí, cómo puede hacer 104 00:07:52,530 --> 00:07:57,330 esto de una manera elegante, cómo puede agregar validación, así que aquí en esta aplicación mantendremos esto muy básico, 105 00:07:57,330 --> 00:08:00,870 no comprobaremos si el usuario ingresó algo correcto o algo así, lo haremos 106 00:08:00,870 --> 00:08:02,350 más adelante en el curso. 107 00:08:02,430 --> 00:08:07,470 Aquí acabamos de recopilar esa información básica cuando presionamos este botón, presionamos este botón de marca 108 00:08:07,830 --> 00:08:13,560 de verificación, regresamos a esta página y, por supuesto, usamos Redux en nuestro sistema de administración de estado para 109 00:08:13,560 --> 00:08:20,100 agregar un nuevo producto a la lista de productos que luego también aparece aquí en nuestra tienda y que aparece aquí en 110 00:08:20,100 --> 00:08:23,280 nuestra lista de productos, por supuesto, que podemos administrar. 111 00:08:23,340 --> 00:08:24,420 Entonces eso es lo que tenemos aquí. 112 00:08:24,480 --> 00:08:32,100 Ahora, si tocamos editar aquí, si seleccionamos este botón de edición aquí, también nos llevará a la misma página de edición 113 00:08:32,100 --> 00:08:40,410 de productos, pero por supuesto ahora tenemos algunos valores prepoblados aquí, prepoblados con el producto que cargamos y hay ciertos campos que no 114 00:08:40,770 --> 00:08:43,110 podemos editar, por ejemplo, el precio 115 00:08:43,110 --> 00:08:49,080 no debería ser editable porque si el precio fuera editable, entonces si ya lo tuviéramos en 116 00:08:49,080 --> 00:08:51,230 el carrito, sería un problema, 117 00:08:51,480 --> 00:08:54,390 por lo que no permitiremos editar el precio 118 00:08:54,390 --> 00:08:57,840 aquí, nosotros permitirá editar el título, la descripción y el 119 00:08:57,930 --> 00:09:00,210 imageUrl, así que eso es posible. 120 00:09:00,210 --> 00:09:01,210 Esa es la 121 00:09:01,260 --> 00:09:04,180 única diferencia, tenemos campos prepoblados y el precio no es editable. 122 00:09:04,260 --> 00:09:09,840 Si presionamos la marca de verificación en el modo de edición y podemos averiguar si estamos editando o no 123 00:09:09,840 --> 00:09:14,220 por el hecho de si recibimos una ID de producto como parámetro, por ejemplo, 124 00:09:14,220 --> 00:09:20,100 una vez que hayamos terminado de editar, podemos presionar ese icono de marca de verificación y luego también nos devuelven 125 00:09:20,100 --> 00:09:23,660 y simplemente guardamos lo que hemos editado aquí en nuestro producto. 126 00:09:23,670 --> 00:09:25,780 Esta es la aplicación aquí. 127 00:09:25,890 --> 00:09:30,700 Como mencioné, esto también será una base para los módulos posteriores, allí 128 00:09:30,700 --> 00:09:38,100 también agregaremos solicitud HTTP, autenticación, haremos toda la validación de formularios aquí de una manera más elegante y así sucesivamente, 129 00:09:38,100 --> 00:09:40,020 pero este módulo aquí 130 00:09:40,050 --> 00:09:46,110 ahora es Una gran práctica sobre cómo crear una aplicación de este tipo, cómo trabajar con 131 00:09:46,200 --> 00:09:51,240 componentes, diseñarlos, cómo agregar navegación porque obviamente tenemos mucha navegación en esta aplicación 132 00:09:51,240 --> 00:09:54,940 y cómo administrar nuestro estado en esta aplicación de compras. 133 00:09:55,020 --> 00:09:59,850 Como mencioné en la última conferencia, podría omitir este módulo, pero definitivamente debería sumergirse en el 134 00:09:59,850 --> 00:10:05,100 código terminado para poder seguir en los siguientes módulos, pero mi recomendación, por supuesto, es que a) intente todo 135 00:10:05,100 --> 00:10:10,840 esto por su cuenta y, por supuesto, su resultado no será el mismo que obtengo, por lo que definitivamente también debería 136 00:10:10,860 --> 00:10:16,230 ver mis videos a partir de entonces para ver cómo hice esto y para que tenga la misma base 137 00:10:16,230 --> 00:10:18,360 de código para seguir, pero esta será 138 00:10:18,360 --> 00:10:23,280 una gran práctica incluso si su resultado es el primero porque no hay un enfoque incorrecto o 139 00:10:23,280 --> 00:10:28,890 correcto necesariamente ob) su otra opción, por supuesto, es que no lo intente por su cuenta y simplemente lo siga, 140 00:10:28,890 --> 00:10:29,870 también es una 141 00:10:29,970 --> 00:10:34,830 opción válida, pero creo que lo hará obtenga un poco más de ventaja si lo intenta por 142 00:10:34,830 --> 00:10:35,490 su cuenta 143 00:10:35,490 --> 00:10:40,080 primero, pero al final, haga lo que quiera. En la próxima conferencia, profundizaremos en esto y comenzaremos a construir 144 00:10:40,080 --> 00:10:40,500 esta aplicación.