Espera un momento 🎁 ...
¿Te gustaría aprender a programar, gratis?
Sólo debes registrarte 😉.
Crea una cuenta y continúa aprendiendo 🚀
Regístrate o inicia sesión para continuar aprendiendo:
Frontend
Aprendiz
Visión general
Empecemos a organizar de forma general el proyecto que vamos a desarrollar.
Introducción
En el módulo anterior hemos visto qué es TypeScript y qué ventajas nos aporta respecto a JavaScript. Antes de empezar a tocar temas de Vue 3, es importante definir qué proyecto vamos a desarrollar y comenzar a planificarlo.
Importancia de la Planificación
En el desarrollo de software, es fundamental planificar un proyecto antes de escribir código. Si comenzamos a programar sin una idea clara de qué vamos a construir, perderemos mucho tiempo y probablemente el resultado no sea el esperado.
Muchos proyectos incluyen un README. Este archivo generalmente contiene instrucciones sobre cómo usar el proyecto y qué esperar de él. Nosotros modificaremos el contenido predeterminado de este archivo y lo usaremos como un borrador para definir nuestro proyecto.
Definiendo el Proyecto
Nuestro repositorio se llama vue-3-ecommerce, por lo que desarrollaremos un e-commerce.
¿Qué es un e-commerce?
Un e-commerce es una tienda en línea.
Para planificar su desarrollo, lo primero que debemos hacer es identificar las entidades.
Estas entidades se convertirán en clases o tipos de datos dentro de nuestro código.
Identificación de Entidades
Producto (Product)
Un producto tiene los siguientes atributos:
- name: Nombre del producto.
- description: Descripción del producto.
- price: Precio del producto.
- image: Imagen del producto.
Categoría (Category)
Los productos estarán clasificados en categorías. Una categoría tendrá:
- name: Nombre de la categoría.
- description: Descripción de la categoría.
Carrito de Compras (Cart)
Los usuarios podrán agregar productos a un carrito de compras. Este carrito tendrá:
- products: Una lista de productos agregados por el usuario.
- Cada producto en el carrito estará representado con:
- productId: Identificador del producto.
- quantity: Cantidad seleccionada.
Ejemplo de estructura en JSON:
[
{ "productId": 1, "quantity": 3 },
{ "productId": 7, "quantity": 5 }
]
El uso de productId es importante porque los nombres de los productos pueden cambiar, pero sus identificadores seguirán siendo los mismos.
Componentes en Vue 3
Los componentes representan estructuras visuales dentro del proyecto.
Product Card
Un product card es una tarjeta que representará visualmente un producto en la interfaz del usuario.
Shopping Cart
Este componente mostrará los productos agregados al carrito y permitirá gestionar la compra.
Conclusión
Esto es solo un borrador inicial.
A medida que avancemos en el desarrollo, podemos ajustar las entidades y componentes según sea necesario.
Esta lección no cuenta con recursos adicionales.
Si crees que hace falta algo, o necesitas ayuda, puedes publicar una pregunta en el foro.
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.
¿Tienes dudas?
Publicar preguntaRegístrate
Inicia sesión para llevar un control de tu progreso.
Capítulos
Estás viendo un capítulo de la serie Aprende Vue 3, Vite, VueRouter, Vuetify, Pinia y TypeScript