Flow 1 : ตั้งโพสต์เพื่อค้นหาของที่อยากจะซื้อและขายของภายในสถาบัน - SilverSky9/DevToolNo1 GitHub Wiki

Flow : ตั้งโพสต์เพื่อค้นหาของที่อยากจะซื้อและขายของภายในสถาบัน

User flow

ในมุมมองแบ่งตาม Page

User Flow Full Screen

เมื่อผู้ใช้เปิดมาจะพบกับหน้า Home Page ซึ่งเป็นหน้าหลักการใช้งานที่สามารถดูโพสต์ต่างๆได้ และผู้ใช้สามารถกดปุ่มเพื่อสร้างโพสต์ใหม่ได้เมื่อผู้ใช้กดปุ่มสร้างโพสต์จะเข้าสู่ Create Post Page ซึ่งเมื่อผู้ใช้สร้างโพสต์สำเร็จ จะเข้าสู่หน้า Identify Page ซึ่งจะแสดงเป็น Modal ขึ้นมาในหน้า Create Post Page และเมื่อผู้ใช้กดปุ่มบันทึก จะกลับเข้าสู่หน้า Home Page อีกครั้งและโพสต์ที่สร้างก็จะปรากฏบนฟีดในหน้า Home Page

ในมุมมองการทำงาน

user Flow 2 Full Screen

UI flow

a6049c384ac2427b558c4ac9d70a59b8.jpg
Full Screen

  • ในหน้า Home Page สามารถค้นหาชื่อสินค้าได้จากคำคีย์เวิร์ด และสามารถกรองประเภทของที่ต้องการค้นหาได้จากฟีเจอร์ฟิลเตอร์ นอกจากนี้ในหน้านี้สามารถดูโพสต์ต่างๆ และสามารถสร้างโพสต์ได้อีกด้วย ถ้าผู้ใช้มีการกดปุ่มสร้างโพสต์ก็จะเข้าสู่หน้า Create Post Page
  • ในหน้า Create Post Page ผู้ใช้สามารถอัปโหลดรูปภาพที่ต้องการได้ โดยในหน้านี้ผู้ใช้จะต้องให้รายละเอียดที่สำคัญได้แก่ ทำการเลือกว่าต้องการเป็นผู้ยืมหรือผู้ต้องการให้ยืม ชื่อสินค้า เลือกประเภทสินค้า รายละเอียดสินค้า และที่อยู่การติดต่อ หากมีการกรอกรายละเอียดครบสามารถกดปุ่ม Post ได้หลักจากกดปุ่ม Post และจะมีโพสต์ที่สร้างใหม่ปรากฏอยู่ในหน้าฟีด
  • PIN Modal เป็นกล่องข้อความ ที่จะปรากฎขึ้นเมื่อผู้ใช้กดปุ่ม Post หลังจากที่ได้ทำการอัปโหลดรูปภาพ และรายละเอียดต่างๆแล้ว ในกล่อง PIN Modal จะแสดงชื่อของสินค้า หรือของที่ผู้ใช้ต้องการจะขาย และตัวเลข PIN 4หลัก ของ Postนั้นๆ ซึ่งผู้ใช้ต้องใช้ PIN ดังกล่าวในการยืนยังตัวตนเพื่อ แก้ไขPost ลบPost และดูผู้ที่สนใจPostของตนเพื่อทำการเลือกผู้ที่สนใจในตัวสินค้า และด้านล่างของหมายเลข PIN จะมีปุ่ม Save เมื่อผู้ใช้กดปุ่ม Save กล่อง PIN Modaleนี้จะถูกบันทึกเป็นรูปภาพลงในอุปกรณ์ของผู้ใช้ และจะกลับเข้าสู่หน้า Home Page

Acceptance Tests

ตัวอย่าง Acceptance Tests Flow 1 : ตั้งโพสต์เพื่อค้นหาของที่อยากจะซื้อและขายของภายในสถาบัน

สามารถดูรายละเอียดเต็ม ๆ ได้ที่ Google Sheet : Flow 1 : ตั้งโพสต์เพื่อค้นหาของที่อยากจะซื้อและขายของภายในสถาบัน

Case No. Case Name Case Description Input Expected Result Test Result
1 Create Post Success สร้างโพสต์ต้องการขาย / ต้องการซื้อสำเร็จ Toggle ต้องการขาย / ต้องการซื้อ, Product Name, Product Type, Address, Product Detail, Photos สร้างโพสต์การขายของสำเร็จ และแสดงโพสต์ที่หน้า Home Page แสดงโพสต์การขายของที่พึ่งสร้างที่หน้า Home Page
2 Create Post Fail สร้างโพสต์ต้องการขาย / ต้องการซื้อไม่สำเร็จ (-), Product Name, Product Type, (-), Product Detail, Photos สร้างโพสต์การขายของไม่สำเร็จ และแสดงข้อความ "ไม่สามารถสร้างโพสต์ได้ กรุณากรอกข้อมูลให้ครบถ้วน" โชว์ Error Message ที่หน้า Create Post
3 Upload Product Photos Success Upload Photos Success อัปโหลดเป็นสกุลไฟล์รูปภาพ และมีขนาดไม่เกินที่กำหนด แสดงรูปภาพที่ผู้ใช้ได้ทำการอัปโหลด Pass
4 Upload Product Photos Fail Upload Photos Fail อัปโหลดไฟล์ที่ไม่ใช่รูปภาพ หรือมีขนาดเกินที่กำหนด Error Message :: Failure (ไม่ใช่ไฟล์รูปภาพ หรือไฟล์มีขนาดเกินที่กำหนด) Fail
5 Internet Connected Internet Connected Success - แสดงผลตามผลลัพธ์ที่ผู้ใช้ได้กระทำไปก่อนหน้า Pass
6 Internet Unconnected Internet Connected Fail - Error Message :: Failure (Internet Unconnected) Fail
  • (-) = ไม่ได้กรอกข้อมูล

API

Get Post By Post Id

End point: /post/getpostbyid/10
Method: Get
Response :

{
  "status": 200,
  "data": {
    "product_name": "Gucci Belt",
    "product_option": "lend",
    "product_type": "belt",
    "product_tag": "gucci",
    "location": "RNP"
  }
} 

Get All Post

End point: /post/getall
Method: Get
Response :

{
  "status": 200,
  "data": [{
    "product_name": "Gucci Belt",
    "product_option": "lend",
    "product_type": "belt",
    "product_tag": "gucci",
    "location": "RNP"
  }, 
  {
    "product_name": "Green Tea",
    "product_option": "borrow",
    "product_type": "drink",
    "product_tag": "tea",
    "location": "College"
  }]
}

Create Post

End point: /post/create
Method: Post
Request :

{
  "product_name": "Gucci Belt",
  "product_option": "lend",
  "product_type": "belt",
  "product_tag": "gucci",
  "location": "RNP",
  "phone_number": "0812345678",
  "address": "Uplace"
}
Response : 
{
  "status": 200,
  "data": {
    "pin_code": "123456"
  }
}
⚠️ **GitHub.com Fallback** ⚠️