Task 4 : First Flow ( Killer Feature ) - panupongth148/Project-SW-DEV-TOOLS-AND-ENV-Group4 GitHub Wiki

User Flow

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

1. Login Page

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

2. Main Page

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

3. Manage Book Page

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

4. Edit Book Page

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

5. Add Book Page

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

UI Flow

Home Page

home

  • เมื่อผู้ใช้เข้ามาหน้าหลักนั้นจะมีรูปโชว์ในที่นี้ได้เอาใช้จำลองโปรโมชั่น และจะมีปุ่มสมัคร account กับ login อยู่ด้านขวาบน
  • หากมี account อยู่แล้วให้ผู้ใช้กดไปในปุ่ม login

Login Page

login

  • เมื่อมาหน้านี้แล้วใส่ username password จากนั้นกดปุ่ม submit ในที่นี้ให้ใส่ username กับ password เป็นอะไรก็ได้ เพื่อที่จะไปที่หน้าจัดการหนังสือ

Manage Book Page

managebook

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

Addbook page

addbook

  • เมื่อผู้ใช้กดเพิ่มสินค้านั้นก็จะมายังหน้านี้จะเป็น input ข้อมูลหนังสือ ได้แก่ ชื่อหนังสือ รายละเอียดหนังสือ ชนิดหนังสือ หมวดหมู่หนังสือ ราคาหนังสือ และรูปภาพ
  • เมื่อใส่ข้อมูลเสร็จสิ้น

Editbook page

edit

  • เมื่อผู้ใช้กดปุ่มแก้ไขของหนังสือนั้นๆ ก็จะนำมาสู่หน้าแก้ไขซึ่งมีข้อมูลของ หนังสือนั้นอยู่
  • เมื่อผู้ใช้ทำการแก้ไขแล้วกดยืนยันจะเป็นการบันทึกข้อมูล

Technical Feature จัดการหนังสือ

Acceptance task

List of Task

Demo clip

Deployment

Firebase Hosting

firebase logo
Firebase Hosting เป็นบริการ Web Hosting ที่ให้พื้นที่ฟรี 10GB และ data transfer 10GB ต่อเดือน รองรับการพัฒนาเว็บไซต์ทั้งแบบ Static และ Dynamic ซึ่งมีจุดเด่นที่ความรวดเร็ว ปลอดภัย และเชื่อถือได้ **ข้อดี ของ firebase hosting **

  • ผู้ใช้สามารถเข้าถึง Content ได้รวดเร็ว
  • Firebase Hosting ให้ SSL มาพร้อมใช้งาน ไม่ต้องตั้งค่าอะไรทั้งนั้น และฟรี
  • จะทำเว็บที่เป็น Static หรือ Dynamic ก็ได้
  • เชื่อมต่อบริการอื่นๆใน Firebase ได้
  • customer domain

Coding With Team