Trinkle23897/tuixue.online-visa

New frontend feature request

Trinkle23897 opened this issue · 10 comments

Trinkle23897 commented

这个issue负责专门记录下一版前端的需求

QueenieLiuuu commented

国内版本网站

  1. 产品定义：为有美签需求的留学生或其他人士提供及时的国内美签放
  2. 产品功能：（这是一个在线协同的思维导图页面，可以在上面在线协同列出产品功能逻辑）
    https://shimo.im/mindmaps/xJcXkTxPRQPRcH6H/ 《无标题》，可复制链接后用石墨文档 App 或小程序打开
  3. 交互逻辑图&视觉：在产品功能确定后，使用antdesign组件进行交互逻辑和视觉的设计
BenjiTheC commented

国内版本网站

我觉得在UI层面上其实可以把国内和国际按照一个整体来考虑，本质上都是React component渲染相同结构但不同内容的数据。

  1. 产品定义：为有美签需求的留学生或其他人士提供及时的国内美签放

可以突出一下汇总了国内国外不同地点的可预约签证情况？已经提供邮件及其他社交平台的订阅通知服务（个人感觉这个是个很强的feature毕竟刚刚靠tuixue的通知邮件抢到了金边面签lmao

以及@n+e 之前提到的需求在这里记一下：

  1. 支持1000的并发访问——不知道这个应该是在nginx做负载均衡还是在代码库里做，如果是在代码库里做是不是主要还是api这边（雾
  2. 保持tuixue.online/visa访问国内大使馆列表和tuixue.online/global访问global大使馆列表（这个可以把/global redirect到/visa就行）
BenjiTheC commented

UI/UX

我自己的一点想法

wireframe我随便糊的...我觉得新的UI应该要做成响应式设计，这里的wireframe只画了桌面版的ui（懒orz

  1. 需不需要像这样（👇）的一个landing page提升一下新用户（指未收藏/visa or /global页面）的交互体验
  2. New methodology/rule for categorization & filtering of Embassy/Consulate
    这里主要讨论global，国内领事馆的话数量不多可以当作选定一个地区的global页面。当前的大使馆/领事馆的分类是一个签证类型（['F', 'B', 'H', 'O', 'L']）和系统（['cgi', 'ais', 'mx']）的排列组合，按照这个issue的这个评论最下面的讨论，把系统分类限定在['cgi', 'ais']然后其他的可以重新设计。我目前想的比较直接的设计是这样的（👇），就是把可用的分类方式做成一排下拉列表放在顶部，然后每一排是一个结果，就是现在前端表格里一个大使馆的一行（注：即当天的“当前”和“最早”），然后悬浮（或者点击）在某个大使馆上的时候会下拉出现一个折线图，就是现在前端顶部的折线图，我看echart.js好像是个很好玩的东西，可以学习一下。注意这个wireframe上下拉折线图会遮盖下面的内容，但我觉得更好的实现方式是把内容往下推，只是画的时候好麻烦就怎么快怎么来了=。=
  3. 新的邮件订阅UX/UI
    当前的邮件订阅会有一个单独的页面，我们应该保留并优化这个页面，但同时我们也可以提供一个更快捷的方式让用户去订阅某个签证类型在某个领事馆的通知——即表格每一行末端可以排几个按钮（👇），提供不同渠道的订阅方式，邮件订阅可以提供一个弹窗然后直接输入邮件地址点击订阅即可（这里有个implementation细节我没想明白怎么弄，之后做到这一步在讨论lol）

1-LandingPage-2x
3-EmbassyList-2x
4-EmbassyListHoverOnElment-2x
2-EmbassyListSubs-2x

Trinkle23897 commented

2. New methodology/rule for categorization & filtering of Embassy/Consulate
这里主要讨论global，国内领事馆的话数量不多可以当作选定一个地区的global页面。当前的大使馆/领事馆的分类是一个签证类型（['F', 'B', 'H', 'O', 'L']）和系统（['cgi', 'ais', 'mx']）的排列组合，按照这个issue的这个评论最下面的讨论，把系统分类限定在['cgi', 'ais']然后其他的可以重新设计。我目前想的比较直接的设计是这样的（point_down），就是把可用的分类方式做成一排下拉列表放在顶部，然后每一排是一个结果，就是现在前端表格里一个大使馆的一行（注：即当天的“当前”和“最早”），然后悬浮（或者点击）在某个大使馆上的时候会下拉出现一个折线图，就是现在前端顶部的折线图，我看echart.js好像是个很好玩的东西，可以学习一下。注意这个wireframe上下拉折线图会遮盖下面的内容，但我觉得更好的实现方式是把内容往下推，只是画的时候好麻烦就怎么快怎么来了=。=

