แดชบอร์ดเรียลไทม์ของ Shopify

 (bfcm.shopify.com)
2 คะแนน โดย GN⁺ 2023-11-25 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • Shopify มอบประสบการณ์แดชบอร์ดสดที่แสดงแนวโน้มการช้อปปิ้งทั่วโลกในช่วง Black Friday Cyber Monday ด้วยสถิติแบบเรียลไทม์
  • การจัดทำ Shopify x Black Friday 2025 มุ่งเน้นการแสดงกิจกรรมการช้อปปิ้งในวัน Black Friday ปี 2025 ผ่านภาพแบบลูกโลก
  • แก่นหลักของข้อมูลที่ให้คือสามารถตรวจสอบ สถิติการช้อปปิ้งทั่วโลก ที่เกิดขึ้นในร้านค้าบน Shopify ได้แบบเรียลไทม์
  • ประสบการณ์นี้จำเป็นต้องใช้ เบราว์เซอร์ที่รองรับ WebGL ดังนั้นในบางเบราว์เซอร์หรือสภาพแวดล้อมที่มีข้อจำกัด อาจไม่สามารถดูได้ทันที
  • หากอยู่ในสภาพแวดล้อมที่ใช้ WebGL ไม่ได้ จะไม่สามารถเข้าถึงภาพแสดงผลสดได้ จึงควรตรวจสอบความเข้ากันได้ของเบราว์เซอร์ก่อน

ภาพแสดงการช้อปปิ้งสดช่วง Black Friday Cyber Monday

  • หน้า bfcm.shop ของ Shopify มอบประสบการณ์ที่แสดงสถิติการช้อปปิ้งทั่วโลกในช่วง Black Friday Cyber Monday แบบเรียลไทม์
  • ชื่อหน้าคือ Shopify x Black Friday 2025: Watch The World Shop Live
  • ข้อความแนะนำระบุว่าสามารถเข้าถึง สถิติการช้อปปิ้งทั่วโลกแบบเรียลไทม์ ของ Black Friday Cyber Monday ครั้งนี้ได้บน Shopify

