Web App—บันทึกการทำ Todo List App

⚠️สำหรับบทความนี้สิ่งที่ต้องรู้คือพื้นฐาน HTML , CSS และ JavaScript

สำหรับเพื่อนๆ ที่สนใจการสร้าง Web App มีโปรเจคหนึ่งที่น่าสนใจ และหาตัวอย่างการทำได้ไม่ยากนั่นคือ การสร้าง Todo List App ครับ เพราะการมีตัวช่วยมาใช้จัดระเบียบภารกิจในแต่ละวัน จะทำให้การทำงานเป็นระบบมากขึ้น โดยในบทความนี้ผมจะมานำเสนอวิธีการสร้าง Todo List App ของผมเอง โดยจะแบ่งเนื้อหาออกเป็น 3 ส่วนหลักๆ คือ

  1. สร้างหน้ากรอกข้อมูล และแสดงผล ในขั้นตอนนี้ผมใช้ HTML , CSS, Bootstrap 4 และ Animate.css ในการสร้างให้มีรูปร่างหน้าตาตามที่ต้องการ
  2. ใช้ javascript (JS) สร้างฟังก์ชันในการเพิ่ม/ลบ/เช็ค รายการ Todo List ตามแอ็กชั่นต่างๆ ให้เป็นไปตามที่ต้องการ และใช้ Local Storage ในการเก็บบันทึกข้อมูลของ Todo List เวลาปิดหน้าเพจหรือกดรีเฟรชหน้าเพจก็ยังจะโหลดข้อมูลล่าสุดใน Local Storage มาแสดงได้ครับ
  3. เอาสิ่งที่เราทำในข้อ 1 และ 2 ขึ้น Host โดยผมจะใช้ Firebase Hosting ครับ

พร้อมแล้วก็มาเริ่มลงมือกันเลยดีกว่าครับ 🎢


1. ออกแบบหน้าตา Todo List กันก่อนครับ

— ผมนำเอา Bootstrap 4 มาใช้งานเลยครับ ทั้ง Input, Button, List group, Grid, Flex มีอะไรที่ต้องใช้ก็เอามาใช้ให้หมดเลย และผมใช้ CSS ปรับเพิ่มเติมให้ได้ตามที่ต้องการครับ😁

— หลังจากกำหนด class ต่างๆ จาก Bootstrap 4 ลงไปจนได้หน้าตาตามต้องการ รวทั้งใช้ Google Font และ Font Awesome ด้วยครับ จากนั้นผมก็ใช้ CSS ปรับอีกนิดหน่อย และใช้ Animate.css มาช่วยการในแสดงผลแบบ animation ซึ่งมีรูปแบบการแสดงผลที่หลากหลายให้เลือกมาใช้งานเลยครับ

— มาดูตัวอย่าง Code HTML กันครับ ซึ่ง Todo List ทั้งหมดจะอยู่ใน <ul>…</ul> ทั้งหมดเลยครับ ซึ่งผมจะใช้ javascript (JS) สร้างฟังก์ชันในการเพิ่ม/ลบ/เช็ค รายการ Todo List ทั้งหมดในส่วนนี้ครับ

— ตัวอย่าง Code CSS ที่ปรับแต่งเพิ่มเติมให้ได้ตามที่ต้องการ

— มาลองดูหน้าตา Todo List ที่ได้จากตัวอย่าง Code HTML และ CSS กันครับ


2. กำหนด Action ต่างๆ และเพิ่ม Class ต่างๆ ด้วย JavaScript

— สำหรับการใช้งานก็จะกรอก Todo ลงไปในช่อง Input โดยจะกรอกค่าว่าง และรายการที่ซ้ำกันไม่ได้ โดยจะเป็นการเพิ่ม <li>…</li> ลงไปใน <ul>…</ul> นั่นเองครับ

— Event กรณี Click ที่ปุ่ม ✅ จะแสดงผลให้รู้ว่าทำรายการนี้แล้ว กำหนดการแสดงผลด้วย .completed โดยจะใช้ JS ในการเพิ่ม .completed ลงไปใน <li>…</li> ของรายการนั้นๆ และหาก Click ที่ปุ่ม ✅ อีกครั้งจะเป็นการ Undo รายการนั้นๆ จะได้ไม่ต้องมาพิมพ์ใหม่หากต้องการทำรายการซ้ำ

— Event กรณี Click ที่ปุ่ม 🗑️ จะเป็นการลบรายการนั้นๆ ออกไปจาก List โดยจะใช้ JS ในการเพิ่ม .animate__animated และ .animate__zoomOut ลงไปใน <li>…</li> ของรายการนั้นๆ ด้วยครับ เพื่อแสดงผลการลบแบบ animation สำหรับการใช้ Animate.css มาช่วยการในแสดงผลแบบ animation ช่วยได้มากๆ เลยครับ👍

