web项目会议记录

3.6（第一次会议）

参会人员：xxx（大气学院学长），Qingyu（澳洲学长，提问）

工作内容：

流星多站视频检测网（观测流星）

介绍部分：

观测流星手段：

• 光学观测
• 雷达观测

发光高度：约80-100km，使用三角定位（即初中数学题的三角问题）

特征：

• 时标短，短曝光，连续拍摄

重重重点：并不是在某个地方建立很贵的设备，而是在很多地方分布式地建立多个流星观测站点

执行部分

硬件设计：使用快速读出的CMOS相机配合GPS模块提高时间精度（天文级别摄像头）

前两步（检测流星，测量流星天球坐标）

开发内容：

对流星数据使用相应的定轨软件进行定轨，并且存入数据库，在网站实时进行可视化图形显示（中间包括传输图片，分析轨道，服务器计算，部署，图形改变）

要求：

• 在流星从可以观测到到坠落发光的一分钟内可以计算出来流星的落点（想办法精确到准确的地点）
• 使用C++和python包

数据平台

• 开发上百个及更多的站点（这里考虑使用go语言）
• 开发简单易用的流星检测润建与流星数据平台
• 不是给专业人员如老师或相关学生，而目标用户更多是对天文感兴趣的非专业人员使用的平台
• SAS模式，软件与平台绑定，用户做的操作都是可以在网页端口进行操作，同时用户使用的本地数据也会传递到软件平台上面作为收集数据
• 想办法激励用户去使用这种软件去拍摄流星，并且可以相对强制收集数据
• 目前原型只有简易文档，可视化展示的demo，与可以简单的操作相机（部署的观测相机）进行拍摄
• 相机控制，拍摄图片已经可以上传到数据库

需求分析：

主要任务：

• 针对原有后端API，优化前端界面（着重提升用户体验与易用性）
• 对于图形界面开发，要求美化

本次会议目标

• 给出基本任务，需求，分活干

提出问题

• 郑：经常使用的软件询问：使用UFO CAPTURE

• • 界面很丑（06年的）
  • 功能完善（图像监测部分）
  • 个人感觉：过于专业而且门槛高（参数过于复杂过于麻烦）
  • 畅想：网页端，因此不用专门要求某一个具体软件或者平台，可以快捷访问

• 老师提问：有没有关于之后的长期规划

• • 第一在于自身发展与规划
  • 自己答案：数据流相关（ctm你这是什么回答啊）

• 郑答案：云的系统维护和云的架构开发

• • 很想了解底层的硬件开发（如相机的硬件配置）
  • 全栈的一个开发

• 面试选上我们的原因

• • 郑：前端了解，项目经验丰富，发展方向明确，大三知识全面
  • 我：知识差距，也没有完整的体系，对于项目经验不够了解，主要让他们感兴趣的部分在于我表现出来的积极性与自身的学习能力，也就是感觉自己比较有潜力，还是精力与积极性的问题。
  • Qingyu学长本身就是澳洲关于云方向的工作，在架构开发方面（自己可以去了解）

• 项目本身希望可以严肃开发，不希望得到过多专注。

项目技术层面：

已经有的东西：

• 主要语言：C++与python写的

• 图形的提取，计算都是client端完成，主要C++开发，但是接口部分使用python写的（后端也是python写的），因为天文相关python使用更加普遍，可以在之后更容易引入相关的库与添加模块，对于底层部分感兴趣可以去看一下

• 自己可以修改任何感觉不好的地方（多提出想法）

• 控制部分完善，不要碰

• 数据展示部分还

• 数据库里面已经存储好了流星

• 重点：流星的可视化，用户的管理设计，尤其在于权限的设计，也就是说开发部分

• • 可视化
  • 用户管理
  • 安全问题（权限部分可以问一问计网老师？）

• 汉化部分在开发，目前都是英语界面

• 后期会发技术文档，

client：（服务端与客户端）

• 与后端通信有两条通道
  • 第一条是RESTFUL API（这里需要查询）
  • 第二条是websocket（需要了解）
  • 第一条主要需要流星的进入数据库
  • 第二条是双向通道，
  • • 能够维护一个节点死和活的状态，即感知client端的健康状况，包括cpu占用等等
    • 使用一个队列进行处理
• 一定要了解MongoDB,是一种模型，可以分布式部署，可以以较低成本承担相当大的数据量，对于python定义的数据结构（比如json）可以方便映射到数据库中，所有信息包括用户信息都是放在这个数据库中，迭代很快，使用了MongoEngine
• springboot中，映射到DAO

