Crea tu visor del precio de las criptomonedas en tiempo real

Daniel -

Hoy os vamos a enseñar un proyecto sencillo y barato para crear vuestro visor de criptomonedas en tiempo real de una manera sencilla. En este tutorial os enseñamos los pasos, piezas, montaje y configuración del mismo. No te lo pierdas 👍

Partes Necesarias

  • Placa: NodeMCU ESP8266 Board
  • Pantalla: OLED Display 1.3" version
  • Cables: Female-Female Dupont cables

Tiendas en las que puedes conseguir las piezas necesarias

Geartbest:

Aliexpress:

Configuración del IDE de Arduino para nuesta placa

Para poder compilar el código en nuestra placa necesitamos añadir su perfil. Por defecto no viene incluida en el ID de Arduino, pero esto tiene una fácil solución. Los pasos son los siguientes:

  1. Ir a "Archivo" y pulsar en "Preferencias"
  2. En el apartado "Gestor de URLs Adicionales de Tarjetas" ponemos la siguiente url: http://arduino.esp8266.com/stable/package_esp8266com_index.json

Si tenemos otras urls de otras placas en el apartado "Gestor de URLs Adicionales de Tarjetas" solo tienes que escribir una "," y después la url

  1. Pulsamos en "Ok" para guardar los cambios

  1. Una vez realizado el proceso anterior nos vamos al menú herramientas, Placa (1) y después seleccionamos el "Gestor de tarjetas" (2).

  1. Una vez dentro usamos la barra de busquesda (1) y escribimos "esp8266" y pulsamos el botón instalar (2).

  1. Una vez lo tenemos instalado, volvemos a herramientas, Placa y buscamos el modelo "NodeMCU 1.0 (ESP-12E Module)"

Instalación de las librerías necesarias

  1. En el IDE de Arduino, vaya a Programa -> Incluir librerías -> Gestionar librerías

  2. En la barra de búsqueda, busque "Coinmarket", instale la biblioteca por Brian Lough

  3. Busque "oled ssd1306", instale la biblioteca de Daniel Eichhorn

  4. Finalmente busca "arduino json", instala la biblioteca de Benoit Blanchon

Importante en este caso elegir la versión 5.13.2 en el menú desplegable antes de instalarla

Ahora tiene todas las bibliotecas que necesita para ejecutar el código, solo tenemos que realizar un par de ajustes y estaremos listos para continuar.

Instalación de los drivers

Algunas versiones de Windows o Mac no detectan estas placas sin los drivers correspondientes, deberéis buscar en Google la versión del driver correspondiente a tu equipo.

Montaje de la pantalla en la placa

Tabla que explica como debemos conectar la pantalla y la placa mediante los cables:

Pantalla (Pin) Placa (Pin)
VDD 3v3
GND GND
SCK o SCL D5
SDA D3

Aclaración: ponemos "SCK o SCL" porque en algunas pantallas puede que cambie esa nomenclatura. En mi caso en la pantalla que compre en Aliexpress el pin es "SCK", si lo compráis en otra tienda puede que sea "SCL"

En la siguiente foto podéis ver como esta conectado:

Importante: El color de los cables es indiferente, podéis poner los que más os gusten

Instalación del Software Arduino en la placa

Ahora solo nos queda añadir el código fuente necesario para que funcione correctamente, compilarlo y mandarlo a la placa. Para realizar esto tenéis que seguir los siguientes pasos:

  1. Abrir el IDE de Arduino y le damos a "Archivo" > "Nuevo". Se nos mostrará una ventana como la siguiente:

Importante: Borrar todo ese código que sale en la imagen

  1. Ahora vamos a este link y copiamos todo el código en nuestro IDE de Arduino (En la ventana en la que borramos todo el código en el paso anterior).
  2. Pulsamos "Archivo" y "Guardar Como...". Le ponemos el nombre que queramos con la extensión ".ino". Ej: "visor.ino"
  3. Buscamos las variables ssid y password. En ellas ponemos el nombre de nuestra red y su contraseña:

char ssid[] = "Nombre de la Red Wifi";
char password[] = "Contraseña";

  1. Pulsamos Control + S o vamos a "Archivo" > "Salvar" para guardar los cambios.
  2. Nos aseguraros de tener en herramientas puesto en el apartado Placa el modelo "NodeMCU 1.0 (ESP-12E Module)". Como podéis ver en la siguiente imagen:

  1. Conectamos la placa al ordenador mediante un cable micro usb a usb.
  2. En la parte superior de la ventana del IDE de Arduino podéis ver los siguientes botones:

Para cargar el proyecto en la placa solo hay que pulsar la fecha que mira hacia la derecha (Al pasar el ratón por ella os saldrá el mensaje subir como en la foto anterior).

Si os sale un error de que se pudo subir probar a entrar en "Herramientas" y bucar en el menú desplegable "Puerto" dentro de puerto elegir uno de la lista (En mi caso es el COM3). Y reintentar volverlo a subir.

  1. Si esta todo correcto ya teneis vuestro visor de criptomonedas funcionando.

Como puedo añadir más criptomedas para que las muestre

Siguiente con el código anterior solo tenemos que realizar unas modificaciones:

  1. Vamos al apartado "Holdings - Add your currencies here"
  2. Encontramos una lista como la siguiente:

addNewHolding("bitcoin");
addNewHolding("cardano");
addNewHolding("viuly");
addNewHolding("siacoin");
addNewHolding("ethereum");

  1. Ahora tenemos 2 opciones modificar el texto de las variables "addNewHolding" o añadir más. Vamos a la web https://coinmarketcap.com/ y entramos en el perfil de la criptomoneda que queramos. En este ejemplo seleccionamos a IOTA.

La url de Coinmarkcap para IOTA es: https://coinmarketcap.com/currencies/iota/. De esta url solo nos interesa el nombre que esta después de "currencies" que en este caso es "iota". Ahora en la variable "addNewHolding" añadimos a IOTA. Ejemplo:

addNewHolding("iota");

  1. Volvemos a guardar con Control + S los cambios y volvemos a enviar el proyecto a la placa

¿Cómo puedo la divida en la que se muestran los precios?

Para cambiar la moneda que muestra tenemos que seguir un proceso similar al que hicimos para añadir otras criptomonedas. En este caso tenemos que buscar la variable "CURRENCY_SYMBOL". Son las siguientes lineas:

#define CURRENCY "eur" //See CoinMarketCap.com for currency options (usd, gbp etc)
#define CURRENCY_SYMBOL "E" // Euro doesn't seem to work, $ and £ do

Advertencia el símbolo del euro no lo muestra en pantalla porque la librería no lo soporta

Para poner por ejemplo la divisa en dólares debería quedar el código de la siguiente manera:

#define CURRENCY "usd" //See CoinMarketCap.com for currency options (usd, gbp etc)
#define CURRENCY_SYMBOL "$" // Euro doesn't seem to work, $ and £ do