diff --git a/content/en/blog/posts/2020-06-11-launching-a-web-app-on-a-secondary-display.md b/content/en/blog/posts/2020-06-11-launching-a-web-app-on-a-secondary-display.md
index 4cd4ecd8..c99baf43 100644
--- a/content/en/blog/posts/2020-06-11-launching-a-web-app-on-a-secondary-display.md
+++ b/content/en/blog/posts/2020-06-11-launching-a-web-app-on-a-secondary-display.md
@@ -30,7 +30,7 @@ $ ares-install ./com.dual.webapp.sample_1.0.0_all.ipk -d [your-target-device]
```
{{< note >}}
-For more details on the above procedure, refer to [Developing External Web Apps]({{< relref "developing-external-web-apps" >}}).
+For more details on the above procedure, refer to [Developing Downloadable Web Apps]({{< relref "developing-downloadable-web-apps" >}}).
{{< /note >}}
If the installation succeed, the app card of the installed sample appears in Home Launcher.
diff --git a/content/en/docs/guides/development/configuration-files/security-guide.md b/content/en/docs/guides/development/configuration-files/security-guide.md
index d528c239..c7a5548f 100644
--- a/content/en/docs/guides/development/configuration-files/security-guide.md
+++ b/content/en/docs/guides/development/configuration-files/security-guide.md
@@ -1,6 +1,6 @@
---
title: Security Guide
-date: 2022-12-02
+date: 2024-09-10
weight: 40
toc: true
---
@@ -92,8 +92,8 @@ The following table shows the files related to ACG and trust level.
No need to set up. Trust level is set to OEM automatically. |
- External Service |
- Set up the requiredPermissions property in appinfo.json of the app packaged with the external service. |
+ Downloadable Service |
+ Set up the requiredPermissions property in appinfo.json of the app packaged with the downloadable service. |
Built-in Service |
@@ -103,13 +103,13 @@ The following table shows the files related to ACG and trust level.
-### For Apps and External Services
+### For Apps and Downloadable Services
-If you develop apps or external services, all you need to do is set up the `appinfo.json` file.
+If you develop apps or downloadable services, all you need to do is set up the `appinfo.json` file.
1. Make a list of services --- which can be LS2 APIs or custom services.
2. Find ACG values for each service. See [Appendix. How to Find ACG Values of APIs](#appendix-how-to-find-acg-values-of-apis).
-3. Add the ACG values to the `requiredPermissions` property in `appinfo.json`. In case of external services, use the `appinfo.json` file of the app packaged together with the service.
+3. Add the ACG values to the `requiredPermissions` property in `appinfo.json`. In case of downloadable services, use the `appinfo.json` file of the app packaged together with the service.
4. Then app installer service automatically generates the configuration files during installation of your app or service.
The following example shows how to set up an ACG value at the `appinfo.json` file. This app can access to services whose ACG value is `acg3`.
diff --git a/content/en/docs/guides/development/js-services/js-service-development-workflow.md b/content/en/docs/guides/development/js-services/js-service-development-workflow.md
index cf7d64ee..61119c1b 100644
--- a/content/en/docs/guides/development/js-services/js-service-development-workflow.md
+++ b/content/en/docs/guides/development/js-services/js-service-development-workflow.md
@@ -1,19 +1,19 @@
---
title: JS Service Development Workflow
-date: 2018-05-12
+date: 2024-09-10
weight: 20
toc: true
---
This page outlines the steps to develop JS services for webOS Open Source Edition (OSE).
-## External JS Services
+## Downloadable JS Services
-To develop an external JS service, the Command-Line Interface (CLI) tool is used.
+To develop a downloadable JS service, the Command-Line Interface (CLI) tool is used.
In general, the steps described in [CLI Workflow]({{< relref "cli-user-guide#cli-workflow" >}}) are applied.
-For a step-by-step tutorial, see [Developing External JS Services]({{< relref "developing-external-js-services" >}}).
+For a step-by-step tutorial, see [Developing Downloadable JS Services]({{< relref "developing-downloadable-js-services" >}}).
## Built-in JS Services
diff --git a/content/en/docs/guides/development/js-services/js-service-overview.md b/content/en/docs/guides/development/js-services/js-service-overview.md
index d5ee928f..dda6fb38 100644
--- a/content/en/docs/guides/development/js-services/js-service-overview.md
+++ b/content/en/docs/guides/development/js-services/js-service-overview.md
@@ -1,6 +1,6 @@
---
title: Overview
-date: 2018-05-12
+date: 2024-09-10
weight: 10
toc: true
---
@@ -30,7 +30,7 @@ Node.js was originally created as a framework for server-side JavaScript applica
In a webOS system, JS services are categorized by the packaging/delivery method as follows:
-- **External JS Service**
+- **Downloadable JS Service**
- The JS service is installed on the webOS target device.
- This approach helps 3rd party developers to create a JS service running on webOS devices.
- **Built-in JS Service**
@@ -38,5 +38,5 @@ In a webOS system, JS services are categorized by the packaging/delivery method
- This approach is used by platform developers and contributors to add a JS service that enhances the functionality of the platform.
{{< note >}}
-Currently, an external JS service must be packaged within a web app.
+Currently, a downloadable JS service must be packaged within a web app.
{{< /note >}}
diff --git a/content/en/docs/guides/development/native-apps/native-app-development-workflow.md b/content/en/docs/guides/development/native-apps/native-app-development-workflow.md
index 9d55030d..a44ec455 100644
--- a/content/en/docs/guides/development/native-apps/native-app-development-workflow.md
+++ b/content/en/docs/guides/development/native-apps/native-app-development-workflow.md
@@ -1,15 +1,15 @@
---
title: Native App Development Workflow
-date: 2020-01-17
+date: 2024-09-10
weight: 20
toc: true
---
This page outlines the steps to develop native apps for webOS Open Source Edition (OSE).
-## External Native Apps
+## Downloadable Native Apps
-Developing an external native app requires the following steps:
+Developing a downloadable native app requires the following steps:
1. Implement
@@ -33,7 +33,7 @@ Developing an external native app requires the following steps:
- Installing the app on the target using the CLI
- Launching the app
-For a step-by-step tutorial with detailed instructions, see [Developing External Native Apps]({{< relref "developing-external-native-apps" >}}).
+For a step-by-step tutorial with detailed instructions, see [Developing Downloadable Native Apps]({{< relref "developing-downloadable-native-apps" >}}).
## Built-in Native Apps
diff --git a/content/en/docs/guides/development/native-services/native-service-development-workflow.md b/content/en/docs/guides/development/native-services/native-service-development-workflow.md
index 510f71a6..957d42c4 100644
--- a/content/en/docs/guides/development/native-services/native-service-development-workflow.md
+++ b/content/en/docs/guides/development/native-services/native-service-development-workflow.md
@@ -1,15 +1,15 @@
---
title: Native Service Development Workflow
-date: 2020-03-13
+date: 2024-09-10
weight: 20
toc: true
---
This page outlines the steps to develop native services for webOS Open Source Edition (OSE).
-## External Native Services
+## Downloadable Native Services
-Developing an external native service requires the following steps:
+Developing a downloadable native service requires the following steps:
1. Implement
@@ -34,7 +34,7 @@ Developing an external native service requires the following steps:
- Installing the service on the target using the CLI
- Launching the dummy app or entering commands using a terminal
-For a step-by-step tutorial with detailed instructions, see [Developing External Native Services]({{< relref "developing-external-native-services" >}}).
+For a step-by-step tutorial with detailed instructions, see [Developing Downloadable Native Services]({{< relref "developing-downloadable-native-services" >}}).
## Built-in Native Services
diff --git a/content/en/docs/guides/development/qml-apps/qml-app-development-workflow.md b/content/en/docs/guides/development/qml-apps/qml-app-development-workflow.md
index f63a94a4..534a4fb3 100644
--- a/content/en/docs/guides/development/qml-apps/qml-app-development-workflow.md
+++ b/content/en/docs/guides/development/qml-apps/qml-app-development-workflow.md
@@ -1,19 +1,19 @@
---
title: QML App Development Workflow
-date: 2020-01-16
+date: 2024-09-10
weight: 20
toc: true
---
This page outlines the steps to develop QML apps for webOS Open Source Edition (OSE).
-## External QML Apps
+## Downloadable QML Apps
-To develop an external QML app, the Command-Line Interface (CLI) tool is used.
+To develop a downloadable QML app, the Command-Line Interface (CLI) tool is used.
In general, the steps described in [CLI Workflow]({{< relref "cli-user-guide#cli-workflow" >}}) are applied.
-For a step-by-step tutorial, see [Developing External QML Apps]({{< relref "developing-external-qml-apps" >}}).
+For a step-by-step tutorial, see [Developing Downloadable QML Apps]({{< relref "developing-downloadable-qml-apps" >}}).
## Built-in QML Apps
diff --git a/content/en/docs/guides/development/web-apps/web-app-development-workflow.md b/content/en/docs/guides/development/web-apps/web-app-development-workflow.md
index fd27e4db..5e9e4d7a 100644
--- a/content/en/docs/guides/development/web-apps/web-app-development-workflow.md
+++ b/content/en/docs/guides/development/web-apps/web-app-development-workflow.md
@@ -1,19 +1,19 @@
---
title: Web App Development Workflow
-date: 2018-05-12
+date: 2024-09-10
weight: 20
toc: true
---
This page outlines the steps to develop web apps for webOS Open Source Edition (OSE).
-## External Web Apps
+## Downloadable Web Apps
-To develop an external web app, the Command-Line Interface (CLI) tool is used.
+To develop a downloadable web app, the Command-Line Interface (CLI) tool is used.
In general, the steps described in [CLI Workflow]({{< relref "cli-user-guide#cli-workflow" >}}) are applied.
-For a step-by-step tutorial, see [Developing External Web Apps]({{< relref "developing-external-web-apps" >}}).
+For a step-by-step tutorial, see [Developing Downloadable Web Apps]({{< relref "developing-downloadable-web-apps" >}}).
## Built-in Web Apps
diff --git a/content/en/docs/guides/development/web-apps/web-app-overview.md b/content/en/docs/guides/development/web-apps/web-app-overview.md
index 6c30101f..d59b55ed 100644
--- a/content/en/docs/guides/development/web-apps/web-app-overview.md
+++ b/content/en/docs/guides/development/web-apps/web-app-overview.md
@@ -1,6 +1,6 @@
---
title: Overview
-date: 2020-09-29
+date: 2024-09-10
weight: 10
toc: true
---
@@ -28,7 +28,7 @@ For details, see [Architecture Overview]({{< relref "architecture-overview" >}})
In a webOS system, web apps are categorized by the packaging/delivery method as follows:
-- **External Web App**
+- **Downloadable Web App**
- The web app is installed on the webOS target device.
- This approach helps 3rd party developers to create a web app running on webOS devices.
- **Built-in Web App**
diff --git a/content/en/docs/guides/getting-started/hello-webos-ose.md b/content/en/docs/guides/getting-started/hello-webos-ose.md
index 00a17821..f9bbd45b 100644
--- a/content/en/docs/guides/getting-started/hello-webos-ose.md
+++ b/content/en/docs/guides/getting-started/hello-webos-ose.md
@@ -1,6 +1,6 @@
---
title: "Hello, webOS OSE!"
-date: 2022-12-27
+date: 2024-09-10
weight: 10
toc: true
---
@@ -40,18 +40,18 @@ You need to create an image for the desired target and prepare the target enviro
## Your First webOS OSE App
-If you finished setting up the environment, it's time to start developing your first app running on webOS OSE, which will be an external web app.
+If you finished setting up the environment, it's time to start developing your first app running on webOS OSE, which will be a downloadable web app.
### Install CLI
-To develop an external web app, you will use Command-Line Interface (CLI), which is provided as a part of webOS OSE SDK. You can also use CLI to develop external JavaScript (JS) services.
+To develop a downloadable web app, you will use Command-Line Interface (CLI), which is provided as a part of webOS OSE SDK. You can also use CLI to develop downloadable JavaScript (JS) services.
Proceed to [install CLI]({{< relref "cli-user-guide#installing-cli" >}}) for your operating system.
-### Develop the External Web App
+### Develop the Downloadable Web App
-Follow the steps described in the [Developing External Web Apps]({{< relref "developing-external-web-apps" >}}) tutorial.
+Follow the steps described in the [Developing Downloadable Web Apps]({{< relref "developing-downloadable-web-apps" >}}) tutorial.
## What's Next
-* If you are interested in developing an external JS service, which will be packaged along with the web app you've just created, check the [Developing External JS Services]({{< relref "developing-external-js-services" >}}) tutorial.
\ No newline at end of file
+* If you are interested in developing a downloadable JS service, which will be packaged along with the web app you've just created, check the [Developing Downloadable JS Services]({{< relref "developing-downloadable-js-services" >}}) tutorial.
\ No newline at end of file
diff --git a/content/en/docs/guides/setup/bring-up-guide/bring-up-overview.md b/content/en/docs/guides/setup/bring-up-guide/bring-up-overview.md
index 41ba268c..4bb27c2b 100644
--- a/content/en/docs/guides/setup/bring-up-guide/bring-up-overview.md
+++ b/content/en/docs/guides/setup/bring-up-guide/bring-up-overview.md
@@ -1,6 +1,6 @@
---
title: Bring-Up Overview
-date: 2024-03-18
+date: 2024-09-10
weight: 10
toc: true
---
@@ -59,7 +59,7 @@ Once you've done the bring-up process, you can go through the following checklis
1. Swipe up the display and check whether Home Launcher is displayed.
2. Click the apps in Home Launch and check whether the apps are launched properly.
-3. Check whether the sample native app is working properly. For details on how to install and run the sample app, see [Developing External Native Apps](/docs/tutorials/native-apps/developing-external-native-apps/).
+3. Check whether the sample native app is working properly. For details on how to install and run the sample app, see [Developing Downloadable Native Apps](/docs/tutorials/native-apps/developing-downloadable-native-apps/).
{{< note >}}
You can verify the basic operation of LSM, WAM, System and Application Manager (SAM) using the following command:
diff --git a/content/en/docs/guides/setup/setting-up-native-development-kit.md b/content/en/docs/guides/setup/setting-up-native-development-kit.md
index 3cdc1a75..963b7cfb 100644
--- a/content/en/docs/guides/setup/setting-up-native-development-kit.md
+++ b/content/en/docs/guides/setup/setting-up-native-development-kit.md
@@ -1,11 +1,11 @@
---
title: Native Development Kit Setup
-date: 2023-03-28
+date: 2024-09-10
weight: 90
toc: true
---
-To build [external native apps]({{< relref "developing-external-native-apps" >}}) or [services]({{< relref "developing-external-native-services" >}}) for webOS Open Source Edition (OSE), you need to install Native Development Kit (NDK) on your computer.
+To build [downloadable native apps]({{< relref "developing-downloadable-native-apps" >}}) or [services]({{< relref "developing-downloadable-native-services" >}}) for webOS Open Source Edition (OSE), you need to install Native Development Kit (NDK) on your computer.
The NDK is a set of tools that include toolchains, libraries, and header files. This guide describes how to build and install the NDK on your computer.
@@ -94,7 +94,7 @@ Output messages might or might not be displayed depending on your computer's set
## Next Steps
-Now you ready to build external native apps or services. Check the following guides:
+Now you ready to build downloadable native apps or services. Check the following guides:
-- [Developing External Native Apps]({{< relref "developing-external-native-apps">}})
-- [Developing External Native Services]({{< relref "developing-external-native-services">}})
+- [Developing Downloadable Native Apps]({{< relref "developing-downloadable-native-apps">}})
+- [Developing Downloadable Native Services]({{< relref "developing-downloadable-native-services">}})
diff --git a/content/en/docs/home/_index.html b/content/en/docs/home/_index.html
index cdbde011..8e38ce38 100644
--- a/content/en/docs/home/_index.html
+++ b/content/en/docs/home/_index.html
@@ -140,12 +140,12 @@ Documentation Overview
diff --git a/content/en/docs/tools/sdk/cli/cli-release-notes.md b/content/en/docs/tools/sdk/cli/cli-release-notes.md
index a016f562..da981e9c 100644
--- a/content/en/docs/tools/sdk/cli/cli-release-notes.md
+++ b/content/en/docs/tools/sdk/cli/cli-release-notes.md
@@ -1,7 +1,7 @@
---
title: Release Notes
display_title: Command-Line Interface Release Notes
-date: 2024-07-17
+date: 2024-09-10
weight: 20
toc: true
two_depth_toc: true
@@ -429,7 +429,7 @@ This version is compatible with **webOS OSE 2.0.0**. See below for the new, chan
### Known Issues
* When you install or uninstall an app using `ares-install`, a running Home Launcher disappears from the screen. To make the app listed on Home Launcher, you must reboot the target device.
- * After rebooting the target device, the external app is listed on Home Launcher, but the icon of the app is not displayed.
+ * After rebooting the target device, the downloadable app is listed on Home Launcher, but the icon of the app is not displayed.
## v1.9.4 (June 2019)
diff --git a/content/en/docs/tools/sdk/cli/cli-user-guide.md b/content/en/docs/tools/sdk/cli/cli-user-guide.md
index 7de0a879..0e1bdd6c 100644
--- a/content/en/docs/tools/sdk/cli/cli-user-guide.md
+++ b/content/en/docs/tools/sdk/cli/cli-user-guide.md
@@ -1,7 +1,7 @@
---
title: User Guide
display_title: Command-Line Interface User Guide
-date: 2024-07-18
+date: 2024-09-10
weight: 10
toc: true
---
@@ -152,7 +152,7 @@ $ ares-config --profile ose
## How to Use
-With the CLI, you can develop various types of external apps or services. For detailed instructions, refer to the each tutorial.
+With the CLI, you can develop various types of downloadable apps or services. For detailed instructions, refer to the each tutorial.
@@ -164,33 +164,33 @@ With the CLI, you can develop various types of external apps or services. For de
- External Web Apps |
+ Downloadable Web Apps |
- See the }}">Developing External Web Apps.
+ See the }}">Developing Downloadable Web Apps.
|
- External JS Services |
+ Downloadable JS Services |
- See the }}">Developing External JS Services.
+ See the }}">Developing Downloadable JS Services.
|
- External QML Apps |
+ Downloadable QML Apps |
- See the }}">Developing External QML Apps.
+ See the }}">Developing Downloadable QML Apps.
|
- External Native Apps |
+ Downloadable Native Apps |
- See the }}">Developing External Native Apps.
+ See the }}">Developing Downloadable Native Apps.
|
- External Native Services |
+ Downloadable Native Services |
- See the }}">Developing External Native Services.
+ See the }}">Developing Downloadable Native Services.
|
@@ -966,19 +966,19 @@ Here are some examples of the different uses:
ares-package -e "testCode1" -e "README.md" -e "*.txt" samplePrj
```
-* Creating a package file with an external JS service
+* Creating a package file with a downloadable JS service
```shell
ares-package sampleApp sampleService
```
-* Creating a package file with multiple external JS services
+* Creating a package file with multiple downloadable JS services
```shell
ares-package sampleApp sampleServiceA sampleServiceB
```
-* Creating a package file with an external JS service (using absolute path)
+* Creating a package file with a downloadable JS service (using absolute path)
```shell
# Windows
diff --git a/content/en/docs/tutorials/_index.md b/content/en/docs/tutorials/_index.md
index 48dc4a96..ca7f7beb 100644
--- a/content/en/docs/tutorials/_index.md
+++ b/content/en/docs/tutorials/_index.md
@@ -1,7 +1,7 @@
---
title: Tutorials
section_main: true
-date: 2020-02-14
+date: 2024-09-10
weight: 30
---
@@ -15,25 +15,25 @@ This section provides end-to-end, step-by-step tutorials for developers to achie
## Web Apps
-* [Developing External Web Apps]({{< relref "developing-external-web-apps" >}})
+* [Developing Downloadable Web Apps]({{< relref "developing-downloadable-web-apps" >}})
* [Developing Built-in Web Apps]({{< relref "developing-built-in-web-apps" >}})
## JS Services
-* [Developing External JS Services]({{< relref "developing-external-js-services" >}})
+* [Developing Downloadable JS Services]({{< relref "developing-downloadable-js-services" >}})
* [Developing Built-in JS Services]({{< relref "developing-built-in-js-services" >}})
## QML Apps
-* [Developing External QML Apps]({{< relref "developing-external-qml-apps" >}})
+* [Developing Downloadable QML Apps]({{< relref "developing-downloadable-qml-apps" >}})
* [Developing Built-in QML Apps]({{< relref "developing-built-in-qml-apps" >}})
## Native Apps
-* [Developing External Native Apps]({{< relref "developing-external-native-apps" >}})
+* [Developing Downloadable Native Apps]({{< relref "developing-downloadable-native-apps" >}})
* [Developing Built-in Native Apps]({{< relref "developing-built-in-native-apps" >}})
## Native Services
-* [Developing External Native Services]({{< relref "developing-external-native-services" >}})
+* [Developing Downloadable Native Services]({{< relref "developing-downloadable-native-services" >}})
* [Developing Built-in Native Services]({{< relref "developing-built-in-native-services" >}})
diff --git a/content/en/docs/tutorials/js-services/developing-built-in-js-services.md b/content/en/docs/tutorials/js-services/developing-built-in-js-services.md
index c5221d73..7eb2ffb4 100644
--- a/content/en/docs/tutorials/js-services/developing-built-in-js-services.md
+++ b/content/en/docs/tutorials/js-services/developing-built-in-js-services.md
@@ -1,6 +1,7 @@
---
-title: Developing Built-in JS Services
-date: 2024-01-29
+title: Built-in JS Services
+display_title: Developing Built-in JS Services
+date: 2024-09-10
weight: 20
toc: true
---
@@ -157,7 +158,7 @@ This section describes how to prepare the configuration files required to build
### package.json
-This file configures the service metadata and points to the main service file. It is required for packaging (related with Node.js) and must be located in the project root directory. For more details, see [Creating JS services]({{< relref "developing-external-js-services#creating-js-services" >}}).
+This file configures the service metadata and points to the main service file. It is required for packaging (related with Node.js) and must be located in the project root directory. For more details, see [Creating JS services]({{< relref "developing-downloadable-js-services#creating-js-services" >}}).
{{< code "package.json" >}}
``` json
diff --git a/content/en/docs/tutorials/js-services/developing-downloadable-js-services.md b/content/en/docs/tutorials/js-services/developing-downloadable-js-services.md
new file mode 100644
index 00000000..5b3b9e05
--- /dev/null
+++ b/content/en/docs/tutorials/js-services/developing-downloadable-js-services.md
@@ -0,0 +1,344 @@
+---
+title: Downloadable JS Services
+display_title: Developing Downloadable JS Services
+date: 2024-09-10
+weight: 10
+toc: true
+---
+
+A **downloadable JavaScript (JS) service** is a 3rd party JS service that can be installed on the webOS target device.
+
+{{< note "Downloadable vs. Built-In" >}}
+In webOS OSE, apps and services are divided into two categories: downloadable and built-in.
+
+- **Downloadable** apps/services are installed by appinstalld service. This service automatically generates several configurations for the apps/services. (such as trust level)
+- **Built-in** apps/services are built and installed by developers. Developers can **customize** configurations to suit their needs.
+{{< /note >}}
+
+This tutorial shows a step-by-step guide for creating a downloadable JS service from scratch.
+
+## Prerequisites
+
+Before you begin, you must install the [Command-Line Interface (CLI)](https://github.com/webos-tools/cli).
+
+The CLI enables you to create, install, and launch apps or services using in a command-line environment.
+
+{{< note >}}
+If you already installed Node.js & CLI and registed your target device, you can skip this section.
+{{< /note >}}
+
+1. Install [Node.js](https://nodejs.org/en/download) (Recommended version: v16.20.2).
+2. Install the CLI.
+
+ ``` bash
+ sudo npm install -g @webos-tools/cli
+ ```
+
+3. Change the profile.
+
+ ``` bash
+ ares-config --profile ose
+ ```
+
+4. After installing the CLI, you must register your target device. Enter the `ares-setup-device` command to start an interactive mode:
+
+ {{< note >}}
+ In the interactive mode, pressing the **Enter** key means to use the default value.
+ {{< /note >}}
+
+ ``` bash
+ document@document:~$ ares-setup-device
+ name deviceinfo connection profile
+ ------------------ ------------------------ ---------- -------
+ emulator (default) developer@127.0.0.1:6622 ssh ose
+
+
+ ** You can modify the device info in the above list, or add new device.
+ ? Select add # Select 'add'.
+ ? Enter Device Name: webos # The nickname of your target device. Use the short name.
+ ? Enter Device IP address: 127.0.0.1 # The IP address of your target device
+ ? Enter Device Port: 22 # Just press the Enter key. Do not change this value.
+ ? Enter ssh user: root # Just press the Enter key. Do not change this value.
+ ? Enter description: new device # Descriptions about your target device
+ ? Select authentication password # Select 'password'
+ ? Enter password: [hidden] # Leave it blank (Press the Enter key).
+ ? Set default ? No # Enter 'y' if you want to set this device as the default device.
+ ? Save ? Yes # Enter 'Yes'.
+
+ name deviceinfo connection profile
+ ------------------ ------------------------ ---------- -------
+ webos root@127.0.0.1:22 ssh ose
+ emulator (default) developer@127.0.0.1:6622 ssh ose
+ ```
+
+## Step 01. Creating a Dummy App and Service
+
+Let's get started by creating a dummy app and service from templates. CLI provides various templates for webOS apps and services.
+
+### App
+
+webOS OSE's service requires an app to be packaged with. In this tutorial, we will use a web app.
+
+Enter the following command:
+
+``` bash
+# Comannd format
+# ares-generate -t
+ares-generate -t webapp sampleApp
+```
+
+{{< note >}}
+For more details about CLI commands, refer to [CLI User Guide]({{< relref "cli-user-guide" >}}).
+{{< /note >}}
+
+### JS Service
+
+Enter the following command:
+
+``` bash
+# Comannd format
+# ares-generate -t
+ares-generate -t js_service sampleService
+```
+
+If the command succeeds, the following directory will be generated under the current directory:
+
+```
+sampleService/
+|---- helloclient.js
+|---- helloworld_webos_service.js
+|---- package.json
+|---- services.json
+```
+
+Descriptions for each file are as follows:
+
+| File | Description |
+| ---- | ----------- |
+| helloclient.js | A sample service that subscribes to the `helloworld_webos_service.js` service. This sample shows how services communicate with each other. |
+| helloworld_webos_service.js | A sample service that provides several simple methods |
+| package.json | Configuration file for [NPM](https://www.npmjs.com/). See also [Creating a package.json file \| npm Docs](https://docs.npmjs.com/getting-started/using-a-package.json). |
+| index.html | The main page of the web app |
+
+## Step 02. Packaging the Service
+
+To install the service, you have to package the service with an app first.
+
+Enter the following command:
+
+``` bash
+# Command format
+# ares-package
+ares-package sampleApp sampleService
+```
+
+If the command succeeds, an `.ipk` file will be generated under the current directory.
+
+``` bash
+# Generated .ipk file
+# com.domain.app is an ID of the dummy app
+com.domain.app_1.0.0_all.ipk
+```
+
+## Step 03. Installing the Service
+
+It's time to install your package to the target device.
+
+Enter the following command:
+
+``` bash
+# Command format
+# ares-install --device
+ares-install --device webos com.domain.app_1.0.0_all.ipk
+```
+
+## Step 04. Testing the Service
+
+You can check whether the service is running or not.
+
+Enter the following command:
+
+``` bash
+# Command format
+# ares-shell -r "luna-send -n 1 -f luna:/// ''" --device
+ares-shell -r "luna-send -n 1 -f luna://com.domain.app.service/hello '{\"name\":\"webOS\"}'" --device webos
+```
+
+In the above command,
+
+- `` is the service name defined in `services.json` and `package.json`.
+- `` is one of the method's names defined in the main service file.
+- `` is a JSON string containing the method's input parameters.
+- `` is the nickname of the target device set by `ares-setup-device`.
+
+If the command succeeds, the target device returns the following message:
+
+``` bash
+# Return
+{
+ "returnValue": true,
+ "Response": "Hello, webOS!"
+}
+```
+
+Since this JS service is dynamic, it will be terminated automatically after a certain amount of time (5 seconds). For more information about the dynamic service, see [Static and Dynamic Services]({{< relref "native-service-overview#static-and-dynamic-services" >}}).
+
+## Debugging the Service
+
+Node’s Inspector is used to debug a JS service.
+
+By communicating with it on the host machine, Node’s Inspector lets you observe variable values and control JavaScript execution.
+
+{{< note >}}
+- Please do not be confused with the legacy node-inspector, which has been deprecated as of Node 7.7.0. See [Legacy Debugger | Node.js](https://nodejs.org/en/docs/guides/debugging-getting-started/#legacy-debugger) for details.
+- For more information on Node.js debugging using the Inspector, refer to the [Debugging Guide | Node.js](https://nodejs.org/en/docs/guides/debugging-getting-started/).
+{{< /note >}}
+
+To start the Inspector on a webOS device, use the `ares-inspect` command. For detailed usage of the command, see [ares-inspect]({{< relref "cli-user-guide#ares-inspect" >}}).
+
+``` bash
+# Command format
+# ares-inspect --device --service
+ares-inspect --device webos --serivce com.domain.app.service
+```
+
+If the command succeeds, a URL for Node's Inspector will be returned.
+
+``` bash
+ares-inspect --device webos --service com.domain.app.service
+
+[Info] Set target device : rpir
+To debug your service, set "127.0.0.1:63532" on Node's Inspector Client(Chrome DevTools, Visual Studio Code, etc.).
+```
+
+To start the debugging window, you need a client tool to connect to the Inspector. For a list of tools that can connect to Node’s Inspector, see [Inspector Clients | Node.js](https://nodejs.org/en/docs/guides/debugging-getting-started/#inspector-clients).
+
+In this tutorial, we will use the [Chrome DevTools](https://developer.chrome.com/docs/devtools/overview) as the client tool.
+
+1. Copy the URL in the above return.
+2. Open the Chrome browser.
+3. Go to '**chrome://inspect**' and do the followings:
+
+ {{< figure src="/images/docs/tutorials/js-services/chrome-inspect-setup.png" >}}
+
+4. Click **inspect**.
+
+ {{< figure src="/images/docs/tutorials/js-services/inspect-button.png" >}}
+
+ Then, the debugging window will be displayed.
+
+ {{< figure src="/images/docs/tutorials/js-services/launched-debugging-window.png" >}}
+
+## Appendix. Code Explanation
+
+This section explains the sample source codes in this tutorial.
+
+### helloclient.js
+
+`helloworld_webos_service.js` shows a typical way to call a service on webOS.
+
+``` js {linenos=table}
+const Service = require('webos-service');
+
+const service = new Service("com.example.helloclient"); // Register com.example.helloworld
+
+console.log("simple call");
+// Change @SERVICE-NAME@ to real service name
+service.call("luna://@SERVICE-NAME@/hello", {}, function(message) {
+ console.log("call @SERVICE-NAME@/hello");
+ console.log("message payload: " + JSON.stringify(message.payload));
+ const sub = service.subscribe("luna://@SERVICE-NAME@/heartbeat", {subscribe: true});
+ const max = 10;
+ let count = 0;
+ sub.addListener("response", function(msg) {
+ console.log(JSON.stringify(msg.payload));
+ if (++count >= max) {
+ sub.cancel();
+ setTimeout(function() {
+ console.log(max+" responses received, exiting...");
+ process.exit(0);
+ }, 1000);
+ }
+ });
+});
+```
+
+A brief explanation of the above file:
+
+- Line (1): Loads the `webos-service` module.
+- Line (3): Registers the service.
+- Line (7-21): Calls methods that are defined in `helloworld_webos_service.js`.
+
+### helloworld_webos_service.js
+
+`helloworld_webos_service.js` shows a typical way to register a service on webOS. For more details, see [webos-service Library API Reference]({{< relref "webos-service-library-api-reference" >}}).
+
+``` js
+
+const pkgInfo = require('./package.json');
+const Service = require('webos-service'); // webos-service module provides an interface for the webOS system bus.
+ // The interface is wrapped in a familiar Node.js idiom.
+
+const service = new Service(pkgInfo.name); // Create service by service name on package.json
+const logHeader = "[" + pkgInfo.name + "]";
+
+...
+
+// The hello method returns "Hello, !" to the client
+service.register("hello", function(message) {
+ console.log(logHeader, "SERVICE_METHOD_CALLED:/hello");
+ console.log("In hello callback");
+ const name = message.payload.name ? message.payload.name : "World";
+
+ message.respond({
+ returnValue: true,
+ Response: "Hello, " + name + "!"
+ });
+});
+
+...
+```
+
+### services.json
+
+`services.json` stores the metadata of the service.
+
+``` json
+{
+ "id": "com.domain.app.service", // An ID of the "services" array. Typically, this value is the "name" of the first object of the "services" array.
+ "description": "HelloWorld Service",
+ "services": [
+ {
+ "name": "com.domain.app.service" // A unique identifier of the service.
+ // This value MUST START with the app ID, which is packaged with the service.
+ // For example, if the app ID is com.domain.app, the service ID must start with com.domain.app.xxx. (e.g., com.domain.app.service)
+ }
+ ]
+}
+```
+
+{{< note >}}
+See also [services.json]({{< relref "services-json" >}}).
+{{< /note >}}
+
+### package.json
+
+`package.json` contains information for packaging.
+
+``` json
+{
+ "name": "com.domain.app.service", // A unique identifier of the service. This is the same value as the "name" in services.json.
+ "version": "1.0.0",
+ "description": "Helloworld service",
+ "main": "helloworld_webos_service.js", // The main JS file for this service
+ "scripts": {
+ "test": "echo \"Error: no test specified\" && exit 1"
+ },
+ "author": "",
+ "license": "BSD"
+}
+```
+
+{{< note >}}
+See also [Creating a package.json file | npm Docs](https://docs.npmjs.com/getting-started/using-a-package.json).
+{{< /note >}}
diff --git a/content/en/docs/tutorials/native-apps/developing-built-in-native-apps.md b/content/en/docs/tutorials/native-apps/developing-built-in-native-apps.md
index 0277559f..e2f426bc 100644
--- a/content/en/docs/tutorials/native-apps/developing-built-in-native-apps.md
+++ b/content/en/docs/tutorials/native-apps/developing-built-in-native-apps.md
@@ -1,6 +1,7 @@
---
-title: Developing Built-in Native Apps
-date: 2023-09-27
+title: Built-in Native Apps
+display_title: Developing Built-in Native Apps
+date: 2024-09-11
weight: 20
toc: true
---
diff --git a/content/en/docs/tutorials/native-apps/developing-downloadable-native-apps.md b/content/en/docs/tutorials/native-apps/developing-downloadable-native-apps.md
new file mode 100644
index 00000000..133a7790
--- /dev/null
+++ b/content/en/docs/tutorials/native-apps/developing-downloadable-native-apps.md
@@ -0,0 +1,310 @@
+---
+title: Downloadable Native Apps
+display_title: Developing Downloadable Native Apps
+date: 2024-09-10
+weight: 10
+toc: true
+---
+
+A **downloadable native app** is a 3rd party native app that can be installed on the webOS target device.
+
+{{< note "Downloadable vs. Built-In" >}}
+In webOS OSE, apps and services are divided into two categories: downloadable and built-in.
+
+- **Downloadable** apps/services are installed by appinstalld service. This service automatically generates several configurations for the apps/services. (such as trust level)
+- **Built-in** apps/services are built and installed by developers. Developers can **customize** configurations to suit their needs.
+{{< /note >}}
+
+This tutorial shows a step-by-step guide for creating a downloadable native app from scratch.
+
+## Prerequisites
+
+Before you begin, prepare the followings:
+
+- [Samples repository](https://github.com/webosose/samples)
+- [Command-Line Interface (CLI)](https://github.com/webos-tools/cli)
+- [Native development kit (NDK)]({{< relref "setting-up-native-development-kit" >}})
+
+{{< note >}}
+If you already prepared the above things, you can skip this section.
+{{< /note >}}
+
+### Samples Repository
+
+The samples repository provides basic sample codes for webOS OSE apps and services.
+
+Download the samples repository.
+
+``` bash
+git clone https://github.com/webosose/samples.git
+```
+
+The directory structure of the sample native app will be as follows:
+
+```
+samples/native-apps/downloadable/com.sample.waylandegl/
+├── src/
+│ └── wayland_egl.c
+├── appinfo.json
+├── CMakeLists.txt
+├── icon.png
+└── README.md
+```
+
+Descriptions for each file are as follows:
+
+| File | Description |
+| ---- | ----------- |
+| wayland_egl.c | The main source code of the native app |
+| appinfo.json | Metadata for the web app. For more details, see [appinfo.json]({{< relref "appinfo-json" >}}). |
+| CMakeLists.txt | Build scripts for the app |
+| icon.png | An image for the app icon displayed on the app bar |
+| README.md | This file introduces the app (such as summary, dependencies, and license information). |
+
+### Command-Line Interface
+
+The [Command-Line Interface (CLI)](https://github.com/webos-tools/cli) enables you to create, install, and launch apps or services using in a command-line environment.
+
+1. Install [Node.js](https://nodejs.org/en/download) (Recommended version: v16.20.2).
+2. Install the CLI.
+
+ ``` bash
+ sudo npm install -g @webos-tools/cli
+ ```
+
+3. Change the profile.
+
+ ``` bash
+ ares-config --profile ose
+ ```
+
+4. After installing the CLI, you must register your target device. Enter the `ares-setup-device` command to start an interactive mode:
+
+ {{< note >}}
+ In the interactive mode, pressing the **Enter** key means to use the default value.
+ {{< /note >}}
+
+ ``` bash
+ document@document:~$ ares-setup-device
+ name deviceinfo connection profile
+ ------------------ ------------------------ ---------- -------
+ emulator (default) developer@127.0.0.1:6622 ssh ose
+
+
+ ** You can modify the device info in the above list, or add new device.
+ ? Select add # Select 'add'.
+ ? Enter Device Name: webos # The nickname of your target device. Use the short name.
+ ? Enter Device IP address: 127.0.0.1 # The IP address of your target device
+ ? Enter Device Port: 22 # Just press the Enter key. Do not change this value.
+ ? Enter ssh user: root # Just press the Enter key. Do not change this value.
+ ? Enter description: new device # Descriptions about your target device
+ ? Select authentication password # Select 'password'
+ ? Enter password: [hidden] # Leave it blank (Press the Enter key).
+ ? Set default ? No # Enter 'y' if you want to set this device as the default device.
+ ? Save ? Yes # Enter 'Yes'.
+
+ name deviceinfo connection profile
+ ------------------ ------------------------ ---------- -------
+ webos root@127.0.0.1:22 ssh ose
+ emulator (default) developer@127.0.0.1:6622 ssh ose
+ ```
+
+### Native Development Kit
+
+**Native Development Kit (NDK)** is a set of tools that include toolchains, libraries, and header files. NDK enables you to build a native app on your computer.
+
+Follow the guides in [Native Development Kit Setup]({{< relref "setting-up-native-development-kit" >}}).
+
+## Step 01. Building an App
+
+1. Go to your app directory. (`samples/native-apps/downloadable/com.sample.waylandegl/`)
+2. Create a build directory and go into the directory.
+
+ ``` bash
+ $ mkdir BUILD
+ $ cd BUILD
+ ```
+
+3. Execute the build commands.
+
+ ``` bash
+ $ cmake ..
+ $ make
+ ```
+
+ If the commands succeed, a `pkg_` directory will be generated in your app directory. `` depends on your build machine’s architecture.
+
+ In the following example, the `pkg_aarch64` directory is generated.
+
+ ```
+ pkg_aarch64/
+ ├── appinfo.json
+ ├── icon.png
+ └── wayland_egl
+ ```
+
+## Step 02. Packaging the App
+
+To install the app, you have to package the app first.
+
+Enter the following command:
+
+``` bash
+# Command format
+# ares-package
+ares-package pkg_aarch64
+```
+
+If the command succeeds, an `.ipk` file will be generated under the current directory.
+
+``` bash
+# Generated .ipk file
+com.sample.waylandegl_0.0.1_aarch64.ipk
+```
+
+## Step 03. Installing the App
+
+It's time to install your package to the target device.
+
+Enter the following command:
+
+``` bash
+# Command format
+# ares-install --device
+ares-install --device webos com.sample.waylandegl_0.0.1_aarch64.ipk
+```
+
+## Step 04. Launching the App
+
+To launch the installed app, enter the following command:
+
+``` bash
+# Command format
+# ares-launch --device
+ares-launch --device webos com.sample.waylandegl
+```
+
+If the command succeeds, a yellow screen will be displayed.
+
+## Appendix. Code Explanation
+
+This section explains the samples source codes in this tutorial.
+
+### appinfo.json
+
+`appinfo.json` stores the app's metadata.
+
+``` json
+{
+ "id": "com.sample.waylandegl", # ID of the app. This ID will be used as a unique identifier for the app.
+ "version": "0.0.1",
+ "vendor": "My Company",
+ "type": "native", # Type of the app
+ "main": "wayland_egl", # The executable file (.c)
+ "title": "wayland_egl", # This string will be displayed on the app bar
+ "icon": "icon.png" # A path to an image for your app icon
+}
+```
+
+### wayland_egl.c
+
+This sample code will display a yellow screen on your target device.
+
+The sample uses Wayland and webOS-specific extensions. For more details about functions in the code, see the following pages:
+
+- [Wayland official website](https://wayland.freedesktop.org/)
+- [webos-wayland-extensions | webOS OSE GitHub](https://github.com/webosose/webos-wayland-extensions)
+
+``` cpp {linenos=table}
+#include
+...
+struct wl_webos_shell *g_pstWebOSShell = NULL;
+struct wl_webos_shell_surface *g_pstWebosShellSurface = NULL;
+...
+
+// Please see wayland-webos-shell-client-protocol.h file for webOS specific wayland protocol
+g_pstWebosShellSurface = wl_webos_shell_get_shell_surface(g_pstWebOSShell, g_pstSurface);
+if (g_pstWebosShellSurface == NULL)
+{
+ fprintf(stderr, "Can't create webos shell surface\n");
+ exit(1);
+}
+wl_webos_shell_surface_add_listener(g_pstWebosShellSurface, &s_pstWebosShellListener, g_pstDisplay);
+wl_webos_shell_surface_set_property(g_pstWebosShellSurface, "appId", (getenv("APP_ID") ? getenv("APP_ID") : "com.sample.waylandegl"));
+// for secondary display, set the last parameter as 1
+wl_webos_shell_surface_set_property(g_pstWebosShellSurface, "displayAffinity", (getenv("DISPLAY_ID") ? getenv("DISPLAY_ID") : "0"));
+...
+```
+
+A brief explanation of the above file:
+
+- Line(2~3) : Declare `wl_webos_shell` and `wl_webos_shell_surface` structure which are the webOS specific extension of `wl_shell` and `wl_shell_surface`.
+- Line(8~15) : Create a webOS shell surface for an existing surface and add the listener to receive events.
+- Line(17) : Set the property related to display. If you set the last parameter to 1, the sample app will be displayed on a secondary display.
+
+For detailed information on the webOS-specific protocol extension, visit [webos-wayland-extensions | webOS OSE GitHub](https://github.com/webosose/webos-wayland-extensions).
+
+### CMakeLists.txt
+
+[CMake](https://cmake.org/) 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.
+
+In this sample code, `CMakeLists.txt` specifies the source file (`.c`), header, and UI files for the native app.
+
+``` cmake
+...
+
+cmake_minimum_required(VERSION 2.8.7)
+project(wayland_egl C CXX)
+
+
+
+include_directories(${CMAKE_SOURCE_DIR})
+include_directories(${CMAKE_SOURCE_DIR}/src)
+include_directories(${CMAKE_SOURCE_DIR}/include)
+
+include(FindPkgConfig)
+
+pkg_check_modules(WLCLIENT REQUIRED wayland-webos-client)
+include_directories(${WLCLIENT_INCLUDE_DIRS})
+
+pkg_check_modules(WLEGL REQUIRED wayland-egl)
+include_directories(${WLEGL_INCLUDE_DIRS})
+
+pkg_check_modules(GLESV2 REQUIRED glesv2)
+include_directories(${GLESV2_INCLUDE_DIRS})
+
+set(BIN_NAME wayland_egl)
+
+set(SRC_LIST
+ ${CMAKE_SOURCE_DIR}/src/wayland_egl.c
+)
+
+set(CMAKE_RUNTIME_OUTPUT_DIRECTORY "${CMAKE_SOURCE_DIR}/pkg_$ENV{OECORE_TARGET_ARCH}/")
+add_executable(${BIN_NAME} ${SRC_LIST})
+set_target_properties(${BIN_NAME} PROPERTIES LINKER_LANGUAGE C)
+
+target_link_libraries (${BIN_NAME}
+ ${WLCLIENT_LDFLAGS}
+ ${WLEGL_LDFLAGS}
+ -lEGL
+ ${GLESV2_LDFLAGS}
+)
+
+# copy appinfo.json file to output folder
+if(EXISTS "${CMAKE_SOURCE_DIR}/appinfo.json")
+ file(COPY "${CMAKE_SOURCE_DIR}/appinfo.json" DESTINATION ${CMAKE_RUNTIME_OUTPUT_DIRECTORY})
+else()
+ MESSAGE( "'appinfo.json' file was not found !!")
+endif()
+
+# copy icon.png file to output folder
+if(EXISTS "${CMAKE_SOURCE_DIR}/icon.png")
+ file(COPY "${CMAKE_SOURCE_DIR}/icon.png" DESTINATION ${CMAKE_RUNTIME_OUTPUT_DIRECTORY})
+else()
+ MESSAGE( "'icon.png' file was not found !!")
+endif()
+```
+
+{{< note >}}
+See also [CMake Reference Documentation](https://cmake.org/documentation/).
+{{< /note >}}
\ No newline at end of file
diff --git a/content/en/docs/tutorials/native-services/developing-built-in-native-services.md b/content/en/docs/tutorials/native-services/developing-built-in-native-services.md
index 4648c56b..c1de2d14 100644
--- a/content/en/docs/tutorials/native-services/developing-built-in-native-services.md
+++ b/content/en/docs/tutorials/native-services/developing-built-in-native-services.md
@@ -1,6 +1,7 @@
---
-title: Developing Built-in Native Services
-date: 2024-01-29
+title: Built-in Native Services
+display_title: Developing Built-in Native Services
+date: 2024-09-10
weight: 20
toc: true
---
diff --git a/content/en/docs/tutorials/native-services/developing-downloadable-native-services.md b/content/en/docs/tutorials/native-services/developing-downloadable-native-services.md
new file mode 100644
index 00000000..529561f1
--- /dev/null
+++ b/content/en/docs/tutorials/native-services/developing-downloadable-native-services.md
@@ -0,0 +1,356 @@
+---
+title: Downloadable Native Services
+display_title: Developing Downloadable Native Services
+date: 2024-09-10
+weight: 10
+toc: true
+---
+
+A **downloadable native service** is a 3rd party native service that can be installed on the webOS target device.
+
+{{< note "Downloadable vs. Built-In" >}}
+In webOS OSE, apps and services are divided into two categories: downloadable and built-in.
+
+- **Downloadable** apps/services are installed by appinstalld service. This service automatically generates several configurations for the apps/services. (such as trust level)
+- **Built-in** apps/services are built and installed by developers. Developers can **customize** configurations to suit their needs.
+{{< /note >}}
+
+This tutorial shows a step-by-step guide for creating a downloadable native service from scratch.
+
+## Prerequisites
+
+Before you begin, prepare the followings:
+
+- [Samples repository](https://github.com/webosose/samples)
+- [Command-Line Interface (CLI)](https://github.com/webos-tools/cli)
+- [Native development kit (NDK)]({{< relref "setting-up-native-development-kit" >}})
+
+{{< note >}}
+If you already prepared the above things, you can skip this section.
+{{< /note >}}
+
+### Samples Repository
+
+The samples repository provides basic sample codes for webOS OSE apps and services.
+
+Download the samples repository.
+
+``` bash
+git clone https://github.com/webosose/samples.git
+```
+
+The directory structure of the sample native app will be as follows:
+
+```
+samples/native-services/downloadable/
+├── com.sample.echo/
+│ ├── appinfo.json
+│ ├── icon.png
+│ ├── index.html
+│ └── script.js
+│
+├── com.sample.echo.service/
+│ ├── src/
+│ │ └── main.c
+│ ├── CMakeLists.txt
+│ └── services.json
+│
+└── README.md
+```
+
+Descriptions for each file are as follows:
+
+| File | Description |
+| ---- | ----------- |
+| appinfo.json | Metadata for the web app. For more details, see [appinfo.json]({{< relref "appinfo-json" >}}). |
+| icon.png | An image for the app icon displayed on the app bar |
+| index.html | This file defines the UI of the app. |
+| script.js | This file calls the sample method defined in `com.sample.echo.service`. |
+| main.c | A sample service that provides a sample method. | |
+| CMakeLists.txt | Build scripts for the app |
+| services.json | Metadata for the service |
+| README.md | This file introduces the app (such as summary, dependencies, and license information). |
+
+### Command-Line Interface
+
+The [Command-Line Interface (CLI)](https://github.com/webos-tools/cli) enables you to create, install, and launch apps or services using in a command-line environment.
+
+1. Install [Node.js](https://nodejs.org/en/download) (Recommended version: v16.20.2).
+2. Install the CLI.
+
+ ``` bash
+ sudo npm install -g @webos-tools/cli
+ ```
+
+3. Change the profile.
+
+ ``` bash
+ ares-config --profile ose
+ ```
+
+4. After installing the CLI, you must register your target device. Enter the `ares-setup-device` command to start an interactive mode:
+
+ {{< note >}}
+ In the interactive mode, pressing the **Enter** key means to use the default value.
+ {{< /note >}}
+
+ ``` bash
+ document@document:~$ ares-setup-device
+ name deviceinfo connection profile
+ ------------------ ------------------------ ---------- -------
+ emulator (default) developer@127.0.0.1:6622 ssh ose
+
+
+ ** You can modify the device info in the above list, or add new device.
+ ? Select add # Select 'add'.
+ ? Enter Device Name: webos # The nickname of your target device. Use the short name.
+ ? Enter Device IP address: 127.0.0.1 # The IP address of your target device
+ ? Enter Device Port: 22 # Just press the Enter key. Do not change this value.
+ ? Enter ssh user: root # Just press the Enter key. Do not change this value.
+ ? Enter description: new device # Descriptions about your target device
+ ? Select authentication password # Select 'password'
+ ? Enter password: [hidden] # Leave it blank (Press the Enter key).
+ ? Set default ? No # Enter 'y' if you want to set this device as the default device.
+ ? Save ? Yes # Enter 'Yes'.
+
+ name deviceinfo connection profile
+ ------------------ ------------------------ ---------- -------
+ webos root@127.0.0.1:22 ssh ose
+ emulator (default) developer@127.0.0.1:6622 ssh ose
+ ```
+
+### Native Development Kit
+
+**Native Development Kit (NDK)** is a set of tools that include toolchains, libraries, and header files. NDK enables you to build a native app on your computer.
+
+Follow the guides in [Native Development Kit Setup]({{< relref "setting-up-native-development-kit" >}}).
+
+## Step 01. Building a Services
+
+1. Go to your app directory. (`samples/native-services/downloadable/com.sample.echo.service/)`)
+2. Create a build directory and go into the directory.
+
+ ``` bash
+ $ mkdir BUILD
+ $ cd BUILD
+ ```
+
+3. Execute the build commands.
+
+ ``` bash
+ $ cmake ..
+ $ make
+ ```
+
+ If the commands succeed, a `pkg_` directory will be generated in your app directory. `` depends on your build machine’s architecture.
+
+ In the following example, the `pkg_aarch64` directory is generated.
+
+ ```
+ pkg_aarch64/
+ ├── echo_service
+ └── services.json
+ ```
+
+## Step 02. Packaging the Service
+
+To install the service, you have to package the service with an app first.
+
+Enter the following command:
+
+``` bash
+# Command format
+# ares-package
+ares-package ./com.sample.echo ./com.sample.echo.service/pkg_aarch64
+```
+
+If the command succeeds, an `.ipk` file will be generated under the current directory.
+
+``` bash
+# Generated .ipk file
+# com.sample.echo is an ID of the dummy app
+com.sample.echo_0.0.1_all.ipk
+```
+
+## Step 03. Installing the Service
+
+It's time to install your package to the target device.
+
+Enter the following command:
+
+``` bash
+# Command format
+# ares-install --device
+ares-install --device webos com.sample.echo_0.0.1_all.ipk
+```
+
+## Step 04. Testing the Service
+
+You can check whether the service is running or not.
+
+Enter the following command:
+
+``` bash
+# Command format
+# ares-shell -r "luna-send -n 1 -f luna:/// ''" --device
+ares-shell -r "luna-send -f -n 1 luna://com.sample.echo.service/echo '{"input":"Hello, webOS OSE!"}'" --device webos
+```
+
+In the above command,
+
+- `` is the service name defined in `services.json` and `package.json`.
+- `` is one of the method's names defined in the main service file.
+- `` is a JSON string containing the method's input parameters.
+- `` is the nickname of the target device set by `ares-setup-device`.
+
+If the command succeeds, the target device returns the following message:
+
+``` bash
+# Return
+{
+ "returnValue": true,
+ "echoMessage": "Hello, webOS OSE!"
+}
+```
+
+When the `com.sample.echo.service/echo` returns the input, the delivered parameter, as `echoMessage`.
+
+## Appendix. Code Explanation
+
+This section explains the sample source codes in this tutorial.
+
+### main.c
+
+``` c {linenos=table}
+...
+#include
+...
+
+bool echo(LSHandle *sh, LSMessage *message, void *data);
+
+LSMethod sampleMethods[] = {
+ {"echo", echo}, // luna://com.sample.echo.service/echo
+};
+...
+bool echo(LSHandle *sh, LSMessage *message, void *data)
+{
+ ...
+}
+...
+sh = LSMessageGetConnection(message);
+
+LSRegisterCategory(handle,"/",sampleMethods, NULL, NULL, &lserror);
+
+LSGmainAttach(handle, gmainLoop, &lserror);
+...
+```
+
+A brief explanation of the above file:
+
+- Line (2): Includes `lunaservice.h` header file to use luna service. For detailed information about luna service, see [Introduction to LS2 API]({{< relref "introduction-to-ls2-api" >}}).
+- Line (4-8): Declares the echo method.
+- Line (11-14): Implements echo method. This method will return the input as you entered.
+- Line (16): Returns a handle to the connection-to-bus through which the message was sent.
+- Line (18): Appends a method to the category.
+- Line (20): Attaches a service to a glib mainloop.
+
+### services.json
+
+`services.json` stores the metadata of the service.
+
+``` json
+{
+ "id": "com.sample.echo.service", // An ID of the "services" array. Typically, this value is the "name" of the first object of the "services" array.
+ "description": "Native echo service",
+ "engine":"native",
+ "services": [
+ {
+ "name": "com.sample.echo.service", // A unique identifier of the service.
+ // This value MUST START with the app ID, which is packaged with the service.
+ // For example, if the app ID is com.domain.app, the service ID must start with com.domain.app.xxx. (e.g., com.domain.app.service)
+ "description": "Native echo service"
+ }
+ ]
+}
+```
+
+{{< note >}}
+See also [services.json]({{< relref "services-json" >}}).
+{{< /note >}}
+
+### CMakeLists.txt
+
+`CMakeLists.txt` file is used by CMake to generate the Makefile to build the project. This file specifies the source, header, and UI files included in the project.
+
+``` cmake {linenos=table}
+cmake_minimum_required(VERSION 2.8.7)
+project(nativeService C)
+
+# set link directory
+#link_directories(${CMAKE_SOURCE_DIR}/pkg_$ENV{ARCH}/lib)
+
+# ---
+# add include files
+include_directories(${CMAKE_SOURCE_DIR})
+include_directories(${CMAKE_SOURCE_DIR}/src)
+include_directories(${CMAKE_SOURCE_DIR}/include)
+
+# ---
+# find required packages
+include(FindPkgConfig)
+
+pkg_check_modules(GTHREAD2 REQUIRED gthread-2.0)
+include_directories(${GTHREAD2_INCLUDE_DIRS})
+
+pkg_check_modules(PBNJSON REQUIRED pbnjson_c)
+include_directories(${PBNJSON_INCLUDE_DIRS})
+
+# -- check for glib 2.0
+pkg_check_modules(GLIB2 REQUIRED glib-2.0)
+include_directories(${GLIB2_INCLUDE_DIRS})
+
+pkg_check_modules(LS2 REQUIRED luna-service2)
+include_directories(${LS2_INCLUDE_DIRS})
+
+pkg_check_modules(PMLOG REQUIRED PmLogLib)
+include_directories(${PMLOG_INCLUDE_DIRS})
+
+# ---
+# create executable file
+set(BIN_NAME echo_service)
+
+set(SRC_LIST
+ ${CMAKE_SOURCE_DIR}/src/main.c
+)
+
+set(CMAKE_RUNTIME_OUTPUT_DIRECTORY "${CMAKE_SOURCE_DIR}/pkg_$ENV{OECORE_TARGET_ARCH}/")
+add_executable(${BIN_NAME} ${SRC_LIST})
+
+# ignore shared library
+set(CMAKE_EXE_LINKER_FLAGS "-Wl,--allow-shlib-undefined")
+set_target_properties(${BIN_NAME} PROPERTIES LINKER_LANGUAGE C)
+
+target_link_libraries (${BIN_NAME}
+ ${GTHREAD2_LDFLAGS}
+ ${PBNJSON_LDFLAGS}
+ ${LS2_LDFLAGS}
+ ${GLIB2_LDFLAGS}
+ ${PMLOG_LDFLAGS}
+)
+
+file(COPY ${CMAKE_SOURCE_DIR}/services.json DESTINATION "${CMAKE_RUNTIME_OUTPUT_DIRECTORY}")
+```
+
+A brief explanation of the above file:
+
+- Line (1): Sets the minimum CMake version.
+- Line (2): Sets the project name and programming language.
+- Line (9~31): Adds the directories that contain the header files.
+- Line (35~42): Sets the name of result binary file and source files to be built.
+- Line (46): Sets the language for linker.
+- Line (48~54): Specifies the libraries to be used.
+- Line (56): Copies the services.json file to the output folder.
+
+{{< note >}}
+For more details, see [CMake Reference Documentation](https://cmake.org/documentation/).
+{{< /note >}}
\ No newline at end of file
diff --git a/content/en/docs/tutorials/qml-apps/developing-built-in-qml-apps.md b/content/en/docs/tutorials/qml-apps/developing-built-in-qml-apps.md
index f15984ee..7f167a05 100644
--- a/content/en/docs/tutorials/qml-apps/developing-built-in-qml-apps.md
+++ b/content/en/docs/tutorials/qml-apps/developing-built-in-qml-apps.md
@@ -1,6 +1,7 @@
---
-title: Developing Built-in QML Apps
-date: 2022-12-02
+title: Built-in QML Apps
+display_title: Developing Built-in QML Apps
+date: 2024-09-10
weight: 20
toc: true
---
diff --git a/content/en/docs/tutorials/qml-apps/developing-downloadable-qml-apps.md b/content/en/docs/tutorials/qml-apps/developing-downloadable-qml-apps.md
new file mode 100644
index 00000000..cbbfbd88
--- /dev/null
+++ b/content/en/docs/tutorials/qml-apps/developing-downloadable-qml-apps.md
@@ -0,0 +1,179 @@
+---
+title: Downloadable QML Apps
+display_title: Developing Downloadable QML Apps
+date: 2024-09-10
+weight: 10
+toc: true
+---
+
+A **downloadable Qt Modeling Language (QML) app** is a 3rd party web app that can be installed on the webOS target device.
+
+{{< note "Downloadable vs. Built-In" >}}
+In webOS OSE, apps and services are divided into two categories: downloadable and built-in.
+
+- **Downloadable** apps/services are installed by appinstalld service. This service automatically generates several configurations for the apps/services. (such as trust level)
+- **Built-in** apps/services are built and installed by developers. Developers can **customize** configurations to suit their needs.
+{{< /note >}}
+
+This tutorial shows a step-by-step guide for creating a downloadable QML app from scratch.
+
+## Prerequisites
+
+Before you begin, you must install the [Command-Line Interface (CLI)](https://github.com/webos-tools/cli).
+
+The CLI enables you to create, install, and launch apps or services using in a command-line environment.
+
+{{< note >}}
+If you already installed Node.js & CLI and registed your target device, you can skip this section.
+{{< /note >}}
+
+1. Install [Node.js](https://nodejs.org/en/download) (Recommended version: v16.20.2).
+2. Install the CLI.
+
+ ``` bash
+ sudo npm install -g @webos-tools/cli
+ ```
+
+3. Change the profile.
+
+ ``` bash
+ ares-config --profile ose
+ ```
+
+4. After installing the CLI, you must register your target device. Enter the `ares-setup-device` command to start an interactive mode:
+
+ {{< note >}}
+ In the interactive mode, pressing the **Enter** key means to use the default value.
+ {{< /note >}}
+
+ ``` bash
+ document@document:~$ ares-setup-device
+ name deviceinfo connection profile
+ ------------------ ------------------------ ---------- -------
+ emulator (default) developer@127.0.0.1:6622 ssh ose
+
+
+ ** You can modify the device info in the above list, or add new device.
+ ? Select add # Select 'add'.
+ ? Enter Device Name: webos # The nickname of your target device. Use the short name.
+ ? Enter Device IP address: 127.0.0.1 # The IP address of your target device
+ ? Enter Device Port: 22 # Just press the Enter key. Do not change this value.
+ ? Enter ssh user: root # Just press the Enter key. Do not change this value.
+ ? Enter description: new device # Descriptions about your target device
+ ? Select authentication password # Select 'password'
+ ? Enter password: [hidden] # Leave it blank (Press the Enter key).
+ ? Set default ? No # Enter 'y' if you want to set this device as the default device.
+ ? Save ? Yes # Enter 'Yes'.
+
+ name deviceinfo connection profile
+ ------------------ ------------------------ ---------- -------
+ webos root@127.0.0.1:22 ssh ose
+ emulator (default) developer@127.0.0.1:6622 ssh ose
+ ```
+
+## Step 01. Creating a Dummy App
+
+Let's get started by creating a dummy app from templates. CLI provides various templates for webOS apps and services.
+
+Enter the following command:
+
+``` bash
+# Comannd format
+# ares-generate -t
+ares-generate -t qmlapp sampleApp
+```
+
+{{< note >}}
+For more details about CLI commands, refer to [CLI User Guide]({{< relref "cli-user-guide" >}}).
+{{< /note >}}
+
+If the command succeeds, the following directory will be generated under the current directory:
+
+```
+sampleApp/
+├── appinfo.json
+├── icon.png
+└── main.qml
+```
+
+Descriptions for each file are as follows:
+
+| File | Description |
+| ---- | ----------- |
+| appinfo.json | Metadata for the web app. For more details, see [appinfo.json]({{< relref "appinfo-json" >}}). |
+| icon.png | An image for the app icon displayed on the app bar |
+| main.qml | QML application main page. This page only shows "Hello, QML Application!!" text on the screen. |
+
+## Step 02. Packaging the App
+
+To install the app, you have to package the app first.
+
+Enter the following command:
+
+``` bash
+# Command format
+# ares-package
+ares-package sampleApp
+```
+
+If the command succeeds, an `.ipk` file will be generated under the current directory.
+
+``` bash
+# Generated .ipk file
+com.domain.app_1.0.0_all.ipk
+```
+
+## Step 03. Installing the App
+
+It's time to install your package to the target device.
+
+Enter the following command:
+
+``` bash
+# Command format
+# ares-install --device
+ares-install --device webos com.domain.app_1.0.0_all.ipk
+```
+
+## Step 04. Launching the App
+
+To launch the installed app, enter the following command:
+
+``` bash
+# Command format
+# ares-launch --device
+ares-launch --device webos com.domain.app
+```
+
+If the command succeeds, the following string will be displayed:
+
+{{< figure src="/images/docs/tutorials/qml-apps/launched-qml-app.png" width="600px" class="align-left" >}}
+
+## Appendix. Code Explanation
+
+This section briefly explains the sample codes used in this tutorial.
+
+### appinfo.json
+
+`appinfo.json` stores the app's metadata.
+
+``` json
+{
+ "id": "com.domain.app", # ID of the app. This ID will be used as a unique identifier for the app.
+ "version": "1.0.0",
+ "vendor": "My Company",
+ "type": "qml", # Type of the app
+ "main": "main.qml", # The QML file that contains the contents of your app
+ "title": "new app", # This string will be displayed on the app bar
+ "icon": "icon.png", # A path to an image for your app icon
+ "requiredPermissions" : ["time.query", "applications.operation"] # ACG values for the app
+}
+```
+
+### main.qml
+
+`main.qml` is a QML file that contains the contents of your QML app.
+
+You can use another file name, but if you do so, you'll also need to update the `main` in `appinfo.json`.
+
+The template codes will print "Hello, QML Application!!" on the screen.
diff --git a/content/en/docs/tutorials/web-apps/developing-built-in-web-apps.md b/content/en/docs/tutorials/web-apps/developing-built-in-web-apps.md
index f2a482ec..ce220e6e 100644
--- a/content/en/docs/tutorials/web-apps/developing-built-in-web-apps.md
+++ b/content/en/docs/tutorials/web-apps/developing-built-in-web-apps.md
@@ -1,10 +1,44 @@
---
-title: Developing Built-in Web Apps
-date: 2022-12-02
+title: Built-in Web Apps
+display_title: Developing Built-in Web Apps
+date: 2024-09-10
weight: 20
toc: true
---
+A **built-in web app** is a web app that is installed with the webOS OSE platform at build time.
+
+{{< note "Downloadable vs. Built-In" >}}
+In webOS OSE, apps and services are divided into two categories: downloadable and built-in.
+
+- **Downloadable** apps/services are installed by appinstalld service. This service automatically generates several configurations for the apps/services. (such as trust level)
+- **Built-in** apps/services are built and installed by developers. Developers can **customize** configurations to suit their needs.
+{{< /note >}}
+
+This tutorial shows a step-by-step guide for creating a built-in web app from scratch.
+
+## Prerequisites
+
+Before you begin, prepare the followings:
+
+- [webOS OSE platform source code](https://github.com/webosose/build-webos)
+- [Samples repository](https://github.com/webosose/samples)
+
+{{< note >}}
+If you already prepared the above things, you can skip this section.
+{{< /note >}}
+
+### Platform Source Code
+
+Since the built-in web app is installed at build time, you need the webOS OSE platform source code.
+
+Download the platform source code.
+
+``` bash
+git clone https://github.com/webosose/build-webos.git
+```
+
+
A built-in web app is a web app that is packaged with webOS OSE platform at a build time. Built-in web apps have the following features:
- Can be built into the webOS OSE image to be packaged together with the platform image.
diff --git a/content/en/docs/tutorials/web-apps/developing-downloadable-web-apps.md b/content/en/docs/tutorials/web-apps/developing-downloadable-web-apps.md
new file mode 100644
index 00000000..4b64e17b
--- /dev/null
+++ b/content/en/docs/tutorials/web-apps/developing-downloadable-web-apps.md
@@ -0,0 +1,224 @@
+---
+title: Downloadable Web Apps
+display_title: Developing Downloadable Web Apps
+date: 2024-09-10
+weight: 10
+toc: true
+---
+
+A **downloadable web app** is a 3rd party web app that can be installed on the webOS target device.
+
+{{< note "Downloadable vs. Built-In" >}}
+In webOS OSE, apps and services are divided into two categories: downloadable and built-in.
+
+- **Downloadable** apps/services are installed by appinstalld service. This service automatically generates several configurations for the apps/services. (such as trust level)
+- **Built-in** apps/services are built and installed by developers. Developers can **customize** configurations to suit their needs.
+{{< /note >}}
+
+This tutorial shows a step-by-step guide for creating a downloadable web app from scratch.
+
+## Prerequisites
+
+Before you begin, you must install the [Command-Line Interface (CLI)](https://github.com/webos-tools/cli).
+
+The CLI enables you to create, install, and launch apps or services using in a command-line environment.
+
+{{< note >}}
+If you already installed Node.js & CLI and registed your target device, you can skip this section.
+{{< /note >}}
+
+1. Install [Node.js](https://nodejs.org/en/download) (Recommended version: v16.20.2).
+2. Install the CLI.
+
+ ``` bash
+ sudo npm install -g @webos-tools/cli
+ ```
+
+3. Change the profile.
+
+ ``` bash
+ ares-config --profile ose
+ ```
+
+4. After installing the CLI, you must register your target device. Enter the `ares-setup-device` command to start an interactive mode:
+
+ {{< note >}}
+ In the interactive mode, pressing the **Enter** key means to use the default value.
+ {{< /note >}}
+
+ ``` bash
+ document@document:~$ ares-setup-device
+ name deviceinfo connection profile
+ ------------------ ------------------------ ---------- -------
+ emulator (default) developer@127.0.0.1:6622 ssh ose
+
+
+ ** You can modify the device info in the above list, or add new device.
+ ? Select add # Select 'add'.
+ ? Enter Device Name: webos # The nickname of your target device. Use the short name.
+ ? Enter Device IP address: 127.0.0.1 # The IP address of your target device
+ ? Enter Device Port: 22 # Just press the Enter key. Do not change this value.
+ ? Enter ssh user: root # Just press the Enter key. Do not change this value.
+ ? Enter description: new device # Descriptions about your target device
+ ? Select authentication password # Select 'password'
+ ? Enter password: [hidden] # Leave it blank (Press the Enter key).
+ ? Set default ? No # Enter 'y' if you want to set this device as the default device.
+ ? Save ? Yes # Enter 'Yes'.
+
+ name deviceinfo connection profile
+ ------------------ ------------------------ ---------- -------
+ webos root@127.0.0.1:22 ssh ose
+ emulator (default) developer@127.0.0.1:6622 ssh ose
+ ```
+
+## Step 01. Creating a Dummy App
+
+Let's get started by creating a dummy app from templates. CLI provides various templates for webOS apps and services.
+
+Enter the following command:
+
+``` bash
+# Comannd format
+# ares-generate -t
+ares-generate -t webapp sampleApp
+```
+
+{{< note >}}
+For more details about CLI commands, refer to [CLI User Guide]({{< relref "cli-user-guide" >}}).
+{{< /note >}}
+
+If the command succeeds, the following directory will be generated under the current directory:
+
+```
+sampleApp/
+|---- appinfo.json
+|---- icon.png
+|---- index.html
+```
+
+Descriptions for each file are as follows:
+
+| File | Description |
+| ---- | ----------- |
+| appinfo.json | Metadata for the web app. For more details, see [appinfo.json]({{< relref "appinfo-json" >}}). |
+| icon.png | An image for the app icon displayed on the app bar |
+| index.html | The main page of the web app |
+
+## Step 02. Packaging the App
+
+To install the app, you have to package the app first.
+
+Enter the following command:
+
+``` bash
+# Command format
+# ares-package
+ares-package sampleApp
+```
+
+If the command succeeds, an `.ipk` file will be generated under the current directory.
+
+``` bash
+# Generated .ipk file
+com.domain.app_1.0.0_all.ipk
+```
+
+## Step 03. Installing the App
+
+It's time to install your package to the target device.
+
+Enter the following command:
+
+``` bash
+# Command format
+# ares-install --device
+ares-install --device webos com.domain.app_1.0.0_all.ipk
+```
+
+## Step 04. Launching the App
+
+To launch the installed app, enter the following command:
+
+``` bash
+# Command format
+# ares-launch --device
+ares-launch --device webos com.domain.app
+```
+
+If the command succeeds, the following string will be displayed:
+
+{{< figure src="/images/docs/tutorials/web-apps/launched-web-app.jpg" width="600px" class="align-left" >}}
+
+## Debugging the App
+
+### Using Chrome
+
+You can use the [Chrome DevTools](https://developer.chrome.com/docs/devtools/overview) to debug and monitor the runtime status of web apps. It allows you to control JavaScript execution, inspect the web pages' CSS and HTML code, and monitor resource usage. Old versions of Chrome might not support the DevTools.
+
+To debug your app, enter the following command:
+
+``` bash
+# Command format
+# ares-inspect --device --app --open
+
+ares-inspect --device webos --app com.domain.app --open
+[Info] Set target device : testdevice
+# This URL is for the DevTools page
+Application Debugging - http://localhost:40709/devtools/inspector.html?ws=localhost:40709/devtools/page/1E2113E4B12042E37916985F86B5B378
+```
+
+If the command succeeds, the DevTools page will be launched.
+
+{{< figure src="/images/docs/tutorials/web-apps/web-inspector.png" link="/images/docs/tutorials/web-apps/web-inspector.png" target="_blank" alt="" caption="Web Inspector screenshot" >}}
+
+{{< note >}}
+Web Inspector works only in Blink-based web browsers such as Chrome and Opera. If another browser (e.g., Safari or Internet Explorer) is set as your default web browser, you must re-open the inspector page in a Blink-based web browser.
+{{< /note >}}
+
+### Using ares-server
+
+`ares-server` runs a web server based on files in the specified directory.
+
+Originally, web browsers' security policies restrict access to local files during debugging sessions. `ares-server` bypasses these policies so the user can access the local files.
+
+Enter the following command:
+
+``` bash
+# Command format
+# ares-server [--open]
+# --open is optional.
+# This option opens the debugging window directly on the default browser.
+
+ares-server ./sampleApp --open
+
+Local server running on http://localhost:43527 # Check the URL address
+```
+
+## Appendix. Code Explanation
+
+This section briefly explains the sample codes used in this tutorial.
+
+### appinfo.json
+
+`appinfo.json` stores the app's metadata.
+
+``` json
+{
+ "id": "com.domain.app", # ID of the app. This ID will be used as a unique identifier for the app.
+ "version": "1.0.0",
+ "vendor": "My Company",
+ "type": "web", # Type of the app
+ "main": "index.html", # The HTML file that contains the contents of your app
+ "title": "new app", # This string will be displayed on the app bar
+ "icon": "icon.png", # A path to an image for your app icon
+ "requiredPermissions": ["time.query", "activity.operation"] # ACG values for the app
+}
+```
+
+### index.html
+
+`index.html` is an HTML file that contains the content of your web app.
+
+You can use another file name, but if you do so, you'll also need to update the `main` in `appinfo.json`.
+
+The template codes will print "Hello, Web Application!!" on the screen. (The dummy app also has code for JavaScript services, but they won't be used in this tutorial.)
diff --git a/data/sidebars/docs/tutorials.yaml b/data/sidebars/docs/tutorials.yaml
index ee32ac60..60dfbee9 100644
--- a/data/sidebars/docs/tutorials.yaml
+++ b/data/sidebars/docs/tutorials.yaml
@@ -5,7 +5,7 @@ entries:
sections:
- title: External Web Apps
- url: /docs/tutorials/web-apps/developing-external-web-apps/
+ url: /docs/tutorials/web-apps/developing-downloadable-web-apps/
- title: Built-in Web Apps
url: /docs/tutorials/web-apps/developing-built-in-web-apps/
diff --git a/static/_redirects b/static/_redirects
index aa18f345..7fd2e003 100644
--- a/static/_redirects
+++ b/static/_redirects
@@ -30,11 +30,11 @@
/docs/guides/core-topics/architecture/ /docs/guides/core-topics/architecture/architecture-overview/ 301!
/docs/guides/core-topics/application-management/ /docs/guides/core-topics/application-management/web-app-lifecycle/ 301!
/docs/guides/core-topics/graphics-input/ /docs/guides/core-topics/graphics-input/graphics-input-overview/ 301!
-/docs/tutorials/web-apps/ /docs/tutorials/web-apps/developing-external-web-apps/ 301!
-/docs/tutorials/qml-apps/ /docs/tutorials/qml-apps/developing-external-qml-apps/ 301!
-/docs/tutorials/native-apps/ /docs/tutorials/native-apps/developing-external-native-apps/ 301!
-/docs/tutorials/js-services/ /docs/tutorials/js-services/developing-external-js-services/ 301!
-/docs/tutorials/native-services/ /docs/tutorials/native-services/developing-external-native-services/ 301!
+/docs/tutorials/web-apps/ /docs/tutorials/web-apps/developing-downloadable-web-apps/ 301!
+/docs/tutorials/qml-apps/ /docs/tutorials/qml-apps/developing-downloadable-qml-apps/ 301!
+/docs/tutorials/native-apps/ /docs/tutorials/native-apps/developing-downloadable-native-apps/ 301!
+/docs/tutorials/js-services/ /docs/tutorials/js-services/developing-downloadable-js-services/ 301!
+/docs/tutorials/native-services/ /docs/tutorials/native-services/developing-downloadable-native-services/ 301!
/docs/reference/ls2-api/ /docs/reference/ls2-api/ls2-api-index/ 301!
/docs/reference/luna-service2-library/ /docs/reference/luna-service2-library/luna-service2-library-api-reference/ 301!
/docs/reference/webos-service-library/ /docs/reference/webos-service-library/webos-service-library-api-reference/ 301!
@@ -125,8 +125,8 @@
/develop/web-app-dev/built-in-web-app/develop-configure-web-app/ /docs/tutorials/web-apps/developing-built-in-web-apps/ 301!
/develop/web-app-dev/built-in-web-app/build-test-web-app/ /docs/tutorials/web-apps/developing-built-in-web-apps/ 301!
/develop/web-app-dev/built-in-web-app/release-web-app/ /docs/tutorials/web-apps/developing-built-in-web-apps/ 301!
-/develop/web-app-dev/external-web-apps/building-your-first-web-app/ /docs/tutorials/web-apps/developing-external-web-apps/ 301!
-/develop/web-app-dev/external-web-apps/debugging-web-app-cli/ /docs/tutorials/web-apps/developing-external-web-apps/ 301!
+/develop/web-app-dev/external-web-apps/building-your-first-web-app/ /docs/tutorials/web-apps/developing-downloadable-web-apps/ 301!
+/develop/web-app-dev/external-web-apps/debugging-web-app-cli/ /docs/tutorials/web-apps/developing-downloadable-web-apps/ 301!
/develop/qml-apps/qml-apps-overview/ /docs/guides/development/qml-apps/qml-app-overview/ 301!
/develop/qml-apps/develop-configure-qml-apps/ /docs/tutorials/qml-apps/developing-built-in-qml-apps/ 301!
/develop/qml-apps/built-test-qml-apps/ /docs/tutorials/qml-apps/developing-built-in-qml-apps/ 301!
@@ -139,8 +139,8 @@
/develop/js-services/built-in-js-service/develop-configure-js-service/ /docs/tutorials/js-services/developing-built-in-js-services/ 301!
/develop/js-services/built-in-js-service/build-test-js-service/ /docs/tutorials/js-services/developing-built-in-js-services/ 301!
/develop/js-services/built-in-js-service/release-js-service/ /docs/tutorials/js-services/developing-built-in-js-services/ 301!
-/develop/js-services/external-js-services/creating-js-services/ /docs/tutorials/js-services/developing-external-js-services/ 301!
-/develop/js-services/external-js-services/debug-js-service/ /docs/tutorials/js-services/developing-external-js-services/ 301!
+/develop/js-services/external-js-services/creating-js-services/ /docs/tutorials/js-services/developing-downloadable-js-services/ 301!
+/develop/js-services/external-js-services/debug-js-service/ /docs/tutorials/js-services/developing-downloadable-js-services/ 301!
/develop/js-services/calling-js-service/ /docs/guides/development/js-services/calling-js-services/ 301!
/develop/js-services/requesting-subscription/ /docs/guides/development/js-services/requesting-subscriptions/ 301!
/develop/js-services/using-nodejs-module/ /docs/guides/development/js-services/using-node-js-modules/ 301!
diff --git a/static/images/docs/tutorials/js-services/chrome-inspect-setup.png b/static/images/docs/tutorials/js-services/chrome-inspect-setup.png
new file mode 100644
index 00000000..99336bcc
Binary files /dev/null and b/static/images/docs/tutorials/js-services/chrome-inspect-setup.png differ
diff --git a/static/images/docs/tutorials/js-services/inspect-button.png b/static/images/docs/tutorials/js-services/inspect-button.png
new file mode 100644
index 00000000..111b38f4
Binary files /dev/null and b/static/images/docs/tutorials/js-services/inspect-button.png differ
diff --git a/static/images/docs/tutorials/js-services/launched-debugging-window.png b/static/images/docs/tutorials/js-services/launched-debugging-window.png
new file mode 100644
index 00000000..93b76102
Binary files /dev/null and b/static/images/docs/tutorials/js-services/launched-debugging-window.png differ
diff --git a/static/images/docs/tutorials/qml-apps/launched-qml-app.png b/static/images/docs/tutorials/qml-apps/launched-qml-app.png
new file mode 100644
index 00000000..78ae4fca
Binary files /dev/null and b/static/images/docs/tutorials/qml-apps/launched-qml-app.png differ
diff --git a/static/images/docs/tutorials/web-apps/launched-web-app.jpg b/static/images/docs/tutorials/web-apps/launched-web-app.jpg
new file mode 100644
index 00000000..5d5ce048
Binary files /dev/null and b/static/images/docs/tutorials/web-apps/launched-web-app.jpg differ