웹 개발자가 앱박스 개발 문서에 따라 웹에 자바스크립트 코드를 입력한 후, 앱박스 SDK와 함께 앱을 빌드하면 앱이 완성됩니다. 이 문서는 웹 개발자를 위한 앱박스 사용법을 설명하는 문서입니다.
웹 개발자가 앱박스 개발 문서에 따라 웹에 자바스크립트 코드를 입력한 후, 앱박스 SDK와 함께 앱을 빌드하면 앱이 완성됩니다. 이 문서는 웹 개발자를 위한 앱박스 사용법을 설명하는 문서입니다.
추가 지원이 필요한 경우 기술지원팀에게 문의주세요.
-
앱박스의 모든 기능은 앱을 통해서 바로 시연 해 볼 수 있습니다.
상단의 무료 데모 체험을 클릭하여 바로 체험하여 보세요.
-
AppBox - SDK v 1.0 출시앱박스 SDK를 사용하면 크롬브라우져, 사파리 브라우저와 같은 기본적인 기능을 사용할 수 있으며, 또한 SDK에서 제공되는 Native의 전체 기능을 사용할 수 있습니다.
-
AppBox 샘플소스 다운로드는 AppBox Sample Github 또는 SDK다운로드 메뉴에서 받을 수 있습니다.
<script type="module" src="https://appboxapp.com/app/script/appbox.js"></script>
if(isAppBoxSDK()){
// Appbox 기능 실행
}else {
// 기존 웹페이지의 기능 실행
}
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 배열 데이터는 메뉴 갯수만큼 등록하며, 최소 한개는 필수 입니다.
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 배열 데이터는 메뉴 갯수만큼 등록하며, 최소 한개는 필수 입니다.
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 배열 데이터는 메뉴 갯수만큼 등록하며, 최소 한개는 필수 입니다.
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 배열 데이터는 메뉴 갯수만큼 등록하며, 최소 한개는 필수 입니다.
-
로딩 인디케이 아이콘 이미지는 한번 다운로드 받은 후 앱내 저장되어 계속 사용됩니다.
var appData = {
"loadingIcon": "{페이지 로딩 gif 아이콘 URL}",
"width": 12
};
callAppBox (1060, appData);
항목 | 필수 여부 | 설명 | 기본값 | 비고 |
---|---|---|---|---|
loadingIcon | 필수 | 로딩시 노출될 gif 이미지 URL | ||
width | 필수 | 로딩 인디케이터 아이콘 width 백분률 (화면스크린 가로 사이즈 대비 아이콘이 차지하는 퍼센트(%)) |
-
입력 항목값 width는 스크린 가로 사이즈 비례한 대비 백분률입니다.
예를들어 12로 입력하면 화면의 가로 스크린사이즈의 12%로 아이콘 width가 설정됩니다.
(세로 사이즈는 width 동일하게 설정됩니다.)
-
생체인증 사용예기존의 자동로그인을 생체인증을 통과한 후 자동로그인 되도록 구성 할 수 있습니다.
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" 으로 리턴됩니다.
var appData = {
"openURL" : "{오픈 하고자 하는 URL}"
};
callAppBox (1210, appData);
항목 | 필수여부 | 설명 | 기본값 | 비고 |
---|---|---|---|---|
openURL | 필수 | 새로운 모달 페이지로 오픈할 웹페이지 | ||
title | - | 타이틀 (Android에서만 노출) |
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 : 선택된 날짜 }; 함수로 리턴하므로 웹페이지에 해당 함수가 선언 되어야 합니다.
var appData = {
"vibrationCount" : 3,
"type" : "haptic",
"returnFunc": "vibrationReturn" // 비필수
};
callAppBox (1050, appData);
항목 | 필수 여부 | 설명 | 기본값 | 비고 |
---|---|---|---|---|
vibrationCount | 필수 | 진동 횟수 | ||
type | 필수 | 진동 타입 (haptic: 햅틱, short: 짧게, long: 길게) | ||
returnFunc | 비필수 | 진동을 정상적으로 울릴때 리턴 |
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" 으로 리턴됩니다.
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" 으로 리턴됩니다.
-
인트로 소개페이지는 앱 빌드시 네이티브 코드로도 인트로 소개 이미지를 설정 할 수 있습니다.
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 |
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" 으로 리턴합니다.
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 배열 데이터는 메뉴 갯수만큼 등록하며, 최소 한개는 필수 입니다.
var appData = {
"item" : [
{
"imageUrl" : "{이미지 URL}"
},
{
"imageUrl" : "https://www.example.com/image.png"
}
]
};
callAppBox (1161, appData);
항목 | 필수 여부 | 설명 | 기본값 | 비고 | |
---|---|---|---|---|---|
item | imageUrl | 필수 | 노출할 이미지 URL |
-
item 배열 데이터는 메뉴 갯수만큼 등록하며, 최소 한개는 필수 입니다.
var appData = {
"delaySecond" : 3.5,
"message" : "{토스트 메시지 내용}"
};
callAppBox (1040, appData);
항목 | 필수 여부 | 설명 | 기본값 | 비고 |
---|---|---|---|---|
delaySecond | 필수 | 유지 시간 (초) | ||
message | 필수 | 메시지 | ||
textColor | - | 텍스트 칼라 | #FFFFFF | |
backColor | - | 백그라운드 칼라 | #000000 | |
haptic | - | 토스트 노출 진동 햅틱 | false |
var appData = {
"barcode" : "{바코드로 노출 할 숫자}"
};
callAppBox (1130, appData);
항목 | 필수 여부 | 설명 | 기본값 | 비고 |
---|---|---|---|---|
barcode | 필수 | 바코드로 생성 할 string | ||
haptic | - | 바코드 팝업 노출시 진동 햅틱 (true, false) | true | |
animation | - | 바코드 팝업 노출시 애니메이션 (true, false) | true |
var appData = {
"qr" : "{QR로 노출될 String}"
};
callAppBox (1120, appData);
항목 | 필수 여부 | 설명 | 기본값 | 비고 |
---|---|---|---|---|
qr | 필수 | QR로 생성 할 string | ||
haptic | - | QR 팝업 노출시 진동 햅틱 (true, false) | true | |
animation | - | QR 팝업 노출시 애니메이션 (true, false) | true |
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" 으로 리턴합니다.
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" 으로 리턴합니다.
var appData = {
"url" : "https://www.example.com/link.jsp" // 외부로 오픈 할 URL
};
callAppBox (1080, appData);
항목 | 필수 여부 | 설명 | 기본값 | 비고 |
---|---|---|---|---|
url | 필수 | 외부로 오픈 할 URL |
-
외부 페이지 열기를 실행하면 앱은 백그라운드로 들어가며 외부브라우저가 앱 위에 포그라운드로 올라옵니다.
-
고객의 시스템에서 푸시를 발송하기 위해서는 푸시토큰이 고객에 서버에 저장되어야 합니다.
이를 위해 네이티브에서 필히 푸시 토큰을 수집하는 절차가 필요합니다.
var appData = {
"returnFunc" : "pushTokenReturn" // 푸시토큰 등록 후 콜백 받을 함수명
};
callAppBox (1000, appData);
항목 | 필수 여부 | 설명 | 기본값 | 비고 |
---|---|---|---|---|
returnFunc | 필수 | 결과값으로 받고 싶은 javascript 함수명을 입력 (예를들어 pushTokenReturn 같이 함수 명만 입력) | ||
결과값 | ||||
pushTokenReturn | 필수 | 푸시토큰 (예: kUs9oM2xi2kd0Edq2P2S....), reject : 푸시 권한 미승인 상태 |
-
푸시 토큰의 값이 자주 바뀌지는 않지만, 경우에 따라 앱 실행 시 마다 바뀔 수 있으므로, 사용자의 안정적적인 푸시수신을 위해서 푸시토큰을 갱신하세요.
-
푸시를 수신하려면 사용자가 푸시 권한을 승인 하여야 합니다. 허용하지 않은 경우 위의 표기와 같이 "reject"으로 리턴합니다.
var appData = {
// 파라미터 없음
};
callAppBox (1200, appData);
항목 | 필수 여부 | 설명 | 기본값 | 비고 |
---|---|---|---|---|
요청 항목 없음 |
-
앱의 평가 팝업은 매번 요청시 마다 띄워지지 않습니다.
App의 Review API는 사용자의 활동기록에 의한 호출 횟수 제한이 있으며 평가 기록 여부, 최소 조건 충족 여부, Apple 및 Google의 내부 정책에 의해 띄워집니다.
호출시 매번 띄워지지 않으며, 사용자가 불편을 느끼지 않는 경우에만 표시됩니다.
var appData = {
"message": "{공유할 메시지 내용 또는 URL}."
};
callAppBox (1030, appData);
항목 | 필수 여부 | 설명 | 기본값 | 비고 |
---|---|---|---|---|
message | 필수 | 공유하려는 텍스트 또는 URL |
-
iOS의 다른앱 오픈은 앱을 빌드전 Plist에 사전 세팅사항이 있습니다. (Android는 해당사항 없음)
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)을 입력하여야 합니다.
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에서 호출이 필요할때 사용합니다.
var appData = {
"target" : "01011112222",
"message" : "문자 메시지 입니다."
};
callAppBox (1150, appData);
항목 | 필수 여부 | 설명 | 기본값 | 비고 |
---|---|---|---|---|
target | 필수 | 받는사람 전화번호 | ||
message | 필수 | 문자 메시지 내용 |
var appData = {
"tel" : "01012345678"
};
callAppBox (1140, appData);
항목 | 필수 여부 | 설명 | 기본값 | 비고 |
---|---|---|---|---|
tel | 필수 | 전화 번호 |
// 결제 기능은 코드 연동 없이 사용가능합니다.
-
결제 기능은 별도의 코드 연동 없이 기본적으로 사용가능합니다.
// 영상 플레이 전체화면 보기 기능은 코드 연동 없이 동작합니다.
-
영상 플레이 전체화면 보기 기능은 별도의 코드 연동 없이 기본적으로 기능 동작합니다.
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 }; 함수로 리턴하므로 웹페이지에 해당 함수가 선언 되어야 합니다.
-
앱 업데이트 기능은 앱이 마켓에 올라가 있는 상태에서만 정상동작합니다. 앱이 마켓에 아직 올라가지 않은 개발단계에서는 정상동작 하지 않습니다.
var appData = {
// 파라미터 없음
};
callAppBox(1170, appData);
-
호출 하면 바로 앱이 종료됩니다. "종료 하시겠습니까?" 등의 Confirm 박스를 띄우고 종료는게 좋습니다.
-
Android Studio의 자세한 설정은 AppBox Sample Github 에서도 확인 할 수 있습니다.
-
1. Gradle 설정프로젝트 수준의 build.gradle 파일 수정
프로젝트의 build.gradle 파일에 JitPack 저장소를 추가합니다.
repositories {
google()
mavenCentral()
maven {
url = uri("https://jitpack.io")
// SDK 접근 설정
credentials {
username = "jp_gv49u3alugbbocfovlkfnvdt8a"
}
}
}
-
2. SDK 의존성 추가앱 수준의 build.gradle 파일에 SDK 의존성 추가
아래 의존성을 추가합니다:
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 파일에 다음 설정을 추가합니다.
# enableJetifier 설정
android.enableJetifier=true
-
4. SDK usage아래의 순서대로 선언, 기능설정(선택적), SDK실행 순으로 실행되도록 작성 되어야 합니다.
// --------------------------------------
// 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")
}
}
-
XCode의 자세한 설정은 AppBox Sample Github 에서도 확인 할 수 있습니다.
-
1. SDK initAppBox SDK를 사용하려면 먼저 초기화를 수행해야 합니다. initSDK 메서드를 호출하여 초기화를 완료하세요.
AppDelegate에서 초기화를 진행합니다.
// 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 setAppBox SDK 실행 전 추가 기능이 설정이 되어야 적용이 됩니다.
// 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 메서드를 호출하세요. 실행 결과는 콜백을 통해 전달됩니다.
// 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")
}
}
}