使用 Supabase 和 React 构建每日 Python 课程 Telegram Bot

Source: Dev.to

介绍

想象一下，一个通过 Telegram 每天向用户发送简短 Python 课程的 Web 应用。
借助 Supabase 和 React 等现代工具，我们可以无缝创建——结合前端、后端和 Telegram 机器人。在本教程中，我们将逐步讲解：

1. 设计应用程序
2. 创建机器人
3. 将其集成到 Supabase
4. 将其链接到 React 前端

第一步：设计应用

功能

• 通过 Telegram 每日推送 Python 课程。
• 用户在应用中跟踪课程进度。
• 用户可以配置通知（启用/禁用、发送时间、Telegram 用户名）。

数据库表

lessons

create table public.lessons (
    id uuid primary key default gen_random_uuid(),
    day_index int not null unique,
    title text not null,
    content text,
    example_code text,
    challenge text,
    created_at timestamptz default now()
);

user_progress

create table public.user_progress (
    id uuid primary key default gen_random_uuid(),
    user_id uuid references auth.users(id) on delete cascade,
    lesson_id uuid references lessons(id) on delete cascade,
    completed boolean default false,
    completed_at timestamptz
);

user_notifications

create table public.user_notifications (
    id uuid primary key default gen_random_uuid(),
    user_id uuid references auth.users(id) on delete cascade,
    channel text not null,               -- 'telegram', 'email'
    enabled boolean default true,
    delivery_time time not null,
    timezone text default 'UTC',
    created_at timestamptz default now(),
    updated_at timestamptz default now()
);

user_telegram

create table public.user_telegram (
    id uuid primary key default gen_random_uuid(),
    user_id uuid references auth.users(id) on delete cascade unique,
    telegram_chat_id bigint,
    activation_code int not null,
    status text default 'pending',        -- pending | connected
    created_at timestamptz default now(),
    updated_at timestamptz default now()
);

第2步：创建Telegram机器人

1. 打开Telegram并搜索 BotFather。
2. 发送 /newbot 并按照指示操作。
3. 选择一个名称和用户名；BotFather 会给你一个 bot token。
4. 请妥善保管此 token —— 发送消息通过 Telegram API 时需要它。

测试你的机器人

curl -X POST https://api.telegram.org/bot/sendMessage \
     -d chat_id= \
     -d text="Hello from PyDaily!"

提示： 使用 @userinfobot 获取用于测试的 Telegram 聊天 ID。

第三步：Supabase 后端设置

Supabase 将处理：

• 身份验证
• 数据库存储
• Edge Functions（无服务器后端）

1. 存储课程

insert into public.lessons (day_index, title, content, example_code, challenge)
values
  (1, 'Variables & Types', 'Introduction to Python variables',
   'x = 5\ny = "Hello"', 'Write a program to swap two variables'),
  (2, 'Control Flow', 'If, elif, else',
   'if x > 5:\n    print("x is greater")',
   'Write a function to check even/odd');

2. 用户通知设置

• 用户可以选择发送渠道（Telegram）和时间。
• 为每个用户在 user_telegram 表中添加一行，并生成激活码。

3. Telegram 的 Edge Function

创建一个 Supabase Edge Function，实现以下功能：

1. 获取已启用 Telegram 的用户。
2. 确定今天的课程。
3. 检查 user_progress，避免重复发送。
4. 通过 Telegram Bot API 发送课程。
5. 更新 user_progress。

第4步：React 前端

通知设置组件

function NotificationSettings({ user }) {
  const [telegramUsername, setTelegramUsername] = useState('');
  const [activationCode, setActivationCode] = useState('');
  const [status, setStatus] = useState('pending');

  const generateCode = async () => {
    const { data } = await supabase.rpc('generate_telegram_activation_code');
    setActivationCode(data);
  };

  return (
    <div>
      <input
        placeholder="Telegram username"
        value={telegramUsername}
        onChange={e => setTelegramUsername(e.target.value)}
      />
      <button onClick={generateCode}>Generate Activation Code</button>

      <p>Status: {status}</p>

      {status === 'pending' && (
        <div>
          Send this code to the bot: {activationCode}
        </div>
      )}
    </div>
  );
}

• 在提交时，通过 Supabase 客户端将数据保存到 user_notifications 和 user_telegram。
• React 获取课程历史以显示用户进度。

第 5 步：连接所有组件

1. 用户 在前端输入 Telegram 用户名。
2. 后端 生成激活码（通过 RPC）。
3. 用户 将激活码发送给机器人 → 后端 webhook 验证 → 将 status = connected 更新。
4. 每日课程调度器 Edge Function 运行：

// Pseudocode
for (const user of usersWithTelegramEnabled) {
  const lesson = await getTodaysLesson();
  const alreadySent = await checkUserProgress(user.id, lesson.id);
  if (!alreadySent) {
    await sendTelegramMessage(user.telegram_chat_id, formatLesson(lesson));
    await markLessonSent(user.id, lesson.id);
  }
}

son = getLessonForToday(user)
if !user_progress.completed:
    sendTelegram(user.telegram_chat_id, lesson.content)
    markLessonCompleted(user, lesson)

有了这些组件，PyDaily 将会自动通过 Telegram 向用户推送每日 Python 课程，同时让用户在 React 仪表盘中跟踪学习进度并控制通知偏好。 🚀

调度

• 可以通过 Supabase cron 或外部服务进行调度。
• 课程包括 Markdown 格式或代码块。

第6步：测试与上线

• 测试激活码流程。
• 确保 user_telegram.status = connected。
• 手动运行 Edge Function 以验证消息。
• 为 Edge Function 安排每日执行。

结论

使用 Supabase 和 React，您可以：

• 无缝管理用户、课程和通知。
• 使用 Telegram 机器人进行每日互动，无需构建自定义消息服务。
• 将架构扩展到 电子邮件、WhatsApp 或其他渠道。

下一步

• 通过 Telegram sendPhoto 添加课程附件（图片、图表）。
• 使用课程时间线和进度图表扩展 React UI。
• 在 Edge Functions 中添加重试逻辑，以实现可靠投递。

本文提供了一个 完整的端到端方案，用于实现每日 Python 课程的 Telegram 机器人，并使用 Supabase 作为后端将其与 React 前端集成。