— มาดูในส่วนของ Code JS กันต่อครับ โดยมีฟังก์ชันการใช้งานหลักๆ ดังนี้

  • addTodo — เพิ่ม Todo List ด้วยฟังก์ชัน createTodoList และบันทึกไว้ใน Local Storage ด้วยฟังก์ชัน saveLocalTodos พร้อมทำการตรวจสอบ Todo List ใน Local Storage ด้วยฟังก์ชัน checkTodos เพื่อนำมาตรวจสอบเงื่อนไขไม่ให้กรอกข้อมูลที่ซ้ำกัน
  • createTodoList , createTodoListCompleted — สร้าง Todo List และ Todo List Completed
  • getTodos — โหลดข้อมูล Todo List ใน Local Storage แล้วมาสร้างรายการ Todo ด้วยฟังก์ชัน createTodoList และ createTodoListCompleted กรณีที่ปิดหน้าเพจ หรือรีเฟรชหน้าเพจ
  • deleteAndCheck — ทำการ Check Mark และ Delete รายการใน Todo List
  • saveLocalTodos , saveLocalTodosCompleted — บันทึกข้อมูล Todo และ Completed ไว้ใน Local Storage
  • checkTodos , checkTodosCompleted — ตรวจสอบข้อมูลท Todo List ที่บันทึกไว้ใน Local Storage ล่าสุด

— มาดูผลลัพธ์ที่ได้กันครับ และแสดงผลแบบ Responsive ด้วย 👍👍👍

— Source Code JS แบบเต็มๆ ครับ และเพื่อนๆ คนไหนสนใจก็ไป Clone Project ได้ที่ Github เลยครับ 💥💥


3. อัพขึ้น Firebase Hosting

— อย่าลืมต้องติดตั้ง Node.js และติดตั้ง Firebase ก่อนครับ

— $ firebase init แล้วทำตามขั้นตอนได้เลยครับ รายละเอียดเพิ่มเติม

— หลังจากสร้างโปรเจค Firebase เสร็จแล้วก็ให้เอาไฟล์ HTML, CSS และ JS ที่ได้ทำไว้ในข้อ 1 และ 2 ไปใส่ไว้ในโฟลเดอร์ public แล้วถ้ามี index.html อยู่แล้วก็ overwrite ได้เลย จะได้ประมาณนี้

— ต่อมาเป็น Step สุดท้ายละ เราจะมา Deploy ด้วยคำสั่ง $ firebase deploy –only hosting แล้วจะได้ Hosting URL ออกมาแบบนี้ https://yourproject.web.app

— ถ้ากลับไปดูที่หน้า Console ในเมนู Hosting ก็เจอรายละเอียดขึ้นมาแบบนี้

— เปิด URL ที่ได้ และทดลองกรอกข้อมูลก็จะได้ Todo List App ตามที่ต้องการแล้วครับ 🔥🔥🔥


ท้ายสุด เพียงเท่านี้เราก็จะได้ Todo List App เป็นของตัวเองแล้วครับ แต่การที่เราทำการบันทึกข้อมูลไว้ใน Local Strorage ก็จะทำให้ใช้ได้แค่เครื่องเดียวเท่านั้นครับ ถ้าหากเอา URL ไปเปิดเครื่องใหม่ หรือในมือถือข้อมูลที่บันทึกจะไม่อัพเดทถึงกัน ถ้าหากอยากได้การเข้าถึงหลายๆ อุปกรณ์ และข้อมูลอัพเดททั้งหมด ให้เปลี่ยนเป็นการบันทึก และอ่านข้อมูลจาก Firebase Realtime Database แทนครับ…ก็หวังว่าบทความนี้จะเป็นแนวทางในการเรียนรู้ และเป็นประโยชน์กับเพื่อนๆ ที่กำลังสนใจพัฒนา Web App ครับผม ไว้เจอกันในบทความต่อไปครับ Happy Coding…🔥🔥🔥


โปรโมชั่น คูปองส่วนลด และดีล ที่ดีที่สุดของร้านค้าออนไลน์กว่า 300 แบรนด์พร้อมรับเงินคืนจาก ShopBack
🔗 https://bit.ly/3c4tlmV

Ruk-Com จดโดเมน-เช่าโฮสต์ ราคาประหยัด พร้อมให้บริการใน 1 นาที
🔗 http://bit.ly/36q8A12