Introducción

1

Desarrollo de Aplicaciones Profesionales con VueJS

2

VueJS: Creación y Desarrollo de Aplicaciones Web Progresivas

CLI y Dev Tools

3

Herramientas esenciales para desarrollar con BioJS y NodeJS

4

Creación de una Aplicación Vue.js con CLI y Webpack Simple

5

Configuración y uso de Webpack en proyectos JavaScript

6

Configuración y uso de Babel para compatibilidad JavaScript

7

Configuración de eSlimt con EstándarJS y Webpack

8

Integración de SaaS y Bulma en Aplicaciones Vue.js

9

Configuración de Pag para optimizar el workflow de desarrollo HTML

10

Diseño de Mockups: Práctica y Colaboración en Comunidad

11

Creación de Vistas con Mockups y Vue.js

Manipulación del DOM

12

Expresiones en Vue: Manipulación Dinámica del DOM

13

Directivas de Vue: Uso y Funciones Principales

14

Data Binding y Directivas en Vue: bmodel y bevined

15

Propiedades Computadas en JavaScript: Creación y Uso Práctico

16

Uso de Watchers en Biomóvil para Gestión de Cambios de Propiedades

17

Manipulación de Eventos y Métodos en Aplicaciones Web

18

Creación de Interfaz con Vue.js y Framework CSS Bulma

19

Manipulación del DOM con Vue.js: Práctica y Ejercicios

REST y HTTP

20

Integración de Servicios HTTP con JavaScript y API Fetch

21

Uso de la librería Trae para peticiones HTTP con Fetch API en JavaScript

22

Integración de Servicios en Vue.js: Uso de API y Mejora de Código

Sistema de Componentes

23

Creación y Registro de Componentes en Vue.js

24

Creación de Componentes en Vue.js con Bulma para Platzi Music

25

Reactividad y Virtual DOM en Vue.js: Conceptos y Soluciones

26

Ciclo de Vida de Componentes en Vue.js: Hooks y Ejecución de Código

27

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

28

Comunicación entre Componentes en Vue: Eventos de Hijo a Padre

29

Uso de Slots para Inyección Dinámica de HTML en Componentes Vue

30

Comunicación entre Componentes Vue con Event Bus y Plugins

Vue Router

31

Vue Router: Creación de Single Page Applications

32

Instalación y Configuración de Vue Router en Aplicaciones Vue.js

33

Navegación de Rutas con Vue Router en Aplicaciones SPA

Extendiendo VueJS

34

Uso de Modifiers en VueJS para Mejorar Funcionalidad de Eventos

35

Filtros en Vue: Formateo de Duraciones de Canciones en Componentes

36

Creación de Directivas Personalizadas en Vue.js

37

Reutilización de Funcionalidad con Mixins en VueJS

Clases, Animaciones y Transiciones36

38

Integración de Animaciones CSS3 en Aplicaciones VueJS

Vuex

39

Gestión de Estados Centralizados con la Librería BuX

40

Integración de VueX y arquitectura Flux en Vue.js

41

Mutaciones en Vuex: Gestión y Actualización del Estado Reactivo

42

Uso de Getters en Vuex para Acceso Personalizado de Estado

43

Acciones asincrónicas en Vuex: cómo implementarlas y utilizarlas

44

Integración de VueX y Babel en PlatziMusic

Nuxt.js

45

Renderizado del Lado del Servidor con Vue.js y Nuxt

46

Creación de Proyectos con Nact.js en Vue para Server-Side Rendering

47

Integración de VueJS con Nuxt para Server-Side Rendering

Deploy a Producción con Now

48

Despliegue de Aplicaciones con NOW en BIOS JS

49

Despliegue de Aplicaciones Node.js con NOW y Webpack

Conclusiones

50

Construcción de Aplicaciones Profesionales con Vue.js

Bonus

51

Internacionalización de Aplicaciones con Vue I18n

52

Pruebas Unitarias con Vue.js y Webpack: Configuración y Ejecución

53

Autenticación en Vue.js con JSON Web Tokens (JWT)

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Uso de la librería Trae para peticiones HTTP con Fetch API en JavaScript

21/53
Recursos

¿Qué es Fetch API y por qué se usa?

Fetch API es una interfaz moderna que permite realizar peticiones HTTP de manera más sencilla y manejable comparado con el método antiguo XMLHttpRequest. Sin embargo, no está completamente soportada en todos los navegadores, lo que lleva a utilizar librerías como Trae, que actúan como intermediarios para facilitar su uso y asegurar compatibilidad.

¿Por qué usar Trae?

  • Compatibilidad: Asegura que la API de Fetch funcione incluso en navegadores que todavía no la soportan completamente.
  • Funcionalidad extendida: Proporciona métodos simplificados para manejar peticiones HTTP sin leerse extenso código repetitivo.
  • Conveniencia: Facilita la centralización de las configuraciones, como la base URL, permitiendo que solamente se tenga que proporcionar el endpoint específico para cada petición.

¿Cómo instalar y configurar Trae?

Para usar la librería Trae en tus proyectos de JavaScript, el primer paso es instalarla. La instalación es bastante sencilla con npm, y aquí te mostramos cómo hacerlo:

npm install trae --save

Este comando agrega Trae como una dependencia de producción, garantizando su uso en entorno de desarrollo y producción. Luego, en tu proyecto, puedes importar y configurar Trae como sigue:

import trae from 'trae';
import configService from './config';

const platzymusicService = trae.create({
  baseUrl: configService.apiUrl,
});

export default platzymusicService;

