基于HarmonyOS Next的美食发现应用开发指南

一、项目概述与开发环境搭建

我们将开发一款名为"FoodFinder"的美食发现应用，核心功能包括：

基于位置的附近餐厅推荐
美食详情展示与用户评分
收藏夹管理功能
餐厅搜索与筛选

开发环境要求：

DevEco Studio 4.1 (Build Version 4.1.3.400)
HarmonyOS SDK 5.0
AppGallery Connect 服务集成
TypeScript 语言环境

项目初始化步骤：

创建HarmonyOS应用工程
在build-profile.json5配置云服务依赖

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

在AGC控制台开启云数据库、认证服务和位置服务

二、核心功能实现与代码解析

1. 位置获取与餐厅数据查询

// 获取用户位置并查询附近餐厅  
import geoLocationManager from **********';  
import cloudDB from '@ohos/agconnect-database';  

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

  async aboutToAppear() {  
    // 获取当前位置  
    const location = await geoLocationManager.getCurrentLocation();  
    this.queryNearbyRestaurants(location.latitude, location.longitude);  
  }  

  // 查询附近餐厅  
  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 })  
      })  
    }  
  }  
}  

// 餐厅数据模型  
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. 餐厅详情页实现

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

  // 检查是否已收藏  
  async aboutToAppear() {  
    const auth = await import('@ohos/agconnect-auth');  
    const userId = auth.getCurrentUser().uid;  
    this.isFavorite = await this.checkFavoriteStatus(userId, this.restaurant.id);  
  }  

  // 收藏/取消收藏  
  toggleFavorite() {  
    if (this.isFavorite) {  
      // 从云数据库移除收藏记录  
      cloudDB.getCloudDBZone("UserDB").delete(this.favoriteRecord);  
    } else {  
      // 向云数据库添加收藏记录  
      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 ? '取消收藏' : '收藏')
        .onClick(() => this.toggleFavorite())
        .margin(20)
    }
  }
}

3. 收藏夹同步功能

// 用户收藏管理
class FavoriteService {
  // 获取用户所有收藏
  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);
  }

  // 添加实时数据监听
  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;
  }
}

三、关键HarmonyOS特性应用

1. 原子化服务实现菜品分享

// 定义分享原子服务
@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(() => {
      // 跳转至餐厅详情页
      router.pushUrl({ url: `pages/RestaurantDetail?id=${this.dishInfo.restaurantId}` });
    })
  }
}

2. 使用关系型数据库离线缓存

// 初始化本地数据库
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
    )`
  );
});

// 网络请求失败时使用缓存数据
async function getRestaurants() {
  try {
    const onlineData = await fetchOnlineData();
    cacheData(onlineData); // 更新缓存
    return onlineData;
  } catch (error) {
    return loadCachedData(); // 返回缓存数据
  }
}

四、性能优化实践

图片加载优化

// 使用懒加载和占位图
AsyncImage(this.restaurant.image)
  .placeholder($r('app.media.placeholder'))
  .transitionEffect(TransitionEffect.OPACITY)

数据分页加载

// 实现滚动分页
List({ scroller: this.scroller }) {
  // ...
}
.onReachEnd(() => {
  if (!this.isLoading) {
    this.loadNextPage();
  }
})

渲染性能优化

// 使用组件复用优化长列表
ForEach(this.restaurants, (item: Restaurant) => {
  RestaurantItem({ data: item })
}, (item: Restaurant) => item.id) // 关键：设置唯一键

五、AppGallery Connect集成要点

云数据库规则配置

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

AB测试实现推荐算法优化

// 获取AB测试参数
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();

六、项目测试与发布

单元测试示例

// 测试评分计算逻辑
describe('RatingCalculator', () => {
  it('should calculate weighted rating', () => {
    const ratings = [5, 4, 3, 5];
    const result = calculateWeightedRating(ratings);
    expect(result).toBeCloseTo(4.25);
  });
});