Entonces, planifiquemos
la aplicación que crearemos y crearemos una aplicación de compras básica, una tienda
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
productos
que se pueden enumerar, por lo que tendremos una pantalla de descripción general del producto donde veremos estas tarjetas con nuestros
productos, con una imagen, con el título y el precio tal vez, algo así y también un carrito
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
a una página de detalles y un botón que nos permite agregar esto
a un carrito.
Porque si tocas este botón de carrito aquí, entonces
si seleccionas este botón de carrito, entonces esto se agrega a un carrito y puedes llegar a ese carrito con
un botón de acción aquí en la
barra de acción, así que en el encabezado superior, allí I quiero tener un
ícono de carrito de este tipo, probablemente un poco mejor que el que dibujé aquí, pero este ícono aquí
al final nos permite ir a una página separada a partir de entonces, una pantalla separada de esta
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
y luego una lista de nuestros artículos como un libro
y cuánto cuesta y
algo así.
Entonces, básicamente, vemos nuestro carrito aquí, vemos una suma de eso
y luego vemos los artículos individuales y,
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
no debe estar debajo de este , así que aquí tendremos
un botón de pedido.
En realidad, esto debería estar
aquí, así que aquí quiero tener una fila donde tengamos la suma total y luego al lado, el botón de pedido.
Así que ese
es básicamente el objetivo, pero puedes
colocar esto donde quieras, al final, queremos tener un botón que nos permita ordenar lo que tengamos
en
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.
Entonces, cuando esto hace un pedido, este ícono aquí básicamente eliminará un artículo del
carrito.
Así que
esa es la idea, por supuesto, si agrega el mismo artículo varias veces al carrito, no debe agregar
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
menudo al carrito y que disminuye si lo eliminamos hasta que se eliminen todos los artículos, en cuyo
caso la fila completa se eliminaría aquí.
Así es como funcionará esta página
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
que en cualquier lugar de la imagen o algo
así y luego deberíamos ser llevados a un Página de detalles.
Entonces, esa es otra pantalla en esta aplicación donde, por supuesto, también podemos retroceder.
Esa es la página de detalles del
icono donde deberíamos ver la imagen, probablemente deberíamos ver el
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
descripción y probablemente también queremos tener un botón para comprar aquí, donde también podemos agregar
artículos al carrito aquí. Así que ese es el flujo de nuestros productos que
tenemos aquí. Ahora,
lo importante en esta aplicación será que no solo podemos ver los productos y comprarlos
y agregarlos al carrito, etc., sino que, por supuesto, también podemos ver nuestros pedidos y, lo más importante,
que también podemos agregar nuevos productos.
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
vamos a nuestra tienda, por así decirlo, esta es la parte aquí donde estamos cuando
comienza la aplicación.
La segunda opción debe ser
nuestros pedidos y la tercera opción debe ser como una opción de administración de productos, donde podemos administrar nuestros propios
productos que desea ofrecer a otros usuarios.
Entonces, como dije, comprar es básicamente lo que ya vemos.
Ahora, si tocamos pedidos, bueno, entonces quiero que me lleven a una pantalla donde, por supuesto, también podemos abrir ese cajón
porque eso nos permitirá regresar, pero en
esa pantalla deberíamos ver los pedidos donde básicamente tenemos artículos donde vemos como la suma
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,
entonces tenemos esta área opcional que se abre o cierra y allí, yo básicamente quiero ver los
artículos del pedido, que es básicamente lo que teníamos en el carrito.
Así que teníamos dos libros aquí con un precio de 19, por ejemplo, bueno, esto aparecería aquí en el área de
detalles cuando abramos esto.
Así que esa es
la idea
aquí en el pedido, podemos expandir un pedido para que no solo veamos la suma y la fecha, sino que también
veamos los artículos del carrito
que colocamos allí básicamente, así que básicamente lo que teníamos aquí en el carrito, eso aparece en las órdenes.
Así que esa es
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
ese botón de menú para abrir ese cajón nuevamente para que podamos acceder a las otras partes de la aplicación, pero
aquí en la pantalla de productos administrados donde tenemos nuestros propios productos, por lo que los productos de usuario
y en esta aplicación, todavía no agregaremos autenticación, pero agregaremos esto más tarde, pero aquí tenemos nuestros
propios productos. Aquí la
idea es nuevamente que básicamente vemos una lista de productos que está bastante cerca de lo que vemos aquí
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,
así que Puede reutilizar esta lista aquí probablemente, pero, por
supuesto, las opciones que tenemos en cada producto son diferentes. En lugar de agregarlo a un
carrito y ver los detalles, podemos eliminarlo, ese
es un botón y también podemos editarlo. Por supuesto, solo podemos editar nuestros propios productos, pero nuevamente, no
tendremos una asignación de usuario real aquí, podemos hacer esto con alguna identificación de usuario ficticia que adjuntamos a cada producto, pero
eso es todo por ahora.
Entonces tenemos el botón editar y
eliminar, ahora además aquí en el encabezado, por lo
que necesitamos más espacio aquí, en el encabezado también tendremos un botón de acción que nos permite agregar un
nuevo producto.
Entonces, básicamente, eso debería ser un poco más amplio aquí, dibujé esto demasiado estrecho.
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
a una nueva página donde podemos
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
y eso nos permite agregar un título aquí con una entrada de texto y esa entrada de texto también puede estar
debajo de la etiqueta del título, puede construir esto como lo desee.
Deberíamos poder agregar el
precio, deberíamos poder agregar la descripción aquí, podría ser una entrada multilínea aquí,
por supuesto, también debemos poder agregar una imageUrl.
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
marca de verificación o algo así que nos permita confirmar esto. No nos preocuparemos demasiado por todo el manejo de las
entradas del
usuario aquí en esta etapa porque tendré un módulo separado donde profundizaré en todos los detalles allí, cómo puede hacer
esto de una manera elegante, cómo puede agregar validación, así que aquí en esta aplicación mantendremos esto muy básico,
no comprobaremos si el usuario ingresó algo correcto o algo así, lo haremos
más adelante en el curso.
Aquí acabamos de recopilar esa información básica cuando presionamos este botón, presionamos este botón de marca
de verificación, regresamos a esta página y, por supuesto, usamos Redux en nuestro sistema de administración de estado para
agregar un nuevo producto a la lista de productos que luego también aparece aquí en nuestra tienda y que aparece aquí en
nuestra lista de productos, por supuesto, que podemos administrar.
Entonces eso es lo que tenemos aquí.
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
de productos, pero por supuesto ahora tenemos algunos valores prepoblados aquí, prepoblados con el producto que cargamos y hay ciertos campos que no
podemos editar, por ejemplo, el precio
no debería ser editable porque si el precio fuera editable, entonces si ya lo tuviéramos en
el carrito, sería un problema,
por lo que no permitiremos editar el precio
aquí, nosotros permitirá editar el título, la descripción y el
imageUrl, así que eso es posible.
Esa es la
única diferencia, tenemos campos prepoblados y el precio no es editable.
Si presionamos la marca de verificación en el modo de edición y podemos averiguar si estamos editando o no
por el hecho de si recibimos una ID de producto como parámetro, por ejemplo,
una vez que hayamos terminado de editar, podemos presionar ese icono de marca de verificación y luego también nos devuelven
y simplemente guardamos lo que hemos editado aquí en nuestro producto.
Esta es la aplicación aquí.
Como mencioné, esto también será una base para los módulos posteriores, allí
también agregaremos solicitud HTTP, autenticación, haremos toda la validación de formularios aquí de una manera más elegante y así sucesivamente,
pero este módulo aquí
ahora es Una gran práctica sobre cómo crear una aplicación de este tipo, cómo trabajar con
componentes, diseñarlos, cómo agregar navegación porque obviamente tenemos mucha navegación en esta aplicación
y cómo administrar nuestro estado en esta aplicación de compras.
Como mencioné en la última conferencia, podría omitir este módulo, pero definitivamente debería sumergirse en el
código terminado para poder seguir en los siguientes módulos, pero mi recomendación, por supuesto, es que a) intente todo
esto por su cuenta y, por supuesto, su resultado no será el mismo que obtengo, por lo que definitivamente también debería
ver mis videos a partir de entonces para ver cómo hice esto y para que tenga la misma base
de código para seguir, pero esta será
una gran práctica incluso si su resultado es el primero porque no hay un enfoque incorrecto o
correcto necesariamente ob) su otra opción, por supuesto, es que no lo intente por su cuenta y simplemente lo siga,
también es una
opción válida, pero creo que lo hará obtenga un poco más de ventaja si lo intenta por
su cuenta
primero, pero al final, haga lo que quiera. En la próxima conferencia, profundizaremos en esto y comenzaremos a construir
esta aplicación.