Flow 3 : ผู้ใช้เลือกสินค้าและแสดงความสนใจที่จะซื้อ ขาย สินค้าในโพสต์ - SilverSky9/DevToolNo1 GitHub Wiki

Flow 3 : ผู้ใช้เลือกสินค้าและแสดงความสนใจที่จะซื้อ/ขาย สินค้าในโพสต์

User flow

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

Full Screen

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

UI flow

Full Screen

  • หน้า home page สามารถเลือกดูสินค้าที่สนใจ และสามารถกดเข้าไปดูคำอธิบายของสินค้าได้

Modal เป็นส่วนที่ถูกแบ่งเป็น 2 ผู้ใช้งาน

  • ผู้ซื้อ จะมีทั้งรูปและคำอธิบายของโพสนั้นๆ และสามารถพิมพ์ช่องทางการติดต่อของตัวเองไปได้
  • ผู้ขาย จะมีทั้งรูปและคำอธิบายของโพสนั้นๆ และสามารถพิมพ์คำอธืบายตัวเองและช่องทางการติดต่อของตัวเองไปได้

Acceptance Tests

ตัวอย่าง Acceptance Tests Flow 3 : ผู้ใช้เลือกสินค้าและแสดงความสนใจที่จะซื้อสินค้าในโพสต์

ดูรายละเอียดเต็ม ๆ ได้ที่ Google Sheet : Flow 3 : ผู้ใช้เลือกสินค้าและแสดงความสนใจที่จะซื้อสินค้าในโพสต์

Case No. Case Name Case Description Input Expected Result Test Result
1 ผู้ซื้อพิมพ์ช่อทางการติดต่อสำเร็จ ผู้ซื้อสนใจที่จะซื้อสินค้านี้ ต้องพิมพ์ช่องทางการติดต่อของตนเองส่งไปให้ผู้ขาย Buyer Information (Name, Contact, Location) ผู้ซื้อกรอกช่องทางการติดต่อ และสามารถส่งไปถึงผู้ขายสำเร็จ หลังจากกรอกข้อมูลเสร็จ ผู้ซื้อกดปุ่ม confirm จะนำผู้ซื้อกลับมาที่หน้า Home Page
2 ผู้ขายพิมพ์คำอธืบายตัวเองและช่องทางการติดต่อ ผู้ขายพิมพ์คำอธืบายตัวเองและช่องทางการติดต่อ Seller Information (Name, Contact, Description, Location) ผู้ขายกรกคำอธิบายตัวเอง และช่องทางการติดต่อสำเร็จ หลังจากกรอกข้อมูลเสร็จ ผู้ขายกดปุ่ม confirm จะนำผู้ขายกลับมาที่หน้า Home Page

Technical

Frontend

Design

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

Test

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

Deploy

เลือกใช้ Docker container และ Deploy โดยเลือกใช้ Nginx เป็น docker images

API

Get Post By Post Id

End point: /getbyid/3
Method: Get
Response :

{
  "status": 200,
  "data": {
    "product_name": Hermes Bag",
    "product_option": "sell",
    "product_type": "bag",
    "product_tag": "hermes ",
    "location": "RNP"
  }
} 

Get All Interester

End point: /interested
Method: Put
Request:

{
 "name":"Aren",
 "contant":"ig: earn_aren",
 "description":"",
 "location":"jinda",
}

Response :

{
  "status": 200,
}
⚠️ **GitHub.com Fallback** ⚠️