A built-in web app is a web app that is installed with the webOS OSE platform at build time.
Downloadable vs. Built-In
In webOS OSE, apps and services can be classified into two types based on how they are installed on the target device.
Downloadable apps/services are installed by the appinstalld service. The appinstalld service creates webOS configurations based on files created by developers. (such as trust level) Developers can modify only certain parts of the app/service settings.
Built-in apps/services are built and installed by developers. Developers can customize app/service’s configurations to suit their needs.
This tutorial shows a step-by-step guide for creating a built-in web app from scratch.
Note In this section, there are a lot of contents about modifying recipe files. For more about the recipe files, refer to the Yocto Project Reference Manual.
Note You don’t need to go to the Step 03. Installing the App. You’ve already installed the app on the webOS OSE platform.
Step 03. Installing the App
This step describes how to install the .ipk file you’ve built in App Alone.
Copy the .ipk file to the target device.
scp <PATH TO IPK FILE> root@<TARGET DEVICE IP ADDRESS>:/media/internal/downloads/
Connect to the target device.
ssh root@<TARGET DEVICE IP ADDRESS>
Move into the /media/internal/downloads/ directory and install the .ipk file.
root@raspberrypi4-64:~# cd /media/internal/downloads/
root@raspberrypi4-64:/media/internal/downloads# opkg install com.example.app.web_1.0.0-r0.local0_raspberrypi4_64.ipk
Installing com.example.app.web (1.0.0) on root.
Configuring com.example.app.web.
No image conversions needed for com.example.app.web
Reboot the device.
reboot -f
After rebooting the device, you can see the app icon in the Launchpad.
Appendix. Code Explanation
This section briefly explains the sample codes used in this tutorial.
Line (1): The section where packages should be categorized.
Line (2~3): License information for the app.
Line (5): The version of the component. Every webOS component must contain this.
Line (6): The revision of the recipe. Unless you’re changing the WEBOS_VERSION or just adding a comment, you should increment this value each time you modify the recipe.
Line (8~12): Inherits from other classes.
Line (8): Common webOS functions. Every webOS component must contain this.
Line (9): Inherits webos_submissions to check the version information set correctly. This field is required if you develop your component on a local repository.
Line (10): Uses CMake for component’s configuration.
Line (11): For apps, this field is required.
Line (12): Inherits this class if the component is independent of CPU architecture (such as a web app). Make sure that the project field in the CMake is set as NONE (e.g., project(com.example.app.web NONE)). If not, CMake will try to find the C and C++ compilers. This might cause build failure because your component will be built before the toolchain.
Line (14): Defines files included in the package. ${webos_applicationsdir} indicates /usr/palm/applications. ${PN} is the package name (com.example.app.web).
webos-local.conf
1
2
3
4
INHERIT += "externalsrc"
EXTERNALSRC:pn-<APP ID> = "<PATH TO THE APP DIRECTORY>/"
EXTERNALSRC_BUILD:pn-<APP ID> = "<PATH TO THE APP DIRECTORY>/build/"
PR:append:pn-<APP ID> =".local0"
A brief explanation of the above file:
Line (1): Inherits the externalsrc.bbclass file.
Line (2): Specifies the path to the app directory.
<APP ID>: The app ID specified in the appinfo.json file.
<PATH TO THE APP DIRECTORY>: The root directory of the app where the appinfo.json file is located. You must use the absolute path.
Line (3): Specifies the build directory. The build directory is located under the app directory.
Line (4): The revision for local source builds. This line is optional.
CMake is a tool for supporting cross-platform build. Developers configure prerequisites and build steps in CMakeLists.txt, and then CMake reads this file, creates the build system, and builds the project.
CMakeLists.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
cmake_minimum_required(VERSION2.8.7)project(com.example.app.webNONE)include(webOS/webOS)webos_modules_init(100QUALIFIERRC4)set(INSTALL_DIR${WEBOS_INSTALL_WEBOS_APPLICATIONSDIR}/${CMAKE_PROJECT_NAME})#install necessary files to destination directory
install(DIRECTORY.DESTINATION${INSTALL_DIR}PATTERN"*~"EXCLUDEPATTERN"CMake*"EXCLUDEPATTERN"build*"EXCLUDEPATTERN"README.md"EXCLUDEPATTERN"oe-*"EXCLUDEPATTERN"*.lock"EXCLUDE)
A brief explanation of the above file:
Line (1): Sets the minimum required version of CMake for a project.
Line (2): Sets a name for the project. The second value (NONE) disables all checks for any programming language.
Line (3): Includes webOS modules for the build.
Line (4): Specifies the “cmake-modules-webos” version.
Line (6): Sets a path to install the app. WEBOS_INSTALL_WEBOS_APPLICATIONSDIR is set to /usr/palm/applications/ by default.
Line (8~14): Installs required files to INSTALL_DIR on the target device. Excludes the files that do not need to be installed on the target device.
<!DOCTYPE html><html>
<head>
<title>Example Web App</title>
<styletype="text/css">
...</style>
<scripttype="text/javascript">
var bridge =new WebOSServiceBridge();
var url ='luna://com.webos.service.systemservice/clock/getTime';
var params ='{}';
function callback(msg){
var arg = JSON.parse(msg);
if (arg.returnValue) {
webOSSystem.PmLogString(6, "GETTIME_SUCCESS", '{"APP_NAME": "example web app"}', "UTC : "+ arg.utc);
}
else {
webOSSystem.PmLogString(3, "GETTIME_FAILED", '{"APP_NAME": "example web app"}', "errorText : "+ arg.errorText);
}
}
bridge.url = url;
bridge.onservicecallback = callback;
bridge.call(url, params);
</script>
</head>
<body>
<div>
<h1>Hello, Web Application!!</h1>
</div>
</body>
</html>
A brief explanation of the above file:
Line (11): Creates a WebOSServiceBridge object. This object has methods and properties to use LS2 APIs. For more details, see WebOSServiceBridge API Reference.
Line (12): Stores an LS2 method URL. For the full list of LS2 APIs, see LS2 API List.
Line (15~23): The callback function for the LS2 API call. In this tutorial, the callback function prints the return value of the API call (current time) using PmLogLib. See Using PmLogLib in JavaScript.
Line (26): Sets the callback function for the LS2 API call.
Line (27): Calls the LS2 API specified in the url and params variables.
README.md
This file provides overall information about the app.
Caution
If the README.md file is missing, a build error occurs.
Make sure the ‘Summary’ section is a single line. Even any whitespace at the line above the ‘Description’ section is considered a part of the summary and can cause the build to fail.
Summary
-------
web app sample
Description
-----------
web app sample
How to Build on Linux
---------------------
## Dependencies
Below are the tools and libraries (and their minimum versions) required to build sample program:
* cmake (version required by cmake-modules-webos)
* gcc
* glib-2.0
* make
* cmake-modules-webos
## Building
$ cd build-webos
$ source oe-init-build-env
$ bitbake com.example.app.web
Copyright and License Information
=================================
Unless otherwise specified, all content, including all source code files and
documentation files in this repository are:
Copyright (c) 2020 LG Electronics, Inc.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
SPDX-License-Identifier: Apache-2.0
