Pry

Irb 的替代品，正常使用的方式是先取得 binding 後呼叫 pry

binding.pry

但為了便利性，#pry 被加入進 Object 中，因此目前任何地方都可以被呼叫。

Pry 不是 debugger 工具，它僅是 interactive shell (如同 IRB)，因此無法控制接下來的程式運作流程，如單步執行等等。

Byebug

這是真正的 debugger 工具，與 Pry 相比，它能夠使用 Step 運作下一行程式碼，其預設的 interactive shell 是 IRB。

pry-byebug

由於 byebug 預設使用 irb，因此這個套件就是把 byebug 的 interactive 換成 pry。

debugger

這是一個在 Ruby 2.0+ 出現的 gem，據說已經掛掉2年了

但進行在 Ruby 3.1 中出現了新的 gem debug，這是整合過去 debugger 而成的 gem

References

• https://blog.pawandubey.com/explained-binding-pry-byebug-debugger/

料理食材(內文內容)

• Gitbook的簡介
• node、nodejs、npm、nvm的差別
• 安裝Gitbook
• 使用Gitbook

誰可以安心食用(適合誰讀)

• 知道Markdown語法
• 會操作terminal
• 你的電腦是Mac

服用完你會獲得什麼

• 知道Gitbook是什麼
• 知道如何安裝Gitbook(超重要)
• 知道如何使用Gitbook

Gitbook的簡介

GitBook是一個非常好用文件管理器，以框架的文件來說，需要的僅有目錄和內容，而Gitbook所產生出的靜態網頁則十分符合這種簡潔的需求，它的呈現就像以下：

左邊有一個side bar放文章目錄，中間則是內文

作為一個呈現文件資訊的網頁，這樣子頁面就很足夠了。

安裝Gitbook

1. 安裝nvm

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/install.sh | bash

2. 使用nvm安裝node v10.23.3(一定要用v10.23.3，不然gitbook會裝不了)

nvm install 10.23.0

3. 安裝gitbook-cli

npm install -g gitbook-cli

node、nodejs、nvm、npm的差別

這幾個是我當初在安裝nodejs時，常常會搞混的一些東西，因此放在這裡記錄。

• node v.s nodejs

這兩個是相同的東西，用Ubuntu使用sudo apt-get install -y nodejs安裝node，而MacOSX的homebrew則是使用brew install node，在踩了幾次坑後，我一律都用nvm來下載node，確保不會有名稱錯誤的問題。

• nvm

nvm是一個管理node版本的工具，就如同rvm是管理ruby版本的工具，要下載特定版本時可以使用nvm install 14或是nvm install node安裝最新版，安裝後可以使用nvm use 14進行版本切換。

• npm

網路上有許多經由node製作的包，而npm就是用來管理這些包的工具，類似於RubyGem用為管理Ruby的包，如果要安裝特定的包可以使用npm install [email protected]，不加後面的@2.3.0就會安裝最新版的包。

建立Gitbook專案

首先先建立一個空的資料夾
mkdir mybook && cd mybook

重開terminal後可能導致你node版本變為預設的最新版，使用nvm use 10.23.3進行切換

1. 執行gitbook初始化

gitbook init

如果執行正確，你會看到以下訊息：

2. 啟動gitbook服務

gitbook serve

之後瀏覽http://127.0.0.1:4000就會看到以下畫面：

完成到這一步代表你的gitbook安裝正確。

編寫Gitbook專案

在你的專案中目前會有三個檔案

1. README.md
2. SUMMARY.md
3. _book/

接著我們打開SUMMARY.md，可以發現裡面含有以下的內容：

# Summary

* [Introduction](README.md)

簡單來說，這是一個表達目錄的檔案，接著我們為其新增一個章節，在該檔案 內加入一行* [Test]](Test.md)

之後再專案中建立一個檔案Test.md，並在其中填入以下內容：

# Test
Hello, World!

完成後開啟gitbook服務gitbook serve，瀏覽器開啟http://127.0.0.1:4000，如果已開啟的話按下Shift + CMD + R整理網頁即可看到變化。

你就可以看到以下畫面：

如果你希望Test是Introduction的其中一個章節，你也可以將SUMMARY.md更改為以下：

# Summary

* [Introduction](README.md)
    * [Test](Test.md)

這樣子目錄就會變成這樣：

當文件編寫完成後，可以考慮部署至Github Pages，關於如何部署可以參考這裡

加入插件

Gitbook的預設功能雖然已經夠用了，但人類總是貪婪的，而網路上有許多善心人士為了滿足人類的貪婪，於是就做了幾種邪惡的套件，讓用過的人再也回不去單純的Gitbook，如何使用還請繼續看：

1. 在gitbook專案的根目錄中新增book.json這個檔案
2. 填入以下內容

   {
   "plugins": [
       "-search", "search-pro","back-to-top-button","chapter-fold","copy-code-button","advanced-emoji","splitter"
       ]
   
   }
   

3. 至該目錄執行gitbook install，安裝gitbook插件
4. 開啟gitbook服務gitbook serve
   之後你就可以看到加入插件後的gitbook了

善心人士提供的實用gitbook plug大全

結語

Gitbook是一個寫文件非常好用的利器，近期我在與卡米哥一同編寫kamigo框架的文件時，也是決定使用GitBook作為編寫文件的工具，雖然它十分容易上手，但卻非常難安裝，多虧了網路上許多tral and error的苦主，最終才確定node v10.23.3可以正常安裝，真是感謝！

物件導向程式設計

1. 設計的本質為何？
   1. 設計的本質是為了應付未來的變化
2. 為何選擇物件導向程式語言？
   1. 物件導向程式的信奉者相信藉由程式描述現實中的物件(Object)與其之間的訊息(Message)，可以有效的管理程式碼的依賴關係，從而應付未來的變化
3. 何時該做設計？
   1. 取決於當下的能力和時間表並做出馬上能得到效益(享受到易於修改)的設計
4. 如何評估設計的好壞
   1. 透明性：程式碼的修改結果是顯而易見，容易了解有哪些地方會受到影響
   2. 合理性：修改的效益與成本
   3. 可用性：re-usable，不依賴於上下文
   4. 典範性：作為典範讓他人擴充
5. 設計失敗的原因
   1. 不知道怎麼設計
   2. 一知半解的套用各種 Design pattern，導致設計和實作完全分離時(改不動了)

單一職責的類別

1. 為何單一職責是屬於物件導向語言的 Principle？
   1. 物件導向語言和程序性語言最大的不同在於資料和行為之間息息相關，為此我們會將相關的資料和行為放在同一個類別中，提高「內聚」。
2. 為何要追求單一職責？
   1. 一個類別知道得越多，代表依賴的越多，那它就越難重複使用，因為很容易牽一髮動全身，遵守單一職責的類別容易修改且不用擔心後果
3. 如何判斷物件是否遵守單一職責？

   1. 「高內聚」，這個物件所做的所有事跟與其目標非常相關

   2. 藉由把類別當成一個人來提問

      想像有一個書店 BookStore 類別，並向他提問……

      書店先生，請問你有賣 Ruby 物件導向程式實踐 這本書嗎？
      : 有

      書店先生，請問你的推薦的書籍？
      : Ruby 物件導向程式實踐

      書店先生，請問你有提供什麼食物？
      : ???

4. 無法切分準確的職責？
   1. 等待更多的資訊，別畫蛇添足

撰寫擁抱變化的程式碼(For Ruby)

1. 依賴於行為而非資料

   # bad
   puts @var
   -----
   # good
   attr_reader :var
   puts var

2. 隱藏資料結構

   # bad
   book = data # array
   book[0] # Name
   book[1] # author
   book[2] # publish year
   -----
   # good
   BookModel = Struct.new(:name, :author, :publish_year) <-- 當 data 順序有變時，只需調整這裡
   book = BookModel.new(data)
   book.name
   book.author
   book.publish_year

管理依賴關係

1. 對於任何訊息，物件會有三種回應方式
   1. 自己本身知道如何回應
   2. 經由繼承回應
   3. 藉由別的物件回應
2. 依賴重會發生什麼事？
   1. 知道越多，代表依賴越重，當需求出現變化時，修改程式碼的成本會變高
3. 減少依賴的一些方法？

   1. 使用 keyword argument 取代參數順序

      1. 當 keyword argument 太多的時候，可以用 **arg

         def calculate(**arg)
         	params = default_arg.merge(arg)
         	...
         end
         
         private
         
         def default_arg # 提供參考
         	{
         		unit_price: 0,
         		quantity: 0,
         	}
         end

      2. 遇到不可修改的 class 時，可以用 factory

         class Calculator
         	def initialize(unit_price, quantity, ...) # 改不動
         		...
         	end
         end
         
         module CalculatorWrapper
         	def self.build(hash)
         		Calculator.new(hash[:unit_price], hash[:quantity])
         	end
         end
         
         CalculatorWrapper.build({
         	unit_price: 10,
         	quantity: 10
         })

   2. 依賴注入

      1. 使用依賴注入避免相依於具體的類別，因為我們關心的只有這個物件能不能回應某個行為

      2. 依賴注入可以延伸到另一個觀念「反轉依賴」，導致依賴的方向是可以自由決定的，我們可以得知幾個原則：

         1. 應依賴於不容易變化的類別
         2. 具體比抽象更容易變化
         3. 減少依賴將能夠降低修改的成本

         # scenario: 記者報導商家
         # V1
         class Reporter # 永久不變
         	def report(store)
               ...
         	end
         end
         
         reporter.publish(store)
         
         # V2
         class Store # 每天都在變的，method
         	def is_reported_by(reporter)
               ...
         	end
         end
         store.is_reported_by(reporter)
         
         # 假如 Reporter 比 Store 更不易變化(method name 不會變來變去)
         # 該選擇 V2

建立靈活的介面

1. Domain model 很容易發現，例如：使用者、商家，但之間傳遞的訊息才是構成整個 Application 的核心，而訊息藉由介面在物件中傳遞
   1. UberEat 和 CYBERBIZ 都有 shop 和 customer 類別，但這兩者傳遞的訊息卻不同
2. 可以藉由順序圖了解訊息的傳遞，可以發現隱藏的物件和設計公共介面
3. 用「要什麼」取代「如何要」，專注於結果，並且可以使用依賴注入來達成上下文獨立
4. 當出現 chaining method 時很可能違反「 迪米特法則」，「 迪米特法則」是一套能帶來鬆耦合的守則，表象解是用 delegation，但本質上應該是目前程式碼處於「如何要」的狀態

使用鴨子類型技巧降低成本

1. 當出現「我知道你是誰，並且我知道你能做什麼」時，通常都可以用鴨子型別變成「我知道你能做什麼」
2. 當出現以下架構時，通常可以使用鴨子型別降低修改成本
   1. case…when
   2. is_a?
3. 具體容易釐清但是修改成本高，抽象難懂但是可以輕易擴充
   1. 具體 → prepare_food, prepare_cars
   2. 抽象 → prepare
4. 基本資料類別也能建立新的抽象方法，這稱為「Monkey patch」

藉由繼承取得行為

1. 提升抽象而並非下放具體，白話文來說應把子類別的程式碼抽取共同的部分放到父類別

   class Bike
   	...
   	def common_method
   	end
   end
   
   # 新增 MountainBike
   class MountainBike < Bike
   	def specific_method
   		...
   	end
   end
   
   class RoadBike < Bike
   end
   
   # code 該怎麼移動？

2. 可以使用 raise NotImplementedError 建立 Template 類別

3. 使用 hook 使子類別和父類別解耦，避免使用 super

   class A
   	def initialize(arg)
   		@name = arg[:name]
   		@age = arg[:arg]
   	end
   end
   
   class B < A
   	def initialize(arg)
   		@weight = arg[:weight]
   		super(arg) # 少這一步就會炸掉
   	end
   end
   
   # V2
   class A
   	def initialize(arg)
   		@name = arg[:name]
   		@age = arg[:arg]
   		local_assign(arg)
   	end
   
   	private
   	def local_assign(arg)
   	end
   end
   
   class B < A
   	def local_assign(arg)
   		@weight = arg[:weight]
   	end
   end

使用模組共用角色行為

1. 里氏替換原則的進一步解釋，包含何時該用繼承
   1. 繼承條件嚴苛到根本沒有應用的機會

組合物件

1. 組合(composition)和聚合(aggregate)的差別

   1. 組合代表的是什麼含有什麼
   2. 聚合是一種特殊的組合，被含有的東西含有其自己的獨立生命

2. 組合、模組和繼承的比較

   1. 繼承：代表的是「is-a」，自動委派(delegation)訊息是繼承最大的特點，若使用得宜，在程式碼的可用性、合理性和典範性的表現上都很突出，因為繼承導致非常強的依賴關係，在大部分的情況下應首先選擇組合。
   2. 模組：代表的是「behavior likes a」，專注的是角色共用的這件事，如：可調度、可列印等等的角色行為
   3. 組合：代表的是「has-a」顧名思義，組合就是將不同功能的小物件組合起來，藉由定義相同的介面，可以自由的抽換其中的小物件，適應各種不同的變化