流星文件：（主要文件）

• 存储位置：阿里云的OSS（类似云原生的一种网盘），SPA
• 可以理解为一种托管静态文件的位置
• 属于对象存储（google最早做出来的），整个系统基于服务器很容易坏构建，优点在于相当容易恢复
• 可靠性高，可访问性高，延迟，带宽（北京的服务器在澳大利亚也要求可以访问）
• 利用阿里云的高带宽（支持很多人同时访问），并且价格便宜

系统日志：

• 存储在阿里云的日志产品
• 可以有更好的储存和访问，方便与之后使用
• 别的节点进来，方便进行读取

前端部分：

• 使用React+typescript（js的超集，在语法上增加了类型系统），对于后置位定义很类似golang
• 了解React oter(好像单词不对)
• 用vscode支持最好
• 也存在阿里云里面（React编译完相当于一个javascript文件），OSS占比很高

后端与前端交互

• 使用web socket，轮询，long polling
• 部署在腾讯云上面

MQ：

• 触发MongoDB,触发原本数据库中的文件对卫星进行定轨道

Lambda Function

• 当前完全没有
• 对标的是函数计算的一个东西
• 语法上属于对于请求（消息队列，时间调度），会很快起来一个进程并且销毁，是根据进程的运行时间计算花费，因此可以做到短时间内高速地跑很多请求
• 用于降低成本

自己任务：（自己总结的）

• 了解MongoDB，如何将object映射到ORM，后端会相关了解
• 了解阿里云OSS，后期会有相关账号使用
• 去看对象存储相关的技术书
• OSS如何托管SPAl
• 学习typescript（js可以埋了），看书
• python去学习一下

老师认为我们应该快速去学习的

• Typescript马上去了解（语法基础情况）
• React 17-18（文档），18主要引入的concurrent mode暂时不用管，但是17的文档要快点看，完整看一遍
• 使用了一个组件（material UI）
• 通信走的是accil(不一定准确，再去了解)
• 了解Mongo DB/Mongoengine(数据结构去了解一下)
• 后端部分：python+flask框架
• vscode相关配置
• 工具方面使用GitHub，发群里
• 文档方面使用confluence（看一看啊看一看），注册一下

流程总图

例会时间：每周三七点半

自己学习：

• Tailwind:一种CSS上的UI组件库
• Axios:一个网络请求库，可以用于浏览器和node.js

3.15 初次干活（API设计）

---

主要内容：

• 怎么搭建框架
• 怎么写代码（使用什么工具）
• 怎么提交代码
• 怎么测试代码等等等等

认识到

• 需要每周也准备一个周报（草！！！草！！！！周报！！！！啊啊啊啊啊啊啊啊！！！！！！！！）
• 自己要认真干活的！（啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
• react老文档讲的不太行，还得看新的
• 可以看情况使用（用得爽就行）
• 节点程序跑在windows上面，这里不用强求
• 一定一定一定要好好地去看一看技术书
• 我还是有点东西的（叉腰伸手扭头！），嗨嗨嗨嗨嗨嗨嗨嗨，面试就爷过了，嗨嗨嗨

开始弄流程部分了

本地配置：

• React配置部分
• node可以使用NVM管理版本
• 测试主要使用docker去测试

要学习：

• 继续了解技术栈的部分
• GitHub workflow这一部分相关的文档都去看一看
• 阿里OSS（静态文件存储位置，包括流星）和log
• 记住没事就写文档，写产出，写干的活
• 取名字记得要按照卡号，有相关命名规范，与jira关联

开发工具：

• GitHub 可以开新的分支开发新功能，但是别作死直接push（代码在push之后会触发工作流）

顺便学到的东西

• git pr：在merge之前点new pr，选择 base，从哪里merge到哪里（这一部分也要去稍微看一看），短期内两个人提一个pr，两个人分别去看一看对方的代码（看不懂地方去review一下再去问一问）
• 使用Confluence（只需要看software）文档
  • confluence:文档工具
    • 会有一个如何跑系统的文档
  • jira：项目管理工具
    • 核心：sprint
    • 快速开发快速试错（试一试大家用的怎么样）
    • 有一个ddl（三周大ddl）
    • 可以与GitHub进行相关绑定
    • 有事情一定要在jira上面写一下，让大家都了解到
• 画图很推荐的

接下来的工作：（大概需要的）

