# SmartSafeKitchenSmartGasDetection应用代码介绍

## 一、简介

#### 1、样例效果

SmartSafeKitchenSmartGasDetection应用是基于OpenHarmony SDK开发的安装在L0(BES2600)设备上的应用,应用主要功能是检测燃气浓度，当达到预设阈值跳转到警报界面；

![show](resources/gas_detection.gif)

#### 2.涉及OpenHarmony技术特性

- JS UI  

####  3.支持OpenHarmony版本

OpenHarmony 3.1 Release

#### 4.支持开发板

- 欧智通BES2600WM（BES2600）开发板套件

## 二、快速上手


#### 1.应用编译环境准备

- 下载DevEco Studio 3.0.0.601版本 [下载地址](https://developer.harmonyos.com/cn/develop/deveco-studio#download_beta)；
- 配置SDK，参考 [配置OpenHarmony-SDK](https://gitee.com/openharmony/docs/blob/OpenHarmony-3.1-Beta/zh-cn/application-dev/quick-start/configuring-openharmony-sdk.md)
- DevEco Studio 点击File -> Open 导入本下面的代码工程Contacts

#### 2.项目下载和导入

项目地址：https://gitee.com/openharmony-sig/knowledge_demo_smart_home/tree/master/FA/SmartSafeKitchenSmartGasDetection

1）git下载

```
git clone git@gitee.com:openharmony-sig/knowledge_demo_smart_home.git
```

2）项目导入

打开DevEco Studio,点击File->Open->下载路径FA/SmartSafeKitchenSmartGasDetection


  **PS**与[SmartSafeKitchenSmartWindow](../SmartSafeKitchenSmartWindow/README.md)应用组合使用，两个应用的config.json中的bundleName必须保持一致

#### 3.生成Hap包

1）在DevEco Studio的SDK中添加@system.communicationkit.d.ts文件。

将@system.communicationkit.d.ts文件（源文件目录：~/knowledge_demo_smart_home/dev/team_x/common/communicationkit/js_api/@system.communicationkit.d.ts）拷贝到DevEco Studio的SDK中（目标目录：OpenHarmony\Sdk\js\3.1.0.0\api\phone）。OpenHarmony SDK目录在DevEco Studio安装时，由用户配置，该目录位置可在设置(ctrl+alt+s)中查找

2）生成Hap包

在主菜单栏点击Build > Build Hap(s)/App(s)

![show](resources/build_hap.jpg)

#### 4.将JS应用合入工程。

将js应用合入工程，设备端环境准备，源码下载，编译，烧录设备，应用部署的完整步骤请参考[这里](../../docs/smart_safe_kitchen-gas_detection/README.md)

##  三、关键代码解读

#### 1.目录结构

```
.
`-- src
    `-- main
        |-- config.json //应用配置文件
        |-- js
        |   `-- default
        |       |-- app.js   // 应用程序入口
        |       |-- common   // 公共资源
        |       |   |-- ic_back.png
        |       |   |-- icon_faqi.png
        |       |   |-- icon_faxian.png
        |       |   |-- icon_jia_sel.png
        |       |   |-- icon_jian_sel.png
        |       |   |-- icon_jingbao.png
        |       |   |-- icon_liuzhuan.png
        |       |   |-- icon_shuru.png
        |       |   |-- icon_wifi_off.png
        |       |   |-- icon_wifi_on.png
        |       |   `-- icon_yunxu.png
        |       |-- i18n   // 多语言文件
        |       |   |-- en-US.json
        |       |   `-- zh-CN.json
        |       `-- pages
        |           |-- dm     // 设备认证界面
        |           |   |-- dm.css
        |           |   |-- dm.hml
        |           |   `-- dm.js
        |           |-- index    // 首页界面
        |           |   |-- index.css
        |           |   |-- index.hml
        |           |   `-- index.js
        |           `-- warn     // 报警界面
        |               |-- warn.css
        |               |-- warn.hml
        |               `-- warn.js
        `-- resources
            |-- base
            |   |-- element
            |   |   `-- string.json
            |   `-- media
            |       |-- icon.png
            |       `-- icon_small.png
            `-- rawfile

```


#### 2.关键代码

- UI界面

  index.hml,

  dm.hml,

  warn.hml

##  四、参考链接

- [OpenHarmony 基于JS扩展的类Web开发范式](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-js/Readme-CN.md)
- [OpenHarmony应用接口](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis/Readme-CN.md)