移动端新闻门户网站-广工技术训练营

一、课程简介

本课程为前端基础技术实践课程，旨在完成一个移动端新闻门户，包括新闻分类、新闻阅读、评论等功能，对标今日头条、网易和腾讯新闻移动端门户。本课程中，可以看到一个产品是如何推进的，各方是如何协作的，体验一个产品从 IDEA 到实现的整个过程，通过这个过程的体验让同学们更好的过渡到职场。

二、涉及技术

• 产品原型设计：墨刀 / Figma / Framer / Sketch

• 项目管理：飞书文档

• 前端基础：HTML / CSS / JS / NodeJS

• 代码管理: Git

• 包管理: npm / yarn

• 脚手架 / 打包工具：Create React App / Parcel / Webpack / Next.js

• 视图框架：React / Vue

• 服务端技术：字节跳动轻服务 / Koa + MongoDB

三、用户需求

• 新闻列表页

  • 用户可以看到各种新闻的信息以及各种新闻频道
    • 不同新闻类型展示不同卡片样式
    • 用户希望可以在推荐频道，看到符合自己兴趣的推荐新闻
    • 不同的频道新闻可以按用户的兴趣来排序，如，体育频道，喜欢看NBA的，系统会自动调高 NBA 类新闻的排序优先级
  • 用户可以切换新闻频道，显示对应的新闻列表
  • 用户可以设置自己感兴趣的新闻栏目

• 新闻详情页

  • 用户可以看到对应新闻的内容，包括但不限于文字、图片、视频等内容
  • 用户可以点击图片查看大图、可以滑动切换图片，可以观看视频
  • 用户可以看推荐的评论，点击查看更多进入评论详情页
  • 用户可以收藏新闻

• 评论详情页

  • 用户可以看到评论及相关回复，评论可以按热评等维度排序
  • 用户可以发送或回复评论
  • 用户可以对评论进行点赞/取消点赞、踩/取消踩
  • 用户未登录可以跳转到登录注册页

• 登录注册页

  • 用户可以通过邮件注册登录账号
  • 用户可以通过忘记密码来找回自己的密码

• 个人中心页

  • 用户可以看到头像、昵称等信息并支持上传修改
  • 用户可以看到应用设置、我的收藏、我的评论、我的点赞、修改密码、使用报告入口

• 应用设置页

  • 用户可以设置主题色、字体大小、日间/夜间模式、省流量（是否显示视频或图片）模式

• 我的收藏

  • 用户查看到我的收藏列表页点击后进入对应的新闻

• 我的评论

  • 用户查看我的评论列表，点击定位到对应新闻下的对应评论详情

• 我的点赞

  • 用户可以查看到我的点赞列表，点击后进入评论详情

• 使用报告（类似支付宝年度使用报告等）

  • 用户可以在使用报告中看到自己本周/本月浏览的新闻关键词的词云
  • 用户可看看到自己使用最关注的频道是哪个，每个频道的浏览量
  • 最常使用 app 的时间段等等

四、项目阶段

阶段一：需求分析 & 前端基本知识学习

• 编写产品需求文档

  • 产品设计：根据用户故事梳理产品功能点，输出产品需求文档
  • 竞品调研：对产品功能点进行补充，输出产品可交互原型
  • UX 设计：此步骤可简化，选择一个竞品进行模仿即可

• 概要设计

  • 需求分析：根据产品设计梳理需实现的系统、模块、功能点
  • 技术选型：根据团队成员技术特点，在建议的技术范围内进行选型
  • 概要设计：
    • 通过常用 UML 图梳理确定业务实体关系、关键流程、模块间关系
    • 确定前后端交互方式，定义数据接口需求
    • 确定前后端开发所需物料资源（设计稿、切图、文案）列表
  • 任务估时、分工、排期
    • 对梳理出的系统、模块进行工作量评估
    • 根据任务工作量、依赖关系进行分工和排期，明确关键里程碑
    • 确定开发计划，输出排期甘特图

• 项目管理

  • 确定项目管理负责人，负责项目推进、风险管理、信息拉通
  • 确定项目协作机制，项目成员通过晨会 / 周会 / 周报进行定期的信息同步

• 前端基础知识学习 html / css / js / Node.js

• 前端框架学习 React / Vue，包括router、状态管理等

阶段二：前端基础功能开发

• 项目搭建：webpack / babel 打包构建

• mock 数据进行静态页面开发，交互开发

• 能够走通静态流程

阶段三：完整逻辑实现跑通

• 轻服务 / Node 服务基本框架环境搭建

• 相关数据表设计和实现

• 实现用户体系，登录 / 注册 / 忘记密码等功能

• 完成新闻、评论、收藏、点赞等接口设计与开发

• 实现动态数据获取并展示在前端

阶段四：项目优化及高级功能实现

• 完成功能测试，修复问题之后部署上线

• PWA 本地化优化

• SSR 以及 SEO 优化

• 收集分析用户数据，对用户数据进行分析，实现「使用报告功能」

• 新闻内容的爬取并进行 NLP 分析，对新闻内容分类聚合，建立基本的推荐算法模型，实现「推荐」、「频道新闻排序」功能

五、参考信息

• 头条 API 参考：

  • https://wiki.bytedance.net/pages/viewpage.action?pageId=526686（内网）
  • http://zzzia.net:6676/archives/toutiao

• 门户设计参考：

  • https://m.toutiao.com/
  • https://github.com/iMeiji/Toutiao
  • https://3g.163.com/touch/#/

• Web 端建议使用现成解决方案

  • React
    • 文档：https://reactjs.org/
    • 脚手架：https://github.com/facebook/create-react-app
  • Vue
    • 文档：https://cn.vuejs.org
    • 脚手架：https://cli.vuejs.org/