基于HarmonyOS Next的“食光记”美食社区应用开发全解析

基于HarmonyOS Next的“食光记”美食社区应用开发全解析

本文将使用HarmonyOS 5.0的ArkTS语言与AppGallery Connect服务，从零构建一个功能完整的美食社交应用“食光记”。您将掌握用户认证、数据存储、位置服务等核心功能的集成方法。

一、项目概述与技术栈

应用场景：用户可分享美食探店笔记、收藏喜爱的餐厅、发现附近美食热点

核心技术：

• HarmonyOS 5.0 (Next API 10)
• ArkTS 声明式开发
• AGC服务：认证服务、云数据库、云存储、云函数
• 位置服务、媒体库访问

二、工程搭建与AGC配置

1. 创建HarmonyOS工程

// 在entry/src/main/ets/pages/Index.ets初始化
@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('食光记')
        .fontSize(30)
        .fontWeight(FontWeight.Bold)
    }
    .width('100%')
    .height('100%')
  }
}

1. AGC服务开通

• 在AGC控制台创建项目并启用： 认证服务（手机号/邮箱登录）CloudDB（美食数据存储）Cloud Storage（图片缓存）Cloud Functions（业务逻辑处理）

三、核心功能实现

1. 用户认证模块

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

// 初始化AGC认证
export function initAGC() {
  agconnect.instance().init();
}

// 手机号登录
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("登录失败: " + JSON.stringify(err));
    return false;
  }
}

2. 美食数据存储（CloudDB）

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

  @Field()
  title: string = ''; // 笔记标题

  @Field()
  restaurant: string = ''; // 餐厅名称

  @Field()
  content: string = ''; // 详细评价

  @Field()
  userId: string = ''; // 关联用户ID

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

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

// 初始化云数据库
const AGConnectCloudDB = clouddb.AGConnectCloudDB;
const cloudDBZone = AGConnectCloudDB.createCloudDBZone();

// 添加美食笔记
export async function addFoodNote(note: FoodNote): Promise<void> {
  try {
    await cloudDBZone.executeUpsert(note);
    console.log('笔记保存成功');
  } catch (e) {
    console.error('保存失败: ' + e.message);
  }
}

// 查询附近美食
export async function queryNearbyNotes(lat: number, lng: number): Promise<FoodNote[]> {
  const query = clouddb.CloudDBZoneQuery.where(FoodNote)
    .nearTo('location', `${lat},${lng}`, 5); // 5公里范围
  return await cloudDBZone.executeQuery(query);
}

3. 图片上传（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. 获取存储实例
  const storageInstance = agc.storage().storage();
  
  // 2. 创建引用路径
  const timestamp = new Date().getTime();
  const reference = storageInstance.ref(`food_images/${timestamp}.jpg`);
  
  // 3. 上传文件
  await reference.putFile(fileUri);
  
  // 4. 获取公开访问URL
  return await reference.getDownloadURL();
}

4. 位置服务集成

// LocationService.ets
import geolocation from **********';

// 获取用户当前位置
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('定位失败: ' + JSON.stringify(err));
    return { lat: 0, lng: 0 }; // 返回默认值
  }
}

四、功能整合：发布美食笔记页面

// CreateNotePage.ets
@Component
struct CreateNotePage {
  @State title: string = '';
  @State content: string = '';
  @State selectedImage: string = '';
  @Link location: string; // 从父组件传入位置

  build() {
    Column() {
      // 标题输入
      TextInput({ placeholder: '笔记标题' })
        .onChange((value) => { this.title = value; })
      
      // 图片选择器
      Button('选择照片')
        .onClick(async () => {
          const image = await pickImageFromGallery();
          this.selectedImage = image;
        })
      
      // 内容输入
      TextArea({ placeholder: '分享你的美食体验...' })
        .onChange((value) => { this.content = value; })
      
      // 发布按钮
      Button('发布笔记')
        .onClick(async () => {
          // 1. 上传图片
          const imageUrl = await uploadFoodImage(this.selectedImage);
          
          // 2. 创建数据对象
          const newNote = new FoodNote();
          newNote.title = this.title;
          newNote.content = this.content;
          newNote.location = this.location;
          newNote.imageUrl = imageUrl;
          
          // 3. 保存到数据库
          await addFoodNote(newNote);
          
          // 4. 返回首页
          router.back();
        })
    }
  }
}

五、性能优化实践

1. 数据缓存策略

// 使用@StorageProp本地缓存
@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; // 自动持久化
  }
}

1. 图片懒加载优化

// 使用LazyForEach加载列表
LazyForEach(this.foodNotes, (note: FoodNote) => {
  ListItem() {
    AsyncImage(note.imageUrl) // 异步加载图片
      .aspectRatio(1.5)
      .placeholder($r('app.media.loading')) // 占位图
  }
}, (note) => note.id.toString())

六、扩展能力建议

1. 智能推荐（AGC预测服务）
2. 实时消息推送（Push Kit）
3. 安全风控（Safety Detect）

总结

本文通过“食光记”美食社区应用的开发实战，完整演示了：

1. 使用ArkTS声明式语法构建UI界面
2. 集成AGC认证服务实现用户系统
3. 通过CloudDB管理结构化美食数据
4. 利用位置服务实现附近美食发现
5. 使用云存储处理图片资源
6. 实施关键性能优化策略