앱박스 개발가이드에 오신것을 환영합니다.
앱박스의 SDK의 사용은 누구나 영구적으로 무료입니다. 기업 및 개인의 상업적인 목적으로 사용 할 수 있습니다.
앱박스는 웹사이트를 자바스크립트 코드를 사용해서 앱의 기능을 사용할 수 있게 하는 솔루션입니다.
웹 개발자가 앱박스 개발 문서에 따라 웹에 자바스크립트 코드를 입력한 후, 앱박스 SDK와 함께 앱을 빌드하면 앱이 완성됩니다. 이 문서는 웹 개발자를 위한 앱박스 사용법을 설명하는 문서입니다.
앱박스는 웹사이트를 자바스크립트 코드를 사용해서 앱의 기능을 사용할 수 있게 하는 솔루션입니다.
웹 개발자가 앱박스 개발 문서에 따라 웹에 자바스크립트 코드를 입력한 후, 앱박스 SDK와 함께 앱을 빌드하면 앱이 완성됩니다. 이 문서는 웹 개발자를 위한 앱박스 사용법을 설명하는 문서입니다.

추가 지원이 필요한 경우 기술지원팀에게 문의주세요.
  • 앱박스의 모든 기능은 앱을 통해서 바로 시연 해 볼 수 있습니다.

    상단의 무료 데모 체험을 클릭하여 바로 체험하여 보세요.
  • AppBox - SDK v 1.0 출시
    앱박스 SDK를 사용하면 크롬브라우져, 사파리 브라우저와 같은 기본적인 기능을 사용할 수 있으며, 또한 SDK에서 제공되는 Native의 전체 기능을 사용할 수 있습니다.
초기 세팅
고객님의 웹사이트 페이지 Head에 앱박스 공통 코드 삽입합니다.
고객님의 사이트의 <Head>와 </Head>사이에 아래 코드를 삽입하세요.
고객님의 사이트의 <Head>와 </Head>사이에 아래 코드를 삽입하세요.
Javascript 선언
복사 아이콘
<script type="module" src="https://appboxapp.com/app/script/appbox.js"></script>


웹에서 실행되고 있는 기존 기능과 AppBox 기능을 분리하여 실행이 필요하다면, 아래와 같이 코드를 분기하여 실행 할 수 있습니다.
웹에게 기존에 실행되는 기능이 있는데, AppBox를 도입함으로서 코드 분기가 필요하다면 아래 예제처럼 isAppBoxSDK() 함수를 호출하여 분기 할 수 있습니다.
웹에게 기존에 실행되는 기능이 있고, AppBox를 도입함으로서 코드 분기가 필요하다면 아래 예제처럼 isAppBoxSDK() 함수를 호출하여 분기 할 수 있습니다.
Javascript
복사 아이콘

if(isAppBoxSDK()){
      // Appbox 기능 실행

}else {
     // 기존 웹페이지의 기능 실행 
}
탭 메뉴
화면 아래에 버튼을 만들어 화면 간 이동을 쉽게 하고, 스크롤에 따라 자동으로 숨길 수 있습니다.
화면 하단에 네이티브 탭 메뉴를 생성하여, 아이콘과 텍스트를 자유롭게 설정할 수 있습니다. 스크롤 동작에 따라 탭 메뉴를 동적으로 숨기거나 표시할 수 있으며, 항상 고정된 네이티브 탭 메뉴의 고정으로 사용자에게 안정감을 줍니다.
화면 하단에 네이티브 탭 메뉴를 생성하여, 아이콘과 텍스트를 자유롭게 설정할 수 있습니다. 스크롤 동작에 따라 탭 메뉴를 동적으로 숨기거나 표시할 수 있으며, 항상 고정된 네이티브 탭 메뉴의 고정으로 사용자에게 안정감을 줍니다.
Javascript
복사 아이콘

var appData = {
        "visible": true,
        "backColor": "#EEFFEE",
        "fontSize": 13,
        "defTextColor": "#DD0000",
        "selTextColor": "#AA0000",
        "autoHidden": true,
        "menu": [                                        
            {
                "text": "{메뉴명}",
                "defIcon": "{메뉴 아이콘 URL}",
                "selIcon": "{선택 메뉴 아이콘 URL}",
                "actionUrl": "{터치시 이동 URL}"
            },
            {
                "text": "헬스케어",
                "defIcon": "https://www.example.com/default.png",
                "selIcon": "https://www.example.com/selected.png",
                "actionUrl": "https://www.example.com"
            },
            {
                "text": "어바웃",
                "defIcon": "https://www.example.com/default.png",
                "selIcon": "https://www.example.com/selected.png",
                "actionUrl": "https://www.example.com"
            }
        ]
};

callAppBox (1020, appData);
항목 필수 여부 설명 기본값 비고
visible 필수 노출여부 (true, false) : false 이면 이후 항목은 모두 비필수
backColor - 백그라운드 칼라 #ffffff
fontSize - 폰트 사이즈 11px
defTextColor - 메뉴 기본 텍스트 칼라 #000000
selTextColor - 선택 되었을때 텍스트 칼라 #999999
autoHidden - 자동숨김 (true, false) : 스크롤 시 자동숨김 true
haptic - 메뉴 터치시 진동 햅틱 (true, false) true
menu text - 메뉴명
defIcon - 메뉴 기본 아이콘 URL
selIcon - 메뉴 선택 아이콘 URL
actionURL 필수 메뉴 터치시 이동 URL
  • menu 배열 데이터는 메뉴 갯수만큼 등록하며, 최소 한개는 필수 입니다.

햄버거 메뉴
많은 메뉴를 한 화면에 펼칠 수 있는 기능으로, 프로필 사진과 아이콘 등도 함께 표시합니다.
네이티브 기능의 햄버거 메뉴를 상황에 따라 동적으로 생성하여 프로필 사진과 아이콘을 포함할 수 있으며, 메뉴 항목은 필요에 따라 완전히 커스터마이징할 수 있습니다.
네이티브 기능의 햄버거 메뉴를 상황에 따라 동적으로 생성하여 프로필 사진과 아이콘을 포함할 수 있으며, 메뉴 항목은 필요에 따라 완전히 커스터마이징할 수 있습니다.
Javascript
복사 아이콘

