五倍券 Banner - 首頁 - desktop

五倍券 Banner - 首頁 - mobile

五倍的五倍券優惠活動

Blogs - Sidebar


大家是否有在使用瀏覽器『擴充套件』呢？筆者已經使用 [uBlock](https://github.com/gorhill/uBlock) 這款開源的廣告阻擋器多年囉，但是一直以來都不知道瀏覽器擴充套件是如何製作以及其可取用的 API 為何，前陣子花了點時間研究一下，才發現在 Chrome/Chromium 上開發擴充套件竟然是如此的簡單，而且可取用的 API 跟在 Web 上也完全不是同一個檔次，今天就來看看這些東西，順便找些場景來應用。

## 如何建立，並開始開發 Chrome 擴充套件

首先去看了官方文件：[https://developer.chrome.com/extensions/getstarted](https://developer.chrome.com/extensions/getstarted)

請先建立一個空的資料夾作為擴充套件專案資料夾，接著在資料夾中建立 `manifest.json`，用來設定擴充套件的名字，敘述等：

```json
{
  "name": "Getting Started Example",
  "version": "1.0",
  "description": "Build an Extension!",
  "manifest_version": 2
}
```

接著打開 Chrome 瀏覽器到 `chrome://extensions/`（在網址列上直接輸入即可），右上角有個 `Developer mode` (開發模式)，把它打開：

![](https://i.imgur.com/Frw9ya4.png)

你會發現有幾個按鈕跑出來：

![](https://i.imgur.com/Rvlsf5x.png)

按下 `Load unpacked` 並且選取 `manifest.json` 所在的資料夾，接著可以看到擴充套件就這樣出現了：

![](https://i.imgur.com/SMMXxdu.png)

沒錯，就是這麼簡單，幾乎不用任何開發工具，就是 chrome 跟你最愛的編輯器即可；當然 `manifest.json` 還能放[其他欄位](https://developer.chrome.com/extensions/manifest)，例如加上 `icons`:

```json
{
  ...
  "icons": {
    "16": "icon.png",
    "48": "icon.png",
    "128": "icon.png"
  },
  ...
}
```

`icon.png` （或是其他檔名也可以）隨便找一張圖即可，就直接放在跟 `manifest.json` 同個資料夾下即可；在修改之後會需要來按下這邊的重整按鈕 **更新**擴充套件，這樣一來我們就可以測試剛改好的擴充套件是否如預期執行：

![](https://i.imgur.com/AwVCb3O.png)

## Chrome 擴充套件能做哪些事？

上面建立了一個 chrome 擴充套件，但是它什麼功能也沒有，毫無反應；官方文件有一頁概觀列出擴充套件上可以使用的功能：

[https://developer.chrome.com/extensions/devguide](https://developer.chrome.com/extensions/devguide)

這篇文章將以兩個情境來介紹筆者比較有興趣的幾個功能

## 情境 1: PTT 新文章提醒

其實就是文章**爬蟲**，只是透過 chrome 瀏覽器**定期**進行檢查，並且比對是否跟**上次**爬的資料一樣，不一樣的話**通知**使用者，這樣聽起來會需要幾個功能：

* 定期在背景執行程式
* 進行 http call 抓回網頁資料
* 資料儲存功能
* 通知功能

在[官方 get started](https://developer.chrome.com/extensions/getstarted) 建立擴充套件之後第一件事就是在 `manifest.json` 給一個 `background.js` 讓擴充套件有程式可以執行：

```json
{
  ...
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  ...
}

```

可以先在 `background.js` 寫上一個 `console.log('hello chrome extension!')` 測試一下，並請他在安裝好的時候執行：

```javascript
chrome.runtime.onInstalled.addListener(() => {
  console.log('hello chrome extension!');
})
```

重整更新之後可以看到 `Inspect views background page` 出現了，點下去就是熟悉的 Chrome DevTools:

![](https://i.imgur.com/bMJfVqJ.png)

### 定期在背景執行程式

這個功能叫做 [alrams](https://developer.chrome.com/apps/alarms)，首先必須要在 `manifest.json` 加入權限：

```json
{
  ...
  "permissions": ["alarms"],
  ...
}
```

接著在安裝好擴充套件時加入 alarm，這邊請他每分鐘執行一次：

```javascript
chrome.runtime.onInstalled.addListener(() => {
  chrome.alarms.create('check', { periodInMinutes: 1 })
})
```

> [官方文件上其他執行時機的選項 (alarmInfo)](https://developer.chrome.com/apps/alarms#method-create)

同時加上 alarm callback 作為定期執行的程式：

```javascript
chrome.alarms.onAlarm.addListener(alarm => {
  console.log("Got an alarm!", alarm);
});
```

一樣戳一下重整按鈕，一分鐘之後應該可以看到：

![](https://i.imgur.com/neroB2T.png)

### 進行 http call 抓回網頁資料

既然是在瀏覽器的 Javascript 環境，第一個想到的 API 就是 [`fetch`](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) 了，假設要來抓 [PTT mobilesales](https://www.ptt.cc/bbs/mobilesales/index.html):

```javascript
fetch('https://www.ptt.cc/bbs/mobilesales/index.html')
```

馬上就會看到錯誤發生，Chrome 也很好心地直接在擴充套件管理界面上讓你知道有事情不太對勁：

![](https://i.imgur.com/K142TGD.png)

![](https://i.imgur.com/Cusc460.png)

沒錯，[跨站存取問題](https://zh.wikipedia.org/wiki/%E8%B7%A8%E4%BE%86%E6%BA%90%E8%B3%87%E6%BA%90%E5%85%B1%E4%BA%AB)，不過我們可是擴充套件，只要在 `manifest.json` 的 `permission` 給上允許存取的 [URL pattern](https://developer.chrome.com/extensions/match_patterns) 即可，像是這樣就可全開：

```json
{
  ...
  "permissions": [..., "*://*/"]
  ...
}
```

那麼接下來的問題就是如何從 html 中找到要找的資料，筆者使用 [DOMParser](https://developer.mozilla.org/en-US/docs/Web/API/DOMParser)，接著就可以用 Web/DOM API 享受找元素的方便性（例如 `querySelector`），迅速找到 mobilesales 最新的文章標題。

### 資料儲存功能

Chrome 擴充套件提供了自己的 [storage API](https://developer.chrome.com/extensions/storage)，首先得上 `"storage"` 到 `manifest.json` 的 `permission`:

```json
{
  ...
  "permissions": [..., "storage"]
  ...
}
```

接著就可以透過這樣的語法進行讀寫，把 `fetch` 到的文章主題存起來：

```javascript
chrome.storage.local.set({ key: value }, callback)
chrome.storage.local.get('key', result => { console.log(result.key) })
```

這組 API 是非同步的，所以需要 callback 來接，筆者看到這就立刻用 [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) 包起來接下來就能用 async/await 寫更漂亮的語法。

### 通知功能

定期抓資料回來比對跟上次存起來的文章標題是否一樣，不一樣的時候就是有新文章，這時通知使用者，chrome 擴充套件也有 [notifications API](https://developer.chrome.com/apps/notifications)，第一件事情一樣是加上  `manifest.json` 的 `permission`:

```json
{
  ...
  "permissions": [..., "notifications"]
  ...
}
```

我們就可以呼叫 API 通知使用者：

```javascript
chrome.notifications.create('reminder', {
  type: 'basic',
  iconUrl: 'icon.png',
  title: 'ptt mobilesales first post:',
  message: '[賣/台北/面交] iPhone ...', // fetch 到的最新文章主題
});
```

![](https://i.imgur.com/FHXOhfD.png)

接下來就是寫 Javascript 進行邏輯串接了，筆者也有進行一些改良，完整程式碼請見 Github repo: [https://github.com/pastleo/ptt-watcher-chromext](https://github.com/pastleo/ptt-watcher-chromext)

## 情境 2: 單字蒐集

這個就有趣了，使用者在**任何網頁上瀏覽時**，看到一個沒學過的單字想要**紀錄**下來，於是把文字選取起來，**按下隨即出現的 `Add` 按鈕**把文字加入複習清單內。點選 UI 上的擴充套件 icon 會有 **popup** 看到蒐集的單字數量；也可以打開一個**擴充套件頁面**來進行複習，這樣聽起來會需要幾個功能：

* 在瀏覽中的網頁上執行指定的 Javascript
  * 而且可以存取到頁面上的 BOM/DOM、擴充套件 API
* 點選擴充套件 icon 有個 popup
* 打開並顯示一個複習頁面

當然還是需要資料儲存功能，上面已經提過就不再提，這部份最有趣的部份就是 `在瀏覽中的網頁上執行指定的 Javascript`，也就是在別人的網站上執行自己寫的 Javascript。

### 在瀏覽中的網頁上執行指定的 Javascript

這個功能就是 [**`content_scripts`**](https://developer.chrome.com/extensions/content_scripts)，需要 [`activeTab`](https://developer.chrome.com/extensions/activeTab) permission，所以當然還是得先在 `manifest.json` 上寫好，同時也要告訴 chrome 你要執行的 Javascript 檔名跟執行的網頁 [URL pattern](https://developer.chrome.com/extensions/match_patterns):

```json
{
  ...
  "permissions": [..., "activeTab"],
  "content_scripts": [{
    "matches": ["https://*/*", "https://*/*"],
    "js": ["contentScript.js"]
  }]
  ...
}
```

照這樣設定，在瀏覽任何網頁時都會在上面執行 `contentScript.js`，我們就可以所有網站加上我們自己想要的行為。

#### 關於 `contentScript.js`

* 根據[官方文件](https://developer.chrome.com/extensions/content_scripts#run_time)，`contentScript.js` 預設會在 `document_idle` 時執行，也就是說至少都已經 [`DOMContentLoaded`](https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event)
* `contentScript.js` 可以透過 `window`/`document` 操作網頁的 BOM/DOM
* 有趣的是，`contentScript.js` 同時還可以呼叫 `chrome.storage` 等擴充套件才有的 API

> 根據[官方文件](https://developer.chrome.com/extensions/content_scripts#isolated_world)，`contentScript.js` 跟原本網頁是不同的 Javascript runtime 實體，經過測試確實是如此，使用 `window.testVar = 123` 在另外一邊是拿不到的，但是 BOM/DOM 操作對象是同一個

#### 文字選取偵測，偵測到時加上按鈕

策略很簡單，就是在整個 `document` 上監聽 `click` 事件，並使用 [`window.getSelection()`](https://developer.mozilla.org/en-US/docs/Web/API/Window/getSelection) 看是否有文字被選取，有的話就放上按鈕把選取的文字儲存起來：

```javascript
document.addEventListener('click', event => {
  const selected = window.getSelection().toString();
  if (!selected) return;

  button = document.createElement('button');
  button.textContent = 'Save this';
  // 設定 button.style 使得按鈕出現在滑鼠附近

  button.addEventListener('click', () => {
    // 透過 chrome.storage 把 selected 存起來
  });

  document.body.appendChild(button);
})
```

### Popup 以及複習頁面

* 點選擴充套件 icon 時的行為可以透過設定 [browserAction](https://developer.chrome.com/extensions/browserAction) 來決定，指定 `default_popup` 到一個 html 檔案即可
* 複習頁面的部份就建立一個 html 網頁
  * 同時我們來把這個複習頁面當成 [擴充套件選項頁（Options）](https://developer.chrome.com/extensions/options#full_page)

在 `manifest.json` 中指定這些 html 檔案：

```json
{
  ...
  "browser_action": {
    "default_popup": "popup.html"
  },
  "options_page": "review.html",
  ...
}
```

接下來內容排版、行為實做就是一般靜態網頁的開發，唯一的差別就是多了擴充套件 API 可以使用，像是上面提到的 [storage API](https://developer.chrome.com/extensions/storage)

擴充套件的所有資源都有一個特定的 URL 可以連到，透過 `chrome.runtime.getURL('review.html')` 得到擴充套件內 `review.html` 的 URL，然後在 popup html 內加入一個按鈕來開啟這個 URL。

> 想知道 `chrome.runtime` 還有什麼 API 可用？請參考[官方文件](https://developer.chrome.com/擴充套件s/runtime)

同樣地筆者也進行一些改良，簡易字卡蒐集小工具就這樣完成囉：

<amp-iframe width="560" height="315" sandbox="allow-scripts allow-same-origin" layout="responsive" frameborder="0" src="https://www.youtube.com/embed/NL5ajwr88Yw" allowfullscreen >
</amp-iframe>

完整程式碼請見 Github repo: [https://github.com/pastleo/word-cards-chromext](https://github.com/pastleo/word-cards-chromext)

---

今天透過兩個場景介紹了幾個基礎的擴充套件 API，光是這些東西就已經足以做很多強大的功能了，而且還不只有這些，它甚至還可以操作[書籤](https://developer.chrome.com/extensions/bookmarks)、[Tabs](https://developer.chrome.com/extensions/tabs) 等，就算沒有要發布到 [Chrome web store](https://chrome.google.com/webstore)，用自己寫的程式解決日常使用 Chrome 瀏覽時遇到的問題也是很有趣的，接下來就讓各位讀者們自己去探索囉！

同時筆者會基於這篇『單字蒐集』的擴充套件進行加強，開設工作坊給大家一起學習體驗，有興趣的朋友請關注五倍粉絲團：[https://www.facebook.com/5xruby](https://www.facebook.com/5xruby)

> 本文同步發表在筆者的部落格：[https://pastleo.me/post/20200731-chromext-apis-word-cards](https://pastleo.me/post/20200731-chromext-apis-word-cards)

---

>  👩‍🏫  __課務小幫手：__
>  
> ✨ 想掌握 JavaScript 觀念和原理嗎？
>
> 我們有開設 📒 [JavaScript / jQuery 前端開發入門實戰](https://5xruby.tw/courses/javascript) 課程唷 ❤️️
>


post-PTT新貼文提醒、單字蒐集 Chrome 擴充套件？一同窺探有哪些強大的 API 可以使用

PTT 新貼文提醒、單字蒐集 Chrome 擴充套件？一同窺探有哪些強大的 API 可以使用

(Photo by <a href="https://www.facebook.com/yuapala" rel="nofollow noopener noreferrer" target="_blank">Apa yu</a>)

## 前言
隨著網路技術的發展，前端應用已經是網頁開發不可或缺的一塊，隨手打開一個網站，隨處都可以看到互動元素，從大至首頁炫炮華麗的 JavaScript 特效，小到輸入資料出現的驗證訊息，甚至是早些年代最愛用的跑馬燈(<strike>不要問我什麼是跑馬燈</strike>)，或是近幾年熱門的 <a href="https://en.wikipedia.org/wiki/Single-page_application" rel="nofollow noopener noreferrer" target="_blank">Single-page application</a>，都屬於前端應用的一環，也因為如此，瀏覽器跟編輯器一樣，已經是網站開發人員，最常用也是最熟悉的...

### 等等，你真的熟悉瀏覽器了嗎？

如果你是一個網站開發者，相信你可能已經聽過或用過 <a href="https://developers.google.com/web/tools/chrome-devtools?hl=zh-tw" rel="nofollow noopener noreferrer" target="_blank">Chrome DevTools</a> 這套內建在 Chrome 裡面的開發輔助工具，中文叫 「Chrome 開發者工具」(下圖紅框所示)

![post-開發不難，會 Debug 就好！如何靈活運用 Chrome DevTools 來開發網站/chrome-devtools](//images.ctfassets.net/8er52l3j5u76/3Sgn6cB9jGRVwILWnD27ML/e3b495046d2ecaa4422c3a68339b4a2b/chrome_devtools.png)

> 要啟動開發者工具，可以在網頁上按右鍵點擊，選擇 “檢查”，或是使用快捷鍵 Ctrl+Shift+I (Windows) 或 Cmd+Opt+I (Mac)

這套工具可以快速方便的從面板上，直接調整 `CSS` 的樣式或是 `HTML` 的結構，讓你很多時候不用修改原始碼，就可以先看修改後的效果

但除了調整 `CSS` 和 `HTML` 的功能以外，裡面還有一些可以加速你開發的小技巧，利用這些小技巧，可以增加開發的效率，減少解決問題的時間，而接下來的這篇文章，我將會用情境題的方式，來模擬出大家可能在開發網站時，會遇到的問題，並且解說如何使用 `Chrome DevTools` 來解決這些問題。

## 情境1: 好想要網頁上那個顏色阿，可是色碼好難找...

開發網站時，應該很常遇到我想要參考<strike>複製</strike>這個顏色，或是套用別人寫好的 framework 時，想要更改某個顏色，但色碼太多顏色太接近不知道怎麼找，這時候你可能會想，那我是不是可以去安裝類似像 `Photoshop`  顏色選取外掛？再不然就去翻原始碼呀

### 修但幾勒！

其實在 `Chrome Devtools` 已經內建 `color picker` 的功能，只要按照下面的步驟，就可以快速知道，在這個頁面上所有顏色的色碼是多少

![post-開發不難，會 Debug 就好！如何靈活運用 Chrome DevTools 來開發網站/color-picker](//images.ctfassets.net/8er52l3j5u76/4WY6HBPGLebUmDtHekFD1i/cf9b2ae0869d11c55646b556ae35a93b/color_picker.gif)

> 在右側的 `Styles` 樣式面板裡面，將滑鼠移到右下角點擊選單，出現選取器，將選取器移動到網頁上任何想要參考的顏色，並且點擊選取

## 情境2: 想要看某支 JavaScript/CSS 檔案，但都被壓縮(minify)過了耶

因為前端漸漸受到重視，網站開始包含許多 `CSS` 和 `JavaScript` 檔案，間接也影響到網站讀取的速度，如何在讀取速度與互動效果之間取得平衡，也是網站開發人員需要注意的課題，好在現在有許多方便的打包工具，可以將所有的 `CSS` 和 `JavaScript` 做壓縮打包，但這時候如果你去看每個網站的原始碼就會發現，這些檔案怎麼已經不是平常我們所熟悉的格式？

![post-開發不難，會 Debug 就好！如何靈活運用 Chrome DevTools 來開發網站/js-minify](//images.ctfassets.net/8er52l3j5u76/2Zsq1aUOoBjSFpfpR5vedM/227cf13c67a1fc6fda7778bacdff0448/js_minify.png)

最明顯的改變，就是去除掉了所有的註解、空白、換行，但如果因為某些原因，你想要閱讀裡面的程式碼，是不是就得要先下載下來，再去找網路上找工具做還原呢？

### 修但幾勒！

千萬不要繞那麼大一圈，只要像下面步驟一樣，運用 `Chrome Devtools` 內建的排版功能，就可以輕鬆展開閱讀

![post-開發不難，會 Debug 就好！如何靈活運用 Chrome DevTools 來開發網站/js-format](//images.ctfassets.net/8er52l3j5u76/M5uuegXiaYifLSNr8MK8a/bf36ef7dc46d9bd8a6067ab73f0a8be8/js_format.gif)

> 點擊 Sources 面板左下角的 `{}`，就會自動幫你排版完成，同樣的原理，`CSS` 檔案也是可以哦！

#### 冷知識: 更換變數

在看其他人的原始碼可能會發現，為什麼有些人的 `JavaScript` 的變數命名都用 `a`、`b`、`c` 這種看不出意義的名稱？我記得書本上不是都寫，變數命名要讓人容易理解嗎？

```javascript
function i(a, b, c) {
            b in a ? Object.defineProperty(a, b, {
                value: c,
                enumerable: !0,
                configurable: !0,
                writable: !0
            }) : a[b] = c;
            return a
        };
```

那是因為有一些軟體在壓縮 `JavaScript` 的過程中，會將一些不太重要的變數做替換，盡可能的縮短命名長度，畢竟字數多寡會直接影響檔案 loading 的速度，另一方面也可以達到混淆的效果，增加一點安全上的保護

## 情境3: 一直切來切去的，:hover 效果好難調整

如果有寫過 `:hover` 效果的人，應該知道在網頁的世界裡面，連結可以有很多種狀態，常見的像是 `:hover` 或是 `:active`， 善用這些狀態，會讓使用者清楚知道那些東西是可以點擊，那些東西曾經點擊過，但是對於要寫出這樣效果的人來說，為了要測試這些狀態，是不是只能不停的切換視窗點來點去呢？

### 修但幾勒！

同樣的，在 `Chrome Devtools` 打開 `Elements` 面板，點選你要的 `<a>` 元素，如下圖所示，就可以快速切換元素狀態

![post-開發不難，會 Debug 就好！如何靈活運用 Chrome DevTools 來開發網站/toggle-element](//images.ctfassets.net/8er52l3j5u76/2vLdtnyTqLkXZbfo7niHbQ/2a9a16d3422302f4589ae67b871cfdac/toggle_element_state.gif)

> 在面板右上角有一個 `:hov`，打開後就可以看到許多的元素狀態，點擊就可以做切換，更方便的是，在下方的 `Style` 樣式欄裡面，可以直接對現在的狀態，立即更改 `CSS` 樣式

## 情境4: 我想要知道延遲的效果，網路速度可以慢一點嗎？

相信大家對於 <a href="https://en.wikipedia.org/wiki/Ajax_(programming)" rel="nofollow noopener noreferrer" target="_blank" > Ajax </a> 並不陌生，在撰寫 `Ajax` 時，為了讓使用者知道現在正在等待資料當中，常會運用一些簡單的 `CSS` 效果，但往往因為可能開發環境的網路速度太快，才按一下資料就更新完成，根本看不到自己寫好的等待動畫，難道要為了看這個效果，在後端故意延遲傳送？<strike>或是同時下載電影來佔用頻寬</strike>

### 修但幾勒！

你可能不知道 `Chrome Devtools` 竟然連網路速度都可以模擬，按照下圖所示，就可以模擬出各種傳輸速度，更厲害的是，還可以自訂 `上傳/下載` 速率，想要有多慢就可以有多慢<strike>可惜不能想要有多快就有多快</strike>

![post-開發不難，會 Debug 就好！如何靈活運用 Chrome DevTools 來開發網站/slow-loading](//images.ctfassets.net/8er52l3j5u76/ifQvMd8WCtGr3BR2iYSX8/4be14ca4965ba473319c47736ca24b0e/slow_loading.gif)

> 點擊 `Network` 面板，點選 `Online` 的下拉選單，選取或是自訂網路速度，再按一次重新整理就可以感受到網路明顯變慢

## 情境5: 老闆要我做 RWD，但是尺寸那麼多怎麼測試？

5G網路的來臨，用手機來瀏覽網站已經是家常便飯的事情，更不用說還有各種大小的平板螢幕，為了讓每個尺寸都有最佳的瀏覽體驗，現今大多數的前端架構裡面都會包含 <a href="https://en.wikipedia.org/wiki/Responsive_web_design" rel="nofollow noopener noreferrer" target="_blank" > Responsive web design(簡稱RWD) </a>，但身為開發者的你，要如何測試多種尺寸大小的螢幕？嗯？不是用滑鼠拉一下視窗就好了嗎？

### 修但幾勒！

雖然拉視窗也是可以看出效果，但是你知道你目前所拉的視窗大小到底有多大嗎？更不用說現在螢幕尺寸的規格這麼多，這樣的測試方式非常沒有效率，還好 `Chrome Devtools` 一樣幫我們解決了這個問題

![post-開發不難，會 Debug 就好！如何靈活運用 Chrome DevTools 來開發網站/rwd](//images.ctfassets.net/8er52l3j5u76/49tKTnvIzxePILAz1pqVu8/bb6771a4af6cbe985fb03e85512a061e/rwd.gif)

> 在面板左上角有一個「手機和平板的小圖示」點下去後，在上方的 `Responsive` 選單裡可以挑選想要的尺寸大小，除了選單上面的螢幕規格以外，也可以按照自己的需求自訂

#### 小提示: 把兩個技巧組合在一起運用吧！

用這種調整尺寸的方式，再加上剛剛所說的降低網路速度，就可以模擬出手機用戶的網路速度來瀏覽你的網站，有些商業平台對於這種延遲體驗非常在乎，不希望使用者在一片空白的頁面等待太久，至少可以先出現網站的基本架構，圖片什麼的慢一點載入沒關係，但這並不是一定的標準，實際情況還是要看業主需求

## 情境6: 我不想清掉整個瀏覽器的 cookie，只想清除自己開發的網站，該怎麼辦？

這是曾經發生在自己身上的故事，在開發網站的過程中，製作會員系統時，忘記加上登出按鈕，結果臨時想登出卻無法登出，只好趕快把登出功能加上，但遇到這種情況時，其實也有另一種做法，就是把 `cookie` 清掉，但所謂的清掉 `cookie`，並不是要你清掉整個瀏覽器的 `cookie`，這樣做得後果會導致所有網站的登入紀錄都被清除，<strike>想到要一個一個重新登入就眼神死</strike> ，但一般來說，清掉 `coolie` 都要從瀏覽器的設定選單裡面找到...

### 修但幾勒！

雖然說可以去 `設定` 裡面清除某一個網站底下的 cookie，但使用起來並不是那麼方便，應該沒有人會想要一直開啟又關閉設定，好在 `Chrome Devtools` 一樣也提供方便的清除功能

![post-開發不難，會 Debug 就好！如何靈活運用 Chrome DevTools 來開發網站/clear-cookie](//images.ctfassets.net/8er52l3j5u76/l0BWl3sjOrgaUpX7P0wcQ/c77b2ebabb34cfb2c190910734c73946/clear_cookie.gif)

> 點選 `Application` 面板，在左側 `Storage` 底下有一個 `Cookies` (一個小餅乾的圖示)，點擊你要刪除的網站(如果是開發伺服器的話通常都是 `127.0.0.1` 或是 `localhost` 諸如此類)，就會在面板中間顯示你在這個網站所儲存的 `cookie`，按下清除即可

#### 溫馨小提示

一般來說並不會在 cookie 裡面存放使用者的敏感資訊，如果你發現了，可以寫信提醒網站開發人員<strike>或是快逃阿</strike>

## 結語: 工具只是輔助，如何靈活運用才是學問

以上所提到的六個小技巧，其實只是整個 Chrome Devtools 的冰山一角，在整個 Chrome Devtools 還包含了許多主題和功能，並不是一篇教學就可以敘述完全，裡面還有許多內容有待讀者去做探索，以我的習慣會不定時的打開面板摸索新功能，時常就會有，**"阿！原來 Chrome Devtools 有這個功能阿"** 的體悟，對於開發者來說，這些工具也只是個輔助，但學會如何靈活運用這些工具，往往會決定在開發的這條道路上，會不會更有效率

希望大家會喜歡這篇文章，也歡迎大家在下面分享，其他可以加快開發速度的小技巧

## 參考資料
<a href="https://en.wikipedia.org/wiki/Responsive_web_design" rel="nofollow noopener noreferrer" target="_blank" >Chrome DevTools - 20+ Tips and Tricks</a>

<a href="https://developers.google.com/web/tools/chrome-devtools?hl=zh-tw" rel="nofollow noopener noreferrer" target="_blank" >Chrome 開發者工具</a>

post-開發不難，會 Debug 就好！如何靈活運用 Chrome DevTools 來開發網站/Cover

開發不難，會 Debug 就好！如何靈活運用 Chrome DevTools 來開發網站

(Photo by <a href="https://labs.clio.com" rel="nofollow noopener noreferrer" target="_blank">Clio Labs</a> on <a href="https://labs.clio.com/removing-string-literals-in-sql-with-arel-776d01594c1c" rel="nofollow noopener noreferrer" target="_blank">Medium</a>)

本篇文章主要是在說明如何在 Rails 中 使用 `Arel` 來做資料查詢, 以及解釋為何要使用 Arel 來操作的原因

使用的開發環境設置如下:

- Rails: `6.0.3`
- Ruby: `2.7.1`

## Arel sql

<a href="https://github.com/rails/arel" rel="nofollow noopener noreferrer" target="_blank">Arel</a> (A Relational Algebra) 是 Ruby 的一種 SQL 抽象語法樹（Abstract Syntax Tree-like, AST）管理器, 允許開發者可以在 Rails 中寫複雜的 SQL 查詢語法.

## 為何使用 Arel sql

為了節省不必要的資料撈取, 我們可能會在 Rails 中使用 `pluck` 的方式, 來選取需要的欄位資料.

```ruby
Task.all.pluck([:id, :title])
```

但在執行時, 會在 console 中看到了以下的警示訊息. 雖然資料正常的撈取回來, 並且不影響程式執行.

```shell
DEPRECATION WARNING: Dangerous query method (method whose arguments are used as raw SQL) called with non-attribute
argument(s):  [:id, :title]. Non-attribute arguments will be disallowed in Rails 6.1.
This method should not be called with user-provided values, such as request parameters or model attributes.
Known-safe values can be passed by wrapping them in Arel.sql(). (called from irb_binding at (irb):35)
```

為何會出現這個訊息呢? 原來是 <a href="https://github.com/rails/rails/pull/27947/files" rel="nofollow noopener noreferrer" target="_blank">Rails</a> 已經在版本 5.2 時, 就將部分的 `raw sql` 的查詢方式列為有潛在風險.

會在開發者使用時提醒開發者, 這樣的方式是存在著潛在的 `SQL Injection` 的風險, 並且建議使用 `Arel sql` 的方式來進行資料檢索.

另外, 提示訊息中也有補充說明到, 在 Rails 6.1 版本時, 這樣的操作方式可能就會無法執行.

> 什麼樣的 ActiveRecord 操作方法會造成的 `SQL Injection`,  詳情可以參閱 <a href="https://rails-sqli.org/" rel="nofollow noopener noreferrer" target="_blank">Rails SQL Injection Examples</a>

## 使用 Arel sql 檢索資料

在 Rails 中, 可以使用兩種方式來做資料查詢.

第一種是直接透過 `Arel.sql` 的方式來指定所需要的欄位

```ruby
Task.all.pluck(Arel.sql('id, title'))

```

第二種是使用 `arel_table` 的方式來查詢資料.

```ruby
table = Task.arel_table
Task.all.pluck(table[:id], table[:title])
```

若要在 Model 中來使用的話, 可以參考以下的方式, 在 scope 中直接使用 `arel_table` 來操作查詢.

```ruby
class Task < ApplicationRecord
  scope :get_id_title, -> { pluck(arel_table[:id], arel_table[:title]) }
end
```

### Arel 其他操作方式

舉例, 如果要找尋任務開始日期為 `2020-07-14` 之後的搜尋條件, 可能會使用以下的操作方式.

```ruby
Task.where("start_date >= ?", Date.parse('2020-07-14'))

# or

Task.where(start_date: Date.parse('2020-07-14')..Float::INFINITY)
```

而 Arel 提供許多方式, 可以方便地來進行資料檢索.

這邊就可以改用 `arel_table` 來進行欄位條件設定.

```ruby
table = Task.arel_table
Task.where(table[:start_date].gteq(Date.parse('2020-07-14')))
```

如果要看更多 Arel 提供的檢索方式, 可以參考 <a href="https://qiita.com/akicho8/items/c3bfd39213d6e9843e4f" rel="nofollow noopener noreferrer" target="_blank">arel_table 的檢索條件</a>.

### 使用 Arel 轉換 SQL 複雜的搜尋

這邊用一個簡單的情境來做說明如何使用 `arel_table` 來做複雜搜尋

情境: 使用者有很多任務, 且任務可以標記很多標籤, 而 Model 關聯設定如下.

```ruby
class User < ApplicationRecord
  has_many :tasks
end

class Task < ApplicationRecord
  belongs_to :user
  has_many :taggings
  has_many :tags, through: :taggings
end

class Tagging < ApplicationRecord
  belongs_to :tag
  belongs_to :task
end

class Tag < ApplicationRecord
  has_many :taggings
  has_many :tasks, through: :taggings
end

```

假設管理者想知道所有使用者的任務, 從任務開始日 `2020-07-14` 的所有任務中, 總共使用了多次標籤.

這邊就會考慮先用 ras sql 來確認資料結構.

```sql
SELECT
  USERS.*,
  TOTAL_TAGGINGS.TAGGINGS_COUNT
FROM
  "USERS"
INNER JOIN (
  SELECT
	  "TASKS"."USER_ID",
	  COUNT("TAGGINGS"."TAG_ID") AS TAGGINGS_COUNT
  FROM "TASKS"
  INNER JOIN "TAGGINGS"
  ON "TASKS"."ID" = "TAGGINGS"."TASK_ID"
  AND "TASKS"."START_DATE" >= '2020-07-14'
  GROUP BY "TASKS"."USER_ID"
) TOTAL_TAGGINGS
ON "USERS"."ID" = TOTAL_TAGGINGS."USER_ID"
ORDER BY TOTAL_TAGGINGS.TAGGINGS_COUNT DESC
```

接著再開始使用 `arel_table` 轉換上述的 `raw sql` 語法.

轉換的流程這邊會以由內而外的方式, 將整段 SQL 語法作轉換處理.

從內部的 JOIN 語法，可以看到，Task 與 Tagging 除了 JOIN 之外, 還有設定日期條件以及 GROUP BY 的方式.

```ruby
INNER JOIN (
  SELECT
	  "TASKS"."USER_ID",
	  COUNT("TAGGINGS"."TAG_ID") AS TAGGINGS_COUNT
  FROM "TASKS"
  INNER JOIN "TAGGINGS"
  ON "TASKS"."ID" = "TAGGINGS"."TASK_ID"
  AND "TASKS"."START_DATE" >= '2020-07-14'
  GROUP BY "TASKS"."USER_ID"
) TOTAL_TAGGINGS
```

因此, 這邊只需要用到 Task 與 Tagging 的 Model, 透過相對應的語法來做轉換.

而 `.project` 代表的是撈取得欄位, `.as` 則代表命名一個名稱, 後續就改使用這個名稱做應用

```ruby
  def total_taggings
    @total_taggings ||= begin
      tasks = Task.arel_table
      taggings = Tagging.arel_table
      tasks.join(taggings).on(tasks[:id].eq(taggings[:task_id])
                              .and(tasks[:start_date].gteq(Date.parse(start_date))))
            .project(tasks[:user_id], taggings[:tag_id].count.as('taggings_count'))
            .group(tasks[:user_id])
            .as('total_taggings')
    end
  end

```

接著再透過上面已經處理好的對應結構與 User 來做 JOIN.

這邊可以看到, 在 join 這段程式碼有使用到 `join_sources` 這個語法. 這是因為目前整段語句都是 Arel Table 的結構,

而最後要與 ActiveRecord 搭配使用, 就必須使用 `join_sources` 將整個結構做轉換.

```ruby
  def join_clause
    @join_clause ||= begin
      users = User.arel_table
      users.join(total_taggings).on(users[:id].eq(total_taggings[:user_id])).join_sources
    end
  end

```

接著將所有轉換的語法搭配 User 串接使用. 整個完整的轉換內容如下.

```ruby
# frozen_string_literal: true
class UserTaggings < Struct.new(:start_date)
  def fetch
    User.joins(join_clause)
      .select('users.*, total_taggings.taggings_count')
      .order('total_taggings.taggings_count DESC')
  end

  private

  def join_clause
    @join_clause ||= begin
      users = User.arel_table
      users.join(total_taggings).on(users[:id].eq(total_taggings[:user_id])).join_sources
    end
  end

  def total_taggings
    @total_taggings ||= begin
      tasks = Task.arel_table
      taggings = Tagging.arel_table
      tasks.join(taggings).on(tasks[:id].eq(taggings[:task_id])
                              .and(tasks[:start_date].gteq(Date.parse(start_date))))
            .project(tasks[:user_id], taggings[:tag_id].count.as('taggings_count'))
            .group(tasks[:user_id])
            .as('total_taggings')
    end
  end
end

```

要怎麼使用 `UserTaggings` 呢? 這邊可以先在 `Rails console` 中, 使用下列方式來做資料查詢.

```ruby
UserTaggings.new('2020-07-14').fetch
```

確認沒問題之後, 後續再應用在程式碼之中吧!

## 總結

運用 `arel_table` 將複雜的 SQL 拆解成程式碼, 主要目的是為了降低與 `raw sql` 的耦合, 且可以配合單元測試進行驗證.

未來在因需求調整時, 也可以方便擴充使用. 而不在只是字串(String) 到處串來串去.

當然也是有缺點, 就是查詢語法相當複雜的時候, 要使用 Arel 的話會非常費時. 且可能程式碼的複雜度會大大提升.

以下列出使用 Arel sql 的優缺點比較, 提供給大家做參考.

優點

- 使用 Ruby 語法, 而不是 String
- 可重複使用 Arel 的表達式
- 容易撰寫測試程式進行驗證

缺點

- 比較難閱讀
- 冗余的程式碼
- 出錯時不容易 debugging

此篇文章同步發佈在我的[技術部落格](https://lancerabbit.github.io/2020/07/19/use-arel-sql-in-rails/)

## 參考資料

1. <a href="https://www.gapintelligence.com/blog/how-to-build-complex-queries-using-arel/" rel="nofollow noopener noreferrer" target="_blank">How to build complex queries using Arel - gap intelligence</a>

2. <a href="http://danshultz.github.io/talks/mastering_activerecord_arel/#/" rel="nofollow noopener noreferrer" target="_blank">Mastering ActiveRecord and Arel</a>

3. <a href="https://rails-sqli.org/" rel="nofollow noopener noreferrer" target="_blank">Rails SQL Injection Examples</a>

4. <a href="https://qiita.com/akicho8/items/c3bfd39213d6e9843e4f" rel="nofollow noopener noreferrer" target="_blank">arel_table 的檢索條件</a>

---

>  👩‍🏫  __課務小幫手：__
>  
> ✨ 想掌握 Ruby on Rails 觀念和原理嗎？
>
> 我們有開設 🏓 [Ruby on Rails 實戰課程](https://5xruby.tw/courses/ruby-on-rails) 課程唷 ❤️️
>


post-如何在 Rails 中使用 Arel SQL/cover

如何在 Rails 中使用 Arel SQL

## 前言

在軟體工作中，經常要對文字做處理，例如資料的搜尋、擷取並重組文字、驗證使用者輸入等等，遇到這類與字串有關的問題，依情況使用正規表達式可以免去很多處理上的麻煩，使程式碼更簡單好懂。
這篇文章將帶你用 15 分鐘的時間，透過 [MDN文檔](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Guide/Regular_Expressions) 與幾個常見的例子，帶你初步認識並使用這門技術，我們話不多說直接開始吧！

## 什麼是正規表達式 ?

正規表達式 (Regular Expression)，是一種用來描述字串 `符合某個語法規則` 的模型 (pattern)，可以用來做文字的搜尋、比對、萃取、替代、轉換等等，在許多的程式語言中都支援正規表達式的使用，以下範例將以 Javascript 為例。

## 撰寫正規表達式

撰寫正規表達式時，使用兩個斜線 `/ /` 或是  `new RegExp()` 來建立一個 RegExp 物件。

```javascript
// 1. 使用 literal，這種方式會在 script 載入時就被編譯，效能較好。
const regex = /some text/

// 2. 使用 new 建構一個 RegExp 物件，適合用在需要動態產生 pattern 的場合。
const regex = new RegExp('some text')

// 加上 flag 設定，使比對的能力更強大。i：不區分大小寫，g：比對字串所有位置
const regex = /some text/i
const regex = new RegExp('some text', 'g')
```

## 使用正規表達式

建立了正規表達式後，就可以使用 `RegExp 物件`中 `test` 以及 `exec` 來對字串做處理囉。

```javascript
const regex = /hello world/i

// 使用 test 比對字串是否符合 pattern，回傳 boolean
regex.test('Hello World !!') // true

// 使用 exec 取得比對的詳細資訊，比對失敗時回傳 null
regex.exec('Hello World !!') // ["Hello World", index: 0, input: "Hello World !!", groups: undefined]
regex.exec('Hello Regex !!') // null
```

在 `String 物件` 中的 `search`、`match`、`replace`、`split` 等方法中，也有支援正規表達式寫法。

```javascript
const paragraph = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.'

// 使用 search 搜尋字串是否在段落中，有找到回傳字串的起始位置，沒找到回傳 -1
paragraph.search('tExT') // -1
paragraph.search(/tExT/i) // 28

// 使用 match 找出第一個比對成功的詳細資訊，加上 g flag 則會列出所有比對成功的字串
paragraph.match(/ing/) // ["ing", index: 45, ...]
paragraph.match(/ing/g) // ["ing", "ing"]
```

## 特殊字元
在正規表達式中，某些特定的字元或符號屬於保留字，直接使用可能與預期的效果不同。

```javascript
const  str ='Rails is a web framework written in Ruby'

// ^ 表示 pattern 必須在字串的開頭
str.match(/^Rails/) // ["Rails", index: 0, ...]
str.match(/^Ruby/) // null

// $ 表示 pattern 必須在字串的結尾
str.match(/Ruby$/) // ["Ruby", index: 36, ...]
str.match(/Rails$/) // null

// | 表示 或(or)， | 前後的字串都可以比對
const regex = /color|colour/
regex.exec('color') // ["color", index: 0, ...]
regex.exec('colour') // ["colour", index: 0, ...]

// 當要比對這些特殊符號時，使用反斜線'\'來跳脫特殊字元
const regex = /\$100/
regex.test('$100') // true
```

## 集合 `[]`

在前面的例子中，`pattern` 都有指定明確的文字，如果想要比對的是英文、數字或是幾種特定的組合，就可以使用集合 `[ ]` 來將它們一網打盡，集合代表著 `這一個字元` 可以是 `[ ]` 內的其中一種。

```javascript
// 只要是英文大寫字母，就比對成功
const regex = /[ABCDEFGHIJKLMNOPQRSTUVWXYZ]/
'K'.match(regex) // ["K", index: 0, ...]
'δ'.match(regex) // null

// 可以使用 '-' 來簡化集合，'A-Z' 表示英文字母 A ~ Z 都符合
const regex = /[A-Z]/

// 若要比對的是英文或數字，可以這樣表示
const regex = /[A-Za-z0-9]/
```

一些常用的集合有對應的特殊字元。

```javascript
const regex = /./   // 比對換行符號外的任意一個字元
const regex = /\d/  // 比對一個數字，相等於 /[0-9]/
const regex = /\w/  // 比對一個英文、數字或底線，相等於 /[A-Za-z0-9_]/
const regex = /\s/  // 比對一個的空格 (ex: space, tab, 換行, ...)
```

使用排除法 `[^ ]` 來比對這個集合 `以外` 的字元

```javascript
const regex = /[^\w]/
regex.test('a') // false
regex.test('!') // true
```

## 量詞 `{}`

在集合的內容中我們提到，使用集合一次也只能比對一個文字，此時，若我們想比對連續的相同規則時，可以使用量詞 `{ }` 來修飾。

```javascript
// 不使用量詞時，要比對 5 個連續的數字就必須寫 5 次
const regex = /\d\d\d\d\d/
regex.test('12345') // true

// 使用 {5} 表示連續出現 5 次
const regex = /\d{5}/
regex.exec('abcde12345') // ["12345", index: 5, ...]
regex.exec('a1b2c3d4e5') // null

// 使用 {2,} 表示連續出現 2 次以上
const regex = /\w\+{2,}/
regex.exec('a+') // null
regex.exec('a++') // ["a++", index: 0, ...]

// 使用 {2, 5} 表示連續出現 2 ~ 5 次
const regex = /^\w{2,5}!/
regex.exec('Hi!') // ["Hi!", index: 0, ...]
regex.exec('Helloooo!') // null
```

量詞也有特殊字元可以替代。

```javascript
// 使用 ? 表示出現 0 或 1 次，等同於 {0,1}
const regex = /\w?/
// 使用 + 表示出現 1 次或以上，等同於 {1,}
const regex = /\w+/
// 使用 * 表示出現 0 次或以上，等同於 {0,}
const regex = /\w*/
```

使用上，`+`、`?`、`*`、`{2, 5}` 都是屬於 `Greedy 量詞`，意思是會以連續出現次數 `越多` 為優先，相反的，在量詞後面加上一個問號 `+?`、`??`、`*?`、`{2, 5}?` 就變成 `Lazy 量詞`，意思是以連續出現次數 `越少` 為優先。

```javascript
// '+' 出現的次數越多優先
const regex = /a\+{2,}/
regex.exec('a+++++') // ["a+++++", index: 0, ...]
// '+' 出現的次數越少優先
const regex = /a\+{2,}?/
regex.exec('a+++++') // ["a++", index: 0, ...]
```

## 練習1
看到這裡，已經可以使用正規表達式來做一些處理了，讓我們來練習一下。

### 1 使用正規表達式來檢驗日期格式是否正確。

```javascript
// 假設正確的日期格式為 '2020/07/15'
// 分析一下是由 "4個數字/2個數字/2個數字" 所組成，
// 把這個規則寫成正規表達式
const regex = /\d{4}\/\d{2}\/\d{2}/

// 若要支援'2020/07/15'、'2020-07-15'兩種寫法，可以使用集合來處理
const regex = /\d{4}[/\-]\d{2}[/\-]\d{2}/
regex.test('2020/07/15') // true
regex.test('2020-07-15') // true
```

### 2 使用正規表達式解析 excel 複製來的資料。

```javascript
// 假設使用者在 excel 選取了 'sn0001'、'sn0002'、'sn0003' 三個欄位
// 分析一下我們要的每一筆資料是由 "連續的英文或數字" 所組成
// 把這個規則寫成正規表達式
const regex = /[A-Za-z0-9]+/

// 在複製文字的時候會發現，除了流水號之外，分隔、換行符號也一起被複製了進來
// 用 replace 去 trim 掉不需要的字元在處理上比較麻煩
// 改使用 match 一次取出所有資料，並轉成陣列供後續使用
const copiedData = `
					sn001,
				    sn002,
				    sn003
				  `
copiedData.match(/[A-Za-z0-9]+/g) // ["sn001", "sn002", "sn003"]
```

### 3 使用正規表達式找出被 `* *` 包起來的片段。

```javascript
const paragraph= "Lorem Ipsum is simply dummy text of the *printing* and *typesetting* industry."
// 分析一下我們要的資訊是由 '*' + 任意內容 + '*' 所組成
// 把這個規則寫成正規表達式
const regex = /\*.*\*/g
paragraph.match(regex) // ["*printing* and *typesetting*"]

// 執行之後會發現結果不如預期
// 原因在於中間的任意內容我們是使用 Greedy量詞 '*' 去比對，也就是任意字元且越多越好
// 改使用 Lazy 量詞就能獲得想要的結果
const regex = /\*.*?\*/g
paragraph.match(regex) // ["*printing*", "*typesetting*"]
```

這裡小結一下，在上面的內容中，我們已經學會使用正規表達式來做簡單的搜尋與比對了，如果我想要把日期 `2020/07/15` 轉換成 `2020年07月15日` ，或是要將數字 `123456789` 加上三位一撇 `123,456,789` 該怎麼做呢？

下面我們將繼續介紹正規表達式中的 `群組` 以及 `斷言` 功能。

## 群組 (Capturing Group)

使用正規表達式時，除了比對文字外，也可以透過使用 `Group` 來捕獲特定的文字，被捕獲的文字會出現在比對的結果中，提供後續的程式使用。

```javascript
// 在使用 exec、match 等方法時，回傳的結果會有以下這些資訊
// [比對成功的字串, 捕獲的字串1, 捕獲的字串2, ..., 字串的起始位置, 命名的捕獲群組]
const regex = /user: (\w+)/
regex.exec('user: Alan') // ["user: Alan", "Alan", index: 0, ...]

// 每一個 Group 會 '由左至右，由外而內' 的被賦予編號，並被放在執行結果相應的 index 中
// 假設 regex = /((A)(B))/ ，那麼群組就分別是 1:(AB), 2:(A), 3:(B)
const regex = /fullName: ((\w+) (\w+))/
regex.exec('fullName: Alan Hsu') // ["fullName: Alan Hsu", "Alan Hsu", "Alan", "Hsu", ...]
```

如果想要比對的是重複出現的內容，可以使用反向參考 `backreference` 來代替已被捕獲的文字。

```javascript
// 假設想找出猜數字中 a 和 b 出現次數相同的回合
// 作法1 → 我們可以先把 a 與 b 的次數 Group 起來，再做判斷
const regex = /(\d+)a(\d+)b/
const result = regex.exec('1a1b') // ["1a1b", "1", "1", ...]
if (result[1] === result[2]) ...

// 作法2 → 使用 backreference，讓 \1、\2、... 替換成被捕獲的數字
const regex = /(\d+)a\1b/
regex.test('1a1b') // true
regex.test('1a2b') // false
```

捕獲的文字在使用上需要透過計算群組的編號來取得，反應在程式碼上並不是那麼語意化，這時我們可以改使用 `命名群組 (?<name> )` 來替群組命名， 反向參考的用法改為 `\k<name>` 。

```javascript
// 假設要抓出使用者的 firstName 與 lastName
const regex = /fullName: (?<firstName>\w+) (?<lastName>\w+)/
regex.exec('fullName: Alan Hsu') // [...,  groups: {firstName: "Alan", lastName: "Hsu"}]
```

群組也能搭配 `|` 或是 `量詞` 一起使用。

```javascript
// 使用群組簡化 | 的寫法
const regex = /good apple|bad apple/
const regex = /(good|bad) apple/

// 使用量詞簡化重複的規則
const regex = /\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}/
const regex = /(\d{1,3}\.){3}\d{1,3}/
regex.exec('192.168.0.1') // ["192.168.0.1", "0.", index: 0, ...]
```

如果捕獲的文字不是那麼重要，則可以改使用 `non-capturing group (?: )` 來撰寫。

```javascript
// 使用 non-capturing group，(?: )內的文字就不會被捕獲，也就無法使用 backreference
const regex = /(?:\d{1,3}\.){3}\d{1,3}/
regex.exec('192.168.0.1') // ["192.168.0.1", index: 0, ...]
```

## 斷言 (Assertions)

最後一個要介紹的主題是斷言 ，根據維基百科的解釋，
> 斷言是一種放在程式中的一階邏輯 ( 例如一個結果為 true 或 false 的判斷式 ) ，當程式執行到斷言的位置時就會執行判斷，若結果為 true 則繼續執行，結果為 false 則中止執行。

在正規表達式中，斷言可以用來指定字串中的某個錨點要符合一些條件，例如前面介紹的特殊字元 `在字串開頭 ^`、`在字串的結尾 $` 就是被歸類在斷言的用法中，常見的斷言還有 `文字邊界 \b` 與 `環顧 Lookaround` 。

```javascript
// 假設要找出 'Java' 而不是 'Javascript'
const str = 'difference between Javascript and Java.'
// 不使用斷言會找到 'Javascript' 的 'Java'
str.match(/Java/) // ["Java", index: 19, ...]
// 改使用文字邊界 \b 來比對，就能找到想要的結果了
str.match(/\bJava\b/) // ["Java", index: 34, ...]

// 文字邊界指的是在比對到 \b 的位置時，前後相鄰的字元必須有一個不是文字
// 使用 replace 把 \b 替換成 '|' 來看看它的效果
const regex = /\b/g
str.replace(regex, '|') // "|difference| |between| |Javascript| |and| |Java|."
```

字串與錨點的描述，建議到 regex101 實際操作一下，配合網站的視覺效果可以更好的理解它，如果想要判斷的是更複雜的條件，可以使用 `環顧 Lookaround` 。

```javascript
// Lookaround 分為兩種 `Lookahead` 以及 `Lookbehind`，各自又有 positive 與 negative 兩種判斷方式
// Positive Lookahead： A(?=B) → A 後方的條件要符合 B
// Negative Lookahead： A(?!B) → A 後方的條件不能符合 B
// Positive Lookbehind： (?<=A)B → B 前方的條件要符合 A
// Negative Lookbehind： (?<!A)B → B 前方的條件不能符合 A

// 假設要取出商品的金額
const str = '數量 2,實付金額 990元'
// 分析一下要擷取的資料 "前方有一個空格 + 金額 + 後方有一個'元'"
// 把規則寫成正規表達式
const regex = /(?<=\s)\d+(?=元)/
str.match(regex) // ["990", index: 10, ...]
```

要注意的是，斷言與群組的語法雖然很像，但是斷言的條件不會出現在比對的結果中，所以在正規表達式中也被稱為 Zero-Length Assertions。

## 練習2
最後我們再來做幾個練習。

### 1 使用正規表達式來轉換日期。

```javascript
// 將日期 '2020/07/15' 轉換為 '2020年07月15日'
const date = '2020/07/15'
// 使用 group 把年、月、日抽取出來
const regex = /(\d{4})\/(\d{2})\/(\d{2})/
// 使用 replace + backreference 轉換字串
// 在 replace 中是使用 $1、$2、... 替代群組捕獲的文字
date.replace(regex,'$1年$2月$3日') // "2020年07月15日"

// 使用命名群組讓程式碼更好讀
// 在 replace 中是使用 $<name> 替代命名群組捕獲的文字
const regex = /(?<year>\d{4})\/(?<month>\d{2})\/(?<day>\d{2})/
date.replace(regex,'$<year>年$<month>月$<day>日') // "2020年07月15日"
```

### 2 使用正規表達式幫數字加上三位一撇 (separator)。

<strike>其實可以直接用 toLocaleString( )</strike>

```javascript
const number = 123456789 // 123,456,789
// 分析一下條件，從個位數開始數，每三位數加上一個','
// 使用非文字邊界 \B 與 Lookahead 來撰寫條件，判斷右邊每 3 個數字為錨點
const regex = /\B(?=(?:\d{3})+)/g
number.toString().replace(regex, ',') // "1,2,3,4,5,6,789"

// 發現結果不如預期，從數字 5 開始往右數三個數字也符合條件
// 在 Lookahead 裡再加上一個 Negative Lookahead
// 判斷每湊滿 3、6、9、... 個數字之後，右邊不能再有其他數字
const regex = /\B(?=(?:\d{3})+(?!\d))/g
number.toString().replace(regex, ',') // "123,456,789"
```

### 3 使用正規表達式限制使用者只能輸入英文與數字

```javascript
// 分析一下條件，每個字元都只能是英文與數字
// 反過來說就是要 trim 掉不是英文與數字的字元
const value = e.target.value
this.value = value.replace(/[^A-Za-z0-9]/g, '')
```

## 總結

正規表達式這項技術除了在 web 開發上常被使用之外，在爬蟲、數據分析等應用也用得上，本期文章使用十五分鐘的時間帶大家初步認識正規表達式的用法，更多的內容例如比對的優先順序、多重條件的撰寫、正規表達式的效能等主題可以透過 [MDN文檔](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Guide/Regular_Expressions) 、網路搜尋或是相關的書籍來做進一步的學習，以上就是這次的全部內容，若有錯誤或需要補充的部分還請不吝指出，感謝你的收看 : )

## 參考資料

- [正規表達式- JavaScript | MDN](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Guide/Regular_Expressions)
- [regex 101](https://regex101.com/)
- [斷言 - Wiki](https://zh.wikipedia.org/wiki/%E6%96%B7%E8%A8%80_(%E7%A8%8B%E5%BC%8F))
- [Number with commas - StackOverflow](https://stackoverflow.com/questions/2901102/how-to-print-a-number-with-commas-as-thousands-separators-in-javascript)
- [Google](https://www.google.com)

---

>  👩‍🏫  __課務小幫手：__
>  
> ✨ 想掌握 JavaScript 觀念和原理嗎？
>
> 我們有開設 📒 [JavaScript / jQuery 前端開發入門實戰](https://5xruby.tw/courses/javascript) 課程唷 ❤️️
>

post- 十五分鐘認識正規表達式，解決所有文字難題/cover

十五分鐘認識正規表達式，解決所有文字難題

React 是 Facebook 2013 年推出的 Javascript 的框架，這篇文章是針對 React component 的重構，對 React 就不多做介紹。Tailwind 是 2017 年正式發佈的 CSS 框架，提供一堆超基本的  class，例如：`font-bold`、`text-white`、`float-right`，這些 class 只要會 CSS 的人一看就懂，非常明確而且容易上手。

個人覺得使用 Tailwind 的好處是提供了一份定義完整的 CSS class 統一命名文件，人人都可以很清楚知道自己和別人在寫什麼，例如：`text-black`，不會被某人定義成 `t-black` 或更簡短但意味不明的 `t-b`，雖然可以少打幾個字母，但卻會造成未來維護上的困難，尤其是文件沒做好的話，就會需要更多時間來理解這個 class 後面所帶有的屬性，會造成隊友的痛扣。另外 Tailwind 和現在流行的前端框架，例如： React、Vue、Angular、Ember 等等都能整合的很好，非常推前端工程師撿起來用。

Tailiwnd 一大特色是全部 class 都 inline 寫在 HTML 標籤 上，例如：

```
<button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Enable
</button>
```

這個 HTML 的 `button` 標籤從頭看到尾就能看出個這個按鈕大概長什麼樣子，但整個網站都這樣全部 inline，當網站大了之後要維護起來也會相當辛苦。所以如果是一些網站中常用的元件，就可以試著做成可重複使用的 component 把一大串的 class 轉成清楚明瞭語義化的 props，如下：

```
<Button size="xs" textColor="white" bgColor="blue-500">
  Enable
</Button>

// Button.jsx
function Button ({size, bgColor, textColor, children}) {
  return (
    <button className=`text-${size} bg-${bgColor} text-${textColor} font-bold py-2 px-4 rounded`>
    {children}
  </button>
  )
};

export default Button;
```

兩段程式碼的差異是第一段，直接用 HTML 的 `button` 標籤加上 inline class，第二段是另外包成一個 `Button.jsx` component，用 props 取代原本寫 class 名稱的方式來設定的按鈕，例如： size、 textColor、bgColor，程式碼的可讀性提昇許多也方便重複使用。

## 搭配 classnames 讓 react component 有點互動感

[classnames](https://www.npmjs.com/package/classnames) 是一個 JavaScript 的小工具，可以用來幫忙處理一些簡單的邏輯判斷把 classNames 串在一起。

classnames 提供了一個 `classNames` 的 function，`classNames` 可以接受傳入 N 個 string 或是 object 參數，然後生出一整段字串。

參數說明：

- object：如果 key-value 裡的 key 給的 value 是 falsy 值 (例如：false、null、0、undefined…) 的話，這個 key 就不會被留著。

- string：`foo` 等於 `{ foo: true }`。

```
// 用法如下：
classNames('foo', 'bar'); // => 'foo bar'
classNames('foo', { bar: true }); // => 'foo bar'
classNames({ 'foo-bar': true }); // => 'foo-bar'
classNames({ 'foo-bar': false }); // => ''
classNames({ foo: true }, { bar: true }); // => 'foo bar'
classNames({ foo: true, bar: true }); // => 'foo bar'

// lots of arguments of various types
classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }); // => 'foo bar baz quux'

// other falsy values are just ignored
classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); // => 'bar 1'
```

有了 `classnames` 可以對 React component 的 class 做一些簡單的控制。舉一個網站也很常用到的下拉式選單 Dropdown，這個 `Dropdown` 已經包成只要給選項 (options) 和點選之後要執行的動作 (onOptionsSelect) 就可以重複使用的 component；然後在 `Dropdown` 裡面定義了按鈕和選單的樣式設定，

```
<Dropdown
  options={\["Edit", "Duplicate", "Archive", "Move", "Delete"\]}
  onOptionSelect={(option) => {
    console.log("Selected Option", option)}
  }
/>
```

`Dropdown` 這邊用了 Tailwind 的 `.hidden` 和 `.block` 控制下拉選單的顯示與否，按下 `<button>` 的時候，觸發 `onClick` 事件，改變 `isActive` 的狀態，選單的部份再對應 `isActive` 顯示或隱藏。

```
import classNames from 'classnames';

function Dropdown({ options, onOptionSelect }) {

  // 用 useState 設定 isActive 的狀態
  const [isActive, setActive] = useState(false);

  const buttonClasses = `inline-flex justify-center w-full rounded-md border border-gray-300 px-4 py-2 bg-white text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-blue-500 active:text-gray-200 transition ease-in-out duration-150`;

  return (
    <button onClick={() => setActive(!isActive)} className={buttonClasses}>
      Options
    </button>
    // 用 classnames 來控制 .block 和 .hidden class
    <div class={classNames("origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg", {
      block: isActive,
      hidden: !isActive
    })}>
    // 選項列表
    {options.map((option) => <div key={option} onClick={(e) => onOptionSelect(option)}>{option}</div>)}
   </div>
  )
}

export default Dropdown;
```

## 網站視覺設計系統

另一個重構的方式是按照網站視覺設計系統把常用的 component 樣式先集中定義在一個檔案裡面，然後再包成具有語義化且可重複使用的 component。

例如：把 Tailwind 的 class 另外寫在 `theme.js` 裡面，寫 component 的時候只要呼叫 `theme.js` 已經定義好的樣式，這樣 component 檔案裡面的程式碼就會更乾淨一點。

```
// theme.js 可以取自己喜歡的名稱
export const ButtonType = {
  primary: "bg-blue-500 hover:bg-blue-700 text-white font-bold rounded",
  secondary: "bg-blue-500 hover:bg-blue-700 text-white font-bold rounded",
  basic: "bg-white hover:bg-gray-700 text-gray-700 font-bold rounded",
  delete: "bg-red-300 hover:bg-red-500 text-white font-bold rounded"
};

export const ButtonSize = {
  sm: "py-2 px-4 text-xs",
  lg: "py-3 px-6 text-lg"
}
// 看命名就知道，`ButtonType`：定義按鈕的樣式。`ButtonSizes`：定義按鈕的尺寸。
```

定義一個 `Button`， import 剛剛的 `theme.js`：

```
import { ButtonType, ButtonSize } from './theme';

function Button({size, type, children}) {
  const classNames = `${ButtonType[type]} ${ButtonSize[size]}`;
  return (
    <button className={classNames}>{children}</button>
  )
}
export default Button;
```

這樣 `Button` 用起來就可以很清楚他是哪一種按鈕和什麼尺寸，非常簡潔明瞭。

```
// 清楚判斷按鈕的屬性
<Button size="sm" type="primary">Enable</Button>

// 最後顯示在 html 會長成這樣
<button className="py-2 px-4 text-xs bg-blue-500 hover:bg-blue-700 text-white font-bold rounded">Enable</button>
```

如果需要更改按鈕樣式就修改 `theme.js`，就能全部的按鈕一起換，不用一個一個撈出來改。這樣打造一套網站的常用的 components 有助於提昇維護的效率，在未來換專案的時候，只要改成相對應的 class  所有東西都可以帶著一起走，加速專案開發的速度。

## 在 CSS 檔裡面用 Tailwind classes：`@apply`

第三個方法是過去寫 CSS class 的方式，然後在 Tailwind classes 前面加上 `@apply`， `@apply` 可以透過 [PostCSS](https://postcss.org/) 把 Tailwind 的 class 編譯成 CSS。例如現在專案有一套 UI 元件，裡面有一個主要按鈕 (Primary) 和次要按鈕 (Secondary)，如果沒有任何的處理直接把 Tailwind class 的塞在元件裡面會長成下面這樣：

```
<button className="py-2 px-4 mr-4 text-xs bg-blue-500 hover:bg-blue-700 text-white font-bold rounded">Update Now</button>

<button className="py-2 px-4 text-xs mr-4 hover:bg-gray-100 text-gray-700 border-gray-300 border font-bold rounded">Later</button>
```

這裡基於 BEM-style 的設計概念下，button 的 class 加上 `@apply` 會長成這樣：

```
/\* button.css \*/
@tailwind base;
@tailwind components;

// 按鈕基本樣式
.btn {
  @apply py-2 px-4 mr-4 font-bold rounded;
}

// 按鈕種類
.btn-primary {
  @apply bg-blue-500 hover:bg-blue-700 text-white;
}
.btn-secondary {
  @apply hover:bg-gray-700 text-gray-700 border-gray-300 border;
}

// 按鈕尺寸
.btn-xs {
  @apply text-xs;
}
.btn-xl {
  @apply text-xl;
}

@tailwind utilities;
```

`button` 可以使用上面設好的 class：

```
<button class="btn btn-primary btn-xs">Update Now</button>
<button class="btn btn-secondary btn-xs">Later</button>
```

雖然已經比直接 inline 的寫法簡潔，接著可以再整理成 React component：

```
import classnames from "classnames";

function Button ({size, type, children}) {
  const btnSize = "btn-" + size;
  const btnType = "btn-" + type;
  return (
    <button className={classnames("btn", btnSize, btnType)}>{children}</button>
  )
}

Button.propTypes = {
  size: PropTypes.oneOf(['xs, lg']),
  type: PropTypes.oneOf(['primary', 'secondary'])
};
```

之後就可以重複使用這個 `Button`，這樣看起來也是蠻清楚的！

```
<Button type="primary" size="xs">Update Now</Button>
<Button type="secondary" size="xs">Later</Button>
```

一種基本上可以達到設計師和工程師分離的 fu，設計師負責整體樣式 (style)，然後把 CSS 文件建好，工程師只要遵照文件設定 component 屬性，不用知道按鈕要不要圓角、`padding` 多少，什麼顏色；設計師想要改樣式，只要處理 CSS 的部份，工程師有乖乖用 component 的話，樣式是設計師說改就改，分工清楚的話也方便兩邊的使用，CSS 歸一邊，JavaScript 歸一邊，~~呀～理想總是好棒棒~~。目前 Tailwind 尚末支援所有的 CSS 屬性，未支援的屬性必須另外加在 style 上面或是另外新增 class。總之今天就到這邊，看到這裡的各位有空可以了解一下  Tailwind 好用之處，未來能依專案所需選擇重構 React component 的方式，謝謝各位：)

### REF
- [Building Reusable React Components Using Tailwind](https://www.smashingmagazine.com/2020/05/reusable-react-components-tailwind/)

- [還在跟複雜的 CSS 的設定奮鬥嗎？用 Tailwind 來幫你實現真正的高效整潔！](https://5xruby.tw/posts/tailwind-css-plugin/)

- [classnames](https://www.npmjs.com/package/classnames)

---

>  👩‍🏫  __課務小幫手：__
>  
> ✨ 想掌握 React 觀念和原理嗎？
>
> 我們有開設 💠 [React 全攻略入門班](https://5xruby.tw/courses/react) 課程唷 ❤️️
>


post-Tailwind 求上車 - 重構 React component/cover

Tailwind 求上車 - 重構 React component


(Photo by <a href="https://unsplash.com/@prateekkatyal?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText" rel="nofollow noopener noreferrer" target="_blank">Prateek Katyal</a> on <a href="https://unsplash.com/s/photos/less-is-more?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText" rel="nofollow noopener noreferrer" target="_blank">Unsplash</a>)

# Build a URL Shortener from scratch?

大家應該都曾經因為分享方便、想要追蹤點擊等目的使用過 [Bit.ly](http://bit.ly) 或是已關閉的 Goo.gl 網址服務。

自行打造 URL 縮網址小工具，對於任何有一定經驗的工程師來說，都並非難事，但當我們把「要好、要快、要便宜」的標準放入考量中時，一個簡單的縮網址服務也可以從數日、數週的挑戰變成需要數月的工作項目。

人是不習慣知足的動物，有了功能之後，我們會開始要更多：

- 服務需要使用者驗證、授權。組織內的服務可能有多個，最好這些服務的都能有 Single Sign On 的整合，同時我想要讓大家可以用慣用的 Google、Facebook、GitHub 等第三方 Oauth 完成身份驗證。
- 服務的響應速度能不能更快。
- 當有突然湧入的使用者，希望服務可以瞬間擴展到足以吃下所有的需求。反之，當沒有人使用我的服務的時候，能不能降低成本到趨近為零。
- 時間應該浪費在開發新功能、與其他有價值的美好事物上頭，需要定期費心維護的東西能不能再更少。

# Monolith to Microservices

回溯過去，部署服務的起手式曾經是開一台虛擬機器，在裡面安裝好所有需要的環境。隨後由於開始需要確保服務可以服務跨更多區域的使用者、增加服務的穩定、減少需要耗費大量時間逐一 Patch 虛擬機器、資料庫或是 Application 的機會、並讓服務的 Application、Database、CacheWorker 等區塊可以分別按照需要調整資源。

同時現在多數的開發團隊都會使用混合的 Techstack，在同組織、甚至同產品內就會運用多種不同的語言、框架，為了方便可以單元式的開發所需要的模組，Monolith (單體式) to Microservices (微服務) 的概念曾紅極一時。

# Serverless and FaaS (Function as a Service)

## Serverless

講到微服務就不得不提到 Serverless (無伺服器運算) 概念。無伺服器運算的概念被視為是 Cloud Native (雲端原生架構) 的極致展現，雖然名字可能讓人誤解，無伺服器運算事實上仍然是倚賴著雲端伺服器進行，只是我們將大多數的管理成本進一步委派由大型雲端服務商來控管。

無伺服器運算透過盡可能的免除瑣碎、非必要的架構佈署、修正、維護工作，以最大化的減低管理成本，同時提高服務調整與擴展的敏捷度。同時由於可以隨需 (On Demand) 快速的調高與調低佈建的資源大小，可以最大化的減小總體擁有成本 (Total Cost of Ownership)。

如此一來，無伺服器運算得已讓隨時都一直處在人力吃緊狀態的開發團隊得以將心力投注於開發與產品的成長，使得開發優良、高可用 (High Availability)、可擴展 (Scalable) 的產品變得比以往都還要輕鬆。

## FaaS (Function as a Service)

打造微服務的主流作法，不外乎是倚靠容器化 (Container) 技術、或是倚賴 FaaS  (Function as a Service) 雲端服務架構。其中 FaaS (Function as a Service) 因為可以最大幅的降低管理成本 (Admin Overhead) 及學習成本而受到歡迎，三大雲端巨頭都分別推出了對應的指標性產品，包含常見的 Google Functions、AWS Lambda、Azure Functions。

FaaS 透過將服務功能重新拆解，以 Function (函式) 為執行基礎單位，達成只需為各函式運行時間成本支付費用的夢想，同時由於 Function 必須為 Stateless，這使得彈性擴展變得彈指般容易，若妥善搭配全受管 (Fully-Managed) 服務，可以同時達成高可用服務架構的水準。

# Serverless to Functionless

由於 FaaS 將管理成本交付給雲端服務營運商、可以快速調節佈建資源，並同時能達成高可用的要求，不少組織開始大量的採納 Serverless 服務。但事情總是不會如想像般美好，從 Monolith 架構轉換至擁抱 Microservices、進而採用 Serverless 架構，所需要的遠遠不只是把服務打散成 Function、搬移到雲端運營商，未經深思熟慮的貿然遷移，往往為後需服務的擴張留下不可控制的技術債。

表面上看來，Microservices 架構讓你把服務變成多個小單元、每個小單元能夠獨立的擴展、維護，好像很容易分而治之 (Divide and Conquer)，然而隱含的風險是，如果多個小單元處置不善，那其實也就只是在自己的服務中佈下滿地的致命地雷。

問題出現之後，我們學著理解到無伺服器、高效的調節、低廉的成本、新潮的技術架構其實都不是核心，讓大家「專注」在能夠打造更好、更穩定的核心服務體驗，才是技術演進的價值所在。Functionless 的概念就在這樣的反思中應運而生。

Functionless 試圖回歸到服務的核心，開發者們應該盡可能將「專注」放在讓服務與需要上面、應該要盡可能用「事半功倍」的方法達成目的，可能的話，最好連 Function 都別 Provision 就能打造服務。

# 案例探討：AWS Samples - Functionless URL Shortener

沒有了 Function，那後端邏輯在哪、誰來負責答覆請求？讓我們先回到我們的主題：「Functionless 縮網址服務」上頭。

AWS Compute Blog 曾在 2016 年發表了《Build a Serverless, Private URL Shortener》一文，透過 Lambda、API Gateway、S3、CloudFront 等服務，就可以還算輕鬆的完成一個簡單的私有縮網址服務，如果一個月產生 1,000 個縮網址、每個縮網每月收到 1,000 個請求的話，一個月的費用不到 5 塊錢台幣。

四年過去，今年初 AWS Compute Blog 又發表了《Building a serverless URL shortener app without AWS Lambda》系列文，透過 AWS Amplify, Cognito, API Gateway, DynamoDB, S3 等重新完成縮網址服務。

在我們繼續往下以前讓我們先對 AWS 的 Serverless 生態圈重點服務有基本的認識。

## AWS Serverless 無伺服器生態系

- AWS Lambda：FaaS 重點服務，可以透過 Ruby, Go, Python, Node, Java, C# 等語言撰寫 Function，透過「事件」驅動 Function 執行，可以輕易的平行運行 Function
- API Gateway: 讓你可以建立不同的 HTTP API 並連結到不同的後端
- Cognito：使用者 (User Pool) 驗證服務
- DynamoDB：Key Value NoSQL 服務
- S3：靜態資源儲存服務
- CloudFront: CDN 服務

## 部署 API

為了方便近距離感受 Functionless 的特性，讓我們來部署一下 AWS Samples 中的 [Functionless URL Shortener](https://github.com/aws-samples/amazon-api-gateway-url-shortener) 吧！Repo 的 README 中有詳細的部署指引。

- 部署之前你需要確保你的電腦中已經有 AWS CLI、以及 AWS SAM CLI
- Fork Functionless URL Shortener Repo
- 建立一組 GitHub 的 Personal Access Token，並賦予該 Token 所有 Repo Scope 底下的權限
- 將 Repo Clone 到你的電腦上並導引到對應專案目錄
- 執行 `sam deploy -g` 初始化部署，依據提示完成選項的選擇，並進行部署
- 由於過程涉及 CloudFront 的設定，可能會需要至多約 30 分鐘左右才能完成部署，若部署過程比想像中耗費時間，不需過於擔心

## 部署前端

上面的步驟幫你完成了 API 的部署，在這個 Sample App 中還包含了以 Vue.js 撰寫的前端部署，讓我們接著來完成前端介面的部署。這部分同樣在 README 中有詳細的部署指引。

- 到 Amplify Console 中找到剛剛建立的 Apps
- 依據 API 部署後的回傳訊息完成以下環境參數設定
    - VUE_APP_NAME
    - VUE_APP_CLIENT_ID
    - VUE_APP_API_ROOT
    - VUE_APP_AUTH_DOMAIN
- 回到 Amplify Console 針對對應的 APP 執行 Run Build 完成初次部署，整個部署就完成了！
- 試著瀏覽剛剛建立出來的 APP 建立短網址。

## What's special

讓我們已這個 2020 年 2 月發布的 Functionless URL Shortener Sample Project 與 2016 年的 Private URL Shortener 進行比較。

### Apache VTL (Velocity Template Language) instead of Lambda functions

首先最大的差異就是 Functionless！綜觀整個服務中我們會看到完全沒有 Function 存在。

URL Shortener 的核心邏輯並不複雜，任何開發者對於這樣的邏輯應該都十分熟悉

- 你會有一個簡短的 URL Slug 對應至原始的 URL
- 服務的使用者應該可以快速的貼上 URL，並觸發 API
- API 觸發後，需要儲存 URL Slug 與原始目標 URL 對應
- 當其他使用者瀏覽縮短後的網址時，應該要被轉址到原始目標 URL

在這個過程中，收到的縮網址請求內容，與實際需要存進資料庫的部分並未相差太多。當使用者瀏覽短網址時，需要回覆的內容也與資料庫所儲存的資料並未差異太大，這麼簡單的 CRUD 層級的任務，難道還非得要部署幾個 Function 來解決他們？翻找一下 Repository 的內容，你還真找不到對應的 Function。

AWS 不斷的在演進自家服務的進展，原本透過 API Gateway 收到請求後，我們會想要將請求事件交由 Lambda 處理，但 API Gateway 多了對 Apache VTL (Velocity Template Language) 的支援後，我們可以透過 Apache VTL 進行簡單的請求內容轉化後，直接在 DynamoDB 建立對應的請求。

舉例來說，一個簡單的建立 URL 請求：

```json
{
  "id": "aws",
  "url": http://aws.amazon.com,
  "timestamp": "27/Dec/2019:21:21:17 +0000",
  "owner": "ericdj@amazon.com"
}
```

我們可以透過在 API Gateway 建立以下的 VTL 宣告：

```json
#set($inputRoot = $input.path('$'))
{
  "id":"$inputRoot.Attributes.id.S",
  "url":"$inputRoot.Attributes.url.S",
  "timestamp":"$inputRoot.Attributes.timestamp.S",
  "owner":"$inputRoot.Attributes.owner.S"
}
```

將原本的使用者請求轉換為 DynamoDB 的建立請求：

```json
{
  "id": {"S": "aws"},
  "owner": {"S": "me@mydomain.com"},
  "timestamp": {"S": "27/Dec/2019:21:21:17 +0000"},
  "url": {"S": "http://aws.amazon.com"}
}
```

若遇到 Slug 重複的情形，我們可以透過在 API Gateway 建立以下的 Apache VTL 設定，將 DynamoDB 的 `ConditionalCheckFailedException` 錯誤，轉換成回應錯誤回應：

```json
#set($inputRoot = $input.path('$'))
#if($inputRoot.toString().contains("ConditionalCheckFailedException"))
  #set($context.responseOverride.status = 200)
  {"error": true,"message": "URL link already exists"}
#end
```

### Leverage Services instead of libraries / customized solutions

在這個 Sample 中，我們可以看到比起 2006 年的 Private URL Shortener 服務，這個服務有更好的使用者介面、更完整的驗證程序，然而實際上卻沒新增太多的程式碼，從很多角度來看反而簡化了許多需要維護的程式碼。

在新的 Sample 中以 Cognito 完成了服務驗證、以 Vue.js 完成前端部署至 S3 中，所有的服務仍然都以全受管服務打造，你不需要花太多精力在調整伺服器及其他架構，只需要專注於整個服務的核心邏輯身上。

過往我們會透過 Rails, Express, Django 這樣的全端框架來完成從 Routing, Request Handing, Database ORM, Caching, Monitoring 等功能，在這個示範架構中我們最大化的利用雲端服務來來達成所有的功能，唯一需要專注維護的程式碼只有縮網址的核心邏輯。

### Architecture as Code

在這個 Sample App 的架構中，利用 AWS SAM (Serverless Application Model) 來定義需要運行服務的整個架構，任何人只需要透過簡單的 `sam deploy` 指令便能輕鬆複製出一模一樣的架構，架構以 YAML 檔的形式儲存，任何需要維護架構的人都不再需要進 AWS Console 花好幾天的時間想辦法追溯出整個架構的運行狀況，如果需要災難復原 (Disaster Recovery) 時也能在最短的時間內重新還原服務架構。

### No waste

在這個範例中，所使用的服務全都是 Fully Managed Service，只需要告訴 AWS 你所需要的用量跟如何連結各個服務，部署的資源跟費用會隨著需要動態調節，真正的把每一毛錢都花在刀口上，不需要佈建過多不需要的容量，也不需要時時刻刻擔心突然增長的流量會不會讓服務垮掉。

# 結論

就以上 Sample Apps 的範例中，我們可以從中觀摩 Serverless、甚至 Functionless 架構的幾個重點訴求：

## Offloading tasks，Less is more

過往我們習慣透過一個全端的 Application Framework 來包辦工作，透過 Vertical Scaling、Hortzontal Scaling 的方式來擴展佈建容量，Serverless 的思維模式讓你將關注重新放回重要的核心功能中，將可以委派的工作交給雲端服務來處理，達成「事半功倍」的成果。

## Infrastructure as Code / Architecture as Code

在這個案例中，我們也見識到了透過文字 Config 來描述架構的好處，透過 Infrastructure as Code 甚至是 Architecture as Code 的方式，我們得以完整的分享架構的知識、甚至是輕鬆的重建整體服務架構。

## Ensure scalability of your stacks

同時我們可以觀摩透過 AWS Lambda、DynamoDB、S3、Cognito 這些服務，我們得以完全依照流量所需來佈建所需要的資源，輕鬆就能應對突來的流量增長。

## Optimize your Costs

Scale in 跟 Scale out 同樣的重要，透過 Serverless 的原則，我們可以確保當服務處於沒有人使用的時期，所消耗的資源可以自動維持在最低幅度，節省成本，將資本用在真正需要的地方。

# References

- AWS Compute Blog《[Build a Serverless, Private URL Shortener](https://aws.amazon.com/tw/blogs/compute/build-a-serverless-private-url-shortener/)》
- AWS Compute Blog《[Building a serverless URL shortener app without AWS Lambda](https://aws.amazon.com/tw/blogs/compute/building-a-serverless-url-shortener-app-without-lambda-part-1/)》
- A Cloud Guru on Medium《[Serverless is a state of mind](https://read.acloud.guru/serverless-is-a-state-of-mind-717ef2088b42)》
- Stackery《[The Future of Serverless is… Functionless?](https://www.stackery.io/blog/future-of-serverless/)》
- Lego Engineering on Medium《[Don’t wait for Functionless. Write less Functions instead](https://medium.com/lego-engineering/dont-wait-for-functionless-write-less-functions-instead-8f2c331cd651)》

post-From Serverless to Functionless，不寫 Code 也能打造縮網址服務?

From Serverless to Functionless，不寫 Code 也能打造縮網址服務?

(Photo Credit: “Person Standing on Train Rail” by <a href="https://unsplash.com/@clayton_cardinalli" rel="nofollow noopener noreferrer" target="_blank">Clayton Cardinalli</a> on <a href="https://unsplash.com/photos/ik1xoxbLDgM" rel="nofollow noopener noreferrer" target="_blank">Unsplash</a>)

## 目錄
- 前言
- 使用 `reload!` 來重新讀取更改過後的 Code
- 呼叫 Helper Methods 與發送 HTTP Request
  - 呼叫 URL Helper Method
  - 呼叫 View Helper Method
- 用 YAML Module 將資料漂亮地印出
- Rails Console Sandbox Mode
- 其它小技巧
  - 使用 `~/.irbrc` 載入常用的東西
  - IRB 裡的 `_`
- 補充： `$ rails routes` 加 flag （ Rails 5 以上）

## 前言
程式語言 Perl 的作者 <a href="https://en.wikipedia.org/wiki/Larry_Wall" rel="nofollow noopener noreferrer" target="_blank">Larry Wall</a> 在他的書 <a href="https://en.wikipedia.org/wiki/Programming_Perl" rel="nofollow noopener noreferrer" target="_blank">Programming Perl</a> 曾經提到過的<a href="http://threevirtues.com/" rel="nofollow noopener noreferrer" target="_blank"> Programmer 三大美德 （ Three Virtues of a Programmer ）</a>之中，第一點即為「懶惰 （ Laziness ）」。在 Rails 工程師天天中都會使用到的 Rails console ，其實有些更<del>偷懶</del>聰明的使用方式。筆者在這邊整理了一些小撇步，要來帶著大家一起更有效率地使用 Rails console ！

## 使用 `reload!` 來讀取更改過後的 Code
若是在 Rails console 已經開啟的狀態下更動了 code ，只要執行 `reload!` ， Rails 就會讀取更改過後的 code ！

```ruby
# call a model's scope
>> SomeModel.some_scope

# modify the code and use `reload!`
>> reload!
>> SomeModel.some_scope
```

## 呼叫 Helper Methods 與發送 HTTP Request
說到測試 helper ，一般比較直覺的做法會是在 ERB template 或 helper method 的 method body 中插入斷點（如 `byebug` 或 `binding.pry` ）後試圖讓 code 跑到斷點以進行測試。但其實在 Rails console 中是可以呼叫這些 methods 的。

### 呼叫 URL Helper Method
想要在 console 裡呼叫 URL method 的話，只要將 method send 給 `helper` 就可以了。若想要更進一步、直接在 console 內發送 request ，只要將 HTTP Verb send 給 `app` 即可：

```ruby
# example from https://guides.rubyonrails.org/command_line.html#rails-console
>> app.root_path
 => "/"

>> app.get _
Started GET "/" for 127.0.0.1 at 2014-06-19 10:41:57 -0300
...
```

### 呼叫 View Helper Method
想要在 console 裡呼叫 helper method 的話，可以將 method send 給 `helper` 來使用。筆者自己常用的情境有以下：

- 測試 Rails 的 helper method
- Debug 自己寫的 helper method

```ruby
>> helper.number_to_currency 1234.567, unit: '円', precision: 1, format: '約 %n %u'
 => "約 1,234.6 円"
>> helper.some_helper_method
```

## 用 YAML Module 將資料漂亮地印出
若是平常的工作情境上會常常需要呈現資料給夥伴的話，將資料以好閱讀的方式印出，可以<del>有效降低夥伴眼睛脫窗的機率</del>讓夥伴更快速地掌握資料的樣貌。要在 Rails console 中將資料漂亮地印出，除了使用一般常見的 gem <a href="https://github.com/cldwalker/hirb" rel="nofollow noopener noreferrer" target="_blank">Hirb</a> 或 <a href="https://github.com/awesome-print/awesome_print" rel="nofollow noopener noreferrer" target="_blank">Awesome Print</a> 外，還可以使用已經在 Rails 裡面就引入的 `YAML` module 來達到類似的效果。若想要在一般的 IRB 內使用的話，只要先執行 `require 'yaml'` 就可以了。

```ruby
>> y User.first.attributes
---
id: 1
email: email@email.biz
encrypted_password: "somelonglonglonghashedpw"
 => nil
```

```ruby
2.6.0 :005 > y %w[foo bar baz]
---
- foo
- bar
- baz
 => nil
```

```ruby
>> y({ a: 1, b: 2, c: 3 })
---
:a: 1
:b: 2
:c: 3
 => nil
```

若看不慣 YAML 的資料格式，可以用 `PP` module （ Pretty-Printer ），在保留資料原來的樣態下印出 hash 或 array ：

```ruby
>> pp User.first.attributes
---
{"id"=>1,
 "email"=>"email@email.biz",
 "encrypted_password"=>
  "somelonglonglonghashedpw"}
 => # omitted
```

## Rails Console Sandbox Mode
要在不更動到 DB 裡的資料的前提下在 Rails console 裡面進行操作，可以在呼叫 Rails console 時在後方加上 flag `--sandbox` 。沙盒模式運用了 DB 的 savepoint ，在離開 Rails console 後即 rollback 。

**另外需要注意的一點是請不要在 Production 使用，因為沙盒模式會讓被更新的資料列被鎖住，造成其它需要跟該資料列互動的工作被卡住。**

```sh
# short form
# $ rails c -s
$ rails console --sandbox
```

```ruby
Loading development environment in sandbox (Rails 5.2.4.2)
Any modifications you make will be rolled back on exit
>> User.delete_all
  User Destroy (18.5ms)  DELETE FROM "users"
 => 11
>> exit
   (0.3ms)  ROLLBACK
```

平常在新增 migrate 檔時，若擔心在執行 `rails db:migrate` 的過程當中、會因為 migrate 檔內有一部分 code 沒寫好而造成執行失敗，陷入了「 migrate 檔僅跑完部分、但檔案被 Rails 標註為已執行、 DB 資料還壞掉」的這種不上不下的窘境，也可以運用 Rails console 的沙盒模式來放心地進行測試！

```ruby
# credit goes to https://shime.sh/til/testing-migrations-from-sandboxed-rails-console
>> require './db/migrate/20200516140557_create_identities.rb'
 => true

# use #change/#up to invoke the migration
>> CreateIdentities.new.change
-- create_table(:identities)
   (11.1ms)  CREATE TABLE "identities" ( # omitted
```

## 使用 `~/.irbrc` 載入常用的東西
透過在家目錄下定義的 `.irbrc` ，我們可以在每次 IRB 或 Rails Console 被開啟時，將我們所需要的函式庫及設定一次讀取進來：

- 引入需要平常會用到的 modules ，如前面提到的 `YAML` ，或者是 `BigDecimal`
- 設定在 console 內、給特定專案用的 aliases 及 helper methods

```ruby
# ~/.irbrc
LIBS = %w[yaml bigdecimal hirb].freeze
LIBS.each do |lib|
  next if respond_to? lib

  require lib
  puts "Lib is loaded: #{lib}"
rescue LoadError
  puts "\e[31mLoading lib failed: #{lib}\e[0m"
end

if defined? Rails
  app_name = Rails.application.class.parent.to_s

  # tries to match module name string defined in config/application.rb
  if app_name == 'FooBarBaz'
    def me
      @me ||= User.find_by(first_name: 'danny', last_name: 'boi')
    end
  end

  if app_name == 'BazBarFoo'
    # that long query you find yourself typing every day
    def foo
      Foo.where(some_column: 'some_long_value',
                another_column: 'some_long_long_long_value')
    end
  end
end
```

## 其它小技巧
### IRB 裡的 `_`
若是想要使用上一次 IRB eval 的結果來做些什麼的話，可以使用 `_` ：

```ruby
>> Time.now
 => 2020-05-16 10:43:02 +0800
>> now = _
 => 2020-05-16 10:43:02 +0800
>> now
 => 2020-05-16 10:43:02 +0800
```

### 使用 `CTRL` 加 `r` 搜尋歷史 Input
要搜尋之前打過的東西，除了用上下鍵慢慢找以外，其實還有更快的方式。按下 `CTRL` 加 `r` 後就可以輸入關鍵字、往回搜尋曾經輸入過的 code 。

若要離開 `reverse-i-search` 模式，按下 `ESC` 或 `CTRL` 加 `[` 即可跳出。

## 補充： `$ rails routes` 加 flag （ Rails 5 以上）
若要以 `rails routes` 來尋找特定的路徑，最直覺的方式應該是 pipe 給 grep 來過濾出自己想要的路徑：

```sh
$ rails routes | grep users
```

在 Rails 5 以後，可以靠 flag `-c` 或 `-g` 達到類似的效果：
- Controller specific search

```sh
$ rails -c users
$ rails -c admin/users
```

- Pattern specific search

```sh
$ rails routes -g product
```

若專案使用的是 Rails 6 ，還可以使用 flag `-x` 、漂亮地印出路徑：

```sh
# example from https://guides.rubyonrails.org/routing.html#listing-existing-routes
# short form
# $ rails routes -x
$ rails routes --expanded
```

```
--[ Route 1 ]----------------------------------------------------
Prefix            | users
Verb              | GET
URI               | /users(.:format)
Controller#Action | users#index
--[ Route 2 ]----------------------------------------------------
Prefix            |
Verb              | POST
URI               | /users(.:format)
Controller#Action | users#create
# omitted
```

那以上跟直接呼叫 `rails routes` 後再使用 `grep` 有什麼差異嗎？其實沒有<del>，但是可以拿出來炫一下</del>。

## 參考資料
- <a href="https://guides.rubyonrails.org/command_line.html#rails-console" rel="nofollow noopener noreferrer" target="_blank">The Rails Command Line - 1.4 rails console</a>
- <a href="https://shime.sh/til/testing-migrations-from-sandboxed-rails-console" rel="nofollow noopener noreferrer" target="_blank">Testing migrations from sandboxed Rails console</a> by <a href="https://shime.sh/" rel="nofollow noopener noreferrer" target="_blank">Hrvoje Šimić</a>
- <a href="https://guides.rubyonrails.org/routing.html#listing-existing-routes" rel="nofollow noopener noreferrer" target="_blank">Rails Routing from the Outside In - 5.1 Listing Existing Routes</a>

---

>  👩‍🏫  __課務小幫手：__
>  
> ✨ 想掌握 Ruby on Rails 觀念和原理嗎？
>
> 我們有開設 🏓 [Ruby on Rails 實戰課程](https://5xruby.tw/courses/ruby-on-rails) 課程唷 ❤️️
>


post-原來 Rails Console 可以這樣用/cover

原來 Rails Console 可以這樣用

有聽說過「編輯體例」嗎？拿起你手邊任何一本有經過出版社印製的書來看看，你應該可以發現：同一本書裡，不論是在排版格式上或是翻譯用語和專有名詞上，是有很高的一致性的。舉個簡單的例子，如果書中主角是「彼得」和「瑪莉」，即便編輯自身比較偏愛「彼德」和「瑪麗」的用法，也必須按照出版社要求的編輯體例，將用語統一為「彼得」和「瑪莉」。因為有共同的標準，同一間出版社下，就算是不同的編輯經手的不同作品，在排版和用語上也會有很高的一致性，例如凡是日期都會統一使用「六月四日」這樣的格式，不會印成「6 月 4 日」。

程式的世界裡也有類似的概念，我們稱之為 coding style。諸如怎麼縮排、括號怎麼斷行（或不斷行）、變數如何命名、判斷式的寫法、是否有行數限制等，每個人都有各自的偏好。這裡面有些是業界公認的 best practice，也有些是見仁見智的宗教戰爭，但無論如何，在團隊協作的情境下，有一個「大家可以接受並願意遵循的 coding style」作為開發的基礎，是相當重要的事情。

Ruby 圈有幾個比較有名的 style guide（字母序）供大家參考：

- [社群版](https://rubystyle.guide/)
- [Airbnb 版](https://airbnb.io/projects/ruby/)
- [Cookpad 版](https://github.com/cookpad/styleguide/blob/master/ruby.en.md)
- [GitHub 版](https://github.com/github/rubocop-github/blob/master/STYLEGUIDE.md)
- [Shopify 版](https://shopify.github.io/ruby-style-guide/)

對於工程師來說，「程式碼的風格統一」這種事情，當然就應該交給工具來處理囉。而在 Ruby 圈裡，最被廣泛使用的檢查工具就是本文要介紹的 [RuboCop](https://github.com/rubocop-hq/rubocop)。RuboCop 大約在 2012 年前後問世，也算是歷史悠久的開源專案了，但時至今日依然還沒有推出 1.0 的版本，官方文件也很大方地承認常會有向後相容的問題，要大家自己注意使用的版號 XD 

那就開始吧。因為沒有現成的例子，就順便工商服務一下，用敝公司的開源工具 [bankai] (https://github.com/5xRuby/bankai) 產生一個新的 Rails 專案：

```
$ gem install bankai
$ bankai demo
```

馬上來執行看看：

```
$ cd demo
$ rubocop
Inspecting 40 files
........................................

40 files inspected, no offenses detected
```

RuboCop 檢查了 40 個檔案，沒有發現問題 ，打完收工 🎉 呃不是啦 XD 再仔細看一下，會發現專案下有這兩個設定檔：

```
$ ls .rubocop*
.rubocop.yml      .rubocop_todo.yml
```

`.rubocop.yml` 一看就是善良市民可以先放一邊， 倒是 `.rubocop_todo.yml` 看起來就很可疑，馬上打開來看看：

```ruby
# This configuration was generated by
# `rubocop --auto-gen-config`
# on 2020-05-13 11:13:56 +0800 using RuboCop version 0.81.0.
# The point is for the user to remove these configuration records
# one by one as the offenses are removed from the code base.
# Note that changes in the inspected code, or installation of new
# versions of RuboCop, may require this file to be generated again.
```
RuboCop 既然是用來檢查 coding style 的工具，自然也是依據某個 style guide 作為標準，而 RuboCop 參照的則是前文提到的社群版本。由於 Rails 和 RuboCop 是由不同團隊開發的，雙方的「出廠預設值」會有衝突也是在情理之中，所以並不是「RuboCop 沒有意見」，而是 bankai 預先把這些「已知不合」的狀況先隔離在 todo 裡，再讓團隊自行判斷後續該如何處理。

> 這裡必須再強調一次：我們在專案中導入 RuboCop 或其他 linter，並不是為了要追求「考試一百分」這樣的價值，而是要讓團隊成員在協作時能有共同遵循的標準。也就是說，在團隊成員有共識的前提之下，RuboCop 的結果只是參考，不需要盲從，預設值可以調整，必要時甚至也可以忽略。

那我們就順手改一下 todo 裡的東西吧！

```ruby
# Offense count: 1
# Configuration parameters: EnforcedStyle.
# SupportedStyles: slashes, arguments
Rails/FilePath:
  Exclude:
    - 'config/environments/development.rb'
```

 把這一條規則（我們稱之為 cop）註解起來後再執行一次，就會乖乖噴錯了：

```
$ rubocop
Inspecting 40 files
.................C......................

Offenses:

config/environments/development.rb:19:6: C: Rails/FilePath: Please use Rails.root.join('path/to') instead.
  if Rails.root.join('tmp', 'caching-dev.txt').exist?
     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

40 files inspected, 1 offense detected
```

翻成白話文就是，RuboCop 幫我們偵測到了「未遵循 [Rails/FilePath](https://docs.rubocop.org/projects/rails/en/latest/cops_rails/#railsfilepath) 規則」的原始碼，還很親切地告訴我們是在哪個檔案的哪一行，以及修改的建議。我們通常有以下選項：

- <del>就讓它噴錯，什麼都不做</del>
- 照著 RuboCop 的建議修改程式碼
- 調整規則，不改原始碼
- 保留規則，但將這段程式碼排除在外

> 一般來說，我們會把 .rubocop_todo.yml 中的 cop 逐一註解掉，處理過後使之不再報錯，直到整個 todo 可以被安全移除為止。

#### 照建議修改

在這個例子裡，程式碼的修改很單純，照著建議去改就可以了：

```ruby
 if Rails.root.join('tmp/caching-dev.txt').exist?
```

改過後再執行一次，確認沒有問題：

```ruby
$ rubocop
Inspecting 40 files
........................................

40 files inspected, no offenses detected
```

不過實務上，尤其是在比較有歷史的 code base 裡，是很有機會遇到「只是換個寫法，測試就掛了」「要改就只能整段重寫」等狀況的。因為這真的很重要所以要說第三次：RuboCop 這一類的工具只是幫助我們找出潛在的風險，它給的建議也不是「標準答案」（寫程式本身就沒有標準答案這回事），「怎麼做才是最好的？」最終還是要用自己的專業做判斷。

#### 調整規則

反過來說，如果大家覺得 RuboCop 抱怨的程式碼沒有問題，那就來<del>解決提出問題的人</del>調整 RuboCop 的設定檔就好。一種作法是直接放大絕，把整個規則 disable 掉：

```ruby
# .rubocop.yml

Rails/FilePath:
  Enabled: false
```

逃避雖然可恥但是有用？這雖然也是一種解法，但比較好的作法是去修改規則的內容，而不是把規則整個拿掉。參照官方文件可以得知 Rails/FilePath 預設的樣式是 `path/to/file`，如果希望統一成 `('path', 'to', 'file')` 的格式的話，就要另外指定為：

```ruby
# .rubocop.yml

Rails/FilePath:
  EnforcedStyle: arguments
```

修改後再執行一次看看有沒有問題：

```
$ rubocop
Inspecting 40 files
...................................C....

Offenses:

spec/rails_helper.rb:15:5: C: Rails/FilePath: Please use Rails.root.join('path', 'to') instead.
Dir[Rails.root.join('spec/support/**/*.rb')].sort.each { |f| require f }
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

40 files inspected, 1 offense detected
```

因為規則改了，所以原本沒有問題的地方變成有問題了。照理說，因為規則改了，我們應該要去改 rails_helper.rb 的程式碼才對，但因為正好可以拿來展示語法，我們就順勢來用排除法吧。

#### 排除特定程式碼

當我們希望「這個 cop 有其必要」，但「在這個特例下可以排除」的時候，可以用 inline 的方式對程式段落做 disable：

```ruby
# rubocop:disable Rails/FilePath
Dir[Rails.root.join('spec/support/**/*.rb')].sort.each { |f| require f }
# rubocop:enable Rails/FilePath
```

如果是「這個 cop 有其必要」，但「這些目錄下的檔案可以不用遵守」的話，也可以直接在設定檔裡做排除。例如在 `.rubocop.yml` 中，我們已經預設讓 db migration 和 rake task 之類的程式碼，可以不受 metrics 條件的限制：

```ruby
# .rubocop.yml

Metrics:
  Exclude:
    - db/migrate/*
    - Rakefile
    - Gemfile
    - config/**/*
    - spec/**/*
    - lib/tasks/**/*
```

#### 自動修改

RuboCop 也支援自動修改。要注意的是，並不是每一個 cop 都有支援（請自己看文件確認），就算支援，一般也不建議用在單純語法或排版統一以外的地方。Rails 開發者最常用到的可能是這個 XD

```
$ rubocop --auto-correct --only Style/FrozenStringLiteralComment
```

執行下去後，RuboCop 就會幫我們補好煩人的這一句：

```
# frozen_string_literal: true
```

#### 結語

善用工具，可以讓團隊協作的品質更整齊，但要小心不要陷入追求標準答案和滿分的陷阱，不然很容易本末倒置。Ruby 圈類似的檢測工具還有：

- [reek](https://github.com/troessner/reek): 偵測可能的 code smell
- [rails\_best\_practices](https://github.com/flyerhzm/rails_best_practices): 這個在做什麼應該很明顯
- [flay](https://ruby.sadi.st/Flay.html): 偵測可能的重覆程式碼
- [SandiMeter](https://github.com/makaroni4/sandi_meter): 檢查程式碼是否符合 Sandi Metz 提倡的四大原則

有機會的話都可以拿來玩看看 :)

#### 參考資料

各個 cop 的詳細設定方式和範例都可以在官方文件裡查到：

- [rubocop 官方文件](https://docs.rubocop.org/en/stable/)
- [rubocop-rails 官方文件](https://docs.rubocop.org/projects/rails/en/latest/)

(Photo Credit: "RoboCop" by [Andrew Milligan sumo](https://www.flickr.com/photos/24470821@N04) is licensed under CC BY 2.0)

---

>  👩‍🏫  __課務小幫手：__
>  
> ✨ 想掌握 Ruby on Rails 觀念和原理嗎？
>
> 我們有開設 🏓 [Ruby on Rails 實戰課程](https://5xruby.tw/courses/ruby-on-rails) 課程唷 ❤️️
>


五倍紅寶石・專業程式教育機構

ASTRO Camp

線上課程

短期課程

技術文章

五倍消息

技術文章

PTT 新貼文提醒、單字蒐集 Chrome 擴充套件？一同窺探有哪些強大的 API 可以使用

開發不難，會 Debug 就好！如何靈活運用 Chrome DevTools 來開發網站

如何在 Rails 中使用 Arel SQL

十五分鐘認識正規表達式，解決所有文字難題

Tailwind 求上車 - 重構 React component

From Serverless to Functionless，不寫 Code 也能打造縮網址服務?

原來 Rails Console 可以這樣用

機器戰警 RuboCop

訂閱文章

電話 | (02) 2331-5247

信箱 | [email protected]

地址 | 10046 台北市中正區衡陽路 7 號 5 樓

專業課程

ASTRO Camp

線上課程

短期課程

關於我們

關於五倍紅寶石

聯絡我們

媒體報導

加入我們

部落格

技術文章

五倍消息

幫助與政策

常見問題

隱私權政策

服務條款