[iOS教學] 使用 PromiseKit 來管理你的 callback!

請參考 PromiseKit 的文件:

Promise 基本概念

在非同步執行的流程處理上,傳統作法一直是個麻煩點,
而 Promise 透過一些函式可以很直覺的管理非同步的流程。

傳統的做法

以 iOS 而言,你可能要透過 NSOperationQueue 或者
GCD (Grand Central Dispatch) 這些方法來做非同步的流程。

如果要接續觸發( A 事情做完做 B )的情境,A 事情的 callback 做完之後緊接著 B 事情,你可能會得到一個很深的縮排。
如果是互相等待完成( A 跟 B 事情 )的情境,你可能要透過一些 boolean 來把狀態記住,然後 A 事情跟 B 事情的 callback 同時要檢查對方是否做完,才接續另外一個 callback 。 以上並不是說這樣寫不能用,只是你會有更好的解法,讓程式碼變得更乾淨好閱讀。

Promise 的做法

主要關鍵字有 firstly then catch 還有 always
要字面上來看就是 「首先」、「然後」最後是有錯誤時用 catch 抓取錯誤。

這個範例還用了一個很實用的 when() 來綜合二件非同步的事情,當二件事情都結束時才會回傳到下一個 Callback。

這是一個綜合各種基本關鍵字的範例

firstly {
    // Show Loading status bar
    return when(myAsnycTaskA(), myAsnycTaskB())
}.then { (resultA:MyObjectA, resultB:MyObjectB) -> Void in
    // Show results
}.always {
    // Hide Loading status bar
}.catch { error in
    print(error)
}

最簡單的範例

這是一個最基本的範例
基本句型有 thencatch 就可以了

myAsnycTaskA().then { 
    (resultA:MyObjectA) -> Void in
    // Show results

}.catch { error in
    print(error)
}

宣告

至於你想要宣告一個事情也不難

func myAsnycTaskA()-> Promise<MyObjectA> {
    return Promise { fulfill, reject in
        // Done
        fulfill(result)

        // Fail
        reject(error)
    }
}

回傳一個 Promise,裡面有 fulfill()reject() 二個 method。
當資料回來的時候呼叫 fulfill()
當出現錯誤的時候呼叫 reject() 並帶入一個 Error 物件。

複雜一點的範例

這時回過頭來看第一個範例,我又把它改複雜了一點,是不是比較不難了呢?

firstly {
    // Show Loading status bar
    return when(myAsnycTaskA(), myAsnycTaskB())
}.then { (resultA:MyObjectA, resultB:MyObjectB) -> Promise<MyObjectC> in
    // So some processing
    return myProcessingTaskC()
}.then { (resultC:MyObjectC) -> Void in
    // Show results
}.always {
    // Hide Loading status bar
}.catch { error in
    print(error)
}

首先,同時做 myAsnycTaskA()myAsnycTaskB()
等二者結果回傳了之後,做 myProcessingTaskC() 最後回傳結果。

在 callback 的處理上是不是變得比較開心愉快了一點呢?
以上就是 Promise 的快速介紹。

有興趣的話,可以查看官方文件裡面有更進階的寫法。
這個概念不只在 iOS (Swift) 可以用,在 JavaScript (ES6) 也有類似的語法,有機會再專文介紹。

[教學] Mac OSX 內建防火牆 PF 使用筆記

<br />

你知道 Mac 本身也有內建防火牆嗎?
我指的不是 System Preferences 裡面有的防火牆(那個屬於 Application Firewall 指定程式進出的),而是可以像 linux iptables 可以設定規則的防火牆。

它叫做 Packet filter 簡稱 PF,因為 Mac OSX 屬於 BSD 系列的系統
自從 10.7 (Lion) 之後就有內建 PF(在這之前是 IPFW),只是預設是關閉的。

官方文件寫的非常少,大部分要參考 FreeBSD 的文件或者 OpenBSD 的文件,
大部分這二者看到的文件跟語法大多都支援。
介面只能用指令列,跟手動編輯文字檔的方式,沒有美美的 GUI 介面 😀

官方文件: https://developer.apple.com/legacy/library/documentation/Darwin/Reference/ManPages/man5/pf.conf.5.html

指令是 pfctl 設定檔主要是 /etc/pf.conf

常用指令

這裡列出我常用的 pfctl 指令

檢查預覽規則

$ sudo pfctl -vnf /etc/pf.conf

如果設定檔有錯誤會在這裡顯示,反之顯示規則

重新啟動防火牆

$ sudo pfctl -d ; sudo pfctl -ef /etc/pf.conf

分號前半段是關閉防火牆,後半段是啟動防火牆,我把它合再一起比較方便

檢視狀態

$ pfctl -s state

pf.conf 設定

打開 /etc/pf.conf (需要 root 權限,可以用 sudo 拿到)
預設只有這樣

#
# Default PF configuration file.
#
# This file contains the main ruleset, which gets automatically loaded
# at startup.  PF will not be automatically enabled, however.  Instead,
# each component which utilizes PF is responsible for enabling and disabling
# PF via -E and -X as documented in pfctl(8).  That will ensure that PF
# is disabled only when the last enable reference is released.
#
# Care must be taken to ensure that the main ruleset does not get flushed,
# as the nested anchors rely on the anchor point defined here. In addition,
# to the anchors loaded by this file, some system services would dynamically
# insert anchors into the main ruleset. These anchors will be added only when
# the system service is used and would removed on termination of the service.
#
# See pf.conf(5) for syntax.
#
#
# com.apple anchor point
#
scrub-anchor "com.apple/*"
nat-anchor "com.apple/*"
rdr-anchor "com.apple/*"
dummynet-anchor "com.apple/*"
anchor "com.apple/*"
load anchor "com.apple" from "/etc/pf.anchors/com.apple"

Options (參數選項)

這個 Options 要在設定檔最開頭加入,不然會 Syntax error
不多說,直接看範例就明白

# 最佳化模式:一般模式
set optimization normal
# 阻擋的策略:直接丟棄
set block-policy drop
# 封包需要照順序
set require-order yes
# 跳過 lookback 介面不處理
set skip on lo
# log 紀錄只記最危急的等級
set debug urgent

其他細節可以參考這裡
https://www.openbsd.org/faq/pf/options.html

Anchors (規則群組)

Anchor 算是一個規則群組,你可以把你的規則分門別類。
例如這樣:

anchor "myrules"
load anchor "myrules" from "/etc/pf.anchors/myrules"

再來就是編輯你剛剛定義的 /etc/pf.anchors/myrules 檔案就可以了

當然這例子很粗淺,
你也可以使用連結裡的範例,用巢狀的方式寫出更複雜的規則
https://www.openbsd.org/faq/pf/anchors.html

Variables (變數)

變數定義就像是寫程式一樣定義字串,看範例就懂,也就不再贅述:

int_if="{ en0 en1 }"
ext_if="{ ppp0 }"
webports = "{http, https}"
int_tcp_services = "{domain, ssh, ntp, www, https}"
int_udp_services = "{domain, ntp}"
icmp_types = "echoreq"

