我的播客库
等级： 3-高级
在GitHub状态和播客目录中，你学习了什么是网络抓取以及当API和后端数据库不可用时，如何将其作为替代数据源。_我的播客库_应用程序将你新学到的网络抓取知识与你的前端技能相结合，将简单的播客目录应用程序扩展成一个更复杂且有用的应用程序。
_我的播客库_的目标是构建一个更加个性化的你喜欢的播客和剧集的图书馆。在这个应用程序中，你将使用Puppeteer和Podbean来创建一个应用程序，以维护你的个人播客库。
以下用户故事详细描述了本项目，但请随意发挥你的想象力。
用户故事
粉丝播客展示
- [ ] 用户可以在表格显示区域看到他们喜欢的播客。
- [ ] 如果还没有添加任何播客，该区域会显示一条水印格式的消息：“尚未添加任何播客”。
- [ ] 用户可以在该区域看到已添加的每个粉丝播客的概览。这包括播客图标、播客名称以及最新剧集数量。
- [ ] 用户可以点击播客图标以显示一个包含最新剧集列表的页面。
粉丝播客条目
- [ ] 用户可以在粉丝播客区域顶部看到一个带有hover文本“添加新播客”的"+"按钮。
- [ ] 用户可以点击"+"按钮以显示一个弹出面板，允许添加一个新的粉丝播客。该面板包含一个输入区域，用于输入Podbean上播客页面的文本输入框（例如Techpoint Charlie），一个"保存"按钮和一个"取消"按钮。
- [ ] 用户可以点击"保存"按钮以验证URL并将播客添加到粉丝播客区域。
- [ ] 如果URL不以
https://www.podbean.com/podcast-detail/开头，或者导航到该页面导致404错误，用户可以看到一个警告消息。 - [ ] 用户可以在跨会话中看到粉丝播客的有效URL。
- [ ] 用户可以点击"取消"按钮丢弃任何数据并关闭弹出窗口。
播客页面的最新剧集
- [ ] 用户可以看到一个播客剧集的表格。
- [ ] 用户可以在该表中看到行，显示可点击的剧集图标、剧集标题、最初广播的日期以及用于将其标记为喜欢的红心图标按钮。
- [ ] 用户可以滚动列表。
- [ ] 用户可以点击剧集图标以在Podbean网站上显示该剧集的页面。
- [ ] 用户可以点击剧集的红心图标以将其标记为喜欢。
- [ ] 用户可以点击剧集的红心图标以取消其喜欢的标记。
- [ ] 用户可以看到表格按最新剧集优先显示，其次是之前标记为喜欢的剧集。
- [ ] 用户可以看到喜欢剧集在跨会话中持续存在。
额外功能
剧集评分
- [ ] 用户可以看到每集剧集旁边的5星图标，表示用户对其的评级。
- [ ] 用户可以从左到右点击星星来对剧集进行评级。点击星星时会填充或更改星星颜色。
- [ ] 用户可以通过从右到左点击星星来取消选择它们。
- [ ] 用户可以在页面上看到按评级顺序排序的粉丝剧集列表。
搜索和标签
- [ ] 用户可以在最近剧集页面输入一个自由形式的标签。这个标签不需要预定义。
- [ ] 用户可以在主页上看到一个搜索框和一个“搜索”按钮。
- [ ] 用户可以在搜索框中输入标签以显示来自任何播客的剧集页面，格式与最近剧集页面相同。
- [ ] 用户可以在搜索结果页面上的取消按钮上返回主页。
有用的链接和资源
示例项目
不适用