ทำไมต้องทำแอปโดยไม่ต้องมีระบบสมาชิก
เวลาเราเห็นแอปจัดการงานส่วนใหญ่ สิ่งแรกที่เขาจะถามคือให้เรา สมัครสมาชิก (การสร้างบัญชีผู้ใช้เพื่อเก็บข้อมูล) เพื่อเอาข้อมูลไปเก็บไว้บนเซิร์ฟเวอร์ (คอมพิวเตอร์เครื่องอื่นที่ให้บริการข้อมูล) แต่นั่นหมายความว่าผู้ใช้ต้องเสียเวลาตั้งรหัสผ่านและรอโหลดข้อมูลจากอินเทอร์เน็ตตลอดเวลา
ถ้าเราสร้างแอปที่เก็บข้อมูลไว้ใน Browser (โปรแกรมที่ใช้ท่องเว็บ เช่น Chrome หรือ Safari) ของผู้ใช้โดยตรง จะทำให้แอปทำงานได้เร็วมาก เพราะไม่ต้องรอรับส่งข้อมูลผ่านเครือข่ายเลย แถมยังช่วยเรื่องความเป็นส่วนตัว เพราะข้อมูลไม่เคยถูกส่งออกไปข้างนอกเครื่องเลยแม้แต่นิดเดียว
ในฐานะโปรแกรมเมอร์มือใหม่ การฝึกสร้างแอปแบบ Local-first (การเน้นให้แอปทำงานด้วยข้อมูลในเครื่องเป็นหลัก) เป็นบทเรียนที่ดีมาก เพราะคุณจะได้เรียนรู้วิธีจัดการข้อมูลด้วยตัวเองโดยไม่ต้องพึ่งพาฐานข้อมูลราคาแพง หรือระบบจัดการสมาชิกที่ซับซ้อนเลย
รู้จักกับ localStorage เครื่องมือเก็บข้อมูลในเบราว์เซอร์
หัวใจสำคัญของการทำแอปโดยไม่ใช้ระบบสมาชิกคือ localStorage (พื้นที่เก็บข้อมูลขนาดเล็กในเบราว์เซอร์) มันเปรียบเสมือนสมุดโน้ตส่วนตัวที่เบราว์เซอร์เตรียมไว้ให้เว็บไซต์แต่ละเว็บ ข้อมูลที่จดไว้จะยังคงอยู่แม้ว่าเราจะปิดหน้าเว็บไปแล้ว หรือเปิดคอมพิวเตอร์ใหม่ก็ตาม
การใช้งานนั้นง่ายมาก เราจะใช้คำสั่ง setItem เพื่อบันทึกข้อมูล และ getItem เพื่อดึงข้อมูลออกมา โดยข้อมูลที่เก็บในนี้มักจะอยู่ในรูปแบบ JSON (รูปแบบการเขียนข้อมูลที่อ่านง่ายทั้งคนและคอมพิวเตอร์) เพื่อให้เราเก็บข้อมูลที่มีโครงสร้างซับซ้อนได้
จุดที่ต้องระวังคือ localStorage เก็บข้อมูลได้แค่ข้อความเท่านั้น ดังนั้นก่อนจะเก็บข้อมูลที่เป็นตัวเลขหรือรายการงาน (List) เราต้องแปลงมันให้เป็นข้อความก่อนเสมอ และตอนดึงออกมาก็ต้องแปลงกลับให้เป็นข้อมูลที่โปรแกรมใช้งานได้จริง
// บันทึกข้อมูลงานลงไป
const task = { id: 1, name: 'เก็บของเข้ากล่อง' };
localStorage.setItem('myTask', JSON.stringify(task));
// ดึงข้อมูลออกมาใช้งาน
const savedTask = JSON.parse(localStorage.getItem('myTask'));
console.log(savedTask.name); // ผลลัพธ์: เก็บของเข้ากล่อง
บรรทัดแรกคือการสร้างตัวแปรเก็บข้อมูลงาน บรรทัดที่สองใช้ JSON.stringify (คำสั่งแปลงข้อมูลเป็นข้อความ) เพื่อบันทึกลงไป บรรทัดที่สี่ใช้ JSON.parse (คำสั่งแปลงข้อความกลับเป็นข้อมูล) เพื่อนำมาใช้งานต่อ ผลลัพธ์ที่เห็นคือการแสดงชื่องานออกมาในหน้าจอคอนโซลของนักพัฒนา
การตั้งค่าไอดีที่คงที่เพื่อป้องกันข้อมูลสับสน
เวลาผู้ใช้แก้ไขงาน เช่น เปลี่ยนวันย้ายบ้าน หรือติ๊กถูกว่าทำเสร็จแล้ว เราไม่สามารถอ้างอิงตำแหน่งของงานจากลำดับในหน้าจอได้ เพราะถ้าผู้ใช้ลบงานชิ้นแรกออกไป งานชิ้นที่สองจะเลื่อนขึ้นมาแทนที่ ทำให้โปรแกรมเกิดความสับสนได้
วิธีแก้คือเราต้องมี ID (ตัวระบุเอกลักษณ์) ที่คงที่ให้กับงานแต่ละชิ้น เหมือนกับเลขบัตรประชาชนที่ไม่เปลี่ยนตามตำแหน่งที่อยู่ ไม่ว่าผู้ใช้จะลบหรือแก้ไขงานอย่างไร เลขไอดีนี้จะยังคงผูกติดกับงานชิ้นนั้นไว้เสมอ ทำให้เราหาข้อมูลเจอได้อย่างแม่นยำ
มือใหม่มักจะพลาดโดยการใช้ลำดับ (Index) ใน Array (รายการข้อมูลเรียงกัน) มาเป็นตัวระบุงาน ซึ่งจะนำไปสู่บั๊ก (ข้อผิดพลาดของโปรแกรม) ที่แก้ได้ยากมากในอนาคต ให้ฝึกนิสัยสร้างเลขไอดีที่ไม่ซ้ำกันทุกครั้งที่สร้างงานใหม่
จัดการสถานะงานแบบไม่ลบข้อมูลทิ้งจริง
ในแอปจัดการงาน การกดซ่อนงานไม่ควรหมายถึงการลบข้อมูลทิ้งไปตลอดกาล เพราะผู้ใช้อาจจะเปลี่ยนใจในภายหลัง เราควรแยกมุมมองระหว่างงานที่กำลังทำอยู่ กับงานที่ถูกซ่อนไว้โดยใช้ตัวแปรสถานะ (Status) เป็นตัวคัดแยก
คุณสามารถสร้างฟังก์ชันที่ทำหน้าที่กรองข้อมูล (Filter) เพื่อเลือกแสดงเฉพาะงานที่ไม่ได้ถูกซ่อนเท่านั้น วิธีนี้ช่วยให้ผู้ใช้รู้สึกปลอดภัยว่าข้อมูลของเขาจะไม่หายไปไหน และเรายังสามารถสร้างเมนู "งานที่ซ่อนไว้" เพื่อให้ผู้ใช้กดกู้คืนข้อมูลได้ง่ายๆ
การเขียนโปรแกรมแบบนี้ช่วยให้แอปดูเป็นมืออาชีพมากขึ้น เพราะมันรองรับความผิดพลาดของผู้ใช้ได้ดี หากคุณลบข้อมูลทิ้งทันที ผู้ใช้จะไม่มีทางแก้ไขสิ่งที่ผิดพลาดได้เลย ซึ่งเป็นแนวทางที่ไม่ดีสำหรับซอฟต์แวร์ที่ใช้งานจริง
การจัดการวันที่และเงื่อนไขของงาน
เมื่อเราสร้างแอปวางแผนการย้ายบ้าน การปรับเปลี่ยนวันที่เป็นเรื่องปกติมาก แอปที่ดีต้องบอกผู้ใช้ได้ว่าวันที่เลือกนั้นเหมาะสมไหม เช่น เป็นช่วงเวลาที่กระชั้นชิดเกินไป หรือมีงานอื่นทับซ้อนกันอยู่ โดยการคำนวณจากวันที่ที่ผู้ใช้เลือกในเครื่อง
เราสามารถใช้ Date Object (เครื่องมือจัดการวันที่ในภาษาโปรแกรม) เพื่อเปรียบเทียบความต่างของวัน ถ้างานนี้ต้องทำก่อนวันย้าย 3 วัน เราก็แค่เอาวันย้ายตั้งแล้วลบออก 3 วัน ระบบก็จะแจ้งเตือนผู้ใช้ได้ทันทีโดยไม่ต้องรอคำตอบจากเซิร์ฟเวอร์
ข้อควรระวังคือการจัดการเขตเวลา (Timezone) หากคุณทำแอปที่ใช้กันคนละประเทศ แต่สำหรับแอปย้ายบ้านทั่วไป แค่คำนวณตามวันที่ที่ผู้ใช้กรอกก็เพียงพอแล้ว เน้นความเรียบง่ายไว้ก่อนจะช่วยให้โปรแกรมไม่พังง่าย
สรุปบทเรียนจากการสร้างแอปแบบ Local-first
การสร้างโปรเจกต์แบบไม่ต้องมีระบบสมาชิกช่วยให้คุณโฟกัสกับการเขียน Logic (ตรรกะหรือขั้นตอนการทำงาน) ได้เต็มที่โดยไม่วุ่นวายเรื่องความปลอดภัยของข้อมูลบนเซิร์ฟเวอร์ นี่คือจุดเริ่มต้นที่ดีในการฝึกทำ Portfolio (แฟ้มสะสมผลงาน) ที่เน้นการแก้ปัญหาให้ผู้ใช้จริง
ตัวอย่างการนำไปใช้จริงคือ หากคุณกำลังทำแอป "บันทึกรายรับรายจ่าย" คุณสามารถใช้ localStorage เก็บข้อมูลในแต่ละวันได้เลย แล้วเพิ่มปุ่ม "ส่งออกข้อมูล" (Export) เพื่อให้ผู้ใช้เซฟเป็นไฟล์ CSV (ไฟล์ข้อมูลแบบตารางที่เปิดได้ใน Excel) เก็บไว้ในเครื่องคอมพิวเตอร์ตัวเองได้อีกด้วย
ลองเริ่มจากโปรเจกต์เล็กๆ แบบนี้ดูครับ แล้วคุณจะพบว่าการเขียนโปรแกรมที่มีประโยชน์จริงๆ ไม่จำเป็นต้องเริ่มจากระบบที่ซับซ้อนเสมอไป แค่ทำให้ผู้ใช้ใช้งานได้ง่ายและข้อมูลไม่หาย ก็ถือเป็นก้าวแรกที่ยอดเยี่ยมของนักพัฒนาซอฟต์แวร์แล้ว
ที่มา: Building a Browser-Local Moving Checklist Without User Accounts — DEV Community
