作者:HelloGitHub-卤蛋

我是...蛋蛋啊,本文是我从零开发「HelloGitHub 小程序」的开发日记,不要把这个系列当作技术文章来读,你将会收获更多的乐趣。‍♂️

我只是个 Python 程序员,不会写前端(会的那点前端技术停留在 5 年前),就更甭提微信小程序了。选择开发微信小程序是我认为它:方便、平台大、有搞头。这是我的第一个小程序,如果你想从本文学到什么小程序的开发经验,那将是在浪费时间还不如转身买个实战课来的直接。「HelloGitHub 小程序」的开发日记——分享我在开发 HG 小程序过程中的思路、问题和解决问题的方案等,文中不会涉及代码以轻松易懂为主。因为我想让 HelloGitHub 的读者都能参与到小程序的建设中,见证它的成长。即使你不懂编程,我也希望能够通过本文让你知道我在干什么,然后你就可以给 HelloGitHub 小程序提需求,增加你想要的功能。让我们共建 HelloGitHub 小程序

背景介绍完啦,下面进入正文。

我要写小程序!

HelloGitHub 微信小程序的原计划:在 3 月份开发,然后 3 月底先上线一版。之所以称为“计划”那是因为它充满了不确定性。

后来因为 3 月 28 是 HelloGitHub 的五周年,结果临时决定办一场直播。我就和团队的小伙伴一起去弄直播的事情了:学习直播、设计活动、拉赞助、排练、邀请嘉宾。整个 3 月份就搭进去了,三月过完小程序一行代码还没有写。我真的很头大!我要写小程序啊!!!

(下面这段文字是我 3 月底写的,结果小程序 5 月初才上线!事实证明我对自己开发效率过于乐观了。)

现在五周年直播,算是圆满的结束了。后面的事情我捋了捋,没有什么事情能够阻止我开发 HelloGitHub 小程序啦,那么我就不客气了:开工喽!赶在 5 月前上线!

一、做个啥

我原本计划把 HelloGitHub 小程序做成一个社区(已画好原型图),但这是一个浩大的工程且开发周期太长了,而且闭门造车风险太大。我陷入了深深的沉思...

然后我去翻看、调研了其它的小程序,发现小程序大多以工具的形式呈现。所以我打算小步快跑,从单一工具入手。比如:做一个浏览月刊的信息流工具或者开源项目信息聚合浏览的工具。但当我看到 HelloGitHub 公众号 的后台,经常有读者发一些诸如:可视化、爬虫、AI 变脸的消息给我。这些消息像是搜索项目的关键字,他们应该是想要通过关键字搜索项目。后台这样消息太多了,我没有办法查找后挨个回复。HelloGitHub 月刊每月 28 号发刊,已经累计推荐了 1641 个项目,如果想手动从中找一个开源项目实在是太难了,所以我要赶紧给 HelloGitHub 的粉丝做一个能够通过关键字搜索往期月刊中的开源项目的工具,趁你们还没放弃我 。

我认为产品就是为了解决某种问题而被创造出来,首先需要先解决用户的痛点。如果制作的产品能像一个方便、实用的“轮子”,那用户就能推着它往前走(督促产品迭代)。当然我要和用户保持“脸贴脸”的距离,及时得到他们的反馈与建议。最后,开发人员应该都喜欢自己开发的程序有人用,那样才会有维护的动力吧!

综上所述:

  • 我打算做一个:支持关键字搜索 HelloGitHub 往期月刊中项目的微信小程序,再加个反馈功能。
  • 开发周期:1 个月

二、设计和开发

需求听起来很简单呀:搜索、往期内容,但我没搞过搜索仅仅简单地玩过 ES,还是用来做存储并不是做搜索。

前后端分离先搞起来,搜索服务具体怎么玩,再边走边看。(我现在看这段话,边走边看=自己挖坑)

2.1 后端

  • 接口:fastapi(Python Web 框架)
  • 数据库:MySQL
  • 搜索引擎:sonic(Rust 写的轻量级搜索引擎)

2.1.1 服务