有几个问题：

  1. 如果用户想查看连续几天的某个地方的信息，这个要怎么处理
  2. 其他的信息（比如现在的那个柬埔寨预约注意事项、订阅telegram频道）怎么显示，而且这个如果做在other filter里面的话，没人会注意到的
  3. email订阅多个地方和取消订阅如何交互
  4. 我还是觉得如果这样一个block一个block的列的话，信息密度太低（我当时的想法是做一个table然后点击table的某一行就会下拉显示当天的chart，但是echart多表格好像有点问题（可能是我姿势不对）所以当时就没实现这个
BenjiTheC commented
  1. 如果用户想查看连续几天的某个地方的信息，这个要怎么处理
  2. 我还是觉得如果这样一个block一个block的列的话，信息密度太低（我当时的想法是做一个table然后点击table的某一行就会下拉显示当天的chart

可以在这一行加一个按钮，链接到另一个页面，比如tuixue.online/global/pp会显示金边领事馆的签证时间，这个页面也提供签证类型的filter。关于信息密度，我个人觉得提供一个层层递进的机制来让用户自己选择，比把大量数据堆积在一个页面来得好消化。我觉得这个问题可以surveymonkey发给用户调研一下？

  1. 其他的信息（比如现在的那个柬埔寨预约注意事项、订阅telegram频道）怎么显示，而且这个如果做在other filter里面的话，没人会注意到的

啊这个我就是没有画上来罢了...肯定不可能也做成下拉的，那个other filter是表示如果有其他的分类方式。filters上面，或者顶部导航栏可以放。订阅telegram可以做成一个telegram icon（antdesign应该有内置的icon库或者material design/font awesome里面肯定有吧...）的按钮放在哪个显眼的地方就好

  1. email订阅多个地方和取消订阅如何交互

这是个好问题，我也没有什么很好的想法...现在的前端是表格为空就会取消所有订阅这样子吧，我感觉还是提供一个明确的交互流比较好。但是这就涉及到按email查询订阅，那就单独开一个页面tuixue.online/subscipriton/email/unscribe（乱打的orz，you get the idea lol）下来让用户输入邮件地址再在后端查询返回已订阅让用户选择取消订阅这样？

Trinkle23897 commented

邮件订阅：

  1. 可以取消掉订阅时间这个功能（待商榷）
  2. 取消订阅的时候，前端接口接收一个邮箱名称，后端返回他订阅的所有地点；把这些选项做成多选，然后提交就行

主界面：

  1. 多选国家地点+单选类型，获取单独的可视化链接
  2. 每个国家做两张表：
    • 折线图，横轴是hh:mm，纵轴是预约日期变动，每个地点一种颜色，表示当天的日期变动，日期用户可选
    • 类似K线图那种有范围的，横轴是天，纵轴是预约日期变动情况，标注每一天的最早、最晚和众数时间，表示连续几天的变动趋势，日期范围用户可选

邮件订阅、QQ群链接和tg链接我不确定该放哪里比较合适，目前是想显示某个国家、地点的时候在右侧放几个icon提示的那种

后端：
拆分QQ群，分两个去国外

BenjiTheC commented

邮件订阅：

  1. 可以取消掉订阅时间这个功能（待商榷）

