Obtener datos de internet

El patrón general que implementa este tutorial se llama Model-View-ViewModel o MVVM. MVVM es un patrón de arquitectura utilizado en aplicaciones cliente que separa tu aplicación en tres capas:

• Model: Maneja las operaciones de datos.
• View: Muestra la interfaz de usuario.
• ViewModel: Administra el State y conecta ambos.

El principio fundamental de MVVM (y muchos otros patrones) es la separación de responsabilidades. Administrar el State en clases separadas (fuera de tus Widgets de interfaz de usuario) hace que tu código sea más fácil de probar, reutilizar y mantener.

Una sola funcionalidad en tu aplicación contiene cada uno de los componentes de MVVM. En este tutorial, además de los Widgets de Flutter, crearás ArticleModel, ArticleViewModel y ArticleView.

El Model es la fuente de verdad para los datos de tu aplicación y es responsable de tareas de bajo nivel como realizar solicitudes HTTP, almacenar datos en caché o administrar recursos del sistema como los utilizados por un plugin de Flutter. Un modelo no suele necesitar importar librerías de Flutter.

Crea una clase ArticleModel vacía en tu archivo main.dart:

class ArticleModel {
  // Properties and methods will be added here.
}

Wikipedia proporciona una API REST que devuelve datos JSON sobre artículos. Para esta aplicación, usarás el endpoint que devuelve un resumen de artículo aleatorio.

https://en.wikipedia.org/api/rest_v1/page/random/summary

Añade un método para obtener un resumen de artículo de Wikipedia aleatorio:

class ArticleModel {
  Future<Summary> getRandomArticleSummary() async {
    final uri = Uri.https(
      'en.wikipedia.org',
      '/api/rest_v1/page/random/summary',
    );
    final response = await get(uri);
​
    // TODO: Add error handling and JSON parsing.
    throw UnimplementedError();
  }
}

Usa las palabras clave async y await para manejar operaciones asíncronas. La palabra clave async marca un método como asíncrono, y await espera expresiones que devuelven un Future.

El constructor Uri.https construye URLs de forma segura al manejar la codificación y el formato. Este enfoque es más confiable que la concatenación de cadenas, especialmente cuando se trabaja con caracteres especiales o parámetros de consulta.

Maneja siempre los errores al realizar solicitudes HTTP. Un código de estado de 200 indica éxito, mientras que otros códigos indican errores. Si el código de estado no es 200, el modelo lanza un error para que la interfaz de usuario lo muestre a los usuarios.

class ArticleModel {
  Future<Summary> getRandomArticleSummary() async {
    final uri = Uri.https(
      'en.wikipedia.org',
      '/api/rest_v1/page/random/summary',
    );
    final response = await get(uri);
​
    if (response.statusCode != 200) {
      throw const HttpException('Failed to update resource');
    }
​
    // TODO: Parse JSON and return Summary.
    throw UnimplementedError();
  }
}

La API de Wikipedia devuelve datos JSON que decodificas en una clase Summary Completa el método getRandomArticleSummary:

class ArticleModel {
  Future<Summary> getRandomArticleSummary() async {
    final uri = Uri.https(
      'en.wikipedia.org',
      '/api/rest_v1/page/random/summary',
    );
    final response = await get(uri);
​
    if (response.statusCode != 200) {
      throw const HttpException('Failed to update resource');
    }
​
    return Summary.fromJson(jsonDecode(response.body) as Map<String, Object?>);
  }
}

La clase Summary está definida en summary.dart. Si no estás familiarizado con el análisis de JSON, consulta el tutorial Primeros pasos con Dart.