• 用户注册和管理（现在可以正常登录），（手动放置到数据库里面的）

  • 因此需要手动实现自动注册到数据库的东西（想想之前写入sqlite部分，学学Mongodb）
  • 注册流程需要整体改动，
    • 可以尝试设计一下API（这个可以等一下等老师做）
    • 短信注册（这个包括强行绑定手机号，看振业学长整理弄）
  • 邀请码前后端完全没有实现（试着设计一下邀请链接）
    • 邀请码生成：最后是一个UI号发送（主动发送给别人就行）
      • 可以后面升级成为waiting list
      • 邀请码有没有被使用
      • 邀请码是谁发送过来的
      • 如何测试邀请码的有效性
    • 邀请码发送
    • 邀请码的一个邀请邮箱，需要前端可以发送给后端并且返回结果，在真正注册的时候也是需要使用的
  • 用户管理界面
    • 展示并且管理所有用户的界面（权限部分暂时不需要太考虑），比如可以修改个人资料，姓名头像等等等等，可以看别的网站去了解

  

总结需要干的活：

• 邀请链接（应该沟通几次，如何提供这个链接）
  • 看一看代码，
  • 想办法连接本地数据库跑起来
• 注册界面（前端展示，后端有数据传输）
• 写管理所有用户的界面和展示

设计（怎么设计，怎么评估标准）

• 邀请码的存储结构
• API
  • verify
  • register（已有部分可以改一改）
• Frontend流程（可以画图去弄一下）
  • 游客看是怎么弄的（无权限请求）
• 有问题回头再讨论，但是一定要有相关文档和东西

3.22

log中关于event（上传新的东西就会有event，可以报告给后端相机在什么时候拍摄到什么东西）

• 相机每一次动作都会上报一个event（视频串流，最细力度是探测到流星）

• 属于一种警报的部分

• 严格来说是结构化的不是日志（日志格式更加动态，而该结构化会固定一些）

• 项目中这种方法应该算是metric（与主线程不是一个逻辑，因此要尽量保证简化）

原本项目回溯

• API设计基本落实完成

新一周的任务

• 学习python（超）（完成）

• 学习jwt

• 可以尝试去做用户个人（用户分页，这里可以先不做分页）

  • USER PROFILE(仿照原本的)
  • nodes添加子section

• 实现获取数据，渲染列表，点击到用户信息放大

  • 页表要是可以渲染的

• 用户列表：

  • 所有用户，展示方式：展示信息

• 期间就在metordev进行调试（要弄）

  • 看GitHub纯纯前端的部分，先去跑一下，别动node，其它可以试试可以改改，图标可以先去弄出来，在node下面弄出来原来类似的按钮（看源代码部分修改）
  • 不要删不要停，加点东西（尤其尤其refresh token不能动）
  • 使用kynn用户去可劲造
  • 使用第三个可以随便造

注意：

• 可以参考GitHub的设计风格去弄

• 设计风格尽量遵循原本风格（灰色不可以更改，黑色可以更改）

• 设计网站：pinterest（网站风格看）

  • https://www.pinterest.com.au/
  • https://berrydashboard.io/dashboard/default

• 实在实在实在不行https://www.figma.com/

有问题可以去约一下微信

之前写的东西的回溯：

• UI使用python写的
• 李镇业的部分：C++写的编译成byd文件，可以导入python
• 剩下的部分都是围绕这两部分写的
• 暂时实现对于相机的观测部分

如何提交：

• log.py文件中包含，log.critical上传至网络，增加event只需要使用critical去log它们就可以在不同的地方发送event
  • 同一个线程使用不同函数进行处理
  • 一个加入队列，一个agencyhandler处理队列（最顶部）
    • 其它子孙都是扔到queue里面
    • 只有一个agencyhandler
    • 写入同一个文件（两个线程写入同一个文件）
    • worker处理多个manager
    • extract库：分析流星的库
  • 一个client只有一个worker，属于一个进程之间传送队列的queue
    • 流星太多会在缓存中等待，大概一个流星几百M
      • 如果装不下就存入一个pkl文件，拿出来就变回流星数据结构

权限部分：

• ResourcePermission:将站点分为不同的资源
  • 总结权限最大
• NodePermission：仅仅属于个人
  • 个人权限较大
  • nodeowner：创建该个node的人
  • 用户一定会有
• 每个资源分配不同的决策
  • 前端要理解一下

用户登录状态如何判断：

