01204223/react-flask - ประวัติรุ่นแก้ไข

Jittat: /* ใช้ Devtool ในการดูการส่งข้อมูลระหว่าง frontend กับ backend */

2026-01-21T21:03:47Z

ใช้ Devtool ในการดูการส่งข้อมูลระหว่าง frontend กับ backend

Jittat: /* backend */

2026-01-17T23:32:02Z

backend

Jittat: /* Todo list แบบไม่มี server */

2026-01-09T01:09:40Z

Todo list แบบไม่มี server

Jittat: /* การสร้างโครง React project */

2026-01-09T01:08:38Z

การสร้างโครง React project

Jittat: /* ทิศทางการ render และ state */

2026-01-08T23:28:41Z

ทิศทางการ render และ state

Jittat: /* เรื่องอื่น ๆ ที่ต้องทำ */

2026-01-08T22:06:59Z

เรื่องอื่น ๆ ที่ต้องทำ

Jittat: /* การ delete */

2026-01-08T22:00:47Z

การ delete

Jittat: /* การ delete */

2026-01-08T21:56:47Z

การ delete

Jittat: /* กิจกรรมอื่น ๆ done และ delete */

2026-01-08T21:52:45Z

กิจกรรมอื่น ๆ done และ delete

Jittat: /* กิจกรรมอื่น ๆ delete และ done */

2026-01-08T21:42:04Z

กิจกรรมอื่น ๆ delete และ done

←รุ่นแก้ไขก่อนหน้า		รุ่นแก้ไขเมื่อ 21:03, 21 มกราคม 2569
แถว 700:		แถว 700:

	[[Image:223-react-devtool-inspect.png\|600px]]		[[Image:223-react-devtool-inspect.png\|600px]]
		+
		+	{{กล่องเทา\|
		+	'''ข้อสังเกต''' ถ้าเรา refresh หน้าจอ frontend แล้วอาจจะเห็นว่า React มีการเรียกไปยัง backend api GET /api/todos/ เป็นจำนวน ''สอง''ครั้ง พฤติกรรมแบบนี้เป็นพฤติกรรมปกติถ้าเราทำงานใน development mode และสร้าง react component ใน strict mode เพราะว่า React จะเรียก request ซ้ำเพราะพยายามทำให้เราพบบั๊กต่าง ๆ ง่ายขึ้น
		+	}}

	== กิจกรรมอื่น ๆ done และ delete ==		== กิจกรรมอื่น ๆ done และ delete ==

@@ แถว 634: / แถว 634: @@
          "id": id,
          "title": data['title'],
-         "done": getattr(data, 'done', False),
+         "done": data.get('done', False),
+     }
 </syntaxhighlight>

←รุ่นแก้ไขก่อนหน้า		รุ่นแก้ไขเมื่อ 01:09, 9 มกราคม 2569
แถว 222:		แถว 222:

	== Todo list แบบไม่มี server ==		== Todo list แบบไม่มี server ==
		+
		+	หลังจากการทดลองเบื้องต้นในส่วนที่ผ่านมา เราจะใช้โครงของ React app เดิมมาทำแอพ todo list แบบง่าย ๆ
		+
	=== แสดงรายการเริ่มต้น (ยังไม่มี state) ===		=== แสดงรายการเริ่มต้น (ยังไม่มี state) ===

@@ แถว 40: / แถว 40: @@
 ให้ทำตามรายการคำสั่งดังกล่าว
-ึึึคำสั่ง npm install จะติดตั้งไลบรารีที่เกี่ยวข้องลงในไดเร็กทอรี node_modules (ซึ่งจะใหญ่ขึ้นเรื่อยๆ อาจจะทำดิสก์เต็มได้) เมื่อติดตั้งเสร็จจะมีข้อความประมาณนี้
+คำสั่ง npm install จะติดตั้งไลบรารีที่เกี่ยวข้องลงในไดเร็กทอรี node_modules (ซึ่งจะใหญ่ขึ้นเรื่อยๆ อาจจะทำดิสก์เต็มได้) เมื่อติดตั้งเสร็จจะมีข้อความประมาณนี้
   added 156 packages, and audited 157 packages in 33s

@@ แถว 170: / แถว 170: @@
 รูปด้านล่างเปรียบเทียบวิธีการจัดการกับ interaction สองแบบ
- [รูป]
+[[Image:223-react-states-render.jpeg|500px]]
 ด้านล่างแสดงตัวอย่างของการ update หน้าจอเป็นส่วนๆ