我想用 fastapi 很久了,但工作中一直没有机会用它写服务,现在机会终于来了用起来!一个很新、很火、很好用的 Python Web 框架,看名字就知道它是为了快速开发接口而被创造出来(fast api)。

项目地址:https://github.com/tiangolo/fastapi

虽然要开发的接口很简单:

  • 搜索并返回结果
  • 接收用户对搜索结果的反馈(后面采用了小程序提供的功能)

但需要搭项目的架子:目录结构、日志、配置等等

2.1.2 数据层

HelloGitHub 目前所有月刊的数据都存在 MySQL,为了方便处理已有的数据为搜索提供数据支持,先要做一个数据层搞定 MySQL 的增删改查,这样后面服务、处理数据、分词、数据导入、同步等操作都能够得心应手。我最终选用了 SQLAlchemy 这个 Python ORM 库,去吧 SQLAlchemy!

项目地址:https://github.com/sqlalchemy/sqlalchemy

2.1.3 搜索

搜索服务选用的是基于 Rust 的轻量级开源搜索引擎 sonic,像用 Redis 一样用上搜索。

项目地址:https://github.com/valeriansaliou/sonic

它安装方便、配置简单。但第三方的 Python 客户端库是真的难用,而且 Bug 贼多。为了赶进度,我仅解决了一些必要的问题从而能够正常的增删改查,就先凑合用了。

2.2 前端

我没写过小程序所以不打算刚上来就用框架写,否则我连基本写法都不会,可能看不懂小程序框架的文档。而且要实现的功能很简单:

  • 首先,一个输入框接收输入内容
  • 然后,调用搜索服务的接口
  • 最后,展示返回的结果
  • 附加:接收用户的反馈

由于功能简单我看了看文档就写出来了,但样式太丑了我就在官方文档中寻找解决方案。找到了小程序的官方样式库:

项目地址:https://github.com/Tencent/weui-wxss

拿来就能用的样式文件和示例代码,分分钟让小程序焕然一新。

至此,这里要感谢感谢开源、感谢 GitHub 和微信小程序团队。技术选型和方向敲定了开发也看似顺利,但事情远没有想象中的一帆风顺。

三、困难

真是一步一个“困难”,真“好玩”

3.1 问题

下载项目的 README 文件,丰富搜索的关键字的匹配程度。内容需要解析并存储。问题:

  1. 有的文件的内容很多不易存储到数据库,数据库的字段有大小限制。
  2. 如何保证文件的更新
  3. 下载 README 文件有的时候找不到:项目的默认分支不一样、文件名不一致等

搜索部分,随着所有项目的 README 内容写入搜索引擎,搜索的准确率真的是惨不忍睹。原因:

  1. 分词时的自动识别语言不准确
  2. 无法即时查看查询效果
  3. 内容干扰项太多:代码块、链接等

问题一:因为 push 支持可选 lang(语言)指定内容分词时的语言,默认是英语。我试了下但是不支持 “zho”(中文)参数,我就很奇怪,因为项目中说了支持中文的丫。我就去看了看源码,发现 src/lexer/stopwords.rs 分词需要一个叫做 stopword 的东东,然后我找到 sonic/src/stopwords/ 目录,发现里面没有 zho.rs 所以不支持 lang 指定为中文。所以只能用 lexer 的默认分词方式。

问题二:没有命令行客户端无法即时得到反馈。

问题三:我想让内容丰富度更高,但随之而来的是不准确。所以需要整理内容删除干扰项,比如:超链接、代码块。

服务部署因为爬虫的服务器是在 HK,而接口服务需要部署到国内。所以为了接口的响应速度,就把 sonic 部署在国内了。这个比较简单因为支持 docker 直接起服务,则需要:

  • sonic 的 store 目录挂载到本地,防止重启 docker 数据清空
  • HK 服务器可以国内的搜索服务(后面不需要爬虫动态更新搜索中的内容,这个白干了)

另外还需要:安装 Nginx + 新的二级域名 + HTTPS

