webOS: web app 개발일지(2)

react로 만들다가 어려운 부분이 많아서.. webOS sample app 종 calendar 만드는 reference app이 있어서 그거 먼저 뜯어 보기로 했다. webOS에서 어떤 방식으로 web app을 제작하는지 알 필요가 있다고 생각하기도 했다.

 

소스 코드는

https://github.com/webosose/samples/tree/master/ref-apps

여기서 확인할 수 있고,

 

앱 관련 설명은

https://www.webosose.org/samples/2022/02/18/calendar-using-enact-framework/#source-code

여기서 확인할 수 있다.

 

친절하게도 설치 방법도 나와 있는데,

 

$ enact pack  
$ ares-package dist  
$ ares-install --device raspberrypi com.reference.app.familyeventplanner_1.0.2_all.ipk

 

이런 순서로 shell에 입력하면 된다.

 

참고로 설치하기 전에

$ npm install -g @enact/cli
$ npm install --save react@latest

이렇게 enact를 설치해주고 react를 업데이트 해줬다.

 

그리고 target에 설치된 앱을 확인해보면

$ ares-install --device raspberrypi --list

 

이렇게 정상적으로 설치된 걸 볼 수 있다.

 

기능은 기본적인 캘린더와 동일하다.

 

 

캘린더를 확인하고 필요한 경우 event를 등록할 수 있는 일반적인 calendar app이다.

 

1. appinfo.json

앱이 패키징될 때 필요한 metadata를 담고 있는 appinfo.json부터 먼저 살펴봤다.

{
  "id": "com.reference.app.familyeventplanner", // required
  "version": "1.0.2",
  "vendor": "LGE",
  "type": "web",	// required
  "main": "index.html",	// required
  "title": "Calendar",	// required
  "icon": "icon.png",	// required
  "transparent": true,
  "requiredPermissions": [
    "audio.operation",
    "media.operation",
    "mediacontroller.operation",
    "mediaindexer.operation",
    "mediapipeline.resourcemanagement",
    "mediapipeline.operation",
    "session.management",
    "sleep.management",
    "physicaldevice.management",
    "physicaldevice.query",
    "database.operation"
  ]
}

webOS 공식 페이지에도 appinfo.json을 따로 다루고 있어 참고했다.

https://www.webosose.org/docs/guides/development/configuration-files/appinfo-json/

 

일단 필수적인 property는 id, title, main, icon, type의 다섯 개다.

 

• id : app id, app을 packing하면 ID_VERSION_all.ipk의 형식으로 ipk가 생성된다.
• title : webOS Home 화면에서 표시되는 app title
• main : app의 launch point, web app의 경우 html 형식이다. 위 경우 index.html에서 launch가 시작된다.
• icon : webOS Home 화면에서 표시되는 app icon
• type : app의 type, web / qml / native로 구분된다.

 

그 외의 property를 살펴보면,

 

• version : app version, default = "1.0.0"
• vendor : app owner info
• transparent : app 배경 투명하게 할 지 여부
• requiredPermissions : LS2 API와 연계된 Access Control Group 명시

 

다른 기본적인 정보는 잘 알겠는데 requiredPermissions 부분을 좀 더 살펴봤다.

 

LS2 API와 ACG에 대해 먼저 살펴보자. 생각하기에 기본적이고 필수적인 부분만 간단하게 정리했다.

 

○ Luna Bus

ACG를 살펴보면 제일 먼저 나오는 것이 Luna Bus(LS2)이다. 공식 홈페이지에 의하면 LS2는 webOS의 커뮤니케이션 시스템으로, 프로세스들은 Luna Bus를 통해 실행되게 된다.

web app, service 등의 component가 Luna Bus를 통해 run된다.

 

어떠한 component가 Luna Bus를 사용하여 동작하게 될 때, LS2 API가 호출된다. LS2 API는 Luna Bus에서 서비스에 접근하고 기능을 사용하기 위한 인터페이스다.

 

○ ACG(Access Control Group)

서비스 제공자는 사전에 정의된 permission 정보를 따로 저장해야 한다. 그로 인해 Luna Bus가 access를 승인 혹은 거부하여 request를 처리하게 된다.

 

그러니까

1) service 제공자가 permission을 정의하면,

2) service 이용자는 필요한 permission을 구성/요구하고,

3) Luna Bus는 permission을 판별하여 요청을 승락/거부하여 access를 결정한다.

web app에서는 appinfo.json에서 설정할 수 있다. 즉 위의 requiredPermissions에 적혀 있는 내용들이 LS2 API이다!

 

LS2 API index는 역시 공식 홈페이지에 나와 있다.

https://www.webosose.org/docs/reference/ls2-api/ls2-api-index/

 

이를 참고해 보면, 위의 requiredPermissions는 이하와 같이 이해할 수 있다.

 

  "requiredPermissions": [
    "audio.operation",	// com.webos.service.audio ACG
    "media.operation",	// com.webos.media ACG
    "mediacontroller.operation",	// com.webos.service.mediacontroller ACG
    "mediaindexer.operation",	// com.webos.service.mediaindexer ACG
    "mediapipeline.resourcemanagement",	
    "mediapipeline.operation",
    "session.management",
    "sleep.management",	// com.webos.service.sleep ACG
    "physicaldevice.management",	// com.webos.service.pdm ACG
    "physicaldevice.query",	// com.webos.service.pdm ACG
    "database.operation"	// com.webos.service.db ACG
  ]

permission을 얻어서 method를 어떻게 사용하는지는 코드 살펴보면서 보도록 하겠다.

사용하고자 하는 LS2 API의 ACG를 알고 싶다면 ls-monitor command도 쓸 수 있다!

 

다음과 같은 command를 입력하면

$ ls-monitor -i com.webos.media

이런 식으로 ACG를 확인할 수 있다.

참고로 ares command와 달리 ls-monitor는 Putty와 같은 ssh를 활용하여 traget device와 연결해야 한다.

 

ls-monitor command는 아래에서 확인할 수 있다.

https://www.webosose.org/docs/tools/commands/ls-monitor/