สวัสดีครับเพื่อนๆ ชาวพันทิป 🙏
ใกล้ช่วงเทศกาลปีใหม่ + หยุดยาวแบบนี้ ผมเชื่อว่าหลายคนน่าจะมีแพลนขับรถเที่ยวต่างจังหวัดกับแก๊งเพื่อนหรือครอบครัวใช่ไหมครับ และปัญหาคลาสสิกที่ "คนขับ" หรือ "เหรัญญิกทริป" ต้องเจอก็คือ...
"การเคลียร์ค่าใช้จ่าย" โดยเฉพาะค่าน้ำมันครับ
"รถกินน้ำมันกี่บาท วิ่งไปกี่โลแล้ว?"
"ค่าทางด่วนบวกไปหรือยัง?"
"สรุปแล้วหารออกมาตกคนละกี่บาท?"
👉
ทางไปคำนวณ: https://golf-portfolio.vercel.app/playground/fuel-calculator
ปกติผมจะนั่งจิ้มเครื่องคิดเลขแล้วแคปหน้าจอส่งเข้าไลน์กลุ่ม ซึ่งบางทีก็บวกผิดบวกถูก เพื่อนงงบ้าง ผมเองก็งงบ้าง 😂 ด้วยความที่ผมพอเขียนโปรแกรมได้ และกำลังทำเว็บ Portfolio สะสมผลงานอยู่พอดี (ช่วงนี้ว่างครับ 555) ผมเลยตัดสินใจ
"เขียนเว็บแอปขึ้นมาแก้ปัญหานี้เองซะเลย"
ชื่อโปรเจกต์ว่า
"Fuel Calculator" ครับ ตั้งใจทำมาแจกให้เพื่อนๆ ใช้กันฟรีๆ ไม่มีการเก็บข้อมูลส่วนตัว และไม่มีโฆษณาแฝงครับ
📱 ฟีเจอร์หลัก (ทำอะไรได้บ้าง?)
(แนะนำให้แปะรูป Screenshot หน้าจอแอปตอนคำนวณเสร็จตรงนี้ 1 รูป)
โจทย์ของผมคือ
"ต้องจบงานได้ในหน้าเดียว และต้องไวกว่ากดเครื่องคิดเลขเอง" ผมเลยใส่ฟีเจอร์มาให้ตามนี้ครับ:
1. ⛽ ดึงราคาน้ำมัน Real-time อัตโนมัติ ไม่ต้องมานั่ง search Google ว่าวันนี้แก๊สโซฮอล์ 95 ลิตรละกี่บาท ระบบจะดึงราคากลางมาให้เลือกเลย (อัปเดตวันต่อวัน) หรือถ้าใครเติมปั๊มที่ราคาต่างออกไป ก็แก้ตัวเลขราคาเองได้ครับ
2. 🧮 มีเครื่องคิดเลขจิ๋ว (Mini Calculator) ในตัว อันนี้ภูมิใจนำเสนอมากครับ เพราะเวลาไปเที่ยว ค่าใช้จ่ายไม่ได้มีแค่น้ำมัน แต่มี
"ค่าทางด่วน",
"ค่าจอดรถ", หรือ
"ค่าน้ำแข็งเซเว่น" ที่กองกลางต้องจ่าย ผมเลยทำปุ่มเครื่องคิดเลขไว้มุมขวาบน กดเด้งขึ้นมาบวกเลขยิบย่อยพวกนี้ แล้วเอาไปรวมกับค่าน้ำมันได้เลย ไม่ต้องสลับแอปไปมาให้เวียนหัวครับ
3. 📲 Copy Result ส่งเข้า LINE ได้ทันที (ทีเด็ด) เลิกแคปหน้าจอส่งได้เลยครับ... พอกดคำนวณเสร็จ จะมีปุ่ม
"Copy Result" พอกดปุ๊บ มันจะสร้างข้อความสรุปสวยๆ ให้เลยว่า:
ระยะทางรวม: xxx กม.
ค่าน้ำมัน: xxx บาท
ค่าทางด่วน/อื่นๆ: xxx บาท
รวมสุทธิ: x,xxx บาท
(ตกคนละ: xxx บาท)
กดวางใน LINE Group ทวงตังค์เพื่อนได้ทันที ดูเป็นมืออาชีพและตรวจสอบง่ายครับ
🛠️ ช่วงสาระ: เบื้องหลังการเขียนโค้ด (สำหรับสาย Tech)
ขอแชร์เบื้องหลังการพัฒนาเผื่อเพื่อนๆ น้องๆ สาย Dev หรือคนที่สนใจอยากลองเขียนเว็บนะครับ โปรเจกต์นี้ผมพัฒนาโดยเน้น concept
"Micro-SaaS" คือเป็นบริการเล็กๆ ที่แก้ปัญหาเฉพาะจุด แต่ระบบหลังบ้านต้องเป๊ะครับ
Tech Stack:
Frontend: Next.js (App Router) + Tailwind CSS
Backend/Database: Supabase (PostgreSQL)
Challenge & Solution (ระบบ Caching): โจทย์ยากคือเรื่อง
"API ราคาน้ำมัน" ครับ ตอนแรกผมกะว่าจะยิง Request ไปขอราคาจาก Server ต้นทางทุกครั้งที่มีคนเข้าเว็บ แต่มานั่งคิดดูว่า...
"ราคาน้ำมันมันเปลี่ยนแค่วันละครั้ง (ตอนตี 5) ถ้างั้นเราจะยิงไปถามทุกครั้งทำไม?"
สมมติมีคนเข้าเว็บ 1,000 คน ยิง API 1,000 ครั้ง = เปลืองทรัพยากรมาก และเสี่ยง API ล่มด้วย ผมเลยแก้เกมด้วยการทำ
"Smart Caching" เก็บไว้ใน Database ตัวเองครับ
Logic การทำงาน:
เมื่อมีคนเข้าเว็บ ระบบจะเช็คใน Database (Supabase) ก่อนว่า
"วันนี้มีราคาน้ำมันหรือยัง?"
ถ้ามีแล้ว: ดึงจาก Database เราไปใช้เลย (เร็วมาก ระดับเสี้ยววินาที)
ถ้ายังไม่มี (คนแรกของวัน): ระบบถึงจะวิ่งไปดึงจาก API ต้นทาง แล้วบันทึกเก็บลง Database ไว้ให้คนคนที่ 2, 3, 4... ใช้ต่อ
วิธีนี้ช่วยลดการยิง API ภายนอกได้ถึง 99% และทำให้เว็บโหลดไวขึ้นมากครับ เป็น Case Study เรื่อง Performance ที่สนุกดีครับ
🎁 แจกวาร์ปไปลองเล่น
ใครมีทริปปีใหม่ หรือแค่อยากลองกดเล่นๆ ว่ารถเรากินน้ำมันกี่บาท ลองไปใช้กันได้เลยครับ ใช้ได้ทั้งบนมือถือ (Mobile Web) และคอมพิวเตอร์ครับ
👉
ทางไปคำนวณ: https://golf-portfolio.vercel.app/playground/fuel-calculator
ส่วนใครอยากอ่านเบื้องหลังแบบเจาะลึก (มีโค้ดตัวอย่าง) ผมเขียนบล็อกไว้ใน Medium ครับ:
👉
อ่านเบื้องหลังการสร้าง : https://medium.com/@panja.sasithonwan/เบื้องหลัง-panja-portfolio-ep-4-f2e72106b5ee
ลองใช้แล้วติดขัดตรงไหน หรืออยากได้ฟีเจอร์อะไรเพิ่ม เมนต์บอกกันได้เลยนะครับ ขอให้ทุกคนเดินทางปลอดภัย เที่ยวปีใหม่ให้สนุกครับ! 🚗💨
ขอบคุณครับ
[ใช้ดีจริง] หมดปัญหา "ทริปนี้ใครจ่ายเท่าไร?" แจกเว็บคำนวณค่าน้ำมัน+หารค่าทริป ดึงราคาจริงอัตโนมัติ
ใกล้ช่วงเทศกาลปีใหม่ + หยุดยาวแบบนี้ ผมเชื่อว่าหลายคนน่าจะมีแพลนขับรถเที่ยวต่างจังหวัดกับแก๊งเพื่อนหรือครอบครัวใช่ไหมครับ และปัญหาคลาสสิกที่ "คนขับ" หรือ "เหรัญญิกทริป" ต้องเจอก็คือ... "การเคลียร์ค่าใช้จ่าย" โดยเฉพาะค่าน้ำมันครับ
"รถกินน้ำมันกี่บาท วิ่งไปกี่โลแล้ว?"
"ค่าทางด่วนบวกไปหรือยัง?"
"สรุปแล้วหารออกมาตกคนละกี่บาท?"
👉 ทางไปคำนวณ: https://golf-portfolio.vercel.app/playground/fuel-calculator
ปกติผมจะนั่งจิ้มเครื่องคิดเลขแล้วแคปหน้าจอส่งเข้าไลน์กลุ่ม ซึ่งบางทีก็บวกผิดบวกถูก เพื่อนงงบ้าง ผมเองก็งงบ้าง 😂 ด้วยความที่ผมพอเขียนโปรแกรมได้ และกำลังทำเว็บ Portfolio สะสมผลงานอยู่พอดี (ช่วงนี้ว่างครับ 555) ผมเลยตัดสินใจ "เขียนเว็บแอปขึ้นมาแก้ปัญหานี้เองซะเลย"
ชื่อโปรเจกต์ว่า "Fuel Calculator" ครับ ตั้งใจทำมาแจกให้เพื่อนๆ ใช้กันฟรีๆ ไม่มีการเก็บข้อมูลส่วนตัว และไม่มีโฆษณาแฝงครับ
📱 ฟีเจอร์หลัก (ทำอะไรได้บ้าง?)
(แนะนำให้แปะรูป Screenshot หน้าจอแอปตอนคำนวณเสร็จตรงนี้ 1 รูป)
โจทย์ของผมคือ "ต้องจบงานได้ในหน้าเดียว และต้องไวกว่ากดเครื่องคิดเลขเอง" ผมเลยใส่ฟีเจอร์มาให้ตามนี้ครับ:
1. ⛽ ดึงราคาน้ำมัน Real-time อัตโนมัติ ไม่ต้องมานั่ง search Google ว่าวันนี้แก๊สโซฮอล์ 95 ลิตรละกี่บาท ระบบจะดึงราคากลางมาให้เลือกเลย (อัปเดตวันต่อวัน) หรือถ้าใครเติมปั๊มที่ราคาต่างออกไป ก็แก้ตัวเลขราคาเองได้ครับ
2. 🧮 มีเครื่องคิดเลขจิ๋ว (Mini Calculator) ในตัว อันนี้ภูมิใจนำเสนอมากครับ เพราะเวลาไปเที่ยว ค่าใช้จ่ายไม่ได้มีแค่น้ำมัน แต่มี "ค่าทางด่วน", "ค่าจอดรถ", หรือ "ค่าน้ำแข็งเซเว่น" ที่กองกลางต้องจ่าย ผมเลยทำปุ่มเครื่องคิดเลขไว้มุมขวาบน กดเด้งขึ้นมาบวกเลขยิบย่อยพวกนี้ แล้วเอาไปรวมกับค่าน้ำมันได้เลย ไม่ต้องสลับแอปไปมาให้เวียนหัวครับ
3. 📲 Copy Result ส่งเข้า LINE ได้ทันที (ทีเด็ด) เลิกแคปหน้าจอส่งได้เลยครับ... พอกดคำนวณเสร็จ จะมีปุ่ม "Copy Result" พอกดปุ๊บ มันจะสร้างข้อความสรุปสวยๆ ให้เลยว่า:
ระยะทางรวม: xxx กม.
ค่าน้ำมัน: xxx บาท
ค่าทางด่วน/อื่นๆ: xxx บาท
รวมสุทธิ: x,xxx บาท
(ตกคนละ: xxx บาท)
กดวางใน LINE Group ทวงตังค์เพื่อนได้ทันที ดูเป็นมืออาชีพและตรวจสอบง่ายครับ
🛠️ ช่วงสาระ: เบื้องหลังการเขียนโค้ด (สำหรับสาย Tech)
ขอแชร์เบื้องหลังการพัฒนาเผื่อเพื่อนๆ น้องๆ สาย Dev หรือคนที่สนใจอยากลองเขียนเว็บนะครับ โปรเจกต์นี้ผมพัฒนาโดยเน้น concept "Micro-SaaS" คือเป็นบริการเล็กๆ ที่แก้ปัญหาเฉพาะจุด แต่ระบบหลังบ้านต้องเป๊ะครับ
Tech Stack:
Frontend: Next.js (App Router) + Tailwind CSS
Backend/Database: Supabase (PostgreSQL)
Challenge & Solution (ระบบ Caching): โจทย์ยากคือเรื่อง "API ราคาน้ำมัน" ครับ ตอนแรกผมกะว่าจะยิง Request ไปขอราคาจาก Server ต้นทางทุกครั้งที่มีคนเข้าเว็บ แต่มานั่งคิดดูว่า... "ราคาน้ำมันมันเปลี่ยนแค่วันละครั้ง (ตอนตี 5) ถ้างั้นเราจะยิงไปถามทุกครั้งทำไม?"
สมมติมีคนเข้าเว็บ 1,000 คน ยิง API 1,000 ครั้ง = เปลืองทรัพยากรมาก และเสี่ยง API ล่มด้วย ผมเลยแก้เกมด้วยการทำ "Smart Caching" เก็บไว้ใน Database ตัวเองครับ
Logic การทำงาน:
เมื่อมีคนเข้าเว็บ ระบบจะเช็คใน Database (Supabase) ก่อนว่า "วันนี้มีราคาน้ำมันหรือยัง?"
ถ้ามีแล้ว: ดึงจาก Database เราไปใช้เลย (เร็วมาก ระดับเสี้ยววินาที)
ถ้ายังไม่มี (คนแรกของวัน): ระบบถึงจะวิ่งไปดึงจาก API ต้นทาง แล้วบันทึกเก็บลง Database ไว้ให้คนคนที่ 2, 3, 4... ใช้ต่อ
วิธีนี้ช่วยลดการยิง API ภายนอกได้ถึง 99% และทำให้เว็บโหลดไวขึ้นมากครับ เป็น Case Study เรื่อง Performance ที่สนุกดีครับ
🎁 แจกวาร์ปไปลองเล่น
ใครมีทริปปีใหม่ หรือแค่อยากลองกดเล่นๆ ว่ารถเรากินน้ำมันกี่บาท ลองไปใช้กันได้เลยครับ ใช้ได้ทั้งบนมือถือ (Mobile Web) และคอมพิวเตอร์ครับ
👉 ทางไปคำนวณ: https://golf-portfolio.vercel.app/playground/fuel-calculator
ส่วนใครอยากอ่านเบื้องหลังแบบเจาะลึก (มีโค้ดตัวอย่าง) ผมเขียนบล็อกไว้ใน Medium ครับ:
👉 อ่านเบื้องหลังการสร้าง : https://medium.com/@panja.sasithonwan/เบื้องหลัง-panja-portfolio-ep-4-f2e72106b5ee
ลองใช้แล้วติดขัดตรงไหน หรืออยากได้ฟีเจอร์อะไรเพิ่ม เมนต์บอกกันได้เลยนะครับ ขอให้ทุกคนเดินทางปลอดภัย เที่ยวปีใหม่ให้สนุกครับ! 🚗💨
ขอบคุณครับ