3. aggregate 會承擔其 entities 的職責給外部使用, delegrate for enetities ( 自己補充

   1. 跟蒼時的討論的筆記
   2. tree vs graph

   order.update_amount(product_id, amount)
   
   class Order
   	has_many :items
   	def update_amount(product_id, amount)
   		items.select { |i| i.pid == product_id }.update_amount(amount)
   	end
   end
   
   class Item
   	def update_amount
   		...
   	end
   end

設計節省成本的測試

1. A 物件的輸出等於 B 物件的輸入，A 物件的測試只需測到 A 物件的輸出即可
   1. 避免測到重複的東西
2. 測試的輸出分為兩種，查詢和命令
   1. 查詢是資料
   2. 命令是 call method
3. 減少重複或重疊的測試
4. 測試之所以難寫，很大程度跟主程式的寫法有關係，如依賴注入與替身的關係
5. BDD 和 TDD 都是先寫測試再實作，差別在於著重點：
   1. BDD: 從外而內
   2. TDD: 從內而外
6. 使用 shared_test 共用角色行為
7. 永遠不需要測試私有方法，若私有方法過於龐大，可以考慮抽取成一個新的物件，並增加該物件的測試
8. 測試繼承時，若父類別為抽象，可以建立一個專用於測試的子類別
9. 避免測試與主程式脫離，如某物件的 method 已經更名了，但由於 test 中是用 Stub 導致測試依然通過，此時如果該物件已有 expect_response_to(:method) 就可以即時發現原因
10. 先寫測試的好處在於可以強迫自己使用可重複使用性的程式碼
11. 如果建立真物件不會太麻煩的話，可以考慮直接注入真物件，而並非建立一個偽物件

前導

• 這裡介紹的 SOLID 是應對 mid-level (module, component)
  • 將遵從 SOILD 的 modules 想成是一塊塊良好的磚頭，即使如此還是有可能建出混亂的建築

SRP

• 「每個 function 只做一件事」不是 SRP 強調的

• 每個 module 只為一個，而且只有一個角色而變化

  • 何謂 module?
    • 可能是同一個程式碼檔案
    • 內聚(cohesive)強制綁定程式碼與單一角色
  • 何謂角色？
    • 指的是同一個群體

• 經由一些症狀察覺違反 SRP

  • 意外重複
    • 不同的角色使用相同的演算法
  • Merge
    • 會有 Merge 產生，就代表有多人修改同一個檔案，這有可能是因為有不同的角色都使用該檔案

• 要避免違反 SRP 可以依不同角色行為拆分成單獨的 classes

  例如 Employee 中含有 save , calculate_pay , report_hours ，他們都是給不同角色使用

  • 此時可以將這三個 method 拆成不同的 classes，他們都會依賴於 EmployeeData
    • 但要如何追蹤並且讓別人知道這些 classes 是有關連的
      • 使用 Facade Pattern
      • 由 Facade class 進行 delegating 和 instantiating
  • 以 Rails 來說，是比較偏向將 bussiness rule 放在 model 中，也就是 model 包含 Data 和最重要的 functions，那麼可以將這個 model 當成 Facade class
  • 如何避免一個 class 只有一個 function？
    • 一個 class 只有一個「公共」function 是可能的，其中還會有多個 private function 由 public function 使用

• SRP 原本是關於 functions 和 classes，但此概念也可以出現在以下兩個層級

  • Component
    • common closure principle
    • 內聚
  • Architecture
    • facade parttern

OCP

• 系統的行為應是擴充而非修改，因修改容易導致錯誤
• 大部分的人覺得這個 Principle 是對於 module 或 class 的設計規範，但他也可以用於系統層面
• 一個好的架構在實作新需求時，應盡可能將舊扣的變更降低至 0
  • 如何做到？
    • 遵從 SRP，讓事情的變動原因變得單一
    • 管理好依賴關係
      • 確保單向依賴
      • 最終會得出一個 Root，以 Rails 來說應是其中一個 Model
      • 依賴於 interface 而非具體物件（靜態語言）

interface Presenter {
	public void present();
}

class Controller {
  void call(Presenter presenter){}
}

class ScreenPresenter implements Presenter {
  public void present(){}
}

LSP

• 主要用來規範繼承，但也可以用來評估 interface 和 implementation
• 只要容忍些微的違反，就會導致整個系統充滿額外的判斷機制

ISP

• 當使用者直接使用 object 的 method，並且各個使用者皆使用不完全相同的 methods 時，這些 methods 會產生無可避免地相依，這些相依會讓整個 class rebuild 或是 redeploy
  • 這比較常出現在靜態語言，因為其包含了 import 或 include 等等的宣告
  • 靜態語言的解法是讓使用者依賴 interface，而 object 則是實做這些 interface
  • 但動態語言沒有這個問題
• 當依賴於一個 module 其擁有太多你不需要的 functions 時，就容易受到牽連
• 在 component cohesion 裡會有更詳細的介紹

範例：由於 User1 ~3 需要 import Op 導致就算只變更 Op 裡其中一個 method，也會讓 User1 ~ 3 重新編譯

class Op {
    public void op1() {};
    public void op2() {};
    public void op3() {};
}

class User1 {
    public void doSomething(Op arg) { arg.op1(); }
}

class User2 {
    public void doSomething(Op arg) { arg.op2(); }
}

class User3 {
    public void doSomething(Op arg) { arg.op3(); }
}

若是使用 interface 就不會有此問題

class Op implements Op1, Op2, Op3 {};
interface Op1 {
    public void op1();
}
interface Op2 {
    public void op2();
}
interface Op2 {
    public void op2();
}
class User1 {
    public void doSomething(Op1 arg) { arg.op1(); }
}

class User2 {
    public void doSomething(Op1 arg) { arg.op2(); }
}

class User3 {
    public void doSomething(Op1 arg) { arg.op3(); }
}

DIP

• 依賴於抽象而非具體
• 抽象比具體更穩定

前情提要

Sketchup 是一款在建築、都市計畫和遊戲開發都頗有名氣的 3D 建模軟體，而 Ruby 則是一個程式語言，它可以搭配 Sketchup 達成程式化 建模的任務，近期經由系主任引薦，要開發 Sketchup 的 Extension，雖然我寫過 Ruby，但 Sketchup 則是完全沒碰過，於是利用文章來記錄所學的一點一滴。

本篇內容

• 圖層 Layer
• 群組 Group
• 元件 Components
• 材料 Meterial
• 圖片

圖層 Layer

圖層(Layer)用來顯示或隱藏特定的圖形，以減少在作業中的干擾，在2021版的 Sketchup 被稱為標記(Tag)，它位於視窗的工具列：

圖層是屬於 Model 類別之下，以下示範如何建立一個圖層：

# Default code, use or delete...
mod = Sketchup.active_model # Open model
layers = mod.layers # All entities in model

new_layer = layers.add "測試用圖層"
mod.active_layer = new_layer

輸出結果：

這邊可以看到有兩個圖層，第一個是預設的，第二個則是我們剛剛新增的。

另外圖層也可以使用以下方法：

• visible=
• visible?
• name=
• name

群組 Group

假如我們在 Sketchup 中做一個圓柱體：

# Default code, use or delete...
mod = Sketchup.active_model # Open model
ent = mod.entities

circle = ent.add_circle [0, 0, 0], [0, 0, 1], 5
circle_face = ent.add_face circle
circle_face.pushpull -10

輸出結果：

對我們來說，這是一整個物件，但對 Sketchup 來說並不是，因為在上方的程式碼中的 circle_face 僅是一個平面，而使用平台拉抬而成的部分並屬於同一個物件，如果使用轉形，就只有表面移動，因此假如要移動整個圓柱體，可以使用 circle_face.all_connected ，不過每次都要這麼打，似乎有點麻煩，因此我們可以使用群組功能將整個圓柱體定義為一個群組：

# Default code, use or delete...
mod = Sketchup.active_model # Open model
ent = mod.entities

circle = ent.add_circle [0, 0, 0], [0, 0, 1], 5
circle_face = ent.add_face circle
circle_face.pushpull -10

circle_group = ent.add_group circle_face.all_connected

t = Geom::Transformation.translation [0, 10, 0]
ent.transform_entities t, circle_group

輸出結果：

群組提供了幾個方法：

• name=
• description=
• locked=：是否鎖定，鎖定後不能進行修改
• explode：將 Group 物件分解
• deleted?：是否被刪除

群組的特色

將一個或多個物體定義為群組後，可以使用幾個方便的功能對群組整體進行操作，功能如下：

• copy：複製
• move!：移動到特定位置
• transform!：轉形

元件 Components

元件與群組的最大差別在於元件可以跨不同的檔案，而群組只能在其建立的那個檔案。元件有點像 Class 經由定義完成後儲存成 .skp 檔案，要用到的時候在引入之後進行實體化(instance)

建立元件

建立元件有兩種方式。

群組產生元件

# Default code, use or delete...
mod = Sketchup.active_model # Open model
ent = mod.entities

circle = ent.add_circle [0, 0, 0], [0, 0, 1], 5
circle_face = ent.add_face circle
circle_face.pushpull -10

circle_group = ent.add_group circle_face.all_connected

circle_group.to_component

輸出結果：

在上方工具列的視窗中可以查看元件，點擊後可以發現此群組已經變為元件了。

使用 DefinitionList 建立元件

DefinitionList 是 active_model 的其中一個方法，詳細做法看以下範例：

# Default code, use or delete...
mod = Sketchup.active_model # Open model
def_list = mod.definitions # 取得 DefinitionList

# 新增一個文件定義
new_def = def_list.add "測試元件"
new_def.description = "這是一個測試元件"

# 只用文件定義的 Entities 建立一個圓柱體
ent = new_def.entities
circle = ent.add_circle [0, 0, 0], [0, 0, 1], 5
circle_face = ent.add_face circle
circle_face.pushpull -10

# 儲存元件定義
save_path = Sketchup.find_support_file "components", ""
new_def.save_as(save_path+"/test.skp")

# Check
puts "已儲存到#{new_def.path}"

引入元件

開新的 Sketchup 專案，在 Ruby Console 中輸入以下內容：

def_list = Sketchup.active_model.definitions
file_path = Sketchup.find_support_file "test.skp", "Components"
load_def = def_list.load file_path

這樣子就可以引入該元件了

元件實體化

這邊來示範如何使用元件進行實體化

def_list = Sketchup.active_model.definitions
file_path = Sketchup.find_support_file "test.skp", "Components"
load_def = def_list.load file_path

ent = Sketchup.active_model.entities
t = Geom::Transformation.translation [0,0,0]
ent.add_instance load_def, t

使用元件實體化後的物件，假如元件被修改，該物件也會產生變化，如果要避免此情況可以使用 make_unique，元件還有幾個方法如下：

• locked
• name=
• name
• explode

材料

Sketchup 的材料並不具備物理資訊，其只負責呈現不同外觀，以下示範如何新增、使用材料：

新增材料

mod = Sketchup.active_model
mats = mod.materials
new_mat = mats.add "新材料"

使用材料

# Default code, use or delete...
mod = Sketchup.active_model # Open model
ent = mod.entities
mats = mod.materials

new_mat = mats.add "新材料"

circle = ent.add_circle [0, 0, 0], [0, 0, 1], 5
circle_face = ent.add_face circle

circle_face.material = new_mat

materials 除了 add 外，還有其他方法：

• current
• current=
• name
• displat_name
• materialType

為材料新增顏色

# Default code, use or delete...
mod = Sketchup.active_model # Open model
ent = mod.entities
mats = mod.materials

new_mat = mats.add "新材料"
new_mat.color = [255,0,0]

circle = ent.add_circle [0, 0, 0], [0, 0, 1], 5
circle_face = ent.add_face circle

circle_face.material = new_mat

輸出結果：

請注意！其會為表面塗色，但表面取決於向量。

為材料新增材質

材質與顏色類似，唯一不同點在於材質需要圖檔，看以下範例程式碼：

# Default code, use or delete...
mod = Sketchup.active_model # Open model
mats = mod.materials
ent = mod.entities

new_mat = mats.add "新材料"
texture_path = Sketchup.find_support_file "images/wood.jpeg", "Plugins"
new_mat.texture = texture_path
new_mat.color = [255,0,0]

circle = ent.add_circle [0, 0, 0], [0, 0, 1], 5
circle_face = ent.add_face circle

circle_face.material = new_mat

輸出結果：

順帶一提，為材料新增材質的同時也可以新增顏色。

也可以將新增變更顏色的材質進行儲存：

mod = Sketchup.active_model # Open model
mats = mod.materials
ent = mod.entities

new_mat = mats.add "新材料"
new_mat.texture = Sketchup.find_support_file "images/wood.jpeg", "Plugins"
new_mat.color = [255,0,0]

circle = ent.add_circle [0, 0, 0], [0, 0, 1], 5
circle_face = ent.add_face circle
circle_face.material = new_mat

twriter = Sketchup.create_texture_writer
twriter.write circle_face, false, "texture.jpg"

twriter.write 第二個參數決定正面還是背面，目前是背面

圖片

以下範例程式碼示範如何展示圖片：

ent = Sketchup.active_model.entities
path = Sketchup.find_support_file "images/carton.jpeg", "Plugins"
img = ent.add_image path, [0, 0, 0], 100

t = Geom::Transformation.rotation [0,0,0],[1,0,0],90.degrees
ent.transform_entities t,img

輸出結果：

參考資料

• 當SketchUp遇見Ruby：邁向程式化建模之路

本篇內容

• 介紹
• 入侵實作
• 修補方式

介紹

SQL(結構化查詢語言)用於管理資料庫，由於其無法區分值和控制指令， 因此惡意人士可以藉由在值中安插控制指令從而對資料庫進行惡意操作，這種操作稱為 SQL Injection。

入侵實作

本範例使用 Ruby on Rails 6 進行實作。

1. 建立新檔案

使用 Rails 指令新增專案：

rails new demo
cd demo

2. 更改資料庫為 PostgreSQL

更改 Gemfile 中的內容：

- gem 'sqlite3', '~> 1.4'
+ gem 'pg'

複製以下內容，取代 config/database.yml ：

default: &default
  adapter: postgresql
  encoding: unicode


development:
  <<: *default
  database: development

新增 PostgreSQL 資料庫：

createdb development

3. 產生貼文功能

使用 Rails 指令新增貼文功能：

rails g scaffold post title content
rails db:migrate

並且在 config/routes.rb 中新增以下內容：

root to: "posts#index"

4. 新增搜尋功能

在 app/views/posts/index.html.erb h1 之下新增以下內容：

<%= form_tag(:posts, method: :get) do%>
  <%= label_tag(:search)%>
  <%= text_field_tag(:search, params[:search])%>
  <%= submit_tag("search")%>
<% end%>

接著把 app/controllers/posts_controller.rb 中 index 的部分替換為以下內容：

 def index
    if(params[:search])
      sql = "SELECT posts.* FROM posts WHERE (posts.title LIKE '%#{params[:search]}');"
      result = ActiveRecord::Base.connection.execute(sql)
      @posts = result.map { |p| OpenStruct.new p }
    else
      @posts = Post.all
    end
end

之所以不能使用Post.where()是因為 Rails 有防止 SQL Injection 的機制，就算使用 Post.where("id = #{params[id]}") 依然會被擋下來。

5. 進行 SQL Injection

此時執行 rails s，之後在瀏覽器輸入 localhost:3000 新增幾個 post 後，就可以看到類似以下的畫面：

之後我們在搜尋框中輸入 apple');DELETE FROM posts; --

送出後查看log：

可以發現它最終組出了以下的 SQL 指令：

SELECT posts.* FROM posts WHERE (posts.title LIKE '%apple');DELETE FROM posts; --');

這段指令可以分為三段：

1. SELECT posts.* FROM posts WHERE (posts.title LIKE '%apple');
2. DELETE FROM posts;
3. --');

第一段是正常執行的指令，只不過因為我們在搜尋框中填入了 apple'); 導致第一段程式碼提前中斷，而第二段就是惡意指令，使我們 posts 這個 table 的資料全部被刪除，而最後一段 -- 則是註解，可以讓其之後的指令皆不被執行。

修補方式

其實 Rails 的防止 SQL Injection 機制很完善，雖然並不保證百分之百不會被攻擊，通常 SQL Ingection 都發生在需要搭配變數的情況，常見的做法就是將所有會影響 SQL 的控制字元進行轉義，以下示範：

-   sql = "SELECT posts.* FROM posts WHERE (posts.title LIKE '%#{params[:search]}');"
+   keyword = ActiveRecord::Base::connection.quote_string(params[:search])
+   sql = "SELECT posts.* FROM posts WHERE (posts.title LIKE '%#{keyword}');"

result = ActiveRecord::Base.connection.execute(sql)
@posts = result.map { |p| OpenStruct.new p }

這會使原本是 "apple');DELETE FROM posts; --" 的文字變成 "apple'');DELETE FROM posts; --" 從而避免 SQL Injection。

另一種更方便的就是用 Array 或是 Hash 傳入：

Post.where("title = ?", "test")
Post.where(title: "test")

這樣子也是有效防止 SQL Injection 的方式。

但就是不要使用以下的做法：

Post.where("title = #{var}")

因為 只要執行 var = "' OR 1='1" 後，上面的程式碼會被轉換成以下的 SQL 指令：

SELECT "posts".* FROM "posts" WHERE (title = '' OR 1='1')

這樣子駭客就能取得所有的資料。

但萬幸的是無法用 ; 注入第二段指令，例如 var = "');DELETE FROM posts;--" 後再執行 Post.where("title = #{var}")，就會產生：

SELECT "posts".* FROM "posts" WHERE (title = '');DELETE FROM posts;--')

雖然會以上的指令有害，但真正運行時會遇到以下此錯誤：

ActiveRecord::StatementInvalid (PG::SyntaxError: ERROR:  cannot insert multiple commands into a prepared statement)

參考資料

• 什麽是 SQL Injection 攻擊?
• Simple Search Form in Rails
• Rails raw SQL example
• LIKE (Transact-SQL)

Text

1. 大字配小行高 line-height (1.2x)，小字配大行高(1.4x)
2. letter space change to -1 ~ 2% for headings, but it depends on font

Align

1. don't mix center aligned heading and left aligned body text

text line width

1. don't puts too much words in one line
   

Hierarchy

1. don't use more 2 text size, it can be replace with different subtitle color or font weigth

Space

1. The height of Space depends on the relationship. for example, heading and its body text is closer than other section

https://www.youtube.com/watch?v=88XxC0_zs74

本篇內容

• 前置作業
• 安裝相關套件
• 生成 User Model
• 設定 Line Login
• 新增身份驗證
• 實作登入登出

前置作業

1. 建立新檔案

使用 Rails 指令新增專案：

rails new demo
cd demo

2. 產生空白頁

使用 Rails 指令新增 Controller：

rails g controller home

之後新增 app/views/home/index.html.erb。

最後在 config/routes.rb 中新增以下內容：

root to: "home#index"

安裝相關套件

在 Gemfile 中加入以下內容：

gem 'devise'
gem 'omniauth-line', git: 'https://github.com/etrex/omniauth-line.git'
gem "dotenv-rails", "~> 2.7"

加入後執行 bundle。

生成 User Model

請執行以下指令：

rails g devise:install
rails g devise user
rails g migration add_line_login

開啟剛剛新增的 db/migrate/xxxxxxxxx_add_line_login.rb 並在 change 方法中加入以下內容：

add_column :users, :line_id, :string
add_column :users, :name, :string
add_column :users, :image_url, :string

另外，由於我們之後要以 line_id 區分使用者，這導致 email column 的值可能會重複（因為 Devise 預設 email 的值為 '' ），因此需要解決 email 重複的問題，以下新增一個 migration：

rails g migration resolve_users_email_unique

開啟新增的 db/migrate/xxxxxxxxx_resolve_users_email_unique.rb 更改為以下內容：

def up
  change_column :users, :email, :string, null: true, default: nil
end
def down
  change_column_null :users, :email, false, SecureRandom.uuid
end

此段主要為修改 email column，當 user 被建立時，預設值為 nil，以此來避免唯一鍵重複，而 down 中的 SecureRandom.uuid 則是為了避免原本 email 為 nil 的資料 db rollback 後發生重複的問題。
到了這一步後就可以執行 Database migrate：

rails db:migrate

設定 Line Login

新增 .env 並在其中放入以下內容：

LINE_LOGIN_CHANNEL_ID= 你的 CHANNEL ID
LINE_LOGIN_CHANNEL_SECRET= 你的 CHANNEL SECRET

該資訊可以在 Line Developers 找到，點擊 LINE LOGIN 的 CHANNEL，可以看到以下畫面：

LINE LOGIN CHANNEL ID，複製該內容貼至 .env

LINE LOGIN CHANNEL SECRET，複製該內容貼至 .env（與 LINE LOGIN CHANNEL ID 同頁面的下方）

在 Callback URL 部分填入 https://{your-domain-name}/users/auth/line/callback

在 config/initializers/devise.rb 的 Devise.setup 區塊中新增以下內容：

config.omniauth :line, ENV['LINE_LOGIN_CHANNEL_ID'], ENV['LINE_LOGIN_CHANNEL_SECRET']

在 app/models/user.rb 開啟 Omniauthable 功能

devise :database_authenticatable, :registerable,
-        :recoverable, :rememberable, :validatable
+        :recoverable, :rememberable, :validatable,
+       :omniauthable, omniauth_providers: [:line]

在 app/models/user.rb 新增 from_omniauth 方法

def self.from_omniauth(auth)
    if auth.provider == "line"
        user = User.find_or_create_by(line_id: auth.uid)
        user.update(name: auth.info.name, image_url: auth.info.image)
        user
    end
end

因為 LINE Login 只會傳入 line_id 而沒有 email 和 password，因此 email 和 password 為非必填，在 app/models/user.rb 中加入以下內容：

def email_required?
    false
end

def password_required?
    false
end

新增 omniauth controller

rails g controller OmniauthCallbacks

並在其中填入以下內容：

def line
    user = User.from_omniauth(request.env["omniauth.auth"] )
    sign_in user
    redirect_to root_path
end

在 config/routes.rb 中加入以下內容：

-   devise_for :users
+   devise_for :users, controllers: {
+        omniauth_callbacks: 'omniauth_callbacks'
+    }

新增身份驗證

在 app/controllers/application_controller.rb 中加入以下內容：

include Rails.application.routes.url_helpers

def authenticate_user
    return if current_user.present?
    redirect_to user_line_omniauth_authorize_path
end

之後只需要在先登入才能進行動作的 Controller 中加入以下內容：

before_action :authenticate_user

Devise 預設是 before_action :authenticate_user!

實作登入登出

完成至上一步已經可以進行 Line Login，但假如希望登入登出這件事並非強制的話，可以增加登入登出的列表。

在 app/views/layouts/application.html.erb 的 <body> ... </body> 之中加入以下內容：

 <nav>
    <h1>
    <% if current_user.present? %>
        <%= current_user.name %> 您好：
        <%= link_to "登出", destroy_user_session_path, method: :delete  %>
    <% else %>
        <%= link_to "登入", user_line_omniauth_authorize_path %>
    <% end %>
    <h1>
    <hr />
</nav>

這樣子就可以在未登入時可以登入：

已登入時可以登出：

參考資料

• Kamigo LINE Bot 框架 - 實作簡單的取號機器人
• 使用者認證-Rails實戰聖經

簡介

Rails專案中可能會有許多靜態的檔案，例如：JavaScript、Stylesheets和圖檔，把所有的靜態檔案都放在public目錄或許是個選擇，但是檔案一多的時候，就不好管理了。

因此為了便於管理這些檔案，Rails提供以下兩種方式：

1. Webpacker
2. Assets Pipeline

雖然從Rails 6後預設使用Webpacker來處理Javascript和Asset Pipeline處理CSS，但還是能使用Asset Pipeline管理全部的靜態檔案。

前陣子為了套上模板頁面，因而接觸到Asset Pipeline，所以本篇就來紀錄一下這個過時的Asset Pipeline管理靜態資源的方法吧。

操作步驟

下載模板

本篇文章使用Start Bootstrap-Landing Page作為模板範例，首先請先下載該專案或使用git進行下載

git clone https://github.com/StartBootstrap/startbootstrap-landing-page.git

下載完成後可以進入該資料夾執行npm start，即可瀏覽網頁，如果沒裝npm也沒關係，直接點擊dist/index.html就好

複製所需靜態檔案到專案

接著我們需要把模板的以下內容放到 自己的Rails專案

• scss/*複製到你的專案/app/assets/stylesheets

*代表所有檔案

• assets/img/*複製到你的專案/app/assets/images

新增Layout

由於我們下載的是一個首頁的模板，為了不打亂原本的專案，因此我們另外創建一個Layout

• rails g controller landing
• 修改landing_controller中的內容
  把此段程式碼刪除

class LandingController < ApplicationController
end

替換成以下

class LandingController < ActionController::Base
    def index
    end
end

• 在config/routes中設定根路徑root to: "landing#index"

• 在app/views/landing中新增index.html.erb，並且複製模板dist/index.html 的body部分到index.html.erb

• 在app/views/layouts中新增landing.html.erb，複製app/views/layouts/application.html.erb的內容到裡面

• 把模板dist/index.html中的以下內容全部貼到app/views/layouts/landing.html.erb的head區塊

  <!-- Font Awesome icons (free version)-->
  <script src="https://use.fontawesome.com/releases/v5.15.3/js/all.js" crossorigin="anonymous"><script>
  <!-- Simple line icons-->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.5.5/csssimple-line-icons.min.css" rel="stylesheet" type="text/css" />
  <!-- Google fonts-->
  <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic700italic" rel="stylesheet" type="text/css" />

使用Assets Pipeline

• 依照下方指示修改app/views/layouts/landing.html.erb
  把此段程式碼刪除

<%= javascript_pack_tag 'application' %>

替換成以下

<%= stylesheet_link_tag 'landing', media: 'all' %>

這一步是讓landing這個layout使用Assets Pipeline而並非Webpacker，並且使用landing.scss作為Stylesheet

• 複製app/assets/styles.scss的內容到app/assets/landing.scss中
• 刪除app/assets/stylesheets/application.css中的 *= require_tree .

到達這一步後你可以使用rails s來測試看看，你可能會看到以下畫面

修改圖檔URL

會發生這種情況是因為圖片放在assets中Rails會將檔案加密，因而導致找不到圖片，因此我們修改圖檔的路徑，依照不同的檔案屬性，我們也會以不同的方式進行修改。

1. 在app/views/layouts/landing.html.erb中，請將background-image: url('assets/img/檔名.jpg')更換為url('<%= asset_path('檔名.jpg')%>')">
2. 在app/assets/stylesheets/sections/_call-to-action.scss中，請將url('../assets/img/bg-masthead.jpg')更換為url('<%= asset_path("bg-masthead.jpg") %>')，並且更改檔名為_call-to-action.scss.erb
3. 在app/assets/stylesheets/sections/_masthead.scss中，請將url('../assets/img/bg-masthead.jpg')更換為url('<%= asset_path("bg-masthead.jpg") %>')，並且更改檔名為_masthead.scss.erb

之後再次重啟server，一切都會變好了

結語

本篇文章主要是拿來紀錄使用Assets Pipeline的過程，第一次搞的時候是拖累同事一起跟我debug，但是在debug的途中也對於Assets Pipeline漸漸地瞭解了，寫完這篇文章後，接著就要來研究Webpacker啦～

我是wells，擔任過室內配線的國手，征服了電氣領域後，現在正跨大版圖到資訊界。

料理食材(內文內容)

• Jekyll的簡介
• Jekyll的安裝
• Jekyll的使用
• Github Page

誰可以安心食用(適合誰讀)

• 知道Markdown語法
• 知道Github如何創建repository
• 對於網站、網頁有一點點概念

服用完你會獲得什麼

• 知道Jekyll是什麼
• 知道如何使用Jekyll(初步)
• 知道如何使用Github Page

基本介紹

Jekyll是一個靜態網頁的生成器，由Ruby程式語言編寫而成的，許多人會使用靜態網頁生成器製作blog，主要是因為直接編寫HTML需要大量與內容無關的格式標籤，用這種方式製作blog效率並不高，而靜態網頁的生成器幾乎都支援Markdown語法，不用編寫又臭又長的html而是使用Markdown這種易讀易寫的標籤語言，因此自然會更受到懶人們(我)的歡迎。

但無論如何，瀏覽器還是只能解讀HTML，所以我們最終還是得把Markdwon轉換為HTML，但試想每次寫完後都要手動拿去轉換是不是有點麻煩呀？

而Jekyll這種靜態網頁的生成器最主要的功用就是協助處理繁瑣重複的動作，使作者可以更加專注內文的編寫，並在有所需求時又不失網頁靈活性。

前置動作

• 安裝好ruby版本並且確保版本在2.4以上
  ruby --version
• 確保gem有被安裝（安裝ruby時會自動安裝）
  gem --version
• 確認gcc/g++/make有被安裝
  gcc -v / g++ -v / make -v

安裝說明

1. gem install jekyll

   使用gem來安裝jekyll及其插件。

   gem的全名是RubyGems，是用於管理各式Ruby函式庫的管理器，類似於Python中的pip，Ruby函式庫的格式也被稱為gem，其中最有名就是Rails這個gem

2. jekyll new demo

   安裝完Jekyll後就可以使用new這個指令創建專案。

   這邊的demo請換成自己的專案名稱

3. bundle install

   前面有提到gem是一個個Ruby的函式庫，如同Ruby或是各類程式語言有版本的編號，gem也會有，而bundler就是一個管理gem版本的gem(有點饒口)，bundler主要的功用是確保該專案使用的gem（包含版本）在本地端皆有安裝。

   如果顯示bundle not found，請先執行gem install bundler

4. bundle exec jekyll serve

   運行jekyll server，其中的serve可以只打一個s，按下Ctrl+C可以關閉server。

   如果前面不加上bundle exec事實上也是可以運行的，此段的用意是為了避免使用了不同的gem版本進行動作。

此時在瀏覽器中輸入http://127.0.0.1:4000/，可以看到以下畫面：

jekyll serve預設使用4000 port，如果要更改，在啟動伺服器時使用bundle exec jekyll serve -P [指定port號]來指定。

Jekyll的設定介紹

這邊來介紹Jekyll的幾個重要設定檔(.yml)和資料夾

YAML

在Jekyll中會看到許多格式是.yml的檔案，那麼這個.yml是什麼呢？

.yml是指YAML格式的檔案，其用來表達資料的序列化，例如以下：

receipt:     Oz-Ware Purchase Invoice
date:        2012-08-06
customer:
  given:   Dorothy
  family:  Gale

由於字串不需要引號包起來，使用YAML就可以很清晰的了解資料的結構，YAML也有一些具有意義的符號，詳情可以查閱維基百科，唯一要特別注意的是YAML的縮排千萬千萬不能使用TAB，我曾經debug一整個下午就因為縮排用TAB......

_config.yml

_config.yml是jekyll中最重要的設定檔，裡面變數儲存了包括root directory、網站名稱......的資料，因為_config.yml裡面的資料是全域性的，因此我們也會把網站擁有者資訊、各式社群連結放在這邊，以下就來介紹幾個常用的變數：

修改_config.yml後Jekyll要重啟server才會被讀取哦！

_site/

當我們執行bundle exec jekyll s之後，你會發現檔案目錄多了_site這個資料夾：

可以發現_site/裡面我們寫的Markdown檔案都變成HTML了，這是因為執行bundle exec jekyll s後，內含的指令會把.md的檔案轉換為.html，而_site/也是我們之後要部署到伺服器上的資料夾。

_post/

這個資料夾是我們存放文章的地方，通常每一篇的檔名會以時間和文章名稱命名，例如:2021-04-26-使用Jekyll自架部落格.md，請確保副檔名為.md或是.markdown，不然會沒有辦法轉換為HTML。

在文章開頭的地方我們通常會加入以下內容：

---
title:  "使用Jekyll自架部落格"
date:   2021-04-26 22:52:03 +0800
categories: Tutorial
tags:  [Jekyll,Github-Page]
---

只有title和date是必需的變數，其他的變數都可以自行增減，但前提是你要知道如何操作XD

寫完上面的文章開頭後，接著就可以用Markdown語法開開心心的進行內文書寫了～

_drafts/

這個資料夾是我們存放草稿的地方，預設是沒有這個資料夾的，需要自己新增，相比於_post/，_drafts/的文章並不會在你執行bundle exec jekyll s時出現，必須得在後面加入--draft才行。

部署到Github Page

前言

當專案在本機端寫的差不多的時候，你很滿意，但是別人並不知道你的感受......

因為你寫的東西都在你的電腦上，如果你要讓全世界的人都看到，那麼你勢必得把它推到網路上，現在你只要付一點點小錢，購買我們wells網路公司的A方案，就可以享受靜態網站代管服務囉。

如果你不想花錢，當然也可以選擇用Github Page架設免費的靜態網站。

部署動作

前述有提到所有的靜態網頁都在_site中，因此只要部署_site這個資料夾整個網站就可以運作正常，但是這樣子的動作不太好，因為就像是只留卵而不留雞一樣，因此更好的做法是把Jekyll的專案和產生出來的_site都推上同一個repository，之後以不同的分支(Branch)作為區分，以下為部署動作：

1. 到Github中新建一個repository。

2. 先把Jekyll專案推上repository。
   在Jekyll專案根目錄執行以下內容：

   git init
   git add .
   git commit -m "提交訊息"
   git remote add origin [你的repository url]
   git push -u origin master
   

   以上動作是把整個專案推上剛剛新建的repository，由於沒有指定分支，因此預設會是master，完成後你就可以在Github上看到剛剛推上去的內容了，但是在這一步你依然無法看到你的網頁。

   你可能發現_site和其他幾個資料夾並沒有在這個repository裏，這是因為.gitignore裡含有這幾個檔案名稱，因此git並不會把這些檔案加入git資料庫中，自然也不會被推到網路上。

3. 把_site推上repository。

   在終端機運行以下指令

   cd _site
   git init
   git checkout -B gh-pages
   git add .
   git commit -m "提交訊息"
   git remote add origin [你的repository url]
   git push -u origin gh-pages
   

   在本地端要做的事情已經結束了，接著是Github上面的設定：

   首先，到Github Page設定的位置
   
   在repository上排的選單中點擊最右邊的Settings，之後在左邊的列表中點擊Pages的欄位。

   
   這張圖與你目前的畫面可能有所差異，但大致上都相同，在Source(紅框)的選項中，選擇_site推上的gh-pages分支，接著選擇/root，按下儲存後你會得到一個URL，點擊後就可以連到你的網站了。

   

結語

網路上有許多方便寫部落格的網站，如：Medium、Google blogger，讓你不需要寫任何的程式碼、HTML甚至是Markdown就可以輕鬆建立出一個不錯的部落格，但本人之所以不願意這麼做，除了想不開外，是因為我認為自行架設blog可以學得很多東西，這就等於是一個Side Project，並且身為一位軟體工程師，當別人看到你的blog是來自你自架的網站，不用多說，自然也可以了解到你的實力，有這麼多好處，專屬於你自己的blog還不來架一個嗎？XD

架構圖

mindmap
  root((mindmap))
    Origins
      Long history
      ::icon(fa fa-book)
      Popularisation
        British popular psychology author Tony Buzan
    Research
      On effectiveness<br/>and features
      On Automatic creation
        Uses
            Creative techniques
            Strategic planning
            Argument mapping
    Tools
      Pen and paper
      Mermaid

Model-driven Architecture

https://en.wikipedia.org/wiki/Model-driven_architecture

Wiki 的 Business Object

https://en.wikipedia.org/wiki/Business_object

Clean Architecture 的 Business Logic

Wiki 的 Business Logic

https://en.wikipedia.org/wiki/Business_logic

business logic or domain logic is the part of the program that encodes the real-world business rules that determine how data can be created, stored, and changed

Business Logic 是流程、 Business Rule 是聲明

裡面舉個

business logic != business rule

Wiki 的 Multitier architecture

Tier 和 Layer 是不同的東西
layer is a logical structuring mechanism for the conceptual elements that make up the software solution, while a tier is a physical structuring mechanism for the hardware elements that make up the system infrastructure.[1][2] For example, a three-layer solution could easily be deployed on a single tie

Trivial Validation vs Business Rule

https://www.youtube.com/watch?v=FbYcIqVmGRk&t=332s

這個影片舉了一個 warehouse_product 的例子
其中的程式碼類似於以下

這段程式碼中有兩個條件式，當條件符合時，分別 raise ArgumentError 和 InsufficientError
但前者不是 Business Rule，而是 Trivial Validation

class WarehouseProduct
    class InsufficientError << StandardError; end
    
    def shipping_product(quantity)
        raise ArgumentError, 'quantity must bigger than 0' if quantity <= 0
        raise InsufficientError, 'InsufficientError' if quantity > @stock

        apply(quantity)
    end
end

關於 Trivial Validation 和 Business Rule，作者幾種不同的特性

在上述的例子中，為什麼判斷 quantity 不能是負數是 Trivial Validation

1. 他不會變動，這是一個寫了就不會變的規則，幾乎不會有把 0 變成其他數字的情況(符合第一點)
2. 在判斷完這個條件式後，我們預期將這個已被驗證的變數傳給商業邏輯(符合第 3 點)
3. 相同類型的輸入總會得到完全相同的輸出

關於 Input/Output layer 則可以想像成是 Translate，例如把 HTTP Request 的參數轉成 ActionController::Parameters

那對於 Business Rule 呢？
首先 Business Rule 是會變動的，Business Rule 會隨著 Domain、想法或是商業行為而變化
第二點則是可能因應新業務而擴展
最後是 Business Rule 是基於狀態的

接著作者舉的例子很像 Rails 的 Form Object 的應用
將 Trivial Logic 從 Business Logic 分出去

class WarehouseProductForm
    attr_read :quantity
    def initilize(quantity)
        @quantity
    end

    def valid?
        raise ArgumentError, 'quantity must bigger than 0' if quantity <= 0
    end

    def valided_value
        valid?
        quantity
    end
end

class WarehouseProduct
    class InsufficientError << StandardError; end
    
    def shipping_product(form)
        raise InsufficientError, 'InsufficientError' if form.valided_value > @stock

        apply(form.valided_value)
    end
end

之後還舉了個超賣的例子

class WarehouseProduct
    class InsufficientError << StandardError; end
    
    def shipping_product(form)
        raise InsufficientError, 'InsufficientError' if form.valided_value > @stock + Buffer

        apply(form.valided_value)
    end
end

前情提要

Sketchup 是一款在建築、都市計畫和遊戲開發都頗有名氣的 3D 建模軟體，而 Ruby 則是一個程式語言，它可以搭配 Sketchup 達成程式化 建模的任務，近期經由系主任引薦，要開發 Sketchup 的 Extension，雖然我寫過 Ruby，但 Sketchup 則是完全沒碰過，於是利用文章來記錄所學的一點一滴。

本篇內容

• Ruby code editor 預設內容
• 使用 Ruby console load .rb 檔案
• 畫五邊形
• 多邊形
• 弧線
• Sketchup 軸線意義

Ruby code editor 預設內容

還記得上一篇我們最後畫了一條直線，這個程式碼如下：

Sketchup.active_model.entities.add_line [0,0,0],[9,9,9]

但其實 Ruby code editor 有預設的程式碼可以幫我們縮短以上的內容。

在開啟 Ruby code editor 時，你的畫面應該會像這樣：

點擊上方工具列的 Edit/Edit Default Code 後你可以看到此畫面

不用更改任何內容，當我們再次開啟 Ruby code editor 時，就會有此預設的內容。

下一步我們把原本畫直線的程式碼更改為以下：

ent.add_line [0,0,0],[9,9,9]

放在預設程式碼的下方，執行後結果將會與原本的程式碼相同。

使用 Ruby console load .rb 檔案

使用 Ruby code editor 寫 Ruby 優點是隨開隨寫，但我還是習慣使用外部的編輯器打扣，畢竟快捷鍵還是熟悉的用起來比較順暢，那該如何在 Sketchup 中載入已寫好的 Ruby 檔案呢，接著看下去：

我使用的是 Mac OSX 系統，而 Sketchup 的 Ruby Console 讀取的目錄會是以下路徑

~/Library/Application Support/SketchUp ${版本號}/SketchUp/Plugins

得知路徑後，在該目錄下新增一個 test.rb 後，再到 Ruby Console 執行以下內容就可以載入該檔案

load 'test.rb'

這邊也可以建個資料夾管理檔案，而詳細如何管理那就依個人喜好決定了。

Sketchup 軸線意義

在 Sketchup 上可以看到三種顏色的線，分別是紅、綠和藍，這三條線在傳統的建模軟體代表意義應該是：

1. 紅：X軸，[1,0,0]
2. 綠：Y軸，[0,1,0]
3. 藍：Z軸，[0,0,1]

但實際上 Sketchup 並不是用 XYZ 進行區分，而是用東南西北、上下來區分，如下圖：

不過這只是習慣問題，所以其實沒什麼差。

畫五邊形

在 Sketchup 中假如要畫一個五邊形，會使用線段來完成，而線段被視為邊緣物件(Edges)，有幾種做法，以下逐一介紹。

直線

用直線畫五邊形應該是最容易想到的，程式碼如下：

# Default code, use or delete...
mod = Sketchup.active_model # Open model
ent = mod.entities # All entities in model
sel = mod.selection # Current selection

pt1 = [5, 0, 0]
pt2 = [1.5625, -4.75, 0]
pt3 = [-4.0625, -2.9375, 0]
pt4 = [-4.0625, 2.9375, 0]
pt5 = [1.5625, 4.758, 0]

ent.add_line pt1, pt2
ent.add_line pt2, pt3
ent.add_line pt3, pt4
ent.add_line pt4, pt5
ent.add_line pt5, pt1

曲線

曲線其實就是直線的進階版，它可以接受多個點傳入，除了畫出五邊形之外，順便觀察它的 class 與 length，程式碼如下：

# Default code, use or delete...
mod = Sketchup.active_model # Open model
ent = mod.entities # All entities in model
sel = mod.selection # Current selection

pt1 = [5, 0, 0]
pt2 = [1.5625, -4.75, 0]
pt3 = [-4.0625, -2.9375, 0]
pt4 = [-4.0625, 2.9375, 0]
pt5 = [1.5625, 4.758, 0]

curve = ent.add_curve pt1, pt2, pt3, pt4, pt5, pt1

puts "curve是什麼？", curve.class #Array
puts "curve的長度？", curve.length #5

圓形

上述的直線以及曲線都不一定要圍成一個封閉的物件，因此假如要製作五邊形這種封閉的物件，圓形會更適合，程式碼如下：

# Default code, use or delete...
mod = Sketchup.active_model # Open model
ent = mod.entities # All entities in model
sel = mod.selection # Current selection

circle = ent.add_circle [0,0,0], [0,0,1], 10, 5
puts circle.class #Array
puts circle.length #5

這邊可以看到傳入 4 個引數，而 add_circle 的參數定義如下：

add_circle center, normal, radius, num_segments = 24

分別代表：

1. center：中心點
2. normal：方向
3. radius：半徑
4. num_segments：線段數量。預設為 24。

多邊形

多邊形與圓形幾乎相同，差別在於多邊形的 num_segments 這個參數是沒有預設值，因此不可省略，與圓形比較的程式碼如下：

# Default code, use or delete...
mod = Sketchup.active_model # Open model
ent = mod.entities # All entities in model
sel = mod.selection # Current selection

normal = [0,0,1]
radius = 2

ent.add_ngon [0,0,0], normal, radius, 6
ent.add_circle [5,0,0], normal, radius, 6

ent.add_ngon [10,0,0], normal, radius, 24
ent.add_circle [15,0,0], normal, radius

弧線

弧線十分的麻煩，它的參數定義如下：

add_arc center, xaxis, normal, radius, start_angle, end_angle, num_segments

分別代表：

1. center：中心點
2. xaxis：從哪個軸線起算
3. normal：方向
4. radius：半徑
5. start_angle：從哪個角度開始畫
6. end_angle：在哪個角度結束
7. num_segments：線段數量

我們執行以下此段程式碼，並且看看結果：

# Default code, use or delete...
mod = Sketchup.active_model # Open model
ent = mod.entities # All entities in model
sel = mod.selection # Current selection

arc1 = ent.add_arc [0,0,0], [0,1,0], [0,0,1], 5, 0, 90.degrees
arc2 = ent.add_arc [0,0,0], [0,1,0], [0,0,-1], 10, 0, 90.degrees
arc3 = ent.add_arc [0,0,0], [0,1,0], [0,0,1], 15, 0, 180.degrees
arc4 = ent.add_arc [0,0,0], [1,1,0], [0,0,-1], 15, 0, 90.degrees
arc4 = ent.add_arc [0,0,0], [0,0,1], [1,0,0], 15, 0, 90.degrees

執行結果：

看起來十分的混亂，讓我為它標一下名稱

這究竟是怎麼得知的呢！？可以參考「右手定則」，normal 這個參數將決定你大拇指的方向，而四指則是你會弧線繪製的方向，由此一來就可以知道弧線的畫法了最好是。

參考資料

• 當SketchUp遇見Ruby：邁向程式化建模之路
• [阿克屋:線學現賣]Sketchup 紅綠藍三軸色，代表的意義(2)

前情提要

Sketchup 是一款在建築、都市計畫和遊戲開發都頗有名氣的 3D 建模軟體，而 Ruby 則是一個程式語言，它可以搭配 Sketchup 達成程式化 建模的任務，近期經由系主任引薦，要開發 Sketchup 的 Extension，雖然我寫過 Ruby，但 Sketchup 則是完全沒碰過，於是利用文章來記錄所學的一點一滴。

本篇內容

• 安裝 Sketchup
• 使用 Ruby Console 印出第一個 Hello, world!
• 安裝 Ruby code editor extension
• 使用 Ruby code editor 畫出第一條直線

安裝 Sketchup

至 Sketchup 官網 下載 Sketchup

下載完成後開啟 Sketchup，第一次使用會要求你登入，即可開始 30 天試用期，之後你會看到以下畫面：

這邊我們選擇預設的 簡單/英吋 模型

開啟後你可以看到此畫面：

使用 Ruby Console 印出第一個 Hello, world!

在上方工具列中的 擴展程式套件/開發人員 中有 Ruby 控制台，點擊它

之後你將可以看到一個對話框，輸入以下內容並送出

puts "Hello, World!"

你將可以看到以下畫面：

安裝 Ruby code editor

由於 Ruby console 不適合用來編寫大量的程式碼，因此我們會安裝一個 extension，叫做 Ruby code editor。

點擊上方工具列中的 擴展程式套件/Extension Warehouse ，在搜尋列表中輸入 Ruby code editor，可以看到以下畫面：

點擊第一個後安裝。

安裝成功後你將可以看到一個小對話框，點擊後就可以開啟 Ruby code editor：

使用 Ruby code editor 畫出第一條直線

點擊 Ruby code editor 的小對話框，你將可以開啟一個編輯器，在其中輸入以下內容

Sketchup.active_model.entities.add_line [0,0,0],[9,9,9]

按下下方的執行按鈕，如下圖：

之後你將可以在 sketchup 中看到剛剛畫的那條直線：

參考資料

• 當SketchUp遇見Ruby：邁向程式化建模之路

前情提要

Sketchup 是一款在建築、都市計畫和遊戲開發都頗有名氣的 3D 建模軟體，而 Ruby 則是一個程式語言，它可以搭配 Sketchup 達成程式化 建模的任務，近期經由系主任引薦，要開發 Sketchup 的 Extension，雖然我寫過 Ruby，但 Sketchup 則是完全沒碰過，於是利用文章來記錄所學的一點一滴。

本篇內容

• 對話方塊
• 功能表
• 命令
• 工具列
• WebDialogs

對話方塊

對話方塊在之前的範例中用作於呈現資訊，但其實它還可以與使用者進行互動。以下是基本的用法：

UI.messagebox "測試訊息"

輸出結果：

UI.messagebox 的參數除了接受一個 String 之外，還可以傳入第二個參數決定按鈕形式，以下介紹幾種參數：

• MB_OK：有一個「確定」按鈕
• MB_OKCANCEL：有「確定」和「取消」按鈕
• MB_RETRYCANCEL：有「重試」和「取消」按鈕
• MB_ABORTRETRYCANCEL：有「放棄」、「重試」和「取消」按鈕
• MB_YESNO：有「是」和「否」按鈕
• MB_YESNOCANCEL：有「是」、「否」和「取消」按鈕
• MB_MULTILINE：顯示多列文字的訊息方塊，有第三個參數，代表訊息方塊的標題

各事件回傳的值皆不同：

• 「確定」：1
• 「取消」：2
• 「重試」：4
• 「放棄」：3
• 「是」：6
• 「否」：7

使用範例：

case UI.messagebox "測試訊息",MB_OKCANCEL
    when 1
        puts "你按下確定"
    when 2
        puts "你按下取消"
end

還有一種對話方塊可以讓使用者輸入資訊，以下示範 BMI 計算：

label = ["身高", "體重"]
defaults = [173, 68]
result = inputbox label, defaults, "輸入你的身高與體重"
bmi = result[1]/((result[0]/100.0)**2)

UI.messagebox "你的BMI是#{bmi}"

輸出結果：

以下示範如何使用下拉式選單：

label = ["餐點種類"]
default = ["炒飯"]
options = ["炒飯", "炒麵"]
enums = [options.join("|")]
result = inputbox label, default, enums, "今天晚上吃什麼？"

UI.messagebox "今天吃#{result[0]}" if result

輸出結果：

比較麻煩的就是所有的參數都要塞 Array

功能表

功能表可以新增的位置有兩種：

1. 上方工具列
2. 右鍵點擊物件(快顯)

上方工具列

要新增在上方工具列，請先選擇一列，例如： File, Plugins等等，以下示範如何使用：

menu = UI.menu "Plugins"
menu.add_item "按按看" do
    UI.messagebox "這是功能表"
end
submenu = menu.add_submenu "工具列"
submenu.add_item "板手" do
    UI.messagebox "板手"
end
submenu.add_item "螺絲起子" do
    UI.messagebox "螺絲起子"
end
submenu.add_separator
item = submenu.add_item "電動起子" do
    UI.messagebox "電動起子"
end
submenu.set_validation_proc(item){MF_DISABLED}

輸出結果：

set_validation_proc 的區塊**有五種常數可以填入：

• MF_ENABLED
• MF_DISABLED
• MF_CHECKED
• MF_UNCHECKED
• MF_GRAYED

右鍵點擊物件(快顯)

以下示範如何使用快顯功能表：

UI.add_context_menu_handler do |menu|
    menu.add_item("這是快顯按鈕") do
        UI.messagebox("你點到啦！")
    end
end

輸出結果：

命令

當有需要製作大量相同功能的按鈕時，可以考慮使用命令：

UI.menu("Draw").add_item("觸發命令") do
    UI.messagebox("從這裡開始執行我定義的程序")
end

cmd = UI::Command.new("測試新的命令") do
    UI.messagebox("開始執行")
end

UI.menu("Draw").add_item cmd

工具列

還記得裝完 Ruby Code Editor 後會有一個小對話框浮現嗎？那其實就是工具列。以下示範如何製作：

tool_cmd = UI::Command.new("測試工具"){UI.messagebox "這是我第一個工具"}
tool_cmd.large_icon = "carton.jpeg"
tool_cmd.tooltip = "這是提示"
tool_toolbar = UI::Toolbar.new "我的工具列"
tool_toolbar.add_item tool_cmd
tool_toolbar.show

輸出結果：

WebDialogs

Sketchup Ruby Api 官方文件建議改為 HTMLDialogs。

以下示範如何建立一個 WebDialogs

wd = UI::WebDialog.new "一個 WebDialog"
wd.show

在新增 WebDialog 時也可以給予其參數：

1. dialog_title
2. scrollable
3. preferences_key：記住 WebDialog 的位置尺寸
4. width
5. height
6. left
7. top
8. resizable

而產生出來的物件有以下的方法可使用：

• set_url
• set_potition
• set_size
• set_file
• max_height
• max_width
• min_height
• min_width

搭配 HTML

在 WebDialogs 之中可以放入 HTML 和 Javascript，例如以下範例先建立一個 .html 檔，之後進行引入：
新增一個 index.html 在 Sketchup 的 Plugins/mytest 資料夾之下

wd = UI::WebDialog.new "一個 WebDialog"
path = Sketchup.find_support_file "index.html", "Plugins/mytest"
wd.set_file path
wd.show

輸出結果：

搭配 Javescript

當 Ruby 想要傳送訊息到 Javascript 時可以使用 wd.execute_script funcName(arg1,arg2)，當 Javascript 想要傳送資料到 Ruby 時，可以在 Javascript 使用 window.loaction = "skp:callback_name@callback_data"

Ruby 傳資料給 Javascript

先建立 ex_909.rb，程式碼如以下：

class EntObserver < Sketchup::EntityObserver
  def onChangeEntity(entity)
    f_count = 1
    for v in entity.vertices
      args = "'#{v.position.x.to_s}','#{v.position.y.to_s}','#{v.position.z.to_s}'"
      $wd.execute_script "setPoint#{f_count.to_s}(#{args})"
      f_count += 1
    end
  end

  def onEraseEntity(entity)
    $wd.execute_script "faceDeleted()"
  end
end

ents = Sketchup.active_model.entities
face = ents.add_face [0, 0, 0], [10, 0, 0], [10, 10, 0], [0, 10, 0]

cbs = EntObserver.new
face.add_observer cbs

$wd = UI::WebDialog.new "檢查並顯示端點位置"
path = Sketchup.find_support_file "ex_910.html", "Plugins/mytest"
$wd.set_file path
$wd.show

再建立 ex_910.html：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function setPoint1(c1, c2, c3) {
            document.getElementById("pt1").innerHTML = `${c1},${c2},${c3}`
        }

        function setPoint2(c1, c2, c3) {
            document.getElementById("pt2").innerHTML = `${c1},${c2},${c3}`
        }

        function setPoint3(c1, c2, c3) {
            document.getElementById("pt3").innerHTML = `${c1},${c2},${c3}`
        }

        function setPoint4(c1, c2, c3) {
            document.getElementById("pt4").innerHTML = `${c1},${c2},${c3}`
        }

        function faceDeleted() {
            document.getElementById("pt1").innerHTML = "圖形已被刪除"
            document.getElementById("pt2").innerHTML = "圖形已被刪除"
            document.getElementById("pt3").innerHTML = "圖形已被刪除"
            document.getElementById("pt4").innerHTML = "圖形已被刪除"
        }
    </script>
</head>

<body>
    <h1>第一個點：</h1>
    <p id="pt1">在預設位置</p>
    <h1>第二個點：</h1>
    <p id="pt2">在預設位置</p>
    <h1>第三個點：</h1>
    <p id="pt3">在預設位置</p>
    <h1>第四個點：</h1>
    <p id="pt4">在預設位置</p>

</body>

</html>

輸出結果：

Javascript 傳資料給 Ruby

請建立 ex_911.rb，並複製以下內容：

wd = UI::WebDialog.new "Face 製造機"
wd.set_size 600, 350
path = Sketchup.find_support_file "ex_912.html", "Plugins/mytest"
wd.set_file path

wd.add_action_callback("create_face") do |dialog, arg|
  if arg.to_s.length == 0
    puts "無效的輸入"
  else
    v = arg.to_s.split(",")
    pt1 = [v[0].strip.to_f, v[1].strip.to_f, v[2].strip.to_f]
    pt2 = [v[3].strip.to_f, v[4].strip.to_f, v[5].strip.to_f]
    pt3 = [v[6].strip.to_f, v[7].strip.to_f, v[8].strip.to_f]
    pt4 = [v[9].strip.to_f, v[10].strip.to_f, v[11].strip.to_f]

    Sketchup.active_model.entities.add_face pt1, pt2, pt3, pt4
  end
end
if RUBY_PLATFORM.index "darwin"
  wd.show_modal
else
  wd.show
end

再建立 ex_912.html ，複製以下內容：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function sendPoints() {
            var ids = new Array("x1", "y1", "z1", "x2", "y2", "z2", "x3", "y3", "z3", "x4", "y4", "z4");
            var arg = "";
            var entry = "";
            var valid = true;

            for (i in ids) {
                entry = document.getElementById(ids[i]).value
                if (entry.length == 0 || isNaN(entry)) {
                    valid = false;
                } else {
                    arg += `${entry},`
                }
            }
            if (!valid) {
                arg = "";
            }
            window.location = `skp:create_face@${arg}`;
        }
    </script>
</head>

<body>
    <input type="text" id="x1" value="0.0" size="10" maxlength="6">
    <input type="text" id="y1" value="0.0" size="10" maxlength="6">
    <input type="text" id="z1" value="0.0" size="10" maxlength="6">
    <hr>
    <input type="text" id="x2" value="0.0" size="10" maxlength="6">
    <input type="text" id="y2" value="0.0" size="10" maxlength="6">
    <input type="text" id="z2" value="0.0" size="10" maxlength="6">
    <hr>
    <input type="text" id="x3" value="0.0" size="10" maxlength="6">
    <input type="text" id="y3" value="0.0" size="10" maxlength="6">
    <input type="text" id="z3" value="0.0" size="10" maxlength="6">
    <hr>
    <input type="text" id="x4" value="0.0" size="10" maxlength="6">
    <input type="text" id="y4" value="0.0" size="10" maxlength="6">
    <input type="text" id="z4" value="0.0" size="10" maxlength="6">
    <hr>
    <input type="submit" onclick="sendPoints();" value="產生">
</body>

</html>

輸出結果：

參考資料

• 當SketchUp遇見Ruby：邁向程式化建模之路

https://guides.rubyonrails.org/rails_on_rack.html

簡介

此篇是延伸至上一篇 Ruby 使用 Splat Operator 修飾參數，上篇介紹的是 Splat Operator (*)，會將傳入的引數變成一個 Array，而此篇的 Double Splat Operator (**) 則是一個不同的應用，詳細內容就繼續看下去吧。

使用方式

在參數前方加入**，如以下：

def test(**arg)
    ...
end

Double Splat Operator (**)

使用 Double Splat Operator 修飾的參數會有以下幾個特性：

1. 只能傳入 Hash
2. 該參數為選填，不傳入時該參數會是{}
3. 只能傳入一個 Hash，不像 Splat Operator (*)可以傳入多個引數
4. 該參數需要放在最後
5. 可以搭配關鍵字參數(Keyword Parameter)

除了 第4點 和 第5點 外，使用 Double Splat Operator 修飾的參數與以下參數並無差別

def test(arg={})
    ...
end

與 Splat Operator (*) 比較

以下比較使用 Splat Operator (*) 和 Double Splat Operator (**) 修飾後的參數差別

使用範例

使用 Splat Operator (*) 和 Double Splat Operator (**) 搭配

我們學校每一年都會舉辦就業博覽會，邀請許多廠商來學校擺攤，今年我大三剛好也有機會去看一下，但是到每一個攤位，都會請我填寫一些個人資料，裡面的資料包含姓名、聯絡方式、學歷和競賽經驗，那我其實就有點好奇，學歷和競賽經驗這種數目不一定的選項，我可以用 Splat Operator (*) 和 Double Splat Operator (**) 寫出來嗎？

def profile(name, email, *educations, **competitions)
    puts "姓名：#{name}"
    puts "電子信箱：#{email}"
    puts "畢業學校：" unless educations.empty?
    educations.each{|education| puts education}
    puts "競賽經驗：" unless competitions.empty?
    competitions.each{|name,award| puts "競賽名稱：#{name} 獎項：#{award}"}
end

profile("wells", "[email protected]", "花蓮高工", "台灣柯基大學", "IOCCC":"冠軍", "國際技能競賽": "冠軍", "英雄聯盟六都爭霸賽":"倒數第一")

輸出：

姓名：wells
電子信箱：[email protected]
畢業學校：
花蓮高工
台灣柯基大學
競賽經驗：
競賽名稱：IOCCC 獎項：冠軍
競賽名稱：國際技能競賽 獎項：冠軍
競賽名稱：英雄聯盟六都爭霸賽 獎項：倒數第一

哦哦！原來真的可以用 Splat Operator (*) 和 Double Splat Operator (**) 寫出來欸！但是調皮的我想要試試看假如沒有 **competitions 這程式會怎麼跑呢？

不使用 Double Splat Operator (**) 的情況

def profile(name, email, *educations)
    puts "姓名：#{name}"
    puts "電子信箱：#{email}"
    puts "畢業學校：" unless educations.empty?
    educations.each{|education| puts education}
end

profile("wells", "[email protected]", "花蓮高工", "台灣柯基大學", "IOCCC":"冠軍", "國際技能競賽": "冠軍", "英雄聯盟六都爭霸賽":"倒數第一")

輸出：

姓名：wells
電子信箱：[email protected]
畢業學校：
花蓮高工
台灣柯基大學
{:IOCCC=>"冠軍", :國際技能競賽=>"冠軍", :英雄聯盟六都爭霸賽=>"倒數第一"}

雖然程式還是可以運作，但是他似乎把最後一個 Hash 也放進 Array 裡了，如果我想要做出與上一版相同的功能，那我就只能用educations.last.each了，但還要處理一些繁瑣的東西，重點是看起來完全不潮！因此假如最後會傳入一個 Hash，我將優先使用 Double Splat Operator (**)。

結語

Double Splat Operator 相比 Splat Operator 我覺得用途就沒有這麼廣泛了，但是相比def test(arg={})，用 Double Splat Operator 就是潮！

參考連結

• Parameter with double splat operator (**) in Ruby

簡介

前陣子在做實作台科不分系學姊時，發現需要會員機制，但假如直接開一個表單要使用者註冊似乎又有點太麻煩， 因為最終傳到 Server 的每一條訊息都已經帶有使用者資訊，於是和卡米哥討論該怎麼做，沒想到他早就已經做過了，而且還結合了 Devise，十分的方便，真是偉哉偉哉卡米哥。

前提提要

此篇文的前提是使用 Rails 的 Kamigo 框架進行 Line Chatbot 開發，如果還不知道如何使用 Kamigo 可以查看前方的連結，參考該 Repo 的 README.md 進行實作。

操作步驟

1. 安裝相關 Gem
2. 生成 User Model
3. 設定 Devise
4. 認證 User

安裝相關 Gem

在 Gemfile 中加入以下內容：

gem 'devise'

之後執行：

bundle install

生成 User Model

請執行以下指令：

rails g devise:install
rails g devise user
rails g migration add_line_login

開啟剛剛新增的 db/migrate/xxxxxxxxx_add_line_login.rb 並在 change 方法中加入以下內容：

add_column :users, :line_id, :string
add_column :users, :name, :string
add_column :users, :image_url, :string

另外，由於我們之後要以 line_id 區分使用者，這導致 email column 的值可能會重複（因為 Devise 預設 email 的值為 '' ），因此需要解決 email 重複的問題，以下新增一個 migration：

rails g migration resolve_users_email_unique

開啟新增的 db/migrate/xxxxxxxxx_resolve_users_email_unique.rb 更改為以下內容：

def up
  change_column :users, :email, :string, null: true, default: nil
end
def down
  change_column_null :users, :email, false, SecureRandom.uuid
end

此段主要為修改 email column，當 user 被建立時，預設值為 nil，以此來避免唯一鍵重複，而 down 中的 SecureRandom.uuid 則是為了避免原本 email 為 nil 的資料 db rollback 後發生重複的問題。
到了這一步後就可以執行 Database migrate：

rails db:migrate

設定 Devise

由於 User 使用 line_id 進行區分，因此 email 和 password 為非必填，在 app/models/user.rb 加入以下內容：

def email_required?
    false
end

def password_required?
    false
end

認證 User

在 app/controllers/application_controller.rb 加入以下內容：

include Rails.application.routes.url_helpers
before_action :line_messaging_login

def line_messaging_login
  user = User.from_kamigo(params)
  sign_in user if user.present?
end

在 app/models/user.rb 加入以下內容：

# params[:source_user_id]
# params[:profile][:displayName]
def self.from_kamigo(params)
  if params[:profile].present? && params[:source_user_id].present?
    line_id = params.dig(:source_user_id)
    name = params.dig(:profile, :displayName)
    user = User.find_or_create_by(line_id: line_id)
    user.update(name: name)
    user
  end
end

完成到這一步後，每次使用者傳訊息至 Line Chatbot 都會判斷 line_id 是否已存在於 users 中，如果沒有會建立，最後的功能就和 Devise 一樣，可以在 controller 中使用 current_user 進行操作。

結語

會員功能就是這麼簡單就做好了，當然這都要歸功於 Kamigo 框架本身就寫得與 Rails 息息相關，目前來說雖然已經完成在 Line Chatbot 中確認使用者，但假如使用者開啟網頁就沒辦法確認了，因此下一篇會介紹使用 Line Login 擴充此會員功能。

參考連結

Kamigo LINE Bot 框架 - 實作簡單的取號機器人

這會 update twice

def execute
  ActiveRecord::Base.transaction do
    shop = Shop.find(1)
    if webest_setting.business_id.present?
      puts "webest_setting.business_id: #{webest_setting.business_id}"
    end
    shop.lock!
    if webest_setting.business_id.nil?
      update_webest_setting
    end
    sleep 10
  end
end

def update_webest_setting
  webest_setting = WebestSetting.first
  webest_setting.business_id = '123'
  webest_setting.save!
end

def webest_setting
  WebestSetting.first
end

2.times { Thread.new { execute } }

update once

def execute
  shop
  ActiveRecord::Base.transaction(isolation: :read_committed) do
    if webest_setting.business_id.present?
      puts "webest_setting.business_id: #{webest_setting.business_id}"
    end
    shop.lock!
    if webest_setting.business_id.nil?
      update_webest_setting
    end
    sleep 5
  end
end

def update_webest_setting
  webest_setting = WebestSetting.first
  webest_setting.business_id = '123'
  webest_setting.save!
end

def webest_setting
  WebestSetting.first
end

def shop
  @shop ||= Shop.find(1)
end

2.times { Thread.new { execute } }

簡介

Splat Operator 是 Ruby 定義方法時很常使用的運算子， 使用 Splat Operator 修飾的參數會將傳入的引入變成一個 Array ，其可以運用在不確定會傳入多少引數的情況，關於其特性和使用範例請繼續看下去。

使用方式

在參數前方加入*，如以下：

def test(*arg)
    ...
end

Splat Operator (*)

使用 Splat Operator 修飾的參數會有以下幾個特性：

1. 可以傳入不限數目的引數，並將所有傳入的引數變成一個 Array，內容依傳入順序排序
2. 該參數為選填，假如沒有傳入引數，該參數的變數會是一個空的 Array
3. 不能有兩個以上 Splat Operator 修飾的參數
4. 可以在其他參數中間
5. 假如其他參數有預設值，一定得在有預設值的參數後面，但建議不要用沒必要刁難自己
6. 假如有指定關鍵字參數(Keyword Parameter)，則必須在其前面 ，如def test(*arg, key:)

使用範例

引數數目不確定

還記得以前我還不會講日文的時候(現在也不會)，當時遇到了一位日本來的同學，為了表示我的友好我決定用日文跟他溝通，於是我使用一個會在結尾都加上「得斯」的翻譯機(translator)，那麼這個翻譯機的程式會是怎樣寫呢？

如果我今天不會 Splat Operator ，我可能會寫成以下：

def translator(arg)
    puts "#{arg}得斯"
end

translator("哈囉")
translator("你好")
translator("我不會講日文")

輸出：

哈囉得斯
你好得斯
我不會講日文得斯

這樣子雖然可以跟日本同學聊上天了，但是這個翻譯機每次只能翻譯一句話，實在有點麻煩，我希望不管我傳入幾句話，它都能夠翻譯，於是我使用 Splat Operator 改寫看看 ：

def translator(*arg)
  arg.each do |str|
    puts "#{str}得斯"
  end
end

translator("空巴哇", "台日友好", "我很會講日文")

輸出：

空巴哇得斯
台日友好得斯
我很會講日文得斯

完美！這下子不僅搭上話，還讓日本來的同學覺得我的日文很好，偉哉偉哉，對打 Code 的人來說語言真不是個問題。

收集多出的引數

我常去吃的小吃店，老闆非常不喜歡餐點做到一半時，客人才跟他說不要香菜或是突然要加麵之類的，於是他希望除了基本的餐點外，客人可以一次把他的需求說出來，所以老闆希望你可以幫他製作點餐系統，除了餐點和大小碗外，其他的要求也不知道有多少個，那麼這該怎麼製作呢？

def order(type, size, *notes)
    puts "餐點種類: #{type}"
    puts "大小碗: #{size}"
    puts "其他備註:" unless notes.empty?
    notes.each do |note|
        puts note
    end
end

order("湯麵","大碗","不要加蔥、要辣","不用免洗筷","湯和麵要分開裝")
puts "------------------"
order("乾麵","小碗")

輸出：

餐點種類: 湯麵
大小碗: 大碗
其他備註:
不要加蔥、要辣
不用免洗筷
湯和麵要分開裝
------------------
餐點種類: 乾麵
大小碗: 小碗

製作完成！無論客人的要求有幾百項，這個系統都不會壞掉！但可憐的老闆就沒這麼幸運了

放置在其中參數之間

過年時，小孩子說句吉祥話就可以討到紅包，於是我想到假如寫個說吉祥話的程式，放在有小朋友外型的機器人，它是不是就會變成一個紅包吸引機了！？並沒有

def say_blessing_words(title,*peoples,blessing_words)
    peoples.each do |people|
        puts "#{title}#{people},#{blessing_words}!"
    end
end

say_blessing_words("親愛的","阿貓叔叔","阿太哥哥","美美阿姨","恭喜發財")

輸出：

親愛的阿貓叔叔,恭喜發財!
親愛的阿太哥哥,恭喜發財!
親愛的美美阿姨,恭喜發財!

有了這一個紅包吸引機我已經迫不期待要過年了！！

結語

總結一下 Splat Operator 的使用時機：

1. 引數的數量不確定
2. 假如參數的數量確定，但太多時也可以節省數量
3. 取代預設值為空陣列的參數，例如def test(arg=[])

在下一篇會介紹 Double Splat Operator 的用法。

參考連結

• Parameter with splat operator (*) in Ruby (part 1/2)
• Parameter with splat operator (*) in Ruby (part 2/2)

前情提要

Sketchup 是一款在建築、都市計畫和遊戲開發都頗有名氣的 3D 建模軟體，而 Ruby 則是一個程式語言，它可以搭配 Sketchup 達成程式化 建模的任務，近期經由系主任引薦，要開發 Sketchup 的 Extension，雖然我寫過 Ruby，但 Sketchup 則是完全沒碰過，於是利用文章來記錄所學的一點一滴。

本篇內容

• Sketchup 基本結構
• Sketchup 模組
• Model 類別物件
• Entities 類別物件
• 超級類別 Entity
• Sketchup 的 Ruby

Sketchup 基本結構

在之前我們畫直線時，曾經使用過以下指令：

Sketchup.active_model.entities.add_line [0,0,0],[9,9,9]

以 Sketchup 的基本結構來拆分的話，可以分為以下三種：

1. Sketchup 模組(Module)
2. Model
3. Entity
4. Method

那這分別代表什麼意思呢？接著看下去。

Sketchup 模組

Sketchup 模組是 Sketchup 專屬的模組，所以你無法在其他地方呼叫 Sketchup，這個模組是專門用來處理 Sketchup 應用程式的所有資訊，在 Ruby 中任何東西都是物件，因此你可以使用 Sketchup 的幾個指令：

Sketchup.os_language
Sketchup.app_name
Sketchup.version

其中最重要的就是 Sketchup.active_model，呼叫此方法將會回傳目前的 Model 物件，至於 Model 物件是什麼？接著看下去。

Model 類別物件

Model 代表一個 Sketchup 的檔案(*.skp)，包括其所有幾何圖形和模型的相關資訊，Sketchup 模組和 Model 模組僅有在剛開啟軟體時才會相同，假如之後有進行變更的話，就會不相同，簡單來說 Model 是 Sketchup 的子集合，可以試試以下指令：

mod = Sketchup.active_model
mod.title
mod.description
mod.path
mod.modified?

Model 是一個大型的容器，其底下包含了六類的容器：

• 元件定義(.definitions)：回傳檔案中ComponentDefinitions物件關聯的元件定義
• 圖層容器(.layer)：回傳檔案中的所有圖層資訊
• 實體容器(.entities)：回傳所有幾何圖形資訊
• 選項管理員(.options)：回傳「模型資訊」的設定選項
• 材料容器(.materials)：回傳使用材料的資訊
• 檢視容器(.pages)：回傳所有場景畫面資訊

Entities 類別物件

還記得之前畫過的直線嗎？

Sketchup.active_model.entities.add_line [0,0,0],[9,9,9]

當我們要畫直線之前，必須要先拿到 Entity 的控制權，也就是 Sketchup.active_model.entities，之後我們才可以用 .add_line 方法去畫直線。

值得一提的是當初我們在畫圓形時 .add_circle，其會回傳由多個 Edges 物件所組成的 Array，而並非單個物件。

超級類別 Entity

在 Entity 之下有許多子類別，其中最重要的就是 Drawingelement，在我們繪製幾何圖形時使用的就是該子類別的方法。
另外 Entity 物件有提供幾個常用的方法：

• entityID：回傳該物件 ID
• typename：回傳幾何物件的型態
• model：回傳此物件所在的 Model
• parent：回傳此物件的父層
• deleted?：回傳此物件是否已被刪除
• valid?：回傳此物件是否有效

請記得假如用 .add_circle 畫出來的物件是 Array，因此不能直接用上述的方法讀取。

Sketchup 的 Ruby

Sketchup 的 Ruby 有幾個有趣的操作，有些認為沒這麼好用的就不記錄了。

1. 長度的轉換

   由於 Sketchup 有所謂的長度單位，還記得第一篇中，我們使用預設的英吋單位開啟檔案，那假如在程式碼中想要畫公分怎麼辦？

   Sketchup.active_model.entities.add_line [0,0,0],[9.cm,9.cm,9.cm]

   直接在後方加入單位即可，十分的方便。

2. 陣列

   在 Sketchup 中假如要標示某點，必須以三維空間標示，而這通常都以一個陣列表示，於是 Sketchup 中的 Array 有以下幾種特別的方法：

   | 方法 | 用途 | 範例 |
   | -------- | -------------------------------- | --------------------------------- |
   | x | 回傳陣列中x軸的座標 | pt=[1,2,3];pt.x -> 1 |
   | y | 回傳陣列中y軸的座標 | pt=[1,2,3];pt.y -> 2 |
   | z | 回傳陣列中z軸的座標 | pt=[1,2,3];pt.z -> 3 |
   | on_line? | 判斷陣列代表的點是否在同一直線上 | pt=[3,3,3];line=[[1,1,1],[2,2,2]]; pt.on_line? line ->true|

參考資料

• 當SketchUp遇見Ruby：邁向程式化建模之路

本篇內容

• 介紹
• 防範機制
• 挖坑給自己跳

介紹

儲存型 XSS 是利用動態網站經常從資料庫撈出資料後產生 HTML 的特性進行駭入，最常見的就是有貼文功能的網站，原本該呈現正常的貼文，但惡意人士將 JavaScript 寫入貼文中，導致其他用戶在觀看其貼文時瀏覽器直接執行該段內容裡的 JavaScript。

防範機制

儲存型 XSS 的駭入程序大致如下：

1. 儲存惡意程式碼進資料庫
2. 網站以資料庫的資料產生 HTML 傳給用戶
3. 用戶的瀏覽器解析 HTML 並執行惡意程式碼

依照上方流程最常見的防護手段在第二步，在 Rails 內建中，會自動將 HTML 裡的特殊字符進行轉義，例如以下變化：

如果不相信可以建一個 index.html 並在其放入：

<script>alert("hack!")</script>

和

<script>alert("hack!")</script>

比較看看最後出來的會是什麼。

另外一種防範手法是內容安全政策(CSP)，做法是在 HTML 的 Head 裡加入以下 Meta：

<meta http-equiv="Content-Security-Policy" content="default-src 'self'">

此段規定所有的 JavaScript 皆只能從 <script> 中的 src 屬性讀取，內聯的 JavaScript 皆不會被執行。
而 CSP 也可以設定白名單，詳細作法請參考 Content Security Policy (CSP) 筆記。

挖坑給自己跳

在 Rails 中，一般都會使用 *.html.erb ，如果想要在該檔案中遷入變數，就會寫成：

<div>
    <%= post%>
</div>

而其中的 <%= %> 就已經有進行轉義處理，因此就算你在其中放入 JavaScript 它也不會執行：

<div>
    <%= '<script>alert("hack!")</script>'%>
</div>

那假如今天閒來無事，可以試試看在前方加入 raw，那麼它就不會轉義了，例如：

<div>
    <%= raw '<script>alert("hack!")</script>'%>
</div>

輸出結果：

使用 raw 會導致惡意程式碼被執行。

參考資料

• Content Security Policy (CSP) 筆記

Load

載入指定的 Ruby 檔案，寫幾次 load 就會執行幾次

# index.rb
puts 'first load'
load 'loader.rb'
puts 'second load'
load 'loader.rb'

# loader.rb
puts <<~TEXT
loading
----------
TEXT

輸出：

first load
loading
----------
second load
loading
----------

require

相比 load，只會執行一次，還有一個類似的叫 require_relative，跟 require 差別在於找檔案的起始點不同
require 會從 $LOAD_PATH 這個環境變數裡找，而相對路徑的 require 則比較適合用 require_relative

# index.rb
puts 'first require'
require './loader.rb'
puts 'second require'
require './loader.rb'

# loader.rb
puts <<~TEXT
loading.......
----------

TEXT

輸出：

first require
loading.......
----------

second require

autoload

autoload 會註冊 module 名稱在當前的 namespace，當之後訪問該 module 時，會使用 require 載入註冊時的檔案路徑

# index.rb
puts 'first autoload'
autoload :A, './loader.rb'
puts 'second autoload'
autoload :A, './loader.rb'

A.hi

# loader.rb
puts <<~TEXT
loading.......
----------

TEXT

module A
  def self.hi
    puts 'hi'
  end
end

輸出：

first autoload
second autoload
loading.......
----------

hi

前導

1. 這章像在介紹軟體界的「誓約與制約」，提到了三種典範語言為程式碼增加了一些規則，而這些限制可以讓軟體品質更高
   1. Structuring Programming
   2. Object-Oriented Programming
   3. Functional Programming
2. 可以由上述的限制延伸到整個系統的三個專注點
   1. function
   2. separation of components
   3. data management

Structuring Programming

1. 增加限制在 Program counter 的控制
   1. imposing discipline on direct transfer of control
2. 使用 if, else, while 取代 goto
   1. 為何要廢除 goto 看這篇
3. 雖然現今的主流語言已經沒有 goto 但還是有像 exception 和 break 等等破壞流程的語法
4. Edsger Wybe Dijkstra 想要用數學學科中的**歐幾里得定理**找到一個公式可以代表軟體的品質
5. 所有的程式都是由 sequence, selection, and iteration 組成
   1. sequence, selection 透過枚舉法證明
   2. iteration 透過歸納法證明
6. 第 5 點的發現看似有機會找到公式解，但最終失敗了，於是開始採取科學的方式證明軟體品質
   1. 數學可以證明對的
   2. 科學是普遍性的假說，如黑天鵝，所以存在可否證性(falsifiability)
7. 測試無法代表程式正確，僅能透過程式發現錯誤
8. Structuring Programming 的價值來自於可以由多個可否證性的 unit(function) 所組成
9. 鼓勵用 module 或是 function 切分系統 (functional decomposition)

補充資料

• structured programming (modular programming)

Object-Oriented Programming

1. 增加限制在 function call(from pointer)

   1. imposing discipline on indirect transfer of control

2. 有兩位大神發現可以把 function call stack frame 放在 heap memory 中

   1. stack memory vs heap memory

      1. stack memory is a fixed of size memory

         int val = 0; // compiler can know the size of the programming

      2. 在 heap memory 中的空間不隨著 function return 而釋放，所以需要在用完後需要呼叫 free() 或是由 GC 處理，heap memory 是整個系統共用的

         int* ary = new int[n] // cannot know the size during compilation

3. 什麼是 OO?

   1. combine data and function
      1. f(o) → o.f()
   2. 模擬現實世界
   3. encapsulation, inheritance, and polymorphism
   4. 上述都對於作者來說都不是好的答案

4. Encapsulation

   1. 並非是 OO 的專有概念

      struct Point {int x;int y;} // C 語言也可以封裝

   2. OO 的封裝並不完美

      1. C++
         1. the header file includes variables (the user doesn’t need to know)
      2. Java/ C#
         1. definition and implementation are in the same file

5. Inheritance

   1. The goal of Inheritance is the re-usability of already implemented code by grouping common functionality of different classes in so-called base classes —- from How To Implement Inheritance and Polymorphism in C?
   2. 在 C 裡也可以手動完成類似的概念(透過轉型)

6. Polymorphism

   1. In Polymorphism, we declare an Interface and implement the details in entities of different types —- from How To Implement Inheritance and Polymorphism in C?
   2. STDIN and STDOUT 早已包含 Polymorphism 的概念

      1. 每個 Unix 上的裝置都要實作 5 個 functions，這些 functions 都包含在 FILE Structure

         1. open
         2. close
         3. read
         4. write
         5. seek

         // device definition
         #include "file.h"
         void open(char* name, int mode) { /*...*/ }
         void close() { /*...*/ }
         int read() { /*...*/ }
         void write(char c) { /*...*/ }
         void seek(long index, int mode) { /*...*/ }
         
         struct FILE console = { open, close, read, write, seek }
         
         // somewhere
         extern struct FILE* STDIN;
         STDIN = exist_device
         int getchar() {
         	return STDIN->read();
         }

      2. 透過上述方法可以將每個 device 當成是一個 plugin，這種作法稱為 Plugin architecture

   3. C++ 透過 Virtual method table 找對應的 method 位置
   4. 在 OO 之前，polymorphism 的達成是需要去 init pointer 的，假如忘記 init 而直接用 pointer call function 是很危險的
   5. OO 導入 interface 讓 polymorphism 更安全
      1. initialization
   6. 依賴反轉延伸出依賴方向是可以自由選擇的
      1. business rule, UI, Database
      2. 互相獨立 → 可以讓不同 team 開發

