Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Shopify Storefront APIを使った PWA e-commerceの解説とデモ

benzookapi
October 16, 2021

Shopify Storefront APIを使った PWA e-commerceの解説とデモ

benzookapi

October 16, 2021
Tweet

More Decks by benzookapi

Other Decks in Technology

Transcript

  1. • Junichi Okamura, Sr. Technical Partner Manager at Shopify •

    @benzookapi • API Lover/Midnight Developer/MANGA Creator/Beer Lover/App Hacker Who am I?
  2. Shopify͸Ϋϥ΢υϕʔεͷίϚʔεϓϥοτϑΥʔϜͰ͢ɻݸਓͷํ͔Β େاۀ·Ͱ҆৺ͯ͠͝ར༻͍͚ͨͩ·͢ɻ 2006 Shopify ϩʔϯν $2,9B ऩӹֹ (աڈ12ϱ݄) 6,000+ ΞϓϦετΞʹެ։͞Ε͍ͯΔΞϓϦͷ਺

    $277B ࣄۀऀ༷ͷGMV (ྦྷܭ) 4.9 million ళฮͷελοϑΞΧ΢ϯτ਺ 1,700,000+ ళฮ —— 175ϱࠃ~ 7,000+ ࣾһ਺ Shopifyʹ͍ͭͯ ׬શϦϞʔτԽ Digital by defaultͷ΋ͱ2020೥຤·Ͱ͸ΦϑΟεΛ׬શΫϩʔζ
  3. ൚༻ੑ͕ߴࣗ͘༝౓ͷߴ͍ΧελϚΠζ͕Մೳ ෳ਺։ൃݴޠͰࣗ༝ͳΧελϚΠζΛՄೳͱ͢Δ๛෋ͳAPI Access APIs Inventory APIs Product APIs Analytics APIs

    MarketingEvent Sales channel APIs Billing APIs Meta f ield Shipping and ful f illment APIs Customer APIs Online store APIs Shopify Payments APIs Discount APIs Order APIs Store property APIs Event APIs Plus APIs TenderTransaction
  4. 27 ͳͥ PWA͔ʁ • ϞόΠϧϑΝʔετԽ͖͍ͯͯ͠ΔECͷτϨϯυͱ૬ ੑ͕ྑ͍ • ΢ΣϒΞϓϦͷࣗ༝͞ͱωΠςΟϒΞϓϦͷ৴པੑͷ ͍͍ͱ͜ͲΓ͕Ͱ͖Δ •

    CMSΛ࢖͏ΑΓUXͷࣗ༝౓͕ߴ͘࠷దԽ͠΍͍͢ • ΦϑϥΠϯ࣌ͷػձଛࣦͷϦΧόϦʔʢҠಈதʹߪೖ ͳͲʣ
  5. 31 σϞ Storefront API full client side demo PWAԽ͢Δ࣌ͷ஫ҙ఺ɿ ɹStorefront

    API͸ CORSରԠ͍ͯ͠ͳ͍ => ΫϥΠΞϯτ͔Β௚઀ ݺ΂ͳ͍ͷͰ αʔόʔϨΠϠʔඞཁ ΍ͬͯΈͨ͜ͱɿ ShopifyͷCDN͔Βͩͱ CORSΛ௒͑ͯ௚઀ݺ΂Δ => ΞϓϦΠϯετʔϧ࣌ʹ File APIͰϥούʔJSΛ CDNʹొ࿥͠ɺ ΫϥΠΞϯτ͔Β௚઀ ݺ΂ΔΑ͏ʹͯ͠Έͨ ຊ౰͸PWAͷ ϑϧΫϥΠΞϯτ Ͱด͍ͨ͡ͳ͋ ɾɾɾ
  6. 32 Storefront APIͷRate Limit ؾΛ͚ͭΔͱ͜Ζ Storefront APIͷݺͼग़੍͠ݶ͸ ݺͼग़͠ݩͷIPΞυϨε୯ҐͰ ੍ݶ͞ΕΔͷͰɺ ΞΫηε͕ଟ͍৔߹͸

    ΫϥΠΞϯτʢϒϥ΢βʣ΍ IP͕͍͔ͭ͘ʹׂΓৼΒΕΔ αʔόʔͰͷར༻͕๬·͍͠ ʢϞόΠϧΞϓϦͷ৔߹͸ SDKΛ࢖ͬͯΞϓϦ಺ͰݺͿʣ