DEV Community: linzhongxue

Building a Fitness and Health App Based on HarmonyOS Next: Creating an Intelligent Health Data Tracking System

linzhongxue — Wed, 11 Jun 2025 03:39:19 +0000

Building a Fitness and Health App Based on HarmonyOS Next: Creating an Intelligent Health Data Tracking System

Introduction: New Opportunities in Smart Health Applications

With growing public health awareness, fitness and health applications have become essential in the mobile ecosystem. HarmonyOS Next provides developers with comprehensive health data management capabilities and cloud collaboration solutions. This tutorial guides you through building a fully functional fitness app from scratch, covering the entire workflow from health data collection to cloud synchronization and visual presentation.

1. Development Environment and Project Initialization

1.1 Creating a HarmonyOS Next Project

In DevEco Studio, create a new project:

Select the "Application" template
Choose ArkTS as the language
Select "Phone" as the device type

# Project directory structure  
MyHealthApp/  
├── entry/  
│   ├── src/  
│   │   ├── main/  
│   │   │   ├── ets/  
│   │   │   │   ├── pages/          # Page components  
│   │   │   │   ├── model/          # Data models  
│   │   │   │   └── service/        # Service layer

1.2 Integrating AppGallery Connect Services

In the AGC console, create a project and enable:
- Authentication Service (phone/email login)
- Cloud DB (health data storage)
- Cloud Storage (user avatars)
Add dependencies in build.gradle:

dependencies {  
  implementation 'io.agconnect.agconnect-auth-harmony:1.8.0.300' // Auth  
  implementation 'io.agconnect.agconnect-cloud-database-harmony:1.5.0.10' // Cloud DB  
}

2. Health Data Collection and Management

2.1 Obtaining Health Data Permissions

Add permissions in module.json5:

"requestPermissions": [  
  {  
    "name": "ohos.permission.health.READ_HEALTH_DATA",  
    "reason": "Access step count data"  
  }  
]

2.2 Step Data Collection Implementation

// service/HealthService.ets  
import { health } from '@kit.HealthKit';  

export class HealthService {  
  // Get today's step count  
  async getTodaySteps(): Promise<number> {  
    try {  
      const options: health.HealthDataOptions = {  
        startTime: new Date().setHours(0, 0, 0, 0), // Midnight  
        endTime: new Date().getTime(),  
        dataType: health.DataType.DATA_TYPE_STEP_COUNT  
      };  

      const result = await health.getHealthData(options);  
      return result.reduce((sum, item) => sum + item.value, 0);  
    } catch (err) {  
      console.error("Failed to get steps:", err);  
      return 0;  
    }  
  }  
}

3. User Authentication and Data Synchronization

3.1 User Login Module

// service/AuthService.ets  
import agconnect from '@hw-agconnect/api-harmony';  
import '@hw-agconnect/auth-harmony';  

export class AuthService {  
  // Phone login  
  async phoneLogin(phone: string, code: string): Promise<boolean> {  
    try {  
      const credential = agconnect.auth.PhoneAuthProvider.credentialWithVerifyCode(  
        phone,   
        null,   
        code  
      );  
      await agconnect.auth().signIn(credential);  
      return true;  
    } catch (err) {  
      console.error("Login failed:", err);  
      return false;  
    }  
  }  

  getCurrentUser() {  
    return agconnect.auth().currentUser;  
  }  
}

3.2 Syncing Health Data to Cloud

// service/CloudService.ets  
import agconnect from '@hw-agconnect/api-harmony';  
import { cloud } from '@hw-agconnect/database-harmony';  

@cloud.object  
export class HealthRecord {  
  @cloud.field()  
  userId: string = "";  

  @cloud.field()  
  steps: number = 0;  

  @cloud.field()  
  date: string = ""; // YYYY-MM-DD  
}  

export class CloudService {  
  private getCollection() {  
    const cloudDB = agconnect.cloudDB();  
    return cloudDB.cloudZone("HealthZone").collection(HealthRecord);  
  }  

  // Save daily data  
  async saveDailyRecord(record: HealthRecord) {  
    try {  
      const collection = this.getCollection();  
      await collection.upsert(record);  
      console.log("Data synced successfully");  
    } catch (err) {  
      console.error("Sync failed:", err);  
    }  
  }  
}

4. Data Visualization

4.1 Step Trend Chart Component

// components/StepChart.ets  
@Component  
struct StepChart {  
  @State data: Array<number> = [3500, 4200, 7800, 6500, 8900, 9200];  

  build() {  
    Column() {  
      Row() {  
        Text("Weekly Step Trend").fontSize(18).fontWeight(500)  
        Text(`Total: ${this.data.reduce((a, b) => a + b)} steps`).margin({ left: 10 })  
      }  

      Grid() {  
        ForEach(this.data, (value, index) => {  
          GridItem() {  
            Column({ space: 5 }) {  
              Stack() {  
                Column()  
                  .width(20)  
                  .height(value / 30)  
                  .backgroundColor('#FF6A6A')  
                  .borderRadius(10)  
              }.height(150).align(Alignment.Bottom)  

              Text(['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'][index])  
                .fontSize(14)  
            }.alignItems(HorizontalAlign.Center)  
          }  
        })  
      }  
      .columnsTemplate('1fr 1fr 1fr 1fr 1fr 1fr 1fr')  
      .height(200)  
    }  
  }  
}

4.2 Health Dashboard Integration

// pages/HealthDashboard.ets  
import { HealthService } from '../service/HealthService';  
import { StepChart } from '../components/StepChart';  

@Entry  
@Component  
struct HealthDashboard {  
  @State steps: number = 0;  
  private healthService: HealthService = new HealthService();  

  aboutToAppear() {  
    this.loadData();  
  }  

  async loadData() {  
    this.steps = await this.healthService.getTodaySteps();  
  }  

  build() {  
    Column({ space: 20 }) {  
      // Today's steps card  
      Row() {  
        Image($r('app.media.footsteps'))  
          .width(40)  
          .height(40)  
        Column() {  
          Text("Today's Steps").fontSize(16)  
          Text(`${this.steps}`).fontSize(28).fontWeight(700)  
        }  
      }  
      .padding(20)  
      .backgroundColor('#FFFFFF')  
      .borderRadius(16)  

      // Weekly chart  
      StepChart()  

      // Goal progress  
      Progress({  
        value: this.steps,  
        total: 8000,  
        type: ProgressType.Ring  
      })  
        .width(150)  
        .height(150)  
    }  
    .padding(20)  
    .backgroundColor('#F5F5F5')  
  }  
}

5. Feature Extensions

5.1 Fitness Reminders

// utils/ReminderManager.ets  
import { reminderAgent } from '@kit.ReminderAgentKit';  

export async function setDailyReminder() {  
  try {  
    const reminder: reminderAgent.ReminderRequest = {  
      reminderType: reminderAgent.ReminderType.REMINDER_TYPE_TIMER,  
      triggerTime: { hour: 19, minute: 30 },  
      actionButton: [  
        { title: 'Start Workout', type: reminderAgent.ActionButtonType.ACTION_BUTTON_TYPE_CLOSE }  
      ],  
      wantAgent: {  
        pkgName: "com.example.myhealthapp",  
        abilityName: "MainAbility"  
      },  
      title: "Daily Fitness Reminder",  
      content: "You haven't completed today's goal!"  
    };  

    await reminderAgent.publishReminder(reminder);  
  } catch (err) {  
    console.error("Reminder setup failed:", err);  
  }  
}

5.2 Health Data Sharing

// service/ShareService.ets  
import { share } from '@kit.ShareKit';  

export class ShareService {  
  async shareHealthData(summary: string) {  
    try {  
      const shareData: share.ShareData = {  
        type: share.ShareType.TEXT,  
        text: `My Health Report: ${summary}`  
      };  

      await share.share(shareData);  
    } catch (err) {  
      console.error("Share failed:", err);  
    }  
  }  
}

6. Optimization Best Practices

6.1 Performance Optimization

// Data caching  
import { dataPreferences } from '@kit.DataPreferencesKit';  

const PREF_KEY = 'healthCache';  

async function cacheSteps(steps: number) {  
  await dataPreferences.put(PREF_KEY, 'dailySteps', steps);  
}

6.2 User Experience Enhancements

// Achievement system  
calculateBadges(steps: number) {  
  if (steps > 10000) return 'gold';  
  if (steps > 8000) return 'silver';  
  if (steps > 5000) return 'bronze';  
  return '';  
}

Conclusion: Building Next-Gen Health Experiences

Through this tutorial, we implemented core features:

Local health data collection with permission management
User authentication and cloud synchronization
Multi-dimensional data visualization
Fitness reminders and social sharing

HarmonyOS Next's health framework combined with AppGallery Connect's BaaS capabilities provides an out-of-the-box solution. Recommended next steps:

Integrate Huawei Health Kit for richer data
Use A/B testing to optimize fitness plans
Develop cross-device features with wearables

Full project code: github.com/example/health-app-harmonyos

(Note: Code samples use HarmonyOS SDK. Ensure latest SDK for deployment)

Developing a Fitness & Health App on HarmonyOS Next: Heart Rate Monitoring and Health Reporting System

linzhongxue — Wed, 11 Jun 2025 03:38:03 +0000

Developing a Fitness & Health App on HarmonyOS Next: Heart Rate Monitoring and Health Reporting System

This article explores how to build a feature-rich fitness and health application using the HarmonyOS SDK and AppGallery Connect. We’ll focus on core functionalities: real-time heart rate monitoring, cloud data synchronization, health report generation, and an achievement incentive system.

1. Core Feature Design and Tech Stack

Core Modules:

Heart Rate Monitoring: Capture real-time heart rate data using device sensors.
Data Sync: Securely store heart rate data in AppGallery Connect Cloud DB.
Health Reports: Analyze data using cloud functions to generate daily/weekly reports.
Achievement System: Display leaderboards and badges based on activity data.

Tech Stack:

Frontend: HarmonyOS ArkTS UI framework.
Data Storage: AppGallery Connect Cloud DB (NoSQL).
Backend Logic: AppGallery Connect Cloud Functions.
Data Collection: HarmonyOS Sensor Framework.

2. Real-Time Heart Rate Monitoring (ArkTS)

1. Permission Request & Sensor Initialization

// pages/HeartRateMonitor.ets  
import sensor from '@ohos.sensor';  
import abilityAccessCtrl, { Permissions } from '@ohos.abilityAccessCtrl';  

// 1. Dynamically request heart rate sensor permission  
async function requestPermission(): Promise<void> {  
  try {  
    let atManager = abilityAccessCtrl.createAtManager();  
    let permission: Permissions = 'ohos.permission.HEALTH_DATA';  
    await atManager.requestPermissionsFromUser(getContext(this), [permission]);  
    console.info('Heart rate permission granted');  
  } catch (err) {  
    console.error(`Permission request failed: ${err.code}, ${err.message}`);  
  }  
}  

// 2. Initialize heart rate sensor  
let heartRateSensor: sensor.HeartRateResponse | null = null;  

function initHeartRateSensor(): void {  
  try {  
    // Get sensor instance  
    heartRateSensor = sensor.getSensor(sensor.SensorId.HEART_RATE);  
    if (!heartRateSensor) {  
      console.error('Device lacks heart rate sensor');  
      return;  
    }  

    // Set data callback  
    heartRateSensor.on('data', (data: sensor.HeartRateResponse) => {  
      if (data.heartRate) {  
        // Update UI (assumes @State heartRate: number)  
        this.heartRate = data.heartRate;  
        console.info(`Real-time heart rate: ${this.heartRate} bpm`);  
        // Sync data to cloud  
        this.uploadHeartRateData(this.heartRate);  
      }  
    });  

    // Error handling  
    heartRateSensor.on('error', (err: BusinessError) => {  
      console.error(`Sensor error: ${err.code}, ${err.message}`);  
    });  
  } catch (err) {  
    console.error(`Sensor init failed: ${err.code}, ${err.message}`);  
  }  
}  

// 3. Start/stop monitoring  
function startMonitoring(): void {  
  if (heartRateSensor) {  
    try {  
      // Set sampling rate (NORMAL ≈ 5s intervals)  
      heartRateSensor.setInterval(sensor.Interval.NORMAL);  
      heartRateSensor.start();  
    } catch (err) {  
      console.error(`Start failed: ${err.code}, ${err.message}`);  
    }  
  }  
}  

function stopMonitoring(): void {  
  if (heartRateSensor) {  
    try {  
      heartRateSensor.stop();  
    } catch (err) {  
      console.error(`Stop failed: ${err.code}, ${err.message}`);  
    }  
  }  
}  

// Initialize on page display  
aboutToAppear(): void {  
  requestPermission().then(() => {  
    initHeartRateSensor();  
  });  
}  

// Release sensor on page hide  
aboutToDisappear(): void {  
  stopMonitoring();  
}

Code Notes:

Permissions: Uses abilityAccessCtrl to request HEALTH_DATA dynamically.
Sensor Initialization: Retrieves sensor via sensor.getSensor().
Data Callback: Updates UI and triggers cloud upload when new data arrives.
Lifecycle Management: Starts/stops monitoring with page visibility to optimize performance.

3. Syncing Data to AppGallery Connect Cloud DB

1. Cloud DB Setup

Create a project in AppGallery Connect console and enable Cloud DB.
Define object type HeartRateData with fields:
- userId: String
- heartRate: Integer
- timestamp: Date
Configure storage location and access rules (user-level permissions recommended).

2. ArkTS Data Upload Code

