webOS web App의 메타파일

저번 시간에서는 webOS 상에 web app을 직접 만들고 설치하는 것을 배웠습니다.

이번 포스팅에서는 메타파일에 대해 공부하고, 이 web app의 메타데이터를 변경하는 방법에 대해 배웁니다.

webOS OSE 개발자 사이트 : Configuration Files 를 참고하여 작성하였습니다.

---

• 메타파일이란?

 

• webOS application의 메타파일
• appinfo.json
• packageinfo.json
• services.json

 

• webOS application의 appinfo.json 메타데이터 변경하기 (실습)

 

• webOS 애플리케이션의 메타데이터 로컬라이징

---

메타파일이란?

: 메타파일은 다른 파일에 대한 설명, 또는 다른 파일을 정의하는 정보를 담고 있는 파일입니다. 

 

파일에 대한 설명 혹은 정의에 대한 정보를 메타데이터라고 합니다.

즉, 메타파일은 메타데이터를 담고있는 파일이 되겠죠?

참고로 메타데이터의 종류에는

app name, id, version, icon image 정보 등이 있습니다.

---

webOS 애플리케이션의 메타파일

 

webOS 애플리케이션의 메타파일에는 appinfo.json , packageinfo.json, services.json 이렇게 세 가지의 메타 파일이 존재합니다.

 

appinfo.json은 web application 개발 단계에서 앱을 패키징하기 위해 필요한 메타데이터를 담고있는 파일입니다.

packageinfo.json은 서비스 패키지를 위한 메타파일입니다. CLI로 앱을 패키징하면 자동으로 생성되는 파일입니다. 

services.json은 서비스의 구조를 기술하는 메타파일입니다. 서비스의 Root 디렉토리에 위치합니다.

---

appinfo.json

 

appinfo.json은 application 패키징 전 요구되는 metadata를 저장한 파일로, 애플리케이션이 패키지 되기 위해서 반드시 필요합니다.

• web application개발 단계에서 앱을 패키징하기 전에 메타데이터가 있어야합니다. 이 메타 데이터를 담고 있는 파일입니다. 
• 앱 root 디렉토리에 위치합니다.

 

1. appinfo.json 구성 형식

• 구성형식

{
    "id"                  : string,
    "title"               : string,
    "main"                : string,
    "icon"                : string,
    "type"                : string,
    "largeIcon"           : string,
    "vendor"              : string,
    "version"             : string,
    "appDescription"      : string,
    "resolution"          : string,
    "iconColor"           : string,
    "splashBackground"    : string,
    "transparent"         : boolean,
    "requiredMemory"      : number,
    "requiredPermissions" : string array
}

 

• 형식 예시 (필수 5개 특성만. 여기없는 특성은 선택적 특성입니다)

{
    "id": "com.myco.app.web",
    "title": "Web App",
    "main": "index.html",
    "icon": "icon.png",
    "type": "web"
}

 

2. appinfo.json 구성 요소의 특성

 

• id
  • 모든 앱에는 역방향 DNS 이름 지정 규칙으로 구성된 고유 ID가 있습니다.
  • Home Launcher는 ID를 사용하여 애플리케이션을 고유하게 식별하고 제목과 함께 표시합니다.
  • 애플리케이션 ID는 고유하고 한 번 설정되며 애플리케이션을 게시한 후에는 변경할 수 없습니다.
  • 회사 / 기관의 역 도메인으로 ID를 시작합니다.
  • ID는 com.palm , com.webos , com.lge , com.palmdts 와 같은 역 도메인 이름으로 시작할 수 없습니다.
  • 하위 도메인 app.app-name으로 ID를 완료합니다.
  • ID 는 소문자 (az), 숫자 (0-9), 빼기 기호 및 마침표로만 구성, 2 자 이상이어야 하며 영숫자로 시작해야합니다.

 

