前言近期為了提升自己學習能力，我製作一個學習工具AI幫助需要學習英文/日文的人使用。這個工具是完全免費又可以賺到閱讀訓練，如果是應付考試可以試試看效果如何。 ChatGPT商店 【學習工具】英文學習/練習 : 點選我 【學習工具】日文學習/練習 : 點選我 快速使用方式一進入畫面建議都按下 “您有什麼功能” 按鈕，有一系列的功能清單可以使用，如果要選選擇其中的功能，就是複製 title 就可以了。 特色考慮到各位使用這絕對會考慮 CP 值決定購買或是免費仔情況，所以不會參考語音功能在裡面。 1. 測驗與挑戰模式與英文練習工具類似的功能如下清單 單字測驗（日文→中文 或 中文→日文） 詞性與變化練習（動詞、形容詞變化） 句型測驗（填空題練習助詞、動詞、句型） 語法測驗（助詞、時態、句子結構） 閱讀理解（短篇文章 + 測驗） 同義詞與反義詞練習 2. 閱讀理解找不到免費的 APP 軟體訓練閱讀能力，可以透過以下操作順便提供測驗題目，提升學習上閱讀的能力 3. 單字與詞彙學習使用時候可以加入單字，也包含單字抽考模式。在測驗時候需要確認是否要留漢字選項， ...

前言提到 VSC 開發可肯定遇到一些排版問題，有些排版的規則與後面開法人員又不太相同，容易造成 commit 都是排版的修改項目。這邊我用 VSC 來處理共同開發讓所有人排版都一致。 VS Code指令與搜尋如果第一次或是用不久且不夠熟悉的人，我們可以記住以下快捷鍵。 快速指令 (有 > 符號): Ctrl + Shift + P 快速搜尋 (只能搜尋當前專案的檔案名字) : Ctrl + P 快速搜尋可以自己加入 > 符號也能達到效果。 註記 : 最新版本的 VS Code 可以直接點搜尋列也能達到 Ctrl + P 效果。 workspace / User 的 Settings.json 差異專案開始的時候，一定很多人利用 .gitignore 移除掉 .vscode ，首先先把 .gitignore 裡面針對 .vscode 先移除才能往下走原因如下。 說明 : User Setting.json : 個人設定檔，只有自己本機才能使用這些參數。 Workspace Setting.json : 專案設定檔，這個設定檔是針對專案的設定，所有人都能使 ...

前言前正子在找相關工具可以追蹤 Android / IOS 手機上面的 API ，發現有個很強大工具可以達到我的需求。這工具結合了 Fiddler、Charles、Postman 的功能，可以在手機上面直接進行 API 測試、追蹤、修改等功能。 Reqable 簡介Reqable 是一個可以在手機上面進行 API 測試、追蹤、修改等功能的工具，可以在手機上面直接進行 API 測試、追蹤、修改等功能。因為他是大陸開發工具，若有考量可以改用其他工具。 一、API 功能 ( 介面類似 Postman )這裡工具提供了 Explorer 、Collection、History 這幾個功能可以比較 Postman 與 Reqable 的差異。 1-1 Explorer 功能Postman 是沒有所謂的 Explorer 功能。這功能在創建新的 Tab 時候會直接記錄在 Explorer 中，可以直接點擊進行 API 測試。主要目的會偏向於紀錄當前 tab 清單有地方可以查看。 1-2 Collection 功能Collection 功能可以將 API 進行分類，可以將相關的 API 放 ...

前言於幾周前 will 保哥推薦一個 xAI 來翻譯網頁，而且一個月有 25美元免費額度。Felo 提供的 Glarity 無法使用xAI來翻譯，因此特別紀錄操作方式。 xAI 簡介xAI 是由 twitter (X Corp) 提供AI服務給使用者使用，模組目前只有支援 grok-beta、grok-vision-beta。(目前翻譯模型效果比其他模型好很多) 安裝擴充以及 AI Key 安裝擴充 進入 Chrome Web Store 搜尋 沉浸式翻譯-網頁翻譯擴充 並安裝 安裝完成後會出現一個小圖示在右上角 擴充連結 : https://chromewebstore.google.com/detail/%E6%B2%89%E6%B5%B8%E5%BC%8F%E7%BF%BB%E8%AD%AF-%E7%B6%B2%E9%A0%81%E7%BF%BB%E8%AD%AF%E6%93%B4%E5%85%85-pdf%E7%BF%BB%E8%AD%AF-%E5%85%8D%E8%B2%BB/bpoadfkcbjbfhfodiogcnhhhpibjhbnh 取得 AI API K ...

前言近期回頭看 Gihub Copilot 功能有 windows Terminal 並非是在 Vscode 中使用，這邊紀錄一下 Terminal 有哪些功能。 Terminal Canarywindows Terminal 已經釋出三種版本 (一般、Preview、 Canary) ，UI 也比以前的Terminal 大幅提升。 Terminal Canary 版本於 2023年時候有釋出，這版本是可以使用 Copilot / Azure AI / OpenAI 這三個功能。 一、安裝 Terminal Canary 相關連結 : Terminal Canary 下載連結在 Github 上，可以直接下載安裝。 1-2 加入 Copilot 功能請參考下方 GIF 步驟，可以看到如何加入 Copilot 功能。 1-3 新增快捷鍵為了增加活用度，我這邊取用跟 Vscode 一樣的快捷鍵 (ctrl + i)，可以參考下方步驟。 二、使用方式2-1 介面功能chat ui 有兩個功能，筆者覺得他們 icon 做得不太好辨認，以下說明。 clear histor ...

