واجهة API التدريبية من Coddy

جزء من قسم البيانات والشبكة في رحلة Flutter على Coddy. الدرس 4 من 27.

تحصل معظم التطبيقات على بياناتها من خادم على الإنترنت. في هذه الدروس، لا تستطيع الاختبارات الوصول إلى الإنترنت، لذا يوجد الخادم داخل تطبيقك: lib/api.dart، واجهة برمجة التطبيقات التدريبية الخاصة بـ Coddy. افتحه من قائمة الملفات واقرأه. لا يمكنك تغييره.

الجزء الذي تستدعيه هو دالة واحدة، fetch. تعطيها مسارًا، وهو الجزء من عنوان الويب الذي يأتي بعد النطاق، فتعطيك إجابة الخادم على هيئة String بعد ثانيتين:

import 'api.dart';

final text = await fetch('/message');

يفعل التطبيق الحقيقي الشيء نفسه باستخدام حزمة http. يرسل طلبًا وينتظر المتن في الإجابة، أي النص الذي أعاده الخادم:

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

final response = await http.get(Uri.parse('https://example.com/message'));
final text = response.body;

الشيفرة المحيطة به هي نفسها: دالة async، ثم await، ثم setState مع النتيجة. كل ما تبنيه هنا يعمل بالطريقة نفسها مع خادم حقيقي.

التحدي

سهل

يؤدي النقر على Load message إلى إظهار Loading... ويتوقف عند هذا الحد. أكمل loadMessage: احصل على النص من المسار /message باستخدام fetch، ثم اعرضه بدلًا من Loading....

جرّب بنفسك

import 'package:flutter/material.dart';

import 'api.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MessageScreen(),
    );
  }
}

class MessageScreen extends StatefulWidget {
  const MessageScreen({super.key});

  @override
  State<MessageScreen> createState() => _MessageScreenState();
}

class _MessageScreenState extends State<MessageScreen> {
  String message = 'No message yet';

  Future<void> loadMessage() async {
    setState(() {
      message = 'Loading...';
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text(message, style: const TextStyle(fontSize: 24)),
            const SizedBox(height: 24),
            ElevatedButton(onPressed: loadMessage, child: const Text('Load message')),
          ],
        ),
      ),
    );
  }
}