#HarmonyOS NEXT体验官# 解锁智能家居：使用 HarmonyOS 实时获取传感器数据原创

SoraLuna

发布于 2024-8-9 12:49

浏览

2收藏

解锁智能家居：使用 HarmonyOS 实时获取传感器数据

本文将逐步带你创建一个 HarmonyOS 应用，实时获取并展示智能家居传感器数据。无论你是初学者还是有经验的开发者，本文都能帮助你轻松实现这一目标。

一. 创建你的智能家居项目

打开 DevEco Studio 并创建新项目
- 选择 Projects，点击 Create Project。
- 选择项目模板（例如 Empty Ability），点击 Next。
- 配置项目名称为 SmartHomeSensor，设置包名和保存位置，点击 Finish 完成。

#HarmonyOS NEXT体验官# 解锁智能家居：使用 HarmonyOS 实时获取传感器数据-鸿蒙开发者社区

二. 为应用赋予联网权限

添加网络权限

打开 src/main/module.json5 文件。

添加以下代码以请求网络权限：

 {
   "module": {
     "requestPermissions": [
       {
         "name": "ohos.permission.INTERNET"
       }
     ]
   }
 }

三. 构建页面和数据获取逻辑

创建传感器数据页面 MainAbility.ets

在 src/main/ets/components 目录下，新建 MainAbility.ets 文件。

编写代码，从服务器获取传感器数据并展示：

import { http } from '@kit.NetworkKit'
import { BusinessError } from '@kit.BasicServicesKit'

class SensorData {
  temp?: string
  info?: string
  datetime?: string
}

@Component
export struct MainAbility {
  @State sensorDataList: SensorData[] = []

  aboutToAppear(): void {
    this.fetchSensorData();
    // 每10秒钟更新一次数据
    setInterval(() => {
      this.fetchSensorData();
    }, 10000);
  }

  fetchSensorData(): void {
    let httpRequest = http.createHttp()
    let url = "http://192.168.1.10/smart_home.php"
    let promise = httpRequest.request(
      url,
      {
        method: http.RequestMethod.GET,
        connectTimeout: 60000,
        readTimeout: 60000,
        expectDataType: http.HttpDataType.STRING,
        usingCache: true,
        priority: 1,
        usingProtocol: http.HttpProtocol.HTTP1_1,
        usingProxy: false,
        header: {
          'Content-Type': 'application/json'
        }
      })
    promise.then((data) => {
      if (data.responseCode === http.ResponseCode.OK) {
        console.info('Result:' + data.result)
        this.sensorDataList = JSON.parse(data.result as string)
      }
    }).catch((err: BusinessError) => {
      console.info('error:' + JSON.stringify(err))
    })
  }

  build() {
    Column() {
      List() {
        ForEach(this.sensorDataList, (item: SensorData) => {
          ListItem() {
            Column() {
              Text(item.datetime || '')
                .margin({ bottom: 5 })
              Text(item.temp || '')
                .margin({ bottom: 5 })
              Text(item.info || '')
            }
          }
          .padding(20)
          .height(100)
        }, (item: SensorData) => item.datetime)
      }
      .divider({ strokeWidth: 2 })
    }
    .width('100%')
    .height('100%')
  }
}

四. 在主页面展示传感器数据

导入并使用 MainAbility 组件

打开 src/main/ets/pages/Index.ets 文件，修改内容以展示传感器数据：

import { MainAbility } from '../components/MainAbility'

@Entry
@Component
struct Index {
  build() {
    Column() {
      MainAbility()
        .width('100%')
        .height('100%')
    }
  }
}