이번 포스팅에서는 webOS에서 동작하는 web application을 개발하는 과정에 대해 다뤄보겠습니다.
webOS OSE 개발자 사이트 : Developing External Web Apps를 참고하여 작성하였습니다.
Target Device 등록하기
컴퓨터에서 웹앱을 만들고 Target Device에 웹앱을 설치하는 과정을 진행해볼 것 입니다.
라즈베리파이를 타겟디바이스로 등록한 후 웹앱을 설치할 수 있습니다.
저희는 Windows PowerShell을 사용하였습니다.
- ares-setup-device
> ares-setup-device위의 명령어를 사용하여 현재 등록된 디바이스를 확인할 수 있고 디바이스 추가, 수정, 제거가 가능합니다.
저희는 디바이스 등록을 해야하므로 add를 선택해줍니다.
modify, remove를 선택하고 싶으면 화살표를 이용하여 옮겨준 후 엔터를 누르면 됩니다.
디바이스의 이름과 IP주소를 각각 입력해준 후 나머지는 값 입력 없이 엔터를 눌러 디폴트 값으로 설정해주었습니다.
Set default ?와 Save ?항목에서는 y를 입력하여 새로운 디바이스 default로 설정하고 저장했습니다.
+ IP주소 확인하는 방법
설정 > 네트워크 >무선 네트워크 연결에서 와이파이를 연결하고 Wi-Fi 고급 설정에 들어가면 위와 같은 화면을 확인할 수 있습니다.
그 중에서 IP주소인 192.168.0.49를 입력하면 됩니다. (IP주소는 달라지기 때문에 직접 확인 후 입력해야 합니다.)
위의 과정을 따라하면 디바이스 등록이 완료되며, 새로운 디바이스인 raspberrypi4가 생긴 것을 확인할 수 있습니다.
web application 개발하기
1. web application 생성하기
- ares-generate
> ares-generate -t <template> <App Directory>기본 템플릿인 wepapp의 틀을 가진 웹앱을 sampleApp경로에 생성합니다.
+ 사용가능한 템플릿 목록확인
다음 명령어를 사용하여 사용가능한 템플릿의 목록을 볼 수 있습니다.
> ares-generate -l
저희는 그중에서 가장 기본 템플릿인 webapp을 사용하도록 하겠습니다.
ares-generate를 사용하여 웹앱을 생성하면 app id를 입력하라고 뜹니다. com.domain.app의 형식으로 원하는 id를 작성합니다. 이어서 title과 version까지 입력해 줍니다. title은 sampleApp으로, version은 디폴트값인 1.0.0으로 지정해주었습니다.
웹앱을 생성한 후, 경로에 가보면 sampleApp이라는 폴더가 생성되었고 폴더 안에 appinfo.json, icon.png, index.html파일이 생성됩니다.
index.html파일을 열어보면 위와 같은 화면이 나타나는 것을 확인할 수 있습니다.
vscode를 사용하면 index.html, appinfo.json의 코드를 확인 및 수정할 수 있습니다.
위에서 확인한 화면이 html, css, javascript로 코드가 짜여진 것을 확인할 수 있습니다.
웹앱을 만들 때 설정했던 id, title 등을 변경할 수 있습니다.
2. web application 패키징하기
컴퓨터에서 웹앱을 생성한 후 webOS에서 설치하기 위해 ipk파일로 패키징을 해야합니다.
- ares-package
> ares-package <App Name>
ares-package명령어를 사용하여 sampleApp을 패키징을 진행합니다.
패키징이 완료되면 com.sample.app_1.0.0_all.ipk 라는 ipk파일이 생성됩니다.
3. web application 설치하기
생성된 ipk파일을 webOS에 설치해보겠습니다.
- ares-install
> ares-install --device <TARGET DEVICE> ./com.domain.app_1.0.0_all.ipk
ares-install --device를 입력하고 타겟디바이스를 입력해야 합니다. Target Device 등록하기에서 등록한 디바이스의 이름을 입력하고 설치할 ipk파일의 이름을 입력합니다.
ipk파일 입력시 경로를 입력하고 com까지 입력한 후 tab키를 누르면 자동완성이 됩니다.
성공적으로 web application이 설치가 완료되었습니다.
설치가 완료되면 webOS메뉴에 저희가 만든 sampleApp이 추가된 것을 확인할 수 있습니다.
4. web application 실행하기
추가된 sampleApp을 눌러서 실행해보겠습니다.
index.html파일의 화면이 성공적으로 실행된 것을 확인할 수 있습니다.
index.html파일의 코드를 수정한 후 다시 패키징하고 설치한 후 실행하면 수정한 화면이 web application에 나타납니다.
이제 원하는 앱을 만들어보세요!
+ CLI로 어플리케이션 실행하기
- ares-lauch
> ares-launch -d raspberrypi4 com.domain.appapp을 클릭해서 실행할 수도 있지만 CLI를 이용해서 실행시킬 수도 있습니다.
코드를 입력하면 위와 같은 결과가 나오는 것을 확인할 수 있습니다.
web application 삭제하기
> ares-install -d <TARGET DEVICE> -l위의 코드를 통해 디바이스에 설치된 앱 목록을 확인할 수 있습니다.
현재 com.sample.app이 설치되어 있는 것을 확인할 수 있습니다.
이 어플리케이션을 삭제해보겠습니다.
> ares-install -d raspberry4 -r com.domain.app-r을 입력한 후 삭제할 앱을 입력합니다.
성공적으로 제거되었다는 알림이 뜹니다.
설치한 web app이 성공적으로 제거된 것을 확인할 수 있습니다.
'webOS Article > 1. Web Application 개발하기' 카테고리의 다른 글
| React로 Application 만들기 (1) | 2021.07.19 |
|---|---|
| Enact를 이용하여 webOS web app 만들기 2 (0) | 2021.07.19 |
| Enact를 이용하여 webOS web app 만들기 1 (0) | 2021.07.10 |
| webOS web App의 메타파일 (0) | 2021.07.04 |
| web application이란 무엇인가? (0) | 2021.06.26 |