web analytics

บันทึกการทำแอป Wallet Story 5 ตอนที่ 1

สวัสดีครับ บล็อกนี้จะบันทึกการทำแอป Wallet Story ของผมเอง เป็นบันทึกการเดินทางของ Wallet Story เขียนขึ้นเพื่อให้ตัวผมเองในอนาคตได้รำลึกการทำแอป Wallet Story ในครั้งนี้ หากท่านหลงเข้ามาอ่านอาจจะไม่เข้าใจ เพราะมีหลายอย่างที่เป็นศัพท์เทคนิคและผมน่าจะเข้าใจอยู่คนเดียว ต้องขอโทษด้วยนะครับ

เริ่มต้น

แอป Wallet Story 5 เป็นแอปบันทึกรายรับรายจ่ายที่ทำมาตั้งแต่ผมเริ่มรู้จักการพัฒนาแอปหรือการเขียน Mobile App โดยแอปนี้เป็นแอปที่ทำเองคนเดียวทั้งหมด ทั้งออกแบบแอป เขียนแอป รวมทั้งส่วน API และ back end

ก่อนจะมาเป็น Wallet Story 5 ในตอนนี้ ขอเล่าคร่าวๆนะครับ แอปนี้ผมเริ่มทำมาตั้งแต่ช่วงเรียนมหาวิทยาลัยปี 4 ก็ทำมาเรื่อยๆ ตอนนั้นเริ่มเขียนจากหัดเขียน Android native (JAVA) คิดว่าอยากจะทำงานด้าน Android Dev เลยอยากจะหาแอปหรือผลงานอะไรมาทำเป็น portfolio เพื่อเวลาเราไปสมัครงานจะได้บอกได้ว่าเราทำอะไรได้บ้าง เลยเริ่มลองทำแอปอะไรสักตัวเป็นของตัวเอง เป็นงานอดิเรกด้วยและฝึกฝนตัวเองด้วย แล้วก็ทำแอปนี้มาเรื่อยๆ เริ่มจาก v1 จนถึง v4 เวลาผ่านไปประมาณ 2 ปี (เรียนจบและทำงานแล้ว) ราวๆต้นปี 2018 แอปมีผู้ใช้งาน active user ประมาณ 1,500 คน แต่ทว่าก็เกิดจากความผิดพลาดของผมเอง บัญชี google developer โดนแบนและติด black list ทำให้แอปถูกลบไปทุกแอป ตอนนั้นก็ไม่รู้จะแก้ปัญหายังไง เครียดเลยล่ะ แม้ว่าจะลองสมัครใหม่และย้ายให้ผู้ใช้มาใช้แอปเดิมในบัญชีใหม่ แต่ก็ยังโดนแบน (โดนตามแบน) ผมทำวนซ้ำอยู่ราว 3 ครั้ง ก็เริ่มท้อ เพราะต้องให้ user โหลดแอปและย้ายข้อมูลใหม่ ยุ่งยากมากๆ

ทางเลือก

ทางเลือกในตอนนั้นคือไม่ทำต่อแล้ว พอแค่นี้ หรือเราจะทำต่อไป ที่คิดในตอนนั้นก็คือ ไม่อยากทิ้ง user ที่เขาใช้แอปของเราบันทึกรายรับรายจ่าย อีกทั้งยังมีหลายๆคนที่อุดหนุนซื้อแอปเวอร์ชัน Pro และรายการอื่นๆด้วย นั่นก็เพราะเขาเห็นความสำคัญว่าแอปของเราตอบโจทย์ไม่ใช่เหรอ ทำให้ผมตัดสินใจที่จะทำต่อ แต่ด้วยจนหนทางจริงๆสำหรับแอปใน Google Play เลยหยุด support แอปเดิม และเริ่มหาแนวทางเพื่อพัฒนาแอปแบบ Cross Platform และเน้นผู้ใช้ใน iOS แทน และสำหรับ Android ก็อาจจะให้ดาวน์โหลดแบบไฟล์ apk หรือดาวน์โหลดจาก AppGallery หรืออื่นๆ แต่ก็ไม่รู้ว่าจะต้องใช้เวลาแค่ไหนกว่าผมจะทำแอปนี้ขึ้นมาใหม่ทั้งหมดอีกครั้ง เพราะอย่างที่กล่าวไปคือเป็นแอปที่ผมทำคนเดียวทั้งหมด

