[개발] #02 아이템 정보 업데이트

<Fig. 01>

<Fig. 02>

<Fig. 03>

<Fig. 04>

 

아이템 정보 화면 업데이트 완료했습니다.

 

소스 데이터

penguin-stats.io의 api를 활용했습니다.

다만, 공식문서로 배포된 api는 최근 업데이트가 되지 않는 것 같아,

공식 사이트에서 사용하는 api를 개발자모드를 통해 알아내서 사용하였습니다.

<Fig. 05> 이 중 하나...

 

불 필요한 api 남용을 막고자 주소는 적지는 않지만, 필요하신 분들은 댓글 달아주시면 비밀글로 알려드리겠습니다.

 

 

구현 방법

penguin-stats.io api의 데이터 양식은 다음과 같습니다.

{
  "matrix": [
    {
      "stageId": "act15d0_02_rep",
      "itemId": "30031",
      "times": 41,
      "quantity": 67,
      "stdDev": 0.4817,
      "start": 1638864000000,
      "end": 1639684800000
    },
    {
      "stageId": "act15d0_02_rep",
      "itemId": "furni",
      "times": 41,
      "quantity": 1,
      "stdDev": 0.1543,
      "start": 1638864000000,
      "end": 1639684800000
    },
    ...
  ]
}

 

이 데이터를 splash화면에서 불러와 모델링하여 Bloc으로 관리합니다.

<Fig. 06> splash screen (stage 3/3)

 

관리할 때, 스테이지별 아이템 드롭률, 아이템별 스테이지 드롭률을 각각 파악하기 위해 이를 나누어 저장합니다.

또한 저장할 때, timestamp에 따라 같은 데이터는 최신 데이터로 덮어씁니다.

 

데이터를 아이템 리스트 화면에 뿌리는 과정은 오퍼레이터, 적과 동일한 로직으로 동작합니다.

단, 사용성이 너무 낮은 아이템 데이터가 많았기에 이는 필터링하여 제거하였습니다.

 

아이템 정보 화면에서는 Bloc으로 관리하던 penguin 모델을 가져와 이를 분석합니다.

분석할 때는 스테이지 정보도 필요하기에 이를 분석할 때, 스테이지 데이터 (stage_table.json)도 활용합니다.

하지만, 이를 분석하는데 시간이 걸리기에 비동기로 처리합니다.

 

화면에 뿌리는 과정에서는 항목이 너무 많으면 렉이 걸려 사용자 경험을 해칠 수 있기 때문에,

CustomScrollView와 SliverList - SliverChildBuilderDelegate를 이용하여 구현하였습니다.

또한, 스크롤을 아무리 내려도 사용자가 필터링 기능을 바로 사용할 수 있도록 SliverAppBar를 이용하였습니다.

 

 

TroubleShooting

Sliver를 사용하는데 있어, 중첩 CustomScrollView를 사용할 수 없는 것이 어려웠습니다.

방법이 있을지도 모르나, 현재에 있어 그 방법을 모르기에 최대한 중첩 ScrollVIew를 만들지 않도록

위젯 트리를 구성해서 해결했습니다.

 

비슷한 문제가 현재 스테이지 리스트 화면에서도 있지만,

해당 화면은 zone별 스테이지 개수가 30개를 넘기는 경우가 거의 없다시피 할 정도로

적기 때문에 중첩 ScrollView를 사용하는 대신 Sliver의 이점을 버리는 방식으로 구현되었습니다.

 

 

ToDo

스테이지를 누르면 해당 스테이지로 이동하도록 구현 예정.

각 버튼별 stageId값을 갖고있도록 구현하였기에 적용은 어렵지 않음.

 

또한 스테이지 화면 역시 penguin 데이터를 사용하도록 업데이트 할 예정.