ה־API לתרגול של Coddy

חלק מהיחידה נתונים ורשת במסלול ה-Flutter של Coddy. שיעור 4 מתוך 27.

רוב האפליקציות מקבלות את הנתונים שלהן משרת באינטרנט. בשיעורים האלה הבדיקות אינן יכולות להתחבר לאינטרנט, ולכן השרת נמצא בתוך האפליקציה שלך: lib/api.dart, ממשק ה-API לתרגול של Coddy. פתח אותו ברשימת הקבצים וקרא אותו. אי אפשר לשנות אותו.

החלק שבו משתמשים הוא פונקציה אחת, fetch. נותנים לה נתיב, החלק של כתובת אינטרנט שמופיע אחרי שם המתחם, והיא מחזירה את תשובת השרת בתור String, כעבור 2 שניות:

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')),
          ],
        ),
      ),
    );
  }
}