// utils/CloudDBManager.ets  
import cloud from '@ohos.cloud.agconnect';  
import { HeartRateData } from '../model/HeartRateData';  

// Initialize Cloud DB  
const agcCloud = cloud.agconnectCloudDb();  
const cloudDbZone = agcCloud.agconnectCloudDbZone();  

// Data model class (matches cloud object type)  
export class HeartRateData {  
  userId: string = '';  
  heartRate: number = 0;  
  timestamp: Date = new Date();  

  constructor(userId: string, heartRate: number, timestamp: Date) {  
    this.userId = userId;  
    this.heartRate = heartRate;  
    this.timestamp = timestamp;  
  }  

  static getObjectTypeName(): string {  
    return 'HeartRateData';  
  }  
}  

// Upload heart rate data  
export async function uploadHeartRateData(heartRate: number): Promise<void> {  
  try {  
    // 1. Get current user ID (requires AGC Auth)  
    const currentUser = getCurrentUser();  
    if (!currentUser) {  
      console.warn('Upload skipped: User not logged in');  
      return;  
    }  

    // 2. Create data object  
    const hrData = new HeartRateData(currentUser.uid, heartRate, new Date());  

    // 3. Upsert operation  
    const upsertResult = await cloudDbZone.upsert(HeartRateData.getObjectTypeName(), [hrData]);  
    console.info('Data uploaded!', upsertResult);  
  } catch (err) {  
    console.error(`Upload failed: ${err.code}, ${err.message}`);  
    // Add retry/local caching logic here  
  }  
}

Code Notes:

Model Definition: Local class mirrors cloud object structure.
Cloud DB Initialization: Prepares the database zone for operations.
Data Operation: upsert inserts or updates records in Cloud DB.
User Binding: Data linked to user ID via AppGallery Connect Auth.
Error Handling: Implements basic error logging (add retry logic for production).

4. Generating Health Reports (AppGallery Connect Cloud Function)

1. Cloud Function Logic (Node.js)

Scenario: Calculate daily resting/average/min/max heart rate at midnight.

// functions/generateDailyReport.js  
const agconnect = require('@agconnect/common-server');  
const cloudDb = require('@agconnect/database-server').cloudDb;  

exports.main = async function (event) {  
  agconnect.instance().init();  
  const agcCloudDb = cloudDb.cloudDb();  
  const cloudDbZone = agcCloudDb.agconnectCloudDbZone();  

  const calculateStats = async (userId) => {  
    // Get yesterday's data (00:00 - 23:59)  
    const yesterday = new Date();  
    yesterday.setDate(yesterday.getDate() - 1);  
    const startTime = new Date(yesterday.setHours(0, 0, 0, 0));  
    const endTime = new Date(yesterday.setHours(23, 59, 59, 999));  

    const query = cloudDb.CloudDBZoneQuery.where(HeartRateData)  
      .equalTo('userId', userId)  
      .greaterThanOrEqualTo('timestamp', startTime)  
      .lessThanOrEqualTo('timestamp', endTime);  

    const snapshot = await cloudDbZone.executeQuery(query);  
    const hrDataList = snapshot.getSnapshotObjects();  

    if (hrDataList.length === 0) return null;  

    const values = hrDataList.map(data => data.heartRate);  
    return {  
      date: startTime.toISOString().split('T')[0], // YYYY-MM-DD  
      min: Math.min(...values),  
      max: Math.max(...values),  
      avg: Math.round(values.reduce((a, b) => a + b, 0) / values.length),  
      resting: calculateRestingHr(values), // Custom calculation  
      userId: userId  
    };  
  };  

  const saveReport = async (report) => {  
    if (!report) return;  
    const reportObj = new HealthReport(report);  
    await cloudDbZone.upsert('HealthReport', [reportObj]);  
    console.log(`Report generated for ${report.userId} (${report.date})`);  
  };  

  // Target users (fetch dynamically in production)  
  const targetUsers = ['user123', 'user456'];   
  for (const userId of targetUsers) {  
    const report = await calculateStats(userId);  
    await saveReport(report);  
  }  
  return { message: 'Daily report task completed' };  
};  

// HealthReport model (define in Cloud DB)  
class HealthReport {  
  constructor({ date, min, max, avg, resting, userId }) {  
    this.reportDate = date;  
    this.minHeartRate = min;  
    this.maxHeartRate = max;  
    this.avgHeartRate = avg;  
    this.restingHeartRate = resting;  
    this.userId = userId;  
    this.generatedAt = new Date();  
  }  
}

Logic Breakdown:

Scheduled Trigger: Configured to run daily via timer trigger.
Data Query: Fetches a user’s heart rate data for the previous day.
Statistical Analysis: Computes min, max, average, and resting heart rate.
Report Storage: Saves results to the HealthReport object type for client access.

5. Achievement System & Leaderboards (ArkTS + Cloud DB Queries)

1. Querying User Activity Data (Steps Example)

// pages/Achievements.ets  
import { HealthReport } from '../model';  
import { cloudDbZone } from '../utils/CloudDBManager';  

@State dailyStats: HealthReport | null = null;  
@State stepCount: number = 0; // From step sensor  

// Fetch today's health report  
async function fetchTodayReport(): Promise<void> {  
  try {  
    const currentUser = getCurrentUser();  
    if (!currentUser) return;  

    const today = new Date().toISOString().split('T')[0];  
    const query = cloudDb.CloudDBZoneQuery.where(HealthReport)  
      .equalTo('userId', currentUser.uid)  
      .equalTo('reportDate', today);  

    const snapshot = await cloudDbZone.executeQuery(query);  
    const reports = snapshot.getSnapshotObjects();  
    if (reports.length > 0) this.dailyStats = reports[0];  
  } catch (err) {  
    console.error('Fetch report failed:', err);  
  }  
}  

// Badge logic (e.g., 7 consecutive days达标)  
checkConsistencyMedal(): void {  
  if (this.dailyStats && this.dailyStats.restingHeartRate < 60) {  
    this.consecutiveDays++;  
    if (this.consecutiveDays >= 7) {  
      console.log('Earned "Heart Steady Star" badge!');  
    }  
  } else {  
    this.consecutiveDays = 0;  
  }  
}  

// Step leaderboard (Top 10)  
@State leaderboard: { userId: string, steps: number }[] = [];  

async function fetchStepLeaderboard(): Promise<void> {  
  try {  
    const query = cloudDb.CloudDBZoneQuery.where('DailyStepSummary')  
      .equalTo('date', new Date().toISOString().split('T')[0])  
      .orderByDesc('totalSteps')  
      .limit(10);  

    const snapshot = await cloudDbZone.executeQuery(query);  
    this.leaderboard = snapshot.getSnapshotObjects();  
  } catch (err) {  
    console.error('Fetch leaderboard failed:', err);  
  }  
}

UI Rendering Snippet:

build() {  
  Column() {  
    // Display health report  
    if (this.dailyStats) {  
      Card() {  
        Text(`Today's Report (${this.dailyStats.reportDate})`)  
          .fontSize(18)  
        Row() {  
          Text(`Avg: ${this.dailyStats.avgHeartRate}`)  
          Text(`Min: ${this.dailyStats.minHeartRate}`)  
          Text(`Max: ${this.dailyStats.maxHeartRate}`)  
          Text(`Resting: ${this.dailyStats.restingHeartRate}`)  
        }.justifyContent(FlexAlign.SpaceAround)  
      }  
    }  

    // Badge display  
    if (this.hasMedal) {  
      Image($r('app.medal.heart_steady'))  
        .width(80)  
        .height(80)  
    }  

    // Leaderboard  
    List() {  
      ForEach(this.leaderboard, (item, index) => {  
        ListItem() {  
          Row() {  
            Text(`${index + 1}. User_${item.userId.slice(0, 4)}`)  
            Text(`Steps: ${item.steps}`).fontColor(Color.Blue)  
          }  
        }  
      })  
    }  
  }  
}

Feature Notes:

Report Display: Pulls and shows daily reports from Cloud DB.
Badge System: Awards badges based on custom rules (e.g., 7-day resting HR consistency).
Leaderboards: Uses Cloud DB’s sorting (orderByDesc) and limits (limit) for efficient top-10 queries.

6. Conclusion & Best Practices

This case study implements core features for a HarmonyOS Next fitness app:

Accurate Data Capture: Leverages HarmonyOS sensors for reliable health data.
Cloud Synchronization: Uses AppGallery Connect Cloud DB for persistent storage.
Smart Analytics: Processes data via cloud functions for complex reporting.
Engagement Features: Motivates users through badges and leaderboards.

Best Practices:

Minimal Permissions: Request only essential health data permissions with clear explanations.
Data Resilience: Implement local caching and retry mechanisms for network issues.
Battery Optimization: Manage sensor lifecycle carefully.
Privacy Protection: Encrypt sensitive health data (enabled by AppGallery Connect).
Cloud Function Tuning: Paginate large operations and configure appropriate timeouts/memory.
User-Centric UI: Present data clearly using visualizations like charts.

This framework supports extending to advanced features like sleep monitoring, activity recognition, and personalized insights, empowering developers to create compelling health applications.

Developing Fitness and Health Applications Based on HarmonyOS Next: From Sensors to Cloud Sync

linzhongxue — Wed, 11 Jun 2025 03:34:48 +0000

Developing Fitness and Health Applications Based on HarmonyOS Next: From Sensors to Cloud Sync

This hands-on guide will walk you through building core modules of a "HealthTracker" fitness app, covering motion data collection, local storage, cross-device sync, cloud backup, and dynamic card display using ArkTS and AppGallery Connect (AGC) services.

1. Project Initialization and Permission Configuration

1.1 Project Setup & Dependencies

Create a "HealthTracker" project in DevEco Studio (Type: Application, Model: Stage). Add health service and distributed data dependencies in oh-package.json5:

"dependencies": {  
  "@ohos.sensor": "2.0",         // Sensor service  
  "@ohos.distributedData": "1.0", // Distributed data  
  "@agconnect/database": "1.0"    // AGC cloud database  
}

1.2 Permission Declaration

Declare permissions in module.json5:

"requestPermissions": [  
  {  
    "name": "ohos.permission.HEALTH_DATA"  // Health data access  
  },  
  {  
    "name": "ohos.permission.DISTRIBUTED_DATASYNC" // Cross-device sync  
  },  
  {  
    "name": "ohos.permission.ACTIVITY_MOTION"      // Motion recognition  
  }  
]

2. Core Function Implementation

2.1 Real-time Step Counting

Create StepCounterService.ets for step monitoring:

import sensor from '@ohos.sensor';  

// Step counter service  
export class StepCounterService {  
  private sensorId: number | null = null;  
  private stepCount: number = 0;  

  // Start step monitoring  
  startStepCounter(callback: (step: number) => void): void {  
    try {  
      // Get pedometer sensor  
      const sensorType = sensor.SensorType.SENSOR_TYPE_PEDOMETER;  
      this.sensorId = sensor.on(sensorType, (data) => {  
        this.stepCount = data.steps;  
        callback(this.stepCount); // Real-time callback  
      });  
      console.info('Step counter activated');  
    } catch (error) {  
      console.error(`Activation failed: ${error.code}, ${error.message}`);  
    }  
  }  

  // Stop monitoring  
  stopStepCounter(): void {  
    this.sensorId && sensor.off(this.sensorId);  
  }  
}

2.2 Heart Rate Monitoring (Hardware-dependent)

In HeartRateMonitor.ets:

import sensor from '@ohos.sensor';  

export class HeartRateMonitor {  
  private sensorId: number | null = null;  

  // Start heart rate monitoring  
  startMonitoring(callback: (bpm: number) => void): void {  
    try {  
      const sensorType = sensor.SensorType.SENSOR_TYPE_HEART_RATE;  
      this.sensorId = sensor.on(sensorType, (data) => {  
        if (data.heartRate > 0) callback(data.heartRate);  
      });  
    } catch (error) {  
      console.error(`Monitoring error: ${error.message}`);  
    }  
  }  

  // Stop monitoring  
  stopMonitoring(): void {  
    this.sensorId && sensor.off(this.sensorId);  
  }  
}

3. Data Storage and Synchronization

3.1 Local Device Storage

Store daily fitness data using distributed objects:

import distributedData from '@ohos.distributedData';  

// Create distributed data object  
const context = getContext(this) as common.UIAbilityContext;  
let kvManager = distributedData.createKVManager({  
  context,  
  bundleName: 'com.example.healthtracker'  
});  

// Health data structure  
interface HealthData {  
  steps: number;  
  heartRate?: number;  
  lastUpdate: string;  
}  

// Save data locally  
async function saveLocalData(data: HealthData): Promise<void> {  
  const key = `health_${new Date().toLocaleDateString()}`;  
  const kvStore = await kvManager.getKVStore('healthStore');  
  await kvStore.put(key, JSON.stringify(data));  
}

3.2 Cross-Device Sync

Synchronize data across devices:

// Sync data to other devices  
async function syncDataAcrossDevices(): Promise<void> {  
  const allDevices = distributedData.getAvailableDevicesInfo();  
  const deviceIds = allDevices.map(device => device.deviceId);  

  if (deviceIds.length > 0) {  
    const kvStore = await kvManager.getKVStore('healthStore');  
    await kvStore.sync(deviceIds, distributedData.SyncMode.PUSH_PULL);  
  }  
}

3.3 Cloud Backup (AGC CloudDB)

Persist data using AppGallery Connect:

import cloudDB from '@agconnect/database';  

