Flutter 애드센스 수익조회

Flutter는 Google이 2017년에 출시한 크로스 플랫폼 프레임워크입니다. 이 프레임워크의 가장 큰 특징은 하나의 코드베이스로 모바일, 웹, 데스크톱 앱을 모두 개발할 수 있다는 점입니다. Material Design과 Hot Reload 같은 혁신적인 기능들은  개발자가 빠르고 효율적으로 앱을 개발할 수 있게 도와줍니다.

Flutter 애드센스 수익조회

이 포스팅은 Flutter 앱 개발 가이드의 두 번째 이야기입니다. 첫 번째 글에서는 Flutter 앱에서 가장 기본이 되는 Google 로그인 기능의 구현 방법을 살펴보았습니다.

2024.12.12 - [프로그래밍] - Flutter에서 Google 로그인

Flutter에서 Google 로그인

이번에는 그 다음 단계로, Google 로그인 이후 AdSense API를 활용하여 실제 광고 수익 데이터를 조회하는 방법을 알아보겠습니다. 이 글에서 설명하는 모든 예제 코드는 makepluscode GitHub 에서 확인할 수 있으며, 실제 작동하는 완성된 코드를 해당 저장소를 참고하세요.

Flutter 애드센스 수익조회

이 프로그램의 실제 수행화면은 다음과 같습니다.

Flutter 애드센스 수익조회

반응형

개발 환경 및 필수 요구사항

Flutter 개발 환경

먼저 Flutter와 Dart SDK가 필요합니다. Flutter는 크로스 플랫폼 앱 개발을 위한 프레임워크이고, Dart는 이 프레임워크에서 사용하는 프로그래밍 언어입니다. Flutter 공식 웹사이트(flutter.dev)에서 운영체제에 맞는 SDK를 다운로드하여 설치할 수 있습니다. Dart SDK는 Flutter SDK 설치 시 자동으로 함께 설치됩니다.

Google Cloud Project 설정

Google의 서비스를 이용하기 위해서는 Google Cloud Project가 필요합니다. 특히 이 프로젝트에서는 OAuth 2.0 Client ID가 필수적입니다. 이는 사용자 인증을 위한 고유 식별자로, Google Cloud Console에서 새 프로젝트를 생성한 후 발급받을 수 있습니다. 이 Client ID는 앱에서 Google 서비스에 안전하게 접근할 수 있도록 해주는 중요한 인증 수단입니다. 추가로 AdSense 계정 및 API 권한이 필요한데 이 부분은 별도의 포스팅으로 다루겠습니다.

프로그램 전체 구조

AdSenseApp은 앱의 진입점으로 로그인 화면을 생성하고, LoginScreen에서는 구글 계정으로 로그인하여 인증 토큰을 얻은 후 DashboardScreen으로 전환합니다. DashboardScreen은 얻은 인증 토큰으로 AuthClient를 통해 AdSense API와 통신하여 수익 데이터를 가져오고, 이 데이터를 EarningCard 위젯들을 사용해 사용자에게 보여줍니다. 전체적으로 사용자 인증 → 데이터 취득 → 데이터 표시의 흐름으로 동작하는 AdSense 수익 확인 애플리케이션입니다.

AdSenseApp 클래스

• 앱의 메인 진입점이 되는 클래스입니다.
• build() 메서드를 통해 앱의 기본 위젯을 생성하고 MaterialApp을 설정합니다.
• LoginScreen을 초기 화면으로 생성합니다.

LoginScreen 클래스

• 구글 로그인 기능을 담당하는 화면입니다.
• 비공개 변수로 _googleSignIn을 가지고 있어 구글 로그인을 처리합니다.
• _signIn(BuildContext) 메서드를 통해 실제 로그인 프로세스를 처리합니다.
• build() 메서드로 로그인 UI를 구성합니다.
• 로그인 성공 시 DashboardScreen으로 화면을 전환합니다.

DashboardScreen 클래스

• AdSense 대시보드의 메인 화면을 담당합니다.
• 주요 속성:
  • earnings: String과 double을 키-값으로 가지는 Map으로 수익 데이터를 저장
  • isLoading: 데이터 로딩 상태를 표시하는 불리언 값
  • accessToken: API 인증에 사용되는 토큰 문자열
