web analytics

มีอะไรใหม่ใน Benznest Wallet 2.0

cover-2x

 

หลังจากที่ผมได้นำเสนอ Benznest Wallet เป็นแอปรายรับรายจ่ายของผมเอง และได้นำมาใช้บันทึกรายรับรายจ่าย 1 เดือนระหว่างฝึกงานอยู่ กทม  และผมก็พบปัญหาหลายๆอย่างในการใช้งาน แต่หลักๆก็ใช้งานได้อยู่ ผมอยากจะให้มันดีขึ้น จึงได้ฤกษ์วางเสาเข็ม ปรับปรุงใหม่เป็นเวอชัน 2 เย้ๆ บทความนี้ผมจึงจะมาสรุปสิ่งที่ได้ทำไปทั้งหมด

อ่านบทความเดิมได้ที่

https://benzneststudios.com/blog/benznest-app/30days-my-expend-during-internship-in-bangkok/

 

หน้าล็อคอินใหม่

หน้าล็อคอินเป็นหน้าตอนรับเลยก็ว่าได้ ผมจึงตกแต่งใหม่ให้ดูดีขึ้น (ผมชอบนะ) ผมนำไอคอนมาใช้ด้วย มันจะได้รู้สึกไม่แข็งเกินไป ส่วนหน้าสมัครสมาชิกไม่ได้ปรับแต่งมากนัก

 

1

 

หน้าแรก

เมื่อล็อคอินเข้ามาจะพบหน้าแรก หรือหน้าหลัก หน้านี้ไม่ต่างจากเดิมนัก ผมแค่นำไอคอนสีแบบ Flat  มาใส่ลงไป แทนการใช้ไอคอนแบบ font หน้านี้พอเข้ามาครั้งแรกจะมีป็อปอัพทางลัดด้วย เพราะผมคิดว่า ส่วนใหญ่คน ถ้ารีบๆคงอยากจะไปหน้า add มากกว่า แต่ก็ไม่แน่ใจว่าจะเอาหน้า add เป็นหน้าแรกเลยจะดีหรือป่าว

 

2

 

หน้าเพิ่มรายการ

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

 

3

 

 

เมื่อกดบันทึกแล้ว ก็จะมีแจ้งเตือนโผล่ขึ้นมาที่ล่างซ้าย เหมือน facebook จากเดิมที่เป็นตัวหนังสือขึ้นด้านบนเฉยๆ

 

4

 

 

หน้าแสดงรายการทั้งหมด

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

 

5

 

แก้ไขและลบรายการ

พอกดที่ไอคอนแก้ไข ก็จะปรากฏหน้าต่างแก้ไข แล้วก็แก้ไขได้เลย ผมเลือกใช้ Modal (หน้าต่างในรูป) แทนการเปลี่ยนหน้าไปหน้าใหม่ จะได้ดูน่าใช้ ลื่นใหลมากขึ้น และผมเลือกใช้การบันทึกแบบไม่เปลี่ยนหน้าด้วย (Ajax) จะได้ไม่ต้องโหลดแล้วมาแสดงใหม่ หลังจากจัดการแล้วก็จะมีหน้าต่างแจ้งเตือนอีกครั้งด้วย ผู้ใช้จะได้เข้าใจว่าเกิดอะไรขึ้นแล้ว

 

6

7

 

สามารถกรองดูแบบแยกตามประเภทได้

13

 

 

หรือจะแยกกรองเป็นวันก็ทำได้เช่นกัน ผมใช้สีแสดงตัวหนังสือที่สื่อมากขึ้น จากเดิมที่ดำไปหมด

14

 

แยกดูเป็นเดือนหรือปี

 

15

 

หรือถ้ากดเข้าไปดูในแต่ละวันก็จะเป็นกราฟสัดส่วนรายรับรายจ่าย

 

24

 

หน้ารายงานสรุป

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

 

8

 

 

ประเภทรายจ่ายก็ใส่ไอคอนลงไป จากเดิมที่มีแต่ตางราง ดูดีขึ้นมาทันทีเลยแหะ

9

 

 

การแสดงบางอย่างมันก็มีท่าทีว่าจะเพิ่มขึ้นเรื่อยๆ ผมก็แยกมาเป็นอีกหน้าต่างนึง โดยกดที่ปุ่มแสดงเพิ่มเติม จะได้ประหยัดพื้นที่ด้วย

