🔖 หมวดบทเรียน: การดึงและส่งข้อมูลผ่านอินเทอร์เน็ตด้วย HTTP
📌 เหมาะสำหรับ: ผู้ที่ต้องการเชื่อมต่อแอปกับ API ภายนอก เช่น backend หรือ REST API
🎯 เป้าหมาย: เรียนรู้การส่ง GET/POST request และจัดการข้อมูล JSON ที่ได้รับมา
🧭 เกริ่นนำ
หากคุณต้องการให้แอปเชื่อมต่อกับระบบอื่น เช่น ระบบสินค้า, ฐานข้อมูล, หรือระบบสมาชิก คุณจะต้องใช้ HTTP request เพื่อดึงหรือส่งข้อมูล Flutter ใช้แพ็กเกจ http
ที่ใช้งานง่ายในการเรียก API และรองรับทั้ง GET และ POST รวมถึงการจัดการ JSON ได้สะดวก
🔍 ติดตั้งแพ็กเกจ http (ถ้ายังไม่ติดตั้ง)
dependencies:
http: ^0.13.5
แล้วรันคำสั่ง:
flutter pub get
📥 ตัวอย่าง GET request
import 'package:http/http.dart' as http;
import 'dart:convert';
void fetchData() async {
final url = Uri.parse('https://jsonplaceholder.typicode.com/posts/1');
final response = await http.get(url);
if (response.statusCode == 200) {
final data = jsonDecode(response.body);
print("Title: \${data['title']}");
}
}
📤 ตัวอย่าง POST request
void sendData() async {
final url = Uri.parse('https://jsonplaceholder.typicode.com/posts');
final response = await http.post(
url,
headers: {"Content-Type": "application/json"},
body: jsonEncode({"title": "Hello", "body": "เนื้อหา", "userId": 1}),
);
if (response.statusCode == 201) {
final data = jsonDecode(response.body);
print("สร้างโพสต์ใหม่ ID: \${data['id']}");
}
}
🧪 ตัวอย่างในแอปจริง
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(home: ApiExample());
}
}
class ApiExample extends StatefulWidget {
@override
_ApiExampleState createState() => _ApiExampleState();
}
class _ApiExampleState extends State<ApiExample> {
String result = "กำลังโหลด...";
@override
void initState() {
super.initState();
fetchData();
}
void fetchData() async {
final url = Uri.parse('https://jsonplaceholder.typicode.com/posts/1');
final response = await http.get(url);
if (response.statusCode == 200) {
final data = jsonDecode(response.body);
setState(() {
result = data['title'];
});
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("ดึงข้อมูลจาก API")),
body: Center(child: Text(result)),
);
}
}
✅ สรุป
- ใช้
http.get()
สำหรับดึงข้อมูล (GET) - ใช้
http.post()
สำหรับส่งข้อมูล (POST) - ใช้
jsonEncode
และjsonDecode
เพื่อแปลงข้อมูล JSON - ตรวจสอบ
statusCode
เพื่อประเมินผลลัพธ์จาก API
ในบทถัดไป เราจะเรียนรู้การแสดงผล JSON เหล่านั้นในรูปแบบ ListView หรือ UI ต่าง ๆ