基于HarmonyOS Next的智能生活服务应用开发全攻略

基于HarmonyOS Next的智能生活服务应用开发全攻略

一、AppGallery Connect服务集成准备

1.1 开发环境搭建

首先确保已安装最新版DevEco Studio和HarmonyOS SDK。创建新项目时选择"Application"模板，设备类型选择"Phone"，语言选择ArkTS。

// 检查环境配置的示例代码
import hilog from '@ohos.hilog';

@Entry
@Component
struct EnvCheckPage {
  build() {
    Column() {
      Text('环境检查')
        .fontSize(24)
        .margin({ bottom: 20 })
      
      Button('验证开发环境')
        .onClick(() => {
          try {
            hilog.info(0x0000, 'EnvCheck', '环境验证通过');
            // 这里可以添加更多环境检查逻辑
          } catch (error) {
            hilog.error(0x0000, 'EnvCheck', '环境验证失败: %{public}s', error.message);
          }
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

1.2 AppGallery Connect项目配置

1. 登录AppGallery Connect控制台
2. 创建新项目并添加HarmonyOS应用
3. 下载agconnect-services.json配置文件
4. 将配置文件放置于entry/src/main/resources/rawfile/目录

二、用户认证模块开发

2.1 手机号快捷认证实现

// 手机号认证组件示例
import { AGConnectAuth, PhoneAuthProvider } from '@hw-agconnect/auth-ohos';

@Entry
@Component
struct PhoneLogin {
  @State phoneNumber: string = ''
  @State verifyCode: string = ''
  @State countdown: number = 0
  private timer: number = 0

  // 发送验证码
  sendCode() {
    if (!this.phoneNumber) return
    
    const provider = PhoneAuthProvider.createProvider()
    provider.requestVerifyCode(this.phoneNumber, {
      action: 0, // 0:登录/注册 1:重置密码
      locale: 'zh_CN',
      sendInterval: 30
    }).then(() => {
      hilog.info(0x0000, 'Auth', '验证码发送成功')
      this.startCountdown()
    }).catch((err) => {
      hilog.error(0x0000, 'Auth', '发送验证码失败: %{public}s', err.message)
    })
  }

  // 倒计时处理
  startCountdown() {
    this.countdown = 60
    this.timer = setInterval(() => {
      if (this.countdown <= 0) {
        clearInterval(this.timer)
        return
      }
      this.countdown--
    }, 1000)
  }

  // 验证码登录
  loginWithCode() {
    const credential = PhoneAuthProvider.credentialWithVerifyCode(
      this.phoneNumber, 
      this.verifyCode
    )
    
    AGConnectAuth.getInstance().signIn(credential).then((user) => {
      hilog.info(0x0000, 'Auth', '登录成功: %{public}s', user.uid)
      // 跳转到主页
    }).catch((err) => {
      hilog.error(0x0000, 'Auth', '登录失败: %{public}s', err.message)
    })
  }

  build() {
    Column({ space: 15 }) {
      TextInput({ placeholder: '请输入手机号' })
        .width('80%')
        .onChange((value: string) => {
          this.phoneNumber = value
        })

      Row({ space: 10 }) {
        TextInput({ placeholder: '验证码' })
          .width('60%')
          .onChange((value: string) => {
            this.verifyCode = value
          })

        Button(this.countdown > 0 ? `${this.countdown}s` : '获取验证码')
          .width('40%')
          .enabled(this.countdown === 0)
          .onClick(() => this.sendCode())
      }
      .width('80%')

      Button('登录')
        .width('80%')
        .onClick(() => this.loginWithCode())
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

三、云数据库集成

3.1 数据模型定义与操作

// 生活服务数据模型操作示例
import { AGConnectCloudDB } from '@hw-agconnect/database-ohos';

// 定义服务数据模型
class ServiceItem {
  id: string = ''
  name: string = ''
  category: string = ''
  price: number = 0
  rating: number = 0
  description?: string
}

@Entry
@Component
struct ServiceList {
  private cloudDB: AGConnectCloudDB | null = null
  @State serviceList: ServiceItem[] = []

  aboutToAppear() {
    this.initCloudDB()
  }

  // 初始化云数据库
  async initCloudDB() {
    try {
      this.cloudDB = AGConnectCloudDB.getInstance()
      await this.cloudDB.createObjectType('ServiceItem')
      await this.cloudDB.openCloudDBZone('services')
      this.queryServices()
    } catch (error) {
      hilog.error(0x0000, 'CloudDB', '初始化失败: %{public}s', error.message)
    }
  }

  // 查询服务列表
  async queryServices() {
    if (!this.cloudDB) return
    
    const query = this.cloudDB.createQuery(ServiceItem)
    const snapshot = await this.cloudDB.executeQuery(query)
    this.serviceList = snapshot.getSnapshotObjects()
  }

  // 添加新服务
  async addService(item: ServiceItem) {
    if (!this.cloudDB) return
    
    try {
      await this.cloudDB.executeUpsert(item)
      hilog.info(0x0000, 'CloudDB', '服务添加成功')
      this.queryServices() // 刷新列表
    } catch (error) {
      hilog.error(0x0000, 'CloudDB', '添加失败: %{public}s', error.message)
    }
  }

  build() {
    Column() {
      List({ space: 10 }) {
        ForEach(this.serviceList, (item: ServiceItem) => {
          ListItem() {
            ServiceCard({ item: item })
          }
        })
      }
      .width('100%')
      .layoutWeight(1)

      Button('添加测试数据')
        .margin(10)
        .onClick(() => {
          const newItem = new ServiceItem()
          newItem.id = Date.now().toString()
          newItem.name = '测试服务'
          newItem.category = '家政'
          newItem.price = 99
          newItem.rating = 4.5
          this.addService(newItem)
        })
    }
  }
}

@Component
struct ServiceCard {
  @Prop item: ServiceItem

  build() {
    Row() {
      Column() {
        Text(this.item.name)
          .fontSize(18)
          .fontWeight(FontWeight.Bold)
        
        Text(`类别: ${this.item.category}`)
          .fontSize(14)
          .margin({ top: 5 })
        
        Row() {
          Text(`¥${this.item.price}`)
            .fontColor(Color.Red)
          
          Text(`评分: ${this.item.rating}`)
            .margin({ left: 15 })
        }
        .margin({ top: 5 })
      }
      .margin(10)
    }
    .width('90%')
    .padding(10)
    .borderRadius(8)
    .backgroundColor('#FFF')
    .margin({ top: 5, bottom: 5 })
  }
}

四、应用实战：预约服务功能

4.1 完整预约流程实现

// 服务预约模块实现
import { AGConnectFunction } from '@hw-agconnect/function-ohos';

@Entry
@Component
struct ServiceBooking {
  @State selectedService: ServiceItem | null = null
  @State bookingDate: string = new Date().toLocaleDateString()
  @State bookingTime: string = '10:00'
  @State address: string = ''
  @State contacts: string = ''
  @State phone: string = ''

  // 提交预约
  submitBooking() {
    if (!this.selectedService || !this.address || !this.contacts || !this.phone) {
      hilog.warn(0x0000, 'Booking', '请填写完整信息')
      return
    }

    const bookingData = {
      serviceId: this.selectedService.id,
      serviceName: this.selectedService.name,
      bookingTime: `${this.bookingDate} ${this.bookingTime}`,
      address: this.address,
      contacts: this.contacts,
      phone: this.phone,
      status: 'pending',
      createTime: new Date().toISOString()
    }

    // 调用云函数处理预约逻辑
    AGConnectFunction.getInstance()
      .wrap('bookService')
      .call(bookingData)
      .then((result) => {
        const response = result.getValue()
        hilog.info(0x0000, 'Booking', '预约成功: %{public}s', response.orderId)
        // 跳转到订单详情页
      })
      .catch((error) => {
        hilog.error(0x0000, 'Booking', '预约失败: %{public}s', error.message)
      })
  }

  build() {
    Column({ space: 15 }) {
      if (this.selectedService) {
        ServiceCard({ item: this.selectedService })
        
        Text('预约信息').fontSize(18).margin({ top: 20 })
        
        DatePicker({
          start: new Date(),
          end: new Date(2025, 11, 31)
        })
        .onChange((value: DatePickerResult) => {
          this.bookingDate = `${value.year}-${value.month}-${value.day}`
        })
        
        TimePicker()
          .onChange((value: TimePickerResult) => {
            this.bookingTime = `${value.hour}:${value.minute}`
          })
        
        TextInput({ placeholder: '服务地址' })
          .onChange((value: string) => {
            this.address = value
          })
        
        TextInput({ placeholder: '联系人' })
          .onChange((value: string) => {
            this.contacts = value
          })
        
        TextInput({ placeholder: '联系电话' })
          .onChange((value: string) => {
            this.phone = value
          })
        
        Button('确认预约')
          .width('80%')
          .onClick(() => this.submitBooking())
      } else {
        Text('请先选择服务').fontSize(18)
      }
    }
    .padding(20)
    .width('100%')
    .height('100%')
  }
}

五、应用发布与运营

5.1 应用打包与上架

1. 在DevEco Studio中选择Build > Generate Key and CSR生成签名证书
2. 配置签名信息到项目的build-profile.json5文件
3. 执行Build > Build HAP(s)/APP(s) > Build APP生成发布包
4. 登录AppGallery Connect提交应用审核

5.2 运营数据分析集成

// 集成应用数据分析
import { AGConnectAnalytics } from '@hw-agconnect/analytics-ohos';

// 在应用入口初始化
export default class AppAnalytics {
  static init() {
    AGConnectAnalytics.getInstance().setAnalyticsEnabled(true)
    // 设置用户属性
    AGConnectAnalytics.getInstance().setUserProfile('user_level', 'normal')
  }

  // 记录自定义事件
  static trackEvent(eventName: string, params?: Record<string, string>) {
    AGConnectAnalytics.getInstance().onEvent(eventName, params)
  }
}

// 在aboutToAppear中调用
AppAnalytics.init()
AppAnalytics.trackEvent('app_launch')

通过以上完整的开发流程，您已经掌握了基于HarmonyOS Next和AppGallery Connect开发生活服务类应用的核心技术。从用户认证到数据存储，从业务逻辑到运营分析，这些模块组合起来可以构建出功能丰富、体验优秀的智能生活服务应用。