• _loadEarnings(): AdSense API를 통해 수익 데이터를 불러오는 비공개 메서드
• build(): 대시보드 UI를 구성하는 메서드
• AuthClient를 사용해 API 통신을 하고, EarningCard를 생성해 데이터를 표시합니다.

AuthClient 클래스

• API 요청에 인증을 추가하는 HTTP 클라이언트 클래스입니다.
• 주요 속성:
  • accessToken: API 인증 토큰
  • _inner: 내부적으로 사용되는 HTTP 클라이언트
• 주요 메서드:
  • send(BaseRequest): 요청에 인증 헤더를 추가하여 전송
  • close(): HTTP 클라이언트 연결 종료

EarningCard 클래스

• 수익 정보를 표시하는 재사용 가능한 카드 위젯입니다.
• 주요 속성:
  • title: 카드의 제목
  • amount: 표시할 금액
  • comparison: 비교 대상 기간 설명 (선택적)
  • changeAmount: 금액 변화량 (선택적)
  • percentageChange: 변화율 백분율 (선택적)
• build(): 카드 형태의 UI를 구성하는 메서드

이 애플리케이션의 데이터는 AdSenseApp에서 시작해 LoginScreen을 거쳐 DashboardScreen으로 흐르며, DashboardScreen은 AuthClient로 API 통신을, EarningCard로 데이터 시각화를 처리합니다.

주요 코드 설명

이 AdSense 애플리케이션은 Flutter로 작성된 5개의 핵심 파일로 구성되어 있습니다. 각 파일은 로그인, 인증, UI 컴포넌트, 데이터 처리 등 서로 다른 기능 가진 코드들을 포함하고 있어 전체 코드를 상세히 설명하기에는 범위가 너무 넓습니다. 따라서 이 애플리케이션의 핵심 기능인 AdSense API만 설명합니다.

AdSense API 사용하기

AdSense API는 구글의 광고 수익 데이터를 프로그래밍 방식으로 접근할 수 있게 해주는 인터페이스로, 이 앱에서는 인증된 HTTP 클라이언트 설정, AdSense 계정 정보 조회, 그리고 지정된 기간의 광고 성과 리포트 요청의 3단계로 구성됩니다. 각 단계는 순차적으로 실행되며 이전 단계의 성공이 보장되어야 다음 단계로 진행할 수 있습니다.

1. AuthClient를 이용한 API 세팅

final client = http.Client();
final authClient = AuthClient(widget.accessToken, client);
final adsenseApi = adsense.AdsenseApi(authClient);

2. AdSense 계정 확인

final accounts = await adsenseApi.accounts.list();
if (accounts.accounts?.isEmpty ?? true) {
  throw Exception('AdSense 계정을 찾을 수 없습니다.');
}
final accountName = accounts.accounts!.first.name!;

3. 최근 31일간의 상세 리포트 요청의 예제

final now = DateTime.now();
final startDate = now.subtract(const Duration(days: 31));
final report = await adsenseApi.accounts.reports.generate(
  accountName,
  dateRange: 'CUSTOM',
  startDate_year: startDate.year,
  ...
  metrics: ['AD_REQUESTS', 'PAGE_VIEWS', ...],
  dimensions: ['DATE'],
);

각 단계는 이전 단계의 성공을 전제로 하며, 실패 시 예외처리됩니다. 특히 계정이 없을 경우 명시적으로 'AdSense 계정을 찾을 수 없습니다' 오류를 발생시킵니다.

실행하기

Flutter와 Dart가 설치된 환경에서 다음 순서로 실행할 수 있습니다:

flutter run -d chrome

이후 앱에서 Google 계정으로 로그인하면 AdSense 데이터를 확인할 수 있습니다. 단, 로그인하는 Google 계정에 AdSense 계정이 연결되어 있어야 합니다.

---

이 글에서 설명하는 모든 예제 코드는 GitHub 저장소 확인할 수 있으며, 실제 작동하는 완성된 코드를 해당 저장소를 참고하세요.