Flutter _ ApiService Upgrade

230605

 

---

오늘은 웹툰의 상세페이지에

내용을 추가하기 위해

API의 데이터를 추가적으로 Fetch하는 작업을 해보겠다.

 

---

1. Api_Service Upgrade

 

 

현재 우리의 강의용 Api에서

id를 붙이면

해당 id의 웹툰의

title, about, genre, age, thumb의 정보가 출력되는데

 

이 key값들을 이용해

우리가 만들었던 Api_Service 를 업그레이드 하여

DetailWebtoon에 정보를 가져오자.

 

---

 

1-1. webtoon_detail_model

 

 

우선 Toonflix_api_service.dart 파일로 이동하여

새로운 함수를 선언해야 한다.

 

역시 Future 타입으로

모델에 데이터를 리턴 받아야 하는데

 

 

우리가 기존에 사용했던

WebtoonModel은

 

title, thumb, id만 받는 모델이고

 

우리가 받아야할 Key값들은

title, about, genre, age

이기 때문에

 

새로 모델을 정의해주자.

 

위와 같이 새롭게 모델을 정의할 파일을 만들고

 

저번 모델과 똑같이

변수들만 바꿔서 만들어 준다.

 

그리고 다시 Toonflix_api_service.dart 파일로 이동해서

 

선언 하던 함수에

전달 받을 객체로 WebtoonDetailModel을 지정하고

getToonById라는 이름으로 함수를 선언한다.

 

이 함수는 async로 비동기 기능을 추가하고

 

함수의 인자는 id를 받을것이며

url 은 baseUrl 뒤에 id를 붙인다.

response는 await으로 데이터를 다 받을때까지 기다린다.

 

그리고 만약 response에 데이터가 있다면,

webtoon이라는 변수에

response의 body를

json으로 변환(jsonDecode)하여 저장하고

 

WebtoonDetailModel에

webtoon을 전달하는것을 return한다.

 

---

1-2. webtoon_episode_model

 

추가적으로 API의 주소에

id/episodes를 입력하면

해당 웹툰의 

thumb, id, title, rating, date라는 Key값들로

데이터들이 자동으로 크롤링 되어있는데,

 

위의 데이터도 가져오기 위해

또 Model부터 정의해보자.

 

 

webtoon_episode_model.dart 파일을 만들고

 

WebtoonEpisodeModel을 위와 같이 정의하고

 

다시 Toonflix_api_service.dart 파일로 돌아와

 

episodesIsntances -> episodesInstances 오타 수정함.

위와 같이

List<WebtoonEpisodeModel>에게 값을 넘겨주는

getLatestEpisodesById라는 함수를 선언한다.

 

List<WebtoonEpisodeModel>인

episodesInstances은 리스트인데

에피소드들을 리스트안에 추출해서 모아야 하기 때문이다.

 

그래서 각각의 에피소드들을

아래의 반복문을 통해 추출하고

episodesInstances에 저장한다.

 

이렇게 총 2개의 함수로 Data를 Fetch하고

2개의 클래스로 Data를 모델화 해놓았다.