เวลานั้น ประมาณช่วงปี 2018 ผมก็เริ่มลองเรียนรู้ทั้ง React-native และจนมาถึง Flutter และตัดสินใจว่าจะใช้ Flutter ในการมาพัฒนาแอป Wallet Story ให้เกิดขึ้นอีกครั้ง

ผมยังเคยเขียนบล็อกสรุป งาน Flutter Live 2018 ซึ่งเป็นงานใหญ่แรกๆของ Flutter น่าจะเป็นงานแรกเลย และมีการประกาศถึงการมาของ Flutter 1.0 จัดขึ้นในเดือน ธ.ค. 2018

v5.0.0 (a)

ในปี 2018 ผมได้ลองเล่น Flutter โดยตอนนั้นยัง beta อยู่ พยายามทำแอป Wallet Story ใหม่ ผมเรียกว่า v5 พยายามลอกแบบคล้ายๆกับแอปเดิมใน v4 (ขอเรียก Wallet Story 4 สั้นว่า v4) ตอนนั้นก็ลองผิดลองถูกไปเรื่อยๆ ลองเล่นโน้นเล่นนี่อยู่เกือบปี จนถึงจุดนึงที่เราเข้าใจ Flutter มากขึ้นแล้ว ผมตัดสินใจที่จะลบ project นี้ และทำใหม่ทั้งหมดอีกครั้ง เพราะ code มันเละเกินเยียวยา อันนี้เป็นภาพหน้าตาแอปในตอนนั้น


v5.0.0 (b)

หลังจากลบ v5 ที่ลองผิดลองถูกไปแล้ว ก็เริ่มต้นใหม่อีกครั้ง รอบนี้วางแผนมาดีกว่าเดิม เพราะได้ประสบการณ์มาบ้างแล้ว มีความเข้าใจ Flutter มากขึ้น ในเดือน พ.ย. 2019 ก็เริ่มขึ้นโครงตัวแอปทำเมนูหน้าหลักๆทั้งหมด รวมทั้งส่วนฐานข้อมูลด้วย ตอนนั้นทำงานประจำตอนกลางวัน + OT เลิกงาน 3 ทุ่ม ก็จะกลับมาทำ Wallet Story 5 ต่อ ได้วันละ 2-3 ชม. และจะได้งานเยอะหน่อยก็คือช่วงเสาร์-อาทิตย์เพราะได้ทำทั้งวัน

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

โดยแอป v5 พวก UI และการใช้งานจะต่างจาก v4 นิดหน่อย คือใน v4 พวกเมนูฟีเจอร์ต่างๆจะอยู่ใน Drawer แต่ใน v5 จะอยู่ใน Tab ในหน้าหลักเลย อันนี้พยายามอิงตาม iOS เพราะจะเน้นผู้ใช้ใน iOS เป็นหลัก

พ.ย. 2019

ลองเรียบเรียง Timeline ตาม Git commit ครับ (อ่านแล้วไม่เข้าใจไม่เป็นไรนะ ฮ่าๆ)
เริ่มต้นเดือน พ.ย. 2019 เป้าหมาย คือพยายามทำส่วนหลักๆในแอปให้ได้ก่อน