• title
  • 홈 런처 및 앱 창에 표시된 앱의 제목입니다.
  • 앱 제목은 고유합니다.
  • 일단 설정되면 앱을 게시한 후 변경할 수 없습니다.

 

• main
  • 앱의 시작 지점입니다.
  • 파일 경로는 프로젝트 루트 디렉터리에 상대적이어야합니다.
  • 웹 유형에 따라 다음을 가리켜야합니다.
    • Web app: "index.html"
    • QML app: "main.qml"
    • Native app: "<executable file name>“

 

• icon
  • 앱에 표시되는 아이콘 이미지입니다.
  • 아이콘은 PNG 형식 -> 기본값 : "icon.png"
  • 파일 경로는 프로젝트 루트 디렉토리에 상대적이어야합니다.

 

• type
  • 앱 유형. 앱 유형에 따라 다음과 같이 값을 지정합니다.
    • Web app: "web"
    • QML app: "qml"
    • Native app: "native“

---

packageinfo.json

 

서비스 패키지를 위한 메타파일입니다.

CLI로 앱을 패키징 하면 자동으로 생성되는 파일입니다.

 

1. packageinfo.json 구성 형식

• 구성형식

{
    "app": "com.webos.app.testapp",
    "id": "com.webos.testapp",
    "loc_name": "webOS Open Source Edition Demo",
    "package_format_version": 2,
    "vendor": "My Company",
    "version": "1.0.0",
    "services": ["com.webos.testapp.service"]
}

 

2. packageinfo.json 구성 요소의 특성

• app
  • 애플리케이션 ID 입니다. 

 

• id
  • 패키지 ID 입니다.

 

• loc_name
  • 지역화 가능한 패키지 이름입니다.

 

• package_format_version
  • 패키징 형식 버전입니다. 예시에서는 현재 "2“ 버전입니다.

 

• vendor
  • 공급업체 이름입니다.

 

• version
  • 패키지 버전입니다.

 

• services (필수X)
  • 앱과 함께 제공되는 서비스입니다.

---

services.json

 

서비스의 Root 디렉토리에 위치하며, 서비스의 구조를 기술하는 파일입니다.

1. services.json 구성 형식

• 구성형식

{
    "id": "com.test.testacct.test.service",
    "description": "Test Service",
    "engine": "native",
    "executable": "test_service",
    "services": [
        {
            "name": "com.test.testacct.test.service",
            "description": "Test Contact"
        }
    ]
}

 

2. services.json 구성 요소의 특성

• id
  • 서비스 배열의 ID 입니다.

 

• description (필수X)
  • 서비스 배열에 대한 설명입니다.

 

• engine (필수X)
  • 서비스 종류입니다. 이 속성은 external native service를 개발할 때 필요합니다.

 

•  executable (필수X)
  • 실행 파일의 이름입니다. 이 속성은 external native service를 개발할 때 필요합니다.

 

• services
  • 앱이 제공하는 서비스입니다.
  • 일반적으로 앱은 하나의 서비스만 제공합니다.
  • 하지만 동일한 앱 내에서 여러 서비스를 제공해야하는 경우가 있을 수 있습니다.

 

• name
  •      webOS Luna Bus의 서비스 이름입니다.
  •      서비스 이름은 앱 이름으로 시작해야합니다.
    •      ex) App name: com.example.myapplication
    •      ex) Service name: com.example.myapplication.myservice

 

•      description(필수X)
  •      서비스에 대한 설명입니다.

 

---

webOS 애플리케이션의 appinfo.json 메타데이터 변경하기 (실습)

 

ares-generate -t <template> <App Directory>

ares-generate 코드로 web application을 제작해줍니다. web application에 대한 자세한 내용은 '웹앱(web application) 개발하기' 포스트를 참고바랍니다.

 

<App Directory>을 hello_app으로 지정했습니다. 이는 메타데이터가 들어있는 디렉토리명이 됩니다.