7. 上述的三個概念，沒有一個是由 OO 發明出來的

8. OO 帶來的好處

   1. 以系統架構而言，通過使用 polymorphism 脫離程式碼的依賴取回控制權(程式碼的擺放位置變得自由)
      1. OO 讓 polymorphism 的使用變得更安全(可能是透過 .new)
   2. Plugin architecuture 減少依賴，讓各部件可以獨立開發和部屬

Functional Programming

1. 增加限制在 assignment statement
   1. imposing discipline on assignment statement
2. immutability architecture
   1. 任何的同步問題都是由可修改的變數而產生的，如 race condition, deadlock
3. 隔離可變性
   1. 區分 immutable 和 mutable components
   2. immutable component 可以跟多個 mutable component 溝通
   3. mutable component 要用 transactional memory 保護變數
      1. RDMS database
   4. 盡可能地讓所有處理是 immutable 的
      1. pure function
4. Event Sourcing
   1. 類似區塊鏈的概念
   2. 只有新增讀取，沒有刪除更新
   3. 前提是要有無窮的空間和處理效能

參考官方文件

前置需求

Windows

• NeoVim 9.0+
• PowerShell 7(預設是沒有 pwsh 可用的 PowerShell 5)
• Rust
• make
• 該加的環境變數加一加

