ลองหลายตัว แต่ไม่ชอบ
เรื่องจดรายจ่ายนี่เราลองมาหลายแอพแล้ว แต่ไม่เคยใช้ได้นานซักตัว พอมานั่งไล่ดูว่าทำไมถึงเลิกใช้ ก็ได้คำตอบ
- หน้าตาไม่สวย อันนี้ข้อแรกเลย กราฟ สี ไอคอน อัดมาเต็มจอ เหมือนคนในห้องแน่นๆ
- ไม่มีค่าเงินบาท ส่วนมากเป็น dollar
- ต้องเลือกหมวดหมู่ทุกครั้งที่บันทึก
ส่วนตัว เราอยากได้อะไรที่เรียบมากๆ อารมณ์แบบ Dieter Rams มาทำแอพให้ใช้ ซึ่งหาแบบที่ถูกใจไม่เจอ ก็เลยคิดว่า งั้นทำเองเลยละกัน
ออกตัวก่อนว่าเราเขียนโค้ดไม่เป็น ทั้งหมดนี้คือคุยกับ Grok Bot เป็นภาษาไทยล้วนๆ พิมพ์บอกไปตรงๆว่าอยากทำแอพบันทึกค่าใช้จ่ายของตัวเอง แต่ยังนึกไม่ออกว่าจะหา pain point ยังไง
มันไม่ได้รีบทำให้เลย แต่ถามกลับมาทีละข้อ ว่าเคยใช้แอพไหนแล้วไม่ชอบตรงไหน ตอนจดรู้สึกช้าหรือยุ่งยากจังหวะไหน คุยไปไม่กี่นาทีก็ได้สามข้อข้างบนมา แล้วมันสรุปเป็นประโยคเดียวว่า “จดรายจ่ายเป็นเงินบาทได้ในแตะเดียว บนหน้าจอที่เงียบที่สุด” อ่านแล้วเออ..ใช่ อันนี้แหล่ะที่อยากได้
จากนั้นก็บอกไปว่าอยากได้หน้ารวมรายการเป็น pie chart สไตล์ Rams เรียบ สวย คุมโทน ไม่กี่นาที mockup สองหน้าก็ส่งมาให้ดู หน้าจดรายจ่ายใช้แป้นตัวเลขแรงบันดาลใจจากเครื่องคิดเลข Braun ET66 ส่วนหน้าสรุปเป็นโดนัทเส้นบางๆมีขีดสเกลรอบวงเหมือนหน้าปัด Braun ใช้สีส้มแค่หมวดที่ใช้เงินเยอะสุด ที่เหลือเป็นเทาหมด
ดูแล้วชอบ แต่ขอธีมสีมืดเพิ่ม เอาเป็นสามชุดให้เปลี่ยนเองได้ทีหลัง แล้วก็แผงปุ่มกดไม่อยากให้เหมือนเครื่องคิดเลขเกินไป ขอมีมิตินิดนึง แบ่งให้อยู่ซักครึ่งจอ รอบที่สองก็ได้มาครบ ธีมสว่าง ธีมมืดโทนถ่านอุ่นๆที่ไม่ดำสนิท และธีมทรายสีครีมแบบวิทยุ Braun SK4 ที่เปลี่ยนสีเน้นเป็นเขียวมะกอก ปุ่มกดเป็นถาดนูนเล็กน้อยกินพื้นที่ล่างประมาณ 48% ของจอ ปุ่มบันทึกเป็นแถบยาวเต็มความกว้าง
คุยกันแบบนักออกแบบคุยกับนักออกแบบแอพเลย ไม่ต้องอธิบายเยอะ คิดคอนเสปต์แล้วรอผลมา เราเป็น curator ที่คุมดีไซน์เนอร์อีกมี
บาท
ตัวงานจริงให้ผู้ช่วยเขียนโค้ดบน Cursor เป็นคนเขียน Grok Bot ส่งดีไซน์กับรายละเอียดไปให้ ระหว่างรอเราก็นึกอะไรได้ก็สั่งเพิ่ม ประมาณสี่สิบนาทีเวอร์ชันแรกก็เสร็จ ตั้งชื่อชั่วคราวว่า “บาท” ไปเลย ง่ายดี
- เปิดมากดตัวเลข บันทึกได้ในแตะเดียว เป็นเงินบาทตั้งแต่แรก
- หมวดหมู่ไม่บังคับ แอพเดาไว้ให้ ถ้าไม่แตะก็เก็บเป็น “ไม่ระบุ”
- มีสี่แถบ บันทึก / สรุป / รายการ / ตั้งค่า
- หน้าสรุปเป็นโดนัทแบบที่ออกแบบไว้ หน้ารายการเอาไว้แก้หรือลบ
- เปลี่ยนได้สามธีม
- ข้อมูลเก็บในเครื่อง ใช้แบบไม่มีเน็ตได้ export เป็น CSV ได้ สำรองและนำกลับเข้าเป็นไฟล์ได้
- back up ผ่าน Google Drive อันนี้เราขอเพิ่มทีหลัง
ตัวเลขยอดเงินเดือนนั้นที่เห็นในภาพตัวอย่างเป็นข้อมูลสมมุตินะ ไม่ใช่ของเราจริง
Idea to Home Screen
ไล่ตามเวลาจริงของวันนี้ประมาณนี้
- 15:57 บอกไอเดีย คุยหา pain point
- 16:03 ได้ mockup แรก 16:09 ได้สามธีมกับปุ่มกดแบบใหม่
- 16:10 สั่งให้เริ่มสร้างเป็น web app
- 16:19 – 16:20 ขอให้ติดตั้งลงมือถือได้เหมือนแอพ และเพิ่ม back up ลง Google Drive
- 16:50 เวอร์ชันแรกเสร็จ เก็บโค้ดไว้เป็นโปรเจกต์ส่วนตัว
- 16:57 สมัคร Cloudflare ด้วย account Google ตัวเอง
- 17:04 เว็บขึ้นออนไลน์ เปิดใน Safari กดแชร์ “เพิ่มไปยังหน้าจอโฮม” ได้ไอคอนบน iPhone เปิดมาเต็มจอเหมือนแอพทั่วไป
ตั้งชื่อเรื่องไว้ว่า 2 ชั่วโมง แต่นับจริงๆตั้งแต่พิมพ์ไอเดียแรกจนแอพอยู่บนมือถือคือชั่วโมงเจ็ดนาที ที่เหลือคือเวลาที่ลองใช้แล้วก็นั่งขอแก้นู่นนี่ต่อ ซึ่งยังไม่จบ..
ไม่ยาก แต่ ไม่ง่าย
ไม่ได้ราบรื่นไปซะทุกอย่าง ตอนแรกเราอยากเอาขึ้น App Store เลย พอรู้ว่าต้องสมัคร Apple Developer Program ปีละ 99 ดอลลาร์ แล้วต้อง build บน Mac ที่มี Xcode ซึ่งคอม Windows ทำขั้นนี้ไม่ได้ ก็เลยพักไว้ก่อน มาใช้วิธี PWA แทน คือเปิดจากเว็บแล้วเพิ่มลงหน้าจอโฮม ใช้งานได้แทบไม่ต่างกัน
ตอนจะเอาเว็บขึ้นออนไลน์ แผนแรกคือใช้ Vercel แต่ปรากฏว่าโปรเจกต์ส่วนตัวแบบนี้ต้องใช้แพ็กเกจ Pro ที่เสียเงินรายเดือน เลยเปลี่ยนมาใช้ Cloudflare แพ็กเกจฟรีแทน ส่วนนี้เราต้องลงมือเองนิดหน่อย สมัครบัญชี ติดตั้งแอพเชื่อมโปรเจกต์ แล้วกรอกค่าตั้งค่าตามที่ Grok Bot ส่งมาให้ทีละช่อง ข้อดีคือต่อไปแก้อะไร เว็บจะอัปเดตเอง ไม่ต้องติดตั้งใหม่
อีกเรื่องคือ Google Drive ระบบทำไว้ครบแล้ว แต่ยังกดใช้ไม่ได้จนกว่าจะไปสร้างรหัสเชื่อมต่อใน Google Cloud อีกขั้น และบน iPhone ตอนกดเชื่อม Drive จากแอพที่อยู่บนหน้าจอโฮม บางทีมันเด้งไปเปิดใน Safari แทน ต้องลองดูกันต่อ
ที่เซอร์ไพรส์จริงๆคือ ส่วนที่ใช้เวลาที่สุดไม่ใช่การเขียนโค้ด แต่เป็นการตัดสินใจว่าเราอยากได้อะไร
สรุป
ลองใช้ไปแป๊บเดียวก็ขอแก้อีกแล้ว ให้แถบเมนูด้านบนดูออกชัดๆว่าเป็นเมนู กับเพิ่มให้สร้างหมวดหมู่ค่าใช้จ่ายเองได้ ตอนนี้กำลังทำอยู่ ใครอยากลองทำแอพเองบ้าง จากที่ลองมาวันนี้
- เริ่มจากสิ่งที่ไม่ชอบในแอพที่เคยใช้ นั่นแหล่ะคือ pain point ตัวจริง
- ขอดู mockup ก่อนสั่งสร้าง แก้ตอนเป็นภาพถูกกว่าแก้ตอนเป็นแอพเยอะ
- ไม่ต้องขึ้น App Store ก็ได้ ถ้าใช้เองคนเดียว PWA ก็เวิร์คแล้ว
- ถามเรื่องค่าใช้จ่ายของแต่ละขั้นไว้ก่อน อย่าง Vercel กับ Cloudflare นี่ต่างกันเลย
- ข้อมูลอยู่ในเครื่อง อย่าลืม back up
ไว้ใช้ไปซักเดือนจะมาเล่าต่อ ว่าเงินรั่วไปตรงไหนบ้าง..