app id는 ipk 파일명이 됩니다.

title은 실제 어플리케이션의 이름이 됩니다. 

version은 디폴트로 지정하였습니다.

hello_app으로 만들어진 폴더를 열면, appinfo.json 메타파일과 icon 이미지, index.html 등 앱을 구성하는 메타데이터들이 저장되어있습니다.

 

• appinfo.json 열어보기

appinfo.json 파일을 Visual Studio Code로 열어서 정보를 확인하고 수정할 수 있습니다. 

ares-generate로 처음 생성한 것과 같은 id, title 정보를 확인할 수 있으며 icon이미지 또한 기본 이미지인 icon.png로 설정되어있는 것을 확인할 수 있습니다. 

 

main 화면은 index.html에서 수정할 수 있습니다.

 

• 메타파일 수정 전 기본 app 확인(자세한 사항은 '웹앱 개발하기' 글에서 확인)

ares-package hello_app

ares-package를 통해 app을 패키징합니다. 

메타파일이 담겨있는 hello_app 폴더와 같은 디렉토리에 com.hello.app 의 ipk파일이 생성된 것을 확인 할 수 있습니다.

ares-install -d rpi4 .\com.hello.app_1.0.0_all.ipk

ares-install을 통해 생성한 ipk파일을 webOS에 설치합니다.

title로 지정했던 hello_webOS라는 이름과 기본 icon image를 가진 app이 만들어진 것을 홈런처에서 확인할 수 있습니다. 

Hello, Web Application!! 이라는 웹페이지 화면이 디폴트입니다.

 

• index.html과 icon이미지, title 바꿔보기

Visual Studio Code로 index.html을 수정하고, icon이미지를 hello_app 디렉토리에 추가하여 icon을 변경해보겠습니다. 

 

index.html 변경

cup.jpg 추가

index.html을 변경하고 cup.jpg를 추가하였습니다.

 

appinfo.json 변경

title을 hello_webOS에서 hi_webOS로 변경하였으며, icon을 아까 추가한 cup.jpg로 바꾸어줍니다.

메타파일 변경이 끝났습니다.

 

메타파일을 변경한 이후에는 반드시 패키징부터 다시 해주어야합니다.

 

ares-package, ares-install

hi_webOS로 title도 변경되었고, icon image도 지정했던 cup.jpg로 변경된 것을 확인할 수 있습니다.

index.html에 따라 웹페이지 화면도 변경되었습니다.

 

끝!

---

webOS 애플리케이션의 메타데이터 로컬라이징

 

로컬라이징에 대해서는 앞서 'web application이란 무엇인가?'에서 언급했습니다. 그리고 이 파트에서는 메타데이터의 로컬라이징에 대해 간단히 언급하겠습니다.

 

만약 app이 하나 이상의 언어로 현지화될 경우(localized), 각 언어는 각각의 appinfo.json file을 가질 수 있습니다.

주의할 것은, 각 appinfo.json파일의 app ID와 version number가 최상위 appinfo.json 파일의 것과 같아야한다는 점입니다. 

 

• 최상위 appinfo.json의 앱 ID와 version은 올바른 값과 구조로서 유효합니다. 유효성 검사에 실패한 app은 패키징되거나 업로드 될 수 없습니다.
• locale 설정 값에 따라 app 메타데이터를 현지화하면, 설정과 일치하는 앱 정보들을 홈 런처에서 확인할 수 있습니다.

특정 locale로 앱 정보를 제공하기 위한 방법

• 특정 locale로 앱 정보를 제공하기 위한 방법 :  위 사진처럼 resource 폴더 아래 locale 폴더를 만든 다음(language, script, region) 각 locale 폴더 하위에 각 appinfo.json파일을 만들어주어야합니다. 

 

더 알아보고 싶다면

appinfo.json

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

appinfo.json

 

pakageinfo.json

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

packageinfo.json

service.json

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

services.json