|
過去我一直覺得,接收管理員通知用 Email 就夠了。如果訂單量不大,靠主機或第三方發信服務,其實也能運作得很順利。但後來與客戶訪談時發現,很多老闆根本不會用 Email,就算有,也常被廣告信和雜訊淹沒。 我自己試過很多收信軟體,試圖藉由工具來過濾重要訊息,但過不了多久,「重要信件」又變得滿天飛。雖然我會每天安排時間檢查,但有些緊急事件,例如新訂單通知,我希望能即時知道。 手機上的 App 通常只能根據「有新郵件」來推播,還找不到能針對「特定寄件者」推播的服務。因此我預設會把 App 的通知功能關掉,避免不緊急的訊息干擾我。 用 LINE 收通知也一樣,目前沒辦法只針對特定對象推播,只能全開或全關。這讓我想過是不是該換個沒那麼常用的通訊軟體來接收通知,但又懶得裝新 App,只好……自己開發一個外掛來解決了(?) 實機展示要能在手機上接收到訂單通知,有三個關鍵技術:Web Push、Service Worker,以及 Progressive Web App,這邊先跳過他們,如果你也想在手機上收到訂單通知可以參考以下步驟: 1. 下載 DWP 網站助理點擊連結下載外掛:https://oberonlai.blog/wp-content/uploads/wordpress-web-push/dwp-site-assist.zip 下載後到 WordPress 後台手動上傳並啟用。注意:你必須安裝 WooCommerce,且主機環境需為 PHP 8.0 以上。 2. 建立新助理啟用外掛後可以在後台看到網站助理的選項,可以想像成你請了助理來通知你重要的訊息,像是第一位助理負責通知你訂單相關的資訊,第二位助理通知你的網站壞了,依照用途區分不同助理,才能在第一層就先過濾訊息。
假設我們第一位助理叫做「訂單小精靈」,她主要負責通知你帳務相關的資訊,尤其是新訂單進來時要做後續的處理,就能依照下圖的方式進行設定:
接下來點擊助理的永久連結,就能看到你跟訂單小精靈的聊天介面,在左邊列表中找到訂閱按鈕,訂閱完成後就能在訂單狀態變為完成時傳送推播給你:
這就是 Web Push 技術的應用:透過瀏覽器推播。在桌機上需保持開啟瀏覽器,但在手機上則無此限制,只要你把聊天頁面加入主畫面並完成訂閱,就能隨時收到通知。 在手機上的操作步驟如下:加入主畫面(iOS / Android 操作)iPhone 使用者:
Android 使用者:
接下來在電腦上把訂單狀態手動改成完成,就能在手機收到推播通知,點擊通知視窗會開啟跟助理的聊天介面。像我自己是有 Apple Watch,它可以同步手機上的通知,因此當有新訂單進來的時候不用打開手機也能收到推播,非常方便。理論上 Android 手錶應該也能達到一樣的效果,但這我就沒實際測試過了。 3. 管理訂閱者在後台網站助理的選單可以看到管理訂閱的選項,進入後可以看到同一個管理員可以在多個不同的裝置上訂閱通知,更具體的說是不同裝置與瀏覽器,因此萬一有兩台手機想收到通知也沒問題,只要重複上面的步驟訂閱即可:
在這邊也可以刪除已經訂閱的管理者,避免讓不想收到通知的人持續收到通知。目前的權限設定是只有網站管理者跟商店經理可以收到推播,其餘的使用者皆不會收到,未來會根據使用回饋來加入設定功能。 下一步使用 Web Push 的好處是不用另外安裝新的 App,也不用因為 API 的使用計費而傷腦筋,透過助理來區分不同類型的通知,讓最重要的訊息可以直達天廳。DWP 網站助理目前僅支援當訂單狀態改變時進行推播,接下來會根據使用者回饋加入不同的外掛支援。 像是新顧客註冊、表單提交等等這些以管理員為主的通知,下一篇將介紹「助理的 AI 功能」──這才是網站助理真正能大顯神威的地方。我們下週見! |
大家端午快樂,這週分享一下我目前的主力開發工具~ 開發工具的使用歷程 在 AI 時代前,我都是使用 PhpStorm。PHPStorm 確實順手——跳到函式定義、儲存時自動格式化和檢查,這些功能讓開發效率提升不少。 進入 AI 時代後,我用了 Cursor 好幾個月。自動補全和聊天介面加速了不少開發流程。但用了一段時間,我發現自己還是需要理解程式碼的能力,最後回到 PHPStorm 搭配 Claude Code 的組合。 後來也試過 Google 的 Antigravity。除了免費額度以外,用起來跟 VS Code 差不多。直到某天我打開系統監控,發現 Antigravity 的記憶體佔用竟然到了 40 幾 GB。 40 幾 GB,只為了一個程式碼編輯器。 程式碼視窗還重要嗎? 這讓我開始重新思考一個問題:傳統 IDE 的設計核心是「程式碼」。整個介面以程式碼編輯器為主體,側邊欄、終端機、除錯面板都是輔助角色。 但我現在的開發流程已經變了。大部分時間我在跟 Claude Code 對話,描述需求、確認方向、審查它產出的結果。真正需要自己打開檔案逐行閱讀的時候,一天可能不到三成。...
前陣子,我教會一位朋友使用 Claude Code。他完全不會寫程式,連終端機是什麼都沒聽過。但他有一個很清楚的產品想法,一直找不到工程師幫他做。 兩週後,他把那個產品完整地實作出來了。 不是原型、不是 wireframe,是一個可以實際運作的產品。他全程沒有寫過任何一行程式碼——他只是用中文描述他要什麼功能,Claude Code 就幫他把程式寫出來、跑起來、除完錯。 你可能會想:那它跟 ChatGPT 到底差在哪? 一、你說中文,它寫程式 大部分人聽到「Claude Code」就先退了一步。Code,程式碼,那不是工程師的事嗎? 試試看跟它說這句話:「幫我把這個資料夾裡所有 PDF 的檔名,整理成一份清單。」 它會自己寫一段程式碼、跑完、把清單生出來。你完全不需要看懂那段程式碼。同樣的事在 ChatGPT 上做,它會把程式碼貼給你看,然後你得自己想辦法找地方執行。 你需要學的不是程式語言,而是怎麼把需求講清楚。但光是能下指令還不夠——如果它每次只能做一件事就停下來等你,那跟比較聰明的 Siri 也沒什麼兩樣。 二、它不是聊天機器人,它是 Agent 用過 ChatGPT 或...
如果你有在使用 AI 開發 WordPress 外掛,並且要設計一些自訂的後台管理介面時,一定遇過資料送出時無法正確儲存,或是儲存後被導向到奇怪的頁面。 根據我的經驗,這十之八九是 Nonce 的問題,AI 在處理 Nonce 這一塊常常會出錯,為了讓 AI 更好地理解該怎麼處理 Nonce,這篇文章就來分享 Nonce 的作用,以及如何讓 AI 不要再犯這種錯。 Nonce 是為了擋 CSRF 而生的 所謂的 Nonce,最主要的功能是要防止跨站請求偽造(也就是俗稱的 CSRF)。 CSRF 主要的攻擊方式,是攻擊者誘導已經登入受害者的瀏覽器,自動發送請求到你的網站,也就是說,攻擊者不需要入侵你的網站,只要你的瀏覽器在登入狀態下點擊了惡意網址,攻擊就會開始。 舉個例子: 站長登入了某個 WordPress 網站的後台沒登出,繼續開著分頁 站長切換到另一個由惡意攻擊者準備好的頁面,這個惡意頁面藏了一段惡意程式 程式裡面的連結會指向站長 WordPress 後台 瀏覽器在送出這個請求時,會自動帶上站長已經登入的 Cookie(因為原本分頁沒關) 站長踩到這個惡意網址、讀到那段...