This extension helps develop apps and services for webOS Open Source Edition (OSE).
IMPORTANT NOTICE: If you installed the webOS OSE extension, please uninstall it first. Then install this extension.
Table of Contents
- Prerequisites
- Workspace Setup
- Basic Usage
- Other Features
- Command Palette
- Miscellaneous Information
- References
- Contributors
- Copyright and License Information
Note: Some features of this extension are originated from the webOS TV extension.
- Microsoft Visual Studio Code v1.58.0 or higher
- Node.js from v8.12.0 to v14.15.1 (recommended)
- Python 3.6 or higher (Only for Emulator)
- VirtualBox (Only for Emulator)
- Basic understanding of webOS web app, Enact app, and JavaScript service development. Refer to www.webosose.org/docs/tutorials/.
Before creating your first project, we recommend that you set a workspace โ it's a kind of base directory of multiple projects โ for all your webOS apps/services. All projects contained within the workspace are shown in the APPS IN WORKSPACE tab. This will make managing your projects more effectively.
A workspace can be set up in one of two ways:
- Navigate to File > Open Folder and select a directory. This directory is set up as the workspace.
- When creating an app/service using this extension, the Project Location is automatically set up as the workspace.
This section explains a typical development flow of webOS apps and services using this extension.
Note: If you failed to create an app or service, please do the followings:
- Execute
webOS OSE: Install Global Packages
in the Command Palette (Ctrl + Shift + P).- Update
npm
to the latest version.
-
Click the + button in the APPS IN WORKSPACE tab.
-
Select the project type in Command Palette, and enter the information depending on your type.
Some types need additional steps. Check the following table:
Type Description Enact app For UI components for the Enact app, you can choose either sandstone or moonstone library. JavaScript Service A JavaScript service always needs an app to be packaged with. Choose an app or click Choose a Different App. Enact app & JavaScript service If you want to webos-service library and the content assistant feature for the library, click Yes.
Or you can add this library after you create the app or service. In the APPS IN WORKPLACE tab, right-click your app or service and click Insatll webOS NPM Library.Hosted web app Enter the URL to show.
Now that the app or service is created, update (implement) the source code for the project.
The extension also provides the content assist feature for Enact apps (for webOS LS2 APIs and Enact APIs) and JavaScript services (for webOS LS2 APIs). This means if the developer types a keyword, through the content-assist feature, the API syntax and documentation (if available) are shown:
The known device is a webOS device that user can access to.
Note: This step is required only once per device.
-
Click the + button in the KNOWN DEVICE tab.
Note: By default, a dummy emulator device is listed in the tab. If no emulator is available on your computer, see the guides in the Emulator Manager section.
-
Enter the name and IP address of your webOS device.
-
Set the device as the default device. This ensures that all device operations are performed on that device.
Typical steps to install webOS apps are as follows:
- Package the source code into an
.ipk
file. - Install the IPK file.
- Launch the installed app.
The above three steps are triggered sequentially by clikcin the Run App button in the APPS IN WORKSPACE tab.
Then, enter the information about the app.
Note: A JavaScript service is always packaged with an app. If you want to install a JavaScript service, select the service in the Sevice directory to pack with App step.
You can uninstall the apps in the KNOWN DEVICE tab.
Or You can uninstall the app manually using the appInstallService API or webOS OSE CLI.
You can debug web apps, Enact apps, and JavaScript services that are installed on the device (or emulator).
Note: This guide only describes how to start a debugging session and its basic usage. For more details on how to debug on VS Code, refer to the official guide.
- Google Chrome browser must be available/installed on the local system.
- IP address of target device (or emulator) and IDE should be in the same network for debugging.
Right-click an installed app or service and click Debug App/Service. After a while, a debugging session will be enabled.
In the DEBUG CONSOLE panel, you can check the console messages from the app or service.
After a while, the Run and Debug view is automatically opened. In the view, you can check variables, callstack, etc.
Note:
- If the Run and Debug view is not opened, navigate to View > Open View... and select Run and Debug.
- If the debugging session is not launched, close all running apps on the webOS device and re-try to click Debug App/Service.
- (very unlikely to occur) You might get a notification indicating that a debug session is already active, even when all debug sessions are closed. To resolve this issue, restart the IDE and try debugging again.
You can preview web apps or Enact apps in your VS Code before installing it.
In the APPS IN WORKSPACE tab, right-click the app and click App Preview.
An App Preview page is automatically launched.
Note: Only one app can be previewed at the same time. If another app preview is launched, the new preview is launched in the existing tab.
ESLint statically analyzes files for potential errors (or warnings) and helps enforce a common coding style. For more information, check ESLint Configurations.
In the APPS IN WORKSPACE tab, right-click the React app and click Run Lint. The PROBLEMS panel shows the result messages.
To clean the Lint messages from the panel, click Clear Lint.
You can generate various templates for webOS apps or services.
Note: To use webos-service library in JavaScript service or Enact app projects, check the Yes button for Add webOS library.
This features provides the auto-completion using the following trigger strings:
luna://
new LS2Request
Type one of the following texts to call LS2 APIs.
luna://
'luna://'
"luna://"
You can also use the Tab key to auto-complete input strings.
Note: If the auto-completion with the Tab key doesn't work, please check the Tab Completion setting is on.
Type new LS2Request
to use webos Library of Enact. Using the Ctrl + Space
keys, you can check the list of supported methods.
You can manage webOS emulator (VirtualBox) images in VS Code. By default, any webOS emulator images installed in VirtualBox are listed in the EMULATOR MANAGER tab.
-
VirtualBox must be installed on your computer. (Supported version: 6.1 or higher)
-
webOS emulator image (
.vmdk
) is required. For how to make the image, refer to Emulator User Guide. -
Emulator Launcher is required. Enter the following command to install it:
python3 -m pip install --upgrade webos-emulator --force-reinstall
-
Click the + button in the EMULATOR MANAGER tab.
-
Fill in the input form. For the other system requirements, refer to Emulator User Guide.
-
Click Add Instance and the created instance is listed in the EMULATOR MANAGER tab.
-
Click the Run App button (triangle) to run the emulator. This action will launch a new a VirtualBox window.
To stop or close an emulator instance, close the running VirtualBox window.
Note:
- Multiple emulator instances cannot use the same VMDK file.
- Only one emulator instance can bb launched at the same time.
- When deleting an emulator instance, the associated VMDK file is also DELETED. Make sure that the VMDK file is safely backed up.
You can analyze the file size of the app or services in the IPK file.
-
Open the Command Palette (Ctrl+Shift+P) and type webOS OSE: IPK Analyzer.
-
Click Import IPK.
-
Choose the IPK file to analyze. After the file is loaded, you can see the following screen:
-
Click the Compare IPK button to load another IPK. (For example, the older version of the original file)
Category | Command | Description |
---|---|---|
Project Wizard | webOS OSE: Create Project Wizard | Generates source code templates. |
Developing apps/services | webOS OSE: Install Global Packages | Installs essential global packages to run this extension. |
webOS OSE: Generate Project | Creates a web app, Enact App, JavaScript Service from a template. | |
webOS OSE: Package Application | Packages the app into a package file (IPK). | |
Connecting devices | webOS OSE: Set Up Device | Adds, modifies, or removes devices from the device list. |
Testing apps on the device | webOS OSE: Install Application | Installs an app on the device. |
webOS OSE: Launch Application | Runs an app installed on the device. | |
Batch commands | webOS OSE: Run Application | Package, Install, and Launch operations are executed sequentially. |
webOS OSE: Debug Application | Package, Install, and Inspect operations are executed sequentially. | |
Analyzing an IPK | webOS OSE: IPK Analyzer | Analyzes a selected IPK. |
- When the IDE is opened, a notification indicates the VirtualBox is not installed, even when VirtualBox is in fact installed and working properly. To resolve this, update the environment path variable to point to the VirtualBox installation directory.
- If you want to report bugs or suggest some features, use Issue Reporter. (Help > Report Issue)
- [email protected]
- [email protected]
- [email protected]
- [email protected]
- [email protected]
- [email protected]
- [email protected]
- [email protected]
Unless otherwise specified, all content, including all source code files and documentation files in this repository are:
Copyright (c) 2021-2022 LG Electronics, Inc.
All content, including all source code files and documentation files in this repository except otherwise noted are:
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