Codelab: การสร้างคอมโพเนนต์เรื่องราว

Adam Argyle

Codelab นี้จะสอนวิธีสร้างประสบการณ์การใช้งานแบบ Instagram Stories บนเว็บ เราจะสร้างคอมโพเนนต์ไปเรื่อยๆ โดยเริ่มจาก HTML, CSS และ JavaScript

อ่านบล็อกโพสต์การสร้างคอมโพเนนต์เรื่องราวเพื่อดูข้อมูลเกี่ยวกับการปรับปรุงอย่างต่อเนื่องที่เกิดขึ้นขณะสร้างคอมโพเนนต์นี้

ตั้งค่า

  1. คลิกรีมิกซ์เพื่อแก้ไขเพื่อทำให้โปรเจ็กต์แก้ไขได้
  2. เปิด app/index.html

HTML

ฉันตั้งใจใช้ HTML เชิงความหมายเสมอ เนื่องจากเพื่อนแต่ละคนจะมีเรื่องราวกี่เรื่องก็ได้ เราจึงคิดว่าการใช้องค์ประกอบ <section> สำหรับเพื่อนแต่ละคนและองค์ประกอบ <article> สำหรับเรื่องราวแต่ละเรื่องน่าจะเหมาะสม แต่เรามาเริ่มกันตั้งแต่ต้นกัน ก่อนอื่น เราต้องมีคอนเทนเนอร์สำหรับคอมโพเนนต์เรื่องราว

เพิ่มองค์ประกอบ <div> ลงใน <body>

<div class="stories">

</div>

เพิ่มองค์ประกอบ <section> เพื่อแสดงเพื่อน:

<div class="stories">
  <section class="user"></section>
  <section class="user"></section>
  <section class="user"></section>
  <section class="user"></section>
</div>

เพิ่มองค์ประกอบ <article> บางส่วนเพื่อแสดงเรื่องราว

<div class="stories">
  <section class="user">
    <article class="story" style="--bg: url(https://picsum.photos/480/840);"></article>
    <article class="story" style="--bg: url(https://picsum.photos/480/841);"></article>
  </section>
  <section class="user">
    <article class="story" style="--bg: url(https://picsum.photos/481/840);"></article>
  </section>
  <section class="user">
    <article class="story" style="--bg: url(https://picsum.photos/481/841);"></article>
  </section>
  <section class="user">
    <article class="story" style="--bg: url(https://picsum.photos/482/840);"></article>
    <article class="story" style="--bg: url(https://picsum.photos/482/843);"></article>
    <article class="story" style="--bg: url(https://picsum.photos/482/844);"></article>
  </section>
</div>
  • เรากำลังใช้บริการรูปภาพ (picsum.com) เพื่อช่วยสร้างต้นแบบเรื่องราว
  • แอตทริบิวต์ style ใน <article> แต่ละรายการเป็นส่วนหนึ่งของเทคนิคการโหลดตัวยึดตำแหน่ง ซึ่งคุณจะดูข้อมูลเพิ่มเติมได้ในส่วนถัดไป

CSS

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

.stories

สำหรับคอนเทนเนอร์ <div class="stories"> เราต้องการคอนเทนเนอร์แบบเลื่อนแนวนอน ซึ่งสามารถทำได้ดังนี้

  • การเปลี่ยนคอนเทนเนอร์เป็นตารางกริด
  • การตั้งค่าบุตรหลานแต่ละคนให้เติมแทร็กแถว
  • ทำให้ความกว้างขององค์ประกอบย่อยแต่ละรายการเท่ากับความกว้างของวิวพอร์ตอุปกรณ์เคลื่อนที่

ตารางกริดจะวางคอลัมน์ใหม่ที่มีความกว้าง 100vw ถัดจากคอลัมน์ก่อนหน้าไปเรื่อยๆ จนกว่าจะวางองค์ประกอบ HTML ทั้งหมดในมาร์กอัป

Chrome และเครื่องมือสำหรับนักพัฒนาเว็บจะเปิดขึ้นพร้อมภาพตารางกริดที่แสดงเลย์เอาต์แบบเต็มความกว้าง
เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome แสดงคอลัมน์ตารางกริดที่แสดงเกิน ทำให้มีการเลื่อนแนวนอน

เพิ่ม CSS ต่อไปนี้ที่ด้านล่างของ app/css/index.css