跟 bash shell 一樣,井號 # 開頭的為註解,使用變數就是前面加錢字號 $

Tables (表格)

table <private> const { 192.168/16 }

這裡定義了表格,名叫 private,IP範圍在 192.168.x.x
這個 /16 是指 16bit 的子網路遮罩,等同於 255.255.0.0
用的是 CIDR 表示法
https://en.wikipedia.org/wiki/Classless_Inter-Domain_Routing#CIDR_notation

相關資料
https://www.openbsd.org/faq/pf/tables.html

Rules (規則)

這裡就是最複雜的地方了,建議文件先開起來看
https://www.openbsd.org/faq/pf/filter.html

文件裡有提到語法為

action [direction] [log] [quick] [on interface] [af] [proto protocol]
[from src_addr [port src_port]] [to dst_addr [port dst_port]]
[flags tcp_flags] [state]

有一個很大的重點是 規則是從上到下做比對,如果規則有衝突的話,會諄照 最後一條 符合的規則去執行。
要提一下 quick 這個關鍵字,如果有看到 quick 就代表只符合該規則,會無視後面寫(沒有 quick 關鍵字)的規則

例如文件寫的範例:

# 擋掉所有 ssh (TCP port: 22) 的連線
block in proto tcp to port ssh
# 允許所有連線
pass in all

規則第一行寫擋掉它,第二行又寫允許,假設有一個 SSH 連線, 該封包是被擋掉呢?還是被允許?
答案是被允許,因為規則如有衝突的話,諄照 最後一條 符合的規則去執行。

# 擋掉所有 ssh (TCP port: 22) 的連線
block in quick proto tcp to port ssh
# 允許所有連線
pass in all

第一行雖寫擋掉它,但因為有加 quick 所以會忽略之後所有符合的規則(忽略掉允許的規則)
所以假設有一個 SSH 連線,這次會變成 被擋掉。
這才是我們要的結果。

黑名單範例

黑名單顧名思義就是預設允許,只擋掉不要的
假設有台 個人開發機 要設定 PF 防火牆,需求如下:

  • 預設允許所有連出連入連線
  • 擋掉所有 80 (http), 443 (https) 的連入,只允許私有IP使用
  • 擋掉所有 3306 (mysql) 的連入,只允許本機連線
# === Developer machine example ===
# 指定連線介面
int_if="{ en0 en1 }"
# 指定要開放 連入 的服務
webports = "{http, https}"
# 定義私有IP範圍
table <private> const { 192.168/16 }
# 預設允許所有連出連入連線,並保持狀態
pass in all keep state
pass out all keep state
# 跳過 lookback 介面不處理
set skip on lo
# MySQL (TCP:3306) 允許本機 lookback 介面 能連線,阻擋其他的封包
pass in quick on lo proto tcp from any to any port 3306
block in quick proto tcp from any to any port 3306
# 只允許私有 IP 能連線,阻擋其他的封包
pass in quick proto tcp from <private> to any port webports
block in quick proto tcp from any to any port webports

測試

設定好了之後來測試,這裡列出幾個:

  • 是否本機能正常連線到 MySQL?
  • 找一台同網段的裝置,是否無法連接 MySQL?
  • 找一台接不同網路的裝置來測試,是否無法連接 MySQL?
  • 是否本機能正常看到自己開發中的網站?
  • 找一台同網段的裝置,是否能正常看到網站?
  • 找一台接不同網路的裝置來測試,是否能正常看到網站?

    附註:MySQL 連線指令為

    $ mysql -u root -h <YOUR_IP> -p

    測試 HTTP 伺服器

    $ docker run -d -p 80:00 j796160836/simple-test-http

    使用 docker 這個測試 image,
    對應內部 container 80 port (後者) 到主機 80 port (前者)

白名單範例

白名單顧名思義就是預設全部擋掉,再允許我要的連線,
這個設定比較複雜,要小心設定,要避免自己把自己鎖住出不去。

假設有一台 http 伺服器 要設定 PF 防火牆,需求如下:

  • 預設擋掉所有進出的連線
  • 只接受 80 (http), 443 (https) 的連入,其餘不打開
  • 基本對外上網要能用 (dns查詢、ntp網路對時、ssh、http)

這裡是簡化版,如有其他需要可以自行再加

# === HTTP server example ====
# 指定對外連線介面
ext_if="{ ppp0 }"
# 指定要開放 連入 的服務
webports = "{http, https}"
# 指定要開放的 連出 的服務
int_tcp_services = "{domain, ssh, ntp, www, https}"
int_udp_services = "{domain, ntp}"
# 跳過 lookback 介面不處理
set skip on lo
# 重新組合封包
scrub in all random-id fragment reassemble
# 擋掉所有 進入 的連線
block drop in log all
# 擋掉所有 連出 的連線
block out all
# 阻擋惡意偽造封包
antispoof quick for $ext_if
# 指定要開放 連入 的服務
pass in on $ext_if proto tcp from any to any port $webports
# 指定要開放的 連出 的服務
pass out quick on $ext_if proto tcp to any port $int_tcp_services
pass out quick on $ext_if proto udp to any port $int_udp_services
# 接受 PING 回應
pass on $ext_if inet proto icmp to $ext_if icmp-type "echoreq" keep state
# 接受使用 traceroute
pass out on $ext_if inet proto udp from any to any port 33433 >< 33626 keep state

測試

設定好了之後當然要測試,這裡列出幾個:

  • 該台伺服器是否能正確上網?是否能正常使用 ping, traceroute, nslookup 等功能?
  • 多個網路介面同時連線上網之後,對外介面 ppp0 斷線之後,是否無法上網? ping 會不會不通?
  • 找另一台接不同網路的裝置來測試,是否能夠 ping 到該台伺服器? http 是否能正確連入? 確認其他的 port 是否不能連入?

開機自啟動

PF 防火牆設定好了之後,可以這樣設定讓它開機自動啟動

$ sudo vi /System/Library/LaunchDaemons/com.apple.pfctl.plist

然後修改部分內容,以下列出全文

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>Enabled</key>
<false/>
<key>Label</key>
<string>com.apple.pfctl</string>
<key>WorkingDirectory</key>
<string>/var/run</string>
<key>Program</key>
<string>/sbin/pfctl</string>
<key>ProgramArguments</key>
<array>
<string>pfctl</string>
<string>-e</string>
<string>-f</string>
<string>/etc/pf.conf</string>
</array>
<key>RunAtLoad</key>
<true/>
</dict>
</plist>

其他規則範例

這裡我搜集了一些網友寫的規則,也蠻有參考價值的

https://gist.github.com/kujohn/7209628
https://gist.github.com/nathwill/9703175
https://gist.github.com/rosstimson/5826279
http://daemon-notes.com/articles/network/pf

注意事項