實際安裝

照貼官網的下載 scirpt，無腦按 Y 就好

成果

Windows 字體有夠醜，看了好不爽
挑一個好評的字體來安裝

簡介

目前開發的專案都會放在雲端伺服器上，雖然 Heroku 這種微服務很方便，但最常用的還是直接開一個虛擬機，但是每次開一個新的虛擬機都要設定一些東西，而第一步我就會先設定好 SSH，因為沒辦法在本機上連到伺服器作業真的是太痛苦了QQ

設定流程

以下示範新增使用者到使用 SSH 進行無密碼登入：

1. 新增使用者
2. 使用 SSH 進行無密碼登入

新增使用者

建立一般使用者

1. sudo passwd重設sudo密碼
2. su成為超級使用者
3. adduser username新增使用者
4. 將新增的 user 加入 sudo 清單
   1. vim /etc/sudoers開啟sudo列表
   2. 在其中加入以下內容:

      username = ALL(ALL:ALL) ALL
      

建立部署專用使用者

為了安全性考量，會建立一個專門用來部署專案的使用者，這個使用者不會有密碼。

1. adduser --disabled-password deploy建立一個沒有密碼的使用者

使用 SSH 進行無密碼登入

當完成上一個步驟時，就已經可以用 ssh username@serve_ip 連上了，但由於這種方式需要輸入使用者密碼，像是部署專用使用者就無法連上了，因此可以依照以下步驟完成不用密碼登入。