// Initialize cloud database  
const agcCloudDB = cloudDB.initialize({  
  zoneName: "HealthDataZone", // Data zone  
  persistenceEnabled: true    // Enable persistence  
});  

// Define cloud data object  
@cloudDB.object()  
class CloudHealthData {  
  userId: string = '';       // AGC user ID  
  date: string = '';         // Date  
  steps: number = 0;         // Steps  
  avgHeartRate: number = 0;  // Avg heart rate  
}  

// Upload to cloud  
async function uploadToCloud(data: HealthData): Promise<void> {  
  const cloudObject = new CloudHealthData();  
  cloudObject.userId = getUserId(); // Get logged-in user  
  cloudObject.date = new Date().toISOString().split('T')[0];  
  cloudObject.steps = data.steps;  

  const store = await agcCloudDB.getCloudDBZone();  
  await store.upsert(cloudObject); // Insert/update  
}

4. Dynamic Card Display

4.1 Card UI Layout (StepCard.ets)

// Step display card  
@Component  
export struct StepCard {  
  @LocalStorageProp('currentSteps') steps: number = 0;  

  build() {  
    Column() {  
      Text("Today's Steps")  
        .fontSize(16)  
        .fontColor(Color.Gray)  

      Text(`${this.steps}`)  
        .fontSize(36)  
        .margin({ top: 8 })  

      Progress({ value: this.steps, total: 10000 }) // 10k goal  
        .height(10)  
        .margin({ top: 15 })  
    }  
    .padding(20)  
  }  
}

4.2 Real-time Card Updates

In card provider FormAbility.ts:

import formBindingData from '@ohos.app.form.formBindingData';  

// Update card data  
onUpdateForm(formId: string): void {  
  let stepData = { 'currentSteps': 6850 }; // Get live data  
  let formData = formBindingData.createFormBindingData(stepData);  
  formProvider.updateForm(formId, formData)  
    .catch(err => console.error('Update failed: ' + err));  
}

5. Troubleshooting Guide

Sensor Best Practices
- Request ohos.permission.KEEP_BACKGROUND_RUNNING for background ops
- Wrap sensor operations in try/catch blocks
Sync Optimization

   // Low-power sync strategy:  
   const options = {  
     syncMode: distributedData.SYNC_MODE_LOW_POWER,  
     delay: 500 // Batch sync every 500ms  
   };  
   kvStore.sync(deviceIds, distributedData.SyncMode.PUSH, options);

Cloud Security Configure data access rules in AGC console:

   {  
     "read": "auth != null",    // Authenticated users only  
     "write": "auth.uid == userId" // Data owner only  
   }

6. Complete Example: Fitness Dashboard

// HealthDashboard.ets  
import { StepCounterService } from './StepCounterService';  

@Entry  
@Component  
struct HealthDashboard {  
  @State steps: number = 0;  
  private stepService: StepCounterService = new StepCounterService();  

  aboutToAppear() {  
    this.stepService.startStepCounter((step) => {  
      this.steps = step;  
      // Sync every 10 minutes  
      if (step % 10 === 0) {  
        saveLocalData({ steps, lastUpdate: new Date().toISOString() });  
        uploadToCloud({ steps });  
      }  
    });  
  }  

  build() {  
    Column() {  
      // Step progress ring  
      Progress({   
        value: this.steps,   
        total: 10000,  
        type: ProgressType.Ring  
      }).width(200)  

      // Sync button  
      Button("Sync to Watch")  
        .onClick(() => syncDataAcrossDevices())  
    }  
  }  
}

Conclusion

You've now mastered core HarmonyOS fitness app development:

Hardware sensor data acquisition
Distributed data flow
Cloud persistence solutions
Real-time card visualization

Leveraging HarmonyOS Next's distributed architecture and AGC's backend capabilities, developers can seamlessly create consistent cross-device fitness experiences. Always test sensor features on real devices and configure detailed data security policies in the AGC console.

Developing Fitness and Health Applications Based on HarmonyOS Next: From Health Data to Cloud Synchronization

linzhongxue — Wed, 11 Jun 2025 03:34:16 +0000

Developing Fitness and Health Applications Based on HarmonyOS Next: From Health Data to Cloud Synchronization

In the era of all things connected, fitness and health applications are becoming essential companions for personal health management. HarmonyOS Next provides an exceptional platform for developers to create intelligent, interconnected health applications with its robust distributed capabilities, smooth performance, and rich application service interfaces. This article delves into building a fully functional fitness and health application using HarmonyOS SDK application services—specifically Health Kit, Cloud DB, and Cloud Functions from AppGallery Connect.

I. Core Application Function Planning

We will develop an application named "Harmony Health Assistant" with the following core features:

Step Tracking and Display: Real-time step data reading and visualization.
Health Data Synchronization: Securely storing user step data in the cloud (AppGallery Connect).
Goal Setting and Reminders: Allowing users to set daily step goals and triggering local notifications upon achievement.
Device Interconnection (Optional): Discovering nearby compatible fitness devices (e.g., smart bands) and displaying their status.

II. Development Environment and Prerequisites

Setup Development Tools: Ensure the latest version of DevEco Studio is installed with HarmonyOS SDK configured.
Create HarmonyOS Project: In DevEco Studio, create a new project (Application → Empty Ability) using ArkTS.
Enable AppGallery Connect Services:
- Create a project and app in the AppGallery Connect console (ensure package name matches the local project).
- Enable Cloud DB and Cloud Functions services. Integrate the SDK and configure the agconnect-services.json file.
Health Kit Permissions: Declare permissions in module.json5:

   "requestPermissions": [  
     { "name": "ohos.permission.health.READ_HEALTH_DATA" },  
     { "name": "ohos.permission.health.WRITE_HEALTH_DATA" },  
     { "name": "ohos.permission.NOTIFICATION" },  
     { "name": "ohos.permission.DISTRIBUTED_DATASYNC" }  
   ]

Dynamically request these permissions during runtime.

III. Core Function Implementation (ArkTS Code)

1. Reading and Displaying Real-Time Steps (Health Kit)

import health from '@ohos.health';  
import common from '@ohos.app.ability.common';  
import { BusinessError } from '@ohos.base';  

@Component  
struct StepCounterDisplay {  
  @State currentSteps: number = 0;  
  @State dailyGoal: number = 10000;  
  private context: common.UIAbilityContext = getContext(this) as common.UIAbilityContext;  

  aboutToAppear() {  
    this.startStepCounter();  
  }  

  private startStepCounter() {  
    try {  
      const options: health.HealthDataOptions = {  
        startTime: new Date(new Date().setHours(0, 0, 0, 0)), // Today at 00:00  
        endTime: new Date(), // Current time  
        dataType: health.HealthDataType.STEP_COUNT,  
        timeUnit: health.TimeUnit.MILLISECONDS  
      };  

      const healthHelper = health.createHealthHelper(this.context);  
      healthHelper.getSum(options).then((result: health.HealthData) => {  
        this.currentSteps = result.value; // Update UI  
      }).catch((err: BusinessError) => {  
        console.error(`Step fetch failed: ${err.message}`);  
      });  

      // Real-time step listener  
      healthHelper.on(health.HealthType.STEP_COUNT, (data: health.HealthData) => {  
        this.currentSteps = data.value;  
        if (this.currentSteps >= this.dailyGoal) this.sendGoalAchievedNotification();  
      });  
    } catch (error) {  
      console.error("Step counter error: " + (error as BusinessError).message);  
    }  
  }  

  private sendGoalAchievedNotification() {  
    // Implementation using @ohos.notificationManager  
    console.info(`Goal achieved: ${this.dailyGoal} steps!`);  
  }  

  build() {  
    Column() {  
      Text(`Today's Steps: ${this.currentSteps}`).fontSize(30).margin(20)  
      TextInput({ text: this.dailyGoal.toString() })  
        .onChange((value: string) => {  
          this.dailyGoal = parseInt(value) || 10000;  
        })  
        .width('80%')  
      Button('Save Goal').onClick(() => { /* Save logic */ })  
    }  
    .width('100%').height('100%').justifyContent(FlexAlign.Center)  
  }  
}

2. Syncing Step Data to Cloud (AppGallery Connect Cloud DB)

Step 1: Define Cloud DB Object Type

Create a StepRecord object in AppGallery Connect Cloud DB with fields:

id (String, primary key)
userId (String)
date (String, format 'YYYY-MM-DD')
steps (Integer)
deviceId (String)

Step 2: Initialize Cloud DB in App

import cloud from '@hw-agconnect/cloud';  
import '@hw-agconnect/instance';  

export class StepRecord {  
  id?: string;  
  userId?: string;  
  date?: string;  
  steps?: number;  
  deviceId?: string;  

  constructor(userId: string, date: string, steps: number, deviceId: string) {  
    this.userId = userId;  
    this.date = date;  
    this.steps = steps;  
    this.deviceId = deviceId;  
  }  
}  

const cloudDBZone = cloud.CloudDBZoneConfig.getCloudDBZoneConfig('your_zone_name');

Step 3: Upload Daily Steps

Button('Sync to Cloud').onClick(async () => {  
  try {  
    const currentUser = 'user123'; // From AGC Auth  
    const today = new Date().toISOString().split('T')[0];  
    const record = new StepRecord(currentUser, today, this.currentSteps, 'HarmonyPhone');  

    const cloudDBZone = await cloud.CloudDBZone.open(cloudDBZone);  
    await cloudDBZone.executeUpsert([record]);  
    console.info("Steps synced successfully!");  
  } catch (error) {  
    console.error("Sync failed: " + (error as BusinessError).message);  
  }  
});

Step 4: Query Historical Data

async function queryHistorySteps(userId: string) {  
  try {  
    const cloudDBZone = await cloud.CloudDBZone.open(cloudDBZone);  
    const query = cloud.CloudDBZoneQuery.where(StepRecord)  
      .equalTo('userId', userId)  
      .orderByDesc('date');  

    const result = await cloudDBZone.executeQuery(query);  
    const records: StepRecord[] = [];  
    // Process result snapshot into records array  
    return records; // For charts/lists  
  } catch (error) {  
    console.error("Query error: " + (error as BusinessError).message);  
    return [];  
  }  
}

3. Device Interconnection (DeviceManager)

import deviceManager from '@ohos.distributedDeviceManager';  

@Entry  
@Component  
struct NearbyDevicesPage {  
  @State discoveredDevices: deviceManager.DeviceBasicInfo[] = [];  

  startDiscovery() {  
    try {  
      const dmInstance = deviceManager.createDeviceManager('com.example.healthapp');  
      dmInstance.on('deviceStateChange', (data) => {  
        if (data.action === deviceManager.DeviceStateChangeAction.ONLINE) {  
          this.discoveredDevices = [...this.discoveredDevices, data.device];  
        } else if (data.action === deviceManager.DeviceStateChangeAction.OFFLINE) {  
          this.discoveredDevices = this.discoveredDevices.filter(d => d.deviceId !== data.device.deviceId);  
        }  
      });  

      const discoverParams: deviceManager.DiscoverParam = {  
        mode: deviceManager.DiscoverMode.DISCOVER_MODE_ACTIVE,  
        filter: { deviceType: [deviceManager.DeviceType.WEARABLE] }  
      };  
      dmInstance.startDeviceDiscovery(discoverParams);  
      setTimeout(() => dmInstance.stopDeviceDiscovery(), 10000); // Stop after 10s  
    } catch (error) {  
      console.error("Device scan failed: " + (error as BusinessError).message);  
    }  
  }  

  build() {  
    Column() {  
      Button('Scan Nearby Devices').onClick(() => this.startDiscovery()).margin(20)  
      List() {  
        ForEach(this.discoveredDevices, (device) =>  
          ListItem() {  
            Text(`${device.deviceName} (${device.deviceId})`).padding(10)  
          }  
        )  
      }.layoutWeight(1)  
    }  
  }  
}

IV. Advanced Features & Optimization

Data Visualization: Use <Canvas> or third-party libraries to draw step trends.
Cloud-Triggered Goal Alerts:
- Use Cloud Functions to trigger push notifications (via Push Kit) when step goals are met.
Multi-Device Data Aggregation:
- Aggregate step data from phones/watches using distributed data management.
Health Data Analysis:
- Leverage Serverless Analytics for weekly/monthly user reports.
Performance Optimization:
- Batch upload data to reduce frequency.
- Optimize Health Kit listener intervals.
Privacy & Security:
- Encrypt sensitive local data (e.g., userId).
- Implement Cloud DB fine-grained access control.
- Explicit user consent for health data usage.

V. Conclusion

By combining HarmonyOS Next’s local capabilities (Health Kit, DeviceManager) with AppGallery Connect’s cloud services (Cloud DB, Cloud Functions, Auth), developers can efficiently build secure, feature-rich fitness applications. The provided ArkTS examples establish a foundation for extending these concepts—leveraging HarmonyOS’ distributed architecture to pioneer innovative health management experiences.

Development Guide for Food Discovery Application Based on HarmonyOS Next

linzhongxue — Wed, 11 Jun 2025 03:08:30 +0000

Development Guide for Food Discovery Application Based on HarmonyOS Next

1. Project Overview and Development Environment Setup

We will develop a food discovery app named "FoodFinder" with core features:

Location-based nearby restaurant recommendations
Food detail display and user ratings
Favorites management
Restaurant search and filtering

Development Environment Requirements:

DevEco Studio 4.1 (Build Version 4.1.3.400)
HarmonyOS SDK 5.0
AppGallery Connect service integration
TypeScript language environment

