分享一个疫情期间写的学英语 web

[Philippa]

之前一段时间迷上了前端，所以疫情期间找业余时间用 js 写了个学英语的 web，方法是我自己平时看 YouTube 学习的办法，我感觉比较合适中高级和喜欢 shadow practice 的人。技术方面后端 Graphql （ Apollo Server + prisma2 ）,前端是 Next.js(只有首页开了 ssr) + Apollo client + mobx-state-tree 。由于此前看到的众多不大好的事例，决定不开源（也不是什么高科技的东西）。此外还有更多想法和可以优化的地方，但可能受众太小了，目前没有计划继续这个 side project，打算迟点本地跑就行了。趁现在网站还活着分享一下看看大家的想法💡

由于需要 YouTube，所以需要飞机，请自行准备。下面是一些截图，提供一个快速的指南。

添加你喜欢的 YouTube Video 后，先过一遍视频，并添加视频中出现的不熟悉的单词和词组

点击词汇列表并不会弹出释义，而是会跳到对应的视频片段。是的，我以前也是中学期间就看到过语言习得论的文章，语言学习关键是 context，上下文的连结，而不是背含义。若还是不记得，可以点击文本出现字典。

根据你的词汇进行听写，确保学习质量再推进到下一个视频。否则看视频很容易是视频看完了，英语没学到。有点像买个 ipad 看书结果盖杯面的味道（都是借口）

截图的地址是： https://cabylang.com/learn/w0ztlIAYTCU

网站的首页是： https://cabylang.com

项目正在重构，暂时关闭。

[ps4512]

做的不错

[GG668v26Fd55CP5W]

看上去不错的样子

[Philippa]

@ps4512 谢谢

@falcon05 谢谢，设计改过好多次，下次开 project 先找设计师

[cheung]

厉害

[seanxx]

收藏了,等我听完 englishpod 再来尝试下

[hejingyuan199]

很有创意。我觉得很棒。
字幕是利用它自动生成的吗？
有的视频是直接有字幕的。

我有点想法，如果一个用户在多个视频都收藏了某个单词，那会切到哪个视频呢？
哈哈。要是能剪辑一下视频拼接起来，是不是更酷。YouTube 视频是可以下载的，用 ffmpeg 剪辑一下，或者别的 opencv 啥的。哈哈。

[hejingyuan199]

@hejingyuan199 楼主的技术结构我很羡慕。以后多多指教。多介绍下前端的这些技术面。不知道如何编辑自己的留言，所以回了两条。

[yuankui]

看技术栈就知道楼主牛逼

[mara1]

@seanxx ,同好啊，我去年听完的。

[Philippa]

@cheung 谢谢，你也有很多魔性作品啊

[Philippa]

@seanxx
@mara1

我以前大学时也听了一年的 Englishpod，那时挺流行的？因为当年都是说是 voa 慢速常速这种，那个 news 实在太无聊了。

[mara1]

@Philippa, EnglishPod 还是蛮好的，我听第 1 期时候大半听不懂，需要对着文本，到 300 多期时候，已经可以听懂 90%了。

现在我在听 All Ears English, 感觉也挺好玩的。

[Philippa]

@hejingyuan199

视频的字幕是可以自动生成和人工的。在用户加入视频页面两种字幕都认，可能使用者感觉自动字幕都很好，就没理由拒绝。后台的 pipeline 批量加就只加人工字幕，因为自动字幕很难判断其质量如何。

后面那个 idea 很好，目前视频之间没有交换数据。切到的视频就是当前页面的视频，这个有这个想法，以后可能会加上，比如跨视频，做一个整合的跟踪，但那样后台我需要长期运行的 pipeline，考虑到成本，目前没做。现在前后端都是纯 serverless 部署的，没人访问情况下基本上除了数据库的费用其他都可以忽略。

剪视频我要研究一下版权问题，我不确定那样可行。不过这是最理想的情况，前一天学过什么视频，第二天剪好就等点开一个个的过，那样效率最高，因为现在的设计都是视频之间是割裂的。

技术这方面的话，前端这边 Nextjs，个人感觉和 create-react-app 区别很少，只是基础上多了 ssr 。另外是 ApolloClient 做 graphql 的 client 端，css 用了 tailwindcss，这个方便自己做设计，设计用的 Figma，几小时的教程就能速成。部署用了 serverless+aws lambda，为的是便宜。：）

[Philippa]

@yuankui 哪里哪里，之前是做后端的，所以做出来还是能做出来，但技术很一般。

[MzM2ODkx]

网站做的很棒，完全不像小作坊 /个人作品，感谢

[MzM2ODkx]

邮箱注册有问题哈，确认地址是 localhost:3000 的，手动改成网站地址，验证通过。

[Philippa]

@iMusic 谢谢！邮箱注册补了个 test case，谢谢提醒

[sooo]

感觉很好，先收藏

[HI101]

@seanxx 在哪获取的资源，能分享下吗？

[chocolatesir]

请问楼主重构完了吗