La mayoría de las experiencias de Realidad Aumentada (AR) que vemos hoy en día son estáticas. Sin embargo, el futuro de la tecnología web nos exige ir más allá. No se trata solo de visualización, sino de utilidad real.
En este tutorial, demostraremos nuestro compromiso con la innovación educativa creando una aplicación que fusiona el mundo físico con la economía virtual: un Tracker de Criptomonedas en Realidad Aumentada.
Datos en tiempo real con realidad aumentada usando MindAR
Vivimos en una economía que cambia por segundos. Las finanzas tradicionales están dando paso a modelos más ágiles, y aquí es donde la tecnología promete revolucionar nuestras herramientas cotidianas.
El enfoque de este proyecto es transformar una tarjeta física en una ventana digital inteligente. Al escanearla, no verás un modelo estático, sino el precio en vivo de Bitcoin, Ethereum, Solana o cualquier cripto moneda.
Este tipo de herramientas son vitales para los usuarios modernos que necesitan supervisar sus inversiones de manera inmediata.
Para lograr este nivel de interacción digital, nuestro compromiso técnico se basa en tres pilares:
- MindAR: Para la detección de imágenes en el navegador.
- A-Frame: Para la representación de los objetos digitales.
- Binance API: Para inyectar datos reales de la economía global.
Desarrollo: Un Enfoque Práctico
El gran reto aquí no es solo mostrar una criptomoneda en 3D, sino conectarla a la red. Este tutorial requiere un compromiso con el aprendizaje de JavaScript asíncrono.
Utilizamos la API de Binance para obtener el valor de cada criptomoneda. Esto permite a los usuarios visualizar si el mercado está al alza (verde) o a la baja (rojo), facilitando la toma de decisiones sobre su próxima inversión.
Es fascinante ver cómo herramientas cotidianas como el navegador web pueden convertirse en potentes terminales financieras. Este enfoque demuestra que la WebAR es más que entretenimiento; es una utilidad real.
¿Por qué Datos en Tiempo Real en Realidad Aumentada y MindAR?
En el ecosistema cripto, un segundo es una eternidad. Una herramienta estática no sirve para gestionar inversiones. Por ello, mantenemos un compromiso firme con la veracidad de los datos.
Al integrar fetch en nuestro código, logramos que la experiencia digital se actualice automáticamente. Esto es crucial, ya que el valor de los activos fluctúa constantemente. Este dinamismo es lo que promete mantener la atención de la audiencia.
El Futuro de la Interacción Financiera
La economía descentralizada requiere interfaces nuevas. Las pantallas tradicionales de los exchanges pueden ser abrumadoras. La AR ofrece una forma más intuitiva de relacionarse con estos activos.
Nuestro compromiso es seguir explorando estas fronteras. Creemos que en el futuro, revisar tu portafolio cripto será tan natural como mirar un reloj. Este proyecto es un paso hacia ese futuro donde lo físico y lo digital son uno solo.
¿Como hacer una aplicación tracker de cripto monedas con Realidad Aumentada para navegadores de teléfonos Android y iOS sin instalar Apps?
El primer paso que hice fue crear tres marcadores para MindAR en formato .mind con la herramienta de Realidad Aumentada Empezando Desde Cero.
Te dejo aqui el link de la herramienta:Compilador de Marcadores AR | Crea Realidad Aumentada Gratis
Las imágenes que utilice como marcadores fueron estas tres:
Siguiente a la creación de las imágenes y los marcadores .mind, inicie un proyecto en el Visual Studio code.
¿Cuál es la estructura del proyecto?
- Index.html – Incluye el CSS, HTML y JAVASCRIPT
- Archivo .mind – MarcadorCrypto.mind
- mindar-image-aframe.prod. El Cual es una versión modificada de MindAR que hice y me permite tomar fotografías, grabar video, activar la linterna, me muestra la señal y reconocimiento del marcador y adicional a esto me permite seleccionar la calidad de la cámara iniciando en VGA, 720, HD, FHD, 2K y 4K.
Te gustaría saber más de esta versión modificada de MindAR, te invito a que me sigas en mi PATREON. Realidad Aumentada Empezando Desde Cero – Ingcarlosreina | Tutoriales de Realidad Aumentada – Augmented Reality Tutorials | Patreon - Modelos 3D En formato GLB del Bitcoin, Ethereum y Solana.
Tal vez te puedan interesar tambien estos articulos para tu aprendizaje en el mundo de la realidad aumentada.
- Crea un Menú de Restaurante AR: Tutorial WebAR Paso a Paso
- Tutorial WebAR: Tarjeta de Cumpleaños Explosiva con MindAR
- Cómo integrar Realidad Aumentada en tu blog WordPress
- Crea una app para mostrar zapatillas en Realidad Aumentada
- Hagamos un probador Virtual de Aretes: Tutorial paso a paso
- WebAR Hiperrealista: Tutorial de Gaussian Splatting
- Hagamos un chatbot en realidad aumentada con Google Gemini
Comencemos con el código Javascript.
<script>
document.addEventListener("DOMContentLoaded", function() {
const statusLabel = document.querySelector('#status-label');
const coinsConfig = [
{ symbol: 'BTCUSDT', prefix: 'btc' },
{ symbol: 'ETHUSDT', prefix: 'eth' },
{ symbol: 'SOLUSDT', prefix: 'sol' }
];
const fetchCryptoData = async () => {
statusLabel.innerHTML = "Conectando a Binance <span class='loader'>...</span>";
try {
const symbolsParam = encodeURIComponent(JSON.stringify(coinsConfig.map(c => c.symbol)));
const url = `https://api.binance.com/api/v3/ticker/24hr?symbols=${symbolsParam}`;
const response = await fetch(url);
if (!response.ok) {
throw new Error(`Binance API Error: ${response.status}`);
}
const data = await response.json();
data.forEach(ticker => {
const config = coinsConfig.find(c => c.symbol === ticker.symbol);
if (config) {
const price = parseFloat(ticker.lastPrice);
const change = parseFloat(ticker.priceChangePercent);
updateCoinUI(config.prefix, price, change);
}
});
statusLabel.innerText = "Datos en Tiempo Real (Binance) ⚡";
} catch (error) {
console.error("Error API:", error);
statusLabel.innerText = "Error de conexión ❌";
}
};
const updateCoinUI = (prefix, price, change) => {
const priceText = document.querySelector(`#${prefix}-price`);
const changeText = document.querySelector(`#${prefix}-change`);
const trendArrow = document.querySelector(`#${prefix}-arrow`);
if (!priceText) return;
const formattedPrice = `$${price.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2})}`;
const formattedChange = `${change.toFixed(2)}%`;
priceText.setAttribute('value', formattedPrice);
if (change >= 0) {
const green = '#00ff00';
priceText.setAttribute('color', green);
changeText.setAttribute('color', green);
changeText.setAttribute('value', `+${formattedChange} (24h)`);
trendArrow.setAttribute('color', green);
trendArrow.setAttribute('rotation', '0 0 0');
} else {
const red = '#ff0000';
priceText.setAttribute('color', red);
changeText.setAttribute('color', red);
changeText.setAttribute('value', `${formattedChange} (24h)`);
trendArrow.setAttribute('color', red);
trendArrow.setAttribute('rotation', '0 0 180');
}
};
fetchCryptoData();
document.querySelector('#refresh-btn').addEventListener('click', () => {
coinsConfig.forEach(c => {
const el = document.querySelector(`#${c.prefix}-coin`);
if(el) {
el.removeAttribute('animation');
setTimeout(() => {
el.setAttribute('animation', 'property: rotation; to: 0 360 0; loop: true; dur: 8000; easing: linear');
}, 10);
}
});
fetchCryptoData();
});
setInterval(fetchCryptoData, 10000);
});
</script>Ya tienes lo más importante de la aplicación que es el código JavaScript. Si todo se realizó bien tu aplicación debería de verse así:
Descarga los archivos de este tutorial en mi PATREON.
¿Que contiene este tutorial en PATREON?
- Archivo index.html
- Código CSS, HTML y JavaScript comentado línea por línea de que hace cada linea de codigo.
- Marcador en formato .mind
- Imágenes de marcadores
- Modelos 3D en formato GLB. – Bitcoin.glb – Ethereum.glb – Solana.glb
Da clic en la imagen para ser direccionado al PATREON