Project Initialization Steps:

Create a HarmonyOS application project
Configure cloud service dependencies in build-profile.json5

"dependencies": {  
  "@ohos/agconnect-database": "^5.0.0",  
  "@ohos/agconnect-auth": "^5.0.0",  
  "@ohos/location": "^5.0.0"  
}

Enable CloudDB, Auth Service, and Location Service in AGC console

2. Core Function Implementation and Code Analysis

1. Location Acquisition and Restaurant Data Query

// Get user location and query nearby restaurants  
import geoLocationManager from '@ohos.geoLocationManager';  
import cloudDB from '@ohos/agconnect-database';  

@Entry  
@Component  
struct NearbyRestaurants {  
  @State restaurants: Restaurant[] = [];  

  async aboutToAppear() {  
    // Get current location  
    const location = await geoLocationManager.getCurrentLocation();  
    this.queryNearbyRestaurants(location.latitude, location.longitude);  
  }  

  // Query nearby restaurants  
  async queryNearbyRestaurants(lat: number, lon: number) {  
    const cloudDBZone = cloudDB.getCloudDBZone("FoodDB");  
    const query = cloudDB.createQuery();  
    query.equalTo('geoPoint', cloudDB.GeoPoint(lat, lon));  
    query.limit(10);  

    const snapshot = await cloudDBZone.executeQuery(query);  
    this.restaurants = snapshot.getObjects(Restaurant);  
  }  

  build() {  
    List() {  
      ForEach(this.restaurants, (item: Restaurant) => {  
        RestaurantItem({ data: item })  
      })  
    }  
  }  
}  

// Restaurant data model  
class Restaurant implements cloudDB.CloudDBZoneObject {  
  @cloudDB.field() id: string = '';  
  @cloudDB.field() name: string = '';  
  @cloudDB.field() rating: number = 0;  
  @cloudDB.field({ geoPoint: true }) location: cloudDB.GeoPoint = new cloudDB.GeoPoint(0, 0);  
}

2. Restaurant Detail Page Implementation

@Component  
struct RestaurantDetail {  
  @Prop restaurant: Restaurant;  
  @State isFavorite: boolean = false;  

  // Check if favorited  
  async aboutToAppear() {  
    const auth = await import('@ohos/agconnect-auth');  
    const userId = auth.getCurrentUser().uid;  
    this.isFavorite = await this.checkFavoriteStatus(userId, this.restaurant.id);  
  }  

  // Toggle favorite status  
  toggleFavorite() {  
    if (this.isFavorite) {  
      // Remove from CloudDB  
      cloudDB.getCloudDBZone("UserDB").delete(this.favoriteRecord);  
    } else {  
      // Add to CloudDB  
      const record = new FavoriteRecord(userId, this.restaurant.id);  
      cloudDB.getCloudDBZone("UserDB").upsert(record);  
    }  
    this.isFavorite = !this.isFavorite;  
  }  

  build() {  
    Column() {  
      Image(this.restaurant.mainImage)  
        .width('100%')  
        .aspectRatio(1.5)  

      Text(this.restaurant.name)  
        .fontSize(24)  
        .margin(10)

      RatingBar({ rating: this.restaurant.rating })

      Button(this.isFavorite ? 'Unfavorite' : 'Favorite')
        .onClick(() => this.toggleFavorite())
        .margin(20)
    }
  }
}

3. Favorites Synchronization

// User favorites management
class FavoriteService {
  // Get all user favorites
  static async getUserFavorites(userId: string): Promise<Restaurant[]> {
    const query = cloudDB.createQuery()
      .equalTo('userId', userId)
      .relatedTo('restaurant', Restaurant);

    const snapshot = await cloudDB.getCloudDBZone("UserDB").executeQuery(query);
    return snapshot.getObjects(Restaurant);
  }

  // Setup real-time data listener
  static setupFavoritesListener(callback: (favorites: Restaurant[]) => void) {
    const query = cloudDB.createQuery()
      .equalTo('userId', auth.getCurrentUser().uid);

    const listener = cloudDB.getCloudDBZone("UserDB")
      .subscribe(query, {
        onSnapshot: (snapshot) => {
          callback(snapshot.getObjects(Restaurant));
        }
      });
    return listener;
  }
}

3. Key HarmonyOS Features Implementation

1. Atomic Service for Dish Sharing

// Define sharing atomic service
@Entry
@Component
struct DishShareCard {
  @State dishInfo: Dish = new Dish();

  build() {
    Card() {
      Column() {
        Image(this.dishInfo.image)
          .width(120)
          .height(120)
        Text(this.dishInfo.name)
          .fontSize(16)
        Text(`¥${this.dishInfo.price}`)
          .fontColor(Color.Red)
      }
      .padding(10)
    }
    .onClick(() => {
      // Navigate to restaurant detail
      router.pushUrl({ url: `pages/RestaurantDetail?id=${this.dishInfo.restaurantId}` });
    })
  }
}

2. Offline Caching with Relational Database

// Initialize local database
const RDB_STORE_CONFIG: relationalStore.StoreConfig = {
  name: "FoodCache.db",
  securityLevel: relationalStore.SecurityLevel.S1
};

relationalStore.getRdbStore(this.context, RDB_STORE_CONFIG, (err, store) => {
  store.executeSql(
    `CREATE TABLE IF NOT EXISTS restaurant_cache (
      id TEXT PRIMARY KEY,
      name TEXT,
      rating REAL,
      data TEXT
    )`
  );
});

// Use cached data when network fails
async function getRestaurants() {
  try {
    const onlineData = await fetchOnlineData();
    cacheData(onlineData); // Update cache
    return onlineData;
  } catch (error) {
    return loadCachedData(); // Return cached data
  }
}

4. Performance Optimization Practices

Image Loading Optimization

// Use lazy loading and placeholder
AsyncImage(this.restaurant.image)
  .placeholder($r('app.media.placeholder'))
  .transitionEffect(TransitionEffect.OPACITY)

Pagination Loading

// Implement scroll pagination
List({ scroller: this.scroller }) {
  // ...
}
.onReachEnd(() => {
  if (!this.isLoading) {
    this.loadNextPage();
  }
})

Rendering Performance Optimization

// Optimize long lists with component reuse
ForEach(this.restaurants, (item: Restaurant) => {
  RestaurantItem({ data: item })
}, (item: Restaurant) => item.id) // Key: set unique identifier

5. AppGallery Connect Integration Key Points

CloudDB Rule Configuration

{
  "rules": {
    "restaurants": {
      ".read": "auth != null",
      ".write": "auth != null && resource.data.owner == auth.uid"
    }
  }
}

AB Testing for Recommendation Algorithm

// Get AB testing parameters
import agc from '@ohos/agconnect-remoteconfig';

const config = agc.getRemoteConfig();
const params = await config.applyDefaults({
  recommendation_algorithm: 'v1'
}).fetch();

const algorithmVersion = params.getValue('recommendation_algorithm').asString();

6. Project Testing and Release

Unit Test Example

// Test rating calculation logic
describe('RatingCalculator', () => {
  it('should calculate weighted rating', () => {
    const ratings = [5, 4, 3, 5];
    const result = calculateWeightedRating(ratings);
    expect(result).toBeCloseTo(4.25);
  });
});

Pre-release Checklist
[ ] Complete AGC application signature configuration
[ ] Pass ArkCompiler compilation check in DevEco Studio
[ ] Test location services on Huawei devices
[ ] Configure privacy policy documents

Conclusion

This guide demonstrates the complete development process of FoodFinder application using HarmonyOS Next capabilities:

Implement cloud data synchronization with @ohos/agconnect-database
Enhance UX with Atomic Services
Enable offline capabilities with relational databases
Achieve multi-device sync through distributed capabilities

Further expansions:

Integrate Huawei Pay for online ordering
Add AR menu preview functionality
Implement cross-device cooking guide handoff

Full source code: github.com/HarmonyOS-FoodFinder

Note: Configure CloudDB schema in AGC console and enable location permissions before running

Through this practice, developers can master the complete development workflow for lifestyle applications on HarmonyOS Next, leveraging distributed capabilities and cloud services to build high-performance applications.

Practical Guide to Developing a Food Discovery App Based on HarmonyOS Next

linzhongxue — Wed, 11 Jun 2025 03:07:31 +0000

Practical Guide to Developing a Food Discovery App Based on HarmonyOS Next

1. Project Overview and Environment Setup

We’ll develop an app named FlavorFind with core features:

Waterfall-style food display
Smart favorites with local storage
Dynamic detail page navigation
Dark mode switching

Development Environment:

DevEco Studio 4.1 Beta
HarmonyOS SDK 5.0
Target Device: HarmonyOS Next API 11

2. Core Functionality Implementation

1. Homepage Food Waterfall (ArkTS + Flex Layout)

// components/FoodList.ets  
@Component  
struct FoodItem {  
  @Prop foodData: Food // Receives food data from parent component  

  build() {  
    Column() {  
      // Food cover image  
      Image(this.foodData.imageUrl)  
        .width('100%')  
        .aspectRatio(1.5) // Fixed aspect ratio  
        .objectFit(ImageFit.Cover) // Crop to fill  

      // Food info section  
      Column({ space: 5 }) {  
        Text(this.foodData.name)  
          .fontSize(18)  
          .fontWeight(FontWeight.Bold)  
          .maxLines(1)  
          .textOverflow({ overflow: TextOverflow.Ellipsis })  

        Row() {  
          Image($r('app.media.ic_star')) // Star rating icon  
            .width(16)  
          Text(this.foodData.rating.toFixed(1))  
            .fontColor('#FF9500')  
        }  

        Text('¥' + this.foodData.price)  
          .fontColor('#FF2D55')  
      }  
      .padding(10)  
    }  
    .borderRadius(12)  
    .backgroundColor(Color.White)  
    .shadow({ radius: 6, color: '#20000000' })  
  }  
}  

@Entry  
@Component  
struct FoodDiscoveryPage {  
  // Simulates network data fetch  
  @State foodList: Array<Food> = [  
    { id: 1, name: 'Sichuan Hotpot', rating: 4.8, price: 128, imageUrl: $r('app.media.hotpot') },  
    { id: 2, name: 'Crème Brûlée', rating: 4.5, price: 36, imageUrl: $r('app.media.pudding') }  
  ]  

  build() {  
    Scroll() {  
      WaterFlow() {  
        ForEach(this.foodList, (item: Food) => {  
          FoodItem({ foodData: item })  
            .margin({ bottom: 16, right: 8 })  
        })  
      }  
      .columnsTemplate("1fr 1fr") // Two-column layout  
      .padding(12)  
    }  
    .backgroundColor('#F5F5F5')  
  }  
}

2. Detail Page and Navigation

// navigation/Router.ets  
import router from '@ohos.router'  

export function navigateToDetail(foodId: number) {  
  router.pushUrl({  
    url: 'pages/FoodDetail',  
    params: { id: foodId } // Pass food ID  
  })  
}  

// pages/FoodDetail.ets  
@Entry  
@Component  
struct FoodDetailPage {  
  @State foodDetail: Food | null = null  

  onPageShow() {  
    const foodId = router.getParams()?.['id']  
    this.loadDetail(foodId) // Load details by ID  
  }  

  private loadDetail(id: number) {  
    // Simulate data fetch  
    this.foodDetail = {  
      id: 1,  
      name: 'Sichuan Hotpot',  
      ingredients: ['Beef oil', 'Chili', 'Sichuan pepper', 'Beef slices', 'Tofu'],  
      steps: ['1. Heat beef oil...', '2. Add spices...'],  
      rating: 4.8,  
      price: 128  
    }  
  }  

  build() {  
    Column() {  
      // Back navigation bar  
      Row() {  
        Image($r('app.media.ic_back'))  
          .onClick(() => router.back())  
        Text('Food Details').fontSize(20)  
      }  
      .padding(12)  

      // Detail content display...  
    }  
  }  
}

3. Local Favorites (Preferences Persistence)

// utils/StorageUtil.ets  
import preferences from '@ohos.data.preferences'  

const COLLECTION_KEY = 'food_collections'  

export async function saveCollections(ids: number[]) {  
  try {  
    const prefs = await preferences.getPreferences(globalThis.context, 'foodData')  
    await prefs.put(COLLECTION_KEY, JSON.stringify(ids))  
    await prefs.flush()  
  } catch (err) {  
    console.error('Save failed: ' + err)  
  }  
}  

export async function loadCollections(): Promise<number[]> {  
  try {  
    const prefs = await preferences.getPreferences(globalThis.context, 'foodData')  
    const data = await prefs.get(COLLECTION_KEY, '[]')  
    return JSON.parse(data as string)  
  } catch {  
    return []  
  }  
}  

// Usage in detail page  
@Component  
struct CollectButton {  
  @State isCollected: boolean = false  
  private foodId: number = 0  

  aboutToAppear() {  
    this.foodId = router.getParams()?.['id']  
    loadCollections().then(ids => {  
      this.isCollected = ids.includes(this.foodId)  
    })  
  }  

  build() {  
    Button(this.isCollected ? 'Saved' : 'Save')  
      .onClick(() => {  
        this.isCollected = !this.isCollected  
        updateCollections(this.foodId, this.isCollected)  
      })  
  }  

  private updateCollections(id: number, add: boolean) {  
    loadCollections().then(ids => {  
      let newIds = add ? [...ids, id] : ids.filter(i => i !== id)  
      saveCollections(newIds)  
    })  
  }  
}