1. 確認本地有金鑰，如果沒有執行 ssh-keygen 建立金鑰。
2. 檢視本地的金鑰 cat ~/.ssh/username-ssh-key.pub，並且複製。

   金鑰通常位於 ~/.ssh/ 這個目錄中，如果沒有就會在執行 ssh-keygen 的當前目錄，username換成你生成金鑰時輸入的使用者名稱。

3. 把本地的公鑰複製到伺服器使用者的認證金鑰：

   mkdir ~/.ssh
   touch ~/.ssh/authorized_keys
   vim ~/.ssh/authorized_keys # 貼上本地的金鑰
   chmod 700 ~/.ssh # 修改該目錄權限
   chmod 644 ~/.ssh/authorized_keys # 修改該檔案權限

4. 測試看看ssh username@server_ip

如果不行可以嘗試使用ssh -i ~/.ssh/username-ssh-key username@server_ip

到這一步正常來說就可以在本地以 SSH 的方式連上伺服器了。可喜可樂～可喜可樂～

結語

之前在嘗試建立 SSH 連線到 GCP 時，踩了許多坑，尤其是使用 ssh-copy-id 這種方式，直接讓我連 server 都 Ping 不到了，我也不知道為什麼，感覺應該是被 Ban 掉了，因此此篇紀錄的是目前試下來最穩的方式。