สภาพแวดล้อมการใช้งานที่ต้องใช้ WebGL

  • เนื้อหาในหน้าระบุให้ใช้ เบราว์เซอร์ที่รองรับ WebGL เพื่อรับชมประสบการณ์นี้
  • มีการระบุเงื่อนไขว่าในเบราว์เซอร์ที่ไม่รองรับ WebGL จะไม่สามารถดูประสบการณ์แบบสดได้

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 2023-11-25
ความคิดเห็นบน Hacker News

  • เราสร้าง แดชบอร์ด BFCM มาตลอด 10 ปีที่ผ่านมา และตอนนี้มันกลายเป็นโปรเจกต์ที่สนุกที่สุดและเป็นธรรมเนียมของ Shopify ไปแล้ว
    การดำเนินบริษัทซอฟต์แวร์บนอินเทอร์เน็ตเป็นเรื่องค่อนข้างนามธรรม แต่พอได้เห็นภาพแบบนี้ ก็ทำให้แม้แต่คนที่ทำงานที่นี่รู้สึกจับต้องได้มากขึ้นมาก
    ปีนี้เราใส่รายละเอียดสนุก ๆ ไว้เยอะมาก (https://twitter.com/Shopify/status/1728040379163771020) ถ้าร้านไหนทำยอดขายแรกได้ คุณอาจเห็นพลุ และยังมีสถิติเมืองจำนวนมากที่สร้างขึ้นบางส่วนด้วย GPT-4 บนเดสก์ท็อปสามารถเปิดเมนู nerd เพื่อเปลี่ยนการตั้งค่า และแชร์ผลลัพธ์ที่สร้างออกมาเป็นลิงก์ได้ด้วย

    • สงสัยว่า BFCM เป็นตัวย่อที่คนรู้จักกันทั่วไปหรือเปล่า รู้ว่าเกี่ยวกับ Black Friday แต่ไม่รู้ว่า CM คืออะไร และก็ไม่เห็นมีที่ไหนเขียนชื่อเต็มไว้เลย
    • งานเจ๋งมาก อยากให้เขียนบล็อกเล่า กระบวนการพัฒนา
    • สงสัยว่าทำไมการค้นหา Jerusalem, Israel ถึงถูกบล็อกไว้

  • แต่ว่า แต่ว่า… ไหนว่า Rails สเกลไม่ได้ ไง!!!!!

    • มุกก็ส่วนมุก แต่อยากรู้เรื่อง อินฟราสตรักเจอร์ ของ Shopify มากกว่านี้
      วิธีจัดการทราฟฟิกมหาศาลที่ไหลเข้ามาแบบนี้น่าทึ่งทีเดียว
    • งานหนักจริง ๆ อาจถูกทำโดยอะไรอย่าง Java/Go/Rust ก็ได้
    • หน้านี้ตอบคำถามนั้นไม่ได้ เพราะไม่ได้บอกว่าใช้ เซิร์ฟเวอร์กี่เครื่อง ในการรองรับสิ่งนี้
    • จากแดชบอร์ดตอนนี้อยู่ที่ราว 25,000 ออร์เดอร์ต่อนาที หรือประมาณ 400 รายการ/วินาที
      สำหรับเซิร์ฟเวอร์สมัยใหม่ ปริมาณเท่านี้ควรต้องใช้ทรัพยากรไม่ถึง 1% ด้วยซ้ำ

  • น่าทึ่งว่า ความมั่งคั่งของโลกกระจุกตัว มากแค่ไหน

    • เขตเวลา ก็อาจเป็นปัจจัยหนึ่ง และ Black Friday เดิมทีเริ่มจากปรากฏการณ์ในสหรัฐฯ แล้วถูกส่งออกไป
      แปลกใจมากที่ละตินอเมริการับเอาไปมากขนาดไหน เช่น เลือกประเทศไหนก็ได้จากรายการของ Mercado Libre[0] ก็จัด Black Friday กันหมด ไม่ได้ใช้คำว่า “Viernes Negro” แต่ใช้คำว่า “Black Friday” จริง ๆ

      [0] https://mercadolibre.com/

    • ดูเหมือนจะแสดงให้เห็นมากกว่าว่า Shopify แพร่หลายในประเทศไหนมากที่สุด

    • Black Friday โดยรวมเป็นวัฒนธรรมอเมริกัน และบริษัทอเมริกันพยายาม ส่งออกมันไปยุโรป

    • ตอนที่ผมดู (ราว 18:00 GMT) น่าสนใจที่ ทราฟฟิกจากสหราชอาณาจักร มากกว่าพื้นที่อื่นในยุโรปอย่างเห็นได้ชัด
      ดูภาพ: https://i.imgur.com/2Les0QX.png

      จะสรุปได้ไหมว่า Brexit คือเหตุผล?

    • มองกลับกัน ก็อาจพูดได้ว่าอีกหลายพื้นที่ของโลก คอร์รัปชัน และ ต่อต้านทุนนิยม มากแค่ไหน
      เผด็จการไม่อยากให้ผู้ถูกปกครองได้ใช้ศักยภาพของตัวเอง เพราะถ้าเป็นเช่นนั้นจะคุกคามสภาพเดิมและตำแหน่งของพวกเขา

  • สงสัยว่าเกณฑ์ของสถิติ “Carbon Removed” คืออะไร

    • ตลกดีนะ น่าจะเรียกว่า คาร์บอนที่เพิ่มขึ้น จากการบริโภคที่ไม่จำเป็นซึ่ง Shopify ทำให้ง่ายขึ้นมากกว่า

    • https://www.shopify.com/climate/bfcm เป็นลิงก์ที่ขึ้นมาเมื่อคลิกสถิตินั้นบนแดชบอร์ด

      คำสั่งซื้อทั้งหมดที่ทำผ่านแพลตฟอร์มของเราในช่วงสุดสัปดาห์ช้อปปิ้ง Black Friday Cyber Monday จะจัดส่งแบบเป็นกลางทางคาร์บอน

      วิธีการทำงานคือ: สูตรคำนวณที่เข้มงวดซึ่งสร้างโดยนักวิทยาศาสตร์ข้อมูลของ Shopify จะคำนวณการปล่อยคาร์บอนโดยประมาณสำหรับการจัดส่ง Black Friday Cyber Monday แต่ละรายการ จากนั้นเราจะร่วมมือกับพาร์ตเนอร์ของ Shopify Sustainability Fund เพื่อกำจัดการปล่อย CO2 ในปริมาณเท่ากับรอยเท้าคาร์บอนจากการจัดส่งช่วง BFCM

      ผลลัพธ์คือ? คุณมั่นใจได้ว่าการจัดส่งคำสั่งซื้อ BFCM ทั้งหมดของคุณเป็นกลางทางคาร์บอน

    • โดยพื้นฐานคือจ่ายเงินให้คนอื่นทำ “การกำจัดคาร์บอน” แล้วเอาตัวเลขมหัศจรรย์นั้นมาใส่ไว้ตรงนี้

    • มีคำวิจารณ์สถิติ Carbon Removed ในเธรดนี้และที่อื่น ๆ เยอะ แต่แทนที่จะวิจารณ์แค่เพราะบริษัทขนาดนี้ทำอะไรสักอย่าง อยากเห็นคำวิจารณ์เชิงสร้างสรรค์ที่เสนอว่า จะทำให้ดีกว่านี้ได้อย่างไร มากกว่า
      ส่วนตัวแล้ว ถ้าไม่ได้ชดเชยเป็นสองเท่าของปริมาณคาร์บอนจากการจัดส่งจริง ๆ ก็ไม่อยากให้เรียกว่า carbon removed และถ้า Shopify ไม่ได้ซื้อทั้งหมดจากพาร์ตเนอร์ด้านการดักจับอากาศโดยตรง ก็ควรเรียกว่า offset มากกว่า

    • เป็นองค์ประกอบเท่ ๆ ที่เหมาะจะใส่ไว้บนเว็บไซต์บริษัท

  • Shopify สเกลมาถึงระดับนี้ได้ด้วย โมโนลิธ Ruby on Rails และบริการ Go/Rust อีกไม่กี่ตัว
    น่าประทับใจมาก

  • เจ๋งมาก และต่างจากของฝั่ง Stripe ตรงที่เบราว์เซอร์ไม่ตายหรือกระตุกบนอุปกรณ์
    ข้อมูลเมือง เป็นส่วนเสริมที่ดี แต่ก็น่าหงุดหงิดที่เมืองส่วนใหญ่ที่ผมค้นหามีข้อมูลไม่พอ แม้ว่าจะโผล่ในรายการแนะนำก็ตาม อย่างไรก็ดี ตัวเลือกปรับแต่งเล่นสนุกดี โดยเฉพาะ airplane mode เป็นรายละเอียดที่ดีมาก

  • ผลลัพธ์จริงก็น่าประทับใจอยู่แล้ว แต่ที่น่าทึ่งยิ่งกว่าคือมันรันได้ลื่นบน iPhone SE ปี 2016

  • สงสัยว่าใช้ไลบรารีอะไรสำหรับ การเรนเดอร์ลูกโลก ฝั่งฟรอนต์เอนด์
    บนเบราว์เซอร์ Chrome ค่อนข้างเร็วและไม่กระตุก

    • สร้างขึ้นตั้งแต่ต้นด้วย React Three Fiber ซึ่งเป็นไลบรารี React ที่อยู่บน three.js เป็นเฟรมเวิร์กที่ทรงพลังมาก
      จะโพสต์บทวิเคราะห์ทางเทคนิคทั้งหมดในอีกไม่กี่สัปดาห์ข้างหน้า
    • น่าจะเป็น three.js
      อาจคล้ายกับอันนี้: https://github.com/vasturiano/three-globe

  • ถ้าไม่นับตัวลูกโลกเอง การเคลื่อนไหวส่วนใหญ่ในแอนิเมชันนี้คือ เอฟเฟกต์ตัวเลขเด้งวุ่นวาย ตอนที่ตัวเลข “sales per minute”, “unique shoppers”, “orders per minute”, “carbon removed” เปลี่ยน
    จริง ๆ แล้วตัวเลขเหล่านี้อัปเดตแค่ทุก 10 วินาที แต่ตัวเลขถูกสลับมั่ว ๆ อยู่ 8 วินาทีจาก 10 วินาทีโดยไม่มีความหมายอะไร นอกจากทำให้ดูยุ่ง

    ไม่ควรทำแบบนั้น

    อย่าบิดเบือนข้อมูล อย่าทำให้อ่านยาก และอย่าเปลืองความสนใจทางสายตาของผู้ใช้ไปกับสิ่งที่ไม่สำคัญ ควรใช้กับสิ่งที่มีความหมาย

  • ว้าว การปรับแต่ง นี่สุดยอดมาก
    ถ้าบินไปรอบ ๆ ด้วย airplane mode จะดูเหมือนสนามรบเลย