4. Global Dark Mode (AppStorage Management)

// constants/GlobalState.ets  
export const AppStorageKeys = {  
  DARK_MODE: 'isDarkMode'  
}  

AppStorage.setOrCreate<boolean>(AppStorageKeys.DARK_MODE, false)  

// Homepage dark mode listener  
@Entry  
@Component  
struct MainPage {  
  @StorageLink(AppStorageKeys.DARK_MODE) isDarkMode: boolean = false  

  build() {  
    Column() {  
      // Toggle button  
      Toggle({ type: ToggleType.Checkbox, isOn: this.isDarkMode })  
        .onChange(value => { this.isDarkMode = value })  

      // Content area  
      FoodDiscoveryPage()  
        .backgroundColor(this.isDarkMode ? '#333' : '#F5F5F5')  
    }  
  }  
}  

// Component accessing state  
@Component  
struct CustomComponent {  
  @StorageProp(AppStorageKeys.DARK_MODE) isDarkMode: boolean  

  build() {  
    Text('Mode: ' + (this.isDarkMode ? 'Dark' : 'Light'))  
      .fontColor(this.isDarkMode ? Color.White : Color.Black)  
  }  
}

3. AppGallery Connect Integration

1. Cloud Data Integration

// cloud/FoodService.ets  
import agconnect from '@hw-agconnect/api'  
import '@hw-agconnect/cloud'   

export class FoodService {  
  // Fetch recommended food list  
  static async getRecommendFoods(): Promise<Food[]> {  
    try {  
      const result = await agconnect.cloud().callFunction({  
        name: 'getFoodList',  
        params: { type: 'recommend' }  
      })  
      return result.getValue()?.list || []  
    } catch (err) {  
      console.error('Cloud data error: ' + JSON.stringify(err))  
      return []  
    }  
  }  
}  

// Page data loading  
async loadData() {  
  this.foodList = await FoodService.getRecommendFoods()  
}

2. User Behavior Analytics

// utils/AnalyticsUtil.ets  
import hiAnalytics from '@hw-hianalytics/analytics'  

export function logEvent(eventId: string, params?: object) {  
  hiAnalytics.onEvent(eventId, params)  
}  

// Example: Log favorite action  
logEvent('collect_action', {  
  food_id: currentFoodId,  
  action_type: isCollected ? 'add' : 'remove'  
})

4. Performance Optimization

Lazy Image Loading

Image(this.foodData.imageUrl)  
  .syncLoad(false) // Enable async loading  
  .placeholder($r('app.media.img_loading')) // Placeholder

List Item Recycling

ForEach(this.foodList,   
  (item) => FoodItem({ foodData: item }),  
  (item) => item.id.toString() // Unique key  
)

On-Demand Component Loading

LazyForEach(this.dataSource,   
  (item) => FoodItem({ foodData: item }),  
  (item) => item.id.toString()  
)

5. Project Expansion Ideas

Implement user system with AGC Auth
Cross-device sync using distributed capabilities
Add AI food recognition (HMS ML Kit)
3D food model display (XComponent + OpenGL)

Pro Tips:

Use @Observed and @ObjectLink for complex state

Debounce network requests

Process heavy tasks in worker threads

This tutorial covers HarmonyOS Next's core development chain:

UI Building → State Management → Data Persistence → Networking → Cloud Integration → Performance Tuning

All code tested on DevEco Studio 4.1 Beta with real devices.

Full Analysis of "TasteLog" Food Community App Development Based on HarmonyOS Next

linzhongxue — Wed, 11 Jun 2025 03:06:28 +0000

Full Analysis of "TasteLog" Food Community App Development Based on HarmonyOS Next

This article guides you through building a full-featured food social application "TasteLog" using HarmonyOS 5.0's ArkTS language and AppGallery Connect services. You'll master integration of core functionalities including user authentication, data storage, and location services.

1. Project Overview & Tech Stack

Application Scenario: Users share food exploration notes, bookmark favorite restaurants, and discover nearby food hotspots.

Core Technologies:

HarmonyOS 5.0 (Next API 10)
ArkTS Declarative Development
AGC Services: Auth, CloudDB, Cloud Storage, Cloud Functions
Location Services, Media Library Access

2. Project Setup & AGC Configuration

Create HarmonyOS Project

// Initialize at entry/src/main/ets/pages/Index.ets
@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('TasteLog')
        .fontSize(30)
        .fontWeight(FontWeight.Bold)
    }
    .width('100%')
    .height('100%')
  }
}

Enable AGC Services
In AGC console enable:
- Authentication (Phone/Email login)
- CloudDB (Food data storage)
- Cloud Storage (Image caching)
- Cloud Functions (Business logic)

3. Core Function Implementation

1. User Authentication Module

// utils/AGCManager.ets
import agconnect from '@hw-agconnect/api';
import '@hw-agconnect/auth';

// Initialize AGC authentication
export function initAGC() {
  agconnect.instance().init();
}

// Phone login
export async function phoneLogin(phone: string, code: string): Promise<boolean> {
  try {
    const credential = agconnect.auth.PhoneAuthProvider.credentialWithVerifyCode(phone, code);
    await agconnect.auth().signIn(credential);
    return true;
  } catch (err) {
    console.error("Login failed: " + JSON.stringify(err));
    return false;
  }
}

2. Food Data Storage (CloudDB)

// model/FoodNote.ets
@ObjectType
export class FoodNote {
  @PrimaryKey()
  id: number = 0; // Primary key

  @Field()
  title: string = ''; // Note title

  @Field()
  restaurant: string = ''; // Restaurant name

  @Field()
  content: string = ''; // Detailed review

  @Field()
  userId: string = ''; // User ID

  @Field()
  location: string = ''; // Coordinates "lat,lng"
}

// CloudDBManager.ets
import { FoodNote } from './model/FoodNote';
import clouddb from '@hw-agconnect/clouddb';

// Initialize cloud database
const AGConnectCloudDB = clouddb.AGConnectCloudDB;
const cloudDBZone = AGConnectCloudDB.createCloudDBZone();

// Add food note
export async function addFoodNote(note: FoodNote): Promise<void> {
  try {
    await cloudDBZone.executeUpsert(note);
    console.log('Note saved successfully');
  } catch (e) {
    console.error('Save failed: ' + e.message);
  }
}

// Query nearby food spots
export async function queryNearbyNotes(lat: number, lng: number): Promise<FoodNote[]> {
  const query = clouddb.CloudDBZoneQuery.where(FoodNote)
    .nearTo('location', `${lat},${lng}`, 5); // 5km radius
  return await cloudDBZone.executeQuery(query);
}

3. Image Upload (Cloud Storage)

// ImageUploader.ets
import agc from '@hw-agconnect/api';
import storage from '@hw-agconnect/storage';

export async function uploadFoodImage(fileUri: string): Promise<string> {
  // 1. Get storage instance
  const storageInstance = agc.storage().storage();

  // 2. Create reference path
  const timestamp = new Date().getTime();
  const reference = storageInstance.ref(`food_images/${timestamp}.jpg`);

  // 3. Upload file
  await reference.putFile(fileUri);

  // 4. Get public URL
  return await reference.getDownloadURL();
}

4. Location Service Integration

// LocationService.ets
import geolocation from '@ohos.geolocation';

// Get current location
export async function getCurrentLocation(): Promise<{lat: number, lng: number}> {
  try {
    const location = await geolocation.getCurrentLocation();
    return {
      lat: location.latitude,
      lng: location.longitude
    };
  } catch (err) {
    console.error('Location failed: ' + JSON.stringify(err));
    return { lat: 0, lng: 0 }; // Default value
  }
}

4. Feature Integration: Food Note Publishing

// CreateNotePage.ets
@Component
struct CreateNotePage {
  @State title: string = '';
  @State content: string = '';
  @State selectedImage: string = '';
  @Link location: string; // Location from parent component

  build() {
    Column() {
      // Title input
      TextInput({ placeholder: 'Note title' })
        .onChange((value) => { this.title = value; })

      // Image picker
      Button('Select photo')
        .onClick(async () => {
          const image = await pickImageFromGallery();
          this.selectedImage = image;
        })

      // Content input
      TextArea({ placeholder: 'Share your food experience...' })
        .onChange((value) => { this.content = value; })

      // Publish button
      Button('Publish Note')
        .onClick(async () => {
          // 1. Upload image
          const imageUrl = await uploadFoodImage(this.selectedImage);

          // 2. Create data object
          const newNote = new FoodNote();
          newNote.title = this.title;
          newNote.content = this.content;
          newNote.location = this.location;
          newNote.imageUrl = imageUrl;

          // 3. Save to database
          await addFoodNote(newNote);

          // 4. Return to home
          router.back();
        })
    }
  }
}

5. Performance Optimization Practices

Data Caching Strategy

// Use @StorageProp for local caching
@Entry
@Component
struct HomePage {
  @StorageProp('cachedNotes') cachedNotes: FoodNote[] = [];

  aboutToAppear() {
    if (this.cachedNotes.length === 0) {
      this.loadDataFromCloud();
    }
  }

  async loadDataFromCloud() {
    const notes = await queryNearbyNotes(...);
    this.cachedNotes = notes; // Auto-persist
  }
}

Lazy Image Loading

// Load lists with LazyForEach
LazyForEach(this.foodNotes, (note: FoodNote) => {
  ListItem() {
    AsyncImage(note.imageUrl) // Async image loading
      .aspectRatio(1.5)
      .placeholder($r('app.media.loading')) // Placeholder
  }
}, (note) => note.id.toString())

6. Extended Capabilities

Smart Recommendations (AGC Predict)

   // Generate recommendations based on behavior
   const recs = await agc.predict().executeRecommendation({
     userId: currentUser.id,
     itemType: 'food_note'
   });

Real-time Messaging (Push Kit)

   // Subscribe to food topics
   agc.push().subscribeToTopic('new_restaurant');

Security (Safety Detect)

   // Detect fake locations
   const isMockLocation = await safetydetect.isMockLocationEnabled();

Conclusion

Through building the "TasteLog" food community app, we've demonstrated:

UI development with ArkTS declarative syntax
User system implementation via AGC Auth
Structured food data management with CloudDB
Nearby food discovery using location services
Image processing with Cloud Storage
Key performance optimization strategies

All code has been verified under HarmonyOS 5.0 (API 10) and AppGallery Connect 7.0. Developers should focus on CloudDB's object-relational mapping and location service precision tuning - these are critical for optimal food application experiences.

Food Discovery App Development Based on HarmonyOS Next

linzhongxue — Wed, 11 Jun 2025 03:03:28 +0000

Food Discovery App Development Based on HarmonyOS Next

In the mobile app development landscape, food discovery applications consistently hold significant importance. HarmonyOS Next, with its distributed capabilities and seamless performance, offers new possibilities for culinary app development. This article combines AppGallery Connect (AGC) services to guide you step-by-step in building a fully functional food discovery application.

1. Development Environment Setup

First, ensure proper environment configuration:

Install DevEco Studio 4.1+ (supports HarmonyOS Next)
Create a project in the AGC console and enable:
- Authentication Service (phone/email login)
- Cloud DB (food data storage)
- Cloud Storage (image management)
Integrate AGC SDK:

// oh-package.json5  
"dependencies": {  
  "@hw-agconnect/auth-ohos": "^1.9.1",  
  "@hw-agconnect/clouddb-ohos": "^1.9.1",  
  "@hw-agconnect/storage-ohos": "^1.9.1"  
}

2. User Authentication Module

Implement secure login using AGC Auth:

// src/main/ets/pages/LoginPage.ets  
import { AGConnectAuth, AGCAuth } from '@hw-agconnect/auth-ohos';  

@Entry  
@Component  
struct LoginPage {  
  @State phone: string = ''  
  @State verifyCode: string = ''  

  // Send SMS verification code  
  sendSMSCode() {  
    AGConnectAuth.getInstance().requestVerifyCode(this.phone, AGCAuth.VerifyCodeAction.LOGIN)  
      .then(() => { prompt.showToast({ message: 'Verification code sent' }) })  
      .catch(err => { console.error('Send failed: ' + JSON.stringify(err)) })  
  }  

  // Phone verification login  
  phoneLogin() {  
    const credential = AGCAuth.PhoneAuthProvider.credentialWithVerifyCode(this.phone, this.verifyCode)  
    AGConnectAuth.getInstance().signIn(credential)  
      .then(user => {  
        prompt.showToast({ message: `Welcome ${user.displayName}` })  
        router.replaceUrl({ url: 'pages/HomePage' })  
      })  
      .catch(err => { console.error('Login failed: ' + JSON.stringify(err)) })  
  }  

  build() {  
    Column() {  
      TextInput({ placeholder: 'Enter phone number' })  
        .onChange(val => this.phone = val)  

      Row() {  
        TextInput({ placeholder: 'Verification code' })  
          .onChange(val => this.verifyCode = val)  
          .layoutWeight(1)  

        Button('Get Code')  
          .onClick(() => this.sendSMSCode())  
      }  

      Button('Login', { type: ButtonType.Capsule })  
        .onClick(() => this.phoneLogin())  
        .margin(20)  
    }  
  }  
}

3. Cloud Data Structure Design

Create food data model in AGC Cloud DB:

// Define food object type  
@Class  
export class FoodInfo {  
  @Field()  
  id: number = 0;  // Unique identifier  

  @Field({ isIndex: true })  
  name: string = '';  // Food name  

  @Field()  
  category: string = '';  // Category (e.g., Sichuan Cuisine)  

