實踐一個售票後台的思路
以攻城獅球隊售票為例
怎麼開始
一開始我們接到一個需求：我們想要有一個售票系統。
不用太複雜，只要可以賣票就好了！
但既然都要做了，我們開始思考，是不是可以考慮這個系統也可以符合其他售票需求？比方電影院或演唱會，怎麼樣可以提取售票的共性，可以對於不同的場館或活動都能更彈性的使用。
用力（用例）解析
整個團隊基本上都沒有做過售票系統，儘管這樣，也不用想得太複雜。
先來拆解一下所謂的『售票系統』可能需要一些什麼元素？
稍微列舉一下情境：
- 小明想要買一張 6/22 的攻城獅冠軍賽的票
- 所以選了該場次的比賽及座位
- 購票後檢視是否訂票成功。
- 入場時需要檢查票是否有效
再另外取一個購買電影票的情境：
- 小花想要買一張 6/23 的侏羅紀世界的電影票，
- 所以選了那天有售票的電影院，並且選擇了座位，
- 購票後檢視是否訂票成功。
- 入場時需要檢查票是否有效
兩個情境幾乎一樣，但最不同的是，像電影票沒有場地的概念，只要選好廳，並且有座位表即可。
按照剛才的情境我們列出了大概需要以下的東西，（忽略驗票有效性的問題）
再配合全部流程，我們切分出好幾個區塊，按照這個架構，我們可以快速複製出其他同樣有「售票」需求的專案，我們不在乎售票的時機內涵，不在乎場地和座位，也不會在乎如何購買和如何驗證的細節。
整個系統實作包含多個團隊，今天只會針對，售票系統後台做比較詳細闡述。
售票後台
一個售票後台應該要有什麼功能？
功能需求：
- 管理員如何新增活動（場次）？
- 活動如何配置場地？
- 場地如何配置座位圖？
- 座位如何配置不同的價位？
非功能需求：
- 座位配置必須和前台體驗操作一致
- 顯示座位的機制必須可容納全台各種場館的特點。
從座位開始…
先有一個概念，每一個場地都跟座位相關聯的，一個場地內有很多個座位區，而不同的座位區會對應不同的座位表，使用者會先點擊 場地圖上面的某一個區域，再開始選擇他想要的座位。
我們可以先上現行有的售票網站觀察他們怎麼實作點擊場地圖並選擇座位，
發現 map 及 area 兩個平常不常用到的 Html Tag ，利用這兩個 Tag 我們可以點擊圖片上的區域來達到點擊座位區效果。
準備實作
知道可以用 area 後，開始思考那『coords』從何而來？下了 『 create image map coords』幾個關鍵字， 找到下列疑似接近我們需求的結果，就利用他們來完成我們『繪製場地圖』的工作！
建立場地圖
每一個區域的票價是不相同的，所以我們需要上傳一個場地圖，然後將區域『匡選起來』，並且定義它的票價及區域名稱。
利用 canvas 製作將選取來的項目變成 area ，並且儲存他在圖片上的座標點
資料格式大概長個這樣子
然後將 UUID 去對應右側該區域想設定的項目，例如名稱、票價、視野圖等。
建立座位表
有了區域之後，就可以來準備上傳該區域的座位表，請使用者上傳 excel ， 定義幾個參數用法，比方：
- 最上排為及左側為座位編號
- 0 無座位
- 1 視野不良
把從 excel 轉出來的資訊再輸出成畫面，畫面的render邏輯就是基於三個元素。
- x軸
- y軸
- info（它是座位還是走廊，可以賣還是不可以賣…等細節）
利用這三個資訊，寫一個迴圈就可以render出以下以下的座位表。
這樣就完成場地管理跟座位表啦！
這個座位表，將來也會是前台顯示座位表（訂票）的基礎資料，這樣一來，我們也順道解決了訂票界面上選座位的問題。
活動管理
建立活動內容
完成場地建立後，我們就可以到活動管理建立一筆新的活動，並且選擇剛才建立過的場地。
建立活動內容
完成場地建立後，我們就可以到活動管理建立一筆新的活動，並且選擇剛才建立過的場地。
設定座位狀態
後台的使用者可以自由選擇選取保留位的方式，我們只需要去定義參數並且與後端溝通， 與剛才建立的場地座位用同一種方式呈現，只是可以把每個座位都改成可點擊的狀態：
設定完成後按下確認，向後端去更新每一個座位的狀態、即完成設定。
完成上面全部細節後，將活動、場地、座位、訂票（座位ID）全部串連在一起，就可以去實作「攻城獅售票後台」的功能。
完成最棘手的座位控制後，剩下的訂單管理只需要有訂單編號並查詢就完成了！