前言用到現在來補充一個比較多新手會卡觀的一個問題，就是如何使用 locator 配合 selector 來定位元素，這個在實際操作上是非常重要的，因為有時候我們會遇到一些元素是沒有 id 或是 class 的，這時候我們就需要透過 locator 配合 selector 來定位元素。 locator 配合 selector 使用起因相信各位在各家公司上，往往都是一條龍從前端到後端都是自己一個人在做，這時候就會遇到一個問題，就是前端的元素是沒有良好的設計 id / class 容易造成html不好維護。配合 Playwright 有時候使用 getByRole 又會出乎意料的錯誤，建議使用 locator 解決問題。 locator 定位器locator 定位器是 Playwright 提供的一個定位元素的方法，透過這個方法我們可以透過一些特定的方式來定位元素，這樣就可以達到我們想要的目的。如下方範例 : 12await page.locator('div.myClass')await page.locator('xpath=//button&#x ...

前言playwright 在前幾章都有介紹簡單的操作方式，這次藥用個身分驗證的例子來說明如何使用 playwright 來自動化測試。 playwright 身分驗證為甚麼會需要 playwright 身分驗證，主要是每次案例上 playwright 都會開啟全新沒有任何的 cookie、session之類，每次都要重新登入相當繁瑣。這邊我們就來說明如何使用 playwright 來自動化登入的動作。 這篇建議各位讀者使用 playwright 時候可以到 playwright.tw 這個網站來查看範例，這個網站由 【Will 保哥】翻成中文網站有助於各位學習。 一、創建驗證動作前篇有提到 test.describe 這個方法可以用來描述測試的動作，可以用來分類測試動作。這次我們就讓這個登入動作寫在 step 裡面，之後啟動就可以直接使用。這邊會使用 playwright 官方網範例來調整，這邊會使用 github 登入來做範例。 12345678910setup("authenticate", async ({ page, browser } ...

前言近期都在玩 Discord Bot 開發。使用方式一定使用 docker 當作工作排程器讓程式運行時候，可以透過 docker desktop 來管理。但是在使用 docker 的時候發現一個問題就是無法互通，因為他本身架構是各之間的docker都是。這時候就需要使用 network 來解決這個問題。 一、Docker容器互相無法連線問題對於一個 docker 使用不久的人來說，會以為都在同一個local network 應該要能互通，而且設定 port 也要吃得回去才合理。過程中得出一個結論就是隔離性，如下圖 : 其中，每個 docker 內部若允許 3000 port，但在本機的 http://localhost:3000 並不會吃得回去，這就是為什麼指令需要加入 -p 3000:3000 這個參數。 1-1 解決方式解決方向就是要讓 docker 容器A可以允許容器B的請求，這時候就需要使用 network 來解決這個問題。 1-1-1 創建一個新的 network我們需要有個環境中，彼此可以互通的網路，這時候就需要創建一個新的 network。 12docker new ...

前言最近在工作環境中沒有任何UI可以使用 git 的功能，其中最需要用到多筆 commit 進行 cherry pick 我們可以用以個指令來進行操作。 Cherry Pick在 Git 中，cherry-pick 是一個強大的命令，允許開發者從一個分支中選擇特定的提交（commit），並將其應用到當前分支。這與傳統的合併（merge）或重疊（rebase）不同，因為這些方法通常會將整個分支的所有提交整合到目標分支中，而 cherry-pick 只選擇單個或多個特定的提交。 一、使用方式一般使用方式 git cherry-pick <commit> 是將指定的 commit 合併到目前的 branch 中。 切換到目標分支：首先，確保你在想要應用提交的分支上。例如，如果你想將提交應用到 master 分支，可以使用以下命令： 1git checkout master 執行 cherry-pick：然後，使用 cherry-pick 命令來選擇特定的提交： 1git cherry-pick <commit1> 如果再執行前覺得 commit 名稱想要修改可 ...

前言最近已經荒廢學習技術相關東西，主要經營都是在 discord 上面。剛好這次想要透過 docker 代替常駐程式作法，因此，這次來試試看 dotnet 與 node 一次用上起來。 一、dotnet 環境上次我有一篇是提到 api 上架部分，這邊我考慮不使用任何程式碼快速產生一個 dotnet、dockerfile。 相關連結 : Docker】使用VSC部屬minimal api 處理方式很簡單，但我們實際要用的是 Console App，因此我們可以透過 dotnet new console 來建立一個 Console App。 123dotnet new console -n dotnet_nodecd .\dotnet_node\code . # 開啟 VS Code 1-1 VS Code 加入 Dockerfile這邊我們可以看到 Program.cs 內容，這邊我們不會特別修改，只是要部屬到 docker 中。接著我們用 ctrl + shift + p 來搜尋 docker: add docker files to workspace，這邊我們選擇 .NET C ...