6 Nov 2019 : Splash screen + App structure
7 Nov 2019 : Overview page
9-10 Nov 2019 : Account Manager + Theme + Menu page + Money overview
11 Nov 2019 : Database + category
13 Nov 2019 : Creating Tx + Sub-category
14 Nov 2019 : Add tx-sub-category + subcategory screen + sub-category dialog.
15 Nov 2019 : Fix bugs sub-category
16 Nov 2019 : Summary provider + Tx provider + Bank account screen + Bank manager + CRUD bank account
17 Nov 2019 : Subcategory Manager + Summary account overview + Summary provider + Tx Manager + Categort Form + Choose categort dialog + Tx form + Date utils + Summary today widget.
18 Nov 2019 : Tag screen + summary manager + summary page
19 Nov 2019 : Debt screen + revenue receivable scrren + dialy budget + tx view segmented.
20 Nov 2019 : Daily budget (cont.)
21 Nov 2019 : Dialy budget specific date
22 Nov 2019 : Daily budget specific category
23 Nov 2019 : Monthly budget (specific month) + Monthly budget (specific category) + Yearly budget + Yearly budget (specific month) + Yearly budget (specific category)
24 Nov 2019 : Budget manager + Budget validation + Overview budget
25 Nov 2019 : Full summary screen.
27 Nov 2019 : Choose day in monthly dialog.
30 Nov 2019 : Add daily summary screen + daily summary table page.

จบเดือน พ.ย. 2019 ฟีเจอร์ยังขาดอีกหลายอย่าง แอปก็เป็นรูปเป็นร่างมากขึ้น เดือนนี้เป็นเดือนแรกที่ทำจริงจังมาก เหนื่อยมากจริงๆ เพราะเลิอก OT 3 ทุ่ม แล้วกลับมาทำโปรเจคนี้อีก 2-3 ชม ซึ่งเป็นงานที่ไม่รู้จะไปคุยหรือปรึกษากับใครได้ บางทีก็คิดในใจว่า นี่เราทำอะไรอยู่ว่ะเนี้ย แต่เราตั้งเป้าหมายไว้แล้วและเราจะทำมันให้เสร็จ

ธ.ค. 2019

เดือน ธ.ค. 2019 ส่วนหลักๆของเดือนนี้มี 2 ส่วน คือ ส่วนแรกคือการนำเข้าข้อมูลจาก v4 มายัง v5 เพื่อให้ user สามารถสำรองข้อมูลได้สะดวก เรื่องนี้แอบเป็นเรื่องที่ยากอยู่พอสมควร ต้องขอไฟล์ข้อมูลจากผู้ใช้งานมาเพื่อทดสอบการทำงาน ผมจึงโพสเพื่อขออาสาสมัครให้ช่วยส่งไฟล์ข้อมูลมาให้ผมทดสอบ

จากนั้นก็มีหลายท่านส่งไฟล์เข้ามาให้ผมทำการทดสอบ ขอบคุณมากๆครับ

อีกส่วนที่ตั้งใจทำในเดือน ธ.ค. 2019 คือ การวางโครงแอปในส่วนหน้าสรุปผล เช่น สรุปรายวัน สรุปราย สรุปรายปี สรุปแท็ก แบบเดียวกับใน v4 ซึ่งในหน้าสรุปแต่ละแบบจะแยกย่อยไปอีก เช่นตามหมวดหมู่ หมวดหมู่ย่อย แท็ก ทั้งหมดนี้เป็นส่วนที่ยากมากส่วนหนึ่งของแอป ที่ยากคือมันมีความคล้ายกันอยู่ แต่ต่างกันในรายละเอียด จึงต้องพยายามเขียนโปรแกรมให้ไม่ซ้ำซ้อนและใช้งานง่ายที่สุด เพราะว่ามันจะมีอีกหลายฟีเจอร์ที่ต้องมาใช้งานเรื่องพวกนี้นั่นเอง เดือนนี้ยังทำ OT เลิก 3 ทุ่ม และมาทำหลังเลิกงาน + เสาร์อาทิตย์ เหมือนเดือน พ.ย. นะ แต่รู้สึกชินมากขึ้นแล้ว

