Mejorando la UX de Cocos 馃ゥ
2024 Feb 26
See all posts
Mejorando la UX de Cocos 馃ゥ
Si vos tambi茅n est谩s manija del bullmarket con el cambio de gobierno,
habr谩s averiguado formas de invertir tu plata y quiz谩s te hayas
encontrado con Cocos Capital, que permite comprar y vender productos
financieros sin comisiones (no es chivo) (por ahora).
Hace un par de meses vengo usando la web de cocos para invertir parte
de mis ingresos. Casi al toque de empezar a usarla encontr茅 algo que se
puede mejorar a nivel experiencia (personal) de usuario. La secci贸n de
mercado, que permite ver todos los activos con su precio, volumen,
variaci贸n, etc. no se puede ordenar por ninguna de estas variables.
En mi caso, por ejemplo me interesaba ver cual es el activo con mayor
volumen operado, cantidad de operaciones o el que tiene la mayor
variaci贸n en el precio.
El volumen operado ayuda a prevenir riesgos de liquidez: el riesgo de
comprar un activo y luego no poder venderlo porque nadie te lo quiera
comprar 馃ゲ
El desaf铆o entonces era desarrollar un script que permitiera ordenar
el panel de instrumentos por cualquiera de las variables que se
muestran: precio, variaci贸n, cajas de puntas comprador y vendedor,
precio m铆nimo, m谩ximo, total operado, cantidad de operaciones; de forma
ascendente y descendente. Hacerlo en VanillaJS para poder integrarlo
directamente en el navegador web.
Con aprox 100 lineas de Vanilla JavaScript se puede lograr. El video
est谩 disponible en este
post de LinkedIn
El c贸digo es open source y est谩 disponible en cocos-order-panel
|聽Github
C贸mo
La idea es profundizar acerca de c贸mo lograr lo anterior. Si ven铆s de
LinkedIn, habr谩s visto que lo de arriba es el post que acompa帽a a esta
publicaci贸n
Si viste el video, lo que hago es copiar el codigo del repositorio y
pegarlo en la consola que google chrome. Cada pagina web a la que
accedemos carga lo que se conoce como DOM que el navegador se encarga de
mostrar en la pantalla.
DOM (Document Object Model) es la representaci贸n de la estructura de
la web en un 谩rbol que permite conectarla scripts
Entonces gracias a la interfaz que provee el DOM, se puede cargar un
script a la web y que este lo interprete y ejecute.
Algoritmo
El algoritmo debe:
- Hallar todos los titulos de columnas de la tabla de
instrumentos
- Agregar un eventListener a cada titulo de columna
- Cuando se haga click debe ordenar todas las filas en base al titulo
seleccionado
- Debe hacerlo primero de forma ascendente y luego descendente
Para ello hay que estudiar como est谩 estructurada la web de cocos,
viendo el HTML, todos los titulos de columna comparten la clase
markets-table-header luego usando
document.querySelector(".markets-table-header"); se obtiene
un array con los headers de las columnas.
Lo que sigue es a cada uno de esos elementos agregar un eventListener
que dada una columna:
- identifique que numero de columna se clickeo
- obtenga todas las filas de la tabla
- ordene todas las filas de la tabla en base al numero de columna
- borre todas las filas de la tabla
- agregue las filas de la tabla de forma ordenada
Esta es la parte mas complicada del proceso porque hay que
identificar que columna se clickeo usando el titulo, idnetificar que
numero de columna tiene este titulo, obtener todos los datos de esa
columna, ordenar las filas y presentar.
Las linea 6 a 91 se encargan de todo este proceso (el 68% del
c贸digo)
La idea central es entender como est谩 estructurado el HTML para poder
identificar en donde aplicar el listener y como se pueden extraer los
datos necesarios para los calculos
Go for esos cocos
El c贸digo es open source y est谩 disponible en cocos-order-panel
|聽Github
Mejorando la UX de Cocos 馃ゥ
2024 Feb 26 See all postsSi vos tambi茅n est谩s manija del bullmarket con el cambio de gobierno, habr谩s averiguado formas de invertir tu plata y quiz谩s te hayas encontrado con Cocos Capital, que permite comprar y vender productos financieros sin comisiones (no es chivo) (por ahora).
Hace un par de meses vengo usando la web de cocos para invertir parte de mis ingresos. Casi al toque de empezar a usarla encontr茅 algo que se puede mejorar a nivel experiencia (personal) de usuario. La secci贸n de mercado, que permite ver todos los activos con su precio, volumen, variaci贸n, etc. no se puede ordenar por ninguna de estas variables.
En mi caso, por ejemplo me interesaba ver cual es el activo con mayor volumen operado, cantidad de operaciones o el que tiene la mayor variaci贸n en el precio.
El volumen operado ayuda a prevenir riesgos de liquidez: el riesgo de comprar un activo y luego no poder venderlo porque nadie te lo quiera comprar 馃ゲ
El desaf铆o entonces era desarrollar un script que permitiera ordenar el panel de instrumentos por cualquiera de las variables que se muestran: precio, variaci贸n, cajas de puntas comprador y vendedor, precio m铆nimo, m谩ximo, total operado, cantidad de operaciones; de forma ascendente y descendente. Hacerlo en VanillaJS para poder integrarlo directamente en el navegador web.
Con aprox 100 lineas de Vanilla JavaScript se puede lograr. El video est谩 disponible en este post de LinkedIn
El c贸digo es open source y est谩 disponible en cocos-order-panel |聽Github
C贸mo
La idea es profundizar acerca de c贸mo lograr lo anterior. Si ven铆s de LinkedIn, habr谩s visto que lo de arriba es el post que acompa帽a a esta publicaci贸n
Si viste el video, lo que hago es copiar el codigo del repositorio y pegarlo en la consola que google chrome. Cada pagina web a la que accedemos carga lo que se conoce como DOM que el navegador se encarga de mostrar en la pantalla.
DOM (Document Object Model) es la representaci贸n de la estructura de la web en un 谩rbol que permite conectarla scripts
Entonces gracias a la interfaz que provee el DOM, se puede cargar un script a la web y que este lo interprete y ejecute.
Algoritmo
El algoritmo debe:
Para ello hay que estudiar como est谩 estructurada la web de cocos, viendo el HTML, todos los titulos de columna comparten la clase
markets-table-headerluego usandodocument.querySelector(".markets-table-header");se obtiene un array con los headers de las columnas.Lo que sigue es a cada uno de esos elementos agregar un eventListener que dada una columna:
Esta es la parte mas complicada del proceso porque hay que identificar que columna se clickeo usando el titulo, idnetificar que numero de columna tiene este titulo, obtener todos los datos de esa columna, ordenar las filas y presentar.
Las linea 6 a 91 se encargan de todo este proceso (el 68% del c贸digo)
La idea central es entender como est谩 estructurado el HTML para poder identificar en donde aplicar el listener y como se pueden extraer los datos necesarios para los calculos
Go for esos cocos
El c贸digo es open source y est谩 disponible en cocos-order-panel |聽Github