技術日誌 ✏ LEO
0%

發表於 Disqus：

前言：

好久沒更新技術文章，近期因為公司組識架構又要調整，產品單位進行人力縮減，對於自己去留的決定又開始感到些許迷茫，畢竟我也36歲即將步入中年，說不擔心是騙人的，從出社會後，好像一直都是在為工作、為家庭而活，想那麼多也沒有用，不如利用交接工作的空檔來寫篇技術文章轉換一下心情好了。

mkcert 是什麼？

對於前端開發人員來說，對於網頁使用 https 協定應該不陌生，因為現在網頁基本都是 https 開頭的了，好像很少會看到 http，目前應該只剩下在開發環境才會使用到。那兩者有什麼差別呢？簡單來說 https 是安全的超文本傳輸協議，使用SSL/TLS協議對資料進行加密，確認 C/S 兩端的安全性。

如果開發人員有需要建構 https 網站的需要，不免就需要先取得合法的憑證才能夠進行設定，但正規的憑證是需要花錢購買的，如果要自己手動透過 OpenSSL 建立自我簽署的憑證，也需要對於憑證有一定的理解，這時候使用 mkcert 可以很快速的協助開發人員建立個人或是單位內通用的憑證。

閱讀全文 »

發表於 Disqus：

前端如何 debug Webview 應用程式

混合式應用程式是指結合了網頁技術（HTML、CSS、JavaScript）和原生應用程式元件的應用程式。這種應用程式通常使用一個 WebView 元件來顯示網頁內容，同時也可以利用原生的程式碼和功能，例如訪問硬體感應器、存儲資料、執行後台任務等。這樣的應用程式既能享受到網頁開發的快速和跨平台特性，又能利用原生應用程式提供的性能和功能。

混合式應用程式使用一個稱為 WebView 的元件，這個元件允許開發者在應用程式中嵌入網頁內容，提供使用網頁技術開發的功能。

WebView Test

這是一個手機 App 用於測試 Andriod WebView 應用程式，提供前端開發人員需要的資訊，透過手機安裝 Google Play 即可使用，相對簡單好上手。

閱讀全文 »

發表於 Disqus：

Angular Library 目前是使用 karma + Jasmine 運行單元測試。在使用 ng g c 指令時，預設會新增測試檔案，如果團隊沒有單元測試的習慣，時間久了專案資料夾內會堆積許多冗餘的檔案，因此我希望能透寫個於腳本來幫我快速人工檢查在專案內的測試檔案，哪些是可以移除的？哪些又是可以保留的。

使用 ChatGPT 快速幫我產生想要的內容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
#!/bin/bash

# 指定目錄路徑
directory_path="projects/"

# 指定要檢查的代碼片段
code_to_check="expect(service).toBeTruthy()"

# 使用 find 獲取目錄下的所有文件
files=$(find "$directory_path" -type f -name "*.spec.ts")

# 遍曆每個文件並使用 grep 檢查內容
for file in $files; do
  echo "$file"
  if grep "$code_to_check" "$file"; then
    echo "文件 $file 包含指定的代碼片段。"

    # 顯示文件內容
    echo "文件內容："
    cat "$file"

    # 詢問用戶是否刪除文件
    read -p "是否刪除文件？(y/n): " response
    if [ "$response" == "y" ]; then
      rm "$file"
      echo "文件已刪除。"
    fi
  fi
done

大致上看過 shell 語法沒問題，我們就可以直接運行代碼，整理專案中的檔案內容。

發表於 更新於 Disqus：

Angular 瀏覽器相容性設定

Angular 官方文件有這一段說明 Configuring browser compatibility 。

其實大家都看過，但是很少人會留意，到底自身的專案應該要怎麼設定會比較好，

假設 .browserslistrc 設定如下：

1
2
3
4
5
6
7
>0.3%, 
last 1 Chrome version, 
last 1 Firefox version, 
last 2 Edge major versions, 
last 3 Safari major versions,
last 2 iOS major versions, 
not dead
閱讀全文 »

發表於 更新於 Disqus：

1 首先，我們先在 /usr/local/bin 建立腳本 check_network.sh。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#!/bin/bash
TELEGRAM_BOT_TOKEN="TELEGRAM_BOT_TOKEN"
TELEGRAM_CHAT_ID="TELEGRAM_CHAT_ID"

