ticketmaster workshop

Taller de ticketmaster

Recientemente volé a Los Ángeles e hice un taller de GraphQL en Ticketmaster donde todos crearon una API GraphQL de JavaScript. Todos siguieron usando Launchpad, una herramienta que le permite experimentar con servidores GraphQL en su navegador. Afortunadamente, el taller fue grabado, ¡así que tú también puedes probarlo!

Esto es lo que aprenderá:

1. Burlándose de un esquema GraphQL
2. Mostrar datos de una matriz
3. Obteniendo de una API REST
4. Obtención de múltiples puntos finales REST en una consulta GraphQL
5. Creación de una interfaz de usuario sencilla con React y Apollo Client

El video hace referencia a un documento de Quip que preparé, pero todo ese contenido se reproduce aquí en este README. Espero volver a grabar pronto una versión de esto más optimizada para el consumo de Internet, pero quién sabe cuánto tiempo pasará antes de que tenga tiempo, así que pensé en publicar esto primero. ¡Adelante, míralo!

Aquí hay algunas cosas que deberá hacer de inmediato:

• Obtenga una clave API aquí: http://developer.ticketmaster.com/
• ¡Abre Launchpad e inicia sesión! https://launchpad.graphql.com/new

mis artistas favoritos

Y sus ID de atracción de la API de Ticketmaster:

• Kansas: K8vZ9171C-f
• Lil Yachty: K8vZ9174v57
• Jason Mraz: K8vZ9171CVV

consulta deseada

Esta es la consulta que queremos poder obtener de nuestra nueva API GraphQL:

{
  myFavoriteArtists {
    id ,
    name
    image
    twitterUrl
    events {
      name
      image
      startDateTime
    }
  }
}

esquema deseado

Este es un esquema que cumplirá la consulta anterior:

  type Query {
    myFavoriteArtists : [ Artist ]
  }

  type Artist {
    id : ID
    name : String
    image : String
    twitterUrl : String
    events : [ Event ]
  }

  type Event {
    name : String
    image : String
    startDateTime : String
  }

La clave de la respuesta

Haga clic en estos enlaces para ver las API terminadas en Launchpad:

• Burlado: https://launchpad.graphql.com/z4lnp9j37
• Burlado con lista de artistas: https://launchpad.graphql.com/p380l5rx0
• Obtenga detalles del artista desde API: https://launchpad.graphql.com/831vp05qq
• Obtenga los próximos eventos de la API: https://launchpad.graphql.com/9pw9nnkjr
• Interfaz de usuario con Expo Snack: https://snack.expo.io/BJpiF0SfW

Puntos finales

Estos son los puntos finales REST en la API de Ticketmaster que queremos obtener.

URL

 // Look up artist details
`https://app.ticketmaster.com/discovery/v2/attractions/ ${ id } .json?apikey= ${ context . secrets . TM_API_KEY } `

// Look up events for an artist
`https://app.ticketmaster.com/discovery/v2/events.json?size=10&apikey= ${ context . secrets . TM_API_KEY } &attractionId= ${ id } `

Código

 // Artist details
return fetch ( `https://app.ticketmaster.com/discovery/v2/attractions/ ${ id } .json?apikey= ${ context . secrets . TM_API_KEY } ` )
  . then ( res => res . json ( ) )

// Events
return fetch ( `https://app.ticketmaster.com/discovery/v2/events.json?size=10&apikey= ${ context . secrets . TM_API_KEY } &attractionId= ${ id } ` )
  . then ( res => res . json ( ) )

Documentos detallados de la API de Ticketmaster: http://developer.ticketmaster.com/products-and-docs/apis/discovery-api/v2/#attraction-details-v2

Talleres

Si está interesado en realizar un taller GraphQL como este en su empresa, ¡no dude en enviarme un correo electrónico a [email protected] !