🔥課程特價中

什麼是模型部署？

假設你在資料集上做了一些嚴格的訓練後有了一個模型。但現在該如何處理這個模型。你已經用測試資料集測試了你的模型，這很好。你用這個模型得到了很好的準確性。但是，真正的測試將在即時資料衝擊你的模型時出現。所以本課程是關於如何序列化你的模型並部署到伺服器上。

https://softnshare.com/deploy-machine-learning-model/

來自 Plotly 的 Dash 教學課程通常花費超過 1000 美元，但現在，你可以在這個自訂進度的課程中獲得訓練營體驗，其中包括範例程式碼、說明視訊、聊天頻道中對學生的支持，問答案論壇和互動練習。

課程將開始教你足夠多的 Numpy 和 Pandas，讓你能很順利地在這個速成課程中處理和生成資料。

然後繼續介紹使用 Plotly 進行基本資料視覺化，包括散點圖、折線圖、條形圖、氣泡圖、箱形圖、直方圖、分佈圖、熱區圖等等。也會給你直覺了解何時要用什麼圖。

在此之後並在每部分結束時，將有鍛鍊任務以測試和評估你的新技能，這是其他 Plotly Dash培訓所沒提供的！

一旦你掌握了 Plotly 的基礎知識，將繼續使用 Dash 程式庫的大部分課程來利用 Plotyly 製圖的力量創建互動式儀表板。我們將討論如何為儀表板創建佈局，如何進行互動式 callbacks ，處理多個輸入和輸出，創建互動式組合元件等等！

最後將透過即時更新儀表板做課程總結，這些儀表板可以即時自動更新，甚至我們將跟你展示如何使用 Heroku 服務將儀表板即時佈署到網路中。

https://softnshare.com/interactive-python-dashboards-with-plotly-and-dash/