10

 

เพิ่มกราฟวงกลมด้วย เป็นกราฟประเภทรายรับรายจ่าย

11

 

 

ส่วนแผนภูมิรายจ่ายแต่ละวัน และค่าอาหารก็เพิ่มแยกเป็น 7 ,14,30 ,60วันล่าสุด

12

 

หน้าตั้งค่า

หน้าตั้งค่าผมเพิ่มมาใหม่ในเวอชันนี้ หลักๆเลยคือทำให้มันยืดหยุ่นมากขึ้น เช่นปรับชื่อแอปได้ แฮ่ๆ เผื่ออยากเปลี่ยนชื่อใหม่ๆ หรืออยากเอาแถบเงินเมนูออกก็ทำได้ ส่วนภาษายังรองรับเฉพาะภาษาไทยก่อน

16-1

 

 

ข้อมูลส่วนตัว พวกชื่อก็แก้ไขได้ หรือจะเปลี่ยนรหัสผ่านก็ได้เช่นกัน

17

 

พูดถึงเรื่องรหัสผ่าน บางคนกลัวว่า เห้ย ผมจะรู้รหัสผ่านรึปล่าว เดี๋ยวเอาไปแฮ็คเมลได้ ผมบอกได้เลยว่าผมไม่ได้มีการดักเก็บรหัสผ่านอะไร (มีจริยธรรม เรียนมานะ) แม้แต่ในฐานข้อมูลก็เข้ารหัสไว้ด้วย hash ดังนั้นผมไม่รู้รหัสผ่านของผู้ใช้เลย

18

 

 

หน้าสำรองข้อมูล ถ้ากดที่สำรองข้อมูลจะเป็นการ copy ข้อมูลของผู้ใช้ไปอีกตารางหนึ่ง ส่วนซิงค์จะเอาไว้ใช้ในกรณีบน localhost ของผมเอง แล้วยิงไปเก็บข้อมูลบนเซิฟเวอร์ ถ้าใช้งานบนโฮสอยู่แล้วเมนูนี้จะไม่เปิดใช้งาน

19

 

 

หน้าส่งออก และนำเข้า อันนี้ผมเตรียมเอาไว้ใช้ สามารถส่งออกไฟล์เป้น .csv .xls ได้ แล้วในอนาคตจะทำให้มัน import เข้ามาได้ด้วย

20

 

 

ตัวอย่างไฟล์รายการ ที่ export ออกมา

21

 

 

หน้าล้างข้อมูล เอาไว้ลบทุกอย่างออก ไม่น่าจะมีคนใช้หรอกมั้ง ไม่รู้จะทำไว้ทำไม (:

22

 

 

ไหนๆก้ไหนๆแล้ว ผมเห็นแอปคนอื่นมีเมนู developer ด้วย ผมก็เลยใส่รูปผมเข้าไปด้วย คงไม่มีคนมาดูเท่าไหร่ ทำแล้วมันมีความสุขอย่างบอกไม่ถูกแฮะ แล้วก็ใส่ caption ที่มาของโปรแกรมไปด้วยเลย

23

 

สามารถใช้งานได้ที่
http://benzneststudios.com/benznestwallet

สรุป

บทความนี้พามาดูว่าผมได้ทำอะไรไปบ้าง เป็นการสรุปผลต่างๆที่ได้ลงมือทำไป สนุกมากเลยทีเดียว ได้เรียนรู้ปรับปรุง ฟีเจอร์ต่างๆ พวก UX และไลบรารี่เพิ่มเติมด้วย ตอนนี้ผมนำไปแนะนำให้เพื่อนๆลองใช้ดู และติชมมาบ้าง สนใจบ้าง ไม่สนใจบ้าง มีคนใช้สักคน สองคน ก็ดีใจมากๆแล้ว อย่างน้อยก็มีตัวผมเองใช้ ฮ่าๆ จะพัฒนาให้ดีขึ้นเรื่อยๆ หวังว่าโปรแกรมนี้จะมีประโยชน์ครับสำหรับคนที่ต้องการบันทึกรายรับรายจ่าย จะได้เห็นแนวทาการใช้เงินด้วย ผู้อ่านสามารถแนะนำติชมได้เช่นเดิม

ขอบคุณที่ติดตามครับ (: