การใช้ HTTP Request เพื่อดึงข้อมูลจาก API

การใช้ HTTP Request เพื่อดึงข้อมูลจาก API ใน Flutter

ในโลกของการพัฒนาแอปพลิเคชันสมัยใหม่ การดึงข้อมูลจาก API (Application Programming Interface) เป็นสิ่งที่หลีกเลี่ยงไม่ได้ ไม่ว่าจะเป็นข้อมูลผลิตภัณฑ์, ข่าวสาร, สภาพอากาศ หรือข้อมูลอื่นๆ ที่แอปพลิเคชันของเราต้องการ Flutter ก็มีเครื่องมือที่ช่วยให้เราสามารถทำ HTTP request ได้อย่างง่ายดาย ในบทนี้ เราจะมาเรียนรู้วิธีการใช้ HTTP request ใน Flutter เพื่อดึงข้อมูลจาก API โดยเน้นไปที่การใช้ http package, การทำ GET และ POST request, และการ Parse ข้อมูล JSON ที่ได้กลับมา

Http Package: พระเอกของเรา

http package เป็น library ที่ได้รับความนิยมและใช้งานกันอย่างแพร่หลายใน Flutter สำหรับการทำ HTTP request มันมีฟังก์ชันการทำงานที่ครอบคลุมและใช้งานง่าย ช่วยให้เราสามารถส่ง request ไปยัง server และรับ response กลับมาได้

การติดตั้ง:

ในการใช้งาน http package เราต้องทำการติดตั้งมันลงในโปรเจกต์ Flutter ของเราก่อน โดยเพิ่ม dependency ในไฟล์ pubspec.yaml ดังนี้:

dependencies:
  flutter:
    sdk: flutter
  http: ^0.13.5  # หรือเวอร์ชันล่าสุด ณ ปัจจุบัน

หลังจากเพิ่ม dependency แล้ว ให้รันคำสั่ง flutter pub get เพื่อดาวน์โหลดและติดตั้ง package

GET Request: ดึงข้อมูลจาก Server

GET request เป็น HTTP method ที่ใช้สำหรับดึงข้อมูลจาก server โดยทั่วไปแล้ว เราจะใช้ GET request เพื่อดึงข้อมูลที่ไม่ต้องการเปลี่ยนแปลงข้อมูลบน server เช่น การดึงข้อมูลสินค้า, รายชื่อผู้ใช้งาน, หรือข่าวสารต่างๆ

ตัวอย่าง:

สมมติว่าเราต้องการดึงข้อมูลจาก API ที่ endpoint https://jsonplaceholder.typicode.com/todos/1 ซึ่งจะให้ข้อมูลเกี่ยวกับ todo item ที่มี ID เป็น 1

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

Future<void> fetchData() async {
  final url = Uri.parse('https://jsonplaceholder.typicode.com/todos/1');
  final response = await http.get(url);

  if (response.statusCode == 200) {
    // หาก request สำเร็จ
    final jsonData = jsonDecode(response.body);
    print(jsonData); // แสดงข้อมูล JSON ที่ได้
  } else {
    // หาก request ไม่สำเร็จ
    print('Request failed with status: ${response.statusCode}.');
  }
}

คำอธิบาย:

• เรา import http package และตั้งชื่อ alias เป็น http เพื่อความสะดวกในการใช้งาน
• เราสร้าง Uri object จาก URL ที่เราต้องการดึงข้อมูล
• เราใช้ http.get() function เพื่อส่ง GET request ไปยัง URL ที่กำหนด await keyword ถูกใช้เพื่อให้รอจนกว่า request จะเสร็จสิ้น
• เราตรวจสอบ response.statusCode เพื่อดูว่า request สำเร็จหรือไม่ (200 คือ OK)
• หาก request สำเร็จ เราใช้ jsonDecode() function จาก dart:convert เพื่อแปลง JSON string ที่ได้จาก response body เป็น Dart object (Map หรือ List)
• เราพิมพ์ข้อมูลที่ได้ออกมาเพื่อตรวจสอบ

POST Request: ส่งข้อมูลไปยัง Server

POST request เป็น HTTP method ที่ใช้สำหรับส่งข้อมูลไปยัง server โดยทั่วไปแล้ว เราจะใช้ POST request เพื่อสร้างข้อมูลใหม่, อัปเดตข้อมูล, หรือส่งข้อมูลสำหรับการประมวลผล เช่น การสร้างบัญชีผู้ใช้, การส่ง comment, หรือการอัปโหลดไฟล์

ตัวอย่าง:

สมมติว่าเราต้องการส่งข้อมูลไปยัง API ที่ endpoint https://jsonplaceholder.typicode.com/posts เพื่อสร้าง post ใหม่

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

Future<void> createPost() async {
  final url = Uri.parse('https://jsonplaceholder.typicode.com/posts');
  final response = await http.post(
    url,
    headers: <String, String>{
      'Content-Type': 'application/json; charset=UTF-8',
    },
    body: jsonEncode(<String, dynamic>{
      'title': 'Flutter POST Request',
      'body': 'This is a test post created with Flutter.',
      'userId': 1,
    }),
  );

  if (response.statusCode == 201) {
    // หาก request สำเร็จ (201 คือ Created)
    final jsonData = jsonDecode(response.body);
    print(jsonData); // แสดงข้อมูล JSON ที่ได้
  } else {
    // หาก request ไม่สำเร็จ
    print('Request failed with status: ${response.statusCode}.');
  }
}

คำอธิบาย:

• เราใช้ http.post() function เพื่อส่ง POST request ไปยัง URL ที่กำหนด
• เรากำหนด headers เพื่อระบุว่าเรากำลังส่งข้อมูลในรูปแบบ JSON และ encoding เป็น UTF-8
• เราใช้ jsonEncode() function เพื่อแปลง Dart object (Map) เป็น JSON string และส่งไปใน body ของ request
• เราตรวจสอบ response.statusCode เพื่อดูว่า request สำเร็จหรือไม่ (201 คือ Created)
• หาก request สำเร็จ เราพิมพ์ข้อมูลที่ได้ออกมาเพื่อตรวจสอบ

JSON Parsing: แปลงข้อมูล JSON เป็น Dart Object

เมื่อเราได้รับ response จาก API ที่เป็น JSON format เราจำเป็นต้องทำการ parse หรือแปลง JSON string ให้เป็น Dart object เพื่อให้เราสามารถเข้าถึงและใช้งานข้อมูลได้ง่ายขึ้น

dart:convert library มี jsonDecode() function ที่ช่วยให้เราสามารถแปลง JSON string เป็น Dart object ได้อย่างง่ายดาย โดยผลลัพธ์ที่ได้จะเป็น Map<String, dynamic> หรือ List<dynamic> ขึ้นอยู่กับโครงสร้างของ JSON

ตัวอย่าง:

import 'dart:convert';

void main() {
  final jsonString = '{"name": "John Doe", "age": 30, "city": "New York"}';
  final jsonData = jsonDecode(jsonString) as Map<String, dynamic>;

  print(jsonData['name']); // Output: John Doe
  print(jsonData['age']);  // Output: 30
  print(jsonData['city']); // Output: New York
}

การสร้าง Model Class:

ในกรณีที่ข้อมูล JSON ที่เราได้รับมีโครงสร้างที่ซับซ้อน การสร้าง Model class เพื่อ represent ข้อมูลจะช่วยให้โค้ดของเราอ่านง่ายขึ้นและจัดการข้อมูลได้สะดวกยิ่งขึ้น

ตัวอย่าง:

สมมติว่าเรามี JSON data ดังนี้:

{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}

เราสามารถสร้าง Model class ชื่อ Todo ได้ดังนี้:

class Todo {
  final int userId;
  final int id;
  final String title;
  final bool completed;

  Todo({
    required this.userId,
    required this.id,
    required this.title,
    required this.completed,
  });

  factory Todo.fromJson(Map<String, dynamic> json) {
    return Todo(
      userId: json['userId'],
      id: json['id'],
      title: json['title'],
      completed: json['completed'],
    );
  }
}

และเราสามารถใช้ Model class นี้เพื่อ parse JSON data ได้ดังนี้:

import 'dart:convert';

void main() {
  final jsonString = '{"userId": 1, "id": 1, "title": "delectus aut autem", "completed": false}';
  final jsonData = jsonDecode(jsonString) as Map<String, dynamic>;
  final todo = Todo.fromJson(jsonData);

  print(todo.title); // Output: delectus aut autem
  print(todo.completed); // Output: false
}

ข้อควรระวัง:

• ตรวจสอบให้แน่ใจว่า data type ของ JSON field ตรงกับ data type ของ property ใน Model class
• จัดการกับกรณีที่ JSON field อาจไม่มีค่า (null)

สรุป

ในบทนี้ เราได้เรียนรู้วิธีการใช้ HTTP request ใน Flutter เพื่อดึงข้อมูลจาก API โดยใช้ http package, การทำ GET และ POST request, และการ Parse ข้อมูล JSON ที่ได้กลับมา การทำความเข้าใจหลักการเหล่านี้เป็นพื้นฐานที่สำคัญสำหรับการพัฒนาแอปพลิเคชันที่ต้องเชื่อมต่อกับ server และดึงข้อมูลจากภายนอก ในบทถัดไป เราจะมาเรียนรู้เกี่ยวกับการจัดการ Local Storage ด้วย SharedPreferences และ SQLite เพื่อเก็บข้อมูลไว้ในเครื่องของผู้ใช้