0.0.10 • Published 4 years ago

genie-lib-project v0.0.10

Weekly downloads
22
License
-
Repository
-
Last release
4 years ago

GiGA Genie src/lib에서 제공되는 것들

1. 내장 sdk 함수 (this.$sdk)

기본적으로 gigagenie용 sdk가 import되어 있으므로, global 변수 gigagenie로 사용할 수 있다. (local에서 사용 시 undefined, 기가지니 내에서만 동작) [SDK API Github 참고] 현재 sdk 함수들이 모두 callback을 기반으로 하고 있으므로, 자주 사용하는 함수들 위주로 this.$sdk로 promise를 반환하도록 재 작성 되어있다.

this.$sdk로 사용 가능한 함수들은 다음과 같다. 모두 promise를 반환하며, 결과값을 object 형태로 전달받을 수 있다. (https://github.com/GiGAGenie-ServiceSDK/UserGuide/wiki)

  • init()
  • setKws()
  • getUserInfo()
  • sendTTS(options)
  • stopTTS()
  • getVoiceText(options)
  • getContainerId()
  • getDeviceRegInfo()
  • getOtvSaid()
  • createNS(NSname)
  • destroyNS(NSname)
  • getNSkey(NSname, key)
  • setNSkey(NSname, key, value)
  • delNSkey(NSname, key)
  • findNSkey(NSname, keytext)
  • runApp(options)
  • sendPushMsg(options)
  • exit()
  • setVoiceRecogDomain(options)
  • trackEvent(eventName, eventCategory, additionalInfo, eventWeigth = 100) (new)
  • sendLongTTS(options) (new - CA 11.00.00에서만 사용가능)
  • stopLongTTS() (new - CA 11.00.00에서만 사용가능)
  • setVoiceFilter(rules) (new)
  • resetVoiceFilter() (new)
  • executeApi(apiName, options, timeout = 7) (new - 위에서 제공하는 것 이외의 API를 promise로 받고싶을 때 사용)
// es6 문법으로 작성되어있습니다.

const options = {
    ttstext: '안녕하세요'
};

// promise로 tts 사용하기.
// 해당 함수는 tts를 실행하기 전에 내부에서 stopTTS를 호출하고 이전에 play 중인 tts가 완전히 종료된 후 call하므로 좀 더 안정적으로 사용 가능하다.
this.$sdk.sendTTS(options).then((res) => {
    console.log(`result_cd: ${res.result_cd}`);
});

// 바로 sdk함수 사용하기
gigagenie.voice.sendTTS(options, (res) => {
    console.log(`result_cd: ${res.result_cd}`);
})

sendTTS/getVoiceText 사용 주의사항

  • tts로만 진행되는 게임같은 경우, 다른 리모컨 동작에도 app으로 복귀했을 때 게임이 진행되어야 함으로 retryTTS 옵션을 true로 사용한다.
  • genie-lib에서 제공하는 독자적인 option값으로, sdk와 별개의 옵션
// retryTTS 옵션을 true로 하면, tts재생 중 onAppStatusChange로 끊기는 경우 다시 재생시켜준다.
// tts로만 진행되는 게임같은 앱일 경우에는 무조건 retryTTS 옵션을 켜고, 다음 동작은 200일 경우에만 동작시키도록 한다.

const optiosn = {
    ttstext: '1번 문제 입니다.',
    retryTTS: true
}
this.$sdk.sendTTS(options).then((res) => {
    if(res.result_cd === 200) {
        console.log(`result_cd: ${res.result_cd}`);
    }
});
  • init()
  • setKws()
  • getUserInfo()
  • getContainerId()
  • getDeviceRegInfo()

기가지니 sdk에서 가져온 정보는 store의 module로 gboxStore에 따로 저장된다. (genieTools에서 초기화 됨) vuex module 사용방법

// 사용가능한 값과 기본값. 단말마다 설정된 값을 사용할 수 있다.
// gboxStore에 저장된 state 값
isGboxInit: false
registwithapp: false
containerId: null
devServiceId: null
deviceId: null
userKey: null
callName: '기가지니'
userName: '미등록'
appName: 'App이름'

// state로 사용 시,
import { mapState } from 'vuex';
...
computed: {
    ...mapState('gboxStore', ['callName', 'usrName']);
}

2. 대화 Intent / remote key Event 사용

EventBus를 사용하여, app 전체에 Event를 $emit하고, 각 컴포넌트에서 사용하고자 하는 event만 $on으로 bind하여 사용할 수 있다. 이로 인해 컴포넌트들은 개별적으로 사용하고자 하는 event를 전달받고 그에 대한 동작을 처리 할 수 있다.

각 컴포넌트.vue 파일의 method 함수에 전달 받고자 하는 event를 등록한다. methods의 bindGboxEvents함수를 추가하고, 아래 형태처럼 return하여 event를 bind한다.

return {
    keydown: 연결할 함수, // remote keydown을 받을 경우
    keyup: 연결할 함수, // remote keyup을 받을 경우
    remotePrev: 연결할 함수, // remote의 왼쪽 파란색 화살표 버튼 누를 시
    remoteNext: 연결할 함수, // remote의 왼쪽 파란색 화살표 버튼 누를 시
    intent이름: 연결할 함수 // 대화 intent를 받아서 동작을 처리할 경우
}
// *.vue 내부의 method함수에 작성
...
methods: {
    bindGboxEvents() {
        /**
         * bind할 이벤트들을 작성하세요.
         * 꼭 익명함수가 아닌 methods에 지정되어 있는 함수명으로 bind 해야합니다.
         * good -> onClick: this.onClick
         * bad -> onClick: function(){}
         */
        return {};
    }
}
...

//사용 예제
// sample.vue
...
methods: {
    startGame(event) {
        // 게임을 시작하는 함수
    },
    keydown(event) {
        if (event.keyCode === 13) {
            // key Event를 전달 받을 수 있다.
        }
    },
    bindGboxEvents() {
        return {
            // 대화모델에 callGame intent를 전달 받으면, startGame함수를 실행한다.
            'callGame': this.startGame,
            'keydown': this.keydown
        }
    }
}

기본적인 intent 함수가 지정되어 있으므로, 대화모델에 아래와 같은 Intent를 추가하여 배포하는 것만으로 아래 기능을 사용할 수 있다.

( 주의: 대화 dialog kit에 입력하지 않을 시 동작안됨 )

  • callClose
    • app을 종료한다.
    • 추천 문장: '나가기'
  • callBack
    • history back을 수행한다.
    • 추천 문장: '이전', '뒤로'
  • callHome, callApp
    • main으로 이동한다.
    • home으로 사용할 router 이름을 'main'으로 정의한 후 사용
    • 추천 문장: '홈으로'
  • callNumber
    • 숫자를 전달받고 싶을 경우 사용
    • 추천 문장: 1번, 2번, 3번...
  • callPlay
    • GGNativeAudio / GGNativeVideo / GGHlsVideo 사용 시 play 기능 발화로 동작하게 하고 싶을 시 사용
    • 추천 문장 : '재생', '재생해줘'

임의로 컴포넌트에서 event를 global로 전달하고 싶은 경우, 아래와 같이 등록 후, bindGboxEvent에서 전달받을 함수를 지정하면 동일하게 사용가능 하다.

this.$genieBus.$emit('전달할 event', parameter);

3. Focus 관련 Rule

기본 리모컨 동작을 위해, 화면에 강제로 지정될 focus가 필요할 경우 v-focus='true' 를 사용하면, 초기 focus를 지정할 수 있다.

<!-- 최초 1회에 focus를 가진다. -->
<button v-focus='true'>default</button>

기가지니에서 리모컨으로 focus를 조작하기 위해, spatial navigation을 사용하며, 이에 대한 rule을 작성하여 사용할 경우 별 다른 처리 없이, 리모컨으로 화면의 버튼들을 탐색 할 수 있다. (10/16일 적용)

ㅇ focus를 받을 수 있도록 하려면, GGListItem 혹은 GGbtn을 사용한다.

<!-- 각 컴포넌트 옵션값은 아래에서 확인 필요 -->
<GGListItem></GGListItem>
<GGbtn></GGbtn>

ㅇ last-focus를 이용하여 list를 구성하고 싶을 때

<!-- last-focus를 이용하여 list를 구성하고 싶을 때 -->
<ul role="list">
    <li role="list-item"></li>
    <li role="list-item"></li>
</ul>

ㅇ last-focus를 이용하여 container를 구성하고 싶을 때

<!-- data-focus-type이 default일 경우,  -->
<div role="focus-container" data-focus-type="default">
    <!-- 여기에 container내용 작성 -->
    <GGbtn class="always">container를 이동할 때, 이 element에 먼저 focus가 옵니다.</GGbtn>
    <GGbtn>기본으로 제공하는 button item입니다.</GGbtn>
</div>


<!-- data-focus-type이 없을 경우,  -->
<div role="focus-container">
    <!-- 여기에 container내용 작성 -->
    <GGbtn>마지막에 focus를 받은 element를 기억하여 먼저 focus됩니다.</GGbtn>
    <GGbtn>기본으로 제공하는 button item입니다.</GGbtn>
</div>

ㅇ 왼쪽에 list가 있고, 오른쪽에 content-box를 구성하고 싶을 때

<!--
    list와 content를 방향키로 제어하기 위해, list의 position값을 설정해야합니다.
    기본값은 left입니다.

    content-box 끝에서 설정한 값에 right or left를 누르면 focus가 list로 이동합니다.
-->
<div role="content-box" data-list-position="right">
    <!-- 여기에 container내용 작성 -->
    <GGbtn>기본으로 제공하는 btn item입니다.</GGbtn>
    <GGbtn>기본으로 제공하는 btn item입니다.</GGbtn>
</div>
<GGList></GGList>

4. Modal 경고창 사용

App.vue에 GGModal이 기본으로 추가되어 있으므로, Error 혹은 알림을 함수 호출로 사용할 수 있다.

<template>
    <div id="app">
        <router-view/>
        <!-- 기본으로 등록되어 있음. -->
        <GGModal/>
    </div>
</template>

컴포넌트 내에서 사용하고 싶을 시

this.$modal.show({ message: '기본 모달입니다.\n3초 후 사라집니다.' });

modal은 기본적으로 다양한 option으로 control 가능하며, genie-demo의 ModalSample.vue에서 다양한 사용예제를 확인 할 수 있다.

5. GiGA Genie용 UI Component 제공

따로 component를 등록하지 않아도 사용가능한 component들을 기본으로 제공한다. 전부 기가지니의 App UI/UX를 기본으로 정의 되어있으며, genie-demo에서 사용예제를 확인할 수 있다.

제공되는 컴포넌트 (지속 추가 중..)

  • GGAnimationInt
  • GGbtn
  • GGCountDown
  • GGDefaultLayout
  • GGFocusContainer (discarded)
  • GGGridList
  • GGHlsVideo
  • GGListItem
  • GGLoading
  • GGLollingGuide
  • GGMarquee
  • GGModal
  • GGNativeAudio
  • GGNativeVideo
  • GGPagination
  • GGProgressBar
  • GGUserAccIcon
  • GGVoiceGuide
  • GGList (new)
  • GGModalLayout (new)
  • GGScrollBox (new)

6. 기본 import library

개발 편의를 위해 기본적인 library를 vue 파일 내에서 사용 시 아래와 같이 사용할 수 있다.

  • axios : this.$axios

  • lodash: this.$lodash

  • spatialNavigation: this.$spatialNav github 참조 기본적인 init은 내부에서 해주고있음

7. animate css 추가 (3/2)

  • 개발 편의를 위한 animate용 css를 설치해서 사용할 수 있도록 추가, genie-lib에서 import하여 사용할 수 있도록 설정되어있다. 사용 가이드는 animate.css github 참조.
  • vue transition에서 해당 클래스를 사용해서 개발 가능함 vue.js 트랜지션

8. 정규식으로 원하는 단어 발화에서 Intent로 변환하기 (4/1)

  • $sdk.setVoiceFilter에 object로 rule을 설정하면, 발화 시 원하는 단어만 추출해서, 정해진 intent로 받을 수 있다.
 - 추출하고 싶은 단어들은 ()로 감싼다. intent로 받을 때, keyword로 return  받을 수 있습니다.
 - 여러 단어들을 사용하고 싶을 경우는 아래처럼 사용
 - keyword는 string으로 작성 해야합니다. mc에서 keyword로 등록함.
 - `keyword에는 정규식형태!!!를 입력할 수 있습니다. (regExp type은 안됨. string으로 작성된 정규식!!!)`
    - `string으로 작성하기 때문에, \(역슬래시)는 \\두번 적어서 역슬래시임을 표시한다. (그래야 mc에 \s로 제대로 등록됨)`
    - ex) 공백을 표시하려면 `\s` => `\\s` or `[ ]` 이렇게 표시한다.
 - 추출하고 싶은 단어들은 ()로 감싼다.
 - 여러단어들을 사용하고 싶을 경우는 아래처럼 사용
    - 공백여부도 상관없이 받으려면 해당 값 추가 => ([ ]?)
    - list =['잭과콩나무','흥부[ ]?놀부','인어공주', '인어공주 이야기']
 - rule 설정 예제
 ```js
var list =['잭과콩나무','흥부[ ]?놀부','인어공주', '인어공주 이야기'];
// 배열로 작성!
var rules = [{
        intent: 'callSearch',
        keyword: '(.+[\\S])[\\s]?(=?찾아.|검색.|알려.|보여.)'
    },
    {
        intent: 'callBook',
        keyword: `(${list.join("|")})`,
    },
    {
        intent: 'callFind',
        keyword: '찾아줘'
    }];
this.$sdk.setVoiceFilter(rules);
// 해당 rule을 더 이상 사용하지 않을 시 resetVoiceFilter를 꼭 호출해줘야 합니다!
 ```