• jwt：证明自己是谁(一种表明身份的哈希码)
  • 可能会开放因此没有限制（后期可以换成cookie login）
  • 正确会附带一个token（一段时间的期限）并且无法伪造，只有服务器有密钥可以签名（非对称加密）只有私钥可以加密，公钥可以解密
  • 不限制，有可能被token解密（属于一种cookie解密）
  • https only cookie也可能被占用
    • 跨域攻击：在别的网站使用

开发环境：周日详解（后端的dev环境）

3.26（环境搭配部分）

• 前端部分首先去弄一下

yarn不能混用

可能问题：node版本

环境部分：start：dev（依赖于env-command）

分享的文件：gist文件去修改local，（前端部分）

后端部分：python最好（3.10.5），可以使用venv创建路径包含环境

跑后端python3:run

但是后端也包括Mongoliandb

docker compose up -d
docker compose build

使用的时候会创建一个本地数据库，本地连接(mongodb compass)

user :api

omega

要首先把dev连接到数据库，然后恢复数据再弄

-dev属于备份，方法

• 放在mongodb copmass
• 数据库备份技能去自己了解一下
• host:127.0.0.1
• port:27017

测试一个node行为时候可以去弄一个fake node，在api-sdk里面（后端用的一个sdk，本质是将客户端进行一个封装），进行连接之后就可以在自己本地进行一个play了

npm镜像找，还原

坑

pip install python-dotenv

https://linuxcommand.org/tlcl.php

https://code.visualstudio.com/docs

重点部分：

每一次js/ts文件相关部分都要进行格式化处理（）

4.5开会

• 每周merge一下前后端的master代码，保证进度更新一下

下一周的活：

• 继续完善用户列表的功能（删除用户，增加用户，查找单个用户等等）

  • 删除（换成deactive）
  • 跳转：
    • 点击Name中的字段就直接跳转到用户profile
  • 图标换一个（换成文本按钮，可以点击）
  • 不需要新建
  • node部分可以放一下有哪些node节点
  • resource不显示
    • 与account type冲突（原因）
  • 分页部分还没有更新（总页数没有）

• 个人信息界面留一个空的，就留右上角的人（先别管）

• 如果完善可以取看一下怎么弄邀请代码功能（暂时api可能没有更新）

  • 往上去增加（看一看）
  • 只有admin可以左边有一个按钮点击就是发送链接
    • 点击弹出一个小框
    • 输入邮箱
    • 在点击确认之后就会向后端发送post请求

• 自己去看一下mui里面有没有自己能使的东西（相关知识也得看一看）

• 组件可能要自己整点新的

• filter(加过滤器搜索)在list框加上

• 排序（改一下调用的api的排序，现在有的是mui的，只能对于当前页排序）

  • 老师已有api（排序的，再去看一看）

4.12日：新硬件团队加入

问题：

• invite-link点击之后暂时可以在列表中显示，但是实际邮箱无法获得发出的邮件，是否因为没有部署到服务端而只是在本地运行

可以有修改方向：

• 关于搜索方式的框可以去优化一下体验（适应一下宽度，修改格式并适当美化）（搞定）
• 如何进行排序，看一下相关的api接口（）
• 搜索中的last_active没有展示，导致会bug（）（修改一下展示的部分）（暂时就是改了这个，直接弄没有了）
• 搜索栏右侧三个点没有相应功能

任务：

• 研究mui部分，在外面能不能加入一下，去掉
• 排序去继续研究，怎么弄完
• 邀请链接部分，研究如何连接阿里云上网（api也连上再去调用）（调用邮件发送的api，去看一看）
• 邀请链接的detail中不要使用文本框，修改成只用几行字去改（一两天尽量快速弄）
• 一些神奇的bug（下次开会去问孟老师）
• 邀请列表弄完去pr（至少要提pr）

新任务（要死了）

• 做用户注册（使用register.js和login.js）
• 假设使用这个url进入界面
• 前端不用做太多，只需要改rote
• 能不能加一下检测密码强度组件（非强制，有最好，没有也能用）
• 先提个方案出来

4.19

review

• pr继续完善一下
• 对于之后pr提出的问题稍微回一下
• 好习惯：不同模块之间最好还是加上空行
• 记得依赖相关的去解决一下（稍微留意留意）

task：

• 准备实现短信验证相关的功能
• 路由器注册也需要注意一下

考虑，讨论

关于注册表单：

可以在单个页面中完成全部的注册部分（短信验证码）还有其它注册

任务：

• api准备好后开始做整个注册的流程（别急，可以白兰），至少可以通过验证到达registeredlist界面

  • 点击链接之后跳转到的位置应该重定向到register界面

