快訊!我的新書今天開始可以在天瓏網路書店預購啦!歡迎大家前往訂購!
>>>> AI 職場超神助手:ChatGPT 與生成式 AI 一鍵搞定工作難題 <<<<

Web Developer

  • Line Bot圖文回覆的幾個功能

    Line Bot圖文回覆的幾個功能

    列出快速回覆選項 官網教學:https://developers.line.biz/en/docs/messaging-api/using-quick-reply/#set-quick-reply-buttons 可在訊息中加入快速回覆按鈕,讓使用者能夠快速回應。快速回覆功能可在一對一聊天、群組聊天和多人的聊天中使用,每則訊息最多可設定 13 個快速回覆按鈕。 快速回覆按鈕的消失時機: LINE Front-end Framework LINE 前端框架(LIFF,LINE Front-end Framework)是由 LINE 提供的網頁應用程式框架,透過將 LIFF SDK 整合至您的網頁應用程式,您可以存取 LINE 平台提供的資訊,或使用 LINE 應用程式的功能。 主要功能: 為了協助新手快速上手,LINE 提供了…

  • 用Chrome將本地端檔案替代伺服器檔案

    用Chrome將本地端檔案替代伺服器檔案

    功能介紹 很多時候我們在除錯前端時,會需要把某些例如像設定檔之類換成別的(例如換成DEV環境的設定檔),這個時候可以用Chrome Developer Tool內建的功能,指定替換掉某個伺服器上面的檔案,非常方便。 很多時候我們要了解別人的網站的一些技術,這個功能也可以幫上很多忙 使用方法 在 Chrome 中可以使用”Developer Tool > Source > 找到要取代的檔案 > 右鍵 > Override Content”去把內容取代掉 點選了之後,切換到Override頁籤,選擇取代的檔案所放置的資料夾,接著就可以去該資料夾看你剛剛所選的Override的檔案 然後更改裡面的檔案,同步就會更改線上的檔案,我們可以console.log出一些我們有興趣知道的東西,或者修改某些設定。 取代後不能下載檔案的問題 如果某些檔案不能取代,而出現錯誤訊息時,如下 則可以去關掉Source Map的功能

  • 在本機測試LineBot API
    ,

    在本機測試LineBot API

    在本機測試和LINE的API串接時,有幾種方法可以幫助你模擬和測試,而不需要將程式部署到有HTTPS的網址。 使用Ngrok Ngrok是一個免費的命令行工具,可以將你本機運行的服務暴露到互聯網上。這樣,你可以在本機測試你的API,同時讓外部服務(如LINE的Webhook)能夠訪問你的本機服務。ngrok的原理就是可以把外界的請求轉發到你本機指定的 Port,也就是由 ngrok 產生一串公開的網址來讓外網存取你本機上的Port。它的優點是快速而且還提供了https的服務讓你使用上更安全,甚至還可以設置密碼保護。 這個服務在開發Line Bot時非常好用,我們在本機開發webhook的後端程式,當然不想要每次都一定得部屬到伺服器上面才可以測試,使用Ngrok可以擁有一個公開的網址,可以讓其他人直接連上該網址上的內容。 安裝Ngrok 可從下面網址下載,下載頁面可選擇平台以及安裝方式https://ngrok.com/download 接著將ngrok.exe放置在你想要放置的硬碟位置即可 直接使用下面的指令會出現錯誤訊息 “authentication failed: Usage of ngrok requires a verified account and authtoken.” 查了一下,這是使用 ngrok…

  • ,

    Jōtai 介紹

    什麼是 Jōtai? Jōtai 是一個輕量級、易於使用的 JavaScript 狀態管理庫,特別設計來與 React 無縫整合。它提供了一種簡單而直觀的方式來管理應用程式中的狀態,並讓這些狀態在不同的組件之間共享。 Jōtai 的核心概念 Jōtai 的優勢 安裝Jōtai 基本用法 從同一元件讀取和寫入 當原子在同一元件中同時讀取和寫入時,為簡單起見,請使用組合 useAtom 鉤子。 從單獨的元件讀取和寫入 當僅讀取或寫入原子值時,可使用 useAtomValue 和 useSetAtom hooks 。

  • ,

    wordpress 永久連結設定失效

    故障的可能原因 在Apache2支持永久連結 要啟用 Apache2 的 mod_rewrite 模組,您需要將以下內容添加到 Apache2 的設定檔案中: 這個設定通常會加入到 mods-enabled 目錄中的一個設定檔案中。例如,您可以創建一個名為 rewrite.load 的檔案,並將上面的設定添加到這個檔案中。請按照以下步驟進行操作: 啟用rewrite功能 若您的 /etc/apache2/mods-available 目錄下已經有了 rewrite.load 設定檔案,您可以透過建立符號連結方式來啟用 mod_rewrite 模組。 請按照以下步驟: 執行完上述步驟後,Apache2 的…

  • ,

    在AWS的EC2裡加上SSL/TSL

    SSL/TSL是甚麼 SSL/TLS是一種網絡協議,用於在客戶端和服務器之間提供安全的數據傳輸。 SSL代表“安全套接字層”,TLS代表“傳輸層安全性”,兩者是相似的協議,TLS是SSL的升級版。 SSL/TLS通過加密數據流來保護通信的隱私和完整性,以防止數據在傳輸過程中被竊聽或篡改。它使用數字證書來驗證服務器身份,以確保連接到的服務器是預期的服務器,而不是惡意者偽裝的服務器。 SSL/TLS廣泛用於保護網站,電子郵件,即時通訊,虛擬專用網絡(VPN)等應用程序中的數據傳輸。通過使用SSL/TLS,這些應用程序能夠提供更安全的通信,確保用戶的數據受到保護。 我的伺服器環境 這邊所說的是自架的Linux服務器的狀況,一般若是在網域託管的服務商買網站空間,使用cPanel等管理網站的狀況下,一般都會在空間購買裡面附設有免費的SSL/TSL證書,除非我們的網站需要額外的附加資訊才需要自行購買。 這篇文章所講的主要是當我們要在Linux裡面自行設定SSL/TSL,或使用AWS、Azure等服務的虛擬機器架設網站時,會需要自行於Linux中建立SSL/TSL並匯入所需的SSL/TSL認證。 在AWS中使用免費的ACM證書 這邊有很詳細的指導: 教學課程: 在 Amazon Linux 2 上設定 SSL/TLS 但是這邊的教程在後面匯入SSL證書的部分,是要我們自己去購買自己網域專屬的證書,那個很貴而且不太能夠免費,一般免費的SSL/TSL其組織等資訊並不會附在上面,如下圖為AWS所提供的免費證書。 要使用免費證書一個重要的前提就是要將我們所購買的網域給AWS的Route 53來託管,這個動作會產生微量的費用,一個月為0.51美金。 在AWS裡面,有一些服務本身就可以直接和Route53,若是沒辦法,則要另外建立 Elastic Load Balancing,這個是免費的,它可以用來連結我們的EC2和Route53,這樣就可以利用ACM來設定憑證了。

  • ,

    在CentOS 7的Xampp中使用Certbot

    Certbot介紹 Certbot是一個由EFF(Electronic Frontier Foundation)開發的免費開源工具,用於自動化在Web服務器上部署SSL/TLS證書。它是一個自動化的客戶端,可以讓您輕鬆獲得免費的SSL/TLS證書,以保護您的網站通信,避免了手動創建證書的複雜過程。 Certbot支持多種服務器軟件,包括Apache、Nginx、HAProxy、Amazon Web Services等,它使用ACME(自動化證書管理環境)協議從Let’s Encrypt證書頒發機構獲取SSL/TLS證書。使用Certbot,您可以輕鬆地為您的網站啟用HTTPS協議,提高網站的安全性和可靠性。 如何安裝 CerBot的安裝很貼心,在官方網站就可以選擇你所使用的環境,然後他就會有很詳細的安裝教學了 官方網站: https://certbot.eff.org/ 使用XAMPP的認證指令 若是要認證XAMPP的APACHE,不能直接使用–apache,而是要使用apache-ctl,如下: 錯誤訊息除錯 – Could not find configuration root 下面這個錯誤訊息代表這個認證機器人不知道你的網站的本地端http files靜態路徑的位置 解決方法: 在執行指令的時候告知http…

  • ,

    Socket.io錯誤訊息意義

    I have found: “ping timeout”: client stopped responding to pings in the allotted amount of time (per the pingTimeout config setting). “transport close”: this appears…

  • ,

    Socket.io介紹

    Socket.io socket.io是基於Websocket的Client-Server實時通信庫 Socket.io承繼了Node.js的事件處理方法,把Client端與Server端的程式統一成一至的操作方式,讓使用者可以只需專注在處理「事件」,就可以快速開發出應用,他也支援『房間』的概念,可以使用同一條WebSocket卻擁有不被彼此干擾的資料傳輸(多種聊天頻道的概念)。另外,他也提供了很好的fallback機制,即使用戶的瀏覽器不支援WebSocket,他還是可以利用Flash、XMLHttpRequest等方式來傳送資訊(速度會比較慢就是了)。這些機制都他都包裝好了,所以寫程式時並不需要知道這些細節,只需要設定好就可以運作。 Socket.io 特性整理 Events 自訂事件。 Rooms Room 的概念只存在於伺服器端。可以理解為訊息處理時的聽眾分組,可對同一個分組內的聽眾進行廣播。 Namespaces 命名空間,我理解為底層連線的分組管理,不同命名空間可以走同一條 Engine.io 連線或是各自連線,每個命名空間可以各自驗證是否接受連線。 ACK 回調 如同 HTTP 之於 TCP,HTTP 為 TCP 提供了一套請求與響應的模型。ACK 也為 Socket.io…

  • ,

    Socket.io自行增加header

    伺服器端 範例程式碼:


17年資歷女工程師,專精於動畫、影像辨識以及即時串流程式開發。經常組織活動,邀請優秀的女性分享她們的技術專長,並在眾多場合分享自己的技術知識,也活躍於非營利組織,辦理活動來支持特殊兒及其家庭。期待用技術改變世界。

如果你認同我或想支持我的努力,歡迎請我喝一杯咖啡!讓我更有動力分享知識!