---
# System prepended metadata

title: 20220817 SCSS、檔案打包、金流系統
tags: [Rails, Ruby]

---

# 20220817 SCSS、檔案打包、金流系統
###### tags: `Ruby` `Rails`

## SCSS

### manifest
app/assests/stylesheets/application.css
*=require_tree . => 會把所有css檔案全部載入進來
*= require_self ＝> 自己也載進來

**沒用到的檔案就砍了**(scss, helper)!! 展現對自己專案的了解
改檔名把application內的移出，再自己手動載入
**建議模組化**: 細分檔案功用, 可以降低Git衝突

```css
/*
 *= require_self
 *= require "form"
 *= require "flash"
 */
```
![](https://i.imgur.com/Rj3rTpE.png =300x)

### SCSS 巢狀結構
SCSS可以有巢狀結構
可以解決CSS的混亂
但這不是標準的css
打包時會自動編譯成標準CSS
巢狀結構：
```css=
.field_with_errors {
  display: inline;

  input[type="text"] {
    border: 3px solid red;
  }
}
```

### SCSS 自訂變數
$ 可以拿來自定屬性，再代入
```css
$error-color: red;

.field_with_errors label {
  color: $error-color;
}
```

### SCSS vs Sass
Sass 沒有括號跟分號
Sass 是靠縮排去判定的，所以你只要縮排縮錯了就不會動了。
**當一個工程師，縮排很重要**

### Rails檔案打包歸屬
Assets Pipeline => 交給Ruby做
webpack(er) => 交給node

Webpack   工具
Webpacker gem(用webpacker來叫webpack打包)

**打包的意義**：
**壓縮**
- 減少檔案大小省空間，空格、註解都會省略掉，甚至連變數都會一起幫你改成比較少名 反正瀏覽器看得懂就好了

- 減少對server的request, 例如這個網站有500支css, 打包成一支, 就只需要request一次而非500次

### hand shaking
你來看我網站時，會有握手(hand shaking),確認你的request
http1.1 每次都要握手(鼓勵打包)
http/2 只握手一次就可以做到平行下載(不鼓勵打包)
> https://http2.akamai.com/
> https://http2.github.io/
> https://ithelp.ithome.com.tw/articles/10222189

http/3 正在草稿中
**相關資料：**
維基：https://zh.wikipedia.org/zh-tw/%E6%8F%A1%E6%89%8B_(%E6%8A%80%E6%9C%AF)
https://notfalse.net/7/three-way-handshake
https://ithelp.ithome.com.tw/articles/10280652

rails 5 
Assets Pipleline
Webpack(er)標配

rails 6 
Assets Pipleline
Webpack(er) 

rails 7 
Assets Pipleline
importmaps
(不用node!!)




### 進行打包
index.js類似入口的意思
index.js中import css檔案
方便一次打包

自己在js開個資料夾

css抓取順序：packs/application.js -> index.js -> 個別資料夾的index.js

分層管理


檔案搬到JS後原來在![](https://i.imgur.com/90ul8UR.png)
```css=
/* 
 *= reruire "form"
 *= require "flash"
 *= require_self
 */
```
就可以刪除

關鍵字：CSS in JS

## markdown

> https://vuejs.org/examples/#markdown

想要在輸入框寫markdown

alternative -> 找不到選項時可以找的替代品
vanilla.js -> 超好用，所有大公司都在用它。效能也超好 -> 原生JS
npm <---> yarn


markdown相關套件
1. [simplemde](https://github.com/sparksuite/simplemde-markdown-editor)
2. [easy-markdown](https://github.com/Ionaru/easy-markdown-editor)


找月曆關鍵字 datepicker

月曆套件：
[flatpickr](https://flatpickr.js.org/getting-started/)


後端給前端資訊：例如 用月曆套件 有些天不顯示
可以使用html或是API兩種方式達到目的, 使用的時機
html: 放dataset
API: 比較即時 搶票 


## 訂單建立 (串金流)

```rb=
rails g model Order serial price:integer state user:belongs_to note:text
```

### 來去繳費
先成立訂單，再去刷卡

想路徑～～～～

```ruby!
resource :plans, only: [:show]

resources :orders, except:[:edit, :update, :destroy] do 
  # 取消訂單
  member do 
    delete :cancel
  end
end
```
接著就是平常的CRUD
訂單編號：
ORD-20220817000123
好處是：一看就知道日期跟訂單數
壞處：業績被發現


### 狀態

- 未付款 unpay
- 已付款 paid
- 付款失敗 fail
- 已取消 cancelled
- 已退款 refunded

### 狀態機 state machine ### 
可以先畫出關狀態機關係圖
寫在model order.rb

```rb=
event 線 do
transitions from: 節點 to: 節點
```

每過一分鐘，非洲就過了60秒！
人類是可以做很多事情的：像是喝岩漿ㄑ(一生只能喝一次 >///< )
![](https://i.imgur.com/FTiUBfw.png =200x)

如果直接進資料庫改東西，是會出事的！！！！(就跟突然從四檔拉到R檔一樣0口0)

來裝套件囉！！！來裝套件囉！！！ㄑ！
statemachine
[AASM](https://github.com/aasm/aasm)
```$bundle add aasm```

order model導入套件
```ruby
include AASM

aasm column: "state" do
    state :pending, initial: true
    state :paid, :fail, :refunded, :cancelled

    event :pay do
      transitions from: [:pending, :fail], to: :paid
    end

    event :fail do
      transitions from: :pending, to: :fail
    end
    event :cancel do
      transitions from: [:pending, :fail], to: :cancelled
    end
    event :refund do
      transitions from: :paid, to: :refunded
    end

  end
```

狀態機會送你方法:
可以去sandbox玩玩看, 以這個order例子來說：
order = (serial:'kk' price:100)

?系列：(回傳true false)
```ruby
order.pay? 
order.fail?
order.cancel?
order.refund?
```

may_可以嗎系列：(回傳true false)
```ruby
order.may_pay?
order.may_fail?
order.may_cancel?
order.may_refund?
```

!執行系列：(改變state)
```ruby
order.pay! ->state從pending變成paid
order.fail!
order.cancel!
order.refund!
```

可以在狀態機內再加其他事情，當狀態發生改變，會一起做
```ruby!
   event :pay do
      transitions from: :[:pending, :fail], to: :paid
      after do 
        puts "發簡訊"
      end
    end
```

工程師的手也伸不進來：
```ruby
aasm no_direct_assignment: true do
    (略)
end
```

SecureRandom module可以用方法alphanumeric產生字母數字的字元
secure.alphanumeric