ทำไมทุกคนเห็นข้อมูลเดียวกัน?

ถ้าคุณทำคอร์สก่อนหน้ามาครบ คุณน่าจะเริ่มรู้สึกภูมิใจกับแอปของตัวเองแล้ว

แต่พอ deploy แล้วให้คนอื่นลองใช้ ปัญหาใหม่จะโผล่มาทันที: ทำไมทุกคนเปิดมาแล้วเห็นข้อมูลกองเดียวกันหมด เหมือนแอปไม่รู้เลยว่าใครเป็นใคร

มันไม่ได้พัง แค่มันยังไม่รู้ว่า “คุณคือใคร”

ตอนนี้แอปของคุณจำข้อมูลได้แล้วจากคอร์ส database

แต่สิ่งที่มันยังไม่รู้คือ คนที่กำลังใช้แอปอยู่ตอนนี้เป็นใคร เพราะ database ตอนนี้ยังเห็นแค่ “มีข้อมูลหนึ่งแถวถูกเพิ่มเข้ามา” ไม่ได้เห็นว่า “ใครเป็นคนเพิ่ม”

เลยเกิดผลแบบนี้:

• คุณเพิ่มค่าใช้จ่าย 3 รายการ
• เพื่อนคุณเปิดแอปเดียวกัน
• เพื่อนคุณก็เห็น 3 รายการนั้นเหมือนกัน

นี่ไม่ใช่ bug แต่มันคือพฤติกรรมปกติของแอปที่ยังไม่มีระบบแยกผู้ใช้

ลองคิดว่าแอปตอนนี้เหมือนห้องเดียวที่ทุกคนเดินเข้าได้

ถ้าจะเปรียบง่ายที่สุด ตอนนี้แอปของคุณเหมือนห้องหนึ่งห้องที่มีไวท์บอร์ดอยู่กลางห้อง

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

สิ่งที่ขาดอยู่คือคนเฝ้าประตู

ระบบล็อกอินทำงานเหมือน รปภ.หน้าตึก

ลองนึกถึงอาคารที่มีหลายห้องอยู่ข้างใน

ถ้ายังไม่มี รปภ. หรือคนเฝ้าประตู ใครก็เดินเข้าไปห้องไหนก็ได้ เห็นของของใครก็ได้ เพราะไม่มีใครถามเลยว่าคุณเป็นใคร

แต่ถ้ามี รปภ. อยู่หน้าประตู ทุกอย่างจะเปลี่ยนไป

1. รปภ. ถามก่อนว่า “คุณเป็นใคร”
2. คุณแสดงตัวตน เช่น อีเมลกับรหัสผ่าน
3. รปภ. จำได้ว่าคุณเป็นคนนี้
4. แล้วให้คุณเข้าไปยังพื้นที่ของคุณเอง ไม่ใช่พื้นที่รวมของทุกคน

ในคอร์สนี้ ระบบล็อกอินก็ทำหน้าที่แบบนั้น

มันไม่ได้มีไว้แค่ให้ “เข้าระบบได้” แต่มันมีไว้ช่วยให้แอปรู้ว่า คนนี้คือใคร และข้อมูลไหนควรเป็นของเขา

สิ่งที่คุณกำลังจะแก้ในคอร์สนี้ จริงๆ คือเรื่อง “ความเป็นเจ้าของข้อมูล”

ก่อนหน้านี้ คุณเรียนรู้ว่าแอปต้องจำข้อมูลยังไง

คอร์สนี้จะเพิ่มอีกคำถามหนึ่ง คือข้อมูลแต่ละแถวเป็นของใคร

ลองนึกถึง spreadsheet เดิมของแอปค่าใช้จ่าย ถ้าทุกแถวไม่มีข้อมูลเจ้าของเลย ทุกคนก็ต้องเห็นทุกแถวเหมือนกันหมด

แต่ถ้าแต่ละแถวเริ่มมีคำตอบของคำถามว่า “แถวนี้เป็นของใคร” แอปก็จะเริ่มแยกโลกของแต่ละคนออกจากกันได้

