롤 명함 앱 만들기#5-소환사 데이터 가져오기

소스 코드들을 여기에 다 올리면 너무 난잡할 것 같다.

애초에 이 블로그도 프로젝트 진행, 과정을 적는 용도이지 소스코드 리뷰 블로그가 아니기에..

그래서 전체 소스는 올리지 않겠다.

 

대신 깃허브에 올려놨으니 필요한 사람은 가서 보면 된다.

https://github.com/harmlessman/LOLCard

 

 

 

이번에는 소환사의 데이터들을 가져오자.

 

데이터는 OP.GG에서 가져올 것이고, 전적 홈페이지의 HTML 코드들을 가져와

원하는 정보를 파싱을 할 것이다.

 

우리가 해야 할 작업은 아래와 같다.

 

1. 데이터 클래스 만들기
2. 소환사 이름과 어느서버인지를 입력받기
3. 데이터 가져오기

 

데이터 클래스

 

데이터 클래스에는 변수들 선언, 생성자, 데이터 값 출력 함수 정도만 구현했다.

class CardData {
  String? userName;
  String? userIcon;
  String? lane;
  int? userLevel;

  String? tier;
  int? rate;
  int? win;
  int? loss;
  int? lp;

  Map<String, dynamic>? mostChampions = {
    'champ0': {
      'champRate': 0,
      'champGrade': [],
      'champPlay': 0,
      'champIcon': '',
      'champName': ''
    },
    'champ1': {
      'champRate': 0,
      'champGrade': [],
      'champPlay': 0,
      'champIcon': '',
      'champName': ''
    },
    'champ2': {
      'champRate': 0,
      'champGrade': [],
      'champPlay': 0,
      'champIcon': '',
      'champName': ''
    },
  };

  CardData({
    this.userName = '',
    this.userIcon = '',
    this.lane = 'All Rounder',
    this.userLevel = 0,
    this.tier = 'Unranked',
    this.rate = 0,
    this.win = 0,
    this.loss = 0,
    this.lp = 0,
    this.mostChampions,
  });

  printInfo() {
    print('userName : $userName');
    print('userIcon : $userIcon');
    print('lane : $lane');
    print('userLevel : $userLevel');
    print('tier : $tier');
    print('lp : $lp');
    print('rate : $rate');
    print('win : $win');
    print('loss : $loss');
    print('mostChampions : $mostChampions');
  }
}

 

icon 문자열에는 이미지 url값이 들어간다.

저기 변수선언에 보면 타입 앞에 ?가 있는 건 변수값이 null이 될 수도 있다는 의미

 

 

이름, 서버 입력받기

 

위의 사진이 소환사 이름과 서버(나라)를 선택하는 페이지.

 

소환사 이름과 서버를 선택한 후, Enter버튼을 누르면 

소환사 전적페이지의 html 소스에서 필요한 소환서 정보들을 가져오는 함수(dataCrawling)에 이름, 서버를 전달하고 실행한다.

 

// Enter버튼을 눌렀을 때, 실행됨
EnterEvent() async {
    userName = inputController.text;
    LoadingDialog(context);

    // username이 blank일 때,
    if (userName == '') {
      Navigator.pop(context);
      FailDialog(context, -1);
      return -1;
    }

    //데이터 가져오는 함수
    dynamic data =
        await dataCrawling(userName, server: countryMap[selectCountry]);

    Navigator.pop(context);

    // if error occur
    if (int.tryParse(data.toString()) != null) {
      FailDialog(context, data);
      return int.tryParse(data.toString());
    }

    Navigator.push(
        context, MaterialPageRoute(builder: (context) => SelectPosition(data)));
    return data;
  }

 

dataCrawling의 리턴값은 위의 데이터 클래스이다.(CardData)

리턴 값에 오류가 없다면, 다음 페이지로 넘어간다.

 

 

데이터 가져오기

데이터를 가져오는 작업은 dataCrawling함수에서 진행한다. (data_crwaling.dart)

 

'https://www.op.gg/summoners/$server/$userName'

위의 주소에서 html값을 가져온다.

 

네트워크 에러, 서버 에러, 등록되지 않은 소환사 이슈 등을 판별하고, 

별 문제가 없으면 데이터를 가져오고, CardData값으로 리턴한다.

 

 

이렇게 해서 소환사 이름과 서버를 입력받고, 소환사 데이터를 가져온다.