Colin's Blog
[flutter] 플러터에서 GET 메소드를 사용하여 유저 맞춤형 추천 상품 목록을 가져오는 방법은 무엇인가요?

플러터는 사용자의 요청에 따라 서버에서 데이터를 가져올 수 있도록 HTTP 요청을 보낼 수 있는 다양한 패키지를 제공합니다. 이 중에서도 가장 많이 사용되는 패키지는 ‘http’입니다. 이 패키지를 사용하여 GET 메소드를 통해 유저 맞춤형 추천 상품 목록을 가져올 수 있습니다.

패키지 추가하기

먼저, pubspec.yaml 파일에 ‘http’ 패키지를 추가해야 합니다. 아래와 같이 dependencies 항목에 ‘http’ 패키지를 추가합니다.

dependencies:
  http: ^0.13.0

패키지를 추가한 후에는 터미널에서 flutter pub get 명령어를 실행하여 패키지를 다운로드 받아야 합니다.

GET 요청 보내기

이제 GET 요청을 보내고 유저 맞춤형 추천 상품 목록을 가져올 수 있는 코드를 작성해보겠습니다.

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

Future<List<Product>> getRecommendedProducts() async {
  final url = Uri.parse('https://api.example.com/recommendations');
  final response = await http.get(url);

  if (response.statusCode == 200) {
    // 요청이 성공한 경우, JSON 데이터를 파싱하여 상품 목록을 생성합니다.
    final jsonData = json.decode(response.body);
    final products = List<Product>.from(
        jsonData.map((productJson) => Product.fromJson(productJson)));

    return products;
  } else {
    // 요청이 실패한 경우, 에러를 throw합니다.
    throw Exception('Failed to load recommended products');
  }
}

위 코드에서는 ‘http’ 패키지의 http.get() 메소드를 사용하여 GET 요청을 보내고, 응답을 받아옵니다. 응답의 상태 코드가 200인 경우에는 응답 데이터를 JSON으로 파싱한 후 상품 목록(List<Product>)으로 반환하고, 그렇지 않은 경우에는 예외를 throw합니다.

사용 예시

위에서 작성한 getRecommendedProducts() 메소드를 사용하여 유저 맞춤형 추천 상품 목록을 가져오는 예시 코드를 확인해보겠습니다.

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Recommended Products'),
      ),
      body: FutureBuilder<List<Product>>(
        future: getRecommendedProducts(),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            return ListView.builder(
              itemCount: snapshot.data.length,
              itemBuilder: (context, index) {
                final product = snapshot.data[index];
                return ListTile(
                  title: Text(product.name),
                  subtitle: Text(product.description),
                  leading: Image.network(product.imageUrl),
                );
              },
            );
          } else if (snapshot.hasError) {
            return Center(child: Text('Error loading recommended products'));
          }

          return CircularProgressIndicator();
        },
      ),
    );
  }
}

위 예시 코드는 FutureBuilder를 사용하여 getRecommendedProducts() 메소드의 결과를 기다린 후, 상품 목록을 리스트로 보여주는 화면을 구성한 예시입니다. snapshot.hasData는 데이터가 있는 경우, snapshot.hasError는 에러가 있는 경우를 검사하여 각각의 상황에 맞게 UI를 구성합니다.

이제 GET 메소드를 사용하여 플러터에서 유저 맞춤형 추천 상품 목록을 가져오는 방법을 알게 되었습니다. 이를 통해 서버와의 통신을 효율적으로 처리하고, 사용자에게 맞춤형 경험을 제공할 수 있게 됩니다.

참고자료:

© 2018 Colin. All rights reserved.