刚上手小程序和刚上手某一类语言一样会遇到很多琐碎的问题:编辑器设置问题(本地代理导致请求接口超时)、语法报错(获取不到想要的对象,设置值不生效)、不熟悉内置方法导致“原地转圈”(小程序提供了反馈功能、分享需要手动开启等问题)、小程序上线须谨慎因为审核速度完全看脸,当然最大的问题还是编写样式的问题。这个后面慢慢慢...来吧!我买了一本巨厚的前端书籍《Web 前端工程师修炼之道》,容我啃完 CSS 部分再来战! (CSS 放学别走,门口等我)

3.2 解决方案

  • README 的内容最终我存储成了文件,当作静态文件。(优化后没用到)
  • 在数据库中保存文件的 sha 码,用来检查文件是否改动从而判断是否需要重新写入文件。
  • 我后来发现不指定分支名访问的文件就是默认分支的文件,搞定!另外文件名的话,目前采用的是枚举有限文件名比如:README.md、readme.md...但效率低下且效果不好
  • 解决搜索方面的问题:
    • 把搜索引擎存储的内容降低到月刊的内容,丢弃了 README 的原始内容
    • 编写清理内容干扰项的算法
    • 基于 python-sonic-client 写了一个 cli.py 用于命令行初始化数据和查询
    • 分词的问题:可以给原项目贡献 PR,或者就调研其它搜索,最后可以自己写个搜索引擎(闭嘴!我飘了!)

大致解决了上面的问题,功能就完成能用了。但是搜索准确率是个大问题直接影响用户体验,讲真的我要不要用 Python 写一个搜索引擎,最后可能变成疯狂吐槽自己

四、效果展示

因为微信小程序不可以直接跳转到外部链接,所以只能采用点击搜索结果中的开源项目自动复制项目地址的这种方式。扫一扫在线体验:

五、结束

支持关键字搜索 HelloGitHub 往期月刊中项目的微信小程序终于...上线了!

它虽然功能单一但应该能够解决部分用户的痛点,搜索不准确的问题后面我一定会持续调研优化。如果你有关于搜索的方案欢迎留言讨论,也可以和我分享搜索相关的资料与知识;如果使用中遇到问题可以点击“反馈”告诉我。

觉得好用的话就把它拖到「我的小程序」,然后分享给身边的小伙伴吧

最后,你有没有遇到过:

找到一个 GitHub 上有趣的开源项目,拿到了项目地址但由于网络问题无论如何就是访问不了。

此情此景是不是脑袋嗡嗡作响,血压直线飙升!我将试图在 6 月中旬发布的版本中解决这个问题,敬请期待


关注 HelloGitHub 公众号 第一时间收到更新。

还有更多开源项目的介绍和宝藏项目等待你的发现。