.stories {
  display: grid;
  grid: 1fr / auto-flow 100%;
  gap: 1ch;
}

เมื่อเรามีเนื้อหาที่ยื่นออกไปนอกวิวพอร์ตแล้ว ก็ถึงเวลาบอกคอนเทนเนอร์ว่าจะจัดการเนื้อหานั้นอย่างไร เพิ่มบรรทัดโค้ดที่ไฮไลต์ลงในชุดกฎ .stories

.stories {
  display: grid;
  grid: 1fr / auto-flow 100%;
  gap: 1ch;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior: contain;
  touch-action: pan-x;
}

เราต้องการการเลื่อนแนวนอน ดังนั้นเราจะตั้งค่า overflow-x เป็น auto เมื่อผู้ใช้เลื่อน เราต้องการให้คอมโพเนนต์หยุดอยู่ที่เรื่องราวถัดไปอย่างนุ่มนวล ดังนั้นเราจะใช้ scroll-snap-type: x mandatory อ่านเพิ่มเติมเกี่ยวกับ CSS นี้ในส่วนจุดหยุดของ CSS และ overscroll-behavior ของบล็อกโพสต์

ทั้งคอนเทนเนอร์หลักและคอนเทนเนอร์ย่อยต้องยอมรับการเลื่อนแบบ Snap เรามาจัดการเรื่องนี้กัน เพิ่มโค้ดต่อไปนี้ที่ด้านล่างของ app/css/index.css

