Hong Kong address area code - jQuery Version

今天想分享一個 Program 仔，就是可以自動分辨香港地址上的分區


====================================================

Hong Kong Address Area Code

開發工具︰NotePad++
技術︰jQuery, Ajax, JSON, PHP, HTML, CSS

版本編號︰2014-08-29(因為是當天完成的)
開發者︰杜芬宅
授權條款︰Apache License 2.0

===================================================================
事源是這樣的，說故事︰
===================================================================

背景

有一次進行 Data Importation ，但是對方竟然十分不聽話的沒有提供 Area Column 的值。
這種時候我就跪係到，當然無可能啦。為了費時失事，沒有傳回叫對方補回資料。

因為那是小事，因為我手頭上沒有其它工作，因為收了對方錢。
那種事，上位的當然不理你，只要你出到貨。

反正有時間，就寫個無聊小程式自我陶醉一下

預期結果

香港地址，在信件上寫地址，香港分為四大區域︰香港島(Hong Kong Island)、九龍(Kowloon)、新界(New Territories)、離島(Foreign)
Area Column 的預期值是
香港 = H
九龍 = K
新界 = N
離島 = F

香港島15-18, 離島1, 大概是10-14, 其它是新界

===================================================================
良機 －→ 實幹 －－→ ……
===================================================================

Functional Requirement

簡單地 Brain Storming 一下，首先︰
(前設是杜芬宅是Web Base 形式寫的)

• 為了辨識每句地址是屬於香港、九龍、新界、離島，要有一類似字典的存在。指名尖沙咀是九龍、銅鑼灣是香港島
• 字典必須允許使用者更新，不可能簡單地只懂區分十八區是四個中的那一個吧
• 為了方便存取 字典，就把它獨立出來，不和Web Page混在一起

『嘣』出世了

由於時間的關係，Programming 就完成了

go to DEMO PAGE

使用指南 User Guide

How to use

1. Make sure the current dictionary matching table are work.
2. Place your list of address copy from excel to the left panel at below and wait
3. The sentence trim by , will display at the right panel, at the same time..
4. The program will try to identify the area code of each line of address
5. You may assign area code in the custom address area code panel manually

How to update the dictionary

1. After finish you manual assignment, click the [update dictionary] button
2. Your new keywords will display at the "Dictionary New Definition" panel
3. You may change and edit in the "Dictionary New Definition" panel
4. Click [Generate New JSON] button, the new json code will include the new dictionary definition
5. Click [submit] to update the json file by PHP or copy the json code update by yourself

如何使用辨識功能

1. 打開網頁，程式會自動載入字典供之後的配對使用
2. 在 [Press your address here] Panel 輸入地址，記得用Enter(換行)分隔每個地址。貼上地址後稍等
3. 地址的最尾部份會分割出來，顯示在[Get the substring] Panel。此時可核對，如有問題重新修改左方的地址
4. 在此同時，程式會自動生成一行行的框框。並且嘗試與字典核對，自動配對出正確的 area code
5. 使用者亦可以 在框框內的下拉選單，手動指派 area code

如何更新字典

1. 當完成所以地址的 Area code 指派後, 按下 [update dictionary] 按鈕
2. 新追加的字典定義 將會顯示在 "Dictionary New Definition" panel
3. 如發現有問題。例如不想在字典加入某一項的定義，可以在 "Dictionary New Definition" panel 的相應文字方塊中修改內容
4. 按 [Generate New JSON] 按鈕, 新的字典定義將加入到舊字典並生成新的字典
5. 此時你可以複製新字典，手動切換字典內容 。或 是按 [Submit] 按鈕更新字典，你的網頁伺服器需要支援PHP

Program Flow and Logic

那個『小』程式，都是寫來玩玩。可能有點甩皮甩骨(殘缺不全)，請大家多多包涵，最好有高手賜教啦。

[Press your address here] Panel
有文字變更時會觸發一個計時器
3秒內有文字再更動3秒倒數重新計算，倒數到零時開始切割地址，找出地址最後的部份

[Get the substring] Panel
每句地址最後的部份，會顯示在此

[Custom address area code] section
同時，每句最後的地址會生成一個框框，如果在字典找到相同的 那部份，會自動指派 Area Code。
如果沒有相同，使用者可手動在下拉選單選取 Area Code

[Dictionary New Definition] Accordion
按下 [Update Dictionary] 後，會檢查所有框框，如果某項地址並未記錄在字典時。
該項地址會出現在[Dictionary New Definition] Accordion 雙應的分區

New Json Accordion
按下 [Generate New JSON] 後 ，會根據原本的字典加入，新的字典定義
生成出新的JSON字典定義

Submit Button
新的 JSON 字典定義生成後，你可以手動複製文字並更新 check-address-area.txt 的內容
或按 [Submit] Button，如果你的Web Server支援PHP就可以自動更新字典

====================================================================

自說自話

現在回想起來，只會找出地址最後一部份。那只適用於英文地址，嗯…
本來我的Scope就是只有英文，哈。

有關什麼是 jQuery
http://try.jquery.com/levels/1/challenges/2

jQuery 主要令以下五大要點 更容易實行

• find - elements in an HTML document 找出/指向一個 HTML 的元素(element / tag / node)
• change - HTML content 變更 HTML 內容
• listen - to what a use does and react accordingly 對使用者指定動作出特定回應 (在其它程式那可能叫 Trigger / Listener)
• animate - content on the page 動態特效
• talk - over the network to fetch new content 運用 Ajax 技術，瀏覽者不用刷新網頁，內容也可以刷新

還有後續文章，敬請期待下一篇文章就以上案例 比較 AngularJS 與 jQuery 兩者對開發者的不同『待遇』

====================================================================

Reference︰

• jQuery
• jQueryUI
• jQuery Logo
• AngularJS Logo
• Lock Logo
• Unlock Logo