Frontend de tienda online | JavaScript, HTML, CSS

Cuaderno de bitácora 1

¡Bienvenidos todos a B1T L4B, donde me podréis acompañar durante el desarrollo y evolución de mi carrera como informático y programador!

Este post es algo especial, ya que será oficialmente la primera presentación de un proyecto personal.

Y empezamos con un humilde proyecto que me ha servido para afianzar algunos de mis conocimientos en frontend. Espero que os entretenga y/o os pueda servir para aprender alguna cosa.

Práctica Frontend: simulación de una tienda de libros online con solo JavaScript, HTML y CSS

Introducción

Book Seller es una pequeña página web que simula una tienda de libros (todos los productos están inventados) donde puedes hacer pequeñas búsquedas y filtrar los resultados (por el nombre del autor, o por si la portada es dura o blanda, etc...).

El proyecto está subido a mi github: github.com/ricard-ferrero/bookseller-webshop

¿Por qué no usar frameworks ni librerías?

Reinventar la rueda es un gran error, por ello desaconsejo que los programadores eviten el uso de herramientas como React, Angular, Bootstrap, etc... Trabajar "a pelo" puede convertirse en una mala práctica cuando se trata de un proyecto laboral ya que puede llevar más tiempo del necesario terminarlo, así como generar ciertos bugs que ya estarían resueltos con los frameworks más usados.

Sin embargo, en mi opinión, aprender a construir un proyecto un poco complejo desde cero es una manera estupenda de hacer trabajar a nuestro cerebro y abrirle camino hacia una mayor comprensión de la programación.

Por lo tanto recomiendo invertir de vez en cuando un poco de tiempo en crear proyectos no muy ambiciosos pero que superen los típicos códigos de prueba de los tutoriales, y tomárselo como un reto personal para investigar cómo funcionan las tecnologías con las que se va a trabajar, además de también intentar implementar alguna idea que no sepas resolver pero sin buscar la solución en internet.

Objetivos de la práctica

La mayoría de desarrollos tienen el objetivo de satisfacer las necesidades de un público objetivo (Whatsapp para poder comunicarse por mensaje, Youtube poder consumir contenido de otros o subir el propio, etc.) pero en este caso el único objetivo es el de aprender desarrollando una nueva aplicación web.

Para mí una actitud importante para mantener la motivación es comprender que el objetivo del proyecto no será que sea perfecto, ni siquiera muy bueno: lo importante era terminarlo y por lo tanto no podía exigirme demasiado.

No obstante hay que tener un poco de orgullo propio (como un Saiyan) y plantearse ciertas metas a cumplir, ya que si solo escribimos código al tuntún acabaremos repitiendo los mismos ejercicios que siempre hemos hecho.

Los objetivos para Book Seller eran los siguientes:

• Página web responsiva
• Creación de diferentes filtros que limiten los resultados de la lista de libros
• Buscador (busca palabras clave entre los autores y los títulos)
• Carro de la compra interactivo

Los pasos que he seguido

La base de datos

¿Qué necesitamos para abrir una tienda online de libros? Evidentemente: ¡libros!

En esta ocasión hemos dejado a parte el trabajo backend así que lo hemos simplificado al máximo con un archivo en JavaScript que contengan solamente una lista de objetos (con la información de cada libro) agrupados en un arreglo:

