Creación de Rutas Dinámicas en Vue.js para Criptomonedas

Contenido del curso

Introducción

Rendering Declarativo y Manipulación de DOM

Sistema de Componentes

Ambiente de Desarrollo

Platzi Exchange

¡A producción!

38
Publicación de Aplicaciones con Git y Netlify
05:37 min

Rendering Declarativo y Manipulacion de DOM

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0021:36

Creación de Rutas Dinámicas en Vue.js para Criptomonedas

Curso Básico de Vue.js 2

Clase 32 de 38

Clase 32 / 38

Recursos

¿Qué es una ruta dinámica en Vue Router?

Las rutas dinámicas son una técnica en programación que permite crear rutas únicas en un proyecto web que cambian su contenido según un valor específico en la URL. En el contexto de Vue Router, se integran mediante el uso de parámetros dinámicos, que se definen con dos puntos seguidos del nombre del parámetro en la ruta. Por ejemplo, en una aplicación de criptomonedas, puedes tener una ruta que muestra el detalle de una moneda específica, como Bitcoin o Ethereum, simplemente cambiando el valor en la URL.

¿Cómo se crea una nueva ruta dinámica?

Para implementar rutas dinámicas necesitas:

Definir la ruta en el archivo de configuración del Router: Crear una ruta que incluya un parámetro dinámico, como :id.
Enlazarla a un componente: Vincular la ruta a un componente que se encargue de mostrar el contenido específico.
Usar this.$route.params: Acceder al valor dinámico desde el componente para modificar el contenido que se muestra dependiendo del parámetro.

Por ejemplo, en un proyecto Vue, puedes hacerlo de la siguiente forma:

const routes = [
  {
    path: '/coin/:id',
    component: CoinDetail,
  }
];

¿Cómo se desarrolla a partir de una API en Vue?

Interactuar con una API es fundamental para obtener datos externos.

Importar y definir la API: Asegúrate de que la función de la API esté bien definida y lista para ser llamada.
Crear funciones para llamar a la API: Implementa funciones dentro del componente que se encargarán de obtener los datos necesarios.
Gestionar y mostrar los datos en el componente: Utiliza propiedades computadas o métodos para procesar y renderizar los datos.

En el caso de nuestra aplicación de criptomonedas, suponiendo que tenemos un método getCoin, podríamos llamar a la API así:

methods: {
  async fetchData() {
    try {
      const response = await api.getCoin(this.$route.params.id);
      this.coinData = response.data;
    } catch (error) {
      console.error('Error fetching data', error);
    }
  }
}

¿Cómo calcular valores con propiedades computadas?

Las propiedades computadas en Vue te permiten realizar cálculos reactivos y mantener el código limpio y eficiente.

Definir propiedades computadas dentro del componente: Estas propiedades deben calcularse en base a los datos disponibles.
Ejemplo práctico de cálculo de precios: Si necesitas calcular el precio promedio, el más alto y el más bajo de una criptomoneda a partir de datos históricos, podrías definir propiedades computadas como:

computed: {
  minPrice() {
    return Math.min(...this.history.map(day => day.price));
  },
  maxPrice() {
    return Math.max(...this.history.map(day => day.price));
  },
  averagePrice() {
    const total = this.history.reduce((accum, day) => accum + day.price, 0);
    return (total / this.history.length).toFixed(2);
  }
}

¿Qué ventajas tienen las rutas dinámicas y el uso de APIs?

Utilizar rutas dinámicas y APIs en Vue ofrece múltiples beneficios:

Flexibilidad: Puedes crear múltiples páginas para diferentes datos sin necesidad de duplicar el código.
Escalabilidad: Facilita la gestión de grandes cantidades de datos, como el acceso a información de muchas criptomonedas distintas.
Reutilización: El mismo componente y HTML pueden servir para diferentes páginas, optimizando recursos.

En resumen, este enfoque no solo mejora la eficiencia y la optimización de recursos, sino que también favorece una mejor experiencia de desarrollo y de usuario. ¡Adelante, sigue explorando y perfeccionando tus habilidades en Vue!

Bairon Felipe peña castellanos

Hace 5 años

Asi quedaria para los que estan trabajando con vue js3, dame un corazon por que me costo muchisimo encontrar la solucion jajaja

Router.js