Available version

• MySQL5.7
• PostgreSQL 9.2

PostgreSQL

• JSON type(text + validation)
• JSONB type

MySQL

• JSON type(as PG JSONB)

• What’s the difference between JSON and JSONB in PG

  JSON

  • As Text type

  JSONB

  • Stored in internal format(Binary format), in order to use a key or array index to find a subobject without reading the whole JSON
  • Compare with JSON type has these benefits
    • Validation
    • Can update subobject or nest object by JSON functions
    • Fast to find the subobject or nest object
    • Slightly slower to input

  Semantically-insignificant details(white space…)

  SELECT '{"bar": "baz", "balance": 7.77, "active":false}'::json;
                        json
  -------------------------------------------------
   {"bar": "baz", "balance": 7.77, "active":false}
  (1 row)
  
  SELECT '{"bar": "baz", "balance": 7.77, "active":false}'::jsonb;
                        jsonb
  --------------------------------------------------
   {"bar": "baz", "active": false, "balance": 7.77}
  (1 row)

  Convert Value to numeric

  SELECT '{"reading": 1.230e-5}'::json, '{"reading": 1.230e-5}'::jsonb;
           json          |          jsonb
  -----------------------+-------------------------
   {"reading": 1.230e-5} | {"reading": 0.00001230}
  (1 row)