HelloGitHub 小程序上线了,蛋只有一个搜索功能的更多相关文章

  1. WordPress版微信小程序3.1.5版的新功能

    产品的完善是无止境,每过段时间就会发现产品的新问题,使用的人越多,提的需求也会越多,我听得最多的一句话就是:如果加上某某功能就完美了.其实,完美是不存在的,每个人的视角不一样,完美的定义也是不一样的. ...

  2. 微信小程序wx.showActionSheet调用客服信息功能

    微信小程序wx.showActionSheet调用客服消息功能 官方文档的代码: wx.showActionSheet({ itemList: ['A', 'B', 'C'], success (re ...

  3. 第一个微信小程序(实现点击一个按钮弹出toast)

    今天根据网上的教程搭建了微信小程序的环境,然后看文档做了一个简单的小应用. 项目的目录是这个样子的: app.js.app.json.app.wxss是全局文件,必不可少的文件.定义在app.wxss ...

  4. 12306微信小程序上线 提供余票查询暂不支持购票

    12306微信小程序正式上线,如图所示,目前小程序提供余票查询.时刻表查询和正晚点查询三大功能,用户可在这里随时查看剩余车票以及列车时刻表.而且小程序支持用户添加行程,方便出行. 目前这款小程序还不支 ...

  5. 微信小程序中跳转另一个小程序

    wx.navigateToMiniProgram({ appId: 'xxxxxxxxxxxxxxxxxx', // 要跳转的小程序的appid path: 'page/index/index', / ...

  6. 微信小程序——手把手教你写一个微信小程序

    前言 微信小程序年前的跳一跳确实是火了一把,然后呢一直没有时间去实践项目,一直想搞但是工作上不需要所以,嗯嗯嗯嗯嗯emmmmm..... 需求 小程序语音识别,全景图片观看,登录授权,获取个人基本信息 ...

  7. 一个微信小程序跳转到另一个微信小程序

    简单来说分两步走: 1.配置项目根目录的 app.json 文件中的 navigateToMiniProgramAppIdList { "pages": [ "pages ...

  8. 用Taro写一个微信小程序(一)——开始一个项目

    一.Taro简介 1.名字由来 Taro['tɑ:roʊ],泰罗·奥特曼,宇宙警备队总教官,实力最强的奥特曼. 2.taro是什么 Taro 是一个开放式跨端跨框架解决方案,支持使用 React/Vu ...

  9. Mockplus微信小程序上线!扫一扫轻松查看原型!

    Mockplus团队发布了Mockplus微信小程序. 从现在起,你无需下载Mockplus移动端,用微信扫一扫二维码,即可在微信中打开并查看原型.Mockplus微信小程序,无需安装.卸载,不占用手 ...

随机推荐

  1. 部署Angular应用到Github pages

    https://jeneser.github.io/blog/2017/08/08/angular-deploying-app-github-pages/ Published: August 08, ...

  2. 关于github的使用学习心得

    先写先介绍一下如何用github上创建一个项目吧. 用户登录后的界面如上所示.右下角是我们已经建好的库.点击其中任何一个就可以查看相应的库了.如果要新建一个项目的话,就点击Start a projec ...

  3. Apache Hudi核心概念一网打尽

    1. 场景 https://hudi.apache.org/docs/use_cases.html 近实时写入 减少碎片化工具的使用 CDC 增量导入 RDBMS 数据 限制小文件的大小和数量 近实时 ...

  4. Docker系列——InfluxDB+Grafana+Jmeter性能监控平台搭建(二)

    在上一篇博文中,主要是讲了InfluxDB的配置,博文链接:https://www.cnblogs.com/hong-fithing/p/14453695.html,今天来分享下Jmeter的配置. ...

  5. Recoil 中默认值的正确处理

    继续使用 Recoil 默认值及数据级联的使用 的地域可用区级联的例子. 地域变更后可用区随之联动,两个下拉框皆默认选中第一个可选项. 从 URL 获取默认值 考虑这种情况,当 URL 中带了 que ...

  6. 201871030103-陈荟茹 实验二 个人项目―《D{0-1}KP问题》项目报告

    项目 内容 课程班级博客链接 班级博客链接 这个作业要求链接 作业要求链接 我的课程学习目标 1.理解掌握软件设计的过程中的各个环节2.掌握github的使用,将自己的项目上传至githu中 这个作业 ...

  7. 【Java】 6.0 输入,输出和异常处理

    [概述] 就目前而言,我们遇到的"输出"无非就是这个比: System.out.println() 更详细的输入输出会在IO中提到,那么这个笔记就是记录几种常用输入机制 [Scan ...

  8. OAuth2.0理解和用法

    现在网络的资料到处都是,很容易搜索到自己想要的答案.但答案通常只能解决自己一部分的问题.如果自己想要有一套自己的解决方案,还得重新撸一遍靠谱. 我需要学下OAuth2.0吗? 没看之前以为OAuth2 ...

  9. 前端 JS 问题记录

    立即执行函数 !function(){}() function 前面增加符号 ! ~ + - 之类,都是告诉浏览器自动执行这个匿名函数,因为这些符号的运算级别都是高的 (function(){... ...

  10. 由奶茶店突发奇想开始了Java设计模式:享元模式

    目录 定义 意图 主要解决问题 何时使用 优缺点 结构 奶茶摊位的例子 奶茶店的例子 在什么情况下使用享元模式 定义 享元模式是对象的结构模式,享元模式以共享的方式高效的支持大量的细粒度对象,主要用于 ...