reveal.js

# นำเสนอและวิจารณ์โปรเจกต์ (Peer Review)

Lesson 1 - โปรเจกต์สุดท้าย Full-Stack Angular Application

**Peer Review** คือกระบวนการให้เพื่อนร่วมชั้นหรือทีมช่วยตรวจงานและให้ข้อเสนอแนะอย่างสร้างสรรค์ เพื่อปรับปรุงคุณภาพของโปรเจกต์ก่อนนำไปใช้จริงหรือใส่ Portfolio

---

## Timeline/ประวัติศาสตร์

<pre class="mermaid">
%%{init: {"theme": "base", "themeVariables": {"primaryColor": "#fabd2f", "primaryTextColor": "#282828", "primaryBorderColor": "#b57614", "lineColor": "#7c6f64", "secondaryColor": "#83a598", "tertiaryColor": "#b8bb26", "background": "#fbf1c7", "mainBkg": "#ebdbb2", "fontFamily": "Tahoma, sans-serif"}}}%%
flowchart LR
 subgraph Era1["ยุคส่งงานเดี่ยว / Individual Submission"]
 A["ส่งไฟล์งาน feedback จำกัด"]
 end
 subgraph Era2["ยุค Demo & Review / Presentation"]
 B["Live Demo เห็นระบบจริง"]
 C["Peer Review หลายมุมมอง"]
 end
 subgraph Era3["ยุค Portfolio Ready / Professional Review"]
 D["Deploy URL ใช้งานจริง"]
 E["Actionable Feedback ปรับปรุงต่อได้"]
 end
 A --> B --> C --> D --> E
</pre>

---

## สิ่งที่ต้องเตรียม

- **Demo Live Application** ที่เปิดผ่าน URL จริงได้
- **Slide สรุป** ที่อธิบายโจทย์และผลลัพธ์โดยไม่ยาวเกินไป
- **Problem Statement** อธิบายปัญหาที่เลือกแก้
- **Architecture** แสดง Frontend, Backend, Database และ Deployment
- **Tech Stack** เช่น Angular, Node.js, PostgreSQL, Docker
- **Features** แสดงฟีเจอร์หลักที่ใช้งานได้จริง
- **Peer Review Criteria** ได้แก่ Code Quality, UX, Architecture, Completeness

---

## ตารางเกณฑ์ Peer Review

| เกณฑ์ | คำถามนำ | คะแนนแนะนำ |
|---|---|---|
| Code Quality | โค้ดอ่านง่าย แยกหน้าที่ดีหรือไม่ | 25 |
| UX | ผู้ใช้ทำงานหลักได้ลื่นไหลหรือไม่ | 25 |
| Architecture | โครงสร้างระบบเหมาะสมหรือไม่ | 25 |
| Completeness | ฟีเจอร์หลักครบและ demo ได้จริงหรือไม่ | 25 |

---

## Mermaid Diagram: Presentation Flow

<pre class="mermaid">
%%{init: {"theme": "base", "themeVariables": {"primaryColor": "#fabd2f", "primaryTextColor": "#282828", "primaryBorderColor": "#b57614", "lineColor": "#7c6f64", "secondaryColor": "#83a598", "tertiaryColor": "#b8bb26", "background": "#fbf1c7", "mainBkg": "#ebdbb2", "fontFamily": "Tahoma, sans-serif"}}}%%
flowchart TD
 A["Problem Statement ปัญหาที่แก้"] --> B["Architecture โครงสร้างระบบ"]
 B --> C["Tech Stack เทคโนโลยี"]
 C --> D["Live Demo สาธิตระบบจริง"]
 D --> E["Challenges ปัญหาที่พบ"]
 E --> F["Peer Feedback ข้อเสนอแนะ"]
 F --> G["Improvement Plan แผนปรับปรุง"]
</pre>

---

## Code Example

```md


# Peer Review Feedback

---

## Project
- ชื่อโปรเจกต์:
- URL Demo:
- Repository:

---

## What Works Well
- จุดแข็ง 1:
- จุดแข็ง 2:

---

## Suggestions
- ข้อเสนอแนะ 1:
- ข้อเสนอแนะ 2:

---

## Questions
- คำถามที่อยากให้ทีมอธิบายเพิ่มเติม:

---

## Score
- Code Quality: /25
- UX: /25
- Architecture: /25
- Completeness: /25

```

---

## วิดีโอแนะนำ

- [YouTube: How to Present a Software Project Demo](https://www.youtube.com/results?search_query=how+to+present+a+software+project+demo)

---

## กิจกรรมท้ายบท

1. เตรียม demo URL จริง
2. เตรียม slide ไม่เกิน 8-10 หน้า
3. นำเสนอ 7-10 นาที
4. รับ feedback และบันทึกสิ่งที่ต้องปรับปรุง

---

## End

<a href="/web-programming/15-final-project/index.md" style="display:inline-block;padding:0.6em 1em;border-radius:8px;background:#fabd2f;color:#282828;text-decoration:none;font-weight:700;">กลับหน้าบทเรียน</a>