• How big about JSON column

  • space: roughly the same as for LONGBLOB or LONGTEXT(approx 4 GB)
    • limited by max-allowed-packet variable

• How can I use JSON Column

  mysql> CREATE TABLE t1 (jdoc JSON);
  Query OK, 0 rows affected (0.20 sec)
  
  mysql> INSERT INTO t1 VALUES('{"key1": "value1", "key2": "value2"}');
  Query OK, 1 row affected (0.01 sec)
  
  mysql> INSERT INTO t1 VALUES('[1, 2,');
  ERROR 3140 (22032) at line 2: Invalid JSON text:
  "Invalid value." at position 6 in value (or column) '[1, 2,'.

  • Keys must be a string(Rails developers should pay attention)
  • JSON can contain strings or numbers, the JSON null literal, or the JSON boolean true or false literals

  JSON primitive type	PostgreSQL type	Notes
  string	text	\u0000 is disallowed, as are unicode escapes representing characters not available in the database encoding
  number	numeric	NaN and infinity values are disallowed
  boolean	boolean	Only lowercase true and false spellings are accepted
  null	(none)	SQL NULL is a different concept

• How can I search for value in the JSON column

  using JSON Function with JSON path to searching,(e.g. $.name, $[0], ->)

  MySQL(function + JSON path)

  Prefer function

  mysql> SELECT JSON_EXTRACT('{"a": 1, "b": 2, "c": [3, 4, 5]}', '$.*');
  +---------------------------------------------------------+
  | JSON_EXTRACT('{"a": 1, "b": 2, "c": [3, 4, 5]}', '$.*') |
  +---------------------------------------------------------+
  | [1, 2, [3, 4, 5]]                                       |
  +---------------------------------------------------------+
  mysql> SELECT JSON_EXTRACT('{"a": 1, "b": 2, "c": [3, 4, 5]}', '$.c[*]');
  +------------------------------------------------------------+
  | JSON_EXTRACT('{"a": 1, "b": 2, "c": [3, 4, 5]}', '$.c[*]') |
  +------------------------------------------------------------+
  | [3, 4, 5]                                                  |
  +------------------------------------------------------------+
  mysql> SELECT JSON_EXTRACT('{"a": {"b": 1}, "c": {"b": 2}}', '$**.b');
  +---------------------------------------------------------+
  | JSON_EXTRACT('{"a": {"b": 1}, "c": {"b": 2}}', '$**.b') |
  +---------------------------------------------------------+
  | [1, 2]                                                  |
  +---------------------------------------------------------+

  PG(JSON path)

  Prefer operator

  SELECT doc->'site_name' FROM websites

