ต่อจาก EP.2 ….
ก่อนจะได้ข้อมูลตามรูปนี้
สังเกตุตรง “ระบุแผนก” จะต้องไปสร้าง api ให้ return ข้อมูล json ออกมา ตามรูปนี้ให้ได้สะก่อน
ซึ่งจริงแล้ว ต้องติดตั้ง NodeJS ซะก่อนถึงจะได้ (เอาไว้ผมจะเขียนอีกบทความว่าด้วยเรื่องการติดตั้ง NodeJS เฉพาะให้ละกัน)
ซึ่ง อ.เอ ( Satit Rianpit ) ได้ทำไว้ให้แล้ว เดี่ยวโค้ด API มีให้โหลดตอนท้ายนะครับ
แต่จะใช้ภาษา TypeScript ในการเขียน API สำหรับเอาไปรันบน NodeJS อีกที
มี 2 ไฟล์หลักสำหรับดึงค่าตาราง departments ไฟล์นี้อยู่ใน โฟรเดอร์ models
ไฟล์แรกชื่อ department.ts รูปแบบตามนี้ เอาไว้ดึงข้อมูลจากตาราง departments มา แล้วส่งค่ากลับไปเป็นแบบ array สังเกตุที่ เครื่อง ปีกาเปิด/ปิด [] นะครับ
ส่วนอีกไฟล์ ชื่อ api.ts เอาไว้ return ค่าออกไป จะอยู่ในโฟรเดอร์ routes เพื่อมัน routes ออกไป
สังเกตุที่คำสั่ง router จะสั่ง get ที่มี class ที่ชื่อ departmentModel ที่อยู่ในไฟล์ ../models/department เก็บอยู่ เอามาเช็คก่อนว่ามีไหม โดยใช้ try catch กำกับอยู่หาก try แล้วไม่มีค่าออกมา ก็จะมี catch แจ้ง error ออกมาตรวจสอบได้
ก็ถือว่าช่วย ในการเขียนแอพได้เร็วขึ้น ไม่ต้อง ไปเขียน api ให้ยุ่งยากเหมือนเมื่อก่อน
ถ้า api ดึงมาถูกต้องก็จะแสดงค่าออกมาในรูปแบบ json แล้วทางส่วนของ flutter ก็ค่อยใช้ jsonDecode ดึงค่ามาแสดงอีกที
อันนี้คือรูปแบบ json โดยมี state
{“ok” :true, “results” :[{xxxxxxxxxxxx}]}
เอาไว้เช็คค่าว่าเป็น true หรือไม่ถ้าใช่ ก็ดึงค่าออกมา ถ้าไม่ใช่ ก็ค่อย แสดงค่า error log มาแสดง ก็จะทำให้ โปรแกรมยืดหยุ่น ตัวอย่างตามรูปนี้
ต่อมากลับไป flutter ต่อ (ตะกี้พูดถึงฝั่ง API นะครับ แต่ยังมีอีกเดี่ยวมาอธิบายเพิ่ม)
เราก็จะมาเขียน class Choice{} เอาไว้สำหรับเก็บค่ามาแสดง โดยรับค่าจาก api มาพักไว้ที่ตัวแปรนี้อีกที
จะสร้างตัวแปร title และ value เอาไว้เก็บค่า
และสร้างตัวแปรค่งที่ชื่อ Choice({this.title, this.value}); เพื่อแทนค่าตัวแปรตามรูปแบบ array 2 แถว
ต่อมาก็มาสร้างตัวแปร choices เอาไว้เก็บ เพศ (ชาย, หญิง) แบบกำหนดค่าตายตัว สังเกตุที่คำว่า List<Choice> จะหมายถึง เป็นเหมือนตาราง lookup ให้เลือก ได้อย่างใดอย่างหนึ่ง
ต่อมาสร้าง List<Choice> สำหรับเก็บค่า departments แต่ไม่มีข้อมูล อยู่ในรูแบบ array เหมือนกัน เพื่อเอาไว้รอรับค่าจาก API นั้นเอง
ต่อมาก็ไปเขียน Future getDepartments() เพื่อเอาไว้รับค่าจาก API แต่จะใช้เงื่อนไข if(rs.statusCode = 200) ว่าสถานะเป็น 200 หรือไม่ ถ้าใช่ก็แสดงว่าได้ข้อมูลออกมา แต่ถ้าเป็นโค้ดอื่นๆ เช่น 404 ก็จะไม่แสดงเพราะไม่มีข้อมูลออกมา
สังเกตุว่ามีตัวแปร ApiProvider ซึ่งต้องไป import มาด้วย
แน่นอนว่าเราต้องไปสร้าง api_provider.dart ไว้ก่อน ที่จะดึงมาใช้
โดยเราจะสร้าง
class ApiProvider{}
และ ตัวแปร enPoint เอาไว้เก็บ ip และ port จาก URL ของ API นั้นเอง
อย่าลืม import ตัว http.dart ด้วย
แล้วมาเขียน Future<http.Response> เพื่อที่สั่งเปิด http เอาไว้ get / post / put / delete ได้เลยดูแล้วสะดวกดีนะ ถ้าใครยังงง ก็ให้นึกถึงเจ้าตัว postman นั้นเองทำได้เหมือนกัน
อ้อ กรณีต้องการส่งค่า token ไปด้วย ก็มาต่อ จาก URL ด้วยนะ แต่สั่งอยู่ใน headers นั้นเอง เพราะ token เอาไว้ยืนยันตัวตนว่า เป็น id ที่อยู่ในระบบเราหรือไม่
ต่อมาเราก็จะต้องสั่งฟังชัน getDepartments() ครั้งแรกที่เปิด หน้านี้
เพิ่ม @override
void initState(){…….}
โดยสั่ง getDepartments(); ไว้ภายใน event นี้นะครับ มันจะทำงานครั้งแรกที่เปิดหน้านี้
ต่อมาก็มาสร้าง DropdownButton เอาไว้ให้คลิกเลือก แผนก
สังเกตุที่ items: departments.map((Choice _dep){
return new DropdownMenuItem<Choice>(
value: _dep,
child: new Text(_dep.title),
);
}).toList()
โดยให้แสดงเป็น List รายการ array ตัวแรกที่ชื่อ title มาแสดง สังเกตุที่ตัวแปร _dep.title นั้นเอง
ต่อมาเขียน onChanged สำหรับตัวค่า value มากำหนดว่าได้เลือก value อะไร เพราะเวลาเก็บ หรือบันทึกจะเก็บเป็น value ไม่ได้เก็บ title นะครับ
เวลารัน ก็จะได้ออกมาแบบนี้
อาจจะดูยุ่งยาก แต่หากฝึกบ่อย ๆ ก็จะเข้าใจหลักการ ส่งค่าไป request ไปยัง API ตัว API ก็จะ return ค่าออกมาในรูปแบบ json ทีนี้เราก็ไปรับค่ามา แล้วมา Map กับตัวแปร array ที่เราสร้างไว้ มาแสดง อีกทีนั้นเอง (ผมก็พยายามจะหาคำพูดมาอธิบายที่มาที่ไป น่าจะเข้าใจนะครับ)
ต่อมาเราก็มาสร้าง API สำหรับส่งค่าไปเพิ่ม user
กลับไปฝั่ง API ไปสร้างไฟล์ ชื่อ user.ts เขียนภาษา typescript ดึงค่าตาราง users ออกมา จะ query แบบไหนก็ได้ แต่ขอให้ได้ฟิล์ว ตามที่ต้องการ
และเขียนให้มัน save , update , remove เพิ่มเติม ตามรูปนี้นะครับ
เดี่ยวเรามาต่อใน EP.4
ค่อยๆ ศึกษาไป ฝึกฝนไปนะครับ ต้องใช้เวลาครับ
แล้วพบกันใหม่ใน EP.4 นะครับ ขอบคุณที่ติดตาม