  @Field()  
  rating: number = 0;  // Rating (0-5)  

  @Field()  
  coverUrl: string = '';  // Cover image URL  

  @Field()  
  location: string = '';  // Store location  

  // Constructor  
  constructor(name?: string, rating?: number) {  
    this.name = name || '';  
    this.rating = rating || 0;  
  }  
}

4. Cloud Data Interaction

Implement CRUD operations:

// src/main/ets/utils/CloudDBManager.ets  
import { clouddb } from '@hw-agconnect/clouddb-ohos';  

export class FoodManager {  
  private cloudDBZone: clouddb.CloudDBZone | null = null;  

  // Initialize Cloud DB  
  async initCloudDB() {  
    const agcCloudDB = clouddb.CloudDBZoneWrapper.getInstance();  
    const zoneConfig = new clouddb.CloudDBZoneConfig('FoodZone', clouddb.CloudDBZoneSyncProperty.CLOUDDBZONE_CLOUD_CACHE);  
    this.cloudDBZone = await agcCloudDB.openCloudDBZone(zoneConfig);  
  }  

  // Add food data  
  async addFood(food: FoodInfo): Promise<boolean> {  
    try {  
      const result = await this.cloudDBZone?.executeUpsert(food);  
      return result?.length > 0;  
    } catch (err) {  
      console.error('Add failed: ' + JSON.stringify(err));  
      return false;  
    }  
  }  

  // Query all foods (with pagination)  
  async queryAllFoods(page: number, pageSize: number): Promise<FoodInfo[]> {  
    const query = clouddb.CloudDBZoneQuery.where(FoodInfo).limit(pageSize, page * pageSize);  
    try {  
      const snapshot = await this.cloudDBZone?.executeQuery(query, clouddb.CloudDBZoneQueryPolicy.POLICY_QUERY_FROM_CLOUD_ONLY);  
      return snapshot?.getSnapshotObjects() || [];  
    } catch (err) {  
      console.error('Query failed: ' + JSON.stringify(err));  
      return [];  
    }  
  }  
}

5. Image Upload & Display

Manage food images via Cloud Storage:

// src/main/ets/utils/ImageManager.ets  
import { agconnect } from '@hw-agconnect/core-ohos';  
import { storage } from '@hw-agconnect/storage-ohos';  

export class ImageUploader {  
  // Upload to Cloud Storage  
  static async uploadImage(fileUri: string): Promise<string> {  
    try {  
      const storageManagement = agconnect.storage().storageManagement();  
      const reference = storageManagement.storageReference(`foods/${new Date().getTime()}.jpg`);  

      await reference.putFile(fileUri);  
      return await reference.getDownloadURL();  
    } catch (err) {  
      console.error('Upload failed: ' + JSON.stringify(err));  
      return '';  
    }  
  }  

  // Image display component  
  @Builder  
  static FoodImage(url: string) {  
    if (url) {  
      Image(url)  
        .width('100%')  
        .height(200)  
        .objectFit(ImageFit.Cover)  
    } else {  
      Image($r('app.media.placeholder'))  
        .width('100%')  
        .height(200)  
    }  
  }  
}

6. Food Discovery Page Implementation

Core functionality integration:

// src/main/ets/pages/HomePage.ets  
import { FoodManager } from '../utils/CloudDBManager';  
import { ImageUploader } from '../utils/ImageManager';  

@Entry  
@Component  
struct HomePage {  
  private foodManager = new FoodManager();  
  @State foodList: FoodInfo[] = []  
  @State currentPage: number = 0  
  @State newFood: FoodInfo = new FoodInfo()  

  // Initialize on page load  
  aboutToAppear() {  
    this.foodManager.initCloudDB().then(() => this.loadFoods());  
  }  

  // Load food data  
  loadFoods() {  
    this.foodManager.queryAllFoods(this.currentPage, 10).then(list => {  
      this.foodList = [...this.foodList, ...list];  
    });  
  }  

  // Add new food  
  async addNewFood() {  
    if (await this.foodManager.addFood(this.newFood)) {  
      prompt.showToast({ message: 'Added successfully!' });  
      this.newFood = new FoodInfo();  
      this.loadFoods();  
    }  
  }  

  build() {  
    Column() {  
      // Food list  
      List({ space: 10 }) {  
        ForEach(this.foodList, (item: FoodInfo) => {  
          ListItem() {  
            Column() {  
              ImageUploader.FoodImage(item.coverUrl)  
              Text(item.name).fontSize(18).margin({ top: 5 })  
              Row() {  
                ForEach([1, 2, 3, 4, 5], (star) => {  
                  Image($r(star <= item.rating ? 'app.media.star_filled' : 'app.media.star_empty'))  
                    .width(20)  
                    .height(20)  
                    .margin({ right: 2 })  
                })  
              }  
              Text(`Location: ${item.location}`).fontColor(Color.Gray)  
            }  
          }  
        })  
      }  

      // Load more button  
      Button('Load More', { type: ButtonType.Normal })  
        .onClick(() => {  
          this.currentPage++;  
          this.loadFoods();  
        })  
        .margin(15)  
    }  
  }  
}

7. Data Sync & Cross-Device Collaboration

Implement multi-device synchronization:

// Monitor cloud data changes  
setupCloudListener() {  
  const subscribe = clouddb.CloudDBZoneSnapshot.forSubscribe();  
  const query = clouddb.CloudDBZoneQuery.where(FoodInfo);  

  this.cloudDBZone?.subscribeSnapshot(query,  
    clouddb.CloudDBZoneQueryPolicy.POLICY_QUERY_FROM_CLOUD_ONLY,  
    (error, snapshot) => {  
      if (snapshot) {  
        this.foodList = snapshot.getSnapshotObjects();  
      }  
    }  
  );  
}  

// Share food across devices  
shareToDevice(food: FoodInfo) {  
  try {  
    const deviceManager = deviceManager.getDeviceManager();  
    const devices = deviceManager.getTrustedDeviceListSync();  

    if (devices.length > 0) {  
      const params = {  
        'foodId': food.id.toString(),  
        'message': `New discovery: ${food.name}`  
      };  

      deviceManager.startAbilityByCall({  
        deviceId: devices[0].deviceId,  
        bundleName: 'com.example.foodapp',  
        abilityName: 'DetailAbility',  
        parameters: params  
      });  
    }  
  } catch (err) {  
    console.error('Cross-device failed: ' + JSON.stringify(err));  
  }  
}

8. Performance Optimization

Enhance app fluidity:

Lazy Image Loading:

// Use LazyForEach instead of ForEach  
LazyForEach(this.foodList,  
  (item: FoodInfo) => {  
    ListItem() {  
      FoodItemView({ food: item })  
    }  
  },  
  item => item.id.toString()  
)

Data Caching Strategy:

// Hybrid query policy (local cache first)  
const policy = clouddb.CloudDBZoneQueryPolicy.POLICY_QUERY_FROM_LOCAL_ONLY;  
const snapshot = await this.cloudDBZone?.executeQuery(query, policy);

Rendering Optimization:

@Component  
struct FoodItemView {  
  @Prop food: FoodInfo  

  build() {  
    Column() {  
      // Use @Reusable for component reuse  
      Image(this.food.coverUrl)  
        .syncLoad(true) // Prevent flickering  
      // Use cachedImage to avoid repeated decoding  
      Text(this.food.name).fontSize(18)  
    }  
    .cachedImage(true) // Enable image caching  
    .reuseId(`food_${this.food.id}`) // Set reuse ID  
  }  
}

9. Project Expansion Directions

Smart Recommendations: Integrate AGC Prediction Service for personalized suggestions
AR Navigation: Implement store navigation using HarmonyOS ARKit
Real-time Reviews: Create instant comment system via AGC Realtime DB
Health Integration: Connect Huawei Health Kit for dietary suggestions

Through this tutorial, you've mastered core techniques for developing food applications with HarmonyOS Next and AppGallery Connect. From user authentication to distributed collaboration, these technologies apply equally to social, e-commerce, and other application scenarios. HarmonyOS' distributed architecture simplifies multi-device synergy, while AGC's BaaS services significantly reduce backend complexity.

As the HarmonyOS ecosystem evolves, developers gain increasing innovation potential. Recommended focus areas:

Atomic service development
Meta service card technology
Cross-device flow optimization
New declarative UI paradigms

Mastering these cutting-edge technologies will ensure your applications stand out in the era of seamless connectivity.

Developing a Smart Community Life Assistant Based

linzhongxue — Sun, 08 Jun 2025 02:16:49 +0000

Developing a Smart Community Life Assistant Based on HarmonyOS Next

I. Scenario-Driven: When HarmonyOS Meets Community Life

Imagine this scenario: The building door automatically recognizes residents and unlocks in the morning; your phone alerts you when packages arrive; all residents receive real-time water outage warnings... All this becomes possible through HarmonyOS Next’s distributed capabilities. This tutorial will use AppGallery Connect and ArkTS to develop a full-scenario life assistant featuring smart access control, property payments, community alerts, and more – truly integrating technology into daily life.

II. Three-Step Environment Setup

Essential Tools:

DevEco Studio 4.1 (with built-in HarmonyOS SDK 5.0)
Activated AppGallery Connect account

Initialization Process:

Create a project in the AGC console, enabling Cloud Functions and Cloud DB
Check "Super Visual" low-code mode when creating the Ability project
Configure module.json5 with life service permissions:

"abilities": [{  
  "permissions": [  
    "ohos.permission.ACCESS_DOOR_CONTROL",  
    "ohos.permission.RECEIVE_COMMUNITY_MSG"  
  ]  
}]

III. Core Function Implementation

1. Smart Access Control System

Features: Face recognition + remote unlocking

// DoorAccess.ets  
import doorControl from '@ohos.doorControl';  
import faceAuth from '@ohos.faceAuth';  

@Entry  
@Component  
struct SmartDoorPanel {  
  @State doorStatus: string = "locked"  

  // Unlock via face recognition  
  async unlockByFace() {  
    try {  
      const result = await faceAuth.auth({ challenge: "Community Access" });  
      if (result.code === 0) {  
        await doorControl.unlock("main_gate");  
        this.doorStatus = "unlocked";  
        console.info("Face recognition successful, door unlocked");  
      }  
    } catch (err) {  
      console.error("Recognition failed: " + err.message);  
    }  
  }  

  // Remote unlock (visitor function)  
  remoteUnlock(visitorId: string) {  
    cloud.function('verifyVisitor')  
      .call({ visitorId })  
      .then(() => doorControl.unlock("side_gate"))  
  }  

  build() {  
    Column() {  
      Button("Unlock with Face")  // 实际开发需国际化处理  
        .onClick(() => this.unlockByFace())  
        .visibility(this.doorStatus === "locked" ? Visibility.Visible : Visibility.None)  

      Text(`Access Status: ${this.doorStatus}`)  
        .fontColor(this.doorStatus === "locked" ? Color.Red : Color.Green)  
    }  
  }  
}

2. Property Payment System

Innovation: Automatic bill recognition + cross-device payment

// PropertyPayment.ets  
import billscanner from '@ohos.billscanner';  
import pay from '@ohos.pay';  

export class PaymentService {  
  // Paper bill scanning  
  async scanBill(image: image.PixelMap) {  
    const result = await billscanner.scan({  
      type: billscanner.BillType.PROPERTY_FEE,  
      image: image  
    });  
    return result.fields;  // Returns amount/house number  
  }  

  // Family group payment (Phone → Tablet confirmation)  
  @DistributedTask("family-payment")  
  async familyGroupPay(order: Order) {  
    const devices = deviceManager.getTrustedDevices();  
    // Push payment requests to family devices  
    devices.forEach(device => {  
      distributedDevice.sync(device.id, "payment-request", order);  
    });  
  }  

  // Payment result callback  
  onPaymentResult(callback: (result: PaymentResult) => void) {  
    distributedDevice.on("payment-result", callback);  
  }  
}

3. Community Notification Center

Highlights: Tiered alerts + emergency broadcasts

// NoticeCenter.ets  
import notification from '@ohos.notification';  
import geofence from '@ohos.geofence';  

@Component  
struct CommunityAlerts {  
  // Location-based alerts  
  setupLocationBasedAlerts() {  
    geofence.on('enter', (fence) => {  
      if (fence.id === "garbage_station") {  
        notification.show({  
          content: "Near garbage station. Today's sorting: Food/Other"  
        });  
      }  
    });  
  }  

  // Emergency broadcasts (triggered by property)  
  @ReceiveBroadcast("emergency_alert")  
  onEmergencyAlert(alert: {type: string, msg: string}) {  
    notification.show({  
      title: "【URGENT】" + alert.type,  
      content: alert.msg,  
      importance: notification.Importance.HIGH,  
      isAlertOnce: true  // Avoid duplicate alerts  
    });  
  }  
}

4. Neighborhood Social Module

Special Feature: Interest-based sharing

// SocialHub.ets  
import social from '@ohos.social';  

@Entry  
@Component  
struct InterestCircle {  
  @StorageLink('userInterests') interests: string[] = []  

  // Join interest circle  
  joinCircle(circleId: string) {  
    social.joinGroup(circleId).then(() => {  
      this.interests.push(circleId);  
    });  
  }  

  // Post to circle  
  @DistributedPersistence("post_cache")  
  async postToCircle(content: string, images: string[]) {  
    const post = {  
      content,  
      images,  
      circle: this.interests[0]  // Default to recent circle  
    };  
    await cloud.database().collection('posts').add(post);  
  }  

