การสร้าง Kanban Boards ด้วย Tailwind CSS

การสร้าง Kanban Boards ด้วย Tailwind CSS

ในบทความนี้ เราจะมาเรียนรู้วิธีการสร้าง Kanban Boards ที่สามารถลากและวาง (draggable) ได้ โดยใช้ Tailwind CSS ร่วมกับ JavaScript libraries ที่เหมาะสม Kanban Boards เป็นเครื่องมือที่ช่วยในการจัดการงานและติดตามความคืบหน้าของโครงการได้อย่างมีประสิทธิภาพ ซึ่งเราจะเน้นการนำไปใช้จริงแบบ step-by-step พร้อมทั้งยกตัวอย่างกรณีใช้งานจริงและข้อผิดพลาดที่พบบ่อย

สิ่งที่ต้องมี

• ความรู้พื้นฐานเกี่ยวกับ HTML, CSS, และ JavaScript
• ความเข้าใจพื้นฐานเกี่ยวกับ Tailwind CSS
• ติดตั้ง Node.js และ npm (หรือ yarn)
• ติดตั้ง Tailwind CSS ในโปรเจกต์ของคุณ (หากยังไม่ได้ติดตั้ง)

หากคุณยังไม่ได้ติดตั้ง Tailwind CSS ในโปรเจกต์ของคุณ สามารถทำตามขั้นตอนใน documentation ของ Tailwind CSS ได้เลย

ขั้นตอนการสร้าง Kanban Board

1. สร้างโครงสร้าง HTML
2. ติดตั้ง JavaScript Libraries ที่จำเป็น
3. กำหนด Styles ด้วย Tailwind CSS
4. Implement Drag and Drop Functionality ด้วย JavaScript
5. จัดการ State ของ Kanban Board
6. ทดสอบและแก้ไขข้อผิดพลาด

1. สร้างโครงสร้าง HTML

เริ่มต้นด้วยการสร้างโครงสร้าง HTML สำหรับ Kanban Board ของเรา โดยเราจะสร้าง columns (หรือ lists) สำหรับแต่ละสถานะของงาน เช่น "To Do", "In Progress", และ "Done" แต่ละ column จะประกอบไปด้วย cards (หรือ tasks) ที่สามารถลากและวางได้

<div class="flex space-x-4 overflow-x-auto">
  <div class="w-64 bg-gray-100 rounded-md shadow-md p-4">
    <h3 class="font-bold text-lg mb-2">To Do</h3>
    <div id="todo" class="space-y-2">
      <div class="bg-white rounded-md shadow-sm p-2 cursor-grab" draggable="true">Task 1</div>
      <div class="bg-white rounded-md shadow-sm p-2 cursor-grab" draggable="true">Task 2</div>
    </div>
  </div>

  <div class="w-64 bg-gray-100 rounded-md shadow-md p-4">
    <h3 class="font-bold text-lg mb-2">In Progress</h3>
    <div id="inprogress" class="space-y-2">
      <div class="bg-white rounded-md shadow-sm p-2 cursor-grab" draggable="true">Task 3</div>
    </div>
  </div>

  <div class="w-64 bg-gray-100 rounded-md shadow-md p-4">
    <h3 class="font-bold text-lg mb-2">Done</h3>
    <div id="done" class="space-y-2">
      <div class="bg-white rounded-md shadow-sm p-2 cursor-grab" draggable="true">Task 4</div>
    </div>
  </div>
</div>

ในโค้ดนี้:

• <div class="flex space-x-4 overflow-x-auto">: สร้าง container หลักที่ใช้ flexbox เพื่อจัดเรียง columns ในแนวนอน และ overflow-x-auto ทำให้สามารถ scroll ในแนวนอนได้หาก columns เกินขนาดหน้าจอ
• <div class="w-64 bg-gray-100 rounded-md shadow-md p-4">: สร้าง column แต่ละอัน โดยกำหนดความกว้างเป็น 64 units (ประมาณ 16rem), สีพื้นหลังเป็นสีเทาอ่อน, ขอบโค้งมน, และมีเงา
• <h3 class="font-bold text-lg mb-2">: หัวข้อสำหรับแต่ละ column
• <div id="todo" class="space-y-2">: container สำหรับ cards ในแต่ละ column โดยมี space-y-2 เพื่อเพิ่มระยะห่างระหว่าง cards
• <div class="bg-white rounded-md shadow-sm p-2 cursor-grab" draggable="true">: card แต่ละอัน โดยมีสีพื้นหลังเป็นสีขาว, ขอบโค้งมน, เงาเล็กน้อย, padding, และ cursor-grab เพื่อเปลี่ยน cursor เป็นรูปมือเมื่อ hover และ draggable="true" เพื่อทำให้ card สามารถลากได้

