完整项目模板：多设备提醒App云端协同方案

最新推荐文章于 2025-12-14 11:45:39 发布

原创最新推荐文章于 2025-12-14 11:45:39 发布 · 900 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#harmonyos #华为

零基础学鸿蒙开发专栏收录该内容

451 篇文章

订阅专栏

该文章已生成可运行项目，

你是不是也在想——“鸿蒙这么火，我能不能学会？”
答案是：当然可以！
这个专栏专为零基础小白设计，不需要编程基础，也不需要懂原理、背术语。我们会用最通俗易懂的语言、最贴近生活的案例，手把手带你从安装开发工具开始，一步步学会开发自己的鸿蒙应用。
不管你是学生、上班族、打算转行，还是单纯对技术感兴趣，只要你愿意花一点时间，就能在这里搞懂鸿蒙开发，并做出属于自己的App！
📌 关注本专栏《零基础学鸿蒙开发》，一起变强！
每一节内容我都会持续更新，配图+代码+解释全都有，欢迎点个关注，不走丢，我是小白酷爱学习，我们一起上路 🚀

全文目录：

🎯一、云端环境搭建（Supabase）

1️⃣ 创建项目

登录 https://supabase.io
新建 Project，记下 API URL 和 anon/public 密钥

2️⃣ 数据库表结构

-- 创建提醒表
CREATE TABLE reminders (
  id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
  user_id text NOT NULL,
  content text NOT NULL,
  time timestamp NOT NULL,
  created_at timestamp DEFAULT now()
);

-- 启用 RLS（行级安全）
ALTER TABLE reminders ENABLE ROW LEVEL SECURITY;

-- 仅允许本人操作数据
CREATE POLICY "User can access own reminders" ON reminders
  USING (auth.uid() = user_id);

🛠二、云函数（推送通知示例）

以 Cloudflare Workers 或 Vercel Serverless Function 为例：

export default async function handler(req, res) {
  const { userId, content, time } = req.body;

  // 模拟推送：实际项目可调用华为推送、小程序消息等
  console.log(`🔔 用户 ${userId} 有新提醒：${content} @ ${time}`);

  res.status(200).json({ success: true });
}

你也可以接入华为 Push Kit、Firebase Cloud Messaging 替换 console.log。

📲三、ArkTS 多端前端示例（手机、手表通用）

@Entry
@Component
export struct ReminderApp {
  @State reminders: ReminderItem[] = [];
  @State content: string = '';
  @State time: string = '';

  aboutToAppear() {
    this.fetchReminders();
  }

  async fetchReminders() {
    const res = await fetch("https://your-supabase-url.supabase.co/rest/v1/reminders?select=*", {
      headers: {
        "apikey": "YOUR_API_KEY",
        "Authorization": "Bearer " + getUserToken()
      }
    });
    this.reminders = await res.json();
  }

  async addReminder() {
    const item = { content: this.content, time: this.time, user_id: getUserId() };

    await fetch("https://your-supabase-url.supabase.co/rest/v1/reminders", {
      method: "POST",
      headers: {
        "apikey": "YOUR_API_KEY",
        "Authorization": "Bearer " + getUserToken(),
        "Content-Type": "application/json"
      },
      body: JSON.stringify(item)
    });

    // 调用云函数推送提醒
    await fetch("https://your-cloud-function/reminderNotify", {
      method: "POST",
      body: JSON.stringify({
        userId: getUserId(),
        content: this.content,
        time: this.time
      })
    });

    this.content = '';
    this.time = '';
    this.fetchReminders();
  }

  build() {
    Column() {
      TextInput({ placeholder: "提醒内容" }).onChange(v => this.content = v)
      TextInput({ placeholder: "时间（如18:00）" }).onChange(v => this.time = v)
      Button("添加提醒").onClick(() => this.addReminder())

      List() {
        ForEach(this.reminders, item => 
          ListItem() {
            Text(`${item.time} - ${item.content}`)
          }
        , item => item.id)
      }
    }
    .padding(20)
  }
}

🔄四、数据同步机制

场景	实现
新提醒提交	前端 POST 云端 → 云函数推送通知
设备启动	fetch 拉取 reminders 列表
定时同步	setInterval 定期请求最新提醒
离线缓存	本地 KV 存储，联网后同步上传

🧠五、进阶建议

✅ 手表端震动：调用 @ohos.vibrator 在提醒到点时震动
✅ 实时通知：接入 WebSocket 或华为 Push Kit
✅ 多人共享：提醒数据加上 group_id 字段
✅ 云端统计：云函数中记录提醒创建时间，统计用户行为
✅ 安全认证：建议 OAuth2 登录，Token 鉴权保障数据隔离

🚀六、项目目录参考

ReminderCloudProject/
├── cloud_function/      # 云函数推送逻辑
├── frontend_harmony/    # ArkTS 多端前端（手机、手表）
├── supabase/            # 数据库结构SQL、RLS策略
├── docs/                # 部署文档、API说明