요구사양
Flutter
•
Flutter SDK 2.0.6 이상
•
Dart 2.12.3 이상 3.0.0 이하
Android
•
Android 4.1 Jellybean (API 레벨 16) 이상
•
Android Studio 3.2 이상
•
Gradle 4.0.1 이상
•
compileSdkVersion 33 이상
•
AndroidX
•
JDK 1.11
iOS
•
deployment target 11 이상
•
Xcode 14 이상
1. SDK 설치
BuzzBooster SDK를 설치하려면 다음의 절차를 따르세요.
Flutter 프로젝트의 터미널에서 다음을 실행하세요.
flutter pub add buzz_booster
Web 프로젝트의 터미널에서 다음을 실행하세요
npm install buzzbooster-js
2. SDK 초기화
BuzzBooster Flutter SDK를 설치한 후, appKey 등 필요한 정보를 추가해 SDK를 초기화하세요.
import 'package:buzz_booster/buzz_booster.dart';
final buzzBooster = BuzzBooster();
void main() async {
runApp(const MyApp());
await buzzBooster.init(
androidAppKey:"ANDROID_APP_KEY",
iosAppKey:"IOS_APP_KEY"
);
}
Dart
복사
3. WebView 설정
다음은 Native App과 Web이 통신하기 위한 사전 작업입니다. Web에 다음과 같이 BuzzBoosterJavaScriptInterface 를 정의하세요.
const BuzzBoosterJavaScriptInterface = {
postMessage: function(message) {
window.BuzzBooster.postMessage(message);
}
};
JavaScript
복사
Flutter와 Web간 통신을 위한 JavaScriptChannel을 구현하여 채널로 설정하세요.
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:buzz_booster/buzz_booster.dart';
class WebViewPage extends StatefulWidget {
const WebViewPage({
Key? key,
}) : super(key: key);
State<WebViewPage> createState() => _WebViewPage();
}
class _WebViewPage extends State<WebViewPage> {
WebViewController? _controller = null;
// JavascriptChannel 구현
final channel = JavascriptChannel(
name: "BuzzBooster",
onMessageReceived: (JavascriptMessage message) async {
BuzzBooster().postJavaScriptMessage(message.message);
}
);
void initState() {
super.initState();
}
Widget build(BuildContext context) {
return Scaffold(
appBar: ...
// 웹뷰 구현
body: WebView(
initialUrl: _url,
javascriptMode: JavascriptMode.unrestricted,
javascriptChannels: {channel}, // add this line
onWebViewCreated: (WebViewController webViewController) {
_controller = webViewController;
},
),
);
}
}
Dart
복사
4. 유저 설정
BuzzBooster SDK에 user를 설정하여 사용자를 구분할 수 있습니다.
사용자가 로그인하는 시점에 다음과 같이 처리하세요.
import { BuzzBooster, UserBuilder } from "buzzbooster-js";
let user = new UserBuilder("USER_ID")
.setOptInMarketing(true) // (권장) 마케팅 수신 동의 여부
.addProperty("login_type","sns(Facebook)") // (권장) 유저의 로그인 타입
.build()
BuzzBooster.setUser(user);
TypeScript
복사
opt_in_marketing 는 마케팅 수신 동의 유도 캠페인을 진행하는 경우 설정하세요.
opt_in_marketing | boolean |
수신 동의 | true |
수신 거부 | false |
login_type 는 유저의 로그인 타입을 식별합니다.
sns(Facebook) 외에도 다양한 값을 자유롭게 입력할 수 있습니다.
앱은 다양한 로그인 루트가 존재할 수 있습니다.
자체 서비스 로그인, 소셜 서비스 로그인, 자동 로그인 등 각 로직에 맞게 위 코드를 호출하세요.
- UserId의 보안성을 향상시키려면 이를 암호화 처리하세요.
- UserId는 ASCII 255자 이하로 제한됩니다.
- 이메일, 전화번호 같이 개인을 식별할 수 있는 정보는 UserId로 사용할 수 없습니다.
5. 버즈부스터 홈 이동
뷰가 클릭 됐을 때 홈으로 이동하려면 아래 코드를 호출하세요.
BuzzBooster.showHome()
TypeScript
복사
마케팅 수신 동의 유도 캠페인을 사용하는 경우 링크를 참고하여, Flutter에서 하단의 버튼을 클릭 했을 때 이동을 직접 처리하세요.
6. 인 앱 메시지
인 앱 메시지는 진행 중인 캠페인을 홍보하여 유저에게 캠페인 참여를 독려할 수 있는 캠페인 엔트리 포인트의 역할을 수행합니다.
아래 코드를 호출하여 인 앱 메시지를 렌더링 할 수 있습니다.
BuzzBooster.showInAppMessage();
TypeScript
복사
7. NaverPay 전환 페이지 이동
아래 코드를 호출하여 버즈부스터 혹은 자사 포인트를 NaverPay 포인트로 전환하는 페이지를 호출할 수 있습니다.
BuzzBooster.showNaverPayExchange();
Swift
복사
8. 이벤트 전송
BuzzBooster SDK를 이용하여 사용자 액션 이벤트를 전송할 수 있습니다.
전송된 액션을 기반으로 BuzzBooster 서버가 리워드 지급 상태를 판단합니다.
let eventValues = new Map<string, number | boolean | string>()
eventValues["KEY"] = eventValues["VALUE"]
BuzzBooster.sendEvent("EVENT_NAME", eventValues)
TypeScript
복사
친구초대 캠페인 회원가입 이벤트 전송
친구초대 캠페인을 사용하는 경우 유저가 회원가입 했을 때 다음과 같이 처리하세요.
let eventValues = new Map<string, number | boolean | string>()
eventValues["user_id"] = eventValues["SIGN_UP_USER_ID"]
BuzzBooster.sendEvent("bb_sign_up", eventValues)
TypeScript
복사
마케팅 수신 동의 유도 캠페인 이벤트 전송
마케팅 수신 동의 유도 캠페인을 사용하는 경우 유저가 회원가입 했을 때 다음과 같이 처리하세요.
let eventValues = new Map<string, number | boolean | string>()
eventValues["user_id"] = eventValues["SIGN_UP_USER_ID"]
BuzzBooster.sendEvent("bb_opt_in_marketing", eventValues)
TypeScript
복사