在这里mark一下对应的后端implementation

  1. MongoDB内订阅信息的存储结构如下：

    [
    {
        "email": "example@tuixue.online",
        "subscription": [
            {"visa_type": "F", "embassy_code": "pp", "till": datetime(2020, 12, 31)},
        ]
    }
]

    这里每一个document内存储有两个信息：一个是email地址，该email地址应该在整个collection（MongoDB里的概念，对应SQL里的table）中唯一。所有用户在该email地址上执行的订阅/取消订阅操作都会修改该document，用户的订阅/取消订阅行为在数据库里体现为如下操作：

    1. add_email_subscription：用户订阅一个至多个 签证类型x领事馆 - 订阅至何时 的面签时间通知，例订阅知道2020年12月31日之前的学生签证在金边的面签，在数据库层面就是将{'visa_type': 'F', 'embassy_code': 'pp', 'till': datetime(2020, 12, 31)}推入对应邮件地址下'subscription'这个数组里。**假如该邮件地址不存在于数据库中（第一次订阅），那么创建一个新的document。假如该邮件地址存在且'subscription'中有已存在的{visa_type}-{embassy_code}订阅记录，更新该订阅记录到'till'**这里如果用户选择一直订阅到永远的话，'till'会使用Python中的datetime.max作为日期的最大值写入数据库，这样在后续的查询操作里会更方便。
    2. remove_email_subscription：用户取消订阅一个至多个 签证类型x领事馆 的面签时间通知，通过email地址抽出'subscription'数组下的对应记录，如果取消订阅操作结束后，'subscription'为空数组，则删除该document。

    综上，如果取消订阅时间的功能，只需要在每次写入新订阅的时候，都把till定为最大值即可。

  1. 取消订阅的时候，前端接口接收一个邮箱名称，后端返回他订阅的所有地点；把这些选项做成多选，然后提交就行

这个功能数据库已经写好（如果没记错的话lol

Trinkle23897 commented

可以在开着浏览器的时候发变更通知（类似微信网页版、FB这些比如发新消息的时候，如果浏览器开着但是当前窗口不是浏览器的话，会弹出通知），可能的实现方法是用一个timer定时拉取数据
以及网页上可以设置个手动刷新的图标，避免如果用户想刷新的话按F5带来过多开销

  • 🎉1
BenjiTheC commented

可以在开着浏览器的时候发变更通知（类似微信网页版、FB这些比如发新消息的时候，如果浏览器开着但是当前窗口不是浏览器的话，会弹出通知），可能的实现方法是用一个timer定时拉取数据
以及网页上可以设置个手动刷新的图标，避免如果用户想刷新的话按F5带来过多开销

可以在后端加一个websocket

前端用useContext+useReducer架一个自己的redux，在这里管理global state，然后websocket定时拉取latest written并在满足条件时触发一个notification component

另外就是这个notification应该是不能假设我们知道用户想要看哪一对(visa_type, embassy_code)的变更的，就是默认任何变更都会有一个弹窗。所以可以做成弹窗在左（右）上（下）角然后停留5秒消失，antd的好像build in了这个功能。另外一个解决方案是开会的时候@n+e 提到的尝试获取用户浏览器里的cookie，假设用户在哪里设置了浏览偏好（订阅的时候或者选择filter的时候）可以存到cookie里。

BenjiTheC commented

（趁着还清醒稍微记一下今天的开会内容

Nov 5th, 2020

主要功能

  1. 向用户提供各领事馆各签证类型的可预约日期总览；
  2. 提供订阅功能（邮件、QQ、Telegram 等）并在相应签证类型/领事馆可预约日期更新（最新抓取数据较历史最早可预约日期数据提前）时提醒用户

目标用户

主体为有出国留学/工作需求的国人，通常来说在访问tuixue前都已经有明确的签证类型需求（少数例外为有一些夫妻均为H签的，其中一方回国，无法办理H1B的可以申请H4加急特例）。细分为（请补充，我记得不太清了）：

  1. 已经在第三国居留准备申请签证的人员（F签为主体，目前貌似有领事馆开了H签但是极少）
    • 只会关注当地领事馆的可预约情况，e.g. F-pp for F visa in Phnom Penh, Cambodia.
  2. 仍然在国内的人员
    • 在国内上网课的学生： 看看大体情况，第三国/Gap都有可能
    • 延期入学半年至一年的学生：看看大体情况，更晚时间或许会考虑第三国（写这个comment的时候还不知道拜登还是川普呢lol
    • 滞留国内的美国公司国际雇员：这类人员F1-opt和H1B都有，大部分H签在国内观望，F1-opt是有人会去第三国的
  3. 其他
    • 学生家长
    • 中介
    • 广告商（

需要的功能设计

这里 @QueenieLiuuu ，今天讨论的设计需求

  1. 数据呈现的方式（当前的那个表格）
  2. 忘了orz，突然贼困妈呀。谁看到了可以更新一下lol，nite nite💤
  1. 我突然想起来，主页色谱，像 primary color, secondary color 可以定制一下，以及沙雕logo
  • 👍1