<code> 
import { createWebHistory, createRouter } from "vue-router";

import Home from "@/views/Home.vue";
import Error from "@/views/Error.vue";
import About from "@/views/About.vue";
import CoinDetail from "@/views/CoinDetail.vue";

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/about",
    name: "about",
    component: About,
  },
  {
    path: "/CoinDetail/:id(.*)",
    name: "Coin-Detail",
    component: CoinDetail,
  },
  {
    path: "/:catchAll(.*)",
    name: "error",
    component: Error,
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

CoinDetail.vue

<code> 
<template>
  <div class="flex-col">
    <div class="flex flex-col sm:flex-row justify-around items-center">
      <div class="flex flex-col items-center">
        <img
          :src="`https://static.coincap.io/assets/icons/${asset.symbol.toLowerCase()}@2x.png`"
          :alt="asset.name"
          class="w-20 h-20 mr-5"
        />
        <h1 class="text-5xl">
          {{ asset.name }}
          <small class="sm:mr-2 text-gray-500">{{ asset.symbol }}</small>
        </h2>
      </div>

      <div class="my-10 flex flex-col">
        <ul>
          <li class="flex justify-between">
            <b class="text-gray-600 mr-10 uppercase">Ranking</b>
            <span>#{{ asset.rank }}</span>
          </li>
          <li class="flex justify-between">
            <b class="text-gray-600 mr-10 uppercase">Precio actual</b>
            <span>{{ dollarFilter(asset.priceUsd) }}</span>
          </li>
          <li class="flex justify-between">
            <b class="text-gray-600 mr-10 uppercase">Precio más bajo</b>
            <span>{{ dollarFilter(min) }}</span>
          </li>
          <li class="flex justify-between">
            <b class="text-gray-600 mr-10 uppercase">Precio más alto</b>
            <span>{{ dollarFilter(max) }}</span>
          </li>
          <li class="flex justify-between">
            <b class="text-gray-600 mr-10 uppercase">Precio Promedio</b>
            <span>{{ dollarFilter(avg) }}</span>
          </li>
          <li class="flex justify-between">
            <b class="text-gray-600 mr-10 uppercase">Variación 24hs</b>
            <span>{{ percentFilter(asset.changePercent24Hr) }}</span>
          </li>
        </ul>
      </div>

      <div class="my-10 sm:mt-0 flex flex-col justify-center text-center">
        <button
          class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded"
        >
          Cambiar
        </button>

        <div class="flex flex-row my-5">
          <label class="w-full" for="convertValue">
            <input
              id="convertValue"
              type="number"
              class="text-center bg-white focus:outline-none focus:shadow-outline border border-gray-300 rounded-lg py-2 px-4 block w-full appearance-none leading-normal"
            />
          </label>
        </div>

        <span class="text-xl"></span>
      </div>
    </div>
  </div>
</template>


<script>
import api from "@/api";
import { dollarFilter, percentFilter } from "@/filters";

export default {
  name: "CoinDetail",

  data() {
    return {
      asset: {},
      history: [],
    };
  },

  setup() {
    return {
      dollarFilter,
      percentFilter,
    };
  },

  computed: {
    min() {
      return Math.min(
        ...this.history.map((h) => parseFloat(h.priceUsd).toFixed(2))
      );
    },

    max() {
      return Math.max(
        ...this.history.map((h) => parseFloat(h.priceUsd).toFixed(2))
      );
    },

    avg() {
      return (
        this.history.reduce((a, b) => a + parseFloat(b.priceUsd), 0) /
        this.history.length
      );
    },
  },

  created() {
    this.getCoinDetail();
  },

  methods: {
    getCoinDetail() {
      const id = this.$route.params.id;

      Promise.all([api.getAsset(id), api.getAssetHistory(id)]).then(
        ([asset, history]) => {
          this.asset = asset;
          this.history = history;
        }
      );
    },
  },
};
</script>

<style scoped>
td {
  padding: 10px;
  text-align: center;
}
</style>

Api.js

<code> 
const url = "https://api.coincap.io/v2";

function getAssets() {
  return fetch(`${url}/assets?limit=20`)
    .then((res) => res.json())
    .then((res) => res.data);
}

function getAsset(CoinDetail) {
  return fetch(`${url}/assets/${CoinDetail}`)
    .then((res) => res.json())
    .then((res) => res.data);
}

function getAssetHistory(CoinDetail) {
  const now = new Date();
  const end = now.getTime();
  now.setDate(now.getDate() - 1);
  const start = now.getTime();

  return fetch(
    `${url}/assets/${CoinDetail}/history?interval=h1&start=${start}&end=${end}`
  )
    .then((res) => res.json())
    .then((res) => res.data);
}
export default {
  getAssets,
  getAsset,
  getAssetHistory,
};

Espero les sirva.

Rodrigo Angel Zucchini

Hace 5 años

Gracias Bairon me salvaste un día entero de problemas.

Referi Games

Hace 5 años

Gran aporte compañero.

Comentarios (67)67 comentarios

Nacho Anaya

Profesor

Hace 7 años

Christian Fernandez

Hace 6 años

Juan Esteban Galvis

Jean León

Alex Camacho

Mauricio Combariza

Cristhian Daza

Roque Eduardo Gomez

Cesar Antonio

Sura Naileth Cedeño Lopez

Team Platzi

Emerson Cedeño

Fernando Vallejo

Samuel Gonzalez

Freddy Córdova Arana

Juan Pablo Cely W.

Hernán Giraldo

Paul Mauricio Realpe Guerrero

Isabella Susana

Carlos Eduardo Gomez García

David Alejandro Abreu Abreu

David Vargas Domínguez

jonathan sanchez

Hernán Arica

Juan Manuel Robledo

Fernando Mejia

Samuel Daza

Diego Cucaresse

Joel Andres Bonilla Tellez

Nicolas Villabona

Jose Flores

Introducción

Fundamentos de Vue: Componentes y Desarrollo de Aplicaciones Web

Vue.js: Desarrollo de Aplicaciones Web Profesionales

Creación de aplicaciones reactivas con Vue.js y HTML

Rendering Declarativo y Manipulación de DOM

Renderizado Declarativo en JavaScript: Estado y Vista Sincronizados

Uso de Expresiones JavaScript en Plantillas de Vue.js

Directivas para Atributos Dinámicos en HTML con Vue.js

Directivas de Renderizado Condicional en HTML con Vue.js

Uso de la Directiva v-for en Vue.js para Renderizar Listas

Manejo de Eventos en Vue.js: Click y Mouseover

Condiciones y Clases Dinámicas en Vue.js

Estilos Dinámicos en JavaScript: Cambios de Color Interactivos

Propiedades Computadas y Watchers en Vue.js

Interacción dinámica con formularios y directivas en Vue.js

"Crear un Tracker de Cursos con Vue.js"

Sistema de Componentes

Sistema de Componentes en Fren Word: Modularización y Reutilización

Creación de Componentes Personalizados en Vue.js

Comunicación entre Componentes en Vue.js: Props y Data Binding

Comunicación entre Componentes en Vue: Emisión y Manejo de Eventos

Uso de Slots para Inyectar HTML en Componentes Hijos

Ciclo de Vida de Componentes en Vue.js

Componentes de Vue: Creación y Gestión Eficiente

Componente Modal y Componente Principal en Vue.js

Ambiente de Desarrollo

Configuración Profesional de Vue.js con Visual Studio Code

Creación de Aplicaciones con Dios CLI y su Configuración Básica

Componentes de Archivo Único en Vue.js

Comandos esenciales para proyectos con Vue CLI y configuración de entorno

Platzi Exchange

Instalación y configuración de Tailwind CSS en proyectos HTML

Creación y Gestión de Componentes VUE en Proyectos Web

Creación de Aplicaciones SPA con Vue Router

Uso de Fetch API para Interactuar con Servidores HTTP

Filtros y Directivas para Mejorar Interfaces en JavaScript

Creación de Rutas Dinámicas en Vue.js para Criptomonedas

Navegación Dinámica y Programática en Vue.js

Integración de Componentes de Terceros en Proyectos Vue.js

Manejo de Problemas de Reactividad en Vue.js

Filtros y Ordenamiento en Tablas de Datos con JavaScript

Implementación de Rutas Dinámicas y Conversor de Criptomonedas en Vue.js

¡A producción!

Publicación de Aplicaciones con Git y Netlify

Rendering Declarativo y Manipulacion de DOM

Creación de Rutas Dinámicas en Vue.js para Criptomonedas