.user {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

แอปของคุณยังไม่ทำงาน แต่วิดีโอด้านล่างจะแสดงสิ่งที่จะเกิดขึ้นเมื่อเปิดและปิดใช้ scroll-snap-type เมื่อเปิดใช้ การสไลด์แนวนอนแต่ละครั้งจะไปยังเรื่องราวถัดไป เมื่อปิดใช้ เบราว์เซอร์จะใช้ลักษณะการเลื่อนเริ่มต้น

วิธีนี้จะช่วยให้คุณเลื่อนดูเพื่อนๆ ได้ แต่เรายังมี ปัญหาเกี่ยวกับเรื่องราวให้แก้ไขอยู่

.user

มาสร้างเลย์เอาต์ในส่วน .user ที่จัดการองค์ประกอบเรื่องราวย่อยเหล่านั้นให้อยู่เข้าที่เข้าทาง เราจะใช้เคล็ดลับการซ้อนที่มีประโยชน์เพื่อแก้ปัญหานี้ เรากำลังสร้างตารางกริดแบบ 1x1 โดยที่แถวและคอลัมน์มีชื่อแทนตารางกริดเดียวกันคือ [story] และแต่ละรายการในตารางกริดของเรื่องราวจะต้องพยายามอ้างสิทธิ์พื้นที่ดังกล่าว ซึ่งทําให้เกิดกองซ้อน

เพิ่มโค้ดที่ไฮไลต์ลงในกฎ .user

.user {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: grid;
  grid: [story] 1fr / [story] 1fr;
}

เพิ่มชุดกฎต่อไปนี้ที่ด้านล่างของ app/css/index.css

.story {
  grid-area: story;
}

ตอนนี้เรายังคงอยู่ในโฟลว์อยู่แม้ว่าจะไม่มีการวางตำแหน่งแบบสัมบูรณ์ การวางลอย หรือคำสั่งการจัดวางอื่นๆ ที่นําองค์ประกอบออกจากโฟลว์ และดูเหมือนว่าแทบจะไม่มีโค้ดเลย ข้อมูลนี้มีการแจกแจงอย่างละเอียดในวิดีโอและบล็อกโพสต์

.story

ตอนนี้เราแค่ต้องจัดสไตล์รายการเรื่องราว

ก่อนหน้านี้เราได้พูดถึงว่าแอตทริบิวต์ style บนองค์ประกอบ <article> แต่ละรายการเป็นส่วนหนึ่งของเทคนิคการโหลดตัวยึดตำแหน่ง ดังนี้

<article class="story" style="--bg: url(https://picsum.photos/480/840);"></article>

เราจะใช้พร็อพเพอร์ตี้ background-image ของ CSS ซึ่งช่วยให้เราระบุภาพพื้นหลังได้มากกว่า 1 รายการ เราสามารถจัดเรียงรูปภาพเพื่อให้รูปภาพผู้ใช้อยู่ด้านบนและจะแสดงโดยอัตโนมัติเมื่อโหลดเสร็จ ในการเปิดใช้งาน เราจะใส่ URL รูปภาพของเราลงในพร็อพเพอร์ตี้ที่กำหนดเอง (--bg) และใช้ภายใน CSS ของเราเพื่อเลเยอร์กับตัวยึดตำแหน่งการโหลด

ก่อนอื่นมาอัปเดตชุดกฎ .story เพื่อแทนที่ไล่ระดับด้วยรูปภาพพื้นหลังเมื่อโหลดเสร็จ เพิ่มโค้ดที่ไฮไลต์ลงในกฎ .story

.story {
  grid-area: story;

  background-size: cover;
  background-image:
    var(--bg),
    linear-gradient(to top, lch(98 0 0), lch(90 0 0));
}

การตั้งค่า background-size เป็น cover จะทำให้ไม่มีพื้นที่ว่างในวิวพอร์ตเนื่องจากรูปภาพจะแสดงเต็มพื้นที่ การกําหนดภาพพื้นหลัง 2 ภาพทำให้เราสามารถดึงเทคนิคเว็บ CSS ที่เรียบร้อยซึ่งเรียกว่า loading tombstone ดังนี้

  • ภาพพื้นหลัง 1 (var(--bg)) คือ URL ที่เราส่งผ่านในหน้าของ HTML
  • รูปภาพพื้นหลัง 2 (linear-gradient(to top, lch(98 0 0), lch(90 0 0)) เป็นไล่ระดับสี) เพื่อแสดงขณะที่ URL กำลังโหลด

CSS จะแทนที่ไล่ระดับสีด้วยรูปภาพโดยอัตโนมัติเมื่อดาวน์โหลดรูปภาพเสร็จแล้ว

ถัดไป เราจะเพิ่ม CSS เพื่อนำลักษณะการทำงานบางอย่างออก ซึ่งจะช่วยให้เบราว์เซอร์ทำงานได้เร็วขึ้น เพิ่มโค้ดที่ไฮไลต์ลงในกฎ .story

.story {
  grid-area: story;

  background-size: cover;
  background-image:
    var(--bg),
    linear-gradient(to top, lch(98 0 0), lch(90 0 0));

  user-select: none;
  touch-action: manipulation;
}
  • user-select: none ป้องกันไม่ให้ผู้ใช้เลือกข้อความโดยไม่ตั้งใจ
  • touch-action: manipulation บอกให้เบราว์เซอร์ทราบว่าการโต้ตอบเหล่านี้ควรได้รับการพิจารณาว่าเป็นเหตุการณ์การแตะ ซึ่งจะช่วยให้เบราว์เซอร์ไม่ต้องพยายามตัดสินว่าคุณกำลังคลิก URL หรือไม่

สุดท้าย มาเพิ่ม CSS เล็กน้อยเพื่อทำให้การเปลี่ยนระหว่างเรื่องราวเป็นแบบเคลื่อนไหวกัน เพิ่มโค้ดที่ไฮไลต์ลงในชุดกฎ .story

.story {
  grid-area: story;

  background-size: cover;
  background-image:
    var(--bg),
    linear-gradient(to top, lch(98 0 0), lch(90 0 0));

  user-select: none;
  touch-action: manipulation;

  transition: opacity .3s cubic-bezier(0.4, 0.0, 1, 1);

  &.seen {
    opacity: 0;
    pointer-events: none;
  }
}

ระบบจะเพิ่มคลาส .seen ลงในเรื่องราวที่ต้องมีทางออก ฉันได้รับฟังก์ชันการค่อยๆ เปลี่ยนที่กำหนดเอง (cubic-bezier(0.4, 0.0, 1,1)) จากคู่มือการการค่อยๆ เปลี่ยนของ Material Design (เลื่อนไปที่ส่วนการค่อยๆ เปลี่ยนแบบเร่ง)

หากสังเกตดีๆ คุณอาจเห็นpointer-events: noneประกาศและกำลังงงอยู่ ผมว่านี่เป็นข้อเสียเพียงอย่างเดียว ของโซลูชันนี้จนถึงตอนนี้ เราต้องใช้ข้อมูลนี้เนื่องจากองค์ประกอบ .seen.story จะอยู่ด้านบนและจะได้รับการแตะ แม้ว่าจะมองไม่เห็นก็ตาม โดยการตั้งค่า pointer-events เป็น none เราจะเปลี่ยนเรื่องราวที่สังเกตได้ให้กลายเป็นหน้าต่างและขโมยการโต้ตอบของผู้ใช้อีกต่อไป ก็ไม่เสียหายอะไร การจัดการใน CSS ก็ไม่ยากเกินไปด้วย เราไม่ได้โยน z-index ให้ยุ่งยาก เรายังคงรู้สึกดีกับเรื่องนี้

JavaScript

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

ตั้งค่า

เรามาคำนวณและเก็บข้อมูลให้มากที่สุดเท่าที่จะทำได้ เพิ่มโค้ดต่อไปนี้ลงใน app/js/index.js

const stories = document.querySelector('.stories')
const median = stories.offsetLeft + (stories.clientWidth / 2)

บรรทัดแรกของ JavaScript จะดึงข้อมูลและจัดเก็บการอ้างอิงไปยังรูทองค์ประกอบ HTML หลัก บรรทัดถัดไปจะคํานวณตําแหน่งของตรงกลางองค์ประกอบ เพื่อให้เราตัดสินใจได้ว่าการแตะจะเป็นการเลื่อนไปข้างหน้าหรือข้างหลัง

รัฐ

ถัดไปเราจะสร้างออบเจ็กต์ขนาดเล็กที่มีสถานะบางอย่างที่เกี่ยวข้องกับตรรกะของเรา ในกรณีนี้ เราสนใจเฉพาะเรื่องราวปัจจุบัน ในมาร์กอัป HTML เราเข้าถึงโปรไฟล์ได้ด้วยการหยิบเพื่อนคนที่ 1 และเรื่องราวล่าสุดของพวกเขา เพิ่มโค้ดที่ไฮไลต์ลงในapp/js/index.js

const stories = document.querySelector('.stories')
const median = stories.offsetLeft + (stories.clientWidth / 2)

const state = {
  current_story: stories.firstElementChild.lastElementChild
}

Listener

ตอนนี้เรามีตรรกะเพียงพอที่จะเริ่มฟังเหตุการณ์ของผู้ใช้และเปลี่ยนเส้นทางได้แล้ว

หนู

มาเริ่มด้วยการฟังเหตุการณ์ 'click' ในคอนเทนเนอร์เรื่องราวของเรากัน เพิ่มโค้ดที่ไฮไลต์ลงใน app/js/index.js

const stories = document.querySelector('.stories')
const median = stories.offsetLeft + (stories.clientWidth / 2)

const state = {
  current_story: stories.firstElementChild.lastElementChild
}

stories.addEventListener('click', e => {
  if (e.target.nodeName !== 'ARTICLE')
    return

  navigateStories(
    e.clientX > median
      ? 'next'
      : 'prev')
})

หากมีการคลิกที่ไม่ได้เกิดขึ้นบนองค์ประกอบ <article> เราจะหยุดดำเนินการและจะไม่ดําเนินการใดๆ หากเป็นบทความ เราจะจับตำแหน่งแนวนอนของเมาส์หรือนิ้วด้วย clientX เรายังไม่ได้ติดตั้งใช้งาน navigateStories แต่อาร์กิวเมนต์ที่รับจะระบุทิศทางที่เราควรไป หากตําแหน่งผู้ใช้นั้นมากกว่าค่ามัธยฐาน เราจะต้องไปยัง next มิเช่นนั้นให้ไปที่ prev (ก่อนหน้า)

แป้นพิมพ์

ตอนนี้มาฟังการกดแป้นพิมพ์กัน หากกดลูกศรลง เราจะไปยัง next หากเป็นลูกศรขึ้น เราจะไปที่ prev

เพิ่มโค้ดที่ไฮไลต์ลงใน app/js/index.js

const stories = document.querySelector('.stories')
const median = stories.offsetLeft + (stories.clientWidth / 2)

const state = {
  current_story: stories.firstElementChild.lastElementChild
}

stories.addEventListener('click', e => {
  if (e.target.nodeName !== 'ARTICLE')
    return

  navigateStories(
    e.clientX > median
      ? 'next'
      : 'prev')
})

document.addEventListener('keydown', ({key}) => {
  if (key !== 'ArrowDown' || key !== 'ArrowUp')
    navigateStories(
      key === 'ArrowDown'
        ? 'next'
        : 'prev')
})

การไปยังส่วนต่างๆ ของเรื่องราว

ถึงเวลาจัดการตรรกะทางธุรกิจที่เป็นเอกลักษณ์ของเรื่องราวและ UX ที่เรื่องราวนี้มีชื่อเสียง ข้อมูลนี้ดูยุ่งยากและซับซ้อน แต่เราคิดว่าหากคุณอ่านทีละบรรทัดก็จะเข้าใจได้ไม่ยาก

ก่อนหน้านี้ เราได้จัดเก็บตัวเลือกบางอย่างไว้เพื่อช่วยเราตัดสินใจว่าจะเลื่อนไปยังเพื่อนหรือแสดง/ซ่อนเรื่องราว เนื่องจากเรากำลังทำงานกับ HTML เราจะค้นหาเพื่อน (ผู้ใช้) หรือเรื่องราว (story) ใน HTML

ตัวแปรเหล่านี้จะช่วยเราตอบคำถามต่างๆ เช่น "สำหรับเรื่องราว x "ถัดไป" หมายความว่าให้ไปยังเรื่องราวอื่นจากเพื่อนคนเดิมหรือเพื่อนคนละคน" เราทําโดยใช้โครงสร้างแบบต้นไม้ที่เราสร้างขึ้นเพื่อเข้าถึงผู้ปกครองและบุตรหลาน

เพิ่มโค้ดต่อไปนี้ที่ด้านล่างของ app/js/index.js:

const navigateStories = direction => {
  const story = state.current_story
  const lastItemInUserStory = story.parentNode.firstElementChild
  const firstItemInUserStory = story.parentNode.lastElementChild
  const hasNextUserStory = story.parentElement.nextElementSibling
  const hasPrevUserStory = story.parentElement.previousElementSibling
}

ต่อไปนี้คือเป้าหมายด้านตรรกะทางธุรกิจของเราให้ใกล้เคียงกับภาษาที่เป็นธรรมชาติที่สุด

  • เลือกวิธีจัดการกับการแตะ
    • หากมีเรื่องราวถัดไป/ก่อนหน้า ให้แสดงเรื่องราวนั้น
    • หากเป็นเรื่องราวล่าสุด/แรกของเพื่อน: แสดงเพื่อนใหม่
    • หากไม่มีเรื่องราวที่จะนำไปในทิศทางนั้น ก็ไม่ต้องดำเนินการใดๆ
  • เก็บเรื่องราวปัจจุบันใหม่ไว้ใน state

เพิ่มโค้ดที่ไฮไลต์ลงในฟังก์ชัน navigateStories

const navigateStories = direction => {
  const story = state.current_story
  const lastItemInUserStory = story.parentNode.firstElementChild
  const firstItemInUserStory = story.parentNode.lastElementChild
  const hasNextUserStory = story.parentElement.nextElementSibling
  const hasPrevUserStory = story.parentElement.previousElementSibling

  if (direction === 'next') {
    if (lastItemInUserStory === story && !hasNextUserStory)
      return
    else if (lastItemInUserStory === story && hasNextUserStory) {
      state.current_story = story.parentElement.nextElementSibling.lastElementChild
      story.parentElement.nextElementSibling.scrollIntoView({
        behavior: 'smooth'
      })
    }
    else {
      story.classList.add('seen')
      state.current_story = story.previousElementSibling
    }
  }
  else if(direction === 'prev') {
    if (firstItemInUserStory === story && !hasPrevUserStory)
      return
    else if (firstItemInUserStory === story && hasPrevUserStory) {
      state.current_story = story.parentElement.previousElementSibling.firstElementChild
      story.parentElement.previousElementSibling.scrollIntoView({
        behavior: 'smooth'
      })
    }
    else {
      story.nextElementSibling.classList.remove('seen')
      state.current_story = story.nextElementSibling
    }
  }
}

ลองเลย

  • หากต้องการดูตัวอย่างเว็บไซต์ ให้กดดูแอป แล้วกดเต็มหน้าจอ เต็มหน้าจอ

บทสรุป

นี่เป็นสรุปความต้องการเกี่ยวกับคอมโพเนนต์ คุณปรับแต่ง ขับเคลื่อนด้วยข้อมูล และปรับให้เหมาะกับตัวเองได้