Después de explicar la estructura y objetivos de proyecto en la parte anterior, voy a construir la app desde cero, empezando por la user interface (en adelante, UI).
Creación del proyecto en vsCode y adición de SASS
Este es el curso de CSS avanzado que me enseñó a crear un proyecto con SASS.
Después de que se instalen los paquetes en mi command line, no olvidar que debemos tener siempre activo el comando npm run sass en alguna de las terminales. Yo lo hago en vsCode porque así lo tengo siempre visible.
CÓMO LANZAR EL PROYECTO LOCALMENTE
- run npm run sass en la terminal de vsCode
- clic en Go live (extensión live server) en vsCode toolbar, abajo a la derecha.
Subiendo el proyecto a GitHub
Aprendí a programar directamente con control de versiones, así que no me imagino trabajando sin él.
Una de las primeras cosas que hago es crear el archivo .gitignore para que no me suba a gitHub la descomunal carpeta de los node_modules. VScode es tan intuitivo que te marca la carpeta en gris para avisarte de que no la va a subir a gitHub.
Después de solventar un par de dudas que me surgen para subir correctamente un proyecto, lo consigo. Aquí está el repositorio.
Los pasos que he seguido han sido:
- Crear el proyecto (en local) en vsCode y añadirle SASS.
- crear el repositorio desde gitHub
- clonar el repositorio desde gitHub desktop
- meter las carpetas dentro del repositorio remoto, porque se me había creado dos
Así consigo que mi proyecto ya esté bajo el control de versiones, y hago mi primer commit.
Dividiendo el proyecto en componentes
Soy consciente de que este proyecto va a ser un desastre cuando lo mire en el futuro, pero eso no quiere decir que no deba intentar poner cierto orden. Todo caos en mi código será derivado de que sencillamente no sé hacerlo mejor, y para eso estoy aquí, para mejorar.
Así que voy a empezar dividiendo el proyecto en componentes, en archivos scss. Para ello, consulto artículos como este.
Así ha quedado mi código (commit).
Incluyendo JS a la ecuación
Ni siquiera tengo un archivo .html donde poder empezar a crear mi web de manera estática ni una estructura de carpetas de JS, así que ese es el siguiente paso.
Evidendemente, no quiero tener únicamente un archivo .html donde colocar todo mi código HTML, teniendo en cuenta que voy a crear varias páginas. Pero aún no estoy segura de cuál es la mejor manera de hacer esto, y después de pasarme horas leyendo, voy a tomar el camino cutre, que para mí consiste en just do it, y ya lo mejoraré cuando sepa cómo.
Lo mismo hago con la estructura de JS. Sé que debería hacer un código modular, pero llevo horas investigando y sencillamente no me encajan todas las piezas. Así que antes de copiar un código que no entienda, me voy a lo simple, a lo que funciona y que entiendo. Y ya dividiré JS en módulos o en secciones o en lo que sea, cuando vea la necesidad.
Aquí el commit con mis cambios.
¡Pues ya he terminado con el setup! Ahora a por la UI.
Construcción de la Home page
Empiezo construyendo el header, aquí el commit con los primeros pasos.
Empiezo a diseñar con mi herramienta favorita de CSS: el display: flex. Me he dado cuenta de que lo uso constantemente, y que eso ha hecho que destierre (casi) para siempre la propiedad position, y por supuesto, los floats. Al CSS grid todavía no le he cogido el gustillo, y a penas lo uso en mi día a día.
Después de una hora, construyo la UI del idioma (commit), me acabo de dar cuenta que aún no sé si lo voy a utilizar de verdad. Quizás sí que intente hacer algo, aunque sea traducir el menú, así aprenderé los básicos sobre cómo internacionalizar una app. Seh.
Lo siguiente que hago es añadir el logo (commit), hecho en un plis plas con Canva. A la vista está que lo he hecho en menos de 5 minutos 
.
Vamos a apañar un poco el menú. Aquí el commit.
Hecho el header, vamos a por la zona central, donde irá nuestro contenido y el botón de signup, y finalmente a por el footer, que acabo de darme cuenta de que no lo incluí en mis wireframes, genial...
Aquí el commit.
Con estos cambios, la UI de la homepage ya está hecha!
Construyendo la UI de la página ETF screener
He tardado una barbaridad (un par de tardes, en total unas 4 horas) en hacer la UI de la homepage. Digo "una barbaridad" porque quiero llegar ya a la parte del frontend y no entretenerme demasiado con la UI, pero algo de estilo tengo que añadir, para que no se quede más feo que un boniato.
Se me ha pasado por la cabeza añadirle de Bootstrap, pero bah, ahora que ya estoy metida en harina...
.
Voy a crear un archivo HTML dedicado a esta página y vincularlo al index.html a través del menú, consiguendo así un sistema de rutas ultra-sofisticado 
. Vale, esto no son rutas ni son nada, pero...funciona, de momento.
No tiene sentido que tenga que copiar otra vez cierto contenido del index.html al etf-screener.html, así que algo estoy haciendo mal, y lo solucionaré más adelante.
Ya que estoy, voy a crear todos los archivos HTML (uno por página) y vincularlos al menú y al logo. Esto ha supuesto que me he puesto a copiar código de un lado a otro. No muy DRY...
Aquí el commit.
A estas alturas, tengo más de un 75% de código HTML en mi proyecto y un ridículo 0.2% de JS. Ay, ¡qué ganas tengo de dar la vuelta a la tortilla!
Repasando el curso de JS de Jonas, él al principio añade el script de JS en el body, así que voy a seguir su consejo.
No sé por qué diseñé un breadcrumb aquí, si esta página no es hija de ninguna otra. Así que no lo voy a incluir en la implementación de la UI.
Voy a crear un archivo SCSS específico para esta página, porque no sé dónde meter todos los estilos del filtro lateral y de la tabla de ETFs.
Aquí el commit con el que he terminado de construir la UI de esta página.
Así se me ha quedado:
Venga, ¡vamos a por UI de la página de perfil de un ETF!
Construyendo la UI de la página ETF profile
No había creado un archivo HTML para esta página, porque es la única que no es accesible directamente desde el menú, sino a través del ETF screener.
Me había dejado un div sin cerrar en el ETF-screener.html y algunas clases de CSS comentadas que ya no me sirven, así que limpio un poco el código.
Corrijo el nombre de algunos archivos SCSS, porque no estaba usando el formato correcto, que es:
_archivo.scss
Y el import:
carpeta/archivo
(sin el .scss ni el guión bajo).
Acabo de darme cuenta de que los dos botones de esta UI (add to portfolio y add to favourites) no tienen diseño hecho 
. Muy bien, Rocío... Llegados a este punto, creo que añadir un flow que incluya lo que sucedería al pulsar el botón add to portfolio añadiría muchísima complejidad al proyecto, así que sólo voy a implementar la página de "favoritos", con una UI muy sencilla, únicamente una tabla igual que la del ETF screener, con el mismo flow.
Eso me ayudará a practicar el enlazar botones a un mismo punto y a construir varios caminos. Por ejemplo, del botón a la tabla, o de la tabla al perfil del ETF. Aquí el commit y el resultado:
Construyo rápidamente la página de los favoritos, cuyo acceso no he definido y acabo de darme cuenta. Es decir, sé lo que quiero que pase cuando alguien haga clic en el botón "añadir a favoritos", pero no hay ningún sitio en la app desde el cual se pueda acceder a esos favoritos 
.
Todo esto me hace darme cuenta de un proceso de vital importancia que me he saltado a la torera: hacer flowcharts y/o user stories, como enseña Jonas en su curso de JS.
En este punto, creo que va a ser una función oculta, sólo visible cuando un usuario esté autenticado. Seh. Sencillamente lo añadiré al menú y lo dejaré oculto de momento. Esto de mostrar contenido según un usuario esté autenticado o no tiene que ver con lo que se llama application state. O al menos, eso creo.
Aquí el commit y el resultado, como digo, mega simple:
Construyendo la UI de la página Strategy builder
Me parece que me he flipado un poco con tanta página. No tengo muy claro (por no decir NADA) cómo hacer esta pantalla. Además, tengo la impresión de que será demasiado compleja y fuera del ámbito de lo que quiero practicar aquí con vanilla JS. Así que doy un paso atrás, y sencillamente pondré una UI como si la página estuviera en construcción.
Aquí el commit y el resultado:
Construcción de la página Academy
Esta página, a parte de tener una UI muy sencilla de construir, porque será simplemente un grid, no creo que me lleve mucha lógica de programación, por no decir nada. Pero no adelantemos acontecimientos.
Los libros son dos clásicos de la inversión en Bolsa que poco tienen que ver con los ETFs, pero me gustan.
Aquí el commit y el resultado:
Construcción de la UI de la Login page
Venga, ¡que esto casi está! Esta pantalla la he hecho en pocos minutos, porque no tiene mayor complicación. Aquí el commit y el resultado: