Flutter and REST API (1): create model

ในการทำงานกับ BE นั้นจะต้องทำความเข้าใจเรื่องของ REST API และการจัดการ model คับ

โดยปกติเรามันจะเชื่อมกันด้วย Restful API และ return ออกมาเป็น JSON นะคับ หลังจากนั้นก้ออยู่ที่กระบวนการของ Flutter ในการแปลง JSON ให้ออกมาเป็น Dart, หรือ แปลงจาก Dart ไปเป็น JSON เป็นต้น.

https://www.youtube.com/watch?v=ZMNp9Ev6cl0

ในการใช้งานจริง มันคือ Async กับ Await นะคับ ซึ่งขั้นตอนในการเชื่อมกับ BE 3 ขั้นตอนดังนี้

1. ติดตั้ง http package แต่จิงๆ ตอนนี้ฝั่งพี่จีนก็มี dio package มาใช้งานได้เหมือนกันนะคับ เผลอๆดีกว่าด้วย
   https://pub.dev/packages/http
   https://pub.dev/packages/dio
2. สร้าง model เพื่อรับข้อมูลจาก BE (ถ้าไม่สร้างก็ใช้ dynamic แทนได้ แต่มันจะไม่สะดวก เพราะไม่มี autocomplete)
3. เขียน code เพื่อดึงข้อมูลและแสดงผล (อาจวนลูปเอง หรือ ใช้ ​ListView เพื่อแสดงผลก็ได้)

ขั้นตอนที่ 1 ขอข้ามไปเลยนะคับ ต่อไปขั้นตอนที่ 2 คือจะสร้าง model มาใช้งานเลย โดยก่อนอื่นเราจะต้องเห็นหน้าตาของ response ก่อนว่าหน้าตาเป็นยังไง และนำ response นั้นมาสร้าง model อีกที

{
  "data": [
    {
      "id": 1,
      "title": "HTML 5",
      "detail": "พัฒนาเว็บไซต์ด้วย HTML 5",
      "date": "2014-10-12",
      "view": 47889,
      "picture": "https://api.codingthailand.com/course/1.png"
    },
    {
      "id": 2,
      "title": "CSS 3",
      "detail": "พัฒนาและตกแต่งเว็บไซต์ด้วย CSS",
      "date": "2014-10-14",
      "view": 24236,
      "picture": "https://api.codingthailand.com/course/2.png"
    }
  ],
    "meta": {
      "status": "success",
      "status_code": 200
    }
}

สมมติว่าหน้าตาของ response จะออกมาประมาณนี้นะคับ เราก้อนำ response ตรงนี้ไปวางไว้ที่ web (https://javiercbk.github.io/json_to_dart/) นี้เพื่อสร้าง model ได้เลย

ขั้นตอนการสร้าง model ด้วยเว็บ

• ต่อไปเราจะนำโค้ด dart มาวางไว้ใน vscode ของเราและตรวจสอบว่าถูกต้องหรือไม่ (เราต้องอ่าน model ตรงนี้ให้เข้าใจนะ)

เปรียบเทียบระหว่าง response จาก BE กับ Model ที่เว็บช่วยสร้างขึ้นมา พร้อมคำอธิบาย

• ต่อไปจะทดลองดึงข้อมูลชุดนี้จาก BE เข้ามาแสดงนะคับ โดยต้องเพิ่ม import convert กับ http เข้ามาใน code นะคับ

import 'dart:convert' as convert;
import 'package:http/http.dart' as http;

• ต่อไปจะเป็นการเรียกใช้งาน model และนำ response มาแสดงผลผ่าน widget นะคับ

แสดงการเรียกใช้งาน model และ render ผ่าน widget to phone.

Code อยู่ที่นี่คับ github

แล้วพบกันใหม่คับ