五倍直播間

Blogs - Sidebar

[Photo by Wes Hicks](https://unsplash.com/photos/ptXljygBu-0)

## 寫在前面
上課前就常常聽說 Ruby on Rails 在 Window 作業系統環境裡很麻煩很難用，但我在上課跟做專案的時候都一直是使用 Windows 筆電，用起來其實沒有想像中的可怕，真的完全不支援的東西很少，最多就是跑測試或要建立 server 的時候比較慢而已，但我私自認為速度會很慢有一部份也是因為電腦的配備問題。之前買筆電的時候就有特別考慮速度所以買了三萬多塊稍貴的筆電，可能也是因為這樣，用 wsl 跑 rails 相關的東西時其實也是順順的。因為開始新工作的關係拿到一台新的 MacBook Pro（此生第一台），剛好跟大家分享一下在設定開發環境還有習慣 MacBook 的一些小故事

（由於公司使用了 docker，所以其實很多地方都被包起來了，現在也還太嫩無法參透包起來的方法）

## 從 Windows 轉 MacOS 的一些小心得跟好用工具：

- Windows 轉 MacOS 的快捷鍵：

  之前在 Windows 上的 `Ctrl` + `C`... 都換成 `Cmd (Command)` + `C`

  這可能真的要習慣一下，但其實用久了感覺差異不大，另外要直接前往上下左右的最邊界就按 `Cmd` + `方向鍵`，要單字跳躍就按著 `opt` + `方向鍵`，這個大幅提升作業速度，好用！
  另外補充如果在 iTerm 裡面要使用這個功能的話可以依照下面的方法操作：

  進入 Preference
![](https://i.imgur.com/ZwLMS1w.jpg)

  依照指示改變設定即可
![](https://i.imgur.com/ISYsxHU.jpg)

- [Xnip](https://xnipapp.com/)：
   截圖好物，顧名思義就是用來截圖的，操作簡單。

- [Spectacle](https://www.spectacleapp.com/):
  能夠讓螢幕快速分割定位的工具，我自己其實不太常用，但要用的時候能用真不錯。

- [Amphetamine](https://apps.apple.com/us/app/amphetamine/id937984704?mt=12):
  就算你的螢幕保護程式設很短會鎖起來，用了就可以讓他一直醒著，幫助你專心還可以一邊幫你計時！ 

- 其他小叮嚀：
  善用連點兩下選取字詞、連點三下選取整行文字，都可以節省時間。

![Ruby on Rails 入門 - 幫助你開發的 Mac 小工具分享](//images.ctfassets.net/8er52l3j5u76/7mVFkBx0ZpyivFA4jH0aoy/9eea3dac7ebb1fa228f80ad9788a5d12/uWuGi8F.png)
[Photo by Christopher Gower](https://unsplash.com/photos/m_HRfLhgABo)

## 寫在後面
從 Windows 轉 MacOS 真的會有一段陣痛期，還要一直巴著用 Mac 的朋友問一些感覺說出來都有點羞恥的問題，但其實你會想到的問題應該網路上都有很多人想知道答案，只要 Google 一下應該都會找到想要的解答，只要用雪亮的眼睛去好好鑑定答案的真實性與正確性，應該都能輕鬆解決問題。

（像是我剛剛不知道全形頓號怎麼打? 就查了 ”Mac 全形 頓號” 然後就知道要按 (|) 這個鍵就會跑出來了）
讓我們一起微痛轉換作業系統吧！一起交流好用的地方 XD

本文節選自 ASTRO Camp 學員薑薑薑薑的 iThome 鐵人賽文章[ Day 2 Mac 環境小工具](https://ithelp.ithome.com.tw/articles/10266103?sc=rss.iron)

---

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


Ruby on Rails 入門 - 幫助你開發的 Mac 小工具分享

<small>Photo by [Danielle MacInnes](https://unsplash.com/@dsmacinnes) on Unsplash</small>

## 什麼是 Ruby on Rails ?

Ruby on Rails 是一種結合 Ruby 這款程式語言與 Rails 函式庫的一種網頁程式框架！

Ruby 以自然、簡潔、快速著稱，全面支援物件導向程式設計。

而 Rails 則是 Ruby 廣泛應用方式之一，在 Rails 上設計出一套獨特的 MVC 開發架構，不但減少了開發中的問題，更簡化了許多繁複的動作。

所以在學習 Ruby on Rails 的之前，我們必須要先掌握 Ruby 這款程式語言！

但......我應該要去哪裡學習？

### 友善的網路世界

網路上對於 Ruby on Rails 的教學資源不計其數，但對於完全程式新手來說，尋找一個有系統且免費的學習平台實在是相當不容易...... 

> ~~而且通常免費的東西都沒有好貨~~

喂！不要亂講～這世界有很多樂於分享的人，願意無償的教學，只為了讓程式的世界更美好！

在我成為工程師之前，我也不覺得這世界上有這麼多熱心的人，但當你真正的踏入這個領域後，你會發現人性還是本善的呢。

今天我也要擔任那個傳遞善心的人，我會把我篩選過後的免費學習資源推薦給看文章的你 / 妳！

## [The Odin Project ( 全英文 ) ](https://www.theodinproject.com/courses/ruby-on-rails)

主打全課程免費的 Odin Project 是一個開源專案，從一開始就以教學做為核心精神，整個網站的目標是希望可以幫助對於網站開發有興趣的人能夠從零開始到獨當一面。

從 Ruby 教到 Ruby on Rails 甚至是 JavaScript 以及 Git。

最有幫助的地方在於，每一個章節都有幫助初學者編列作業以及目標，可以快速的讓你理解這個章節應該要學會什麼！

課程的後半段也會有小型專案實作，上傳至 GitHub 展示。

這樣的流程能夠幫助初學者理解從建立檔案到呈現在瀏覽器上的過程，未來更能對於不同的工具舉一反三，利用模式比對的方法找到解決方案！

### 特點：
1. 適合新手上路，內容平易近人。
2. 涵括前後端的基礎教學，甚至還有 Git！

---

> **冷知識分享：**
>
> 為什麼叫做 Odin Project？
> Odin 就是我們熟悉的希臘神話人物，宇宙之王。
> 
> 相傳他為了獲得魯納斯的智慧而把自己的右眼給犧牲了。
> 
> ~~所以這邊就是希望我們可以貢獻生產力直到右眼失明。~~ 

喂～當然不是這樣啊，網站開發可不是一個簡單的任務，這個故事是希望我們可以像奧丁一樣渴望知識，不斷地成長～

但眼睛還是要顧ㄟ，一天一顆葉黃素，讓你眼睛保得住。

## [Codecademy ( 全英文 )](https://www.codecademy.com/learn/learn-ruby)

Codecademy 是一個提供基礎程式教學的網站，在上面可以學到基礎的 HTML、CSS、Ruby、Rails 等等，都是不需要收費的！

但其實它也有提供更進階的課程，需要升級付費才可以使用的選項，但基於今天是介紹免費的資源，就不著墨太多付費課程的內容。

對於新手來說這個網站有很大的特點是它提供了線上的開發環境，讓你可以不需要安裝編輯器就可以開始學習，從基礎的 Ruby 語法開始上手，這樣的環境對於真正的新手來說，可以先拋開環境設定以及安裝程式語言的問題，直接地開始學習程式語言。

網站還會根據帳號的學習程度來製作百分比提示你的學習情況，能夠讓新手理解自己大概學了多少的程度，而且 Codecademy 也有一個強大的社群討論版，能夠在上面找到問題的答案，或是主動發文提問，也能夠大幅度的加速學習效率！

### 特點：
1. 線上編輯環境，免去環境設定問題。
2. 搭配提示直接動手寫程式，快速顯示成效。
3. 介面清晰的討論版，快速掌握問題。

## [為你自己學 Ruby on Rails ( 中文 )](https://railsbook.tw/)

> **衷心建議：**
>
> 新手要記得先打好程式語言的基礎觀念，否則直接學習框架是一件危險的事情。
>
> 尤其是 Rails 有許多的黑魔法，更應該要打好基礎！

剛剛推薦了一個全英文的免費學習資源，這邊幫大家補上一個中文的免費學習資源。

我知道你們要說這是在業配我老闆的書，但相信我，這本書真的有非常多基礎的觀念，而且我知道中文對於初學者來說有多麼的友善～

但為了讓想窺探框架的人能夠有所獲，這本書中強調了許多關於 Ruby 的基本知識，讓你能夠理解 Ruby on Rails 的黑魔法以及他能做些什麼！

最有趣的地方就是書中有許多圖片以及口語化的敘述，讓人能夠抽象化思考過程的本質，針對 Rails 的 MVC 架構 以及 Route 也有著有趣的說明，使初學者能夠快速地了解不同物件之間的交互作用！

書本尾段的購物車實作，更能讓人體會到程式語言這麼抽象的東西，到底是如何呈現在網頁上？

跟著做過一次之後，才能體會到那些抽象的東西，到底是從哪裡傳向哪裡，在這過程中又得到什麼？轉變了什麼？原來電商是這樣子啊......

啊......不說了不說了，我也要來去做一遍，不然要落後給別人了呢～

### 特點：
1. 中文書，看起來就是爽！
2. 使用會發生在身邊的案例來解釋重要觀念。
3. 手把手的環境安裝教學。

## [UPCASE by thoughtbot ( 全英文 )](https://thoughtbot.com/upcase/rails)

> **衷心建議：**
>
> 看著影片學習刻畫雖然會有短暫的成就感。
> 
> 但別忘記要內化成自己的東西，才有辦法舉一反三，做出自己的作品唷

[thoughtbot](https://thoughtbot.com/) 本身是一間設計以及開發諮詢的公司，針對客戶的 APP 提供諮詢和顧問的服務！

他們在指導客戶團隊時，發現缺少了許多中等級別的教材，所以他們決定建立 [UPCASE](https://thoughtbot.com/upcase/rails) 這個網站來填補那些空白！

除了 Rails、Git、JavaScript 之外，甚至還教你用 Vim 的課程都有提供，相信我，學會 Vim 這個輸入法，對於撰寫程式的速度有著極大的提升......

不小心離題了，總之這是個難度比前面兩個免費資源稍稍高一些的網站！

但當你有確實的學習並理解前面兩個免費資源後，這個網站對於提升你的理解又有更大的幫助。

雖然 [Intermediate Ruby on Rails](https://thoughtbot.com/upcase/intermediate-ruby-on-rails-five) 這部教學是 Rails 5 的版本，且其內容也確實稍稍難了一些，但版本對於學習 Rails 的基礎並沒有太大的不同，反而能夠看到一些有趣的寫法呢！

### 特點：
1. 下方有討論區，可以看看別人對於影片內容是如何提問的，對！提問很重要。
2. 每支影片的標題都很明顯，還有 Note 來告訴你這支影片你該學會什麼。
3. 不定期會發布深度討論 Rails 的影片。

## [Ruby on Rails Guide ( 全英文 )](https://guides.rubyonrails.org/)

等等......這看起來一臉官方手冊，是不是拿這種網站在交差了事？

你先聽我娓娓道來，這個網站的作用就像是字典一樣，當你在前面的學習資源遇到瓶頸的時候，歡迎進來這個網站逛逛，嘗試找到你不懂的名詞，裡面都會有非常詳細的說明和範例！

我知道第一次進入這個網站的時候，會有一種 我在哪 我是誰 的感覺！

以下會帶你做一次追尋答案的過程是什麼情形？

假設情境：

看著學習課程中，出現了一段沒有看過的程式碼......

```ruby
class UserController < ApplicationController
  before_action :find_user # << 這是什麼？

  def index
  ....
end
```

真是的，我完全不理解這個 `before_action` 到底是什麼東西？

登登登愣！`Ruby on Rails Guide`

這時候就派上用場了，我們先根據這個名詞出現的場合來做分析！

可以得知他在 Controller 的下面，那我們把畫面跳轉到 Ruby on Rails Guide 

![Ruby on Rails Guide](https://i.imgur.com/5S4qN6i.png)

點擊黃色框框處會彈出一塊面板，這時候我們仔細的找到 Controller 相關的標題

![Controller-Ruby on Rails Guide ](https://i.imgur.com/y4jdmFv.png)

點擊 `Action Controller Overview` 就會進入到介紹 Controller 的頁面！

勇敢地使用你網頁的搜尋功能 ( mac: `command + f`，window: `CTRL + f` )

打上 `before_action` 這時候就會協助你跳到這個名詞出現的地方，我們就可以看到關於 `before_action` 的敘述

![搜尋 Ruby on Rails Guide](https://i.imgur.com/0xGnUZ5.png)

以上，Ruby on Rails Guide 就是幫助你查找的工具，希望有幫助到你！

### 特點：
1. 絕對正統，不容質疑，基本上不會有錯誤資訊。
2. 完整度也是不容質疑，即便是工程師也還是會翻來自我檢視一下。

## 自我學習的優缺點

### 優點：

自我學習很棒的優點在於可以自行安排學習時間以及進度。

若你是一個學習速度快、自制力也很高的人 ( 英文也要很好 )，那我很推薦你可以在家裡面自我學習，畢竟參加線下課程的進度是規劃好的，若你的學習速度太快，老師也不會為了你而加快進度。

在家自己學習就可以根據自己的理解來調整該學些什麼，也可以在想要休息的時候休息，比較不會有被綁死在一個地方的感覺！

### 缺點：

我認為自我學習最大的缺點在於缺乏社群團體的推力！

畢竟學習程式語言本身並不是一件簡單的事情，當自己一個人學習又找不到問題的答案時，很容易陷入自我放棄的漩渦，以及你沒有辦法驗收自己的學習程度。

怎麼說呢？假設你今天已經自學了兩個月了，但你很有可能不知道自己現在的學習情況到底是好是壞，畢竟沒有人可以告訴你現在的方向是正確的，還是其實已經歪掉了？

還有關於團體討論的問題，因為人類的腦袋很容易陷入錨定效應，若在撰寫程式的時候，沒有加入其他人的意見來激盪你的腦力，很容易寫出自己覺得很棒，但其實成效不好的程式碼！

## 自我學習的小訣竅

誰都會有需要自我學習的時候，一些嶄新的技術，或是你自己有興趣的技術都是，都會需要自己上網查看文件，看看別人的 Demo。

我自己的方式都是先看成品，了解整個運作的方式，再來想像背後的邏輯，而且不會要求自己一定要想到正確的答案，畢竟這並不是一件好事，當你被正確答案的桎梏住的時候，就更容易陷入尋找所謂正確答案的漩渦。

在一開始你可以先用自己的理解來說服自己，然後持續的吸收相關知識，看更多的討論，有些時候你就會遇到 `aha moment`，這種豁然開朗的感覺，是自我學習的時候最棒的時候了！

> aha moment 也稱作尤里卡效應：指的是人類突然理解一個以前無法理解的問題或概念時的時刻。一個以前無法解決的難題突然變得清晰和明顯。這種從不理解到自發理解的轉變往往伴隨著喜悅或滿意的感嘆。

還有在剛開始學習程式語言的時候，也能透過聯想的方式，和現實生活中的例子做連結，找到可以讓自己快速理解的方式！

## 結語

說了那麼多關於自我學習的方向和優缺點，免費學習資源其實才是這篇文章的主軸啦！

我們從上述的免費學習資源來看，到處都充滿著英文的文件和影片，這也意味著英文對於軟體工程師是不可或缺的工具！

希望不要因為是全英文就放棄掉自我學習的機會，如果對於你的英文沒有信心的話，那現在更是你練習的好機會，因為是自學的關係，你可以大方地打開你的 Google 翻譯，趁著這波自我學習順便把程式常常出現的英文記起來吧！

也要謹記學習框架的優缺點，不要本末倒置，學習好 Ruby 這個程式語言會讓你事半功倍喔！

---

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


Post - 自學 Ruby on Rails 推薦的免費資源 TOP 5

自學 Ruby on Rails 推薦的免費資源 TOP 5

## 為什麼需要知道 HTML ？

![](https://i.imgur.com/RopQh7S.jpg)

如果你的工作會和網站工程師溝通，或是你的工作是網路行銷、網頁設計師、數位產品 PM ，時常會需要和工程師溝通網頁需要新增哪些功能、會出現哪些文字、樣式會是什麼樣子，或者網路行銷要調整網站的 SEO 等，都需要了解網頁的 HTML 架構，至少要理解眼前所見的頁面、圖像、元件，背後都是由 HTML 組成。

## 什麼是 HTML ?

HTML 是一種用來建構網頁的 **標記語言** 而非程式，可以想像網頁就像一頁文件，而文件內會有標題、內文、圖片、頁尾等元素。**HTML 是告訴瀏覽器網頁上有哪些標題、圖片、文字等**。

![什麼是 HTML?](https://i.imgur.com/TAaSk4L.jpg)

而這些元素包含了標籤、內容，不同的元素，會用標籤 `<>`  標示出來，例如標題 `<h1>` 、網頁內容 `<body>`、圖片 `<img>` 等。
呈現方式會像以下：

![什麼是 HTML? 標記語言說明](https://i.imgur.com/fxISuUE.jpg)

少部分標籤沒有結尾標籤，例如圖片：

![什麼是 HTML? 圖片標記](https://i.imgur.com/jRzK3uI.jpg)

附帶一提，在上方圖片標籤 `<img>` 可以看到裡面包含了 `src` 和 `alt` 這些都是這個標籤的『**屬性**』；每個標籤都有提供不同的屬性，讓這個元素標籤的資訊能夠更完整。

## 什麼是 Emmet ？

![Emmet](https://i.imgur.com/EhQk0mI.jpg)

如果你開始寫 HTML ，會發現他的文件可能有很多細節需要注意，讓我們看一份最基本的 HTML 文件：

![什麼是 Emmet ？](https://i.imgur.com/UKcjjZ9.png)

可以從上面看到，一段文字開頭和結束，都會出現標籤。當網頁的元素越來越多時，工程師可能會漏寫一個標籤而導致頁面跑版(和預期的顯示結果不同)或是要重複寫同樣的標籤等。

因此，就有 [Emmet](https://emmet.io/) 這個套件，讓工程師可以寫短短幾個代表字和快捷鍵，就能自動產生完整的標籤。減少漏寫標籤，或是一次產生多筆的標籤等。加速開發的效率。

除此之外是他在主流的開發者用的編輯器(用來寫 HTML 和程式的工具)像是 [VS Code](https://code.visualstudio.com/)、[Sublime Text](https://www.sublimetext.com/) 還有線上即時渲染的網站 [codepen](https://codepen.io/) 、[JS Bin](https://jsbin.com/?html,output)、[JS Fiddle](https://jsfiddle.net/) 都可以使用喔！

現在就開啟你熟悉的編輯器，和我一起試試看以下這些常用的 Emmet 語法吧！ ✈️

---

### 1. `>`：建立裡面的(子層) Tag

Emmet 範例： 輸入 `ul>li>p` + `Tab 鍵`

HTML 結果：

```html
<nav>
  <ul>
     <li></li>
  </ul>
</nav>
```

讓我們來看一下實際示範：
![](https://i.imgur.com/gPetJ6q.gif)

### 2. `+`：建立接連著(兄弟層)的 Tag

Emmet 範例：輸入 `div+h1+h2` + `Tab 鍵`

HTML 結果：

```html
<div></div>
<h1></h1>
<h2></h2>
```

### 3. `*` ：建立重複的 Tag

Emmet 範例：輸入 `ul>li*5` + `Tab 鍵`

HTML 結果：

```html
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
```

### 4. `{ }` ：Tag 內的文字

Emmet 範例： 輸入 `ul>li*5{這是清單}` + `Tab 鍵`

HTML 結果：

```html
<ul>
  <li>這是清單</li>
  <li>這是清單</li>
  <li>這是清單</li>
  <li>這是清單</li>
  <li>這是清單</li>
</ul>
```

### 5. `$` ：建立編號

Emmet 範例：輸入 `ul>li*5{清單編號：$}` + `Tab 鍵`

HTML 結果：

```html
<ul>
  <li>清單編號：1</li>
  <li>清單編號：2</li>
  <li>清單編號：3</li>
  <li>清單編號：4</li>
  <li>清單編號：5</li>
</ul>
```

### 6. `@-` ：編號降冪 (需再放在 `$` 之後)

Emmet 範例：輸入 `ul>li*5{清單編號：$@-}` + `Tab 鍵`

HTML 結果：

```html
<ul>
  <li>清單編號：5</li>
  <li>清單編號：4</li>
  <li>清單編號：3</li>
  <li>清單編號：2</li>
  <li>清單編號：1</li>
</ul>
```

### 7. `[ ]` ：輸入屬性

Emmet 範例： 輸入 `a[href="www" target="_blank"]` + `Tab 鍵`

HTML 結果：

```html
<a href="www" target="_blank"></a>
```

### 8. `.` / `#` ：建立 `class` 或 `id` 命名

Emmet 範例： 輸入 `.box` 或 `#name` + `Tab 鍵`

HTML 結果：

```html
// .box 👇
<div class="box"></div>

// #name 👇
<div id="name"></div>
```

想要知道更多 Emmet 細節嗎？歡迎查閱 Emmet 文件 👇
[https://docs.emmet.io/cheat-sheet/](https://docs.emmet.io/cheat-sheet/)

<br>

---

### 推薦課程

> 👩‍🏫 課務小幫手：
>
> ✨ 想了解更多 HTML / CSS 知識和技巧嗎？
> 也歡迎報名課程 👉 [網頁前端設計女性專班](https://5xruby.tw/courses/code-for-girl)

快速生成 HTML & CSS ！Emmet 語法大公開！- Cover

快速生成 HTML！Emmet 語法大公開！


## 前言

在學習 Ruby on Rails 的過程中，筆者初次與 `Scope` 的相遇，不是一個很友善的結果，只知道 `Scope` 在 Rails `models` 中，可以用來查詢資料庫資料，但是某些符號和其背後的運作，要真正去了解後，才會用的順手，因此，我們藉由這篇文章帶大家一起來了解吧！

## Scope 前導，先來認識 Block & Proc & lambda

### 何謂 Block (程式碼區塊)？

Block (程式碼區塊) 呈現方式為大括號 `{ ... }` 以及 `do ... end`。

Ruby 是一款物件化很徹底的程式語言，在 Ruby 的世界裡面幾乎都是物件，而 `Block` 就是其中少數的例外之一，它不能獨立存在，需要依附在方法或物件後面，連指定到變數都會造成語法錯誤。

```ruby=
{ puts "Hello, World" }            # 會產生語法錯誤
say_hello = { puts "Hello, World" }   # 會產生語法錯誤
```
我們經常使用 `Block` 的方式是依附在方法後面，而我們也可以將 `Block` 給物件化，那就是使用 `Proc` 和 `lambda`。

### 如何使用 Proc & lambda ？

直接先來 Proc 的使用方式：

```ruby=
def proc_example
  example = Proc.new { p "I am Proc" }
  example.call
end
proc_example

# 當執行 proc_example 時，會印出 "I am Proc"
```
這邊我們使用 `Proc` 類別把 `Block` 物件化，接下來使用 `call` 方法來執行。

而 lambda 則是：

```ruby=
def lambda_example
  example = lambda { p "I am lambda" }
  example.call
end
lambda_example

# 當執行 lambda_example 時，會印出 "I am lambda"
```

有發現嗎？ 感覺起來是不是和 `Proc` 很像！沒錯，因為 `lambda` 是 `Proc` 的實體，所以它不用 `new`，我們是如何知道的呢？ 以下這段 `code` 即可證明 。

```ruby=
def check_method(item)
  puts "A item is a #{item.class}"
  puts "A item instance: #{item.inspect}"
  item.call
end
proc_item   = Proc.new { p 'This is a proc' }
lambda_item = lambda { p 'This is a lamnda' }

check_method proc_item 
check_method lambda_item

# A block is a Proc
# A block instance: #<Proc:0x00007f90d6825208@example.rb:12>
# "This is a proc"
# A block is a Proc
# A block instance: #<Proc:0x00007f90d6824e20@example.rb:13 (lambda)>
# "This is a lamnda"
```

### 帶入參數方法

Proc 帶入參數方法

```ruby=
say_hello = Proc.new { |name| puts "你好，#{name}"}
say_hello.call("CY")
```

lambda 帶入參數方法

```ruby=
say_hello = lambda { |name| puts "你好，#{name}"}
say_hello.call("CY")
```

### lambda 和 Proc 的差異
這兩個幾乎一模一樣，主要只有兩個差異 `控制權順序` 和 `檢查參數` 。

1.控制權順序不同：

```ruby=
def proc_example
  example = Proc.new { return "I am Proc" }
  example.call

  "Proc not return"
end

def lambda_example
  example = lambda { return "I am lambda" }
  example.call

  "Lambda not return"
end

p proc_example # "I am Proc"
p lambda_example # "Lambda not return"
```

由上範例我們可以得知 `lambda` 會將控制權丟回呼叫 `method` 本身，繼續往下執行該程式碼，而 `Proc` 的 `return` 則不會，是立即跳出。

2.檢查參數：

```ruby=
lambda { |name| puts "Hi, #{name}"}.call
=> ArgumentError (wrong number of arguments (given 0, expected 1))

Proc.new { |name| puts "Hi, #{name}"}.call
=> Hi,
nil
```

從這個範例可以發現 `lambda` 會對參數進行檢查，如果是 `nil` 則會直接拋出 `error`，而 `Proc` 則是以 `nil` 當參數帶入。

因此接下來要介紹的 `Scope` 運用在 `Rails` 的 `ActiveRecord Model`，要撈取資料時，都會使用 `lambda` 來進行，原因就是 `lambda` 更謹慎。

## Scope 起手式

使用 `Scope` 時，首先需注意參數問題，每個 `Scope` 接受兩個參數：

1. 第一個是 name，這是你要去呼叫這個 `Scope` 的名字。
2. 第二個是 lambda (也可以用 `->` 表示)，這是我們要執行的程式碼，例如：搜尋條件。

寫起來會像，如以下的程式碼

```ruby=
class Book < ApplicationRecord
  scope :with_author, -> { where(author: "CY") }
end
```
當我們去執行這個 `with_author` Scope 時，就會拿到 `ActiveRecord::Relation` 的物件。

這時候我們也可以來使用組合技

```ruby=
class Book < ApplicationRecord
  scope :with_author, -> { where(author: "CY") }
  scope :with_page_count, -> { where("page_count > 100") }
end
```

ex.
```ruby=
Book.with_author.with_page_count.last(3)
```
這裡指的是我要尋找作者是 CY 且頁數是大於 100 頁的書，再從這些尋找的書裡面，取最後 3 本。

## Scope 加入參數用法

接下來我們要讓 Scope 更靈活一點，這時我們可以加入參數。
沿用剛剛的例子：

```ruby=
class Book < ApplicationRecord
  scope :with_author, -> { where(author: "CY") }
  scope :with_page_count, -> { where("page_count > 100") }
end
```
當我呼叫 `with_author` 時，我會去找屬於 CY 的書，但如果我要找的作者，不就還要寫另外的 `Scope` 或者修改 `with_author` 這個 `Scope` ，因此為了解決這個問題，我們可以加入參數的用法，如下：

```ruby=
class Book < ApplicationRecord
  scope :with_author, ->(Name) { where(author: name) }
  scope :with_page_count, ->(count) { where("page_count > ?", count) }
end
```

如果像搜尋頁數，只要在條件字串裡面加上問號，後面帶入 `count` 這參數即可。

## Scope 和 Class method 比較

其實 `Scope` 和 `Class method` 一樣，都只是個方法(method)，
並沒有比較特別或神奇的地方，而 `Scope` 可以做到的，`Class method` 也可以，如下：

```ruby=
class Book
  def self.with_author
    where(author: "CY")    
  end
end
```
既然如此，我們使用 `Scope` 又有什麼好處呢？
1. 使用 `Scope` 可以讓我們程式碼更乾淨更好閱讀一點。
2. `Scope` 只做一件事情，所以當我們在呼叫時，不用擔心會插入其他的事情。
3. 經 `Scope` 出來一定是 `ActiveRecord::Relation`，但 Class method 不一定是。

## Default Scopes

這個就有神奇的小地方，當我們在 `book` 的 `Model` 設 
```ruby=
default_scope { where(published: true) }
```
這時候我們要撈取 book 資料時，都只會撈到 `published` 欄位為 `true` 的 book。

但這時候，如果我們想要撈取 `published` 欄位為 `false` 的 book 呢？

這時候就需要使用 `unscoped` 的方法支援，如下：

```ruby=
unscoped_book = Book.unscoped.find(book_id)
```
#### 使用時機：大部份用於固定條件查詢。

大家 Search 關於 `Default Scopes` 資訊的時候，可能會有些建議說不要用，是因為我們設了 `Default Scopes`，過了一陣子，要再撈取相關資料時，卻忘了這事，導致我們 `debug` 不易，加上可能要花不少時間來去調整，但我還是秉持著只要知道自己在做什麼，而確信不會為未來的自己造成麻煩，用 `Default Scopes` 是沒有問題的。

## 結語

最後複習一下 `Scope` 這個超酷的功能。`Scope` 將常用的查詢條件先宣告起來，以備隨時都可以取用，進一步也讓程式變得乾淨易讀，更厲害的是可以串接使用，對於新手可能一開始不容易懂，但一旦理解真的事半功倍。

以上是對 `Scope` 初步介紹，此篇文章有任何問題歡迎 [來信](mailto:cy@5xcampus.com) 與我討論。

最後，希望透過這篇文章，能讓大家對 `Scope` 不再陌生。

謝謝你的閱讀！

---

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


資料查找，原來 Ruby on Rails 的 Scope 是這樣用的！- Cover

資料查找，原來 Ruby on Rails 的 Scope 是這樣用的！

<br/>

> 👩‍🍳 **關於 CSS 料理室** : 
> 
> CSS 料理室的主廚可能會打翻麵粉、可能會調配出黑暗料理，但是實驗精神是不會少的！ 
> 
> 總之，讓我們一起透過一道又一道料理，認識 CSS 吧！

## 🍽 食譜完成照：

![](https://i.imgur.com/D5BCQ4q.gif)

## 🥬 食材準備：
1. CSS 變數： `--*`
2. HTML `input` 標籤： `input[type="checkbox"]`
3. CSS 選取器：` X + Y`, `X ~ Y`

## 📒 食譜簡介：
這次製作的料理，主要是使用原生的 CSS [變數](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) 實做出深色模式和淺色模式的切換。除此之外，我們還會利用 HTML `<input>`  標籤當中的 `checkbox` 實做 『切換』這個動作，以下將介紹這些食材的特性。

### 🍖 食材介紹(ㄧ)： CSS 自訂變數 `(--*)`

CSS 變數 `(--*)` 讓我們自訂命名，讓規範或常用的數值取一個名字，好讓其他成員在使用時可以更好理解。
例如：

```css
/* 原本的樣式 */
.card {
    background: #FFFFFF;
    color: rgba(255, 98, 98, 1);
}

/* 使用自訂變數 */
:root {
    --bg-white: #FFFFFF;
    --text-pink: #FF6262;
}

.card {
    background: var(--bg-white);
    color: var(--text-pink);
}
```

從上面使用自訂變數的範例中，可以很快速的知道 `.card` 使用了 `白色` 的背景， `粉紅色的文字` 樣式。如果我們想要改粉紅色的色票，只要到 `--text-pink` 中去調整就行了！

#### 全域 CSS 變數與獨立區域的 CSS 變數
在使用 CSS 變數時，也可以將這個變數選擇放在全域或是某個區域範圍內，在 `:root {....}` 當中的變數是**全域共用**的：

```css
/* :root 全域共用的樣式 */
:root {
  --pink: #FF6262;
}

/* 只有在 .container 裡面的 --pink */
.container {
    --pink: #FF006B;
}

.container {
    color: var(--pink); /* pink => #FF006B */
}

body {
    color: var(--pink); /* pink => #FF6262 */
}
```

### 🍖 食材介紹(二)： `<input type="checkbox">`

`<input type="checkbox">` 是一個單純的勾選標籤，有三種狀態：

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

並且在 CSS 也可以直接設定這些狀態樣式，例如：

```css

input[type="checkbox"] {
    /* 這邊設定的 Unchecked 的樣式 */
}

input[type="checkbox"]:checked {
    /* 這邊設定的 checked 的樣式 */
}

input[type="checkbox"]:indeterminate {
    /* 這邊設定的 indeterminate 的樣式 */
}
```

其中 `indeterminate` 這個介於已選取和未選取之間的狀態，是需要透過 JavaScript 去定義在什麼情況下會出現 `indeterminate` 狀態。這次不會使用這個狀態。

我們可以利用 checkbox 的兩個狀態 : `unchecked` & `checked` 去做到類似 JavaScript『點擊』後觸發的樣式。

### 🍖 食材介紹(三)： CSS 選取器 `X + Y` , `X ~ Y`
最後一個重要食材 - CSS 選取器，從上面兩個食材當中我們已經準備好：

1. 將樣式顏色命名：管理 CSS 自訂變數
2. 如何觸發樣式：使用 `<input type=checkbox>`

接著，我們需要指定樣式『**套用的範圍**』。
從完成照當中仔細地看到，我是將滑鼠進入 Dark / Light 的按鈕時才會觸發，實際上 HTML 的結構層，我是將卡片和按鈕排在**同一層**，讓觸發範圍限制在按鈕樣式 `<input>` 裡。如果我將卡片樣式放進去 `<input>` 裡，那麼整張卡片將會一起被當成觸發範圍。

如果我的 input 和卡片樣式是同層的話，我可以透過 `X ~ Y` 來選取：

#### CSS 選取器： `X ~ Y`
選取同層(兄弟層)的元素，意思是選取在 **`X` 之後的 `Y`**。

<iframe height="300" style="width: 100%;" scrolling="no" title="css selectors : +" src="https://codepen.io/debby87059/embed/vYmMMQQ?default-tab=css%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/debby87059/pen/vYmMMQQ">
  css selectors : +</a> by debby (<a href="https://codepen.io/debby87059">@debby87059</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

#### CSS 選取器：`X + Y`
選取***緊鄰***的**同層**元素，參考以下範例，他只會選取到緊鄰`<h1>` 的 `<p>`。

<iframe height="300" style="width: 100%;" scrolling="no" title="css selectors : +" src="https://codepen.io/debby87059/embed/abWMKBP?default-tab=css%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/debby87059/pen/abWMKBP">
  css selectors : +</a> by debby (<a href="https://codepen.io/debby87059">@debby87059</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

<br/>
<br/>
<br/>

## 👩‍🍳 料理步驟： 實現 CSS 變數 Dark Mode 吧！

### 🖋 步驟一：使用 CSS 自訂變數，建立色票
首先，先將深色和淺色模式會使用到的顏色都先運用自訂變數，建立色票，準備好：

```css
:root {
  --bg-color: #F1E8E8;
  --white: #FFFFFF;
  --black: #282F3C;
  --pink: rgba(255, 98, 98, 1);
  --pink-light: rgba(255, 98, 98, 0.3);
  --pink-lighter: rgba(255, 98, 98, 0.1);
  --gray: #959595;
}
```

### 🖋 步驟二：設定 Checkbox 樣式

```html
<div class="container">
  <input type="checkbox" id="toggle" name="toggletheme">
  <label for="toggle">
    <span class="dark">Dark</span>
    <span class="light">Light</span>
  </label>
</div>
```

##### 1. `<label>` 標籤的 `for` 屬性:
在示範上將 `<label>` 存取文字，並且放在與 `<input>` 同層的位置，我們可以指定這兩者產生關聯，讓 `<input>` 觸發的條件對應到 `<label>` 內。如何設置呢？
將 `<input>` 的 `id` 與 `<label>` 的 `for` 設置成相同值：

![](https://i.imgur.com/wUqrlC7.jpg)

更詳細的介紹：[\<label> - HTML ｜ MDN ](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/label)

##### 2. 選取 `<input>` 緊鄰的 `<label>`
首先我們將瀏覽預設的 `<input>` 樣式隱藏，並透過 `<label>` 建立這個按鈕的樣式。
我使用 `X + Y` 從 `<input>` 狀態控制 `<label>` 樣式，實際上操作會像這樣：

```css
/* 隱藏預設 input 樣式 */
input[type="checkbox"] {
  display: none;
}

/* input[type="checkbox"] 緊鄰的 label */
/* 在 checkbox 未點擊的樣式 */
input[type="checkbox"] + label {
    ......
}

/* 在 checkbox 點擊後的樣式 */
input[type="checkbox"]:checked + label {
    .....
}

```

Tip: 可以看到 `label` 裡面有 `<span>Dark</span>` 和 `<span>Light</span>` 這會用 `checked` 判斷在 Light 模式時，`<span>Light</span>` 的文字隱藏，Dark 模式則是相反。

##### 3. `::before` 圓形樣式：
另外使用 `::before` 做出假圓形，模擬出按鈕樣式：

<iframe height="300" style="width: 100%;" scrolling="no" title="Toggle Dark mode - CSS Variables / Toggle button" src="https://codepen.io/debby87059/embed/dyWrjPp?default-tab=css%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/debby87059/pen/dyWrjPp">
  Toggle Dark mode - CSS Variables / Toggle button</a> by debby (<a href="https://codepen.io/debby87059">@debby87059</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

從上面的 Toggle 按鈕當中可以看到，我已經選取到 `:checked` 的狀態時，按鈕會是如何呈現的，如此就能夠延伸出在 `:checked` 狀態下的 `.card` 的樣式。

### 🖋 步驟三：刻出卡片

從上一步，我們建立了切換深淺色的按鈕後，接著我們就可以利用：

##### 使用 CSS 選取器 `X ~ Y`  製作卡片樣式。
首先 `input` 、 `label` 和製作卡片的樣式 `<div class="card"></div>` 放在同層，像以下：

```html
<div class="container">

  
  <input type="checkbox" id="toggle" name="toggletheme">
  <label for="toggle"></label>

  
  <div class="card">
    ......
  </div>
</div>
```

可以從上面看到，要使用 `<input>` 的 `:checked` 選取器來製作點擊後的卡片樣式，中間隔了 `<label>` 要怎麼樣能夠跨過 `<label>` 呢？

這時候就可以使用 CSS 選取器：`X ~ Y` ！ 直接選取在 `<input>` 之後的 `<div class="card">`

因此我們就能夠這樣做設定：

```css
/* 預設卡片樣式 (未點擊的狀態) */
.card {
    ...
}

/* 點擊後的卡片樣式 (Dark Mode) */
input[type="checkbox"]:checked ~ .card {
    ...
}
```

<iframe height="570" style="width: 100%;" scrolling="no" title="css - variables" src="https://codepen.io/debby87059/embed/XWROErJ?default-tab=css%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/debby87059/pen/XWROErJ">
  css - variables</a> by debby (<a href="https://codepen.io/debby87059">@debby87059</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

### 🎁 Bonus - CSS 選取器：`X > Y`
從完成的 `Card` 樣式，可以看到我使用大量的 `X > Y` 方式選取，這個選取器的特性是什麼呢？

`X > Y` 是選取***緊鄰***的**子層**元素，這邊則是選取相連同層的元素，讓我們看以下範例：

<iframe height="300" style="width: 100%;" scrolling="no" title="css selectors :  &gt;" src="https://codepen.io/debby87059/embed/PomLaKb?default-tab=css%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/debby87059/pen/PomLaKb">
  css selectors :  &gt;</a> by debby (<a href="https://codepen.io/debby87059">@debby87059</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

<br/>
<br/>

## 結語

以上就是這次的 CSS 料理室 - CSS 變數辛香料，看完你是否也想嘗試玩玩看 Dark Mode 切換了嗎？
我雖然對於 CSS 變數命名還是有點覺得有點長(囉唆？XD ) 但，看到 CSS 解決了變數的方法，真覺得是一大福音啊！
除此之外 CSS 的 `:checked` 也是一個很有趣的的選取器，實務上也經常使用這樣的選取器製作像是收合樣式、開啟關閉的樣式，更多的方法也可以參閱：[You Don't Need JavaScript | Accordion](https://github.com/you-dont-need/You-Dont-Need-JavaScript#Accordion)

如果你有試做這次的料理 🥘 ，歡迎[分享](https://www.facebook.com/5xruby)給我們知道！或是製作上有任何問題歡迎[來信](mailto:debby@5xcampus.com)交流👋 ～ ！

----

想了解更多 HTML / CSS 知識和技巧嗎？

也歡迎報名課程 👉 [網頁前端設計 女性專班](https://5xruby.tw/courses/code-for-girl)

css-variable

CSS 料理室 (一) | CSS 變數辛香料：不用 Sass、不用 JavaScript，也能實做 Dark Mode Theme 切換！

## 前言
在學習前端的的過程中，多少一定都有聽過 Webpack 這個名詞，而什麼是 Webpack 呢？當我聽到這個問題的時候，第一時間會先愣住，不知從何回答起，經過幾秒鐘的思考後，最後回答會是「它是一個模組打包工具」，不知道大家有沒有和我一樣呢？這個回答沒有錯，不過可能會有更多疑問，那模組又是什麼？為什麼需要打包？

這篇文章，將從模組化切入，來帶大家了解 Webpack 究竟幫我們做了多少事？
## 模組化
### 為什麼需要模組化設計?
試著回想我們最開始學習 JavaScript 的時候，我們會把程式碼寫在 HTML 檔案中，如下

```html
// index.html

<script>
    var a = 1

    function double(x){
        return 2 * x
    }

    double(a)
</script>
```

但隨著功能越來越多我們會把 `script` 裡面的內容獨立出來到一個 JS 檔中：

```html
// index.html

<script src="./main.js"></script>
```

```javascript
// main.js

var a = 1

function double(x){
    return 2 * x
}

double(a)

var b = 2

function square(x){
    return x * x
}

square(b)

var c = 4

function add(x, y){
    return x + y
}

add(c, b)
```

再來想像一下，當開發人員越來越多，功能也一直再新增，如果都繼續編寫同一個 JS 檔，當行數不再是 24 而是 1000，將變得非常難以閱讀及維護。為了避免這樣的情況發生，我們可以拆成多個 JS 檔，如下

```html
// index.html

<script src="./utils.js"></script>
<script src="./main.js"></script>
```
```javascript=
// utils.js

function double(x){
    return 2 * x
}

function square(x){
    return x * x
}

function add(x, y){
    return x + y
}
```

```javascript
//main.js

var a = 1
var b = 2
var c = 4

double(a)
square(b)
add(c, b)
```

目前我們雖然把程式碼分開了，但實際上它還是在同一個作用域下，其中的變數是會互相影響。例如，我新增了一個 utils2.js 檔，並宣告一個 `add` 函式，且實作內容和 utils.js 中的 `add` 函式不一樣，如下

```html
// index.html
<script src="./utils.js"></script>
<script src="./utils2.js"></script>
<script src="./main.js"></script>
```

```javascript
// utils.js

function add(x, y){
    return x + y
}
```

```javascript
// utils2.js

function add(x, y){
    return x + y + 4
}
```

```javascript
//main.js

var b = 2
var c = 4

console.log(add(c, b)) // 10
```
如果我們期望在 main.js 使用 `add` 函式會得到兩數之和，會因為 utils2.js 在 utils.js 後面載入，而覆蓋掉 utils.js 的函式宣告，最後導致結果出現不如預期。所以我們需要將 utils.js 與 utils2.js 這兩個檔案的內容各自獨立出來，互不干擾，而想要達到這樣的效果，我們可以使用 IIFE 來完成。

#### IIFE（立即呼叫函式 Immediately Invoked Functions）

```javascript
// utils.js

var moduleUtils = (function(){
    var author = 'Mr.A'

    return {
        add: function(x, y){
                return x + y
            },
        getAuthor: function(){
            return author
        }
    }
})()
```

```javascript
// utils2.js

var moduleUtils2 = (function(){
    var author = 'Mr.B'

    return {
        add: function(x, y){
                return x + y + 4
            },
        getAuthor: function(){
            return author
        }
    }
})()
```

```javascript
//main.js

var b = 2
var c = 4

console.log(moduleUtils.getAuthor()) // 'Mr.A'
console.log(moduleUtils.add(c, b)) // 6

console.log(moduleUtils2.getAuthor()) // 'Mr.B'
console.log(moduleUtils2.add(c, b)) // 10
```

透過立即呼叫函式的方式，建立作用域幫我們達到三點效果：
1. 解決變數或是函式命名上的衝突
2. 能夠建立私有變數與方法
3. 自由選擇要將哪些變數、方法暴露出去

因此，我們打算在 main.js 檔案中，取得變數 `author` 的值，只能透過 `moduleUtils.getAuthor()` 的方法。最值得注意的地方是，這樣子規劃，只能讀取而無法直接修改。這種模式就是最一開始模組化的概念，稱為模組模式。

這個模式看起來好像很完美了，但其實還是有一個小問題。假設 utils2.js 這個模組需要依賴 utils.js 的方法或是變數，我們就一定要注意 script 引入的先後順序，如下

```javascript
// utils.js

var moduleUtils = (function(){
    var author = 'Mr.A'

    return {
        getAuthor: function(){
            return author
        }
    }
})()

```

```javascript
// utils2.js

var moduleUtils2 = (function(module){
    var author = 'Mr.B'
    var authorFromUtils = module.getAuthor()

    return {
        getTwoAuthors: function(){
            return author + '_&_' + authorFromUtils
        }
    }
})(moduleUtils)
```

```javascript
//main.js

console.log(moduleUtils.getAuthor()) // 'Mr.A'
console.log(moduleUtils2.getTwoAuthors()) // 'Mr.B_&_Mr.A'
```
```htmlembedded=


<script src="./utils.js"></script>
<script src="./utils2.js"></script>  
<script src="./main.js"></script>
```
隨著相依性的檔案越來越多，專案的維護難度也會隨之提高。

综合以上，隨著前端專案規模越來越大，就越需要模組化的開發，來提升專案的維護性。隨著趨勢的發展，就有些模組化的規範相繼而出，而其中最為有名的就是 CommonJS。

## Node.js 與 CommonJS
Node.js 能夠讓 JavaScript 在 server 環境中執行，並採用了 CommonJS 模組規範。所以在 server 端來說，每個檔案都是獨立的作用域，且都有 `require` 函式和 `module` 物件。

1.`module` 物件
每個檔案都會有 `module` 物件，這個物件底下有一個 `exports` 的屬性，如果在這個檔案中有想要輸出的變數或是方法，可以透過賦值給 `exports` 來達成，如下

```javascript
// 只有單一值
var name = 'will'

module.exports = name
```

```javascript
// 多個值 第一種寫法
var name = 'will'

module.exports.name = name
module.exports.getName = function(){
    return name
}
```

```javascript
// 多個值 第二種寫法
var name = 'will'

function getName(){
    return name
}

module.exports = {
    name,
    getName
}
```

2.`require` 函式

當需要載入某檔案，取得 `module.exports` 的值時，會使用 `require` 函式尋找該檔案，如下

```javascript
// a.js
var name = 'will'

module.exports.name = name
module.exports.getName = function(){
    return name
}

// b.js
var aModule = require('./a.js')
aModule.getName() // will
```

了解 CommonJS 規範之後，我們就可以很輕鬆的將之前的範例改寫，如下

```javascript
// utils.js

var author = 'Mr.A'

function getAuthor(){
    return author
}

module.exports.getAuthor = getAuthor
```

```javascript
// utils2.js

var moduleUtils = require('./utils')

var author = 'Mr.B'
var authorFromUtils = moduleUtils.getAuthor()

function getTwoAuthors(){
    return author + '_&_' + authorFromUtils
}

module.exports.getTwoAuthors = getTwoAuthors
```

```javascript
//main.js
var moduleUtils = require('./utils')
var moduleUtils2 = require('./utils2')

console.log(moduleUtils.getAuthor()) // 'Mr.A'
console.log(moduleUtils2.getTwoAuthors()) // 'Mr.B_&_Mr.A'
```

這樣寫相較 IIFE 簡單多了，但別忘了改成這樣子，實際上是沒辦法在瀏覽器上執行的，只能在 Node.js 環境下執行。既然瀏覽器不支援，要怎麼樣才能在瀏覽器執行？我們可以借助其他工具，也就是 Webpack，它會將我們的模組翻譯成瀏覽器支援的寫法，並且打包成一個壓縮過的 JS 檔。

不過在介紹 Webpack 之前，相信有些人會有疑惑，在寫專案都沒有使用 `require` 或 `module.exports` ，都是用 ES6 的 `import` 和 `export` ，而且瀏覽器也有支援，那為什麼還需要 Webpack？ 在回答這個問題之前，先來認識一下 ES6 Module。

## ES6 Module
在 ES6 以前，沒有正式的模組化規範，所以有各種模組化的寫法，像是上面介紹的 CommonJS，或是 AMD (Asynchromous Module Definition 非同步模組定義)等等。而 ES6 出來之後，終於有了正式的規範，就是上面提到的 `import` 與 `export`，我們可以再把上面的例子用 ES6 Module 改寫，如下

```javascript
// utils.js

let author = 'Mr.A'

export function getAuthor(){
    return author
}
```

```javascript
// utils2.js

import { getAuthor } from './utils.js'

let author = 'Mr.B'
let authorFromUtils = getAuthor()

export function getTwoAuthors(){
    return author + '_&_' + authorFromUtils
}
```

```javascript
//main.js
import { getAuthor, author } from './utils.js'
import { getTwoAuthors } from './utils2.js'

console.log(getAuthor()) // 'Mr.A'
console.log(getTwoAuthors()) // 'Mr.B_&_Mr.A'
```

```html

<script src="./main.js" type="module"></script>
```

依照目前的使用情境，看起來都沒有什麼太大的問題，但假設我們想要使用別人的套件呢？或許我們可以使用 CDN 引入，但如果說這個套件也沒有 CDN，我們就只能透過 NPM 或 Yarn 這類型的套件管理工具來下載。

套件下載完畢後，會放到 node_modules 這個資料夾裡，這樣子我們引入的路徑就可能要改寫成 `'./node_modules/xxx/index.js'` 這樣子。假設哪天套件的入口點換了，整個專案有使用到這個套件的都需要改寫，這樣其實很不方便。除此之外，有些套件輸出是寫 `module.exports`，我們也沒辦法使用 `import` 來引入，因此這個時候，我們就需要藉由 Webpack 的幫助。

## Webpack 

### 初步認識 Webpack

在前面我們就有提到，Webpack 是一模組打包工具，不管我們是寫 CommonJS 又或是 ES6 Module 最終它會將我們的模組以及使用 NPM 安裝他人的模組一併打包成一個 JS 檔。接著讓我們來實際試試看如何使用 Webpack 打包。

如果上面的有跟著練習的話，目前的專案目錄會是這樣子

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

1.開啟終端機輸入下面兩行指令

```
npm init -y 
npm install webpack webpack-cli --save-dev
```
順利的話，就會看到我們的目錄新增了兩個檔案分別是 package.json 和 package-lock.json，以及 node_modules 的資料夾

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

2.打開 package.json 並在 scripts 底下新增指令

```javascript
// package.json
{
  "scripts": {
    "build": "webpack" 
  },
}
```

3.新增 webpack.config.js 檔案

```javascript
// webpack.config.js
module.exports = {
  mode: 'development', 
  entry: './main.js', // webpack 打包的起始檔案
  output: {
    path: __dirname, // 在這個 config 檔同層的目錄
    filename: 'bundle.js'// 打包輸出的檔名
  }
}
```

`mode` 這個屬性不寫的話預設會是 `production`，代表在生產環境下使用，所以會自動幫你壓縮以及優化。`development` 這個模式代表開發的時候，打包的速度較快。

最後在終端機下
```
npm run build
```
執行之後順利的話就會出現建置的成功訊息

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

接著修改我們 index.html，將 main.js 換成 bundle.js

```html

<script src="./bundle.js"></script>
```

打開瀏覽器 console 之後，就會順利看到我們在 main.js 檔 `console.log` 的結果

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

這樣我們就成功地使用 Webpack 來幫我們把模組打包，不過目前為止我們還沒嘗試安裝套件來使用，接下來我們來試著安裝 React 

```
npm install react react-dom
```

安裝成功後，就來試試看能不能使用 React，並在畫面上印出 Hello, Webpack and React，所以將檔案做一下修改

```html


<body>
  <div id="root"></div>

  <script src="./bundle.js"></script>
</body>
```

```javascript
//App.js

import React from "react"

function App() {
  return React.createElement('h1', {}, "Hello Webpack and React")
}

export default App
```

```javascript
//main.js

import { getAuthor, author } from './utils.js'
import { getTwoAuthors } from './utils2.js'
import App from './App.js'
import ReactDom from 'react-dom'
import React from 'react'

const appEl = React.createElement(App)
ReactDom.render(appEl, document.getElementById('root'))

console.log(getAuthor())
console.log(getTwoAuthors())
```

最後我們再重新 build 一次

```
npm run build
```

成功看一下建置的訊息會發現，Webpack 的確有去 node_modules ，將我們使用的套件模組一併打包

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

最後打開畫面，除了之前在 console 印出來的結果外，也可以看到 Hello, Webpack and React! 

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

### 強大的 Webpack

Webpack 打包 JS 模組只是它功能的冰山一角，如果有看過 [Webpack 官網](https://webpack.js.org/) 可以看到首頁的這張圖：

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

Webpack 把任何資源都當作模組，像是 CSS 或是圖片，我們都可以用 `import` 的方式把檔案給引入進來，如果不使用 Webpack 是沒辦法做到的。而為了支援這樣子的功能，Webpack 透過定義不同的 `loader` 來識別檔案類型並轉譯成瀏覽器看得懂的語法。例如 `babe-loader` 能夠幫助我們將 ES6 以上的新語法轉譯成 ES5。除此之外，還可以透過 `plugins` 來擴充 Webpack 的功能，像是壓縮 CSS 檔，或是打包過後自動產生 HTML 等等。

 ## 結語
到這邊相信大家對 Webpack 應該有個基礎的認識了，也瞭解到為什麼需要使用 Webpack。回過頭來看在使用 creat-react-app 以及 Vue CLI，我們能夠輕鬆的 `import` CSS 或圖片，背後都是因為有 Webpack 在處理。 

最後，如果想要更加瞭解 Webpack，可以參考[ 五倍紅寶石學院 ](https://campus.5xruby.tw/courses)的[ Webpack5 入門 ](https://campus.5xruby.tw/p/webpack5)線上課程。

從模組化帶你認識 Webpack - post

從模組化帶你認識 Webpack

## 前言

在瀏覽網站的時候，可以根據我們的喜好更換版面，即使重新整理或關閉瀏覽器後，再度開啟該網站時，設定居然都還存在！或者是購物網站，將物品加入購物車，但沒有結帳就關掉瀏覽器，過了很久之後，再次去買東西，購物車裡的物品也都還在，究竟是為什麼呢？其實透過後端做存取就可以解決這個問題了，但瀏覽器也有個神秘的儲存空間可以提供我們做使用，就是 localStorage。

這篇文章，將帶大家來了解什麼是 localStorage ？ 如何使用 localStorage？

## localStorage 基本介紹

隨著瀏覽器不斷的進步，功能也越來越強大。在 HTML5 出來之前，我們只能將最多 4K 的資料儲存在 cookie 裡面。現在 HTML 5 中，新加入了 Local Storage 作為本地儲存來使用，一般瀏覽器容量為 5M(不同瀏覽器支援的容量會有所不同)。

### LocalStorage 優缺點

#### 優點:

1. 增加本地儲存空間。
2. 儲存資料方式，為 `key` 和 `value`。
P.S. `key` 和 `value` 資料儲存型態為 `String`。

#### 缺點:

1. `value` 儲存型態只接受 `String`。
2. 無痕或隱私模式下無法讀取。
3. 資料量太多，存取時，容易照成畫面卡頓。
4. 有些比較較舊的瀏覽器版本(IE 8 以下)沒有支援。

### localStorage 與 sessionStorage 的差異

在使用方法上大致相同，只有以下的差異：
1. localStorage 的資料是永久存在，唯有清除它才會消失。 
2. sessionStorage 的資料則是當網頁關閉時，就會清除。

### localStorage 的使用方法

1. `localStorage.setItem('key', 'value')`：透過 `setItem()` 方法中將物件屬性的 `key` 和 `value` 當成參數傳入，我們就可以在 `storage` 物件中加入屬性或修改原本的屬性內容。

2. `localStorage.getItem('key')`：透過 `getItem()` 方法將屬性的 `key` 當成參數傳入，我們就可以得到 `storage` 物件對應的 `value` 。

3. `localStorage.key()`：透過 `key()` 方法中輸入屬性的順序位置，我們可以取得 `storage` 物件中該位置的屬性 `key`，而位置順序和陣列表示方法一樣，由 0 開始。

4. `localStorage.removeItem()`：透過 `removeItem()` 方法，我們可以把指定的屬性從 `storage` 物件中移除。

5. `localStorage.clear()`：透過 `clear()` 方法，我們可以直接把 `storage` 中的所有屬性移除。

## localStorage 簡單練習

![練習畫面-1](https://i.imgur.com/nqBKKVC.png)

我們來運用 localStorage 來實作簡易一個會員登入系統。
(溫馨小提醒：這邊單純範例練習，實務上有關於使用者的基本資料或者密碼，請勿將這些資訊存放在 localStorage 上。)

### 步驟一：創建帳號

![步驟一：創建帳號](https://i.imgur.com/4q90U87.gif)

當我們按下 SIGN UP `button` 後，就會跳出 `alert` 提醒創建成功。

接下來就會在 localStorage (開發者工具 => Application => Storage => Local Storage) 裡面出現剛剛輸入的資料。

而這邊我們是將使用者的帳號密碼組合成 localStorage 的 `key`，把 Name 成為 `value`，使用 `setItem()` 方法進行儲存。

```JavaScript
signUpBtn.addEventListener('click', () => {
    const signUpName = document.querySelector('#signUpName')
    const signUpEmail = document.querySelector('#signUpEmail')
    const signUpPassword = document.querySelector('#signUpPassword')
    const storageKey = signUpEmail.value + signUpPassword.value //將使用者的帳號密碼組合成 Key
    const checkUser = Boolean(localStorage.getItem(storageKey))

    function successAction() {
      if(checkUser) {
        return alert('The email has already created it, please re-enter')
      }

      // 使用 setItem() 方法來儲存資料
      localStorage.setItem(storageKey, signUpName.value)
      signUpName.value = ''
      signUpEmail.value = ''
      signUpPassword.value = ''
      alert('Created successfully, please go to sign in page')
    }

    if(signUpEmail.value === '' || signUpPassword.value === ''){
      alert('The input box cannot be empty')
    } else {
      successAction()
    }
  })
```

### 步驟二：登入

![步驟二：登入](https://i.imgur.com/n2MJKWL.gif)

我們一開始可以看到 Local Storage 裡面有屬性 `dev@5xcampus.coma1s2d3f4`，而相對應的 `value` 為 CY ，當我們輸入完帳號密碼後組成了 `key` ，然後使用 Local Storage 的 `getItem()` 方法，將相對應的 `value` 取出，在組合字串最後渲染出來。 

這邊偷偷埋個下一步要解決的關鍵要素，就是當我們成功登入時，在 localStorage 多了一個 `MemoryAccount` 的屬性，有發現嗎 ？ 而究竟為什麼呢 ？ 將在下一步揭曉。

```javascript=
loginBtn.addEventListener('click', () => {
  const loginEmail = document.querySelector('#loginEmail')
  const loginPassword = document.querySelector('#loginPassword')
  const sayHiElement = document.querySelector('.sayHi')
  const storageKey = loginEmail.value + loginPassword.value // 將帳號密碼組成 Key。
  const userName = localStorage.getItem(storageKey) // 這邊將 Name(CY) 從 localStorage 裡面取出來
  const checkUser = Boolean(userName)

  function loginAction() {
    if(!checkUser) { 
      return alert('Please create an account first')
    } 

    const confirmMemory = confirm('Do you want to save this password?')
    loginEmail.value = ''
    loginPassword.value = ''
    alert('sign in suceesfully')
    // 這邊將從 localStorage 取出的文字和 Hi~ 組合成一個字串。
    sayHiElement.textContent = `Hi~ ${userName}` 
    if(confirmMemory){
      //暴雷一下，這裡再儲存一次是為了重新整理或關掉頁面，可以維持登入狀態。
      localStorage.setItem('MemoryAccount', `Hi~ ${userName}`) 
    }
  } 

  if(!loginEmail.value || !loginPassword.value){
    alert('The input box cannot be empty')
  } else {
    loginAction()
  }
})
```

### 步驟三：重新整理

![步驟三：重新整理](https://i.imgur.com/MXspeY1.gif)

我們預期重新整理後，『 Hi~ CY 』還是會在，為什麼呢 ？ 那是因為我們在上一個步驟登入時，第一個 `alert` 問我們的是 『 Do you want to save this password ? 』 選擇 『 是 』 後，程式根據我們的回答進行儲存資料。

接下來當我們重新整理時，我們會去 localStorage 裡面找 `MemoryAccount` 屬性，並拿出我們儲存的 `value` 渲染在畫面上。 

```javascript=
function firstRnder() {
  const sayHiElement = document.querySelector('.sayHi')
  const storageMemory = localStorage.getItem('MemoryAccount') //這邊取出上次使用者的資訊
  let status = localStorage.getItem('status')
  !status && localStorage.setItem('status', 'login')
  if(storageMemory){
    //判斷是否有使用者的資訊，再去執行第 8 行渲染
    sayHiElement.textContent = storageMemory
  }
  changePage()
}
```

### 步驟四：登出

![步驟四：登出](https://i.imgur.com/S7PkTU2.gif)

最後我們要來實現登出，這是所有步驟中最簡單的，只要使用 `clear()` 方法將 localStorage 裡面的資料清除即可。

```javascript=
logOutLink.addEventListener('click', () => {
  const sayHiElement = document.querySelector('.sayHi')
  localStorage.clear() //使用 clear 方法，清除所有資料。
  sayHiElement.textContent = 'Hello, Friend !'
})
```

Codepen 連結 ：<a href='https://codepen.io/ice12031110/full/PomoBOR'>https://codepen.io/ice12031110/full/PomoBOR</a><br><br>

## 結語

當我們製作網頁時，如果此頁資料是必須帶往下一頁或者是離線狀態使用，localStorage 這時候就可以派上用場。

雖然 localStorage 非常方便，但在使用時，須注意儲存的資料是否為重要資料，因為 localStorage 只要打開開發者工具就能看到，毫無安全性可言，任何人都可以對其進行修改。

而這邊使用登入的例子，是為了帶大家使用 localStorage 的方法，也藉此說明 localStorage 須注意的事項。

這次實作範例有放在 <a href='https://codepen.io/ice12031110/full/PomoBOR'>Codepen</a> 上面，對此篇文章有任何問題歡迎 [來信](mailto:cy@5xcampus.com) 與我討論。

最後，希望透過這篇文章，能讓大家對 localStorage 不再陌生。

謝謝你的閱讀！

---

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

認識瀏覽器的神秘儲存空間 - localStorage - cover

認識瀏覽器的神秘儲存空間 - localStorage


線上購物已成為目前消費行為的主流趨勢，而商家為了擁有更多元的付款方式以及方便對帳及退款的後台管理，通常就會仰賴第三方金流服務。

目前台灣主流的金流商為綠界科技、紅陽科技及藍新科技，三者提供的付款功能除了基本的信用卡收退款外也都各自有不同的服務，因此商家可以根據自己的商業需求來決定金流商。

本篇文章將會以藍新金流多功能付款 (MPG) 中的信用卡及 ATM 付款來做示範，在開始前需要做一些小準備：

- 一個 Rails App
- 藍新金流的測試帳號，須包含 Hash Key、Hash IV 及商店代號
- [藍新金流 API 文件](https://www.newebpay.com/website/Page/content/download_api)（本篇以 MPG 服務為例）

如果都已經準備好了，那我們就進入正題吧 ─=≡Σ(((っﾟ∀ﾟ)っ

## 建立 Service

先在專案資料夾內建立 `app/service/newebpay/mpg.rb`，我們會將金流的邏輯主要都寫在 `mpg.rb` 這個檔案內，如果不知道什麼是 Service Object 可以參考 [Rails 程式碼整理術（進階)](https://railsbook.tw/chapters/26-organize-your-code-advanced.html)。

```ruby
module Newebpay
  class Mpg
    def initialize
    end

    def test
     "Test success!"
    end
  end
end
```

進 `rails console` 測試一下，看起來是沒問題的！

```ruby
> Newebpay::Mpg.new.test
=> "Test success!"
```

## 開始串接 API

要開始串接 API 最重要的一件事，就是看看手冊內的需求是什麼。

🧙 傳送門：[Newebpay MPG 串接手冊](https://www.newebpay.com/website/Page/download_file?name=%E8%97%8D%E6%96%B0%E9%87%91%E6%B5%81Newebpay_MPG%E4%B8%B2%E6%8E%A5%E6%89%8B%E5%86%8A_MPG_1.1.0.pdf)

### 資料交換

在與第三方 API 溝通時，要先確認我們的 request 需要哪些資料以及如何傳送，而藍新也提供了相當清楚的資訊：

1. 以「Form Post」方式傳送交易資料至藍新金流進行交易
2. Post 參數內需包含 `MerchantID`、`TradeInfo`、`TradeSha`、`Version`
3. `TradeInfo` 則由複數參數組成
4. `TradeInfo` 與 `TradeSha` 這兩個參數需要進行加密的動作

### 參數設定

![藍新金流 Post 參數](https://i.imgur.com/oFdXqgJ.png)
<small>圖片來源：藍新科技 / Post 參數</small>

透過上圖，其實除了 `TradeInfo` 外欄位資訊都相當單純，因此我們可以先主攻 `TradeInfo` 來看看該帶入哪些資訊！ 

在文件 **TradeInfo 內含參數欄位** 這個分類中，最重要的是要先找到「必填」的資訊有哪些，以及選擇要使用哪種支付服務，最後再來將這些資訊整理起來：

```ruby
# TradeInfo 欄位

{
  # 這些是藍新在傳送參數時的必填欄位
  MerchantID: "MS12345567",
  MerchantOrderNo: "yuchan6666",
  TimeStamp: Time.now.to_i.to_s,
  RespondType: "JSON",
  Amt: 123,
  Version: "1.6",
  ItemDesc: "第一次串接就成功！",
  Email: "test@gmail.com",
  LoginType: 0
  # --------------------------
  # 將要選擇的付款服務加上參數
  CREDIT: 1,
  VACC: 1,
  # 即時付款完成後，以 form post 方式要導回的頁面
  ReturnURL: "商品訂單頁面"
  # 訂單完成後，以背景 post 回報訂單狀況
  NotifyURL: "處理訂單的網址"
}
```
我自己是以 `NotifyURL` 去處理訂單的更新資訊，並且由 `ReturnURL` 處理訂單成功或失敗的轉址。其實除了上面使用到的參數外，像交易限制秒數及繳費有效期限等等也蠻常使用的，使用者可以看看自己有哪些需求再適時加上。

好的，既然 `TradeInfo` 已經知道要哪些資訊了，那麼就來排排看要送 post 的資料會是怎樣的結構。確定好內容後，就可以開始開始思考我們的 service 怎麼寫了！

```ruby
{
    MerchantID: "MS123456789",
    TradeInfo: { 
         MerchantID: "MS123456789",
         RespondType: "JSON",
         TimeStamp: "1400137200",
         Version: "1.6",
         # etc...
     },
    TradeSha: # TradeInfo 經 AES 加密後再 SHA256 加密,
    Version: "1.6"
}
```

### 開始動工 service

#### 1. 參數處理

抓回我們一開始寫的 `mpg.rb`，可以將重複使用的固定資訊在 `initialize` 時就準備好，並且將 form post 要使用的參數放入 service 中。

```ruby
module Newebpay
  class Mpg
    attr_accessor :info

    def initialize(params)
      @key = "hash key"
      @iv = "hash iv"
      @merchant_id = "merchant id"
      @info = {}  # 使用 attr_accessor 讓 info 方便存取
      set_info(params)
    end

    def form_info
      {
        MerchantID: @merchant_id
        TradeInfo: trade_info,
        TradeSha: trade_sha,
        Version: "1.6"
      }
    end

    private

    def trade_info
      # AES256 加密後的資訊
    end

    def trade_sha
      # SHA256 加密後的資訊
    end

    def set_info(order)  
      info[:MerchantID] = @merchant_id
      info[:MerchantOrderNo] = order.slug
      info[:Amt] = order.amount 
      info[:ItemDesc] = order.name 
      info[:Email] = order.email 
      info[:TimeStamp] = Time.now.to_i 
      info[:RespondType] = "JSON"
      info[:Version] = "1.6"
      info[:ReturnURL] = "https://...."
      info[:NotifyURL] = "https://...."
      info[:LoginType] = 0 
      info[:CREDIT] =  1,
      info[:VACC] = 1
    end

  end
end
```

#### 2. 將 `info` 進行加密處理

這應該是最難的一關了，文件內其實沒寫得很清楚需要哪些步驟，很多關鍵還只藏在範例的程式碼內，對於沒接觸過 PHP 或 .net 的人來說就稍微頭痛了一點。因此整理了一份適合 Rails 的範本來使用。

1.將內容轉為 query string

```ruby
def url_encoded_query_string
  URI.encode_www_form(info)
end
# => "MerchantID=MS12345567&TimeStamp=1624388594&RespondType=JSON..."
```

2.trade_info 加密

利用 query 化的 info、hash key 與 hash iv 來進行 AES256 資料加密

```ruby
def trade_info
  aes_encode(url_encoded_query_string)
end

def aes_encode(string)
  cipher = OpenSSL::Cipher::AES256.new(:CBC)
  cipher.encrypt
  cipher.key = @key
  cipher.iv = @iv
  cipher.padding = 0
  padding_data = add_padding(string)
  encrypted = cipher.update(padding_data) + cipher.final
  encrypted.unpack('H*').first
end

def add_padding(data, block_size = 32)
  pad = block_size - (data.length % block_size)
  data + (pad.chr * pad)
end
```

3.trade_sha 加密

將 trade_info 加密後的結果再透過 SHA256 加密一次

```ruby
def trade_sha
  sha256_encode(@key, @iv, trade_info)
end

def sha256_encode(key, iv, trade_info)
  encode_string = "HashKey=#{key}&#{trade_info}&HashIV=#{iv}"
  Digest::SHA256.hexdigest(encode_string).upcase
end
```

這樣差不多就大功告成了，實作的完整程式碼如下：

```ruby
module Newebpay
  class Mpg
    attr_accessor :info

    def initialize(params)
      @key = "hash key"
      @iv = "hash iv"
      @merchant_id = "merchant id"
      @info = {}  # 使用 attr_accessor 讓 info 方便存取
      set_info(params)
    end

    def form_info
      {
        MerchantID: @merchant_id
        TradeInfo: trade_info,
        TradeSha: trade_sha,
        Version: "1.6"
      }
    end

    private

    def trade_info
      aes_encode(url_encoded_query_string)
    end

    def trade_sha
      sha256_encode(@key, @iv, trade_info)
    end

    def set_info(order)  
      info[:MerchantID] = @merchant_id
      info[:MerchantOrderNo] = order.slug
      info[:Amt] = order.amount 
      info[:ItemDesc] = order.name 
      info[:Email] = order.email 
      info[:TimeStamp] = Time.now.to_i 
      info[:RespondType] = "JSON"
      info[:Version] = "1.6"
      info[:ReturnURL] = "https://...."
      info[:NotifyURL] = "https://...."
      info[:LoginType] = 0 
      info[:CREDIT] =  1,
      info[:VACC] = 1
    end

    def url_encoded_query_string
      URI.encode_www_form(info)
    end

    def aes_encode(string)
      cipher = OpenSSL::Cipher::AES256.new(:CBC)
      cipher.encrypt
      cipher.key = @key
      cipher.iv = @iv
      cipher.padding = 0
      padding_data = add_padding(string)
      encrypted = cipher.update(padding_data) + cipher.final
      encrypted.unpack('H*').first
    end

    def add_padding(data, block_size = 32)
      pad = block_size - (data.length % block_size)
      data + (pad.chr * pad)
    end

    def sha256_encode(key, iv, trade_info)
      encode_string = "HashKey=#{key}&#{trade_info}&HashIV=#{iv}"
      Digest::SHA256.hexdigest(encode_string).upcase
    end
  end
end
```

只要成功呼叫這個 service 就能夠產出符合 API 需求的 requset（如下圖）<br>
至於要怎麼送 form post 出去這種簡單問題，就交給大家自己解決了(ゝ∀･)b

```ruby
class PaymentsController < ApplicationController
  def create
    # 要記得附上該筆訂單的資訊，才有辦法建立付款喔！
    order = Order.find(1)
    @form_info = Newebpay::Mpg.new(order).form_info
  end
end
```

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

如果沒碰到什麼問題，應該就能夠順利看到付款畫面了，可喜可賀！

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

## 付款完成後

付款完成錢錢進帳，就大功告ㄔㄥˊ...等等，還沒結束！<br>
錢錢入帳的確是大事，但如果我們的系統都沒有紀錄，那麼訂單的管理可能會發生世紀大亂。

還記得我們當初有設定 `ReturnURL` 跟 `NotifyURL` 嗎？當付款完成後，藍新也會以 post 的形式回傳支付訊息給我們，但回傳回來的資訊也是經過加密的，所以還需要再處理回傳參數的**解密**。

解密的範例藍新也有提供 PHP 版本，而本篇同樣整理了 Rails 能夠使用的範例，至於回傳參數有哪些、商家會需要哪些資料，都可以在藍新手冊找到喔！

以下為實作範例：

```ruby
module Newebpay
  class MpgResponse
    # 使用 attr_reader 可以更方便取用這些資訊
    attr_reader :status, :message, :result, :order_no, :trans_no

    def initialize(params)
      @key = "your hash key"
      @iv = "your hash iv"

      response = decrypy(params)
      @status = response['Status']
      @message = response['Message']
      @result = response['Result']
      @order_no = @result["MerchantOrderNo"]
      @trans_no = @result["TradeNo"]
      # etc...
    end

    def success?
      status === 'SUCCESS'
    end

    private
      # AES 解密
      def decrypy(encrypted_data)
        encrypted_data = [encrypted_data].pack('H*')
        decipher = OpenSSL::Cipher::AES256.new(:CBC)
        decipher.decrypt
        decipher.padding = 0
        decipher.key = @key
        decipher.iv = @iv
        data = decipher.update(encrypted_data) + decipher.final
        raw_data = strippadding(data)
        JSON.parse(raw_data)
      end

      def strippadding(data)
        slast = data[-1].ord
        slastc = slast.chr
        string_match = /#{slastc}{#{slast}}/ =~ data
        if !string_match.nil?
          data[0, string_match]
        else
          false
        end
      end
  end
end
```
```ruby
class PaymentsController < ApplicationController
  def notify_response
    response = Newebpay::MpgResponse.new(params[:TradeInfo])
  end
end
```

同樣也是沒意外就能夠取得回傳資訊來更新訂單資訊了！

只要了解每個環節該做什麼事，用 Rails 串藍新金流沒那麼難，但因為篇幅問題沒辦法實際帶大家把所有的功能寫完，如果有興趣可以自己將內容補完並且跑起來試試看。但需要注意因為這是範例，實際使用時部分比較隱私的資訊最好使用 ENV 保護起來才是比較正確的喔。

我有將這次的實作內容放在 [GitHub](https://github.com/lumir1031/newebpay_demo) 上，或是對此篇文章有任何回饋都歡迎[來信](mailto:yuchan@5xcampus.com)與我討論！

最後最後，如果對 Ruby on Rails 有興趣的話，可以參考近期即將開課的 [Ruby on Rails 實戰課程](https://5xruby.tw/courses/ruby-on-rails)

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

ASTRO Camp

線上課程

短期課程

技術文章

五倍消息

技術文章

Ruby on Rails 入門 - 幫助你開發的 Mac 小工具分享

自學 Ruby on Rails 推薦的免費資源 TOP 5

快速生成 HTML！Emmet 語法大公開！

資料查找，原來 Ruby on Rails 的 Scope 是這樣用的！

CSS 料理室 (一) | CSS 變數辛香料：不用 Sass、不用 JavaScript，也能實做 Dark Mode Theme 切換！

從模組化帶你認識 Webpack

認識瀏覽器的神秘儲存空間 - localStorage

用 Rails 串接藍新金流一點都不難！

訂閱文章

電話 | (02) 2331-5247

信箱 | [email protected]

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

專業課程

ASTRO Camp

線上課程

短期課程

關於我們

關於五倍紅寶石

聯絡我們

媒體報導

加入我們

部落格

技術文章

五倍消息

幫助與政策

常見問題

隱私權政策

服務條款