⚠️สำหรับบทความนี้สิ่งที่ต้องรู้คือพื้นฐาน HTML , CSS และ JavaScript
สำหรับเพื่อนๆ ที่สนใจการสร้าง Web App มีโปรเจคหนึ่งที่น่าสนใจ และหาตัวอย่างการทำได้ไม่ยากนั่นคือ การสร้าง Todo List App ครับ เพราะการมีตัวช่วยมาใช้จัดระเบียบภารกิจในแต่ละวัน จะทำให้การทำงานเป็นระบบมากขึ้น โดยในบทความนี้ผมจะมานำเสนอวิธีการสร้าง Todo List App ของผมเอง โดยจะแบ่งเนื้อหาออกเป็น 3 ส่วนหลักๆ คือ
- สร้างหน้ากรอกข้อมูล และแสดงผล ในขั้นตอนนี้ผมใช้ HTML , CSS, Bootstrap 4 และ Animate.css ในการสร้างให้มีรูปร่างหน้าตาตามที่ต้องการ
- ใช้ javascript (JS) สร้างฟังก์ชันในการเพิ่ม/ลบ/เช็ค รายการ Todo List ตามแอ็กชั่นต่างๆ ให้เป็นไปตามที่ต้องการ และใช้ Local Storage ในการเก็บบันทึกข้อมูลของ Todo List เวลาปิดหน้าเพจหรือกดรีเฟรชหน้าเพจก็ยังจะโหลดข้อมูลล่าสุดใน Local Storage มาแสดงได้ครับ
- เอาสิ่งที่เราทำในข้อ 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