1 Dec 2019 : Daily summary budget + Feature page
2 Dec 2019 : File picker utils + Debt validation + Revenue receivable validation + tag form dialog + daily summary category + Tx mini dialog
5 Dec 2019 : photo screen
8 Dec 2019 : Support importing data from v4
10 Dec 2019 : Saving tx
11 Dec 2019 : Import provider + Saving money target screen.
14 Dec 2019 : Icons screen + Saving money form
15 Dec 2019 : deposit/withdraw Bank account
16 Dec 2019 : Pay by bank account.
17 Dec 2019 : Add debt in tx form.
18 Dec 2019 : Deposit after creating tx + importing tx.
19 Dec 2019 : Support importing category.
20 Dec 2019 : Importing tx (cont)
21 Dec 2019 : Add pay by cash + debt movement
22 Dec 2019 : Add skeleton loading + revenue receivable with cash + importing tx-tag / tx-subcategory in v4
23 Dec 2019 : Support multi-account + switching account
24 Dec 2019 : Edit/Custom account.
27 Dec 2019 : Chart for expense/income.
29 Dec 2019 : Line chart monthly + yearly summary + monthly summary
30 Dec 2019 : Subcategory summary (Nt compl) + Bar chart in summary

จบเดือน ธ.ค. 2019 ตอนนี้ทำมาได้ 2 เดือนแล้ว จากการที่ได้นำไฟล์ข้อมูลจากผู้ใช้มาทดสอบการนำเข้าใน v5 ดูข้างราบรื่นดี ผมอยากจะให้ผู้ใช้ได้เห็นความคืบหน้าโปรเจคนี้ว่าเป็นอย่างไรบ้าง และอยากให้ลองนำข้อมูลใน v4 export มา v5 ดูว่า ok หรือไม่ ในวันที่ 4 ม.ค. 2020 ผมจึงตัดสินใจปล่อย Wallet Story v5 แบบทดลองให้ดาวน์โหลดไปติดตั้งเล่นก่อน

แม้ว่าผมจะลองเอาข้อมูลจากหลายๆคนที่อาสาส่งข้อมูลมาให้ทดสอบแล้ว แต่ผลคือมีหลายคนข้อมูลไม่ตรงฮ่าๆๆ

เช่น ตัวเลขเพี้ยนเป็นต้น

แล้วก็มีบัคหลายๆจุดๆ สาเหตุน่าจะเกิดเพราะ การ import จาก v4 ไม่ compatible ได้ครบทุกเวอชัน

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

ม.ค. 2020

เดือน ม.ค. 2020 ตั้งใจจะเน้น 2 เรื่องใหญ่ๆ คือ การส่งออกข้อมูลจาก v5 และการทำให้แอปสามารถปรับภาษาได้ ไทย/อังกฤษ เพราะตอนนี้แอปยัง hardcode พวก text ต่างๆไว้อยู่ อันนี้เป็นเรื่องที่ไม่ยากแต่เยอะมาก เพราะต้องทำทุกหน้า

1 Jan 2020 : Add menu + Edit tx + Summary tag page + category summary dialog
3 Jan 2020 : Support restoring tx after delete deposit/withdraw tx + Support import meta account v4
5 Jan 2020 : Add option summary on today/current month widget

หลังจากปล่อยเวอชันทดลองไป ก็รีบแก้บัคเท่าที่เจอและอัพเดทอีกครั้งในวันที่ 5 ม.ค. 2020 พร้อมฟีเจอร์ใหม่ เรียกได้ว่า ตอนนี้ทำเสร็จปุ๊บ อัพเดทปั๊บ เช่น สามารถกดที่สรุปรายจ่ายของเดือนนี้ แล้วดูว่ารายจ่ายเดือนนี้แยกตามหมวดหมู่มีอะไรบ้าง

