디파이너리(애드브릭스) 연동하기 - 하이브리드 앱

시작하기

이 아티클에서는 자바스크립트 인터페이스를 사용해 안드로이드와 iOS 웹뷰에서 네이티브 코드를 호출해 네이티브 디파이너리 SDK의 API를 호출하는 예시를 안내합니다. 따라서 기본적인 연동은 안드로이드, iOS SDK의 연동 방법을 참고해주세요.

안드로이드

다음과 같이 웹뷰를 통해 웹페이지를 로드한다고 가정합니다.

WebView myWebView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = myWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
webView.addJavascriptInterface(new AdbrixJavascriptInterface(this), "AdbrixBridge");

자바스크립트 인터페이스를 위한 클래스를 생성합니다.

public class AdbrixJavascriptInterface {
  Context context;

  AdbrixJavascriptInterface(Context context) {
    this.context = context;
  }

  // 해당 가이드에는 다음 두가지 API를 사용한다고 가정합니다.
  // 안드로이드 SDK 연동 가이드를 참조하여 필요한 API를 추가해주세요.
  @JavascriptInterface
  public void invoke(String json) {
    try {
      AbxLog.i("received json: "+json, false);
      JSONObject jsonObject = new JSONObject(json);
      String methodName = jsonObject.optString("method_name");
      if(CommonUtils.isNullOrEmpty(methodName)){
        AbxLog.e("method name is null or empty", false);
        return;
      }
      switch (methodName){
        case "login":{
          login(json);
          break;
        }
        case "purchase":{
          purchase(json);
          break;
        }
      }
    } catch (JSONException e) {
      e.printStackTrace();
    }
  }

  private void login(String json) {
    try {
      jsonObject = new JSONObject(json);
      String userId = jsonObject.optString("user_id");
      AdBrixRm.login(userId);
    } catch (JSONException e) {
      e.printStackTrace();
    }
  }

  private void purchase(String json) {
    JSONObject jsonObject = new JSONObject(json);
    String orderId = jsonObject.optString("order_id");
    double orderSales = jsonObject.getDouble("order_sales");
    double discount = jsonObject.getDouble("discount");
    double deliveryCharge = jsonObject.getDouble("delivery_charge");
    int paymentMethod = jsonObject.getInt("payment_method");
    String productModelList = jsonObject.optString("items");
    List commerceProductModelList = getProductListByJsonString(productModelList);
    AdBrixRm.CommercePaymentMethod method = AdBrixRm.CommercePaymentMethod.getMethodByMethodCode(paymentMethod);

    AdBrixRm.Common.purchase(orderId, commerceProductModelList, orderSales, discount, deliveryCharge, method);
  }

  //purchase()의 인자 내 items를 파싱하는 예시입니다.
  private List getProductListByJsonString(String json){
    ArrayList result = new ArrayList();
    try {
      JSONArray root = new JSONArray(json);
      for(int i=0; i<root.length(); i++){
        JSONObject productJson = root.getJSONObject(i);
        AdBrixRm.CommerceProductModel productModel = getProductByJsonObject(productJson);
        result.add(productModel);
      }
    } catch (JSONException e) {
      e.printStackTrace();
    }
    return result;
  }

  private AdBrixRm.CommerceProductModel getProductByJsonObject(JSONObject jsonObject){
    AdBrixRm.CommerceProductModel result = new AdBrixRm.CommerceProductModel();
    String productId = jsonObject.optString("product_id");
    String productName = jsonObject.optString("product_name");
    double price = jsonObject.optDouble("price");
    int quantity = jsonObject.optInt("quantity");
    double discount = jsonObject.optDouble("discount");
    double sales = jsonObject.optDouble("sales");
    int currencyCode = jsonObject.optInt("currency");
    String categories = jsonObject.optString("categories");

    result.setProductID(productId);
    result.setProductName(productName);
    result.setPrice(price);
    result.setQuantity(quantity);
    result.setDiscount(discount);
    result.sales = sales;
    result.setCurrency(AdBrixRm.Currency.getCurrencyByCurrencyCode(currencyCode));
    result.setCategory(AdBrixRm.CommerceCategiresModel.fromJSONString(categories));
    return result;
  }
}

iOS

다음과 같이 웹뷰를 통해 웹페이지를 로드한다고 가정합니다.

class ViewController: UIViewController {

  var webView: WKWebView!

  override func viewDidLoad() {
    ...
    ...
    ...
  }

  override func loadView() {
    let webConfiguration = WKWebViewConfiguration()
    let contentController = WKUserContentController()
    contentController.add(self, name: "AdbrixBridge")
    webConfiguration.userContentController = contentController

    webView = WKWebView(frame: .zero, configuration: webConfiguration)
    view = webView
  }
}

WKScriptMessageHandler를 통해 자바스크립트로부터 받는 메시지를 핸들링합니다.

extension ViewController: WKScriptMessageHandler {

