Visión general

En el módulo anterior hemos visto que es TypeScript y qué ventajas nos aporta respecto a JavaScript. Antes de empezar a tocar temas de Vue3, es importante definir qué proyecto vamos a estar desarrollando y que empecemos a planificarlo. En el desarrollo de software es importante planificar un proyecto antes de ponernos a escribir código. Porque si escribimos código sin tener una idea clara de qué vamos a construir, vamos a estar dando bastantes ides y vueltas y muy probablemente el resultado no sea lo que esperábamos. Muchos proyectos incluyen un readme. Este readme, que significa léeme, generalmente contiene instrucciones de cómo usar el proyecto y qué esperar de este proyecto. Entonces nosotros vamos a modificar todo esto que ha venido escrito por defecto. Y vamos a aprovechar este archivo para escribir por acá a modo de borrador qué es lo que va a contener nuestro proyecto. Nuestro repositorio se llama vue-3-ecommerce. Entonces como su nombre lo indica vamos a estar desarrollando un e-commerce. ¿Qué es un e-commerce? Es una tienda online. ¿Qué tenemos que hacer para planificar el desarrollo de un proyecto? Lo primero es identificar las entidades. ¿Qué entidades van a tener nuestro proyecto? Las entidades luego van a pasar a ser las clases o los tipos de datos que vamos a definir en nuestro código. En el caso de una tienda las entidades que vamos a tener son por ejemplo un producto. Si queremos podamos escribir esto en inglés. Es importante que aprendas y practiques tu inglés lo más que puedas ya que te será de mucha ayuda profesionalmente hablando. ¿Qué contiene un producto? Un producto tiene un nombre, un producto tiene una descripción, un producto tiene un precio. El primer paso es entonces definir nuestras entidades. Aquí tenemos un producto. entidad product que tiene estos atributos. ¿Qué otra entidad podemos considerar para una tienda online? podemos considerar también una categoría porque los productos van a estar clasificados en categorías. Entonces una categoría de manera muy similar va a tener un name, va a tener un nombre, va a tener una descripción, pero no va a tener un precio. ¿Qué más podemos considerar? Bueno, un producto puede tener una imagen. De esta manera nuestros usuarios van a poder ver una representación gráfica de cada producto. ¿Qué otra entidad podemos considerar? Lo que estamos escribiendo aquí no es definitivo, a medida que vayamos desarrollando podemos ir actualizando nuestras entidades, pero es importante siempre dedicar un tiempo al inicio para pensar qué es lo que vamos a desarrollar. Además de las entidades, por ejemplo, lo siguiente que nos interesa son los componentes. Los componentes representan estructuras visuales dentro de nuestro proyecto. Siguiendo esa idea nosotros podemos tener un product cart, es decir vamos a tener una tarjeta visual que va a representar a nuestro producto y dentro de este componente nosotros vamos a pintar esta información. Las entidades son solo datos, si nosotros queremos representar gráficamente esto a nuestros usuarios vamos a necesitar definir componentes y un componente puede ser un product cart o sea una tarjeta que va a representar a un producto. Como es una tienda nosotros queremos que nuestros usuarios puedan tener un carrito de compras por lo tanto vamos a agregar aquí una entidad más que se va a llamar cart, algunos lo llaman shopping cart, un carrito de compras pero con llamarlo cart es suficiente en nuestro caso, este carrito de compras va a contener en su interior los productos escogidos por el usuario, si entonces este objeto cart básicamente va a contener una lista de productos, aquí había escrito yo los atributos con la primera letra en mayúsculas sin embargo nivel de código siempre se recomienda escribir los nombres de los atributos en minúsculas mientras que los nombres de las entidades y componentes estarán con la letra en mayúsculas. Un carrito va a tener productos. Vamos a poner aquí un ejemplo. Los productos se van a representar a través de un arreglo, donde vamos a tener el id del producto que se está comprando y la cantidad. Por ejemplo aquí vamos a poner un id. Es importante asignar un identificador a cada producto. ¿Por qué es importante? Porque en el futuro el nombre de un producto puede cambiar, sin embargo su id seguirá siendo el mismo. Si seguimos esta idea, cuando vayamos a definir productos para un carrito de compras, vamos a tener un arreglo de objetos. Donde cada detalle va a indicar el product ID que se está comprando. Por ejemplo quiero comprar tres sillas. Si el ID de la silla es 1, yo puedo indicar de esta manera que quiero comprar 3 sillas. Y quiero comprar 5 monitores. Si el ID de un monitor es 7, puedo indicar de esta manera que quiero comprar 5 monitores. Ok. Entonces esto que acabo de escribir se conoce como JSON. JSON es un formato para representar datos de tal forma que luego puedan ser interpretados por JavaScript fácilmente.

Crea una cuenta y continúa aprendiendo 🚀

Visión general