# Aladia 在线学习平台

> 一个意大利在线教育平台，做班级制课程、直播课和创作者变现。已在 aladia.io 上线，注册学员超过 2,000 人。

- URL: https://oliverz.dev/zh/work/aladia-online-education-platform
- Author: Oliver Zhang (https://oliverz.dev)
- Language: zh-Hans
- Category: 在线教育
- Year: 2024
- Role: 前端工程师
- Client: Aladia S.r.l.（意大利）
- Stack: React, EdTech, Stripe, OAuth
- Live: https://app.aladia.io/

## 项目背景

Aladia 是一个意大利的在线学习平台，业务包括班级制课程、直播课、AI 辅助制作课程，以及创作者变现。产品方向、设计和平台架构由 Aladia 的产品团队负责，我负责学员和讲师日常用到的前端界面，前后大约 800 个工时。平台在 [aladia.io](https://app.aladia.io/) 上线运行，注册学员超过 2,000 人。

![课程详情页](https://oliverz.dev/works/aladia-online-education-platform/1.png?v=cbafbf88 "视频头图下面是章节列表，每节课都有自己的锁定状态和直播排期，价格和报名也放在同一个页面里")

## 一个页面，要装下太多状态

上面这个课程详情页，是我花时间最多的地方。它得同时装下好几件事，又不能让人看糊涂。

看侧栏：第 2 章已经展开，正在进行，前两节课已经结束，第 3 到第 6 节排在具体的日期和时间；第 3 章还锁着。每一行都有自己的状态：可以看、已结束、定在某天，或者报名后才解锁。底部同时还要显示评分、语言、名额、直播课数量、价格、折扣和倒计时。

这些复杂度来自班级制课程本身。点播课就是一串视频，全都能看，状态都一样。班级制课程有课表，所以同一个页面要同时照顾三种人：还在犹豫要不要报名的人，找今晚那节课的在读学员，以及错过了第 2 节、想看回放的人。让锁定和排期状态一眼就能看懂，花的迭代次数比视频播放器、聊天和支付都多。

## 在做决定的地方付款

Stripe 支付直接放在课程详情里，没有单独做一个支付页。一个人正拿课程和价格、开课时间做比较，不该被跳转到支付页面而丢掉这些上下文，回来之后再重新想一遍。

## 讲师端的课程制作

两条制作流程都是我做的：一条是点播课的创建，包括上传内容和配置章节；另一条是直播课的排期。

课程目录能不能长起来，取决于这两条流程。讲师觉得做课太痛苦，平台就会缺内容，学员端打磨得再好也救不了一个空荡荡的市场。两条里直播课排期更难，因为排期出错是有真实后果的：讲师把时区配错，一整个班的学员就会扑空。

## 跨模块的部分

媒体播放、Google OAuth、实时聊天，还有我负责的各个模块的响应式适配。OAuth 和支付这两处，出了 bug 不是体验变差，而是用户直接走不下去，所以它们花的测试时间比代码量看上去该占的要多。