• 邀请链接的超时时间修改成3天（api到时候看）

4.26

可能的问题：

• yarn.lock
• package.json文件

其它

location可以去想办法修改一下（郑的）

任务：

• register注册界面（邀请码去修改）
• userlist
  • filter需要进一步修改
  • sort需要做好
  • 最高理想是做成jira那种样式
• 用户个人界面
• 修一下包的问题

去学习一下的东西

• useSearchParams

执行步骤

• 前端开启

  yarn #每一次更新重新安装所需依赖
  #正常pwsh就行
  yarn run start

  • 后端（WSL上面跑，有python10的解释器）

  pip install -r requirements.txt #重新安装依赖，每一次更新后端之后跟着改一下，好习惯
  docker compose up mongo -d # 开启docker的数据库，也可以自己手动在docker里面打开
  source /home/breathlinux/meteoroid-backend/venv/bin/activate #进入venv环境
  # （venv）中
  make run

  • 联网（API部分弄上去）

  # 都在wsl里面操作
  python3 -m venv venv
  python3 example/websocket_example.py

  • 数据库恢复

  mongorestore --host=127.0.0.1 --port=27017 --username api --authenticationDatabase=meteoroid-ingestion-data-dev dump

  https://www.mongodb.com/docs/manual/tutorial/backup-and-restore-tools/
  Qingyu 18:58
  REACT_APP_API_BASE_URL="http://localhost:8080/api/v1"
  REACT_APP_WS_BASE_URL="ws://localhost:3000/user"
  PORT=8080
  Qingyu 19:02
  python3 -m venv venv 
  Qingyu 19:03
  sudo apt install python3-pip
  Qingyu 19:03
  https://bootstrap.pypa.io/get-pip.py
  Qingyu 19:04
  wget https://bootstrap.pypa.io/get-pip.py
  Qingyu 19:05
  python3 get-pip.py
  Qingyu 19:09
  docker compose up mongo -d 
  Qingyu 19:13
  python3 -m pip install --user virtualenv
  Qingyu 19:13
  python3 -m venv venv
  Qingyu 19:16
  source ./venv/activate
  Qingyu 19:16
  source ./venv/bin/activate
  Qingyu 19:19
  https://www.mongodb.com/docs/database-tools/installation/installation-linux/
  胡锡睿21311094 19:24
  wget https://fastdl.mongodb.org/tools/db/mongodb-database-tools-ubuntu2204-x86_64-100.7.0.deb
  Qingyu 19:25
  mongorestore
  Qingyu 19:27
   mongorestore --host=127.0.0.1 --port=27017 --username api --authenticationDatabase=meteoroid-ingestion-data-dev meteoroid-ingestion-data-dev 
  Qingyu 19:27
  omega
  Qingyu 19:28
  mongorestore --host=127.0.0.1 --port=27017 --username api --authenticationDatabase=meteoroid-ingestion-data-dev dump
  Qingyu 19:29
  mongodb://api:omega@localhost:27017/?authSource=meteoroid-ingestion-data-dev&readPreference=primary&directConnection=true&ssl=false
  Qingyu 19:38
  python3 example/websocket_example.py
  Qingyu 19:39
  pip install python-dotenv=
  Qingyu 19:42
  pip install -e .
  Qingyu 19:43
  PYTHONPATH=src
  # For test
  NODE_TOKEN=aynCYbYHwygUb_C1KsUHW-5mJ84cGxYpr4DFgc_lT3c
  NODE_ID=62ceebf19647f288525ab619
  API_SERVER=http://localhost:3000/api/v1
  
  Qingyu 19:48
  https://linuxcommand.org/tlcl.php
  Qingyu 19:48
  https://code.visualstudio.com/docs

学习：

• 网页的设计是为了目的服务的，为了更好地传递信息
  • 比如邮件：
    • 邮件本身的特点就是短小，精简，富文本
    • 应该做到的是以富文本为先，在保证内容的基础上去
    • 很多邮件都是禁止javascript的
    • 图片是可以用于做tracker的，有可能被攻击，所以邮件中图片也最好不要做
    • 最好的解决方案还是去找各种模板
    • 比如GitHub，实际上是对于字体使用了CSS渲染，而只使用了相对安全的icon
• 清晰，简洁，明快，然后在此基础上去设计形式样例
• 对于重要的功能（比如点击按钮）等等需要重点设计
• 一般都是一个链接一个按钮足够