[웹툰 앱 만들기] ApiService로 웹툰 정보 받기

 

먼저 flutter에서 ApiService를 통해 데이터를 받아올 수 있도록 http를 다운받는다.

https://pub.dev/packages/http

http | Dart Package

위 공식 페이지에서 Installing의 설명을 참고해 터미널에서 명령어를 입력하거나 pubspec.yaml 파일에 특정 문구를 작성하고 저장하면 된다.

 

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

class ApiService {
  final String baseUrl = 'https://webtoon-crawler.nomadcoders.workers.dev';
  final String today = 'today';

  void getTodayWebtoons() async {
    final url = Uri.parse('$baseUrl/$today');
    final response = await http.get(url);
    if (response.statusCode == 200) {
      print(response.body);
      return;
    }
    throw Error();
  }
}

import 'package:flutter/material.dart';
import 'package:toonlinkers/screens/home_screen_for_webtoon.dart';
import 'package:toonlinkers/services/api_service.dart';

void main() {
  ApiService().getTodayWebtoons();
  runApp(const App());
}

https://github.com/soaringwave/Flutter-studying/commit/87bb8dc9ac3786537f5299eccf20d546e1b4ad21

http를 이용해 특정 url에서 응답을 받아 저장하고, 데이터를 잘 받아오는지 확인하고자 main.dart 파일에서 실행문을 작성하고 print문을 통해 콘솔창에서 데이터를 확인한다.

 

확인이 되었다면, 웹툰 정보들을 활용하고 정리하고자 Webtoon model을 만든다. 그리고 이 모델을 활용해 웹툰 정보들을 웹툰 모델의 리스트로 정리한다.

class WebtoonModel {
  final String id, thumb, title;

  WebtoonModel.fromJson(Map<String, dynamic> json)
      : title = json['title'],
        thumb = json['thumb'],
        id = json['id'];
}

import 'dart:convert';

import 'package:http/http.dart' as http;
import 'package:toonlinkers/models/webtoon_model.dart';

class ApiService {
  final String baseUrl = 'https://webtoon-crawler.nomadcoders.workers.dev';
  final String today = 'today';

  Future<List<WebtoonModel>> getTodayWebtoons() async {
    List<WebtoonModel> webtoons = [];
    final url = Uri.parse('$baseUrl/$today');
    final response = await http.get(url);
    if (response.statusCode == 200) {
      final List<dynamic> webtoonsJson = jsonDecode(response.body);
      for (var webtoonJson in webtoonsJson) {
        webtoons.add(WebtoonModel.fromJson(webtoonJson));
      }
      return webtoons;
    }
    throw Error();
  }
}

https://github.com/soaringwave/Flutter-studying/commit/dc147909504529610ba938c8c5aeafbdb9e17d36

이때 웹툰 모델로 정리된 정보들은 async, await로 받는 정보이기 때문에 Future 자료형이다.

---

https://nomadcoders.co/flutter-for-beginners/lectures/4161

All Courses – 노마드 코더 Nomad Coders