Introducción
Vue.js es un framework JavaScript para el front-end, diseñado para crear interfaces de usuario. Su diseño permite una adopción incremental y una fácil integración con otras librerías y proyectos existentes. Esta característica lo hace idóneo tanto para proyectos pequeños como para aplicaciones web complejas de una sola página cuando se utiliza con otras herramientas y librerías.
Una API, o interfaz de programación de aplicaciones, es una interfaz de software que permite la comunicación entre dos aplicaciones. Una API suele exponer datos que otros desarrolladores pueden utilizar en sus aplicaciones, sin preocuparse por bases de datos ni diferencias entre lenguajes de programación. Los desarrolladores suelen obtener datos de una API que los devuelve en formato JSON, los cuales luego integran en sus aplicaciones de front-end. Vue.js es ideal para consumir este tipo de API.
En este tutorial, crearás una aplicación Vue que utiliza la API de Cryptocompare para mostrar los precios actuales de dos de las principales criptomonedas: Bitcoin y Ethereum. Además de Vue, usarás la biblioteca Axios para realizar solicitudes a la API y procesar los resultados. Axios es excelente porque convierte automáticamente los datos JSON en objetos JavaScript y admite Promesas, lo que resulta en un código más fácil de leer y depurar. Y para que todo se vea bien, usaremos el framework CSS Foundation.
Requisitos previos
- Un editor de texto que admita el resaltado de sintaxis de JavaScript, como Atom, Visual Studio Code o Sublime Text. Estos editores están disponibles para Windows, macOS y Linux.
- Conocimientos básicos sobre el uso conjunto de HTML y JavaScript. Más información en Cómo agregar JavaScript a HTML.
- Familiarícese con el formato de datos JSON, donde podrá aprender más sobre cómo trabajar con JSON en JavaScript.
- Primeros pasos con las solicitudes a la API. Para obtener un tutorial completo sobre cómo trabajar con API, consulte Cómo usar la API web en Python 3. Aunque está escrito para Python, le ayudará a comprender los conceptos básicos del trabajo con API.
Paso 1 – Crea una aplicación básica de Vue
En este paso, crearás una aplicación básica de Vue. Crearemos una página HTML con datos de prueba que luego reemplazaremos con datos reales de la API. Usaremos Vue.js para mostrar estos datos de prueba. Para este primer paso, mantendremos todo el código en un solo archivo.
Utilizando tu editor de texto, crea un nuevo archivo llamado index.html.
En este archivo, agregue el siguiente código HTML, que define la estructura básica y descarga el framework CSS Foundation y la biblioteca Vue.js desde una red de distribución de contenido (CDN). Al usar una CDN, no es necesario descargar código adicional para comenzar a desarrollar su aplicación.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css">
<meta charset="utf-8">
<title>Aplicación de precios de criptomonedas</title>
</head>
<body>
<div class="container" id="app">
<h3 class="text-center">Precios de las criptomonedas</h3>
<div class="columns medium-4" >
<div class="card">
<div class="card-section">
<p> BTC en USD </p>
</div>
<div class="card-divider">
<p>{{ BTCinUSD }}</p>
</div>
</div>
</div>
</div>
<script src="https://unpkg.com/vue@3"></script>
</body>
</html>La línea {{ BTCinUSD }} es un marcador de posición para los datos que proporciona Vue.js, lo que nos permite presentar datos de forma declarativa en la interfaz de usuario. Definamos esos datos.
Justo debajo de la etiqueta با Vue، این کد را برای ایجاد یک برنامه جدید Vue اضافه کنید و یک ساختار داده برای نمایش در صفحه تعریف کنید:
...
Este código crea una nueva instancia de la aplicación Vue y la vincula al elemento con el ID de la aplicación. Vue denomina a este proceso "montar la aplicación". Definimos una nueva instancia de Vue y la configuramos pasándole un objeto de configuración. Pasamos a la instancia `createApp` un objeto de datos que devuelve el valor `BTCinUSD`. Además, llamamos al método `mount` de la instancia `createApp` con el argumento `#app`, que especifica el ID del elemento en el que queremos montar esta aplicación, y una opción de datos que contiene la información que queremos mostrar en la vista.
En este ejemplo, nuestro modelo de datos contiene un único par clave-valor con un valor ficticio para el precio de Bitcoin: { BTCinUSD: 3759.91 }. Estos datos se muestran en nuestra página o vista HTML, donde encerramos la clave entre llaves dobles, así:
<div class="card-divider">
<p>{{ BTCinUSD }}</p>
</div>Finalmente, reemplazaremos este valor cifrado con datos reales de la API.
Abre este archivo en tu navegador. Verás el siguiente resultado en tu pantalla, que muestra los datos de ejemplo:
Estamos mostrando el precio en dólares estadounidenses. Para mostrarlo en otra moneda, como euros, añadiremos otro par clave-valor a nuestro modelo de datos y otra columna en el marcado. Primero, agregamos la fila de euros al modelo de datos:
<script>
const { createApp } = Vue
createApp({
data() {
return {
BTCinUSD: 3759.91,
BTCinEURO: 3166.21
}
}
}).mount('#app')
</script>Luego la sección <div class> Sustituya el texto existente por las siguientes líneas.
<div class="container" id="app">
<h3 class="text-center">Precios de las criptomonedas</h3>
<div class="columns medium-4" >
<div class="card">
<div class="card-section">
<p> BTC en USD </p>
</div>
<div class="card-divider">
<p>{{ BTCinUSD }}</p>
</div>
</div>
</div>
<div class="columns medium-4" >
<div class="card">
<div class="card-section">
<p> BTC en EUR </p>
</div>
<div class="card-divider">
<p>{{ BTCinEURO }}</p>
</div>
</div>
</div>
</div>Ahora guarda el archivo y vuelve a abrirlo en tu navegador. La aplicación mostrará el precio del Bitcoin tanto en euros como en dólares estadounidenses.
En este paso, crearás tu aplicación Vue con datos de ejemplo para comprobar que se carga correctamente. Hasta ahora, hemos trabajado en un solo archivo, así que ahora lo dividiremos en archivos separados para facilitar el mantenimiento.
Paso 2 – Separar JavaScript y HTML para mayor claridad
Para comprender su funcionamiento, reunimos todo el código en un solo archivo. En este paso, separamos el código de la aplicación en dos archivos distintos: index.html y vueApp.js. El archivo index.html gestiona el marcado, y el archivo JavaScript contiene la lógica de la aplicación. Ambos archivos se guardan en el mismo directorio.
Primero, modifica el archivo index.html, elimina el código JavaScript y reemplázalo con un enlace al archivo vueApp.js.
Localiza esta sección del archivo:
......Y cámbialo para que se vea así:
... ...Luego, crea el archivo vueApp.js en la misma carpeta que el archivo index.html.
En este nuevo archivo, pegue el mismo código JavaScript que estaba originalmente en el archivo index.html, sin la etiqueta <code>. قرار دهید:
const { createApp } = Vue createApp({ data() { return { BTCinUSD: 3759.91, BTCinEURO: 3166.21 } } }).mount('#app')Guarda el archivo y vuelve a cargar index.html en el navegador. Verás el mismo resultado que antes.
Aquí has separado la aplicación del marcado. A continuación, añadirás más datos para admitir más criptomonedas además de Bitcoin.
Paso 3 – Usar Vue para iterar sobre los datos
En este paso, reconstruirá los datos y cambiará su vista para mostrar los precios de Bitcoin y Ethereum.
Abre el archivo vueApp.js y modifica la parte de retorno del modelo de datos para que tenga el siguiente aspecto:
const { createApp } = Vue createApp({ data() { return { results: {"BTC": {"USD":3759.91,"EUR":3166.21}, "ETH": {"USD":281.7,"EUR":236.25}} } } }).mount('#app')Nuestro modelo de datos se ha vuelto un poco más complejo con una estructura anidada. Ahora tenemos una clave llamada «resultados» que contiene dos registros: uno para el precio de Bitcoin y otro para el precio de Ethereum. Esta nueva estructura nos permite reducir la duplicación en nuestra vista. Además, se asemeja a los datos que obtenemos de la API de Cryptocompare.
Guarda el archivo.
Ahora vamos a modificar nuestro código para procesar los datos de una manera más planificada.
Abre el archivo index.html y busca esta sección donde mostramos el precio de Bitcoin:
...
<div class="columns medium-4" >
<div class="card">
<div class="card-section">
<p> BTC en USD </p>
</div>
<div class="card-divider">
{{BTCinUSD}}
</div>
</div>
</div>
<div class="columns medium-4" >
<div class="card">
<div class="card-section">
<p> BTC en EUR </p>
</div>
<div class="card-divider">
{{BTCinEURO}}
</div>
</div>
</div>
</div>
...Reemplázalo con este código, que itera sobre el conjunto de datos que definiste.
...
<div class="columns medium-4" v-for="(result, index) in results">
<div class="card">
<div class="card-section">
<p> {{índice}} </p>
</div>
<div class="card-divider">
<p>$ {{ resultado.USD }}</p>
</div>
<div class="card-section">
<p> &#8364 {{ resultado.EUR }}</p>
</div>
</div>
</div>
...Este código utiliza la instrucción `v-for`, que funciona como un bucle `for`. Itera sobre todos los pares clave-valor de nuestro modelo de datos y muestra los datos de cada uno.
Cuando recargues la página en el navegador, verás los precios ridículos:
Esta modificación nos permite agregar una nueva moneda a los datos de resultados en vueApp.js y mostrarla en la pantalla sin realizar más cambios.
Agrega otra entrada simulada al conjunto de datos con la información resaltada para probar esto:
const { createApp } = Vue createApp({ data() { return { results: {"BTC": {"USD":3759.91,"EUR":3166.21}, "ETH": {"USD":281.7,"EUR":236.25}, "NEW Currency":{"USD":5.60,"EUR":4.70}} } } }).mount('#app')Introduzca la coma final después de la entrada de Ethereum. Guarde el archivo.
Si ahora carga la página en un navegador web, verá la nueva entrada mostrada:
Cuando examinamos los datos mediante programación, no necesitamos agregar manualmente nuevas columnas en el marcado.
Aquí, usaste datos de muestra para ver los precios de varias monedas. Ahora, obtengamos los datos reales usando la API de Cryptocompare.
Paso 4 – Obtener datos de la API
En este paso, se reemplazan los datos simulados con datos reales de la API de Cryptocompare para mostrar los precios de Bitcoin y Ethereum en la página web en dólares estadounidenses y euros.
Para obtener los datos de nuestra página, solicitamos información a https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH&tsyms=USD,EUR, que pide los precios de Bitcoin y Ethereum en USD y EUR. Esta API devuelve una respuesta en formato JSON.
Utilice curl para enviar una solicitud a la API y ver la respuesta en una sesión de terminal:
curl 'https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH&tsyms=USD,EUR''El resultado que verás será similar a este:
Salida {"BTC":{"USD":21694.18,"EUR":21407.64},"ETH":{"USD":1504.02,"EUR":1485.99}}Este resultado es similar al modelo de datos codificado que usaste en el paso anterior, pero con los valores actuales de Bitcoin y Ethereum. Ahora solo necesitamos modificar los datos solicitando esta URL desde nuestra aplicación.
Para la solicitud, utilizamos la función `mounted()` de Vue junto con la función `GET` de la biblioteca Axios para obtener los datos y almacenarlos en el array de resultados del modelo de datos. La función `mounted` se llama cuando la aplicación Vue se monta en un elemento. Una vez montada la aplicación Vue, enviamos la solicitud a la API y almacenamos los resultados. La página web recibe una notificación del cambio y los valores se muestran en ella.
Primero, abre index.html y carga la biblioteca Axios añadiendo un script debajo de la línea donde colocaste Vue:
... ...Guarda el archivo y luego abre vueApp.js.
Modifica y actualiza vueApp.js para solicitar la API y completar el modelo de datos con los resultados.
const url = "https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH&tsyms=USD,EUR"; const { createApp } = Vue createApp({ data() { return { results:[] } }, mounted() { axios.get(url).then(response => { this.results = response.data }) } }).mount('#app')Observe que hemos eliminado el valor predeterminado de `results` y lo hemos reemplazado por un array vacío. Al cargar nuestra aplicación por primera vez, no tendremos datos, pero la vista HTML espera que se repita información al recargarse.
La función axios.get utiliza una Promesa. Cuando la API devuelve datos correctamente, se ejecuta el código dentro del bloque y los datos se almacenan en nuestra variable de resultados.
Guarda el archivo y vuelve a cargar la página index.html en tu navegador. Esta vez verás el precio actual de las criptomonedas.
Si no ve nada, puede consultar la guía sobre cómo usar la consola de desarrollador de JavaScript y usarla para depurar su código. La página puede tardar un minuto en actualizarse con los datos de la API.
También puedes consultar este repositorio de GitHub, que contiene archivos HTML y JS que puedes descargar para realizar pruebas cruzadas. También puedes clonar el repositorio.
En este punto, has modificado tu aplicación para que solicite datos en tiempo real para su revisión.
Resultado
En menos de cincuenta líneas de código, creaste una aplicación que consume una API usando solo tres herramientas: Vue.js, Axios y la API de Cryptocompare. Aprendiste a mostrar datos en una página, iterar sobre los resultados y reemplazar datos estáticos con los resultados de la API.
Ahora que comprende los conceptos básicos, puede agregar funcionalidades adicionales a su aplicación. Modifique esta aplicación para mostrar otras monedas o utilice las técnicas aprendidas en este tutorial para crear otras aplicaciones web con una API diferente.
