(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-fc5869b8"],{"53af":function(e,t,i){"use strict";t["a"]="@app.route('/list', methods=('GET', ))\r\ndef list_tv():\r\n    path = f\"/webostv\"\r\n    headers = _create_headers()\r\n    response = requests.get(HOST + path, headers=headers).json()\r\n    return response\r\n \r\n\r\n@app.route('/connect/<ip>', methods=('GET', ))\r\ndef connect_tv(ip):\r\n    path = f\"/webostv/{ip}\"\r\n    headers = _create_headers()\r\n    response = requests.post(HOST + path, headers=headers).json()\r\n    return response\r\n\r\n\r\n@app.route('/capture/<ip>', methods=('GET', ))\r\ndef capture(ip):\r\n    path = f\"/webostv/{ip}/control/capture\"\r\n    headers = _create_headers()\r\n    response = requests.get(HOST + path, headers=headers).json()\r\n    return response\r\n\r\n\r\ndef _create_headers():\r\n    headers = {\r\n        \"Content-Type\": \"application/json;charset=UTF-8\"\r\n    }\r\n    return headers\r\n    "},"55ad":function(e,t,i){"use strict";t["a"]="pip3 install -r {root}/tv_capture/requirements.txt && python3 {root}/tv_capture/app.py"},c441:function(e,t,i){"use strict";i.r(t);var n=function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("article",[e._m(0),e._v(" Public component인"),i("router-link",{staticStyle:{"margin-left":"8px"},attrs:{to:"/docs/thinq/api"}},[e._v("com.damda.thinq-backend-api")]),e._v("를 활용하여 ThinQ 가전 상태조회 및 제어 애플리케이션을 컴포넌트로 생성하여 배포하는 튜토리얼입니다. "),i("h2",[e._v("Prerequisites")]),e._m(1),i("h2",[e._v("Dependency")]),e._v(" 아래 public component를 사용하는 컴포넌트 입니다. "),i("ul",{staticClass:"checklist"},[i("li",[i("router-link",{staticStyle:{"margin-left":"4px"},attrs:{to:"/docs/thinq/api"}},[e._v("com.damda.thinq-backend-api")])],1)]),i("h2",[e._v("웹 애플리케이션 로컬에서 실행")]),e._v(" ◎ 로컬에서의 실행은 코드가 정상인지 확인하는 용도이며 백엔드 연동이 안되어 프로그램이 정상적으로 동작하지는 않습니다. "),e._m(2),i("h2",[e._v("웹 애플리케이션 Damda 컴포넌트로 실행")]),i("h4",[e._v("컴포넌트 생성")]),e._m(3),i("h4",[e._v("컴포넌트 배포")]),e._m(4),i("h4",[e._v("컴포넌트 실행 확인")]),e._m(5),i("h2",[e._v("Tips")]),i("h4",[e._v("Vue.js 가이드")]),i("a",{attrs:{href:"https://kr.vuejs.org/v2/guide/",target:"_blank"}},[e._v(" https://kr.vuejs.org/v2/guide/")]),i("br"),i("br"),i("h4",[e._v("예제 디렉토리 구조")]),i("img",{staticStyle:{"margin-bottom":"20px","margin-top":"20px"},attrs:{src:"/assets/img/stree.png",alt:""}}),e._m(6),i("br"),i("h4",[e._v("Vue.js 로드 구조")]),i("img",{staticStyle:{"margin-bottom":"20px","margin-top":"10px"},attrs:{src:"/assets/img/sflow.png",alt:""}}),i("h4",[e._v("예제 화면 소스 리뷰")]),e._m(7)],1)},a=[function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("hgroup",[i("h1",[e._v("ThinQ가전 제어 컴포넌트 예제 (vue.js, 에어컨/세탁기/도어윈도우센서)")])])},function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("ul",{staticClass:"checklist"},[i("li",[i("a",{attrs:{href:"https://nodejs.org/ko/",target:"_blank"}},[e._v("node")])]),i("li",[e._v("npm : node 설치시 자동으로 설치됨")]),i("li",[i("a",{attrs:{href:"https://cli.vuejs.org/guide/installation.html",target:"_blank"}},[e._v("vue-cil")])]),i("li",[e._v("ThinQ 엡에서 실기기 등록 or ThinQ Simulator("),i("a",{attrs:{href:"https://simulator.lgthinq.com/",target:"_blank"}},[e._v("https://simulator.lgthinq.com/")]),e._v(") 가상기기 등록 (LG Account, KR)")])])},function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("ol",[i("li",[i("a",{attrs:{href:"/assets/img/thinq-web-front-example.zip",target:"_blank"}},[e._v(" 샘플 코드")]),e._v(" 다운로드")]),i("li",[e._v(" 압축 해제 후 터미널에서 다음 명령 실행 ")]),i("div",[i("pre",[i("code",{staticClass:"hljs"},[e._v("npm install\nnpm run serve")])])]),i("li",[i("a",{attrs:{href:"http://localhost:9001 ",target:"_blank"}},[e._v("http://localhost:9001")]),e._v(" 로 접속하여 로그인 페이지 확인 ")])])},function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",[i("ol",[i("li",[i("a",{attrs:{href:"/assets/img/thinq-web-front-example.zip",target:"_blank"}},[e._v(" 샘플 코드")]),e._v(" 다운로드")]),i("li",[e._v(" 코드 빌드하기 ")]),i("div",[i("pre",[i("code",{staticClass:"hljs"},[e._v("npm install\nnpm run build")])])]),i("li",[e._v(" 빌드된 웹 어플리케이션 파일 압축하기 (thinqweb.zip) ")]),e._v(" 빌드된 dist 폴더의 모든 파일을 압축합니다 "),i("br"),i("ul",{staticStyle:{"line-height":"34px"}},[i("li",[e._v(" dist/* ")])]),i("li",[i("a",{attrs:{href:"https://damda.lge.com/",target:"_blank"}},[e._v(" DAMDA console")]),e._v(" 로그인 > 컴포넌트 > 컴포넌트 추가 ")]),i("li",[e._v(" 컴포넌트 생성을 위해 필요한 정보를 넣어 줍니다. ")]),i("ul",{staticStyle:{"line-height":"34px"}},[i("li",[e._v(' 컴포넌트명 : "com.damda.sample.thinqweb-example" 입력'),i("br"),e._v(" - Unique한 이름을 지정해야 함. damda 플랫폼 내 중복되는 이름의 컴포넌트가 존재하는 경우 컴포넌트 생성 불가"),i("br"),e._v(" - 컴포넌트명 추천 형식 : com.<개인 식별 키워드>.sample.thinqweb-example ")]),i("li",[e._v("설명 : ‘Thinq web front 예제’ 입력")]),i("li",[e._v(" 코드 : '3. 예제 코드 파일 압축' 단계에서 생성한 'thinqweb.zip' 파일 업로드 ")]),i("li",[e._v(" 실행 스크립트 : 코드가 디바이스에 설치 후 실행하기 위해 필요한 스크립트 작성 ")]),i("div",[i("pre",[i("code",{staticClass:"hljs"},[e._v("npx http-server {root}/dist -p 9019")])])]),i("li",[e._v("홈 화면 출력' 체크")]),i("li",[e._v("썸네일 이미지 : 자유롭게 선택")]),i("li",[e._v("앱 이름 : 'ThinqWeb예제' 입력")]),i("li",[e._v(" 접속 링크 : '"),i("span",{staticClass:"link-font"},[e._v("http://127.0.0.1:9019")]),e._v("' 입력 "),i("br"),e._v(" - 홈 화면에서 썸네일 클릭 시 이동할 링크 주소 ")])]),i("img",{staticStyle:{"margin-bottom":"60px","margin-top":"10px"},attrs:{src:"/assets/img/example3-1.png",alt:""}}),i("li",[e._v(" 컴포넌트 생성 완료 ")]),i("img",{staticStyle:{"margin-bottom":"60px","margin-top":"10px"},attrs:{src:"/assets/img/example3-2.png",alt:""}})])])},function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",[i("ol",[i("li",[e._v("배포할 컴포넌트를 모두 선택 > 배포하기 (public 컴포넌트는 기본적으로 모두 배포 리스트에 추가됨)")]),i("img",{staticStyle:{"margin-bottom":"60px","margin-top":"40px"},attrs:{src:"/assets/img/example3-3.png",alt:""}}),i("li",[e._v('배포할 컴포넌트 리스트를 확인 > 배포할 "코어 디바이스 선택" > 배포요청')]),i("img",{staticStyle:{"margin-bottom":"60px","margin-top":"40px"},attrs:{src:"/assets/img/example3-4.png",alt:""}})])])},function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",[i("ol",[i("li",[e._v('배포 완료 후 라즈베리파이에서 "'),i("span",{staticClass:"link-font"},[e._v("http://localhost:8002")]),e._v('" 접속')]),e._v(" 다음과 같이 홈 화면에 위에서 배포한 ThinQ web front 예제 컴포넌트가 보이는 것을 확인합니다. "),i("img",{staticStyle:{"margin-bottom":"60px","margin-top":"40px"},attrs:{src:"/assets/img/example3-5.png",alt:""}}),i("li",[e._v(" 아이콘을 클릭하여 배포한 컴포넌트 웹 애플리케이션 실행 ")]),e._v(" 웹 페이지에 연결되면 lg account 로그인 후 가전 상태조회 및 컨트롤을 테스트 할 수 있습니다. "),i("br"),e._v(" ※ 기기 상태(Event) 및 PUSH를 확인하기 위해서는 Subscribe Event/Push 버튼을 클릭하여야 합니다. "),i("img",{staticStyle:{"margin-bottom":"60px","margin-top":"40px"},attrs:{src:"/assets/img/example3-6.png",alt:""}})])])},function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("ol",[i("li",[e._v("dist")]),e._v(" 프로젝트 빌드 Target 디렉토리 : npm run build 명령으로 Web Application 생성, 빌드 이전에는 존재하지 않음 "),i("li",[e._v("node_modules")]),e._v(" npm install 명령을 실행하게 되면 npm 모듈들이 설치되는 디렉토리, npm install 이전에는 존재하지 않음 "),i("li",[e._v("public")]),e._v(" Web Public 파일들, 빌드시 Web Root에 복사됨 "),i("li",[e._v("src")]),e._v(" Vue.js 소스 파일들이 위치하는 디렉토리 "),i("ul",[i("li",[e._v("assets")]),e._v(" Vue.js에서 쓰이는 Static 파일 (ex: 이미지) "),i("li",[e._v("router")]),e._v(" 페이지 이동에 필요한 Routing 설정 "),i("li",[e._v("store")]),e._v(" 페이지의 글로벌한 데이터 저장이나, 페이지 이동시 데이터 전달에 사용 "),i("li",[e._v("views")]),i("strong",[e._v("View 화면구현 파일")]),e._v("들이 위치 (페이지 템플릿, 로직 등, 실질적인 화면 구현) "),i("li",[e._v("App.vue")]),e._v(" Vue.js 최상위 컨테이너 파일 "),i("li",[e._v("main.js")]),e._v(" Vue.js 어플리케이션 진입점, App.vue를 로드 ")])])},function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("ol",[i("li",[e._v("Login.vue")]),e._v(" ThinQ Account 로그인 "),i("ul",[i("li",[e._v("1~15 line")]),e._v(" Vue.js 템플릿, View에 사용되는 Html과 Email, Password 변수(data) Binding "),i("li",[e._v("23~26 line")]),e._v(" Vue.js에서 사용할 변수(data) 정의 "),i("li",[e._v("27~54 line")]),e._v(" methods: Vue.js에서 사용할 Method(Function) 정의 "),i("li",[e._v("28~48 line")]),e._v(" 로그인 로직, Damda 공통 모듈 com.damda.thinq-backend-api의 /token Api 호출"),i("br"),e._v(" 계정 확인 후 sessionStorage에 acccess_token 저장 및 Vue.js Store의 'setAuth'를 호출하여 로그인 상태 true 저장 "),i("li",[e._v("49~53 line")]),e._v(" Form Reset Function (사용하지 않음) "),i("li",[e._v("57~81 line")]),e._v(" Vue.js Template에서 사용할 CSS 정의 ")]),i("br"),i("li",[e._v("Device.vue")]),e._v(" ThinQ Connect 가전 제어 "),i("ul",[i("li",[e._v("1~121 line")]),e._v(" Vue.js 템플릿, View에 사용되는 Html과 변수(data) Binding, 상태에 따른 Display 제어 "),i("li",[e._v("127~157 line")]),e._v(" Vue.js에서 사용할 변수(data) 정의"),i("br"),e._v(" - devices_list: ThinQ Account에 등록된 기기 목록"),i("br"),e._v(" - device_id: 에어컨, 세탁기, 도어윈도우센서의 기기 ID"),i("br"),e._v(" - device_push: Push Subscription 메시지 수신 데이터 저장"),i("br"),e._v(" - device_event: Event Subscription 메시지 수신 데이터 저장"),i("br"),e._v(" - washer_status: 세탁기 상태 저장"),i("br"),e._v(" - aircon_status: 에어컨 상태 저장"),i("br"),e._v(" - door_status: 도어윈도우센서 상태 저장"),i("br"),e._v(" - 이하 변수(Data) 정의: 기기 제어에 필요한 상태 저장 및 셀렉트 박스 옵션 들"),i("br"),i("li",[e._v("158~230 line")]),e._v(" mounted: Vue.js 페이지 로드 후 실행 (Html onLoad와 같은 Life Cycle)"),i("br"),e._v(" - 159~194 line: ThinQ Account에 등록된 기기 목록 조회, com.damda.thinq-backend-api의 /devices Api 호출"),i("br"),e._v(" - 172 line: 에어컨, 세탁기, 도어윈도우센서 존재시 device_id를 Data에서 정의한 device_id에 저장"),i("br"),e._v(" - 174~189 line: 등록된 기기의 상태 조회, com.damda.thinq-backend-api의 /devices/{device_id} Api 호출"),i("br"),i("li",[e._v("196~228 line")]),e._v(" Event/Push Callback을 수신 하기 위한 WebSocket 연결"),i("br"),e._v(" - 203~216 line: WebSocket 메시지 수신하게 되면 Event/Push 메시지 판별하여 device_event 또는 device_push변수에 저장 "),i("li",[e._v("231~423 line")]),e._v(" methods: Vue.js에서 사용할 Method(Function) 정의"),i("br"),e._v(" - 232~252 line: 에어컨, 세탁기 전원 제어 payload, 12/16 line Click 이벤트 발생시 호출됨"),i("br"),e._v(" - 253~269 line: 에어컨 온도 제어 payload, 19/22 line Click 이벤트 발생시 호출됨"),i("br"),e._v(" - 270~277 line: 에어컨 모드 제어 payload, 36 line Change 이벤트 발생시 호출됨"),i("br"),e._v(" - 278~285 line: 에어컨 팬스피드 제어 payload, 50 line Change 이벤트 발생시 호출됨"),i("br"),e._v(" - 286~297 line: 세탁기 세탁 시작 payload, 74 line Click 이벤트 발생시 호출됨"),i("br"),e._v(" - 298~373 line: 세탁기 모드 payload, 92 line Change 이벤트 발생시 호출됨"),i("br"),e._v(" - 374~388 line: 가전 제어, com.damda.thinq-backend-api의 /devices/{device_id} Api 호출"),i("br"),e._v(" - 389~405 line: Event Subscription 로직, 115~116 line Button Click 이벤트 발생시 호출됨"),i("br"),e._v(" - 406~422 line: Push Subscription 로직, 117~118 line Button Click 이벤트 발생시 호출됨 "),i("li",[e._v("424~447 line")]),e._v(" computed: 계산된 Data정의, 참조하는 변수의 값이 변경되면 자동으로 계산된 값을 반환"),i("br"),e._v(" - 425~432 line: isActiveAir, 에어컨 전원 ON/OFF 반환"),i("br"),e._v(" - 433~435 line: isAirDisabled, 에어컨 전원 ON/OFF에 따른 화면 Disable 판단에 사용"),i("br"),e._v(" - 436~443 line: isActiveWasher, 세탁기 전원 ON/OFF 반환"),i("br"),e._v(" - 444~446 line: isWasherDisabled, 세탁기 전원 ON/OFF에 따른 화면 Disable 판단에 사용 "),i("li",[e._v("448~472 line")]),e._v(" watch: 참조하는 변수의 값이 변경되면 실행됨"),i("br"),e._v(" - 449~459 line: device_event, 기기 Event Subscription 데이터 수신하면 기기 상태를 업데이트"),i("br"),e._v(" - 460~471 line: device_push, 기기 Push Subscription 데이터 수신하면 Push code를 Alert으로 화면에 표시 "),i("li",[e._v("475~657 line")]),e._v(" Vue.js Template에서 사용할 CSS 정의 ")])])}],s=i("53af"),r=i("55ad"),l=i("ea81"),v={data:function(){return{getStartedPage2Py:s["a"],getStartedPage2Sh:r["a"]}},components:{CodeViewer:l["a"]}},_=v,o=i("2877"),c=Object(o["a"])(_,n,a,!1,null,null,null);t["default"]=c.exports}}]);
//# sourceMappingURL=chunk-fc5869b8.69073b2f.js.map