gugeonmo/webos-studio

webOS Studio

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
  • Creating an App/Service
  • Modifying the Source Code
  • Adding Known Devices
  • Packaging / Installing / Launching
  • Debugging the App/Service
  • Previewing the App (Web and Enact)
  • Running ESLint on the Enact App
• Other Features
  • Project Wizard
  • Auto-Completion
  • Emulator Manager
  • IPK Analyzer
• Command Palette
• Miscellaneous Information
• References
• Contributors
• Copyright and License Information

---

Note: Some features of this extension are originated from the webOS TV extension.

Prerequisites

• 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/.

Workspace Setup

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.

Basic Usage

This section explains a typical development flow of webOS apps and services using this extension.

Creating an App/Service

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.

1. Click the + button in the APPS IN WORKSPACE tab.

   

2. 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.

Modifying the Source Code

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:

Adding Known Devices

The known device is a webOS device that user can access to.

Note: This step is required only once per device.

1. 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.

2. Enter the name and IP address of your webOS device.

   

3. Set the device as the default device. This ensures that all device operations are performed on that device.

   

Packaging / Installing / Launching

Typical steps to install webOS apps are as follows:

1. Package the source code into an .ipk file.
2. Install the IPK file.
3. 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.

Debugging the App/Service

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.

Prerequisities

• 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.

How to Start a webOS Debugging Session

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.

Previewing the App (Web and Enact)

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.

Running ESLint on the Enact App

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.

Other Features

Project Wizard

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.

Auto-Completion

This features provides the auto-completion using the following trigger strings:

• luna://
• new LS2Request

'luna://' Strings

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.

new LS2Request

Type new LS2Request to use webos Library of Enact. Using the Ctrl + Space keys, you can check the list of supported methods.

Emulator Manager

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.

Prerequisites

• 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

How to Manage Emulator Images

1. Click the + button in the EMULATOR MANAGER tab.

   

2. Fill in the input form. For the other system requirements, refer to Emulator User Guide.

   

3. Click Add Instance and the created instance is listed in the EMULATOR MANAGER tab.

   

4. 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.

IPK Analyzer

You can analyze the file size of the app or services in the IPK file.

1. Open the Command Palette (Ctrl+Shift+P) and type webOS OSE: IPK Analyzer.

2. Click Import IPK.

3. Choose the IPK file to analyze. After the file is loaded, you can see the following screen:

   

4. Click the Compare IPK button to load another IPK. (For example, the older version of the original file)

   

Command Palette

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.

Miscellaneous Information

• 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)

References

• FAQ
• Forum

Contributors

• [email protected]
• [email protected]
• [email protected]
• [email protected]
• [email protected]
• [email protected]
• [email protected]
• [email protected]

Copyright and License Information

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