這裡講一些我遇到的雷,

  • pf.conf 跟 Anchors 文件的最後請多放二個換行,不然有時候會莫名遇到 Syntax error (這個最雷)
  • Mac OS X系統大版本更新之後(例如:El Capitan 升級到 Sierra),請倒回去確認防火牆規則是否還在,可能會被清掉
  • 設定防火牆時請避免使用遠端連線,避免重啟防火牆時被斷線或被錯誤的規則鎖在門外
  • 防火牆啟動後(尤其是採用白名單策略時),如果該電腦不能正常上網,切勿慌張,先查查看防火牆規則,是不是自己把自己給檔在門內出不去 😄

設定防火牆規則很複雜,請多測試,有時候不是你想的那樣,多參考別人的範例規則,再慢慢調整成自己想要的,good luck!

參考資料

http://www.thedeepsky.com/howto/newbiepfguide.php
http://www.scottro.net/pf.html
http://www.openbsd.org/faq/pf/options.html
http://www.openbsd.org/faq/pf/example1.html
http://www.openbsd.org/faq/pf/logging.html
https://www.freebsd.org/doc/handbook/firewalls-pf.html
https://forums.freebsd.org/threads/38669/
https://forums.freebsd.org/threads/11511/
https://forums.freebsd.org/threads/28101/
http://www.bsdforen.de/threads/pf-icmp-wahnsinn.14694/
https://forum.pfsense.org/index.php?topic=126031.0

使用 Markdown 來發文章吧!


這篇我看到文章的時候半信半疑,
想說真的可以這樣做嗎?於是乎就試試看,沒想到效果還不錯。

為什麼要學 Markdown?

Markdown 跟 BBCode, Wikitext 類似,但比檯面上的標示語言更為精簡好用,又是純文字文件,讀取不受各種編輯器的限制,好掌握。