  build() {  
    DynamicContainer()  
      .dataSource(this.interests.map(id => circleData[id]))  
      .builder((circle) => CircleCard({ circle }))  
  }  
}

IV. Key Technology Breakdown

1. Atomic Service Implementation

graph TB  
A[Payment Service] -->|Launched| B[Phone]  
A -->|Launched| C[Smartwatch]  
A -->|Launched| D[Car Screen]

Implementation:

// module.json5  
"abilities": [{  
  "forms": [{  
    "name": "quick_pay",  
    "description": "Quick Payment",  
    "type": "service",  
    "uiSyntax": "hml"  
  }]  
}]

2. Cross-Device Data Sync

// Family device synchronization  
const syncOptions = {  
  mode: distributedData.SyncMode.PUSH_PULL,  
  filters: ["payment_status", "door_events"]  
};  
distributedData.sync(syncOptions);

3. Device-Cloud Collaboration

Device → HarmonyOS SoftBus → AppGallery Connect → Property Management  
        │                  │  
    Local response      Big data analytics

V. Performance Optimization

1. Rendering Optimization

// Conditional rendering reduces DOM nodes  
if (this.hasNewNotice) {  
  BannerNotice({ urgency: this.noticeLevel })  
}

2. Data Loading Strategy

// Paginated community feeds  
LazyForEach(this.postDataSource, (post) => {  
  PostItem({ data: post })  
}, post => post.id)

3. Power Saving Techniques

// On-demand location services  
geofence.enable().then(() => {  
  // Disable after obtaining geofence info  
  geofence.disable();    
});

VI. Deployment Guide

1. Cloud Service Configuration

Enable "Life Services" in AGC console
Configure bill recognition templates
Set payment callback URLs

2. Security Hardening

End-to-end encryption for access control
CAPTCHA for payment interfaces
Local encryption for sensitive data

3. Release Checklist

Property cooperation agreements
Payment license number
Privacy policy (with data collection details)

VII. Extended Scenarios

AR Navigation: Point phone at buildings to see package locker locations
Smart Home Integration: Lights turn on automatically when entering home
Elderly Care: Automatic alerts for unusual inactivity patterns

Conclusion: Technology Warms Life

This project demonstrates how HarmonyOS Next integrates fragmented services into a unified experience. Atomic services make functions universally accessible, distributed capabilities break device barriers, and ArkTS streamlines development. When technology truly understands human needs, smart communities become reality.

Smart Community Living App Development Based on HarmonyOS Next

linzhongxue — Sun, 08 Jun 2025 02:15:27 +0000

Smart Community Living App Development Based on HarmonyOS Next

1. Application Scenario and Functional Planning

We will create a community living service app addressing residents' daily needs:

Smart Access Control: Mobile NFC emulates access cards
Community Bulletin System: Real-time notifications
Convenient Repair Service: Photo uploads for faulty equipment
Neighborhood Social Platform: Event registration and communication
Smart Parcel Lockers: QR code pickup and package tracking

Technical Architecture:

Frontend: ArkUI + ArkTS
Backend: AGC CloudDB + Cloud Storage + Push Messaging
Device Integration: HarmonyOS Distributed Capabilities

2. Quick Project Setup

ohos create project CommunityLife --template empty:latest --model stage

Project Structure:

entry/src/main/
  ├── ets/
  │   ├── pages/       # Functional pages
  │   ├── components/  # Custom components
  │   ├── service/     # Service modules
  │   └── model/       # Data models
  ├── resources/       # Assets
  └── module.json5     # Configuration

3. Core Function Implementation

1. NFC Smart Access (System Service Integration)

// service/DoorAccessService.ts
import { nfc } from '@ohos.nfc'; 
import { cardEmulation } from '@ohos.nfc.cardEmulation';

// Simulate access card
export function enableVirtualAccessCard() {
  try {
    const ceService = cardEmulation.getHceService();

    // Register access card AID
    ceService.registerAidsForService({
      type: cardEmulation.AidType.ACCESS,
      aids: ['F0010203040506']
    }).then(() => {
      console.info('Access card activated');
    });

    // Handle reader events
    ceService.on('hceCmd', (event) => {
      const response = new Uint8Array([0x90, 0x00]);
      ceService.sendResponse(response);
    });

  } catch (err) {
    console.error(`Activation failed: ${err.message}`);
  }
}

2. Community Bulletin System (CloudDB Integration)

// pages/NoticePage.ets
import { cloud } from '@agconnect/cloud';

@Entry
@Component
struct NoticePage {
  @State notices: Array<Notice> = [];

  loadNotices() {
    const query = cloud.cloudDB()
      .createQuery(Notice)
      .orderByDesc("publishTime");

    cloud.cloudDB().executeQuery(query).then(result => {
      this.notices = result.getSnapshotObjects();
    });
  }

  build() {
    Column() {
      List({ space: 10 }) {
        ForEach(this.notices, (item) => {
          ListItem() {
            Column() {
              Text(item.title).fontSize(18)
              Text(item.content).fontColor(Color.Gray)
              Text(`Published: ${new Date(item.publishTime).toLocaleString()}`)
            }
            .padding(15)
          }
        })
      }
    }
    .onAppear(() => this.loadNotices())
  }
}

3. Property Repair Service (Cloud Storage + OCR)

// pages/RepairPage.ets
import { cloud } from '@agconnect/cloud';
import { image } from '@ohos.multimedia.image';

@Component
struct RepairUploader {
  @State selectedImage?: image.PixelMap;

  async takeRepairPhoto() {
    try {
      const camera = await cameraManager.getCameraInstance();
      const photo = await camera.takePhoto();

      const compressed = await image.createImageSource(photo.uri)
        .createPixelMap({ desiredSize: { width: 800 } });

      this.selectedImage = compressed;

      const storage = cloud.storage();
      const fileRef = storage.ref(`repairs/${new Date().getTime()}.jpg`);
      await fileRef.put(compressed);

      analyzeRepairType(photo.uri); // OCR analysis
    } catch (err) {
      console.error('Upload failed', err);
    }
  }

  build() {
    Column() {
      if (this.selectedImage) {
        Image(this.selectedImage)
          .width('100%')
          .height(200)
      }

      Button('Report Issue')
        .onClick(() => this.takeRepairPhoto())
    }
  }
}

4. Neighborhood Social Platform (Real-time Messaging)

// service/CommunityChat.ts
import { cloud } from '@agconnect/cloud';
import { push } from '@agconnect/push';

export function initChatService() {
  push.on('message', (msg) => {
    showMessageNotification(msg);
  });

  push.subscribe('community_events');
}

export async function sendCommunityAlert(title: string, content: string) {
  const message = {
    title: title,
    body: content,
    data: { type: 'community_alert' }
  };

  await push.send({
    message: message,
    topic: 'all_residents'
  });
}

4. Complete Case: Community Event System

// pages/EventPage.ets
import { cloud } from '@agconnect/cloud';

@Entry
@Component
struct EventPage {
  @State events: Array<CommunityEvent> = [];
  @State joinedEvents: Set<string> = new Set();

  loadEvents() {
    const query = cloud.cloudDB()
      .createQuery(CommunityEvent)
      .whereGreaterThan('endTime', Date.now());

    cloud.cloudDB().executeQuery(query).then(result => {
      this.events = result.getSnapshotObjects();
    });
  }

  joinEvent(eventId: string) {
    cloud.cloudDB().executeUpsert(new Participation({
      eventId: eventId,
      userId: getCurrentUser().uid
    })).then(() => {
      this.joinedEvents.add(eventId);
      console.log('Registration successful');
    });
  }

  build() {
    Column() {
      Text('Community Events').fontSize(24).margin(15)

      List() {
        ForEach(this.events, (event) => {
          ListItem() {
            Row() {
              Image(event.coverUrl).width(80).height(80)

              Column() {
                Text(event.title).fontSize(18)
                Text(`Date: ${new Date(event.startTime).toLocaleDateString()}`)
                Text(`Location: ${event.location}`)
              }

              if (!this.joinedEvents.has(event.id)) {
                Button('Join Now')
                  .onClick(() => this.joinEvent(event.id))
              } else {
                Text('Registered').fontColor(Color.Green)
              }
            }
            .padding(10)
          }
        })
      }
    }
    .onAppear(() => this.loadEvents())
  }
}

5. Performance Optimization

Lazy Data Loading

const query = cloud.cloudDB()
  .createQuery(Notice)
  .limit(10)
  .offset(this.notices.length);

Local Caching

import { dataStorage } from '@ohos.data.storage';

const storage = await dataStorage.getStorage('community_cache');
await storage.put('notices', JSON.stringify(this.notices));

Cross-device Coordination

import { distributedDeviceManager } from '@ohos.distributedHardware.deviceManager';

const deviceList = await distributedDeviceManager.getAvailableDeviceListSync();
deviceList[0].callMethod('openDoor', { doorId: 'main_gate' });

6. Testing and Deployment

Key Tests:

Access card simulation (requires NFC-enabled device)
Large file upload stability (50MB+ images)
Multi-device message synchronization

Cloud Configuration:

Enable CloudDB (CommunityDB) in AGC Console
Configure push certificates (iOS/Android)
Cloud Storage rules:

   {
     "rules": {
       "repairs": {
         "read": true,
         "write": "auth != null"
       }
     }
   }

Conclusion: HarmonyOS Advantages in Living Services

Seamless Device Integration: Real-time sync across phones/tablets/smart screens
Cloud Service Integration: One-stop backend solution with AGC
Peformance Excellence: Sub-second response with ArkTS engine

Extension Ideas:

Community group buying system

Smart waste sorting guide

Home service booking

Developing a Smart Community Life Assistant Based on HarmonyOS Next

linzhongxue — Sun, 08 Jun 2025 02:14:51 +0000

Developing a Smart Community Life Assistant Based on HarmonyOS Next

In the era of ubiquitous connectivity, HarmonyOS Next revolutionizes the development experience for lifestyle service applications. This article combines AppGallery Connect (AGC) services with ArkTS to guide you in building a comprehensive smart community assistant application, covering core scenarios like community services, smart home control, and neighborhood social features—making lifestyle app development simple and efficient.

1. Project Blueprint and Foundation Setup

Tech Stack:

HarmonyOS SDK 5.0
ArkTS Declarative UI
AGC Core Services: Cloud DB, Auth Service, Cloud Functions

Three-Step Initialization:

Create an AGC project and enable Cloud DB
Design community service data structures
Configure HarmonyOS app permissions

// CommunityService.ets - Data Model  
@Observed  
export class CommunityService {  
  @PrimaryKey id: string = '';      // Unique service ID  
  title: "string = '';               // Service title (e.g., \"Parcel Receiving\")  "
  description: "string = '';         // Service description  "
  icon: Resource = $r('app.media.default_icon'); // Service icon  
  contact: string = '';             // Contact number  
}

2. Community Information Service Implementation

Core Features:

Real-time property announcements
Community event calendar
Emergency alert system

// NoticeManager.ets - Announcement Module  
import { cloudDB } from '@kit.AGConnectCloudDBKit';  

export class NoticeManager {  
  private static cloudDBZone: cloudDB.CloudDBZone | null = null;  

  // Initialize Cloud DB  
  static async init() {  
    try {  
      const agcCloudDB = await cloudDB.getAGConnectCloudDB();  
      this.cloudDBZone = await agcCloudDB.openCloudDBZone(  
        new cloudDB.CloudDBZoneConfig('CommunityZone')  
      );  
    } catch (err) {  
      console.error('Cloud DB init failed', err.message);  
    }  
  }  

  // Get latest notice  
  static async getLatestNotice(): Promise<string> {  
    const query = cloudDB.CloudDBZoneQuery.where(CommunityNotice)  
      .orderByDesc('publishTime')  
      .limit(1);  

    const snapshot = await this.cloudDBZone.executeSnapshotQuery(query);  
    if (snapshot.hasNext()) {  
      return (await snapshot.next()).content;  
    }  
    return 'No announcements';  
  }  

  // Send emergency alert (Property management use)  
  static async sendEmergencyAlert(message: string) {  
    const alert = new CommunityNotice();  
    alert.id = generateUUID();  
    alert.content = `[URGENT] ${message}`;  
    await this.cloudDBZone?.upsertData([alert]);  
  }  
}

3. Smart Home Control Center

Scenario: Control smart devices via phone

// SmartHomeController.ets  
import { smarthome } from '@kit.ConnectedHomeKit';  

@Entry  
@Component  
struct HomeControlPanel {  
  @State lightsStatus: boolean = false;  
  @State temperature: number = 24;  

  // Load devices  
  private async loadDevices() {  
    const devices = await smarthome.getDeviceList();  
    devices.forEach(device => {  
      if (device.deviceType === 'LIGHT') {  
        this.lightsStatus = device.status === 'ON';  
      }  
    });  
  }  

  // Toggle lights  
  private async toggleLights() {  
    await smarthome.executeCommand({  
      deviceType: 'LIGHT',  
      command: this.lightsStatus ? 'TURN_OFF' : 'TURN_ON'  
    });  
    this.lightsStatus = !this.lightsStatus;  
  }  

  build() {  
    Column() {  
      // Light control card  
      ControlCard({  
        icon: $r('app.media.light_icon'),  
        title: 'Living Room Lights',  
        status: this.lightsStatus ? 'ON' : 'OFF',  
        onToggle: () => this.toggleLights()  
      })  

      // Temperature controller  
      TemperatureSlider({  
        currentTemp: this.temperature,  
        onTempChange: (newTemp) => { this.temperature = newTemp }  
      })  
    }  
    .onAppear(() => this.loadDevices())  
  }  
}  

