🌐 Lesson 11: Fetch Live Data

⏱ 35-45 min 📊 Advanced 🌐 Real APIs 🔥 Integration 2026 🔗 Official Source

🌐

Bringing the Internet into Your App

Your CLI can do amazing things locally. Now let's connect it to the world! Live data from the web turns your app from a calculator into a real tool.

💻 Your App

→ HTTP Request →

🌍 Internet

← JSON Response ←

📦 Data Model

🎯

Today's Project: "Wikipedia Explorer CLI"

We'll build a complete Wikipedia client that fetches real data:

🔍 Search Wikipedia articles
📄 Fetch article summaries
🛡️ Handle network errors gracefully
📊 Display formatted results
🌐 Respect API rate limits

Step 1

Making Your First HTTP Request

🧪 Live HTTP Request Simulator

See how an HTTP GET request works (simulated in browser):

URL: Method:

📡 Request Details:

final url = Uri.parse('https://en.wikipedia.org/...');
final response = await http.get(url);

📥 Response:

Status: Waiting...

Headers will appear here

// Response body will appear here

Step 2

Handling HTTP Status Codes

🚦 Status Code Explorer

Click a status code to see how to handle it:

Click a status code to learn more

Understanding HTTP status codes is crucial for robust API clients.

Step 3

Building a Search Function

🔍 Wikipedia Search Simulator

Try searching Wikipedia (simulated results):

Enter a search term to see results

📄 Search Code:

Future>> searchWikipedia(String query) async {
  final url = Uri.parse(
    'https://en.wikipedia.org/w/api.php'
    '?action=opensearch'
    '&format=json'
    '&search=${Uri.encodeComponent(query)}'
    '&limit=10'
  );
  
  final response = await http.get(url);
  // ... parse JSON array
}

Step 4

Error Handling & Resilience

🛡️ Network Error Simulator

See how different failures are handled:

⏰ Timeout

Request takes too long

🔌 DNS Failure

Cannot resolve host

💥 Server Error

500 Internal Server Error

🚫 Rate Limited

429 Too Many Requests

Click a scenario to see how it's handled

🔄 Retry with Exponential Backoff

Future fetchWithRetry(Future Function() fn) async {
  for (int attempt = 1; attempt <= 3; attempt++) {
    try {
      return await fn().timeout(Duration(seconds: 5));
    } catch (e) {
      if (attempt == 3) rethrow;
      await Future.delayed(Duration(seconds: attempt * 2));
    }
  }
  throw Exception('Unreachable');
}

🏆

Build: Wikipedia Explorer CLI

🌐 Wikipedia Service Class

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

class WikipediaService {
  static const String _baseUrl = 'https://en.wikipedia.org';
  
  static Future<List<Map<String, String>>> search(String query) async {
    final url = Uri.parse(
      '$_baseUrl/w/api.php'
      '?action=opensearch'
      '&format=json'
      '&search=${Uri.encodeComponent(query)}'
      '&limit=10'
    );
    
    final response = await http.get(url);
    
    if (response.statusCode == 200) {
      final data = jsonDecode(response.body);
      if (data is List && data.length >= 4) {
        final titles = data[1] as List;
        final urls = data[3] as List;
        return List.generate(titles.length, (i) => {
          'title': titles[i].toString(),
          'url': urls[i].toString(),
        });
      }
    }
    throw HttpException('Search failed: ${response.statusCode}');
  }
  
  static Future<Map<String, dynamic>> getSummary(String title) async {
    final url = Uri.parse(
      '$_baseUrl/api/rest_v1/page/summary/${Uri.encodeComponent(title)}'
    );
    
    final response = await http.get(url);
    
    if (response.statusCode == 200) {
      return jsonDecode(response.body) as Map<String, dynamic>;
    } else if (response.statusCode == 404) {
      throw ArticleNotFoundException(title);
    } else {
      throw HttpException('Failed: ${response.statusCode}');
    }
  }
}

class HttpException implements Exception {
  final String message;
  HttpException(this.message);
  @override String toString() => 'HttpException: $message';
}

class ArticleNotFoundException implements Exception {
  final String title;
  ArticleNotFoundException(this.title);
  @override String toString() => 'Article not found: $title';
}

📦 Data Models (using pattern matching)

🖥️ CLI Application

import 'dart:io';

void main(List<String> arguments) async {
  if (arguments.isEmpty) {
    print('Usage: dart run bin/cli.dart <search|summary> <query>');
    return;
  }
  
  final command = arguments.first;
  final query = arguments.length > 1 ? arguments.sublist(1).join(' ') : '';
  
  try {
    switch (command) {
      case 'search':
        print('🔍 Searching Wikipedia for "$query"...');
        final results = await WikipediaService.search(query);
        for (var i = 0; i < results.length; i++) {
          print('${i + 1}. ${results[i]['title']}');
        }
        break;
        
      case 'summary':
        print('📄 Fetching summary for "$query"...');
        final data = await WikipediaService.getSummary(query);
        final summary = WikiSummary.fromJson(data);
        print('\n📖 ${summary.title}');
        if (summary.description != null) {
          print('📝 ${summary.description}');
        }
        print('\n${summary.extract}\n');
        if (summary.url != null) {
          print('🔗 ${summary.url}');
        }
        break;
        
      default:
        print('Unknown command: $command');
    }
  } on ArticleNotFoundException catch (e) {
    print('❌ ${e.toString()}');
  } on HttpException catch (e) {
    print('⚠️ Network error: ${e.message}');
  } catch (e) {
    print('💥 Unexpected error: $e');
  }
}

🎮 Live Demo (Simulated)

$ dart run bin/cli.dart

Enter a command to see output

🎮 Fetch Challenge: API Master Quiz

🌐 Score: 0/5

⚡ Streak: 0

⏱ Time: 0s

📶 Signal: 100%