นี่คือหัวใจของทั้งคอร์สนี้

ลองดูปัญหาด้วยตาตัวเองก่อน

บทนี้ยังไม่ต้องเพิ่มระบบล็อกอินเลย

สิ่งที่สำคัญกว่าคือให้คุณเห็นปัญหานี้ชัดๆ ก่อน จะได้รู้ว่าบทต่อไปเรากำลังแก้อะไร

ขั้นตอนที่ 1 — เปิดแอปในสองที่พร้อมกัน

1. เปิดแอปที่ deploy แล้วในแท็บปกติ
2. เปิดแอปเดียวกันอีกครั้งในหน้าต่าง incognito หรือ private window
3. วางสองหน้าจอนี้ไว้ข้างกันถ้าทำได้

ขั้นตอนที่ 2 — เพิ่มข้อมูลในหน้าต่างแรก

1. ในหน้าต่างแรก ลองเพิ่มค่าใช้จ่าย 1-2 รายการ
2. ใช้ชื่อที่จำง่าย เช่น ค่ากาแฟ หรือ ค่าแท็กซี่
3. ดูว่ารายการขึ้นบนหน้าจอตามปกติ

ขั้นตอนที่ 3 — ไปดูหน้าต่างที่สอง

1. กลับไปที่หน้าต่าง incognito
2. รีเฟรชหน้า 1 ครั้งถ้าจำเป็น
3. ดูว่ารายการที่คุณเพิ่งเพิ่ม ปรากฏอยู่ที่นี่ด้วยหรือไม่

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

สิ่งที่ระบบล็อกอินจะช่วยในบทถัดๆ ไป

หลังจากเพิ่มระบบล็อกอินแล้ว แอปของคุณจะค่อยๆ เปลี่ยนแบบนี้

• จากเดิมที่ทุกคนเดินเข้าห้องเดียวกัน
• ไปเป็นแต่ละคนต้องแสดงตัวก่อนเข้า
• แล้วสุดท้ายแต่ละคนจะเห็นเฉพาะข้อมูลของตัวเอง

คอร์สนี้จะค่อยๆ พาไปทีละขั้น:

1. เพิ่มหน้า signup และ login
2. ทำให้ข้อมูลของแต่ละคนแยกกัน
3. กันหน้าที่ยังไม่ควรเข้าถ้าไม่ได้ล็อกอิน
4. เพิ่ม login ด้วย Google ให้ใช้ง่ายขึ้น

คุณยังไม่ต้องจำทั้งหมดตอนนี้ แค่เห็นภาพรวมก่อนว่าระบบล็อกอินไม่ได้มีไว้แค่ “เข้าระบบได้” แต่มันมีไว้ทำให้ข้อมูลเป็นของแต่ละคนจริงๆ

สำหรับแอปของคุณเอง

ถึงเราจะใช้ expense tracker เป็นตัวอย่าง หลักเดียวกันใช้กับแอปทุกแบบ

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

คุณเพิ่งทำอะไรสำเร็จไปแล้วบ้าง

• คุณเห็นด้วยตาตัวเองแล้วว่าทำไมทุกคนถึงเห็นข้อมูลเดียวกัน
• คุณเข้าใจแล้วว่าปัญหาไม่ได้อยู่ที่ database พัง แต่คือแอปยังไม่รู้ว่าใครเป็นใคร
• คุณมีภาพในหัวแล้วว่าระบบล็อกอินทำงานเหมือน รปภ.หน้าตึก ที่คอยเช็กตัวตนก่อนพาเข้าพื้นที่ของแต่ละคน
• คุณรู้แล้วว่าคอร์สนี้กำลังจะเปลี่ยนแอปจากพื้นที่รวม ไปเป็นพื้นที่ส่วนตัวของแต่ละผู้ใช้

บทต่อไป เราจะเริ่มลงมือจริง เพิ่มหน้า signup, login และ logout ให้แอปของคุณมีประตูทางเข้าอย่างเป็นทางการสักที