• How can I update the value in the JSON column

  MySQL

  Partial Update

  mysql> SELECT JSON_SET('"x"', '$[0]', 'a');
  +------------------------------+
  | JSON_SET('"x"', '$[0]', 'a') |
  +------------------------------+
  | "a"                          |
  +------------------------------+
  1 row in set (0.00 sec)

  Merge

  mysql> SELECT
      ->   JSON_MERGE_PRESERVE('{"a": 1, "b": 2}', '{"c": 3, "a": 4}', '{"c": 5, "d": 3}') AS Preserve,
      ->   JSON_MERGE_PATCH('{"a": 3, "b": 2}', '{"c": 3, "a": 4}', '{"c": 5, "d": 3}') AS Patch\G
  *************************** 1. row ***************************
  Preserve: {"a": [1, 4], "b": 2, "c": [3, 5], "d": 3}
     Patch: {"a": 4, "b": 2, "c": 5, "d": 3}

  with Update

  mysql> update t set json_col = json_set(json_col, '$.age', age + 1);
  Query OK, 16 rows affected (13.56 sec)
  Rows matched: 16  Changed: 16  Warnings: 0

  Some limits to Partial Update

  • The column type is JSON
  • Using JSON Update functions
    • JSON_SET()
    • JSON_REPLACE()
    • JSON_REMOVE()
  • The input column and the target column must be in the same column
    • UPDATE mytable SET jcol1 = JSON_SET(jcol2, '$.a', 100)
  • All changes replace existing array or object values with new ones
  • The new value cannot be larger than the old value

When to Use JSON Column?

• Using JSON for Logging Purposes
• To Store Permissions and Configurations
• To Avoid Slow Performance on Highly Nested Data

When To Avoid JSON Data in a Relational Database?

• You are Not Sure what Data to Store In the JSON Column

• You Do Not Want to Deal With Complex Queries

  • query with json column

  SELECT
    U1.id AS user1,
    U2.id AS user2,
    U1.jsonInfo->>'name' AS "U1 Name",
    U2.jsonInfo->>'name' AS "U1 Name",
    A1->>'address' AS "address"
  FROM user U1
  inner join user U2 on (U1.id > U2.id)
  cross join lateral jsonb_array_elements(U1.jsonInfo->'addresses') A1
  inner join lateral jsonb_array_elements(U2.jsonInfo->'addresses') A2 on (A1->>'address' = A2->>'address')

  • query with primitive column

  SELECT
    U1.id AS user1,
    U2.id AS user2,
    U1.name AS "U1 Name",
    U2.name AS "U2 Name",
    A1.address AS address
  FROM
    user U1
    INNER JOIN user U2 ON (U1.id > U2.id)
    INNER JOIN user_address A1 ON (U1.id = A1.user_id)
    INNER JOIN user_address A2 ON (U2.id = A2.user_id)
  WHERE
    A1.address = A2.address;

• You Have a Strongly Typed ORM

  • ActiveRecord

Use case

公司有 Orders 這一個表，在結帳時有時會有需要留備註的功能，但留下備註的人有所不同，例如：店員、店長、顧客、網站管理員……等等，在這種情境下我有幾種做法

1. 直接開 column 在這個 table 上
   1. 適合小流量、資料少的情況
2. 開一個 JSON column 在 order 表上
   1. 適合這些備註只需要內容的情況
3. 開一個備註表，用 poly association
   1. 適合這些備註不只要內容，還需要知道是哪個使用者留言的情況
4. 為每一個備註都開一張表
   1. 適合這些備註各個差異都很大，且需要複雜關聯的情況

References

• https://arctype.com/blog/json-database-when-use/
• https://dev.mysql.com/doc/refman/8.0/en/json.html
• https://www.postgresql.org/docs/current/datatype-json.html
• https://stackoverflow.com/questions/28102425/how-to-use-the-activerecord-json-field-type
• https://guides.rubyonrails.org/active_record_postgresql.html#json-and-jsonb
• https://mikerogers.io/2019/06/11/when-to-use-jsonb-columns-in-rails
• https://dev.to/kputra/rails-postgresql-jsonb-part-1-4ibg
• https://scalegrid.io/blog/using-jsonb-in-postgresql-how-to-effectively-store-index-json-data-in-postgresql/
• https://api.rubyonrails.org/classes/ActiveRecord/AttributeMethods/Serialization/ClassMethods.html

簡介

近期 GCP 的免費額度快沒了，身為一位免費仔我決定再開一個帳號進行移機動作，但每次移機都會發現一些詭異的事情導致浪費一整天，故寫下這個筆記希望以後移機可以快一點。

設定流程

• 簡介
• 設定流程
• 開始設定
  • 設定 SSH
  • 安裝 RVM
  • 安裝 Ruby on Rails
  • 安裝 NVM
  • 安裝 Nodejs 和 Yarn
  • 安裝 Database
    • MySQL
    • PostgreSQL
  • 安裝 Passenger + Nginx
    • 確認安裝成功
  • 設定 Passenger + Nginx
  • 新增 Ngork
  • Bundle lock 新增 Linux Platform
  • 加入 Capistrano Gem 至專案
  • 設定 Capistrano
  • 新增 database.yml
  • 新增 secrets.yml
  • 建立憑證
  • 安裝 Chromedriver
  • 常見狀況
    • 相同 Domain Name 但 SSH 連不上
    • 假如 Server 上的 RVM 找不到

開始設定

設定 SSH

請參考 建立ssh連線到遠端伺服器。

安裝 RVM

由於 rvm 在 Ubuntu 有專用的軟體包，以下指令為 此篇 擷取：

sudo apt-get install software-properties-common
sudo apt-add-repository -y ppa:rael-gc/rvm
sudo apt-get update
sudo apt-get install rvm
sudo usermod -a -G rvm $USER

安裝完後記得把 RVM 加入環境變數，之後執行 source /home/deploy/.bashrc。

安裝 Ruby on Rails

rvm install 2.7.2
gem install bundler
gem install rails -v 6.1.2
rails --version

安裝 NVM

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash

將 NVM 加入環境變數後，執行 source /home/deploy/.bashrc。

安裝 Nodejs 和 Yarn

nvm install node
npm install -g yarn

安裝 Database

MySQL

sudo apt-get install mysql-common mysql-client libmysqlclient-dev mysql-server
mysql -u root -p
CREATE DATABASE databasename CHARACTER SET utf8mb4;

如果遇到 ERROR 1698 (28000): Access denied for user 'root'@'localhost' 參考 此篇。

PostgreSQL

sudo apt-get install postgresql libpq-dev postgresql-contrib
sudo -u postgres psql
\password
\quit
sudo -u postgres createdb demo-production

安裝 Passenger + Nginx

擷取 此篇 內容，執行以下指令：

sudo apt-get install nginx

sudo apt-get install -y dirmngr gnupg
sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv-keys 561F9B9CAC40B2F7
sudo apt-get install -y apt-transport-https ca-certificates

sudo sh -c 'echo deb https://oss-binaries.phusionpassenger.com/apt/passenger xenial main > /etc/apt/sources.list.d/passenger.list'
sudo apt-get update

sudo apt-get install -y nginx-extras passenger

安裝完後重啟server sudo service nginx restart

確認安裝成功

sudo /usr/bin/passenger-config validate-install #選擇`Passenger itself`
sudo /usr/sbin/passenger-memory-stats # 確認Nginx和Passenger有在運行

設定 Passenger + Nginx

編輯 /etc/nginx/nginx.conf

    # 讓 Nginx 可以讀到環境變量 PATH，Rails 需要這一行才能調用到 nodejs 來編譯靜態檔案
+   env PATH;

    user www-data;
    worker_processes auto;
    pid /run/nginx.pid;

    events {
    worker_connections 768;
    # multi_accept on;
    }

http {

    # 關閉 Passenger 和 Nginx 在 HTTP Response Header 的版本資訊，減少資訊洩漏
+   passenger_show_version_in_header off;
+   server_tokens       off;

    # 設定檔案上傳可以到100mb，默認只有1Mb超小氣的，上傳一張圖片就爆了
+   client_max_body_size 100m;

    gzip on;
    gzip_disable "msie6";

    # 最佳化 gzip 壓縮
+   gzip_comp_level    5;
+   gzip_min_length    256;
+   gzip_proxied       any;
+   gzip_vary          on;
+   gzip_types application/atom+xml application/javascript application/x-javascript application/json application/rss+xml application/vnd.ms-fontobject application/x-font-ttf application/x-web-app-manifest+json application/xhtml+xml application/xml font/opentype image/svg+xml image/x-icon text/css text/xml text/plain text/javascript text/x-component;

    # 打開 passenger 模組
-   # include /etc/nginx/passenger.conf;
+   include /etc/nginx/passenger.conf;

新增/etc/nginx/sites-available/${project-name}這個檔案，並填入以下內容：

server {
    listen 80;
    server_name 1.2.3.4;   # 用你自己的服務器 IP 位置

    root /home/deploy/${project-name}/current/public; # 用你自己的項目名稱位置

    passenger_enabled on;

    passenger_min_instances 1;

    location ~ ^/assets/ {
        expires 1y;
        add_header Cache-Control public;
        add_header ETag "";
        break;
    }
}

執行以下指令：

cd ../sites-enabled/
sudo ln -s ../sites-available/${project-name} .
service nginx restart

新增 Ngork

新增 etc/nginx/sites-available/ngrok，填入以下內容：

server {
  server_name ngrok.yourdomain.com;
  # 這邊設定你要設定的 url
  location / {
      proxy_pass http://localhost:3333/;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header Host $host;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header X-Forwarded-Proto https; # 如果有設定 https 要加上這行
  }
}

執行以下指令：

cd ../sites-enabled/
sudo ln -s ../sites-available/ngrok .
service nginx restart

Bundle lock 新增 Linux Platform

至專案中執行以下指令：

bundle lock --add-platform x86_64-linux

執行完後要再推到 Repo

加入 Capistrano Gem 至專案

在 Gemfile 的 development 區塊中加入以下 Gem：

gem "capistrano-rails"
gem "capistrano-passenger"
gem 'capistrano-rvm'

接著執行以下指令：

bundle install
cap install

設定 Capistrano

編輯 Capfile，加入以下內容

require 'capistrano/rails'
require 'capistrano/passenger'
require "capistrano/rvm"

編輯config/deploy.rb

+  sh "ssh-add"

   # config valid only for current version of Capistrano
   lock "3.8.1"

-  set :application, "my_app_name"
+  set :application, "demo"   # 請用你自己的項目名稱

-  set :repo_url, "[email protected]:me/my_repo.git"
+  set :repo_url, "[email protected]:growthschool/rails-recipes.git"    # 請用你自己項目的git位置

+  set :rvm_custom_path, '/usr/share/rvm'  # only needed if not detected
   # Default branch is :master
   # ask :branch, `git rev-parse --abbrev-ref HEAD`.chomp

   # Default deploy_to directory is /var/www/my_app_name
   # set :deploy_to, "/var/www/my_app_name"
+  set :deploy_to, "/home/deploy/demo"     # 這樣服務器上代碼的目錄位置，放在 deploy 帳號下。請用你自己的項目名稱。

   # Default value for :format is :airbrussh.
   # set :format, :airbrussh

   # You can configure the Airbrussh format using :format_options.
   # These are the defaults.
   # set :format_options, command_output: true, log_file: "log/capistrano.log", color: :auto, truncate: :auto

   # Default value for :pty is false
   # set :pty, true

   # Default value for :linked_files is []
-  # append :linked_files, "config/database.yml", "config/secrets.yml"
+  append :linked_files, "config/database.yml", "config/secrets.yml"

   # Default value for linked_dirs is []
-  # append :linked_dirs, "log", "tmp/pids", "tmp/cache", "tmp/sockets", "public/system"
+  append :linked_dirs, "log", "tmp/pids", "tmp/cache", "tmp/sockets", "public/system"

+  set :passenger_restart_with_touch, true

   # Default value for default_env is {}
   # set :default_env, { path: "/opt/ruby/bin:$PATH" }

   # Default value for keep_releases is 5
-  # set :keep_releases, 5
+  set :keep_releases, 5

編輯 config/deploy/production.rb

+   set :branch, "master"
-   # server "example.com", user: "deploy", roles: %w{app db web}, my_property: :my_value
+   server "demo.wells.tw", user: "deploy", roles: %w{app db web}, my_property: :my_value

設定完成後執行以下指令：

cap production deploy:check

因為還沒有新增 database.yml 所以會報錯。

新增 database.yml

在 /home/deploy/demo/shared/config 中新增 database.yml，如果使用 PostgreSQL 填入以下內容：

default: &default
  adapter: postgresql
  encoding: unicode
  pool: 25
  host: localhost
  username: postgres
  password: password

production:
  <<: *default
  database: demo-production

新增 secrets.yml

在本地專案執行：

rails secret

將產生的金鑰依照下方格式貼在 Server 的 /home/deploy/demo/shared/config/secrets.yml。