ต่อจาก 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 นะครับ ขอบคุณที่ติดตาม

 6,169 total views,  4 views today

Flutter สร้าง api เพื่อรอรับข้อมูลผ่าน json นำมาแสดง EP.3
Tagged on:

ใส่ความเห็น

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น ช่องข้อมูลจำเป็นถูกทำเครื่องหมาย *

This site uses Akismet to reduce spam. Learn how your comment data is processed.