2. ติดตั้ง JavaScript Libraries ที่จำเป็น

ในการ Implement Drag and Drop Functionality เราจะใช้ SortableJS ซึ่งเป็น lightweight JavaScript library ที่ช่วยให้เราสามารถสร้าง sortable lists ได้อย่างง่ายดาย

ติดตั้ง SortableJS โดยใช้ npm หรือ yarn:

npm install sortablejs
# หรือ
yarn add sortablejs

3. กำหนด Styles ด้วย Tailwind CSS

เราได้กำหนด styles พื้นฐานให้กับ Kanban Board ของเราแล้วในโครงสร้าง HTML แต่เราสามารถปรับแต่งเพิ่มเติมได้ตามต้องการ เช่น การเปลี่ยนสี, ขนาด, หรือเพิ่ม animations

ตัวอย่างการปรับแต่งสี:

<div class="w-64 bg-blue-100 rounded-md shadow-md p-4">
  <h3 class="font-bold text-lg mb-2 text-blue-700">To Do</h3>
  <div id="todo" class="space-y-2">
    <div class="bg-white rounded-md shadow-sm p-2 cursor-grab hover:bg-blue-50" draggable="true">Task 1</div>
    <div class="bg-white rounded-md shadow-sm p-2 cursor-grab hover:bg-blue-50" draggable="true">Task 2</div>
  </div>
</div>

ในโค้ดนี้ เราเปลี่ยนสีพื้นหลังของ column เป็นสีฟ้าอ่อน (bg-blue-100), สีของหัวข้อเป็นสีฟ้าเข้ม (text-blue-700), และเพิ่ม hover effect ให้กับ cards (hover:bg-blue-50)

4. Implement Drag and Drop Functionality ด้วย JavaScript

หลังจากติดตั้ง SortableJS แล้ว เราจะมา Implement Drag and Drop Functionality โดยการ import SortableJS และ initialize สำหรับแต่ละ column

import Sortable from 'sortablejs';

document.addEventListener('DOMContentLoaded', () => {
  const todo = document.getElementById('todo');
  const inprogress = document.getElementById('inprogress');
  const done = document.getElementById('done');

  new Sortable(todo, {
    group: 'shared', // Allows dragging between lists
    animation: 150, // ms, animation speed moving items when sorting,
    onAdd: function (evt) { console.log('onAdd:', evt.item); },
    onUpdate: function (evt) { console.log('onUpdate:', evt.item); },
    onRemove: function (evt) { console.log('onRemove:', evt.item); },
  });

  new Sortable(inprogress, {
    group: 'shared',
    animation: 150,
    onAdd: function (evt) { console.log('onAdd:', evt.item); },
    onUpdate: function (evt) { console.log('onUpdate:', evt.item); },
    onRemove: function (evt) { console.log('onRemove:', evt.item); },
  });

  new Sortable(done, {
    group: 'shared',
    animation: 150,
    onAdd: function (evt) { console.log('onAdd:', evt.item); },
    onUpdate: function (evt) { console.log('onUpdate:', evt.item); },
    onRemove: function (evt) { console.log('onRemove:', evt.item); },
  });
});

ในโค้ดนี้:

• import Sortable from 'sortablejs';: import SortableJS library
• document.addEventListener('DOMContentLoaded', () => { ... });: รอให้ DOM โหลดเสร็จก่อนที่จะ execute code
• const todo = document.getElementById('todo');: get reference ไปยังแต่ละ column element
• new Sortable(todo, { ... });: initialize SortableJS สำหรับแต่ละ column
• group: 'shared': ทำให้ cards สามารถลากและวางระหว่าง columns ได้
• animation: 150: กำหนด animation speed เมื่อ cards ถูกย้าย
• onAdd, onUpdate, onRemove: callbacks ที่ถูกเรียกเมื่อ card ถูกเพิ่ม, อัพเดท, หรือลบ

5. จัดการ State ของ Kanban Board

