ticketmaster workshop

チケットマスターのワークショップ

私は最近ロサンゼルスに飛び、Ticketmaster で GraphQL ワークショップを行い、全員が JavaScript GraphQL API を構築しました。全員が、ブラウザーで GraphQL サーバーを実験できるツールである Launchpad を使用して作業を進めました。ありがたいことに、ワークショップの様子は録画されているので、ぜひ試してみてください。

ここで学べる内容は次のとおりです。

1. GraphQL スキーマのモック化
2. 配列からのデータの表示
3. REST APIからの取得
4. 1 つの GraphQL クエリで複数の REST エンドポイントからフェッチする
5. React と Apollo クライアントを使用してシンプルな 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] )。