var appData = {
        "direction": "right",                // 필수
        "profileText": "안녕하세요.",           // 필수
        "backColor": "#FFFFFF",
        "fontSize": 12,
        "defTextColor": "#DD0000",
        "selTextColor": "#AA0000",
        "profileIcon": "{프로필 아이콘 URL}",
        "profileTexColor": "#AA0000",
        "profileFontSize": 14,
        "profileAction": "{프로필 이동 URL}",
        "menu": [
            {
                "text": "{메뉴명}",
                "defIcon": "{기본 아이콘 URL}",     // 비필수
                "selIcon": "{선택시 아이콘 URL}",    // 비필수
                "actionUrl": "{이동 할 URL}"
            },
            {
                "text": "헬스케어",
                "defIcon": "https://www.example.com/default.png",
                "selIcon": "https://www.example.com/selected.png",
                "actionUrl": "https://www.example.com"
            },
            {
                "text": "어바웃",
                "defIcon": "https://www.example.com/default.png",
                "selIcon": "https://www.example.com/selected.png",
                "actionUrl": "https://www.example.com"
            }
        ]
};

callAppBox (1021, appData);
항목 필수 여부 설명 기본값 비고
direction 필수 노출 위치 선택 (left, right) right
profileText 필수 프로파일 텍스트
profileTexColor - 프로파일 텍스트 칼라 #000000
profileIcon - 프로파일 아이콘 이미지 URL
profileFontSize - 프로파일 텍스트 사이즈 17px
profileAction - 프로파일 터치시 이동 URL
backColor - 백그라운드 칼라 #ffffff
fontSize - 메뉴 폰트 사이즈 14px
defTextColor - 메뉴 기본 텍스트 칼라 #000000
selTextColor - 선택되었을때 텍스트 칼라 #999999
haptic - 메뉴 터치시 진동 햅틱 (true, false) true
menu text 필수 메뉴명
defIcon - 메뉴 기본 아이콘 URL
selIcon - 메뉴 선택 아이콘 URL
actionURL 필수 메뉴 터치시 이동 URL
  • menu 배열 데이터는 메뉴 갯수만큼 등록하며, 최소 한개는 필수 입니다.

브라우저 메뉴
뒤로 가기, 새로고침 같은 브라우저 기능을 화면 아래에 툴바로 제공됩니다.
뒤로 가기, 앞으로 가기, 새로고침 등의 브라우저 기본 기능을 화면 하단의 네이티브 메뉴로 제공합니다. 사용자에게 기본 웹브라우저의 기능으로 편의성을 제공 할 수 있습니다.
뒤로 가기, 앞으로 가기, 새로고침 등의 브라우저 기본 기능을 화면 하단의 네이티브 메뉴로 제공합니다. 사용자에게 기본 웹브라우저의 기능으로 편의성을 제공 할 수 있습니다.
Javascript
복사 아이콘

var appData = {
        "visible": true,
        "backColor": "#FFFFee",
        "autoHidden": true,                                  
        "menu": [
            {
                "function": "back",
                "icon": "{아이콘 URL}"    // 필수값 아님
            },
            {
                "function": "forward",          
                "icon": "https://www.example.com/default.png"
            },
            {
                "function": "home",   
                "icon": "https://www.example.com/default.png"
            },
            {
                "function": "refresh",                
                "icon": "https://www.example.com/default.png"
            },
            {
                "function": "share",                
                "icon": "https://www.example.com/default.png"
            }
        ]
};

callAppBox (1022, appData);
항목 필수 여부 설명 기본값 비고
visible 필수 노출여부 (true, false) : false 이면 이후 항목은 모두 비필수 true
backColor - 백그라운드 칼라 #FFFFFF
autoHidden - 자동 숨김 (true, false) true
haptic - 메뉴 터치시 진동 햅틱 (true, false) true
menu function 필수 기능 (back:백 버튼, forward:앞 버튼, home:홈버튼, refresh:새로고침, share:공유버튼)
icon - 기본으로 노출되는 아이콘이 있으며,커스텀으로 변경하고 싶을때 아이콘 URL 입력
  • menu 배열 데이터는 메뉴 갯수만큼 등록하며, 최소 한개는 필수 입니다.

플로팅 메뉴
화면 오른쪽 아래에 항상 떠 있는 버튼을 추가해, 눌렀을 때 여러 메뉴를 펼칠 수 있습니다.
화면 우측 하단에 고정된 플로팅 버튼을 생성하고, 버튼 터치 시 서브 메뉴가 확장됩니다. 플로팅 버튼과 메뉴 아이콘은 자유롭게 커스터마이징 가능하며, 상황에 따라 동적으로 변경할 수 있습니다.
화면 우측 하단에 고정된 플로팅 버튼을 생성하고, 버튼 터치 시 서브 메뉴가 확장됩니다. 플로팅 버튼과 메뉴 아이콘은 자유롭게 커스터마이징 가능하며, 상황에 따라 동적으로 변경할 수 있습니다.
Javascript
복사 아이콘

var appData = {
        "visible": true,
        "icon": "{플로팅 노출할 메인 아이콘 URL}",
        "menu": [
            {
                "icon": "{플로팅 노출할 서브 아이콘 URL}",
                "actionUrl": "{이동할 페이지 URL}"
            },
            {
                "icon": "https://www.example.com/default.png",
                "actionUrl": "https://www.example.com"
            }
        ]
};

callAppBox (1023, appData);
항목 필수 여부 설명 기본값 비고
visible 필수 노출 여부 (true, false) : false 이면 이후 항목은 모두 비필수 true
haptic - 메뉴 터치시 진동 햅틱 (true, false) true
menu icon 필수 커스텀으로 노출할 아이콘 URL
actionUrl 필수 메뉴 터치시 이동할 URL
  • menu 배열 데이터는 메뉴 갯수만큼 등록하며, 최소 한개는 필수 입니다.

로딩 인디케이터
화면이 로딩 중일 때, 진행 상황을 보여주는 애니메이션을 표시합니다.
웹페이지 로딩 시 웹페이지의 로딩 상태를 시각적으로 표시하는 애니메이션을 지원합니다. 화면이 진행중 일때 다른 터치로 인해 오작동을 막고, 웹페이지가 확실히 실행되고 있다는 신뢰를 줄 수 있습니다.
웹페이지 로딩 시 웹페이지의 로딩 상태를 시각적으로 표시하는 애니메이션을 지원합니다. 화면이 진행중 일때 다른 터치로 인해 오작동을 막고, 웹페이지가 확실히 실행되고 있다는 신뢰를 줄 수 있습니다.
  • 로딩 인디케이 아이콘 이미지는 한번 다운로드 받은 후 앱내 저장되어 계속 사용됩니다.

Javascript
복사 아이콘

var appData = {
     "loadingIcon": "{페이지 로딩 gif 아이콘 URL}",
     "width": 12
};

callAppBox (1060, appData);
항목 필수 여부 설명 기본값 비고
loadingIcon 필수 로딩시 노출될 gif 이미지 URL
width 필수 로딩 인디케이터 아이콘 width 백분률 (화면스크린 가로 사이즈 대비 아이콘이 차지하는 퍼센트(%))
  • 입력 항목값 width는 스크린 가로 사이즈 비례한 대비 백분률입니다.
    예를들어 12로 입력하면 화면의 가로 스크린사이즈의 12%로 아이콘 width가 설정됩니다.
    (세로 사이즈는 width 동일하게 설정됩니다.)