¿Cómo funciona la importación y configuración?

  1. Importación: Se utiliza la sintaxis de importación de ESMAScript 6 para traer la librería y otros servicios.
  2. Creación de instancia: Se crea una instancia de Trae usando trae.create(), donde se pasa la baseUrl que será usada por todas las peticiones HTTP.
  3. Consistencia en nombrado: Asegúrate de que las variables sean consistentes con las denominaciones utilizadas, como es el caso de apiUrl con la U en mayúscula.

¿Cómo crear un servicio para manejar peticiones?

Es crucial poder estructurar bien las interacciones con la API, y crear servicios es una manera efectiva de lograrlo. Aquí te mostramos cómo podrías crear un servicio llamado TrackService:

import platzymusicService from './platzymusicService';

const trackService = {
  search(q) {
    const type = 'track';
    return platzymusicService.get('/search', {
      params: { q, type },
    }).then(response => response.data);
  },
};

export default trackService;

Explicación de la implementación

  • Parámetros: Se usa q para la query y type predefinido como 'track' para limitar la búsqueda a canciones.
  • Método GET: Utilizando platzymusicService, se hace un GET a /search con los parámetros incorporados.
  • Promesas: Devuelve una promesa que maneja el then, asegurando que la respuesta de la API se encuentre disponible para quien llame a search.

Este enfoque modular permite reutilizar configuraciones y funciones para futuras integraciones, llamando siempre al servicio adecuado para tipos de contenido específicos. ¿Necesitas buscar artistas o álbumes? Solo crea un método similar siguiendo este patrón en el TrackService. Es una forma eficiente y organizada de gestionar las interacciones con la API.

¿Quieres saber cómo integrar estos servicios con tus componentes? ¡Sigue adelante y descubre cómo mejorar la interacción con tus usuarios!

Aportes 22

Preguntas 7

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

“trae” lleva 3 años desde la ultima actualización, no lo usan ni sus creadores seguramente.
Clase completamente Innecesaria, al día de hoy Axios es casi la librería oficial de Vue,

pienso que en esta clase no era necesario usar trae, considero que debemos usar axios

Las clases 21 y 22 no están ordenadas, deberían ir al revés

De esta forma lo realice con fetch, siguiente el curso anterior
ARCHIVO : config.js

const configService = { apiUrl: "https://platzi-music-api.herokuapp.com" };
export default {
  configService,
};

ARCHIVOS : app-music.js

import config from "./config";

const getTrackForName = async (name) => {
  try {
    const rawData = await fetch(
      `${config.configService.apiUrl}/search?q=${name}&type=track`
    );
    const jsonData = await rawData.json();
    return jsonData;
  } catch (error) {
    return "Error: " + error;
  }
};

export default {
  getTrackForName,
};

¿en que curso puedo encontrar más bases para entender estas clases?

Considero innecesario realizar tantos archivos exportando e importando en otros. Digo ¿Cuál es el punto? ¿Demostrar que sabemos ES6? Bien pudo colocarse en un sólo archivo y la clase hubiera sido más corta, útil y concisa.

Además de que la libreria TRAE tiene mucho tiempo sin actualizarse. Ojala Platzi actualice pronto este curso por una nueva versión.

Empece a usar axios espero no estar mal en esta parte…

Me gusta el termino Javascript Pelado, lo añadiré a mi vocabulario

Si trae trabaja con Fetch y Axios trabaja con XMLHttpRequest, ¿como le hace cuando el navegador no soporta dicha caracteristica?, me imagino que igual usa el clasico XMLHttpRequest

He usado axios en varios proyectos, ya que es muy popular, sin embargo, me convencio mucho trae, es muy optima y fácil, insto a todos los colegas a apoyar este desarrollo, ya que es echo por latinos, gracias Nacho por compartir !!!

Este curso necesita un update urgente!!!

el uso de trae no me a gustado para nada, pero me di cuenta que esta usando la API de spootify, mejor lean la doc de spootify y lo integran a su proyecto

Y si yo quiero hacerlo normalito, sin ninguna libreria x.x?

¿A día de hoy sigue siendo una buena alternativa usar Trae.js? Me refiero a que Axios sigue usando XMLHttpRequests hasta ahora, pero es un poco más activo en Github que Trae.js

¿cuál es el benficio de trae sobre axios?

En el curso basico de vue la version mas reciente, nos muestra como podemos hacer uso de la api fetch sin tener q instalar ninguna libreria.

Para ser una aplicacion react 20 videos de codificacion y no he visto nada para la interface grafica de usuario 😦

el ejemplo esta bien pero para ser una aplicacion React …me hubiera gustado que cada componente lo fuera codificando y viendose en interface grafica para ver como va quedando y no solo ver codigo y mas codigo para al final ver una app realizada

Tengo una pregunta, usando Trae ¿podría editar modificar y eliminar registros de una API no es así? ¿o estoy equivocado? gracias por su ayuda.

Platzi me esta defraudando con el contenido de este curso.

  • Primero el titulo indica que se va a tocar el tema de Fetch API pero no hace nada mas que nombrarlo.

  • Segundo se usa una librería que no esta extendida y que tiene tiempo sin ser actualizada.

Así se crea mucha fricción al aprender un tema.

WTF esta clase iba antes 😮

Les dejo el codigo con axios para los que prefieren este metodo:

Este es el fichero de config:

const configService = {
  apiUrl: "https://platzi-music-api.herokuapp.com",
};

export default configService;

este es el fichero para la funcion de busqueda:

const fetchTrackByName = async (searchQuery) => {
  try {
    const res = await axios
      .get(`${configService.apiUrl}/search?q=${searchQuery}&type=track`)
      .then((res) => res.data);
    return res;
  } catch (error) {
    console.log(error);
  }
};```

Este es el metodo dentro de nuestro componente App:

handleSearch(){
if(!this.searchQuery) return
fetchTrackByName(this.searchQuery)
.then(res => {
this.tracks = res.tracks.items
})
}