ticketmaster workshop

Atelier Ticketmaster

J'ai récemment pris l'avion pour Los Angeles et suivi un atelier GraphQL chez Ticketmaster où tout le monde a construit une API JavaScript GraphQL. Tout le monde a suivi en utilisant Launchpad, un outil qui vous permet d'expérimenter les serveurs GraphQL dans votre navigateur. Heureusement, l'atelier a été enregistré, vous pouvez donc l'essayer vous aussi !

Voici ce que vous apprendrez :

1. Se moquer d'un schéma GraphQL
2. Afficher les données d'un tableau
3. Récupération à partir d'une API REST
4. Récupération à partir de plusieurs points de terminaison REST dans une seule requête GraphQL
5. Créer une interface utilisateur simple avec React et Apollo Client

La vidéo fait référence à un document Quip que j'ai préparé, mais tout ce contenu est reproduit ici dans ce README. J'espère réenregistrer bientôt une version plus optimisée pour la consommation Internet, mais qui sait combien de temps il me faudra avant d'avoir le temps, alors j'ai pensé que je mettrais ceci en premier. Allez-y et regardez-le !

Voici certaines choses que vous devrez faire immédiatement :

• Obtenez une clé API ici : http://developer.ticketmaster.com/
• Ouvrez Launchpad et connectez-vous ! https://launchpad.graphql.com/new

Mes artistes préférés

Et leurs identifiants d’attraction de l’API Ticketmaster :

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

Requête souhaitée

C'est la requête que nous voulons pouvoir récupérer à partir de notre nouvelle API GraphQL :

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

Schéma souhaité

Il s'agit d'un schéma qui répondra à la requête ci-dessus :

  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 clé de réponse

Cliquez sur ces liens pour voir les API terminées dans Launchpad :

• Moqué : https://launchpad.graphql.com/z4lnp9j37
• Moqué avec la liste des artistes : https://launchpad.graphql.com/p380l5rx0
• Récupérer les détails de l'artiste depuis l'API : https://launchpad.graphql.com/831vp05qq
• Récupérez les événements à venir depuis l'API : https://launchpad.graphql.com/9pw9nnkjr
• Interface utilisateur avec Expo Snack : https://snack.expo.io/BJpiF0SfW

Points de terminaison

Ce sont les points de terminaison REST de l'API Ticketmaster à partir desquels nous souhaitons récupérer.

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 } `

Code

 // 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 ( ) )

Documents détaillés de l'API Ticketmaster : http://developer.ticketmaster.com/products-and-docs/apis/discovery-api/v2/#attraction-details-v2

Ateliers

Si vous souhaitez organiser un atelier GraphQL comme celui-ci dans votre entreprise, n'hésitez pas à m'envoyer un e-mail à [email protected] !