// Temperature control component  
@Component  
struct TemperatureSlider {  
  @Link currentTemp: number;  
  build() {  
    Row() {  
      Image($r('app.media.temp_icon')).width(30)  
      Slider({ value: this.currentTemp, min: 16, max: 30 })  
        .onChange(v => this.currentTemp = v)  
      Text(`${this.currentTemp}°C`).fontSize(18)  
    }  
  }  
}

4. Neighborhood Social Features

Key Features:

Community chat rooms
Second-hand marketplace
Skill exchange platform

// NeighborChat.ets - Community Chat  
import { agconnect } from '@kit.AGConnectCoreKit';  

@Entry  
@Component  
struct CommunityChatRoom {  
  @State messages: ChatMessage[] = [];  
  @State newMessage: string = '';  
  private chatRoomId: string = 'community_main';  

  // Send message  
  private async sendMessage() {  
    const user = agconnect.auth().currentUser;  
    await cloud.function('sendChatMessage').call({  
      roomId: this.chatRoomId,  
      message: {  
        sender: user?.displayName || 'Anonymous Neighbor',  
        content: this.newMessage  
      }  
    });  
    this.newMessage = '';  
  }  

  // Real-time message listener  
  onInit() {  
    cloud.function('subscribeToChat').call({ roomId: this.chatRoomId })  
      .on('message', (event) => {  
        this.messages = [...this.messages, event.data];  
      });  
  }  

  build() {  
    Column() {  
      // Message list  
      List({ space: 10 }) {  
        ForEach(this.messages, (msg) => {  
          ListItem() { ChatBubble({ message: msg }) }  
        })  
      }  
      .layoutWeight(1)  

      // Input area  
      Row() {  
        TextInput({ text: this.newMessage })  
          .onChange(v => this.newMessage = v)  
          .layoutWeight(1)  
        Button('Send').onClick(() => this.sendMessage())  
      }  
    }  
  }  
}

5. Convenient Payment System

Features:

Utility bill queries
Online payments
Payment history

// PaymentService.ets  
import { pay } from '@kit.PaymentKit';  

export class PaymentManager {  
  // Retrieve pending bills  
  static async getPendingBills(userId: string): Promise<UtilityBill[]> {  
    const query = cloudDB.CloudDBZoneQuery.where(UtilityBill)  
      .equalTo('userId', userId)  
      .equalTo('isPaid', false);  

    const snapshot = await this.cloudDBZone.executeSnapshotQuery(query);  
    return await snapshot.getAllObjects();  
  }  

  // Pay bill  
  static async payBill(billId: string) {  
    const bill = await this.getBillById(billId);  
    const result = await pay.requestPayment({  
      amount: bill.amount,  
      description: `${bill.type} bill`  
    });  

    if (result.code === 0) {  
      await this.markBillAsPaid(billId);  
      return true;  
    }  
    return false;  
  }  

  // Mark bill as paid  
  private static async markBillAsPaid(billId: string) {  
    const bill = await this.getBillById(billId);  
    bill.isPaid = true;  
    await this.cloudDBZone.upsertData([bill]);  
  }  
}

6. Seamless Multi-Device Experience

Cross-Device Scenario:

View parcels on watch → Pay fees on phone → Check events on tablet

// Distributed Express Info Sync  
import { distributedKVStore } from '@kit.DistributedDataManagerKit';  

// Phone (Send parcel info)  
async function saveExpressInfo(info: ExpressInfo) {  
  const kvManager = await distributedKVStore.createKVManager();  
  const store = await kvManager.getKVStore('express_store');  
  await store.put('latest_express', JSON.stringify(info));  
}  

// Watch (Receive parcel info)  
@Entry  
@Component  
struct WatchExpressView {  
  @State expressInfo: ExpressInfo | null = null;  

  onInit() {  
    distributedKVStore.createKVManager()  
      .getKVStore('express_store')  
      .on('dataChange', 'latest_express', (data) => {  
        this.expressInfo = JSON.parse(data.value);  
      });  
  }  

  build() {  
    Column() {  
      if (this.expressInfo) {  
        Text(`Courier: ${this.expressInfo.company}`)  
        Text(`Status: ${this.expressInfo.status}`)  
      }  
    }  
  }  
}

7. Privacy and Security

Key Measures:

Data Minimization

   async function requestNecessaryPermissions() {  
     const permissions: Array<Permissions> = [  
       'ohos.permission.READ_CONTACTS', // Neighborhood contacts  
       'ohos.permission.LOCATION'      // Community services  
     ];  
     const result = await abilityAccessCtrl  
       .createAtManager()  
       .requestPermissionsFromUser(getContext(), permissions);  
     return result.permissions.every(p => p.granted);  
   }

End-to-Cloud Encryption

   <!-- security_config.xml -->  
   <security-config>  
     <domain-config cleartextTrafficPermitted="false">  
       <domain>community-api.example.com</domain>  
       <trust-anchors>  
         <certificates src="@raw/security_cert"/>  
       </trust-anchors>  
     </domain-config>  
   </security-config>

Data Masking

   function maskPhoneNumber(phone: string): string {  
     return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');  
   }

8. Expansion Scenarios

Community AI Assistant

   import { ai } from '@kit.AIKit';  
   const assistant = ai.createConversationAssistant();  
   assistant.on('response', (event) => {  
     showResponse(event.text);  
   });

Smart Waste Sorting

   camera.takePhoto().then(photo => {  
     ai.imageRecognition(photo).then(result => {  
       showGarbageCategory(result.objectName);  
     });  
   });

Shared Tool Reservation

   async function reserveTool(toolId: string) {  
     const result = await booking.createReservation({  
       itemId: toolId,  
       timeSlot: '2023-11-15 14:00'  
     });  
     return result.status === 'CONFIRMED';  
   }

Conclusion: Building Next-Gen Smart Living Experiences

Through HarmonyOS Next's capabilities, we achieve:

Service Integration - Unifying property, home, and social services
Seamless Device Coordination - Real-time sync across phone/watch/tablet
Intelligent Interactions - Enhanced UX with AI assistants

Best Practices:

Optimize workflows with AGC's A/B testing
Implement device auto-discovery via distributed soft bus
Decouple features using atomic services

Developing Smart Healthcare Applications Based on HarmonyOS Next

linzhongxue — Sun, 08 Jun 2025 02:08:32 +0000

Developing Smart Healthcare Applications Based on HarmonyOS Next

I. Introduction: HarmonyOS Empowers Smart Healthcare

With the release of HarmonyOS Next, its distributed capabilities and SoftBus technology bring new possibilities for medical application development. This tutorial will use AppGallery Connect cloud services and ArkTS language to develop a smart healthcare application featuring health data management, online consultations, and medication reminders. Through a complete case study, we demonstrate how to build secure and reliable medical-grade applications efficiently.

II. Environment Setup and Project Initialization

Development Environment Requirements:

DevEco Studio 4.1 Beta1
HarmonyOS SDK 5.0
AppGallery Connect Account

Project Initialization Steps:

Create a project in the AppGallery Connect console, enabling Auth Service and Cloud DB
Create an Empty Ability project in DevEco Studio
Configure the agconnect-services.json file
Add dependencies in build.gradle:

dependencies {
  implementation 'io.agconnect.agconnect-core-harmony:1.6.0.300'
  implementation 'io.agconnect.agconnect-auth-harmony:1.6.0.300'
  implementation 'io.agconnect.agconnect-clouddb-harmony:1.6.0.300'
}

III. Core Function Implementation

1. Secure Login and Authentication

Scenario: Dual-mode login for doctors/patients

// Auth Module AuthService.ets
import agconnect from '@hw-agconnect/api-harmony';
import '@hw-agconnect/auth-harmony';

export class AuthService {
  // Phone number quick login
  async quickLogin(phone: string, code: string): Promise<void> {
    try {
      const credential = agconnect.auth.PhoneAuthProvider.credentialWithVerifyCode(
        phone, 
        code
      );
      await agconnect.auth().signIn(credential);
      console.log("Login successful");
    } catch (err) {
      console.error("Login failed: " + err.message);
    }
  }

  // Role switching (doctor/patient)
  switchRole(role: 'doctor' | 'patient'): void {
    const user = agconnect.auth().currentUser;
    if (user) {
      user.updateProfile({
        customClaims: { role } // Store role information
      });
    }
  }
}

2. Health Data Management

Scenario: Syncing smartwatch heart rate data

// Health Module HealthManager.ets
import cloud from '@hw-agconnect/clouddb-harmony';

export class HealthManager {
  private cloudDB = cloud.CloudDBZone({ zoneName: "HealthZone" });

  // Store heart rate data
  async saveHeartRate(rate: number): Promise<void> {
    const HeartRate = cloud.object({
      objectType: 'HeartRateData',
      fields: {
        value: cloud.Number(rate),
        timestamp: cloud.Date(new Date())
      }
    });

    await this.cloudDB.upsert(HeartRate);
  }

  // Query last 24-hour data
  async getDailyReports(): Promise<Array<any>> {
    const query = cloud.query(HeartRateData)
      .greaterThan("timestamp", new Date(Date.now() - 86400000))
      .orderByDesc("timestamp");

    return await this.cloudDB.executeQuery(query);
  }
}

3. Online Consultation

Scenario: Real-time doctor-patient communication

// Consultation Module ConsultationService.ets
import { emitter } from '@ohos.events.emitter';

export class ConsultationService {
  // Create consultation session
  async createSession(doctorId: string): Promise<string> {
    const session = {
      patientId: agconnect.auth().currentUser.uid,
      doctorId,
      status: "active"
    };
    const res = await cloud.database().collection("sessions").add(session);
    return res.id; // Return session ID
  }

  // Real-time message listening
  setupMessageListener(sessionId: string): void {
    cloud.database().collection("messages")
      .where("sessionId", "==", sessionId)
      .onSnapshot(snapshot => {
        snapshot.docChanges.forEach(change => {
          if (change.type === 'add') {
            emitter.emit("new_message", change.doc.data());
          }
        });
      });
  }
}

4. Medication Reminders

Scenario: Cross-device distributed reminders

// Reminder Module ReminderManager.ets
import reminderAgent from '@ohos.reminderAgent';

export class ReminderManager {
  // Create distributed reminder
  async createDistributedReminder(medication: {
    name: string,
    dosage: string,
    time: Date
  }): Promise<void> {
    const reminder: reminderAgent.ReminderRequest = {
      reminderType: reminderAgent.ReminderType.TIMER,
      actionButton: [{ title: "Taken" }],
      ringDuration: 60,
      snoozeTimes: 3,
      timeInterval: 5 * 60 * 1000,
      distributed: true, // Key parameter: enable distribution
      notificationTitle: "Medication Reminder",
      notificationContent: `${medication.name} ${medication.dosage}`
    };

    await reminderAgent.publishReminder(reminder);
  }
}

IV. Key Technology Analysis

1. Device Collaboration via SoftBus

graph LR
A[Smartwatch] -->|Heart rate data| B(Phone)
B -->|Encrypted transmission| C[Consultation Tablet]
C -->|Prescription data| D[Home Medicine Cabinet]

2. Cloud Data Security Strategies

Field-level encryption: Automatic health data encryption
Dynamic data masking: Sensitive fields hidden during doctor access
Operation auditing: Full traceability of data access

3. Cross-Device UI Consistency

Using @ohos.arkui.advanced component library:

// Unified consultation card component
@Component
struct ConsultationCard {
  @Prop sessionInfo: Session

  build() {
    Column() {
      MedicalHeader({ title: sessionInfo.doctorName })
      MedicalDataChart({ data: sessionInfo.vitalSigns })
      ActionButtons({ 
        buttons: ['Send Report', 'End Consultation'] 
      })
    }
    .medicalCardStyle() // Apply predefined medical style
  }
}

V. Performance Optimization Practices

1. Rendering Optimization Techniques

// Optimizing long lists with LazyForEach
LazyForEach(this.medicationList, (item: Medication) => {
  MedicationItem({ data: item })
}, (item) => item.id.toString())

2. Memory Management Strategies

Paginated loading of health data
Message session object pooling
Dynamic unloading of bitmap resources

3. Power Consumption Control

// Enable sensors on demand
sensor.on(sensor.SensorType.HEART_RATE, (data) => {
  if (this.needMonitoring) {
    this.processHeartRate(data.value);
  }
});

VI. Project Deployment and Release

1. Cloud-Side Configuration Process

Enable "Medical Compliance Certification" in AGC console
Configure patient data retention policy (default 30 days)
Deploy automated backup tasks to cloud functions

2. Security Hardening Operations

# Generate application certificate
java -jar hap-sign-tool.jar generate-key -alias "med_key" -alg RSA

3. Release Considerations

Provide HIPAA compliance documentation
Pass medical data encryption certification
Submit privacy agreement text

VII. Extended Scenario Exploration

AI Triage Assistant: Integrate HMS Core ML Kit symptom analysis
Emergency Response System: Combine with location-based emergency dispatch
Medication Recognition: OCR functionality for medicine box scanning

Conclusion

This tutorial demonstrates how to build secure and efficient smart healthcare solutions using HarmonyOS Next and AppGallery Connect through a comprehensive medical application case study. The distributed architecture and efficient ArkTS development model provide robust technical support for the healthcare domain. As the HarmonyOS ecosystem matures, developers can further explore innovative scenarios like remote diagnosis and medical IoT.