ในการใช้งานจริง เราจะต้องจัดการ state ของ Kanban Board เพื่อให้ข้อมูลถูกบันทึกและสามารถนำกลับมาใช้ได้ในภายหลัง เราสามารถใช้ JavaScript frameworks เช่น React, Vue, หรือ Angular เพื่อจัดการ state ได้อย่างมีประสิทธิภาพ แต่ในตัวอย่างนี้เราจะใช้ JavaScript ธรรมดาเพื่อความเรียบง่าย

ตัวอย่างการบันทึก state ลงใน localStorage:

import Sortable from 'sortablejs';

document.addEventListener('DOMContentLoaded', () => {
  const todo = document.getElementById('todo');
  const inprogress = document.getElementById('inprogress');
  const done = document.getElementById('done');

  const saveState = () => {
    localStorage.setItem('kanbanState', JSON.stringify({
      todo: todo.innerHTML,
      inprogress: inprogress.innerHTML,
      done: done.innerHTML,
    }));
  };

  const loadState = () => {
    const savedState = localStorage.getItem('kanbanState');
    if (savedState) {
      const state = JSON.parse(savedState);
      todo.innerHTML = state.todo;
      inprogress.innerHTML = state.inprogress;
      done.innerHTML = state.done;

      // Re-initialize SortableJS after loading the state
      initializeSortable();
    }
  };

  const initializeSortable = () => {
    new Sortable(todo, {
      group: 'shared',
      animation: 150,
      onAdd: function (evt) { saveState(); },
      onUpdate: function (evt) { saveState(); },
      onRemove: function (evt) { saveState(); },
    });

    new Sortable(inprogress, {
      group: 'shared',
      animation: 150,
      onAdd: function (evt) { saveState(); },
      onUpdate: function (evt) { saveState(); },
      onRemove: function (evt) { saveState(); },
    });

    new Sortable(done, {
      group: 'shared',
      animation: 150,
      onAdd: function (evt) { saveState(); },
      onUpdate: function (evt) { saveState(); },
      onRemove: function (evt) { saveState(); },
    });
  };

  loadState(); // Load state on page load
  initializeSortable(); // Initialize SortableJS
});

ในโค้ดนี้:

• saveState(): บันทึก HTML ของแต่ละ column ลงใน localStorage
• loadState(): โหลด HTML จาก localStorage และ update columns
• initializeSortable(): Initialize SortableJS หลังจากโหลด state เพื่อให้ drag and drop functionality ทำงาน

6. ทดสอบและแก้ไขข้อผิดพลาด

หลังจาก Implement Kanban Board แล้ว ให้ทดสอบการทำงานโดยการลากและวาง cards ระหว่าง columns และตรวจสอบว่า state ถูกบันทึกและโหลดได้อย่างถูกต้อง

ข้อผิดพลาดที่พบบ่อย:

• SortableJS ไม่ทำงาน: ตรวจสอบว่าได้ import SortableJS อย่างถูกต้องและ initialize สำหรับแต่ละ column
• State ไม่ถูกบันทึก: ตรวจสอบว่า saveState() ถูกเรียกเมื่อมีการเปลี่ยนแปลง
• State ไม่ถูกโหลด: ตรวจสอบว่า loadState() ถูกเรียกเมื่อ page load
• Styles ไม่ถูกต้อง: ตรวจสอบว่า Tailwind CSS classes ถูกนำไปใช้อย่างถูกต้อง

กรณีใช้งานจริง

Kanban Boards สามารถนำไปใช้ได้ในหลากหลายสถานการณ์ เช่น:

• Project Management: ติดตามความคืบหน้าของ tasks ใน project
• Personal Task Management: จัดการ tasks ส่วนตัว
• Bug Tracking: ติดตาม bugs และ assign ให้กับ developers
• Content Planning: วางแผนและติดตาม content ที่จะ publish

สรุป

ในบทความนี้ เราได้เรียนรู้วิธีการสร้าง Kanban Boards ที่สามารถลากและวางได้ โดยใช้ Tailwind CSS ร่วมกับ SortableJS เราได้ครอบคลุมตั้งแต่การสร้างโครงสร้าง HTML, การติดตั้ง JavaScript libraries, การกำหนด styles ด้วย Tailwind CSS, การ Implement Drag and Drop Functionality, การจัดการ state, และการทดสอบและแก้ไขข้อผิดพลาด หวังว่าบทความนี้จะเป็นประโยชน์และช่วยให้คุณสามารถสร้าง Kanban Boards ที่มีประสิทธิภาพได้