前一篇 (https://www.facebook.com/kewang.information/posts/2241503749459320) 提到了 Autocomplete 的實作方式，但仍然有許多可以調整的地方，像是如何加大 throughput、帶額外資料...等，下面就來分享一下小編的作法。

---

## 1. 減少傳輸量

因為 Autocomplete 的操作行為是使用者每打一個字，就要傳給 server，server 再回傳使用者一些 candidate。所以減少傳輸量是最先要處理的事情，要不然資料量太大傳輸慢會影響前端使用體驗。最簡單的作法就是改變原本回傳的 JSON 格式，如下所示：

### 調整前

[
{"id": 123, "candidate": "taipei"},
{"id": 456, "candidate": "taiwan"},
{"id": 789, "candidate": "tall"}
]

### 調整後

["123%taipei","456%taiwan","789%tall"]

前端拿到資料後自己再用 split 的方式分割字串，實測下來大概可以減少 40% 的資料量。

---

## 2. 減少傳輸量

沒錯！第二點也是減少傳輸量，將準備要回傳的資料用 gzip 壓縮後再回傳。

以 expressjs 本身建議的 compression 套件來說，實測下來發揮不了什麼作用。因為 compression 套件預設為資料量大於 1kb 才會做壓縮，而目前的資料已經是小於 1kb 了，所以沒做任何壓縮就直接回傳。

另外還發現加了 compression 套件之後，以目前開的 heroku 機器來說，回應時間會加上 5-10ms 左右。不過現在服務還沒上線，沒有使用量都不準，等上線之後再來觀察看看好了。

---

## 3. 減少使用者打 server 的次數

前端可以在輸入一個字元的時候不要送 request 給 server，因為經驗法則，使用者應該至少會打兩個字元之後，Autocomplete 回應給使用者 candidate，這樣對 UX 上應該會比較好吧 (小編不專業分析 XD)。不止可以降低 server 的 loading，也可以減少存入 Redis 的資料量。

但這會牽涉到 CJK 與 non-CJK 的處理方式，這就還要再看看如何處理比較好。

---

## 4. 減少使用者打 server 的次數

沒錯！又是減少次數。client 可以在 server 回傳資料的時候，將資料暫存在 client 的記憶體內。因為常會有輸入相同文字的時候，這時就可以直接從 client 的記憶體取出資料，就不用打到 server 了。

但這個使用方式比較不好處理，需視情境而定。若是 Redis 的資料常常在變動，那這個方式會造成取不回最新的資料。或許可以在 client 放個 LRU cache 來做處理。

---

## 5. 減少使用者打 server 的次數

又是我 XDDD！這次是要 server 幫忙，當 client 重複輸入相同 keyword 時，client 會帶 If-None-Match 的 header 給 server，server 會檢查這串值是否已經有打過了，如果打過就回 client 304，表示資料沒變動，可以直接用 client 本身的資料。

這在之前的 JCConf 有分享 (https://www.facebook.com/kewang.information/posts/2192127034396992) 過，大家可以回去翻一下。

---

## 6. 減少 Redis 的資料量

西方國家所用的拉丁字母除了大家常用的 26 個英文字母外，也常會有一些包括重音之類的字母。像是 a 及 á 之類的，這個在搜尋的時候不會太影響，JavaScript 可以利用 String.normalize('NFD') 把 á 轉換成 aˊ，最後再將 ˊ 取代為空字串 (https://stackoverflow.com/a/37511463/939212)，Redis 裡面只要存 a 就好，這樣可以節省不少資料量。

當然還有將大寫轉為小寫、trim 掉頭尾空白這幾種做法，也都可以省下不少資料量。

至於 CJK 的話，再說吧 XDDD

---

## 7. 存入 metadata

如果這個 Autocomplete 只是單純選擇 candidate 之後做搜尋，那可以不用存 metadata 進去。但有些功能其實是要把 candidate 回傳給 client 時，也帶一些 metadata 給 client 做其他運用，最常見的應該就是帶 id 這類 metadata 了。

最簡單的作法就是在存入 candidate 的時候，直接把要存的 metadata 帶在字尾，如下所示：

1. t
2. ta
3. tai
4. taiw
5. taiwa
6. taiwan
7. taiwan*123

把 123 放在 taiwan 後面，在取出 candidate 的時候再利用 split 的方式把 taiwan 跟 123 分別取出就可以了。

---

總結上面的幾種方式，目前小編這裡用到了 1, 2, 5, 6, 7 共五種，效果還不錯，就等上線再來看看實戰結果囉。

#funliday #autocomplete #redis #javascript #nodejs

自從遠端工作之後，出勤的打卡記錄也轉成線上服務

雖然我也想不透工程師都線上工作了還打什麼卡...不過沒關係，打就打

但也因為在家裡工作反而常常忘記打下班的卡!

每次結算薪水都很痛苦，一整排的異常，是不是像我這種認真工作的人更容易忘記打下班的卡 XD?

既然容易忘記，我們就來寫個自動打卡系統吧!

拯救自己多無趣，當然要拯救所有同事啊!

這支影片特別感謝我的團隊伙伴陪我一起耍北爛，有你們真好。

===本月活動===
7/22 晚間 8 點「後端領航者論壇」直播活動，歡迎來參加
（適合新、中手或想往後端開發的工程師朋友）
名額有限，手刀報名 👉 https://bit.ly/3jERZRH

===影片中提到的專案===
自動化打卡 project 使用 Ruby on Rails 撰寫，架設於 Heroku
repo: https://github.com/niclin/bernard

喜歡影片的話！可以幫忙點個喜歡以及分享、訂閱唷！😘

━━━━━━━━━━━━━━━━
🎬 觀看我的生活廢片頻道: https://bit.ly/2Ldfp1B
⭐ instagram (生活日常): https://www.instagram.com/niclin_tw/
⭐ Facebook (資訊分享): https://www.facebook.com/niclin.dev
⭐ Blog (技術筆記): https://blog.niclin.tw
⭐ Linkedin (個人履歷): https://www.linkedin.com/in/nic-lin
⭐ 蝦皮賣場: https://shopee.tw/bboyceo
⭐ Github: https://github.com/niclin
⭐ Podcast: https://anchor.fm/niclin
━━━━━━━━━━━━━━━━
✉️ 合作邀約信箱: niclin0226@gmail.com

#前端 #後端 #工程師