const dataBase = [
	{
	id: 1,
	title: "Learning Maths",
	author: "Richard Ferdman",
	year: 2008,
	price: 19.50,
	cover: "soft",
	pocketbook: true
	},
/*etc... no pondré los 27 libros aquí, los tienes en mi github*/

Con tan solo escribir la etiqueta <script> que enlace con el archivo justo antes de toda la lógica de la aplicación ya tenemos el problema resuelto:

<script type="text/javascript" src="bookDataBase.js"></script>
<script type="text/javascript" src="app.js"></script>

Estructura HTML

El código HTML es la base de una web, lo cual lo hace importante. Pero por suerte es fácil de entender y fácil de usar.

A mí me gusta usar las etiquetas para maquetar que ofrece HTML5 como <main> <section> <nav> <aside> <header> <footer> <article>  y usar el mínimo posible de etiquetas <div>. Lo que acabo de decir puede sonar algo obvio pero tanto al consultar tutoriales modernos como al investigar el HTML de páginas publicadas me encuentro que las etiquetas de maquetación son poco usadas y que se acostumbra a empaquetar todo con un <div>, dentro de otro <div>, que está a la vez dentro de otro, y otro... Ya me entendéis.

Aquí dejo un resumen muy básico de la estructura del contenido:

• <main> tabla principal donde aparece la lista de libros a la venta
• <header> título y logo de la web, junto con la caja del buscador y el botón para buscar
• <nav> conjunto de filtros que se pueden usar para restringir el contenido de los libros a la venta
• <aside> contenedor para el carro de la compra
• <footer> pie de página (información legal de las imágenes usadas y comentario acerca de los fines didácticos)

Enbellecer la web con CSS

El diseño visual no es lo mío. Cada uno debe conocer sus flaquezas y la mía es que no estoy hecho para la decoración, ni en casa ni en la web.

Mi forma de ponerle solución a ello consiste en intentar un diseño minimalista: tres o cuatro colores y a ser posible una misma fuente de texto.

Para los que no somos buenos con las artes plásticas yo recomiendo hacer uso de las múltiples páginas web que hay con paletas de colores prediseñadas que funcionan. ¡Google es vuestro amigo!

Por desgracia no consigo encontrar la página de donde saqué la paleta que he usado para el proyecto, un gran error por mi parte.

De cara a las imágenes que uso (iconos) son todos de Google Fonts, os lo recomiendo sobretodo para no perder demasiado tiempo cuando estáis trabajando en prácticas y queréis que luzcan mínimamente bien.

Por último, y para mí lo más importante: el diseño responsive. Para el proyecto he seguido la directriz más recomendada de mobile first: primero diseña para pantallas de teléfono y después para dimensiones más grandes. Normalmente se construyen para tres y cuatro diseños (teléfono, tablet, PC y televisores o monitores de PC muy grandes). En este caso solo he hecho para teléfono y para PC, ya que tampoco tengo ninguna tablet ni pantallas gigantes para poder comprobar el resultado (a parte de no querer alargar demasiado el proyecto).

La lógica de la aplicación con JavaScript

Aquí es donde entra lo que realmente me interesa y lo que más disfruto, ya que realmente la programación es lo que me apasiona. Y sí, me gusta entender cómo funciona una web, y aprender a construirlas a mi antojo, pero mi objetivo final es otro.

Reconozco que el código es un poco espagueti. Son 292 líneas de código no refactorizado, y que cuando lo terminé pensé que con programación orientada a objetos habría mejorado mucho el código.

La próxima vez intentaré separar el código en relación a los diferentes elementos que intervienen: los filtros serían un solo objeto, el buscador también, igual que el carro, y la lista de libros a la venta otro objeto a parte.

Creo que lo único destacable del programa, y no por bueno ni por malo sino por diferente, es el buscador. Lo lógico en los buscadores es que limiten más el resultado de búsqueda con cada palabra que incluyas: si escribes "Richard" te saldrán todos los libros que contengan la palabra clave "Richard", y si luego añades "Math" el resultado anterior quedará limitado a los que contienen, además, la palabra clave "Math". En este caso no es así (ya tengo a los filtros para filtrar, mejor probar algo diferente): cada palabra que escribas en el buscador se añade a la lista los libros que contengan esa palabra, independientemente de si esos libros contengan o no las otras palabras clave. Por lo tanto si escribes "Richard" y "Math" te saldrán tanto los libros que contengan ambas palabras clave, como los que solo contengan una de las dos (los resultados repetidos solo aparecen una vez).

Este tipo de buscador no tendría mucho sentido para una aplicación real. Este proyecto es solo con fines de aprendizaje a trabes de la práctica, de ahí la experimentación. No me imites si es para un proyecto profesional.

Conclusión

Considero que es un proyecto que muy sencillo pero a la vez completo. Recomiendo algo parecido a cualquiera que esté intentando llegar a nivel Junior.

El siguiente paso sería empezar a hacer proyectos parecidos pero añadiendo el uso de frameworks y/o librerías. También tocaría empezar a tocar temas relacionados con la comunicación con el backend: solicitar información de la base de datos y/o enviar el pedido a la base de datos.

Si has llegado hasta aquí

En serio: si has llegado hasta aquí te aplaudo. Me alegro que compartir mis experiencias hayan servido para alguien. Si consideras que puedes dar ideas para mejorar este proyecto o simplemente tienes alguna duda de cualquier cosa te animo a que dejes un comentario: estaré encantando de leerte y responder a tus dudas.

Gracias por estar aquí conmigo hasta el final.

B1T L4B - Cuaderno de bitácora
Ricard Ferrero