### extra로 받을 수 있는 응답
 - intent: 등록된 intent
 - keyword: ()로 추출된 단어
 - uword: 발화원문
 - data: match 함수 실행 결과
 ```js
 // bind된 intent 함수에서 오는 응답
 function callSearch(extra) {
    //extra 값
    {
        "intent":"callSearch",
        "keyword":"아르르",
        "uword":"아르르 찾아줘",
        "data":["아르르 찾아줘","아르르","찾아줘"]
    }
 }
 ```

VoiceFilter Sample 참조\ 실제 setVoiceFilter 사용 방법\ 정규식 문장 테스트

9. $sdk에 등록되지 않은 gigagenie함수 promise로 호출하기

  • 현재까지 $sdk에 등록되지 않은 함수를 호출 하고 싶을 때에는 아래처럼 호출하여 사용할 수 있다.
  • dev에서 사용할 수 있도록 되어있다.
    this.$sdk.executeApi('gigagenie.init.checkFgAction', options);

NPM 배포 시 주의하기!

  • npm 배포 전에, 꼭 npm run build-lib 하기
  • 빌드 된 파일을 기반으로 package.json의 버전 변경
  • 배포 전에 자신의 npm whoami 확인하기
  • npm publish --access=public 배포 후 삭제하기 어려우므로 주의 하기!!!!
gigagenie
animate.cssaxioscore-jshls.jslodashlodash-esspatial-navigation-jsuuidvuevue-routervuex
@everything-registry/sub-chunk-1747
0.0.10

4 years ago

0.0.9

4 years ago

0.0.8

4 years ago

0.0.7

4 years ago

0.0.6

4 years ago

0.0.3

4 years ago

0.0.2

4 years ago

0.0.5

4 years ago

0.0.4

4 years ago

0.0.1

4 years ago