- [รูป]
+[[Image:223-react-virtual-dom.jpeg|500px]]
 === ไอเดียที่อยากทำ ===

←รุ่นแก้ไขก่อนหน้า		รุ่นแก้ไขเมื่อ 22:06, 8 มกราคม 2569
แถว 762:		แถว 762:

	== เรื่องอื่น ๆ ที่ต้องทำ ==		== เรื่องอื่น ๆ ที่ต้องทำ ==
		+
		+	ในการพัฒนาเว็บแอพให้สามารถทำงานได้จริง ยังมีอีกหลายเรื่องที่ต้องทำ เรื่องหลัก ๆ มีดังนี้
		+
		+	'''ระบบรวม'''
		+	* Authentication
		+
		+	'''หลังบ้าน'''
		+	* ใช้ database จริง
		+
		+	'''หน้าบ้าน'''
		+	* แยก component ของหน้าเว็บเป็นส่วน ๆ แทนที่จะมี component App เพียงอย่างเดียว

@@ แถว 749: / แถว 749: @@
+     }
+   }
 </syntaxhighlight>
 == เรื่องอื่น ๆ ที่ต้องทำ ==

←รุ่นแก้ไขก่อนหน้า		รุ่นแก้ไขเมื่อ 21:56, 8 มกราคม 2569
แถว 732:		แถว 732:

	=== การ delete ===		=== การ delete ===
		+
		+	เราจะสร้าง api ที่รับ http request แบบ DELETE ไปที่ url ของ todo items ด้านล่างเป็นฟังก์ชันใน frontend ที่แก้ไขแล้ว
		+
		+	<syntaxhighlight lang="javascript">
		+	async function deleteTodo(id) {
		+	const delete_api_url = `${TODOLIST_API_URL}${id}/`
		+	try {
		+	const response = await fetch(delete_api_url, {
		+	method: 'DELETE',
		+	});
		+	if (response.ok) {
		+	setTodoList(todoList.filter(todo => todo.id !== id));
		+	}
		+	} catch (error) {
		+	console.error("Error deleting todo:", error);
		+	}
		+	}
		+	</syntaxhighlight>

	== เรื่องอื่น ๆ ที่ต้องทำ ==		== เรื่องอื่น ๆ ที่ต้องทำ ==

@@ แถว 702: / แถว 702: @@
 === การ toggle done ===
-เราจะใช้ url <tt>/api/todos/[id]/toggle/<tt> สำหรับการ toggle โดยจะใช้ method POST (บางคนอาจจะนิยมใช้ method PATCH แต่ในที่นี้เราจะใช้แค่ GET กับ POST เป็นหลัก)
+เราจะใช้ url <tt>/api/todos/[id]/toggle/<tt> สำหรับการ toggle โดยจะใช้ method PATCH (เราจะใช้ PATCH เมื่อมีการแก้บางส่วนของข้อมูล ใช้ PUT ถ้าแก้ทั้งหมด)
 ด้านล่างเป็น function ฝั่ง backend
 <syntaxhighlight lang="python">
-@app.route('/api/todos/<int:id>/toggle/', methods=['POST'])
+@app.route('/api/todos/<int:id>/toggle/', methods=['PATCH'])
 def toggle_todo(id):
      todos = [todo for todo in todo_list if todo['id'] == id]
@@ แถว 720: / แถว 720: @@
 สำหรับส่วน frontend เราจะเปลี่ยนฟังก์ชัน toggleDone เป็น async และใช้ string template literal ในการสร้าง URL
 <syntaxhighlight lang="javascript">
    async function toggleDone(id) {
-     const toggle_api_url = `${TODOLIST_API_URL}/${id}/toggle/`
+     const toggle_api_url = `${TODOLIST_API_URL}${id}/toggle/`
      // งานของคุณ: เขียนส่วนที่เหลือเอง
-     // ให้เรียก fetch ไปที่ url ดังกล่าว แบบ post, ถ้าทำงานสำเร็จให้สร้าง todo item ใหม่ไปแทนของเดิม
+     // ให้เรียก fetch ไปที่ url ดังกล่าว แบบ patch, ถ้าทำงานสำเร็จให้สร้าง todo item ใหม่ไปแทนของเดิม
+   }
 </syntaxhighlight>

@@ แถว 698: / แถว 698: @@
 [[Image:223-react-devtool-inspect.png|600px]]
-== กิจกรรมอื่น ๆ delete และ done ==
+== กิจกรรมอื่น ๆ done และ delete ==
 == เรื่องอื่น ๆ ที่ต้องทำ ==