version 5.0.3 (5 JAN 2020)

หรือจะกดจากสรุปรายจ่ายทั้งหมด และดูแยกตามเดือนก็ได้

version 5.0.3 (5 JAN 2020)

และหากกดที่สรุปรายจ่ายตามหมวดหมู่ทั้งหมด ก็จะสามารถดูรายจ่ายหมวดหมู่นั้นแยกตามเดือนก็ได้เช่นกัน

version 5.0.3 (5 JAN 2020)

ต่อมาทำส่วนปฏิทินให้รองรับได้หลายๆ mode เช่น จากปกติจะแสดงรายรับรายจ่ายในวันนั้น ก็เพิ่มเงื่อนไขเป็น เฉพาะรายจ่ายค่าอาหาร หรือเฉพาะรายจ่ายที่มีแท็กว่าหมูกะทะ

6 Jan 2020 : Calendar mode + Calendar screen
7 Jan 2020 : Calendat screen (cont)
8 Jan 2020 : Calendar summary option + Calendat screen (cont)

version 5.0.4 (9 JAN 2020)

จากนั้นจะสามารถกดที่วันที่ในปฏิทินนั้นได้ แล้วจะสามารถดูรายการได้เลยว่า รายจ่ายในวันนั้นคืออะไรบ้าง

version 5.0.4 (9 JAN 2020)

หลังจากนั้นก็ใช้เวลาอีกพักนึงในการทำส่วนหน้าตั้งค่าสำหรับการปรับแต่งภาษาในแอป และการส่งออกข้อมูล

9 Jan 2020 : Setting screen + About screen
10 Jan 2020 : Setting screen (cont)
12 Jan 2020 : Exporting screen v5
13 Jan 2020 : Exporting screen v5 (cont) + Setting screen (cont)
14 Jan 2020 : Exporting screen v5 (cont) + Importing screen v5
15 Jan 2020 : Importing screen v5 (cont)
18 Jan 2020 : Support Thai/English language
19 Jan 2020 : Support Thai/English language (cont)
20 Jan 2020 : Support Thai/English language (cont)
21 Jan 2020 : Multi-language in daily/monthly/yearly/budget summary/calendar
22 Jan 2020 : Multi-language in daily/monthly/yearly/budget summary/calendar
23 Jan 2020 : Multi-language in setting screen.
26 Jan 2020 : Multi-era + currency
28 Jan 2020 : Multi-language in profile screen.

ตัวอย่างการแสดงภาษาไทยในแอป ปกติจะเป็นภาษาอังกฤษมาตลอด ตอนนี้สามารถปรับเปลี่ยนภาษาได้แล้ว

Version 5.0.5 (26 JAN 2020)

ก.พ. 2020

เดือน ก.พ. 2020 หันทำส่วน API ต่างๆและปรับปรุงหน้าเว็บไซต์ใหม่ แล้วก็เน้นไปที่การทดสอบ import ข้อมูล v4 และ v5

1-10 Feb 2020 : Authen/Signup service + backup data service + login screen + register screen
11-28 Feb 2020 : importing data v4 -> v5 + importing data v5 -> v5 + exporting v5

ตอนนี้แอปเป็นรูปเป็นร่างขึ้นมากๆ เหลือเก็บรายละเอียดอีกสักหน่อย แล้วก็ in-app purchase ที่ตั้งใจไว้

หน้าเว็บไซต์ของ Wallet Story
https://benzneststudios.com/walletstory/

จบตอนที่ 1

ขอจบตอนที่ 1 เพียงเท่านี้ก่อนนะครับ บล็อกนี้เขียนไว้เพื่อบันทึกเรื่องราวของผมกับแอป Wallet Story ล้วนๆ น่าจะพอเห็นภาพการเดินทางของ Wallet Story 5 นะ

เจอกันในบล็อก ตอนที่ 2 ครับ (: