忙那些忙這些，拖著拖著時間就過去了。
那幅是製成品的系統結構
作者︰杜芬宅
GitHub Project︰https://github.com/keithbox/AngularJS-CRUD-PHP
版本︰2.5.2
開發時間︰12 Dec 2014 到 現在
前言
今天為大家帶來一些衝擊，首先資訊科技的世界一日千里。翻查記錄，杜芬宅在 2014年開始接觸AngularJS，因為當時聲名遠播，各大論壇/資訊平台大讚AngularJS，
及後杜芬宅更在jobsDB 求職網看見一些專門請AngularJS developer的招聘廣告。
抱著AngularJS是個什麼鬼東西，各人都推祟?? 便走去學的心態。
學習過程中發現AngularJS 算是一個概念不錯的產品，但還存在一些問題，例如在1.3前後還未完成支援HTML5當中新的 input type
所以又將AngularJS暫時放下，等它準備好再繼續。
由杜芬宅開始學習時走在潮流的尖端，到現在因為AngularJS各種限制，推出了Angular 2，一代已經變成純粹的專門技能。
背景
杜芬宅完成了作品的雛型，將其放上GitHub，其後收到兩封電郵。一封是一間公司的創辦人問杜芬宅對該公司的業務和工作性質是否有興趣。
一封是邀請杜芬宅對一間公司的產品給一些意見。
杜芬宅意想不到放在GitHub的專案，會引起人注意，甚至主動找你。
假如你對編程有興趣，首先要不顧後果產出一些程式碼，不論規模大小，那些將會是你日後編程的基礎和經驗。
AngularJS簡介
杜芬宅的開發項目名為AngularJS-CRUD-PHP，是想透過AngularJS的優勢減省傳統開發的時間和結構。介紹AngularJS-CRUD-PHP要解說一下運用了AngularJS那些特點。- Two-way data binding
- Directive
- Template + Routing
術語
web page傳統 或 基本的網頁由HTML + CSS + JS 組成
HTML 提供網頁的結構和描述介面的組成部份
CSS 為網頁進行格式設定，包括顏色、大小、文字格式等等顯示格式
JS 支持使用者和網頁進行互動
website
網站由多頁網頁組成
tag
HTML 的組成結構，源於XML。一般為<something></something> 一對tag表示開始和結束。例如<p>段落開始，</p>段落結束。配合CSS可以改變多項格式如段落之間相隔固定距離等等
有少數部份tag沒有開始結束的概念，只有一個tag。例如分隔線<hr>或換行<br>
DOM
即是web page 由browser 轉譯後的結果，一個tag 為一個DOM。
Two-way data binding
你可以建立一個object (物件) / instance (對象) ，然後把那個object與網頁介面的DOM連結。當程式更新object時，AngularJS會自動更新DOM。同樣地，當使用者變更介面數值時，AngularJS亦會自動更新object。
即是說，可以減省很多不必要的getter setter 操作。
從前使用javascript 時用 getElementById 獲得DOM的物件後可以讀或寫DOM的數值。
假設你有一張form，建立員工資料時，你需要很多讀取動作，讀取input box 的員工姓名、出生日期、性別……
同樣地，要顯示員工資料時，也需要很多動作寫入資料庫中的資料到介面顯示給使用者。
用jQuery可以簡單一點，不過數量多時依然是悲劇
以javascript操控DOM
以jQuery操控DOM
Directive
你可以自定義一些directive，例如建立員工資料時，有一個下拉菜單選取部門所屬。那個部份可以自定義成一個元件，方便日後重用。例如建立一個可以重用的員工下拉菜單。
在報銷開支表格上可以重用
在年假申請表格上可以重用
Template + Routing
AngularJS 剛剛開始的出發點是Single Page Application，SPA的原意是減少網頁數量，網頁和資料都通過Ajax更新。同時減少http request + http response 等對頻寬需求。Routing 可以建立SPA，不同的路徑載入不同的template (即是web page)。
或
Template 可以獨立配合Directive ，令不同的元件可以有自訂的介面設計。
Architecture
這裡解說一下杜芬宅製成品的系統結構。那是一個Client/Server 架構，server side 是PHP，client side 是HTML5 + CSS3 + JS。MySQL
資料庫
Database Manager
負責連接 database，存取資料
TableAManager
對應每個table，透過Database Manager負責table資料的Create Read Update Delete。存放table相關的羅輯。
當存在 parent table child table 一對多 的關係時，建立/讀取/修改/刪除 時都涉及一個或以上的table。存放相關處理羅輯。
例子一︰
員工有出生日期但不會記錄年齡，因為年齡會除著時間變化，亦不想將 指定日期 - 出生日期 = 年齡 放在MySQL view 之中，造成對資料庫的依賴。
假設日後變換資料庫時減少資料庫上的轉換。
例子二︰
員工的僱用日期不可能早於出生日期，將建立/修改資料時的檢查部份放在 TableManager。
不同功能牽涉建立/修改員工資料時，都可以共享並重用那檢查部份。
例如三︰
班別父表
高一年級最多有四班，分別是甲乙丙丁，每班上限人數為40人。
每班由一名班主任、兩名班長負責班務
班別父表資料
高一甲班
高一乙班
高一丙班
高一丁班
班別學生子表
高一丙班 學生陳大明
高一丙班 學生劉一世
高一丙班 學生畢關芯
高一丙班 學生李智能
當刪時高一丙班資料時，需要同時刪除 班別學生子表 當中有關高一丙班的 學生
EntityA ControllerA
對應每個實體功能，透過TableManager 存取資料。存放實體相關的羅輯。
包括但不限於以下功能︰計算、生成、匯入、匯出、查詢、報表。
杜芬宅的設計是實體可以有更高的設計彈性，一個大型的系統，保安可以分為資料表層級，資料列層級，功能層級。一個實體功能可能牽涉多個資料表。
例子一︰
兩個不同的實體，有著相類似的功能。存取相同資料表，但可以存取的欄位不同。
ConnectionManager
統一集中，客戶端及伺服器端的連接口。
接收所有客戶端請求，核實請求者的身份，檢查請求者的權限。
如果通過檢查，將會
解析請求內容，調用不同的實體功能。
HMTL5 + AngulaJS
網頁客戶端
系統概覽圖
系統採用MVC 架構
系統概覽圖
客戶端概覽圖
在客戶端部份，主要透過AngularJS 特點大大減雀開發時間，及
AngularJS 應用概覽圖
結論
或許你看成這只是一個運用AngularJS的產品，但是那是一個很重要的過程，除了AngularJS還有React / Vue 可以選擇，只是杜芬宅選了AngularJS。在短時間內學習和掌握一種新技術是一種不錯的優勢。大學的核心價值就是探究，假如你對IT有興趣，想進入相關(computer science)學科，你的專案題目都是圍繞特定範圍，
有一個狀況背景︰
你需要釐清問題，收集需求
擬定數個解決方案
分析方案之間的利與幣，權衡得失
再按照現有狀況策劃最終決定
預計將來的狀況作出調整和改善
最後杜芬宅可能要轉換跑道走去學React 或 Angular 2了。
No comments:
Post a Comment