El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

En aquest tema, aprendrem com integrar APIs REST en una aplicació Flutter per obtenir i enviar dades a un servidor. Les APIs REST són una manera estàndard de comunicar-se amb serveis web i són àmpliament utilitzades en el desenvolupament d'aplicacions mòbils.

Objectius

Comprendre què és una API REST.
Aprendre a fer sol·licituds HTTP en Flutter.
Gestionar respostes i errors de les sol·licituds HTTP.
Analitzar dades JSON obtingudes d'una API REST.

Què és una API REST?

Una API REST (Representational State Transfer) és un conjunt de regles que permeten la interacció entre clients i servidors a través del protocol HTTP. Les operacions principals són:

GET: Obtenir dades del servidor.
POST: Enviar dades al servidor.
PUT: Actualitzar dades al servidor.
DELETE: Eliminar dades del servidor.

Configuració Prèvia

Abans de començar, assegura't d'haver afegit el paquet http al teu projecte Flutter. Pots fer-ho afegint la següent línia al fitxer pubspec.yaml:

dependencies:
  http: ^0.13.3

Després, executa flutter pub get per instal·lar el paquet.

Fer Sol·licituds HTTP

Sol·licitud GET

A continuació, es mostra com fer una sol·licitud GET per obtenir dades d'una API REST:

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

Future<void> fetchData() async {
  final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts'));

  if (response.statusCode == 200) {
    List<dynamic> data = jsonDecode(response.body);
    print(data);
  } else {
    throw Exception('Failed to load data');
  }
}

Explicació del Codi

Importacions: Importem el paquet http i dart:convert per treballar amb sol·licituds HTTP i dades JSON.
http.get: Fa una sol·licitud GET a l'URL especificada.
response.statusCode: Comprova si la sol·licitud ha estat exitosa (codi 200).
jsonDecode: Converteix la resposta JSON en una llista de mapes.

Sol·licitud POST

Per enviar dades a una API REST, utilitzem una sol·licitud POST:

Future<void> postData() async {
  final response = await http.post(
    Uri.parse('https://jsonplaceholder.typicode.com/posts'),
    headers: <String, String>{
      'Content-Type': 'application/json; charset=UTF-8',
    },
    body: jsonEncode(<String, String>{
      'title': 'foo',
      'body': 'bar',
      'userId': '1',
    }),
  );

  if (response.statusCode == 201) {
    print('Data posted successfully');
  } else {
    throw Exception('Failed to post data');
  }
}

Explicació del Codi

http.post: Fa una sol·licitud POST a l'URL especificada.
headers: Defineix el tipus de contingut com a JSON.
jsonEncode: Converteix les dades en format JSON.

Gestió d'Errors

És important gestionar els errors que poden ocórrer durant les sol·licituds HTTP. Aquí tens un exemple de com fer-ho:

Future<void> fetchDataWithErrorHandling() async {
  try {
    final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts'));

    if (response.statusCode == 200) {
      List<dynamic> data = jsonDecode(response.body);
      print(data);
    } else {
      print('Failed to load data: ${response.statusCode}');
    }
  } catch (e) {
    print('An error occurred: $e');
  }
}

Exercici Pràctic

Exercici

Crea una aplicació Flutter que faci una sol·licitud GET a l'API https://jsonplaceholder.typicode.com/posts i mostri els títols dels posts en una llista.

Solució

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: Scaffold(
        appBar: AppBar(
          title: Text('API REST Example'),
        ),
        body: PostList(),
      ),
    );
  }
}

class PostList extends StatefulWidget {
  @override
  _PostListState createState() => _PostListState();
}

class _PostListState extends State<PostList> {
  List<dynamic> posts = [];

  @override
  void initState() {
    super.initState();
    fetchPosts();
  }

  Future<void> fetchPosts() async {
    final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts'));

    if (response.statusCode == 200) {
      setState(() {
        posts = jsonDecode(response.body);
      });
    } else {
      throw Exception('Failed to load posts');
    }
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: posts.length,
      itemBuilder: (context, index) {
        return ListTile(
          title: Text(posts[index]['title']),
        );
      },
    );
  }
}

Explicació del Codi

PostList: Un widget que mostra una llista de posts.
fetchPosts: Fa una sol·licitud GET per obtenir els posts i actualitza l'estat del widget.
ListView.builder: Crea una llista dinàmica de widgets ListTile per mostrar els títols dels posts.

Conclusió

En aquest tema, hem après com fer sol·licituds GET i POST a APIs REST utilitzant el paquet http en Flutter. També hem vist com gestionar errors i analitzar dades JSON. Amb aquests coneixements, pots començar a integrar APIs REST en les teves aplicacions Flutter per obtenir i enviar dades de manera eficient.

Ús d'APIs REST

Objectius

Què és una API REST?

Configuració Prèvia

Fer Sol·licituds HTTP

Sol·licitud GET

Explicació del Codi

Sol·licitud POST

Explicació del Codi

Gestió d'Errors

Exercici Pràctic

Exercici

Solució

Explicació del Codi

Conclusió

Curs de Desenvolupament Flutter

Mòdul 1: Introducció a Flutter

Mòdul 2: Conceptes Bàsics de Programació en Dart

Mòdul 3: Widgets de Flutter

Mòdul 4: Gestió de l'Estat

Mòdul 5: Navegació i Enrutament

Mòdul 6: Xarxes i APIs

Mòdul 7: Persistència i Emmagatzematge

Mòdul 8: Conceptes Avançats de Flutter

Mòdul 9: Proves i Depuració

Mòdul 10: Desplegament i Manteniment

Mòdul 11: Flutter per a Web i Escriptori