Flutter dio 패키지로 노션 api 불러오기(postman)

플러터의 dio 패키지를 이용해서 노션 데이터 베이스의 api를 불러오고자 한다.

노션 데이터 베이스 api 연동과정

1) 노션 데이터베이스 API 통합생성

• 나는 이미 생성된 API를 가져왔기 때문에 해당 과정은 생략함.
• 어렵지 않으니 인터넷 검색하여 시크릿 코드 발급하고 따로 저장해둘 것! (추후 필요)

2) 가져올 데이터베이스 ID 저장

• 해당 데이터베이스의 점세개바 선택하여 데이터베이스 링크 복사
  

https://www.notion.so/~~~/~~~**?v**=~~~~
이런식으로 주소가 구성되어 있는데 뒤쪽 마지막 /의 첫 문자부터 ?v 앞까지 문자가 해당 데이터베이스의 id가 된다.

3) 포스트맨 워크스페이스 생성

노션 검색하여 해당 워크스페이스 생성

4) api 생성

위쪽에 사용할 api 선택 후 노션 데이터베이스 링크 입력

Authorization - Type 'Beaer Token'으로 설정 후 오른쪽 Token에 api 시크릿 키 입력
Content-Type : application/json 인지 확인,
Notion-Version : 최신 버전으로 입력 (모르면 구글링ㄱ)

이렇게 하면 API 셋팅은 끝났다.

나는 POST지만 데이터를 가져오는 작업을 할 것이기 때문에 body를 none(모든 데이터 불러오기)으로 설정한 후 send 버튼 눌러 결과를 불러왔다.

Notion API Flutter로 불러오기 (Dio 패키지 사용)

Notion API 데이터베이스를 정상적으로 불러오는 것을 확인했으니, 이제 이를 플러터의 Dio를 통해 앱에서 확인할 수 있게 해주어야한다.

Dio란?

플러터에서 HTTP와 같이 서버와 통실할 때 사용하는 패키지로, 간단하고 직관적이게 API를 사용할 수 있고, 쉬운 사용법으로 API 요청, 생성, 응답이 가능함

1) dio 패키지 설치

• flutter pub add dio 터미널에 입력

2) api 코드 입력

const String apiUrl =
    'https://api.notion.com/v1/databases/10cfe8222fba400ea97675915cf8c1c3/query';

String fetchApiUrl = 'https://api.notion.com/v1/pages';

final dio = Dio()
  ..options.headers['Authorization'] =
      'Bearer secret_Yf4EkquTdbfCCER4CGS8JdXRkmjQAWcDEpVaaYtevPi'
  ..options.headers['Content-Type'] = 'application/json'
  ..options.headers['Notion-Version'] = '2022-06-28';

void fetchDataFromAPI() async {
  try {
    var response = await dio.post(apiUrl);

    if (response.statusCode == 200) {
      final results = response.data['results'];

      results.forEach((e) {
        final String? email = e['properties']['이메일']['email'] as String?;
        final String? phoneNumber =
            e['properties']['연락처']['phone_number'] as String?;
        final String? affiliation =
            e['properties']['소속']['select']['name'] as String?;
        final String? name =
            e['properties']['이름']['title'][0]['text']['content'] as String?;

        c.dataList.add({
          'email': email,
          'phoneNumber': phoneNumber,
          'affiliation': affiliation,
          'name': name
        });
      });
      c.apiCalled = true;
    } else {
      print('Failed to load data, status code: ${response.statusCode}');
    }
  } catch (error) {
    print('Error: $error');
  }
}

dio불러올 때 options로 포스트맨에서 헤더로 설정했던, Authorization, Content-type, Notion-Version을 설정해주어야 한다.

포스트맨에서 post로 api 호출 했기 때문에 해당 명령어로 호출했다.

노션 api 호풀 성공은 200, 실패는 400 등의 코드가 나온다.
성공, 실패 여부를 콘솔에 추가할 수 있는 코드를 작성했다.

호출 성공하면, ui에 띄우기 위해 컨트롤러의 dataList에 맵 형태로 추가하여 출력했다! (getx 사용)