簡單幾個要領 Markdown 快速上手

  • 井字號(#) 開頭的文句為 標題 (井號數量代表標題的大小)
  • 減號(-) 或 星號(*) 開頭的文句為 項目符號 (這個最常用)
  • 想要 1. 2. 3. 的項目符號?就直接打就可以了

    1. 這是第一項
    2. 這是第二項
  • 文句末 斷行前另外多加二個空白才是代表換行(這很重要)

這幾點學起來就很夠用了,想要進階一點可以看看這幾招

  • 開頭 二個星號 (**) ( 或底線 (_) ),中間包起來的字句為 粗體
  • (鍵盤左上方的)的頓號 ( ` ) 中間包起來的文句會做 特別標示
  • 連續三個頓號 ( ``` ) (或者整個程式碼做 tab) 包起來的文句可當做程式碼
像這樣,這區域可以放程式碼
  • 小於符號 ( > ) 開頭的文句可以做為引用

像這樣,這裡可以用來引用文句

其他請見 Markdown 文件說明,亦可跟 HTML 混用

小弟部落格的需求

會寫一些技術文章,教學文筆記,開箱心得...等等,
會有不少上傳照片的需求(我比較喜歡每個步驟都有詳細的圖片)
部分會黏貼程式碼,程式碼希望能標明色彩或放在一個區域裡。

以前我的發佈文章流程

在 Windows Live Writer 寫好文章直接發佈至 PIXNET

以前用 Windows 電腦,使用 Windows Live Writer 的所見即所得 (WYSIWYG) 編輯器,照片也可以一併處理,還不賴。
缺點是只能單向發佈,發布後的文章無法回去 Windows Live Writer 做修改。
不過後來物換星移就沒使用了。

在 PIXNET 線上編輯器編輯,程式碼過水 Eclipse 再過水 Word

後來 PIXNET 的所見即所得 (WYSIWYG) 編輯器有做一些改進,自動儲存草稿功能還不錯,就索性直接在瀏覽器上邊輯了。
但是程式碼的部分不會自動標色,這部分 Eclipse 可以辦到,把程式碼複製貼上到 Microsoft Word 再複製貼上到編輯器上,這樣幾乎無損連同格式一起複製過來,方法繁瑣了一點,但部分空白鍵會被莫名的吃掉。
圖片的部分就直接在編輯器裡上傳整理。

現在有一個新的流程 -- 使用 Markdown

用 MacDown 編寫 Markdown 文字內容,然後用 Export > HTML... 的方式,將 Markdown 文件轉成 HTML 語法(含預設的CSS)
然後在所見即所得 (WYSIWYG) 編輯器裡適時的加上圖片、設定文字顏色、超連結...等。

MacDown 軟體下載
https://macdown.uranusjr.com/

當然你可以不用 MacDown 這套軟體,可以隨你喜歡用別的,也可以用線上版本的,這部分可能要多方嘗試找到一套你順手喜歡的。

小缺點

缺點當然有

  1. Macdown 為單向輸出,已發佈的文章無法再變回 Markdown 再次編輯。
  2. 少了程式碼色彩標示,多了一些質感,少了一些方便。

對於日常發文等基本需求,我想應該夠用吧!

[2017.12.01] 更新

發現 MacDown 預設的 CSS 樣式會干擾部落格原有的 CSS 樣式,
導致部分破版問題,需要做一些 Patch。

需刪除這段 CSS 樣式

body {
font-family: Helvetica, arial, sans-serif;
font-size: 14px;
line-height: 1.6;
padding-top: 10px;
padding-bottom: 10px;
background-color: white;
padding: 30px; }
body > *:first-child {
margin-top: 0 !important; }
body > *:last-child {
margin-bottom: 0 !important; }

和這一段 CSS 樣式

@media screen and (min-width: 914px) {
body {
width: 854px;
margin:0 auto;
}
}

這樣就可以了 😀

參考資料

http://ebola777.pixnet.net/blog/post/57528840

[教學] 用 OpenWRT 做分離式上網設定 (以 小米路由器mini 為例)


這是一篇筆記備忘,因為設定很繁複,所以專門寫一篇做紀錄。
為何叫作分離式上網呢?其實這個名稱是我取的 😆

當然這個要用第三方韌體才做得到,官方韌體是沒這功能的 😛

以下所適用的情境是:

  • 切成多個 VLAN 區域,互相看不見彼此
  • 每個 VLAN 區域會分到不同的 IP 網段
  • 每個 VLAN 區域都有對應的 Wifi 無線網路供使用
  • 每一個 VLAN 區域要能夠對外上網

以下截圖採用 PandoraBox 的韌體在 小米路由器mini 上執行。
但因為 PandoraBox 是 OpenWRT 的版本分支,
LEDE 亦是 OpenWRT 的版本分支,
理論上 LEDE / OpenWRT 都能適用,只是版面排版不一樣。

什麼是 VLAN (Virtual LAN)?

引用 Wikipedia 的說明

A virtual LAN (VLAN) is any broadcast domain that
is partitioned and isolated in a computer network
at the data link layer (OSI layer 2).

翻譯一下, VLAN 是一個 OSI Layer 2 的獨立廣播區域。

虛擬區域(Virtual Local Area Network 或簡寫 VLAN)
是一種建構於區域網路交換技術(Switch)的網路管理的技術,
網管人員可以藉此透過控制交換機有效分派出入區域網的封包
到正確的出入埠,達到對不同實體區域網中的裝置進行邏輯分群
(Grouping)管理。

引用文章的說明

什麼是VLAN?VLAN是在同一物理區域網內
用於劃分若干個不同廣播域(子網)的技術,
子網內的主機可以互相通信,不同子網的主機之間不可互相通信。
什麼是VLAN ID?用於標識每個VLAN子網的ID。

範例環境

vlan.png

假設一台路由器有二個 VLAN

  • VLAN1
    • 路由器 IP: 192.168.1.1
    • 分配網段: 192.168.1.0/24
    • 無線網路 (2.4GHz) 名稱: PandoraBox
    • 無線網路 (5GHz) 名稱: PandoraBox_5G
  • VLAN2
    • 路由器 IP: 192.168.2.1
    • 分配網段: 192.168.2.0/24
    • 無線網路 (2.4GHz) 名稱: PandoraBox_lan2
    • 無線網路 (5GHz) 名稱: PandoraBox_5G_lan2

 

設定步驟

VLAN 設定

1. 到 Switch 頁面,設定好 vlan

Screen Shot 2017-11-20 at 10.57.58 PM.png

這邊的 Port 是指實體 RJ45 的有線接口,
可以通過插拔網路線的方法,對應到每一個 Port。
如果 Port 狀態為 untagged (不關聯),即該 Port 作為本 VLAN 成員,進行二層交換;
若選擇 tagged (關聯),Port 之間通信無二層交換,而是衝突廣播(類似 Hub 的方式)

簡單來說,

  • 要加入該 VLAN 的 Port 選 untagged
  • 不加入的 Port 選 off
  • CPU 照預設值,選 tagged
  • 其他的 Port 照預設值設定即可

以 小米路由器mini 來說,

4112272063a99d01 (1) copy.jpg

從左到右,分別是

Reset Button / USB 2.0 / Port 0 (White) / Port 1 (White) / Port 4 (Blue)

它多出一個特殊 Port 是 Port 7,其他機型沒有

  • Port 7 照預設值,選 tagged

以這個範例來說

原本

  • VLAN ID 1 (LAN): Port 0, Port 1
  • VLAN ID 2 (WAN): Port 4

改成

  • VLAN ID 1 (LAN1): Port 0
  • VLAN ID 2 (WAN): Port 4
  • VLAN ID 3 (LAN2): Port 1

因為有了 VLAN 這麼方便的功能,
你可以自由的定義每一個網路接口是什麼功用,不用照預設給的 WAN 是藍色, LAN 是白色的限制。

無線網路 Wifi 設定

Network > Wifi 頁面,在 [2.4GHz 頻段] 與 [5GHz 頻段] 各新增一個 SSID,
名稱為 PandoraBox_lan2PandoraBox_5G_lan2 並設定好 SSID名稱 & 密碼

Screen Shot 2017-11-20 at 10.55.20 PM.png

畫面上會有四個 Wifi,ra0 有二個,rai0 有二個
名稱個別為

  • PandoraBox
  • PandoraBox_5G
  • PandoraBox_lan2
  • PandoraBox_5G_lan2

Screen Shot 2017-11-20 at 10.56.15 PM.png

Screen Shot 2017-11-20 at 10.56.50 PM.png

Screen Shot 2017-11-20 at 10.56.28 PM.png

Screen Shot 2017-11-20 at 10.57.05 PM.png

邏輯介面 (Interfaces) 設定

Screen Shot 2017-11-20 at 10.50.10 PM.png

Network > Interfaces 頁面,新增一個介面,名字叫 lan2

Screen Shot 2017-11-21 at 2.01.35 AM.png

Screen Shot 2017-11-21 at 2.02.13 AM.png

Screen Shot 2017-11-20 at 10.51.50 PM.png

到 General Setup 設定 IP 資訊

  • IPv4 address: 192.168.2.1
  • IPv4 netmask: 255.255.255.0
  • IPv4 gateway: (留空)

到 Physical Settings 指定給定介面

  • VLAN Interface: "eth0.3" (lan2)
  • Wireless Network: "PandoraBox_lan2" (lan2)
  • Wireless Network: "PandoraBox_5G_lan2" (lan2)

到 Firewall Settings 設定

  • Assign firewall-zone LAN2: lan2

整理如下

第一個介面 - LAN

Screen Shot 2017-11-20 at 10.50.53 PM.png

Screen Shot 2017-11-20 at 10.51.13 PM.png

Screen Shot 2017-11-20 at 10.51.22 PM.png

第二個介面 LAN2

Screen Shot 2017-11-20 at 10.51.31 PM.png

Screen Shot 2017-11-20 at 10.51.45 PM.png

Screen Shot 2017-11-20 at 10.51.50 PM.png

介面設定 DHCP Server (二個 Interfaces 都要設定)

  • Disable DHCP for this interface 不打勾(或是按下 Setup DHCP Server
  • Router Advertisement-Service: server mode
  • DHCPv6-Service: server mode

Screen Shot 2017-11-20 at 10.54.57 PM.png

Screen Shot 2017-11-20 at 10.55.05 PM.png

防火牆區域設定

Screen Shot 2017-11-20 at 10.58.29 PM.png

Firewall > General settings 新增一個 Zone,
名稱叫 LAN2 ,並設定:

  • Input: accept
  • Output: accept
  • Forward: accept
  • Covered networks: lan2
  • Allow forward to destination zones: wan

整理如下

第一個防火牆區域 - lan

Screen Shot 2017-12-01 at 2.38.33 AM.png

第二個防火牆區域 - lan2

Screen Shot 2017-12-01 at 2.03.16 AM.png

Port forwarding 設定?

要做 Port forwarding (連接埠轉送 又稱 虛擬伺服器)?
當然可以,在 Firewall > Port Forwards 頁面
假設 對外的 80 port 要對應到 192.168.1.28080 port

就如此設定

Screen Shot 2017-12-01 at 2.06.49 AM.png

然後按下 Add,規則就訂好了

Screen Shot 2017-12-01 at 2.05.52 AM.png

可以按下 Edit 看詳細規則

Screen Shot 2017-12-01 at 2.06.08 AM.png

其他防火牆規則?

其實這都是把 linux 的 iptables 指令做成比較好用的 UI 而已,
在 Firewall > Traffic Rules 這個頁面,會有一些預設的規則,你可以參考這些現有預設的規則仿造一個你自己的

Screen Shot 2017-12-01 at 2.07.32 AM.png

再舉一個例子,假設要禁止 第一個介面(lan) 連到路由器的 telnet,但第二個介面(lan2) 不受限
可以如此設定

Screen Shot 2017-11-20 at 11.16.42 PM.png

如果你熟捻 iptables 指令,不妨直接去 FirewallCustom Rules 把規則直接打進去。

Screen Shot 2017-12-01 at 2.34.33 AM.png

 

參考資料

https://en.wikipedia.org/wiki/VirtualLAN
https://blog.chionlab.moe/2016/07/13/openwrt-multiwan-configuration/
https://www.dd-wrt.com/wiki/index.php/VLAN
DetachedNetworks(SeparateNetworksWith_Internet)

[教學] 小米路由器 mini 刷機紀實 (PandoraBox / Padavan / OpenWRT / LEDE)


xiaomiroutermi42.jpg

圖片來源:http://www.techetron.com/wp-content/uploads/2015/06/xiaomiroutermi42.jpg

其實 小米路由器 mini 這台已經出一陣子了,

官方的韌體也是不錯用但小弟有一些更進階的需求,
所以嘗試使用刷第三方韌體的想法,
網路上教學很多,多方參考才能降低失敗率
以下是我參考多方文件所得出的筆記

刷機有風險,刷機前請參考各方教學文 
步驟弄錯,變磚不要找我 😛

打開 SSH 介面

瀏覽官方 SSH 解鎖工具
前提要先把機器綁定到小米帳號底下,這網址才會有作用 (注意,該動作也會直接註銷喪失保固!

https://d.miwifi.com/rom/ssh

這裡會提供 root 密碼, SSH 工具 (miwifi_ssh.bin)

大略步驟如下:

  1. 刷入開發版 Rom
  2. USB隨身碟放入SSH工具 miwifi_ssh.bin
  3. 斷電,按住reset按鈕之後重新接上電源,長按約3-5秒 LED 變為黃燈閃爍,安裝後會自動重啟
  4. 連入 ssh 進行刷機

screencapture-d-miwifi-rom-ssh-1512040175668.png

打開 SSH 刷入 Breed 工具

Breed 是一款類似於 u-boot 的不死固件,類似手機的 Recovery
它放在 Bootloader 中,當 Firmware 有問題的時候,還可以經由進入 Breed 來做刷機

另外因為小米路由器的韌體架構的關係,韌體上面會有小米序號,
必須要先做備份,以免事後無法回復到原廠韌體。

1. 查看 rom 資料

$ cat /proc/mtd
dev:    size   erasesize  name
mtd0: 01000000 00010000 "ALL"
mtd1: 00030000 00010000 "Bootloader"
mtd2: 00010000 00010000 "Config"
mtd3: 00010000 00010000 "Factory"
mtd4: 00c80000 00010000 "OS1"
mtd5: 00b11e68 00010000 "rootfs"
mtd6: 00200000 00010000 "OS2"
mtd7: 00100000 00010000 "overlay"
mtd8: 00010000 00010000 "crash"
mtd9: 00010000 00010000 "reserved"
mtd10: 00010000 00010000 "Bdata"

2. 備份成檔案

cd /tmp
mkdir rom
dd if=/dev/mtd0 of=/tmp/rom/ALL.bin
dd if=/dev/mtd1 of=/tmp/rom/Bootloader.bin
dd if=/dev/mtd2 of=/tmp/rom/Config.bin
dd if=/dev/mtd3 of=/tmp/rom/Factory.bin
dd if=/dev/mtd4 of=/tmp/rom/OS1.bin
dd if=/dev/mtd5 of=/tmp/rom/rootfs.bin
dd if=/dev/mtd6 of=/tmp/rom/OS2.bin
dd if=/dev/mtd7 of=/tmp/rom/overlay.bin
dd if=/dev/mtd8 of=/tmp/rom/crash.bin
dd if=/dev/mtd9 of=/tmp/rom/reserved.bin
dd if=/dev/mtd10 of=/tmp/rom/Bdata.bin

3. 複製備份到電腦上

用 scp 把備份檔案抓出來 $ scp -r root@192.168.1.1:/tmp/rom .

(註:scp 指令適用於 Mac / Linux 環境,
如果是 Windows 的使用者,請改用 pscp 或 WinSCP 來做資料傳輸)

恢覆指令 (以後備用)

mtd write /tmp/rom/Bootloader.bin Bootloader
mtd write /tmp/rom/Config.bin Config
mtd write /tmp/rom/Factory.bin Factory
mtd write /tmp/rom/OS1.bin OS1
mtd write /tmp/rom/rootfs.bin rootfs
mtd write /tmp/rom/OS2.bin OS2
mtd write /tmp/rom/overlay.bin overlay
mtd write /tmp/rom/crash.bin crash
mtd write /tmp/rom/reserved.bin reserved
mtd write /tmp/rom/Bdata.bin Bdata

4. 刷入 Breed

用 scp 把 breed-mt7620-xiaomi-mini.bin 檔案複製進去

$ scp breed-mt7620-xiaomi-mini.bin root@192.168.1.1:/tmp

5. 執行刷機

cd /tmp
mtd -r write breed-mt7620-xiaomi-mini.bin Bootloader

進入 Breed 介面

斷電,按住reset按鈕之後重新接上電源,長按3-5秒,LED 變為藍燈閃爍 插網路線,瀏覽 192.168.1.1 進入 Breed 介面

screencapture-192-168-1-1-1512040517285.png

選固件更新,在固件這欄刷入你要的 Rom

screencapture-192-168-1-1-upgrade-html-1512040580563.png

[PandoraBox]

檔名:PandoraBox-ralink-mt7620-xiaomi-mini-squashfs-sysupgrade-r1024-20150608.bin

下載位置

[Padavan (老毛子華碩第三方固件)]

檔名:RT-AC54U-GPIO-30-xiaomimini-128M_3.4.3.9-099.trx

下載位置

[OpenWRT]

檔名:openwrt-15.05.1-ramips-mt7620-xiaomi-miwifi-mini-squashfs-sysupgrade.bin

15.05.1下載位置

snapshots(開發版)下載位置

[LEDE]

檔名:lede-17.01.4-ramips-mt7620-miwifi-mini-squashfs-sysupgrade.bin

17.01.4下載位置

(下載連結均由網路搜尋而得,可能會失效,如有缺檔,請自行搜尋,小弟亦不補檔)

刷完手動重新整理,進入新韌體介面

這裡就留給大家動手玩玩各種韌體了

要注意,Breed 適用刷第三方 Rom,雖然也可以刷回小米官方韌體
但是 序號(SN) 會被洗掉不見,沒有序號就不能綁定小米帳號,也不能重新開啟 SSH 權限
如果要刷回原本官方韌體,要把原本備份下來的資料 (包含 Bootloader) 整個倒回去才行
如果成功的話,這時候應該會回到官方的開發版韌體

總結一下,小米路由器mini 這台其實沒有想像中的難刷機,刷了之後能用的功能就更多了,能調整的地方更細緻 第三方韌體穩定度蠻不錯的,適合中重度的玩家使用

參考資料

http://www.jianshu.com/p/111b6c1cbccf
http://eric0703.pentaxfans.net/2934
http://kyoko7384.blogspot.com/2017/03/mini-mod-iptv-rom-mod-padavan-rt-ac54u.html
https://leamtrop.com/2017/05/11/flash-openwrt-squashfs/
https://kirkhsutw.blogspot.tw/2017/06/mini.html
https://kknews.cc/tech/oyb2j3m.html
https://jingyan.baidu.com/article/c45ad29c24ee27051653e264.html
https://jingyan.baidu.com/article/3f16e003faa67e2591c10300.html
https://jingyan.baidu.com/article/215817f790b3ca1eda142333.html

[教學] Tomato 設定 OpenVPN 伺服器步驟 (以 RT-N16 為例)

有鑒於 OpenVPN 的 Server 設定官方文件又臭又長,常常望之卻步
小弟就自己的經驗做一個小小的分享,還有寫了一些方便自己的 Scripts
小弟使用的機器與資訊如下

硬體:Asus RT-N16
韌體:Advanced Tomato
Version 3.4-138    
K26USB-1.28.AT-RT-N5x-MIPSR2-3.4-138-AIO.trx
(OpenVPN version: v2.3.11)
設定使用的電腦:Mac

設定步驟

1. 下載檔案

首先先下載 easy-rsa

https://github.com/OpenVPN/easy-rsa/releases/tag/2.2.2

和小弟寫的 Scripts

https://github.com/j796160836/tomato-openvpn-setup

因為這版的 Tomato 使用的是 OpenVPN v2.3.11
所以搭配 easy-rsa  v2 做設定

然後解壓縮跟我的 Script 放在一起

2. 修改 vars 變數檔案

$ vi vars

把設些改成你要的內容

export KEY_SIZE=2048
export KEY_COUNTRY="US"
export KEY_PROVINCE="CA"
export KEY_CITY="SanFrancisco"
export KEY_ORG="Fort-Funston"
export KEY_EMAIL="me@myhost.mydomain"
export KEY_OU="MyOrganizationalUnit"
export KEY_NAME="EasyRSA"
export KEY_CN="CommonName"

3. 產生伺服器金鑰

generate-keys-server.sh  指令

$ ./generate-keys-server.sh

他會把剛剛的環境變數設定好,並清掉之前有產生的金鑰

產生一個預設名字的伺服器金鑰,最後印出來

如果你之前有跑過這個指令,就不要再跑第二次了

(如果要跑第二次,就要重新設定用戶端金鑰)

執行成功會出現類似這樣的東西

================================================================
Please paste it at Tomato's OpenVPN key config page
================================================================
[Certificate Authority]
-----BEGIN CERTIFICATE-----
MIIDhDCCAu2gAwIBAgIJAJ9a8dYhq73TMA0GCSqGSIb3DQEBCwUAMIGJMQswCQYD
Q6Xp2vd6068LHC7b9qTs1nWHfYbpdOv1GmzKONIGd3FDiuRFJu4J/g==
-----END CERTIFICATE-----
[Server Certificate]
-----BEGIN CERTIFICATE-----
MIID5jCCA0+gAwIBAgIBATANBgkqhkiG9w0BAQsFADCBiTELMAkGA1UEBhMCVFcx
TRmjwzCO84lz2LOYFDVlETjb6Mb76SysoHVb4zNPX7Bkrr2u3c8+vzaV
-----END CERTIFICATE-----
[Server Key]
-----BEGIN RSA PRIVATE KEY-----
MIICXAIBAAKBgQCy1Pwvi8bE0dTpNddzNBluQoKHdHQpa7mBuH7T0+fWLhs3HoEd
POvdTEVwh+G/2kce8xtOwJAkvyppXMWjY2WmSqimVP8=
-----END RSA PRIVATE KEY-----
[Diffie Hellman parameters]
-----BEGIN DH PARAMETERS-----
MIGHAoGBAN8PIYvlZy1rDghoF+K9wmMrCaN5DBi+3HPFemJEZK4wlyeXHLDOGYx+
5vtwBR2tPYXwTwdeMZItmqVMsVuIN4d0vEzDrbNihAU7OaaWzP+bAgEC
-----END DH PARAMETERS-----

(請你自己跑一次,不要直接照樣 copy,這裏的金鑰只是示意而已)

你就打開 Tomato 的 VPN > OpenVPN Sever > Keys 進入金鑰設定頁面

把金鑰對應地複製貼上到對的地方

1

如果它跑太快或者你不小心把結果清掉了,你可以再跑一次 print-server.sh 指令查看

$ ./print-server.sh

4. 抓取 Tomato 上的設定值

這裡有點 Tricky,我是直接讀取它的設定檔指令來做的

請使用 Tools > System Commands (System Shell) 來執行 fetch-server-config.txt 檔案裡面的指令

2

這個是 fetch-server-config.txt 檔案裡面的內容

#!/bin/bash
server_config="/etc/openvpn/server1/config.ovpn"
if [ ! -e $server_config ]; then
echo "File not found!: $server_config"
exit 1
fi
port=`cat $server_config | grep "port" | awk '{print $2}'`
public_ip=`curl -s ipinfo.io/ip`
#public_ip=`curl -s checkip.dyndns.org | sed -e 's/.*Current IP Address: //' -e 's/<.*$//'`
config_data="remote "$public_ip" "$port"\n"$(cat $server_config | grep "proto\|dev\|cipher" | awk '{printf "%s\\n", $0}')
echo "=================================================="
echo "Please paste this command in your easy-rsa folder"
echo "=================================================="
echo
echo "echo -e \""$config_data"\" > server-config" 

執行之後會得到類似這樣的指令

3

==================================================
Please paste this command in your easy-rsa folder
==================================================
echo -e "remote 1.2.3.4 1194\nproto udp\ndev tun21\ncipher DES-CBC\n" > server-config 

一樣,把剛剛產生出來的指令,貼回 Mac 的 Terminal 上,產生 server-config 這個檔案

5. 產生用戶端金鑰

這裡執行 generate-keys-client.sh 這個指令,並打入你要的名稱

$ ./generate-keys-client.sh Client01

這裡我打的是 Client01 做為名稱,你可以換成你要的,但不能重複

執行成功會得到類似這個訊息

Write out database with 1 new entries
Data Base Updated

就完成產生了

6. 產生用戶端OpenVPN設定檔

使用 print-client-config.sh  這個指令,帶入剛剛打的名稱,並寫入進一個 ovpn 檔案之中

$ ./print-client-config.sh Client01 > Client01.ovpn

他就會抓取金鑰跟剛剛 server-config  裡面的內容產生一個設定檔

接下來你只要把 OpenVPN 的用戶端安裝好,使用剛剛的 ovpn 設定檔就可以了

以 Mac 為例,

Mac 的 OpenVPN 用戶端使用 Tunnelblick

https://tunnelblick.net/

安裝完成,雙點 ovpn 檔案,再輸入電腦使用者的密碼就可以使用了

IOS 的話有 OpenVPN Connect 可以使用

https://itunes.apple.com/us/app/openvpn-connect/id590379981?mt=8

把 ovpn 檔案放在 iCloud drive 然後載入它,就可以了

 

祝設定成功!

 

 

 

 

 

 

 

 

 

[Mac/Linux] 在Mac使用usb轉RS232 (serial port / com port)

RS232是什麼?不解釋。
要的話自己去買一條
http://shopping.pchome.com.tw/?mod=store&func=style_show&SR_NO=DCAC16

===以下給有需要的人使用===

驅動部份找這家的晶片

http://www.prolific.com.tw

像我找到這個驅動
http://www.prolific.com.tw/US/ShowProduct.aspx?p_id=229&pcid=41
Screen Shot 2013-01-22 at 2.21.39 PM  

md_PL2303_MacOSX10.6_dmg_v1.4.0.zip

下載解壓縮,安裝完會重新開機

然後打開Applications > Utilities > Terminal (或是你喜愛的Terminal程式)

使用screen指令

screen /dev/cu.usbserial 115200

這個cu.XXXXXX可能會不一樣,我這邊是 cu.usbserial
(這個要安裝完驅動才有唷)
115200就是baud rate

這時會在現有的Terminal執行另一個「視窗」
字面解釋是視窗沒錯,應該說是文字模式下的多工(就像你在切換tty一樣)

到了screen模式底下,可以按control + A 加上 ?
看看help

-----

如果要結束這個對話框
請先按control + A 再按 control + \

(Linux 的話就是Ctrl + A 再按 Ctrl + \ )

如果不離開的話,這個serial可是會被佔用的喔

後來研究一下screen這個指令
其實還蠻好玩的

推薦看這篇

http://wiki.shsh.ylc.edu.tw/index.php/Screen

screen模式下按Ctrl + A 然後 D
儲存現有狀態
然後用screen -r 指令叫回來

Ctrl + A 然後 C 開新的「視窗」
也可以Ctrl + A 連按二次做視窗間切換

 

 

資料來源

http://www.mobile01.com/topicdetail.php?f=482&t=446370&p=1

http://www.rackaid.com/resources/linux-screen-tutorial-and-how-to/

http://wiki.shsh.ylc.edu.tw/index.php/Screen

 

http://pbxbook.com/other/mac-tty.html

http://forums.macrumors.com/showthread.php?t=1125800

 

[Java] Eclipse的偏好設定(操作習慣和好用技巧)

2012-11-15 15 55 03

實在不得不說,Eclipse真的是個很強大的IDE

有些好用快捷鍵在還沒有開始設定偏好設定前先分享一下
這些快捷鍵

Ctrl + Shift + F    自動排版(超好用

Alt + /                 開啟字彙選擇框(自動完成框)
Ctrl + D               刪除一行
Ctrl + /                註解/解除註解多行
Ctrl + B               建置專案
Ctrl + L               到指定行號(一般編輯器都是Ctrl + G)
Ctrl + 1               跳出修正建議框

 

 

-------------------------------------------------

其實這篇的產生因為重灌電腦,常常好多Eclipse好用的偏好設定都忘了設定上去
然後選項又超多,分類錯綜複雜 

除了做個備份,也一併分享給大家

這些路徑不用強記,可以憑印象打關鍵字,很多選項就會跳出來了唷

 

 

專案的編碼格式(Encoding)

這我不知為何,Eclipse它的預設值是ANSI

在還沒有專案的時候,可以像我一樣調整成utf-8

但是如果已有專案的話,文字有可能會變亂碼唷

這時候用convertz救援吧

 

路徑:General > Workspace

關鍵字:encoding

2012-11-15 15 57 41

Text file encoding 的地方,文字框打入 utf-8

另外,Build automatically 的地方,我喜歡把勾勾去掉

需要的時候手動按 Ctrl + B 建置專案

 

 

字體大小設定

我雖然沒有老花,但就是不喜歡字體小小的糊在一起,對Eclipse第一個開刀的一定是字體大小

字體大一點,自己看得也舒服

路徑:General > Appearance > Colors and Fonts

關鍵字:font

2012-11-15 15 59 51

在Basic裡的Text Font修改字體大小

如果只是程式碼,其實只要調Text Font就好,其他會跟著Text Font去調整

至於中文字嘛...預設的字型調過了之後,中文字還是很小
這時可能要調字型,至於字型...每個人的適應能力不同

通常是找每個字體間距相等的為佳,這部份留給大家自行嘗試摟 

 

 

自動格式化設定

路徑:Java > Code Style > Formatter

關鍵字:Format

Eclipse最強大的功能就是「自動格式化(Auto Format)」  (灑花)

在coding的時候可以按個快捷鍵 Ctrl + Shift + F

在凌亂的格式,都整得服服貼貼

 

 

因為受大學老師程式碼風格影響,大括弧「 { 」一定要換一行

所以我們就這樣對應調整

2012-11-15 16 03 46

Eclipse預設風格是不給調的,複製一份設定檔即可

按下New,打入一個喜歡的名字

2012-11-15 16 05 23

在Braces裡,除了最後一個之外,其它都設定成Next line
右邊有預覽窗格,可以邊調邊看效果 

 

 

自動完成框

不只是Eclipse,很多整合開發環境(IDE)都會提供自動完成框

尤其是Visual studio,打幾個字就跳出候選字選取框

就像你在用google一樣簡單

因為電腦CPU等等的條件影響,預設不是甚麼鍵都觸發之
但我們可以把他打開

 

路徑:Java > Editor > Content Assist

關鍵字:auto

2012-11-15 16 07 10

這個自動完成的功能,因為受到網路文章的影響

發現大為好用,故分享給大家

我就直接轉載了

 

勾選 "Enable auto-activation" 的選項
Auto activation delay 為提示出現的延遲時間,建議可以設為 0ms (預設是200ms)
Auto activation triggers for Java 為 IDE 遇到何種字元會自動啟動提示,預設只有 dot,請改為 .abcdefghijklmnopqrstuvwxyz(,
Auto activation triggers for Javadoc 在註解區塊中遇到何種字元會啟動提示,預設是 @ 及 #

 

這個Auto activation triggers for Java,如果CPU不夠力的時候,可以調回預設值:點點 「 .

手動按 alt + / 也是會跳出來啦

 

參考:

http://icercat.pixnet.net/blog/post/23671027

 

ADB連接逾時

這個選項是從這裡來的

http://j796160836.pixnet.net/blog/post/29108155

在開發Android,可以用wifi 來做打開除錯 (就像是連接USB一樣)

但這功能需要root

 

最近是遇到當網路環境不穩定時,連接常常逾時(timeout)

所以可以在這裡設定timeout的時間

路徑:Android > DDMS

2012-11-15 15 55 37

 

ADB connection time out (ms): 預設是5000

經由測試,大概改到80000足夠

 

 

--------------

將會不定時增加...

[RDP] 遠端桌面使用的常用快捷鍵

因為常常使用遠端桌面,太常忘記了要怎麼按

在遠端桌面按 Ctrl + Alt + Delete 了,就筆記一下

 

本機快速鍵 遠端桌面快速鍵 功能說明
CTRL + ALT + DEL CTRL + ALT + END

顯示 [Windows 安全性] 對話方塊

-

CTRL + ALT + BREAK

在視窗和全螢幕顯示模式間切換。

Win Key 或 CTRL + ESC

ALT + HOME

顯示 [開始] 功能表。

ALT + TAB

ALT + PAGE UP

從左到右切換視窗
SHIFT + ALT + TAB

ALT + PAGE DOWN

從右到左切換視窗
PrintScreen

CTRL + ALT + 數字鍵上的加號(+)

將遠端的整個螢幕畫面複製回本機。
ALT + PrintScreen

CTRL + ALT + 數字鍵上的減號(-)

將遠端的作用中的螢幕畫面複製回本機。

 

資料來源

http://blog.miniasp.com/post/2008/07/22/The-hotkey-usage-in-Remote-Desktop-environment.aspx

http://windows.microsoft.com/zh-HK/windows-vista/What-shortcut-keys-can-I-use-in-Remote-Desktop-Connection

瞭解JSON格式

這篇...我想就是給初次看JSON格式的人看的吧
如果懂了它的格式,不會太難

JSON全名叫做JavaScript Object Notation
就是在JavaScript之中,表示物件的一種格式

既然是格式,為何這麼多人愛用
可以好好瞭解一下

 

 

JSON格式簡單來說,就是這二句重點:

--------------------------------

物件(object)用大括號 { }

陣列(array)用中括號 [ ]

先記住這概念

--------------------------------

如果你看不懂JSON,可以用類似這種線上JSON格式化的網站

http://www.jsoneditoronline.org

幫助你瞭解

google搜尋一下:json format

就會有很多,這個網站我覺得做得不錯
我不是故意要打它的廣告,但這網站應該有助於JSON的學習

--------------------------------

 

物件(object)

這裡說的object,不管你曾經在哪裡聽過這個名詞

他就是用key-value的方式儲存

來個範例吧!

{"subject":"Math","score":80}

這就是json裡的object

Screen Shot 2012-12-24 at 11.40.23 AM  

key-value就是指一個鍵值(key)對應一個值(value),跟變數很像

像是subject這個key有個值叫Math

score它的值為80

 

官方網站有個迷宮圖,有助於理解

object  

 

--------------------------------

陣列(array)

陣列可能就比較熟悉些

例如

[0,4,5,2,7,8,3]

Screen Shot 2012-12-24 at 12.12.01 PM  

不難理解,就像是之前寫陣列一類似
這裡的範例是使用數字,但也可以是文字布林或者是陣列物件null。當然,混合就不用說了,絕對OK。

value  

 

文字(text)的例子

["Tom", "John", "Amy", "Ivy"]

Screen Shot 2012-12-24 at 12.32.54 PM  

布林(Boolean)

[true, true, false, false, true, true]

Screen Shot 2012-12-24 at 12.34.43 PM  

硬要用key-value的方式解釋的話
就是0,1,2,3的照順序的數字

array  

 

所以物件和陣列,某方面來說(不考慮資料損失),是可以互相轉換

若 物件 -> 陣列

就會損失鍵值(key)的資料,留下值(value)
或是程式到時候指定說,要鍵值陣列(key array),就會把所有的鍵值(key)合併一起成陣列

若 陣列 -> 物件

就可以將每個值編上數字

 

這裡注意一點
json object的鍵值(key),一定要用文字做鍵值

以下是錯誤的

{0:"Tom", 1:"John", 2:"Amy", 3:"Ivy"}  // error syntax

Screen Shot 2012-12-24 at 12.45.37 PM  

正確應改為

{"0":"Tom", "1":"John", "2":"Amy", "3":"Ivy"}

而整個JSON格式文件之中,是不能使用註解的

 

最後用這二個範例結束吧

成績單

[{"name":"Tom","lastname":"Chen","report":[{"subject":"Math","score":80},{"subject":"English","score":90}]},{"name":"Amy","lastname":"Lin","report":[{"subject":"Math","score":86},{"subject":"English","score":88}]}]

Untitled_Panorama1  

看起來很複雜,對吧?
其實不難

我們做成大家看得懂的表格

成績單1

姓名  Tom Chen 
數學 80 
英文  90 

成績單2

姓名  Amy Lin 
數學 86
英文 88 

 

剛剛也有提到這是個成績單
一開始用一個陣列 [] 包起來,然後是二個物件 {}

[{ ...學生1... },{ ...學生2... }]

學生資料內有姓名和成績

{"name":"Tom","lastname":"Chen","report": ...成績資料... }

成績的部份,因為有很多成績資料,所以有用陣列 [] 包起來

{"name":"Tom","lastname":"Chen","report":[{ ...成績1... },{ ...成績2... }]} 

一個成績資料,也是個物件

{"subject":"Math","score":80}

全部拼起來就成那樣

 

如果用XML的格式寫就長這樣

<data>

    <student>
        <name>Tom</name>
        <lastname>Chen</lastname>

        <report>

            <subject>
                <name>Math</name>
                <score>80</score>
            </subject>
            <subject>
                <name>English</name>
                <score>90</score>
            </subject>

        </report>
    </student>

    <student>
        <name>Amy</name>
        <lastname>Lin</lastname>

        <report>

            <subject>
                <name>Math</name>
                <score>86</score>
            </subject>
            <subject>
                <name>English</name>
                <score>88</score>
            </subject>

        </report>
    </student>

</data>

應該不會太難

 

最後是網站上一開始附的範例

{"name":"John Smith","age":32,"employed":true,"address":{"street":"701 First Ave.","city":"Sunnyvale, CA 95125","country":"United States"},"children":[{"name":"Richard","age":7},{"name":"Susan","age":4},{"name":"James","age":3}]}

Screen Shot 2012-12-24 at 1.57.08 PM  

用XML可能會這麼寫:

<person>

    <name>John Smith</name>
    <age>32</age>
    <employed>true</employed>

    <address>
        <street>701 First Ave.</street>
        <city>Sunnyvale, CA 95125</city>
        <country>United States</country>
    </address>

    <childrens>

        <child>
            <name>Richard</name>
            <age>7</age>
        </child>

        <child>
            <name>Susan</name>
            <score>4</score>
        </child>

        <child>
            <name>Susan</name>
            <score>4</score>
        </child>

    </childrens>

</person>

比起XML,JSON的格式看起來是不是簡潔許多呢?

 

----------------------------------------------------------------

備註

在JSON的格式中,關於中文或其他非英文的部份

一定要用Unicode encode過

通常這個一般處理JSON的函式庫都會做掉

除非你自己print,自己兜出JSON格式

像是

我是中文  就會變成  \u6211\u662f\u4e2d\u6587

類似這種 \u開頭,接一串數字的東西

可以用這個工具做轉換(不過一般程式的library會做掉啦,這不用擔心)

http://www.htmlescape.net/stringescape_tool.html

 

另外有些字元在JSON不能直接打,需要做跳脫的(escape character) 在這
有些大家都很熟悉,就不細講了

\"
\\
\/
\b
\f
\n
\r
\t

這裡有些字碼表供參考

http://en.wikipedia.org/wiki/List_of_Unicode_characters

 

最後,練練英文,去JSON官方網站去看看吧

http://www.json.org

可以看到不同語言對於這個資料格式的實作
接下來也會提到實作的部分

 

參考資料:

http://zh.wikipedia.org/zh-tw/JSON