생체 인증
지문이나 얼굴 인식을 통해 보안을 강화하고, 인증에 성공하면 다음 단계로 진행할 수 있도록 보안을 강화 할 수 있습니다.
지문 또는 Face ID를 활용한 생체 인증 기능을 제공하여, 특정 페이지나 기능 접근 시 보안을 강화합니다. 인증 성공 여부는 네이티브에서 처리되어 안전한 환경을 유지하며, 결과는 웹으로 반환됩니다.
지문 또는 Face ID를 활용한 생체 인증 기능을 제공하여, 특정 페이지나 기능 접근 시 보안을 강화합니다. 인증 성공 여부는 네이티브에서 처리되어 안전한 환경을 유지하며, 결과는 웹으로 반환됩니다.
  • 생체인증 사용예
    기존의 자동로그인을 생체인증을 통과한 후 자동로그인 되도록 구성 할 수 있습니다.
Javascript
복사 아이콘

var appData = {
      "returnFunc" : "bodyReadReturn"
};

callAppBox (1070, appData);
항목 필수 여부 설명 기본값 비고
haptic - 성공 또는 실패시 진동 햅틱 (true, false)
returnFunc 필수 결과값으로 받고 싶은 javascript 함수명을 입력한다. 예를들어 bodyReadReturn 와 같이 함수명만 입력하면 아래 결과값 형식으로 받을 수 있습니다.
결과값
bodyReadReturn 필수 success : 성공, cancel : 사용자 취소, reject : 생체인증 미등록
  • 입력 returnFunc 항목에는 리턴 결과값을 받고 싶은 javascript 함수명 기재합니다.
    예를들어 bodyReadReturn 로 기재하면, Native 기능을 실행하고 웹페이지의 function bodyReadReturn(r){ //r : 성공여부 }; 함수로 리턴하므로 웹페이지에 해당 함수가 선언 되어야 합니다.



  • 생체인증을 사용하려면, 생체인증을 지원하는 디바이스 이여야 하며, 생체인증이 사용중에 있어야 합니다. 생체인증이 등록되지 않은 경우 위의 결과값 처럼 "reject" 으로 리턴됩니다.

모달 페이지 열기
새로운 모달 웹페이지를 오픈합니다.
현재의 웹페이지에서 페이지위에 새로운 모달 웹페이지를 오픈합니다.
현재의 웹페이지에서 페이지위에 새로운 모달 웹페이지를 오픈합니다.
Javascript
복사 아이콘

var appData = {
        "openURL" : "{오픈 하고자 하는 URL}"
};

callAppBox (1210, appData);
항목 필수여부 설명 기본값 비고
openURL 필수 새로운 모달 페이지로 오픈할 웹페이지
title - 타이틀 (Android에서만 노출)
날짜 선택 달력
화면에 달력을 띄워 날짜를 선택하거나 시작일과 종료일의 기간을 선택할 수 있습니다.
시작일과 종료일을 설정할 수 있는 달력을 제공합니다. 특정 기간 선택이나 예약, 일정 관리가 가능하며, 직관적이고 편리한 사용자 경험을 제공합니다.
시작일과 종료일을 설정할 수 있는 달력을 제공합니다. 특정 기간 선택이나 예약, 일정 관리가 가능하며, 직관적이고 편리한 사용자 경험을 제공합니다.
Javascript
복사 아이콘

var appData = {
      "type" : "DAY",
      "selColor" : "#0000ff",
      "returnFunc" : "calendarReturn"
};

callAppBox (1180, appData);
항목 필수 여부 설명 기본값 비고
type 필수 날짜 타입 (DAY : 특정 날짜 선택, TERM : 시작일부터 종료일까지의 기간 선택)
selColor - 달력 칼라
returnFunc 필수 결과값으로 받고 싶은 javascript 함수명을 입력한다. 예를들어 calendarReturn 와 같이 함수명만 입력하면 아래 결과값 형식으로 받을 수 있습니다.
결과값
calendarReturn 필수 DAY로 호출시 : yyyy-MM-dd 리턴, TERM 으로 호출시 yyyy-MM-dd/yyyy-MM-dd리턴.
  • 입력 returnFunc 항목에는 리턴 결과값을 받고 싶은 javascript 함수명 기재합니다.
    예를들어 calendarReturn 로 기재하면, Native 기능을 실행하고 웹페이지의 function calendarReturn(r){ //r : 선택된 날짜 }; 함수로 리턴하므로 웹페이지에 해당 함수가 선언 되어야 합니다.

진동 울리기
특정 상황에서 짧거나 긴 진동을 통해 알림을 주어서 사용자에게 전달력을 높일 수 있습니다.
햅틱 진동 기능을 통해 특정 이벤트 시 사용자에게 즉각적인 피드백을 제공합니다. 진동의 횟수와 길이를 세부적으로 설정할 수 있어 몰입감 있는 인터랙션을 제공합니다.
햅틱 진동 기능을 통해 특정 이벤트 시 사용자에게 즉각적인 피드백을 제공합니다. 진동의 횟수와 길이를 세부적으로 설정할 수 있어 몰입감 있는 인터랙션을 제공합니다.
Javascript
복사 아이콘

var appData = {
       "vibrationCount" : 3,
       "type" : "haptic",
       "returnFunc": "vibrationReturn"       // 비필수
};

callAppBox (1050, appData);
항목 필수 여부 설명 기본값 비고
vibrationCount 필수 진동 횟수
type 필수 진동 타입 (haptic: 햅틱, short: 짧게, long: 길게)
returnFunc 비필수 진동을 정상적으로 울릴때 리턴
QR 리더기 오픈
카메라로 QR 코드를 스캔해 내용을 확인하고 스캔 된 문자를 웹에서 받아볼 수 있습니다.
카메라를 실행해 QR 코드를 스캔하고, 스캔 결과를 문자열로 반환합니다. QR 기반 인증, 결제 등 다양한 서비스에 활용할 수 있는 유용한 기능입니다.
카메라를 실행해 QR 코드를 스캔하고, 스캔 결과를 문자열로 반환합니다. QR 기반 인증, 결제 등 다양한 서비스에 활용할 수 있는 유용한 기능입니다.
Javascript
복사 아이콘

var appData = {
      "returnFunc" : "qrReadReturn"
};

callAppBox (1100, appData);
항목 필수여부 설명 기본값 비고
haptic - 성공 실패시 진동 햅틱 (true:진동, false:진동없음) true
returnFunc 필수 결과값으로 받고 싶은 javascript 함수명을 입력, 예를들어 qrReadReturn 와 같이 함수 명만 입력
결과 값
qrReadReturn 필수 성공시 QR에서 읽은 String을 리턴, fail : 실패, cancel : 사용자 취소, reject : 거부(카메라 권한 없음)
  • 입력 returnFunc 항목에는 리턴 결과값을 받고 싶은 javascript 함수명 기재합니다.
    예를들어 qrReadReturn 로 기재하면, Native 기능을 실행하고 웹페이지의 function qrReadReturn(r){ //r : QR에서 읽은 string }; 함수로 리턴하므로 웹페이지에 해당 함수가 선언 되어야 합니다.



  • QR 리더기를 실행하기 위해서는 사용자가 최초 한번은 카메라 권한을 승인하여야 합니다. 승인하지 않았다면 위에 결과값 처럼 "reject" 으로 리턴됩니다.

바코드 리더기 오픈
카메라로 바코드를 찍어서 정보를 읽어오고 필요한 곳에 사용할 수 있습니다.
카메라를 통해 바코드를 스캔하고, 결과를 문자열 형태로 반환합니다. 이 기능은 상품 관리, 인증 등 다양한 바코드 형식을 지원하여 여러 상황에 활용 가능합니다.
카메라를 통해 바코드를 스캔하고, 결과를 문자열 형태로 반환합니다. 이 기능은 상품 관리, 인증 등 다양한 바코드 형식을 지원하여 여러 상황에 활용 가능합니다.
Javascript
복사 아이콘

var appData = {
      "returnFunc" : "barcodeReadReturn"
};

callAppBox (1110, appData);
항목 필수여부 설명 기본값 비고
haptic - 성공시 진동 햅틱 (true, false) true
returnFunc 필수 결과값으로 받고 싶은 javascript 함수명을 입력한다. 예를들어 barcodeReadReturn 와 같이 함수명만 입력하면 아래 결과값 형식으로 받을 수 있습니다.
결과 값
barcodeReadReturn 필수 성공시 QR에서 읽은 String을 리턴, fail : 실패, cancel : 사용자 취소, reject : 거부(카메라 권한 없음)
  • 입력 returnFunc 항목에는 리턴 결과값을 받고 싶은 javascript 함수명 기재합니다.
    예를들어 barcodeReadReturn 로 기재하면, Native 기능을 실행하고 웹페이지의 function barcodeReadReturn(r){ //r : 바코드에서 읽은 string }; 함수로 리턴하므로 웹페이지에 해당 함수가 선언 되어야 합니다.



  • 바코드 리더기를 실행하기 위해서는 사용자가 최초 한번은 카메라 권한을 승인하여야 합니다. 승인하지 않았다면 위에 결과값과 같이 "reject" 으로 리턴됩니다.

인트로 소개 페이지
앱을 처음 실행할 때 앱의 주요 기능과 특징을 여러 화면으로 소개합니다.
앱 실행 시 앱의 주요한 기능을 소개하는 기능으로 스와이프 가능한 다중 페이지 형식으로 앱의 주요 기능과 가치를 사용자에게 소개합니다.
앱 실행 시 앱의 주요한 기능을 소개하는 기능으로 스와이프 가능한 다중 페이지 형식으로 앱의 주요 기능과 가치를 사용자에게 소개합니다.
  • 인트로 소개페이지는 앱 빌드시 네이티브 코드로도 인트로 소개 이미지를 설정 할 수 있습니다.

Javascript
복사 아이콘

var appData = {
       "item" :[
            {
               "imageUrl" : "{소개 이미지 URL}"
            },
            {
              "imageUrl" : "https://www.example.com/intro1.png"
            },
            {
              "imageUrl" : "https://www.example.com/intro2.png"
            }
      ]
};

callAppBox (1165, appData);
항목 필수 여부 설명 기본값 비고
item imageUrl 필수 노출될 이미지 URL
로컬 푸시 발송
앱을 통해 알림 메시지를 바로 보내 사용자에게 중요한 정보를 전달합니다.
사용자의 기기로 실시간 알림 메시지를 전송하여 중요한 공지나 정보를 즉시 전달할 수 있습니다. 사용자와 효과으로 소통하는데 사용하기 좋습니다.
사용자의 기기로 실시간 알림 메시지를 전송하여 중요한 공지나 정보를 즉시 전달할 수 있습니다. 사용자와 효과으로 소통하는데 사용하기 좋습니다.
Javascript
복사 아이콘

var appData = {
       "title" : "{로컬 푸시 제목}",
       "message" : "{로컬 푸시 메시지로 띄워질 메시지 내용}",
       "targetUrl" : "{로컬 푸시 터치시 이동할 URL}",
       "returnFunc" : "localPushReturn"
};

callAppBox (1001, appData);
항목 필수 여부 설명 기본값 비고
title - 제목
message 필수 메시지 내용
targetUrl - 이동 URL
overlap - true: groupID가 동일하면 최종건 하나만 노출, false: 항상 쌓임 false
groupID - overlap의 항목과 함께 사용되는 그룹아이디 (0부터 9까지 숫자만 입력) 0
returnFunc 필수 결과값으로 받고 싶은 javascript 함수명을 입력, 예를들어 localPushReturn 같이 함수명만 입력
결과값
localPushReturn 필수 sucess: 성공, fail : 실패, reject : 푸시권한 사용자 거부
  • 입력 returnFunc 항목에는 리턴 결과값을 받고 싶은 javascript 함수명 기재합니다.
    예를들어 localPushReturn 로 기재하면, Native 기능을 실행하고 웹페이지의 function localPushReturn(r){ //r : 성공여부 }; 함수로 리턴하므로 웹페이지에 해당 함수가 선언 되어야 합니다.



  • 푸시 메시지를 수신하기 위해서는 사용자가 최초 한번은 푸시 시스템 권한을 허용하여야 합니다. 허용하지 않은 경우 위의 결과값 처럼 "reject" 으로 리턴합니다.

이미지 팝업
여러 이벤트 이미지를 팝업으로 띄우고, 스와이프하여 참여할 수 있습니다.
여러 이미지를 팝업 형태로 표시하며, 스와이프 기능을 통해 이미지를 탐색할 수 있습니다. 메인페이지에서 이벤트등의 콘텐츠 소개에 적합합니다.
여러 이미지를 팝업 형태로 표시하며, 스와이프 기능을 통해 이미지를 탐색할 수 있습니다. 메인페이지에서 이벤트등의 콘텐츠 소개에 적합합니다.
Javascript
복사 아이콘

var appData = {
     "item" : [
           {
              "image" : "{이미지 URL}",
              "url" : "{터치시 이동 URL}",
              "browser" : true
           },
           {
              "image" : "https://www.example.com/pupup.png",
              "url" : "https://www.example.com",
              "browser" : true
            }
        ],
      "centerPopup" : true
};

callAppBox (1160, appData);
항목 필수 여부 설명 기본값 비고
centerPopup 필수 팝업이 노출될 위치 (true : 화면가운데에서 노출, false : 화면 하단에서 노출)
haptic - 노출 시 진동 햅틱 true
animation - 노출 애니메이션 true
item image 필수 이미지 URL
url - 이미지 터치시 이동 URL
browser - 터치 시 오픈방식 (true : 외부 브라우저로 오픈, false : 내부 웹뷰에서 오픈)
  • item 배열 데이터는 메뉴 갯수만큼 등록하며, 최소 한개는 필수 입니다.

이미지 뷰어
이미지를 확대하거나 축소해서 자세히 보고, 여러 이미지를 넘기며 확인할 수 있습니다.
이미지를 확대 및 축소할 수 있는 뷰어 기능을 제공합니다. 전체화면의 이미지로 이미지를 스와이프 방식으로 탐색하며, 세부적으로 확인할 수 있어 사용성 향상에 기여합니다.
이미지를 확대 및 축소할 수 있는 뷰어 기능을 제공합니다. 전체화면의 이미지로 이미지를 스와이프 방식으로 탐색하며, 세부적으로 확인할 수 있어 사용성 향상에 기여합니다.
Javascript
복사 아이콘

var appData = {
    "item" : [
         {
             "imageUrl" : "{이미지 URL}"
         },
         {
             "imageUrl" : "https://www.example.com/image.png"
         }
     ]
};

callAppBox (1161, appData);
항목 필수 여부 설명 기본값 비고
item imageUrl 필수 노출할 이미지 URL
  • item 배열 데이터는 메뉴 갯수만큼 등록하며, 최소 한개는 필수 입니다.

토스트 메시지
화면 하단에 짧은 메시지를 띄워 사용자에게 간단히 알림을 전달합니다.
짧은 메시지를 화면에 표시하여 사용자에게 간단한 알림을 제공합니다. 메시지 유지 시간을 설정할 수 있어 상황에 따라 적절히 활용 가능합니다.
짧은 메시지를 화면에 표시하여 사용자에게 간단한 알림을 제공합니다. 메시지 유지 시간을 설정할 수 있어 상황에 따라 적절히 활용 가능합니다.
Javascript
복사 아이콘

var appData = {
       "delaySecond" : 3.5,
       "message" : "{토스트 메시지 내용}"
};

callAppBox (1040, appData);
항목 필수 여부 설명 기본값 비고
delaySecond 필수 유지 시간 (초)
message 필수 메시지
textColor - 텍스트 칼라 #FFFFFF
backColor - 백그라운드 칼라 #000000
haptic - 토스트 노출 진동 햅틱 false
바코드 보기 팝업
입력된 내용을 바코드로 바꿔 팝업 화면에 띄워줍니다.
문자열을 바코드로 변환하여 팝업 형태로 바코드를 표시합니다. 카메라를 통해서 바코드를 읽을 수 있도록 바코드가 팝업 됩니다.
문자열을 바코드로 변환하여 팝업 형태로 바코드를 표시합니다. 카메라를 통해서 바코드를 읽을 수 있도록 바코드가 팝업 됩니다.
Javascript
복사 아이콘

var appData = {
      "barcode" : "{바코드로 노출 할 숫자}"
};

callAppBox (1130, appData);
항목 필수 여부 설명 기본값 비고
barcode 필수 바코드로 생성 할 string
haptic - 바코드 팝업 노출시 진동 햅틱 (true, false) true
animation - 바코드 팝업 노출시 애니메이션 (true, false) true
QR 보기 팝업
앱력된 내용을 QR 코드로 변환해 팝업 화면에 보여줍니다.
문자열을 QR 코드로 변환하여 팝업 형태로 QR을 표시합니다. QR리더 카메라를 통해서 QR을 읽을 수 있도록 QR이 팝업 됩니다.
문자열을 QR 코드로 변환하여 팝업 형태로 QR을 표시합니다. QR리더 카메라를 통해서 QR을 읽을 수 있도록 QR이 팝업 됩니다.
Javascript
복사 아이콘

var appData = {
       "qr" : "{QR로 노출될 String}"
};

callAppBox (1120, appData);
항목 필수 여부 설명 기본값 비고
qr 필수 QR로 생성 할 string
haptic - QR 팝업 노출시 진동 햅틱 (true, false) true
animation - QR 팝업 노출시 애니메이션 (true, false) true
걸음수 가져오기
오늘, 이번 주, 이번 달의 걸음 수의 데이터를 가져올 수 있습니다.
사용자의 오늘, 주, 월별 걸음 수 데이터를 가져와 건강 관리와 목표 설정에 활용할 수 있습니다. 날짜별 걸음수 데이터로 지원합니다.
사용자의 오늘, 주, 월별 걸음 수 데이터를 가져와 건강 관리와 목표 설정에 활용할 수 있습니다. 날짜별 걸음수 데이터로 지원합니다.
Javascript
복사 아이콘

var appData = {
      "type" : "TODAY",
      "returnFunc" : "stepReturn"    // 웹에서 회신 받을 함수명을 기재
};

callAppBox (2000, appData);
항목 필수 여부 설명 기본값 비고
type 필수 걸음수 범위 (TODAY: 오늘 총걸음, WEEK: 주간 일별 걸음수, MONTH: 월간 일별 걸음수)
returnFunc 필수 결과값으로 받고 싶은 javascript 함수명을 입력 (예를들어 stepReturn 같이 함수명만 입력)
결과값
stepReturn 필수 성공 : {“yyyy-MM-dd”: 1290, “yyyy-MM-dd”: 2280, “yyyy-MM-dd”: 890, ….. }, 실패 : fail, 거부 : reject
  • 입력 returnFunc 항목에는 리턴 결과값을 받고 싶은 javascript 함수명 기재합니다.
    예를들어 stepReturn 기재하면, function stepReturn(r){ //r : 걸음수 배열 }; 함수를 호출하므로 웹페이지에 선언해주어야 합니다.
    (리턴되는 걸음수는 배열데이터로 일별로 리턴됩니다)



  • 건강데이터 엑섹스 하려면 사용자가 최초 한번은 시스템 권한이 승인되어야 합니다. 허용하지 않은 경우 위의 결과값 처럼 "reject" 으로 리턴합니다.

위치 받아오기
사용자의 현재 위치(위도와 경도)를 확인해 위치 기반 서비스를 제공합니다.
위치 권한 요청 후 네이티브에서 위도와 경도 좌표를 웹에 반환하여, 위치 기반 서비스에 필요한 정보를 제공합니다.
위치 권한 요청 후 네이티브에서 위도와 경도 좌표를 웹에 반환하여, 위치 기반 서비스에 필요한 정보를 제공합니다.
Javascript
복사 아이콘

var appData = {
      "returnFunc" : "locationReturn"   // 위치 위.경도를 콜백 받을 함수명
};

callAppBox (1190, appData);
항목 필수 여부 설명 기본값 비고
returnFunc 필수 결과값으로 받고 싶은 javascript 함수명을 입력 (예를들어 locationReturn 같이 함수명만 입력)
결과값
locationReturn 필수 성공 : 위경도 값(37.564821/126.902827), fail : 실패, reject : 거부
  • 입력 returnFunc 항목에는 리턴 결과값을 받고 싶은 javascript 함수명 기재합니다.
    예를들어 locationReturn로 기재하면, function locationReturn(r){ //r : 위경도값 }; 함수를 호출하므로 웹페이지에 선언해주어야 합니다.



  • 위치를 받아오려면 사용자가 최초 한번은 위치 권한을 승인 하여야 합니다. 허용하지 않은 경우 위의 결과값 처럼 "reject" 으로 리턴합니다.

외부 페이지 열기
크롬이나 사파리 같은 브라우저로 다른 웹페이지를 열어볼 수 있습니다.
크롬, 사파리 등의 외부 브라우저를 통해 웹페이지를 열어서 다른 웹페이 등을 탐색할 수 있도록 제공합니다.
크롬, 사파리 등의 외부 브라우저를 통해 웹페이지를 열어서 다른 웹페이 등을 탐색할 수 있도록 제공합니다.
Javascript
복사 아이콘

var appData = {
       "url" : "https://www.example.com/link.jsp"     // 외부로 오픈 할 URL
};

callAppBox (1080, appData);
항목 필수 여부 설명 기본값 비고
url 필수 외부로 오픈 할 URL
  • 외부 페이지 열기를 실행하면 앱은 백그라운드로 들어가며 외부브라우저가 앱 위에 포그라운드로 올라옵니다.

푸시 토큰 등록
푸시 알림을 받기 위해 사용자의 기기 정보를 저장합니다.
푸시 메시지 발송을 위해 사용자의 디바이스 고유 토큰을 수집 및 서버에 저장하여 안정적인 알림 서비스를 지원합니다.
푸시 메시지 발송을 위해 사용자의 디바이스 고유 토큰을 수집 및 서버에 저장하여 안정적인 알림 서비스를 지원합니다.
  • 고객의 시스템에서 푸시를 발송하기 위해서는 푸시토큰이 고객에 서버에 저장되어야 합니다.

    이를 위해 네이티브에서 필히 푸시 토큰을 수집하는 절차가 필요합니다.

Javascript
복사 아이콘

var appData = {
      "returnFunc" : "pushTokenReturn"    // 푸시토큰 등록 후 콜백 받을 함수명
};

callAppBox (1000, appData);
항목 필수 여부 설명 기본값 비고
returnFunc 필수 결과값으로 받고 싶은 javascript 함수명을 입력 (예를들어 pushTokenReturn 같이 함수 명만 입력)
결과값
pushTokenReturn 필수 푸시토큰 (예: kUs9oM2xi2kd0Edq2P2S....), reject : 푸시 권한 미승인 상태
  • 푸시 토큰의 값이 자주 바뀌지는 않지만, 경우에 따라 앱 실행 시 마다 바뀔 수 있으므로, 사용자의 안정적적인 푸시수신을 위해서 푸시토큰을 갱신하세요.

  • 푸시를 수신하려면 사용자가 푸시 권한을 승인 하여야 합니다. 허용하지 않은 경우 위의 표기와 같이 "reject"으로 리턴합니다.

앱 평가
앱 평가 할 수 있는 별점과 리뷰를 남길 수 있습니다.
앱의 별점 및 리뷰를 작성할 수 있는 팝업을 제공하여, 사용자 피드백을 수집하고 앱 개선에 활용할 수 있습니다.
앱의 별점 및 리뷰를 작성할 수 있는 팝업을 제공하여, 사용자 피드백을 수집하고 앱 개선에 활용할 수 있습니다.
Javascript
복사 아이콘

var appData = {
        // 파라미터 없음
};

callAppBox (1200, appData);
항목 필수 여부 설명 기본값 비고
요청 항목 없음
  • 앱의 평가 팝업은 매번 요청시 마다 띄워지지 않습니다.
    App의 Review API는 사용자의 활동기록에 의한 호출 횟수 제한이 있으며 평가 기록 여부, 최소 조건 충족 여부, Apple 및 Google의 내부 정책에 의해 띄워집니다.
    호출시 매번 띄워지지 않으며, 사용자가 불편을 느끼지 않는 경우에만 표시됩니다.

공유 하기
앱의 공유하고 싶은 내용을 친구에게 쉽게 공유할 수 있습니다.
현재 보고 있는 페이지의 링크를 공유하거나, 콘텐츠 손쉽게 외부로 공유할 수 있습니다.
현재 보고 있는 페이지의 링크를 공유하거나, 콘텐츠 손쉽게 외부로 공유할 수 있습니다.
Javascript
복사 아이콘

var appData = {
        "message": "{공유할 메시지 내용 또는 URL}."
};

callAppBox (1030, appData);
항목 필수 여부 설명 기본값 비고
message 필수 공유하려는 텍스트 또는 URL
다른앱 오픈
현재 앱에서 다른 앱을 열 수 있는 기능을 제공합니다.
네이티브 호출을 통해 지정된 외부 앱을 실행하며, 앱 간 데이터 연동을 가능하도록 지원합니다.
네이티브 호출을 통해 지정된 외부 앱을 실행하며, 앱 간 데이터 연동을 가능하도록 지원합니다.
  • iOS의 다른앱 오픈은 앱을 빌드전 Plist에 사전 세팅사항이 있습니다. (Android는 해당사항 없음)

Javascript
복사 아이콘

var appData = {
       "android_scheme" : "{오픈 하고자하는 앱의 Android 스키마명}",
       "ios_scheme" : "{오픈 하고자하는 앱의 iOS 스키마명}",
       "googleplay_url" : "{구글플레이 앱 다운로드 URL}",
       "appstore_url" : "{애플 앱스토어 앱 다운로드 URL}"
};

callAppBox (1090, appData);
항목 필수 여부 설명 기본값 비고
android_scheme 필수 오픈 할 Android 앱의 스키마명
ios_scheme 필수 오픈 할 iOS 앱의 스키마명
googleplay_url 필수 해당 앱의 구글플레이 URL
appstore_url 필수 해당 앱의 앱스토어 URL
  • iOS는 프로젝트 내의 설정이 필요합니다. Info.plist > Information PropertyList밑에

    LSApplicationQueriesSchemes의 하위항목으로 호출할 앱 이름(uri scheme)을 입력하여야 합니다.

API 호출
앱에서 서버에 요청을 보내 필요한 정보를 받아서 전달합니다.
네이티브 API를 실행하고 서버의 결과를 네이티브에서 받아서 웹으로 리턴합니다. 웹간 호출에서 cors 이슈 없이 실행됩니다.
네이티브 API를 실행하고 서버의 결과를 네이티브에서 받아서 웹으로 리턴합니다. 웹간 호출에서 cors 이슈 없이 실행됩니다.
Javascript
복사 아이콘

var appData = {
      "target" : "https://www.example.com/api",          // API 호출 할 주소
      "json" : {json},
      "returnFunc" : "apiCallReturn"              // API를 호출해서 결과를 콜백 받을 함수명
};

callAppBox (2100, appData);
항목 필수 여부 설명 기본값 비고
target 필수 API 실행 URL
json 필수 {json} 데이터
returnFunc 필수 결과값으로 받고 싶은 javascript 함수명을 입력, 예를들어 apiCallReturn 같이 함수명만 입력
결과값
apiCallReturn 필수 {json} 데이터
  • Web에서도 API를 호출될 수 있지만 Cors관련 이슈로 인하여 Native에서 호출이 필요할때 사용합니다.

문자 보내기
문자 메시지를 보냅니다.
SMS 앱을 실행해 지정된 번호와 메시지로 문자를 보낼 수 있습니다.
SMS 앱을 실행해 지정된 번호와 메시지로 문자를 보낼 수 있습니다.
Javascript
복사 아이콘

var appData = {
       "target" : "01011112222",
       "message" : "문자 메시지 입니다."
};

callAppBox (1150, appData);
항목 필수 여부 설명 기본값 비고
target 필수 받는사람 전화번호
message 필수 문자 메시지 내용
전화 걸기
전화를 겁니다.
전화 앱을 실행하여 지정된 번호로 통화 연결을 제공합니다.
전화 앱을 실행하여 지정된 번호로 통화 연결을 제공합니다.
Javascript
복사 아이콘

var appData = {
       "tel" : "01012345678"
};

callAppBox (1140, appData);
항목 필수 여부 설명 기본값 비고
tel 필수 전화 번호
결제 기능
기본적인 PG결제 기능 제공합니다.
앱박스 브라우저를 이용하면 기본적으로 이니시스, 토스 페이먼츠의 PG의 기능이 실행되도록 지원됩니다.
앱박스 브라우저를 이용하면 기본적으로 이니시스, 토스 페이먼츠의 PG의 기능이 실행되도록 지원됩니다.
Javascript
복사 아이콘
      
      // 결제 기능은 코드 연동 없이 사용가능합니다.
      
  • 결제 기능은 별도의 코드 연동 없이 기본적으로 사용가능합니다.

영상 플레이 전체화면 보기
기본적인 영상 플레이 전체화면 보기가 가능합니다.
앱박스 브라우저를 이용하면 영상 플레이 전체화면 보기가 기본적으로 제공됩니다.
앱박스 브라우저를 이용하면 영상 플레이 전체화면 보기가 기본적으로 제공됩니다.
Javascript
복사 아이콘
      
      // 영상 플레이 전체화면 보기 기능은 코드 연동 없이 동작합니다.
      
  • 영상 플레이 전체화면 보기 기능은 별도의 코드 연동 없이 기본적으로 기능 동작합니다.

앱 업데이트
새로운 버전의 앱이 있으면 사용자에게 업데이트를 안내합니다.
최신 버전의 앱이 있을 경우 업데이트 유도 팝업을 표시하여, 사용자가 간편하게 최신 버전으로 업데이트할 수 있도록 안내합니다.
최신 버전의 앱이 있을 경우 업데이트 유도 팝업을 표시하여, 사용자가 간편하게 최신 버전으로 업데이트할 수 있도록 안내합니다.
Javascript
복사 아이콘

var appData = {
       "require": true,
       "message": "마켓에 새로운 버전이 있습니다.",
       "appStore": "{애플 앱스토어 앱 다운로드 URL}",
       "googlePlay": "{구글플레이 앱 다운로드 URL}",
       "updateButton": "업데이트 하기",             // 버튼명
       "cancelButton": "다음에",                  // 버튼명
       "returnFunc" : "appUpdateReturn"
};

callAppBox (1010, appData);
항목 필수여부 설명 기본값 비고
require 필수 true :강제, false : 권장 (새로운 버전을 업데이트 하지 않으면 앱 진입을 들어가지 못하도록 강제하거나, 업데이트를 권장만 하고 앱 진입은 가능하도록 할 수 있다.)
message 필수 업데이트 메시지, 예) "마켓에 새로운 버전이 있습니다. 업데이트하여 주세요."
appStore 필수 애플 앱스토어 앱 다운로드 URL
googlePlay 필수 구글 플레이 앱 다운로드 URL
updateButton 필수 업데이트 버튼의 텍스트
cancelButton - 취소 버튼의 텍스트 (require 항목의 값이 false 일때 필수)
returnFunc 필수 결과값으로 받고 싶은 javascript 함수명을 입력한다. 예를들어 appUpdateReturn 와 같이 함수명만 입력하면 아래 결과값 형식으로 받을 수 있습니다.
결과 값
appUpdateReturn 필수 do : 업데이트 필요, empty : 업데이트 필요없음(최신 버전 사용중)
  • 입력 returnFunc 항목에는 리턴 결과값을 받고 싶은 javascript 함수명 기재합니다.
    예를들어 appUpdateReturn 로 기재하면, Native 기능을 실행하고 웹페이지의 function appUpdateReturn(r){ //r : do 또는 empty }; 함수로 리턴하므로 웹페이지에 해당 함수가 선언 되어야 합니다.



  • 앱 업데이트 기능은 앱이 마켓에 올라가 있는 상태에서만 정상동작합니다. 앱이 마켓에 아직 올라가지 않은 개발단계에서는 정상동작 하지 않습니다.

앱 종료
앱을 종료 합니다.
앱을 종료하고 모든 프로세스를 안전하게 정리하여 완벽한 종료 상태를 유지합니다.
앱을 종료하고 모든 프로세스를 안전하게 정리하여 완벽한 종료 상태를 유지합니다.
Javascript
복사 아이콘

var appData = {
           // 파라미터 없음
};

callAppBox(1170, appData);
  • 호출 하면 바로 앱이 종료됩니다. "종료 하시겠습니까?" 등의 Confirm 박스를 띄우고 종료는게 좋습니다.

Android 설정하기
Android 설치 방법을 설명합니다.
AppBox SDK는 JitPack 저장소를 통해 제공됩니다. 아래 단계를 따라 프로젝트를 설정하세요.
AppBox SDK는 JitPack 저장소를 통해 제공됩니다. 아래 단계를 따라 프로젝트를 설정하세요.
  • Android Studio의 자세한 설정은  AppBox Sample Github 에서도 확인 할 수 있습니다.

  • 1. Gradle 설정
    프로젝트 수준의 build.gradle 파일 수정
    프로젝트의 build.gradle 파일에 JitPack 저장소를 추가합니다.
build.gradle
복사 아이콘
      
repositories {
    google()
    mavenCentral()
    maven {
        url = uri("https://jitpack.io")
        
        // SDK 접근 설정
        credentials {
            username = "jp_gv49u3alugbbocfovlkfnvdt8a"
        }
    }
}
  • 2. SDK 의존성 추가
    앱 수준의 build.gradle 파일에 SDK 의존성 추가
    아래 의존성을 추가합니다:
build.gradle
복사 아이콘

dependencies {
    // implementation 선언
    implementation("org.bitbucket.insystems_moon:appboxpackage:1.0.21")
    implementation("androidx.biometric:biometric-ktx:1.2.0-alpha05")
    implementation("com.journeyapps:zxing-android-embedded:4.3.0")
    implementation("com.google.zxing:core:3.4.1")
    implementation("com.google.android.play:app-update-ktx:2.1.0")
    implementation("com.github.bumptech.glide:glide:4.16.0")
    implementation("com.github.chrisbanes:PhotoView:2.3.0")
    implementation("androidx.health.connect:connect-client:1.1.0-alpha07")
    implementation("androidx.activity:activity-compose:1.8.2")
    implementation("com.github.prolificinteractive:material-calendarview:2.0.1")
    implementation("androidx.swiperefreshlayout:swiperefreshlayout:1.1.0")
}
  • 3. gradle.properties에 Jetifier 활성화
    Jetifier를 활성화하려면 gradle.properties 파일에 다음 설정을 추가합니다.
gradle.properties
복사 아이콘

# enableJetifier 설정
android.enableJetifier=true
  • 4. SDK usage
    아래의 순서대로 선언, 기능설정(선택적), SDK실행 순으로 실행되도록 작성 되어야 합니다.
Activity
복사 아이콘

// --------------------------------------
// 1. 선언
// --------------------------------------

// AppBox 초기화
AppBox.getInstance().initSDK(
    context = this,
    baseUrl = "https://www.example.com",
    debugMode = true,
    webConfig = appBoxWebConfig
)


// --------------------------------------
// 2.  기능 설정 (선택적)
// --------------------------------------

// AppBox 푸시 토큰 설정
AppBox.getInstance().setPushToken(
    token = "푸시 토큰 값"
)

// AppBox 푸시 아이콘 설정
AppBox.getInstance().setPushIcon(
    icon = R.drawable.ic_launcher_background
)

// 인트로 설정
AppBox.getInstance().setIntro(
    items = mutableListOf("https://www.example.com/image1.png", "https://www.example.com/image2.png")
)

// 당겨서 새로고침 설정
AppBox.getInstance().setPullDownRefresh(
    used = true
)


// --------------------------------------
// 3. SDK실행
// --------------------------------------

// AppBox 실행
AppBox.getInstance().start { isSuccess, message ->
    if (isSuccess) {
        // 실행 성공 처리
        Log.d("AppBox", "SDK 실행 성공")
    } else {
        // 실행 실패 처리
        Log.e("AppBox", "SDK 실행 실패: $message")
    }
}
iOS 설정
iOS 설치 방법을 설명합니다.
AppBoxSDK는 Swift Package Manager를 통해 배포됩니다.
AppBoxSDK는 Swift Package Manager를 통해 배포됩니다.
  • 1. SDK init
    AppBox SDK를 사용하려면 먼저 초기화를 수행해야 합니다. initSDK 메서드를 호출하여 초기화를 완료하세요.
    AppDelegate에서 초기화를 진행합니다.
Swift
복사 아이콘
      
// AppDelegate
import AppBoxSDK
import WebKit

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {

    // AppBox WebConfig 설정
    let appBoxWebConfig = AppBoxWebConfig()
    let wkWebViewConfig = WKWebViewConfiguration()
    if #available(iOS 14.0, *) {
       wkWebViewConfig.defaultWebpagePreferences.allowsContentJavaScript = true
    } else {
       wkWebViewConfig.preferences.javaScriptEnabled = true
    }
    appBoxWebConfig.wKWebViewConfiguration = wkWebViewConfig

    // AppBox 초기화
    AppBox.shared.initSDK(
       baseUrl: "https://www.example.com",
       webConfig: appBoxWebConfig,
       debugMode: true
    )

    return true
}
  • 2. function set
    AppBox SDK 실행 전 추가 기능이 설정이 되어야 적용이 됩니다.
Swift
복사 아이콘

// AppBox 푸시 토큰 설정 (푸시토큰을  AppBox에 전달 하려면 설정합니다.)
AppBox.shared.setPushToken("{푸시 토큰 값}")


// AppBox 로컬 푸시 설정(1)
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    let center = UNUserNotificationCenter.current()
    center.delegate = self

    return true
}

// AppBox 로컬 푸시 설정(2)
extension AppDelegate: UNUserNotificationCenterDelegate {
    func userNotificationCenter(_ center: UNUserNotificationCenter, willPresent notification: UNNotification, withCompletionHandler completionHandler: @escaping (UNNotificationPresentationOptions) -> Void) {
        completionHandler([.alert, .sound])
    }
}


// AppBox 인트로 설정
if let appBoxIntroItem1 = AppBoxIntro(imageUrl: "https://www.example.com/example1.png"),
  let appBoxIntroItem2 = AppBoxIntro(imageUrl: "https://www.example.com/example2.png") {
   let items = [
       appBoxIntroItem1,
       appBoxIntroItem2
   ]
   AppBox.shared.setIntro(items)
}


// AppBox 당겨서 새로고침 설정
AppBox.shared.setPullDownRefresh(
   used: true
)
  • 3. SDK start
    초기화된 SDK를 실행하려면 start 메서드를 호출하세요. 실행 결과는 콜백을 통해 전달됩니다.
Swift
복사 아이콘

// AppBox 실행
AppBox.shared.start(from: self) { isSuccess, error in
   if isSuccess {
       // 실행 성공 처리
       print("AppBox:: SDK 실행 성공")
   } else {
       // 실행 실패 처리
       if let error = error {
           print("error : \(error.localizedDescription)")
       } else {
           print("error : unkown Error")
       }
   }
}