Task 2 : Flow Book2Hand - panupongth148/Project-SW-DEV-TOOLS-AND-ENV-Group4 GitHub Wiki

Flow ของ Book 2 Hand

Book2Hand นั้นเป็นเว็บแอปพลิเคชั่นที่เกิดจากการที่มีเพื่อนร่วมกลุ่มนั้นมีหนังสือที่อ่านแล้วเยอะเกินไป และต้องการที่จะนำมาหารายได้แต่การนำไปลงขายเว็บไซต์ขายของออนไลน์ทั่วไปนั้นขายได้ยากเนื่องจากมีชนิดของสินค้าที่หลากหลาย เราจึงได้มีริเริ่มแนวคิดที่จะขายหนังสือ เพราะจากการสำรวจ มักจะมีหนังสือที่ไม่ได้อ่านต่อกันเกือบทุกคน จึงได้ริเริ่มทำเว็บแอปพลิเคชั่น Book2hand ซึ่งเป็นเว็บแอปพลิเคชั่นขายหนังสือโดยเฉพาะ

หน้าทั้งหมดประกอบด้วยหน้าต่าง ๆ ดังนี้

1. Login Page

ผู้ใช้ทำการเข้าสู่ระบบเพื่อจะรับสิทธิ์ในการเข้าใช้งานส่วนต่าง ๆ ของหน้าเว็บไซต์ได้

2. Main Page

หน้าหลักของเว็บไซต์ซึ่งประกอบไปด้วยโลโก้ แถบของเมนู ส่วนของรายการโปรโมชั่นต่าง ๆ และแสดงส่วนของรายการหนังสือแนะนำ

3. Book Info Page

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

4. Cart Page

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

5. Payment Page

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

6. Store Page

หน้าร้านค้าซึ่งเป็นหน้าที่แสดงรายการหนังสือที่ร้านค้านั้น ๆ โดยเฉพาะ ซึ่งผู้ซื้อสามารถมองหาหนังสือที่แต่ละร้านลงขายได้อย่างง่ายดาย

3. Manage Book Page

หน้าซึ่งเป็นหน้าที่แสดงรายการหนังสือที่ร้านค้านั้น ๆ ลงขาย โดยเจ้าของร้านจะสามารถจัดการหนังสือได้โดย เพิ่ม และแก้ไข โดยหากทำการกดเพิ่มหนังสือ จะไปที่ Add Book Page และหากทำการกดแก้ไขหนังสือ จะไปที่ Edit Book Page แล้วจึงสามารถลบและแก้ไขได้

7. Edit Book Page

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

5. Add Book Page

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

8. User's Data Edit Page

ผู้ใช้สามารถแก้ไขข้อมูลส่วนตัว เช่น ชื่อ เบอร์โทรศัพท์ ที่อยู่ของผู้ใช้ได้

หน้า UI ทั้งหมด

UIFlow

Flows

แอพลิเคชั่น Book2Hand มี Feature ซึ่งจะมี User Flow UI flow technical อยู่ตาม link ด้านล่าง

Back to Home