HelloGitHub 小程式上線了,蛋只有一個搜尋功能

削微寒發表於2021-05-13

作者: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 公眾號 第一時間收到更新。

還有更多開源專案的介紹和寶藏專案等待你的發現。

相關文章