  func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
    if message.name == "AdbrixBridge" {
      guard let body = message.body as? [String: Any],
            let eventName = body["method_name"] as? String else {return}
      switch eventName {
      case "login":
        login(body)
      case "purchase":
        purchase(body)
      default:
        return
      }
    }
  }

  private func login(_ json: [String: Any]) {
    guard let userId = json["user_id"] as? String else {return}
    AdBrixRm.sharedInstance.login(userId: userId)
  }

  private func purchase(_ json: [String: Any]) {
    guard let orderId = json["order_id"] as? String,
          let orderSales = json["order_sales"] as? Double,
          let discount = json["discount"] as? Double,
          let deliveryCharge = json["delivery_charge"] as? Double,
          let paymentMethodValue = json["payment_method"] as? Int,
          let items = json["items"] as? NSArray else {return}

    let productInfo = items.compactMap { value -> AdBrixRmCommerceProductModel? in
      let productModel = AdBrixRmCommerceProductModel()
      guard let map = value as? [String: Any] else {return nil}

      guard let productId = map["product_id"] as? String,
            let productName = map["product_name"] as? String,
            let price = map["price"] as? Double,
            let quantity = map["quantity"] as? Int,
            let discount = map["discount"] as? Double,
            let currencyNum = map["currency"] as? Int?,
            let categoryString = map["categories"] as? [String:String]?
      else {return nil}

      let currencyString = currencyNum.map{ AdBrixRm.sharedInstance.getCurrencyString($0) }
      let category = categoryString.map{ AdBrixRmCommerceProductCategoryModel().setModel(categoryArr: $0.compactMap {$1}) }

      return productModel.setModel(productId: productId, productName: productName, price: price, quantity: quantity, discount: discount, currencyString: currencyString, categories: category, productAttrsMap: nil)
    }

    AdBrixRm.sharedInstance.commonPurchase(orderId: orderId, productInfo: productInfo, orderSales: orderSales, discount: discount, deliveryCharge: deliveryCharge, paymentMethod: adbrix.convertPayment(paymentMethodValue))
  }
}

웹

다음과 같이 네이티브 코드를 호출합니다.

<script type="text/javascript">
  function login() {
    var userId = 'jimmy';
    const param = {
      method_name: 'login',
      user_id: userId
    };

    // 플랫폼을 체크합니다.
    if (typeof AdbrixBridge !== 'undefined') {
      // 안드로이드 코드 호출
      AdbrixBridge.invoke(param);
    } else if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.AdbrixBridge) {
      // iOS 코드 호출
      window.webkit.messageHandlers.AdbrixBridge.postMessage(param);
    } else {
      // 지원되지 않는 플랫폼
      console.log('Platform not supported');
    }
  }
  function purchase() {
    var orderId = "order_id";
    var orderSales = 10.0;
    var productId = "product_id";
    var productName = "product_name";
    var price = 10.0;
    var quantity = 1;
    var discount = 1200.00;
    var deliveryCharge = 0;
    // 예시로 작성한 임의의 Enum 입니다. 네이티브에서 사용되는 파라미터의 타입을 확인해주세요.
    var payment = PaymentEnum.BankTransfer;
    var categories = { category1: "category1", category2: "category2", category3: "category3", category4: "category4" };

    const products = [];
    products.push({
      product_id: productId,
      product_name: productName,
      price: price,
      quantity: quantity,
      discount: discount,
      // 예시로 작성한 임의의 Enum 입니다. 네이티브에서 사용되는 파라미터의 타입을 확인해주세요.
      currency: CurrencyEnum.CNY,
      categories: categories
    });
    products.push({
      product_id: productId,
      product_name: productName,
      price: price,
      quantity: quantity,
      discount: discount,
      // 예시로 작성한 임의의 Enum 입니다. 네이티브에서 사용되는 파라미터의 타입을 확인해주세요.
      currency: CurrencyEnum.CNY,
      categories: categories
    });

    const param = {
      method_name: "purchase",
      order_id: "orderID",
      order_sales: orderSales,
      discount: discount,
      delivery_charge: deliveryCharge,
      // 예시로 작성한 임의의 Enum 입니다. 네이티브에서 사용되는 파라미터의 타입을 확인해주세요.
      payment_method: PaymentEnum.BankTransfer,
      quantity: 1,
      items: products,
    };
    if (typeof AdbrixBridge !== 'undefined') {
      // 안드로이드 코드 호출
      AdbrixBridge.invoke(param);
    } else if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.AdbrixBridge) {
      // iOS 코드 호출
      window.webkit.messageHandlers.AdbrixBridge.postMessage(param);
    } else {
      // 지원되지 않는 플랫폼
      console.log('Platform not supported');
    }
  }
</script>

[[인용:경고:보통]]   지금까지의 예시는 웹과 네이티브 코드 간 통신을 통해 하이브리드 앱에서 네이티브 SDK를 사용하는 방법을 이해하기 위해 작성된 예시입니다. 구현하는 방식이 반드시 예시로 작성된 코드와 같을 필요는 없으며 프로젝트에 맞는 방법으로 네이티브 SDK의 API를 호출하면 됩니다.