# eno1 改用你電腦對外網卡
IP_ADDRESS=$(ip addr show eno1 | grep -oP '(?<=inet\s)\d+\.\d+\.\d+\.\d+')

EXTERNAL_CONNECTION=$(ping -c 1 google.com 2>&1 | grep "1 packets transmitted")

if [ -n "$EXTERNAL_CONNECTION" ]; then
  MESSAGE="Ubuntu 係統已啓動。IP 地址：$IP_ADDRESS"
  URL="https://api.telegram.org/bot$TELEGRAM_BOT_TOKEN/sendMessage"
  curl -s -X POST $URL -d "chat_id=$TELEGRAM_CHAT_ID&text=$MESSAGE"
fi

exit 0

2 設定腳本可執行

1
sudo chmod +x /usr/local/bin/check_netowrk.sh

3 使用systemd建立開機服務的設定

1
vim /etc/systemd/system/check-network.service

4 開機服務設定內容如下：

1
2
3
4
5
6
7
8
9
[Unit]
Description=Check External Network Connection and Send Notification
After=network-online.target

[Service]
ExecStart=/usr/local/bin/check_netowrk.sh

[Install]
WantedBy=multi-user.target

5 啟用並啟動服務

1
2
sudo systemctl enable check-network.service
sudo systemctl start check-network.service

6 確認服務狀態

1
sudo systemctl status check-network.service

如何服務運作正常，可以手動執行腳本測試，確認訊息有正常發送之後，在重新開機，如果網路服務有正常連線，應該會收開機後收到訊息。

發表於 更新於 Disqus：

Git http(s)帳密設定

通常在Git私倉的建置中，我們通常是透過http協定來存取Git私倉上的資源，在macOS上為了方便，透過我們會利用Keychain來安全管理使用者的帳號及密碼，因此大略都會透過下列指令設定 git credential osxkeychain 用戶憑證的管理方式。

1
git config --global credential.helper osxkeychain

帳密更新方式

隨著時間一久，突然要上傳異動至repo專案時發現為何突然間提示權限不足，經過檢查線上權限都有開啟，那可能是因為帳密跑掉或錯誤而影響。

1
2
3
4
$ git credential-osxkeychain get
host=github.com
protocol=https
> [Press Return]

可以透過上列的指令可以查看目前對照的帳號及密碼是否正確

如果不確定，也可以透過下列指令先刪除原有設定，後續在進行git指令操作時就會需要重新輸入帳密

1
2
3
4
$ git credential-osxkeychain erase
host=github.com
protocol=https
> [Press Return]

發表於 更新於 Disqus：

故事背景

今日上班的時候，隔壁的小王跑來跟我說，目前線上遇到CORS的問題，深入了解後才曉得在後端的工程人員對於CORS的認識不深，因此在進行新環境部署的時候缺少環境的設定檔，面對總是有類似的狀況一再發生，是否有什麼方式可以改善。

同源策略

要說起CORS的由來，主要還是在於安全性考量，在瀏覽器上大部份是採用同源政策(Same-origin policy)限制了不同網域資源間的活動。因此當我們API站的網址、埠號、協定不一致的時候，通常我們會在開發者工看到下面的錯誤訊息：

CORS

隨著目前網站提供的功能與內容的豐富度越來越高，經常會有需要存取第三方資源的狀況，因此大部份都會透過一些跨域存取的方法達到請求資源的目的，CORS就是其中一種可以達成存取資源方法。伺服器會透過preflight request機制使用OPTIONS方法發出一個請求，確認伺服器是否支援跨域請求以及相關內容，當伺服務允許之後，才會實際發送資源請求的動作，並告知客戶端是否有需要相關的認證資訊(Cookie、Header)之類的。

閱讀全文 »

發表於 更新於 Disqus：

前言

日常工作上經常性使用VSCode這款原始碼編輯器做為開發工具，但大部份都只用來寫寫代碼、透過擴充套件highlight代碼，以及進行相關編輯、搜尋、取代等文書工作，甚少直接使用編輯器來運行程式，這次來記錄一下如何使用內建的Debug功能進行Typescript的Debugging。

參考內容：
https://code.visualstudio.com/docs/editor/debugging

閱讀全文 »