# How to Develop
- [Overview](#section117101122133917)
- [Project Structure](#section163058534218)
- [Defining the UI of the Network Configuration Atomic Service](#section129531555424)
## Overview
The **OneHop Device Ability \(JS\)** template helps you implement the complete process of **OneHop, network configuration, and device control**. By default, the template project presents the effect of a smart fan. You can customize the device by referring to [Defining the UI of the Network Configuration Atomic Service](#section129531555424).
The template project consists of two parts:
**Network configuration atomic service \(entry module\)**
**Device control atomic service \(control module\)**
This document provides guidance on developing the network configuration atomic service \(entry module\). For details about how to develop the device control atomic service \(control module\), see [Development Guidelines on the Device Control Atomic Service](guide-atomic-service-device-ctrl-overview.md).
## Project Structure
The following figure shows the directory structure of the **entry** module in the **OneHop Device Ability \(JS\)** template project.
The following table describes the classes in the source code directory.
Class
Description
Java
MyApplication
Application entry class.
MainAbility
Entry class to start the JS page and process device information read from an NFC tag.
JS
default/pages/device/device.js
Device introduction page, which is displayed after a OneHop operation.
default/pages/netconfig/netconfig.js
Network configuration page, which is responsible for the logic related to network configuration. This page is displayed after you click Configure network on the device introduction page.
## Defining the UI of the Network Configuration Atomic Service
1. Process the product ID read from the NFC tag in the **onStart** method of the **MainAbility**. **You can map productId to a different device type and change productName to a specific device name**. By default, a smart fan is used.
```
@Override
public void onStart(Intent intent) {
intent.setParam("window_modal", 3);
setInstanceName(JS_MODULE);
Object productInfo = Objects.requireNonNull(intent.getParams()).getParam("productInfo");
if (productInfo != null) {
productId = (String) productInfo;
// Modify your product name according to your product ID in the NFC tag.
productName = "FAN";
}
}
```
2. Place the product diagram in the resource directory for UI display. **Note that the file name must be .png and the device name must be the same as the value of productName.**
The product diagram is displayed on the device introduction page and network configuration page.
3. Add **deviceType: 1** to the **goToControl** method of **entry\\src\\main\\js\\default\\pages\\netconfig\\netconfig.js** to improve the stability of network configuration.
```
goToControl() {
let target = {
bundleName: 'com.example.middleplatform.deviceoperate',
abilityName: 'com.example.middleplatform.ControlMainAbility',
deviceType: 1,
data: {
session_id: getApp(this).ConfigParams.deviceInfo.sessionId,
product_id: getApp(this).Product.productId,
product_name: getApp(this).Product.productName
}
}
FeatureAbility.startAbility(target);
app.terminate();
}
```