ticketmaster workshop

티켓마스터 워크숍

저는 최근 LA로 날아가서 Ticketmaster에서 모두가 JavaScript GraphQL API를 구축하는 GraphQL 워크숍을 진행했습니다. 모두가 브라우저에서 GraphQL 서버를 실험할 수 있는 도구인 Launchpad를 사용하여 따라했습니다. 다행히 워크숍이 녹화되었으니 여러분도 도전해 보세요!

배울 내용은 다음과 같습니다.

1. GraphQL 스키마 모의
2. 배열의 데이터 표시
3. REST API에서 가져오기
4. 하나의 GraphQL 쿼리로 여러 REST 엔드포인트에서 가져오기
5. React와 Apollo Client를 사용하여 간단한 UI 구축

비디오는 제가 준비한 Quip 문서를 참조하지만 해당 콘텐츠는 모두 이 README에 재현되어 있습니다. 조만간 인터넷 소비에 최적화된 버전으로 다시 녹음하고 싶지만 시간이 얼마나 걸릴지 모르기 때문에 먼저 올려야겠다고 생각했습니다. 가서 시청하세요!

즉시 수행해야 할 작업은 다음과 같습니다.

• 여기에서 API 키를 받으세요: http://developer.ticketmaster.com/
• Launchpad를 열고 로그인하세요! https://launchpad.graphql.com/new

내가 좋아하는 아티스트

Ticketmaster API 명소 ID는 다음과 같습니다.

• 캔자스: K8vZ9171C-f
• 릴 야티: K8vZ9174v57
• 제이슨 므라즈: K8vZ9171CVV

원하는 쿼리

이것은 새로운 GraphQL API에서 가져올 수 있는 쿼리입니다.

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

원하는 스키마

이는 위의 쿼리를 수행하는 스키마입니다.

  type Query {
    myFavoriteArtists : [ Artist ]
  }

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

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

답안

Launchpad에서 완성된 API를 보려면 다음 링크를 클릭하세요.

• 조롱: https://launchpad.graphql.com/z4lnp9j37
• 아티스트 목록으로 조롱: https://launchpad.graphql.com/p380l5rx0
• API에서 아티스트 세부 정보 가져오기: https://launchpad.graphql.com/831vp05qq
• API에서 예정된 이벤트 가져오기: https://launchpad.graphql.com/9pw9nnkjr
• Expo Snack이 포함된 UI: https://snack.expo.io/BJpiF0SfW

엔드포인트

이는 우리가 가져오려는 Ticketmaster API의 REST 엔드포인트입니다.

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

암호

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

Ticketmaster API의 세부 문서: http://developer.ticketmaster.com/products-and-docs/apis/discovery-api/v2/#attraction-details-v2

워크샵

귀하의 회사에서 이와 같은 GraphQL 워크숍에 참여하고 싶다면 주저하지 말고 [email protected] 으로 이메일을 보내주세요!