Quick application pit guide

# Quick application pit guide

Create project

1. PC install toolkit tools (similar to vue-cli and create-react-app)

   A computer is required to install node version. Recommended v6.11.3 and above
   . Note: Do not use 8.0.* version. The internal ZipStream implementation of this version is incompatible with the node-archive package, which will cause an error

   安装hap-toolkit：
   npm install -g hap-toolkit

   hap -V 检查安装是否成功

2. Create your first quick app project

       hap init <ProjectName>

   Directory structure: This project already contains the initial code of the project configuration and sample pages. The main structure of the project root directory is as follows.

   ├── sign                      rpk 包签名模块
   │   └── debug                 调试环境
   │       ├── certificate.pem   证书文件
   │       └── private.pem       私钥文件
   ├── src
   │   ├── Common                公用的资源和组件文件
   │   │   └── logo.png          应用图标
   │   ├── Demo                  页面目录
   │   |   └── index.ux          页面文件，可自定义页面名称
   │   ├── app.ux                APP 文件，可引入公共脚本，暴露公共数据和方法等
   │   └── manifest.json         项目配置文件，配置应用图标、页面路由等
   └── package.json              定义项目需要的各种模块及配置信息

3. Install dependencies
   npm install

4. Start the project (there may be a pit here)

   Compile:
   npm run build

   The final product is in the dist directory generated by compilation: the rpk file will be downloaded and installed by the mobile phone before the project can be started.

   Follow the official documentation and keep going. When npm run build, an error is reported: "Cannot find module '.../node_modules/hap-tools/webpack.config.js'"

   Mainly because after creating the project, there is a node_module folder, which contains a hap-tools package. If npm install installs dependencies, the higher version of npm may clear the original package of node_module and then install the dependencies. In this case, just install hap-tools manually.

   
   npm install hap-tools
   

   Or please run hap update --force once (you don't need to follow the prompts to run npm install again after execution) and that's it.

If you want to monitor source code changes and implement automatic compilation, you can run the npm run watch command.

npm run watch

After the compilation and packaging are successful, folders will be generated in the project root directory: build, dist

• build: temporary output, including compiled page js, pictures, etc.
• dist: The final output, including the rpk file. In fact, the resources in the build directory are packaged and compressed into a file with the suffix rpk. This rpk file is the final output of the project after compilation (equivalent to an app installation package)

1. Preview the quick application: mobile phone installation debugger, platform preview version debugger [(official address)][1], or click the link below to download directly:

   Debugger:
   [Debugger download address][2]
   [Platform Preview Debugger][3]

After the installation is complete, open the quick application debugger, the interface is as follows:

[enter image description here][4]

You can see that there are two installation methods: scan code installation and local installation.

• Scan code installation: Open a terminal window in the root directory of the project and execute:

npm run server  

The execution result is as follows:
[QR code][5]

You can also open the server address in the browser to view the QR code just produced. Click the scan code installation button of the quick application debugger (note: some models may fail to install, it is recommended to use a Xiaomi mobile phone).

• local installation

• Copy the rpk package to the phone

  Will

• Install the rpk package locally

  Open the debugger --> click "local installation", select the rpk package in the mobile phone file system, and automatically arouse the platform to run the rpk package to check the effect

• Preview: After prompting that the installation is successful, you can click the online update preview effect of the debugging platform.

Code editing configuration

For Visual Studio Code, configuring syntax support only requires installing the Hap Extensionplugin .

development and debugging

• Remote debugging (computer debugging):
  Remember that we asked everyone to npm run serverstart the . Here, we rely on this server to realize computer debugging.
  After the quick app is successfully installed, click the Start debugging button, and the computer will open a debugging page synchronized with the mobile phone in the default browser. The page opens the chrome devtools debugging interface by default, which is convenient for everyone to debug the code.
  Note : When using remote debugging, please make sure that the mobile phone and the PC are in the same local area network, and the mobile phone does not open the proxy, otherwise the quick application cannot be opened.

• Log output
  Some students will find that when they develop a quick application for the first time, executing log printing in the code console.log（）has no effect. This is because the log printing of the quick application needs to be configured, and the log printing is not allowed by default.

Open the manifest.json of the src folder in the project root directory, find the config configuration, and modify the code as follows to achieve log printing:

　"config": {
  　　"logLevel": "debug"
  }

• At this point, our first quick app has been developed. If you want to know about other advanced functions, you can check the quick app development documentation.