建置網路服務開發案例以繪禮物為例

目標

● 有點子卻不會寫程式的人○ 想找接案公司幫忙把 做出來

○ 想自學程式把 做出來

● 想知道學會程式以後是怎麼把網路服務做出來的○ 了解開發流程

關於

經歷

● 雅虎資深軟體工程師

●● 繪禮物共同創辦人 技術總監 工程師

專長

● 網路服務後端開發

● 軟體架構設計 設計

● 程式語言：

興趣：精實創業理論、網路服務開發

關於繪禮物

● 繪禮物成立於 年，由插畫家阿贊創辦。

● 最初是提供把肖像畫利用客製化生產變成禮物的

服務，網站由 架設。

● 年初，舊網站被駭客入侵導致網站無法繼續

營運。

● 年 月新網站上線。

● 新網站除了原有的服務項目之外，還加入了編輯器

功能，讓使用者可以直接在網站上 自己的禮

物。

● 目標：養活創辦人

新網站的需求 營運痛點

● 不要那麼容易被攻破 系統維護性

● 手機可以使用○ 大部分的買家都是傳螢幕截圖來詢問

○ 介面讓手機容易看

● 網站速度○ 開啟一頁需要 秒

● 自動化○ 清楚表達資訊

○ 降低詢問次數

○ 價格自動計算

肖像畫抱枕計價方式 = (人像單價 x 人像數) + (產品單價 x 生產數)

Q:如何用傳統電商網站清楚表達計價方式？

新網站的需求 目前的解法

● 不要那麼容易被攻破 系統維護性○ 找工程師 比畫家自己弄還穩

● 手機可以使用○○ 下廣告還是需要網站，等賺錢了再做

● 網站速度○ 不用

○ 說他自幹的話一定會快很多

● 自動化○ 根據需求重新設計流程還有相關系統

■ 商品系統

■ 訂單系統

■ 第三方支付串接

那時候的草稿

到達頁 (Landing page) 畫風選擇頁

確定要做什麼，就可以開始開發了

首先，挑選語言和工具

● 因為沒有收入，所以選擇最熟悉的，減少開發時間○ 語言

○ 後端框架

○ 前端 框架

● 如果沒有熟悉的工具，就找最容易求救成功的工具○ 最多人用的

○ 官方網站文件完整的

○ 最容易 到解法的

接著，決定資料如何儲存

流程 頁面資料

物件與操作

實作資料儲存

1. 選畫風2. 在選要製作的產品3. 結帳輸入資料4. 付款5. 上傳圖片6. 發給畫家作畫7. 合成圖和買家確認8. 送工廠生產9. 包裝出貨

1. 畫風清單2. 列出可製作商品3. 結帳: 輸入資料4. 付款頁面5. 結帳成功頁6. 圖片上傳頁7. 後台訂單管理頁8. 出貨頁9. …. 等頁面

資料物件與操作

資料物件代表人類邏輯上能理解的資料，是抽象化的資料。可能由多張資料表才能實

作出來。

● 商品○ 欄位

■ 上下架狀態 圖片 名稱 價格 商品描述 類型

○ 操作

■ 新增 編輯 上下架 加入圖片 更改圖片 列出商品清單 清單排序

● 訂單○ 欄位

■ 狀態 訂單物品 訂單金額 運費 訂購人資訊 購買人資訊 付款資訊與狀態 出貨時

間 訂單成立時間

○ 操作

■ 產生訂單 付款 編輯訂單 訂單留言 取消訂單 設定出貨

資料物件與

● 是很好用來描述資料長相的格式 工具。

● 例如商品可以描述如下：

實作資料儲存

把資料物件變成 的 。

欄位名稱 型別 說明

id uint, pkey 商品 ID

status tiny-int 狀態 0:下架 1:上架

name varchar(32) 商品名稱

brief varchar(256) 商品簡述

price decimal 商品價格

Table: products

欄位名稱 型別 說明

id uint, pkey 商品圖片 ID

product_id uint 所屬商品ID

image_url varchar(256) 圖片 URL

Table: product_images

實際存起來的樣子

Table: products

id status name brief price

1 1 舊情人抱枕 抱枕描述... 987

2 0 舊情人手機套 手機套描述 ... 87

Table: product_images

id product_id image_url

1 1 http://www.giftpaint.com/img/product-1-1.jpg

2 1 http://www.giftpaint.com/img/product-1-2.jpg

3 2 http://www.giftpaint.com/img/product-2-1.jpg

資料儲存關聯

products

idstatusnamebriefprice

product_images

idproduct_idimage_url

11...n

一對多

資料庫 資料物件與

● 可以參考 的

○

● 藉由 將資料庫 資料表對應到 物件○ 物件關聯對應

○ 一個 代表資料庫某個資料表中的某個列

○ 可定義 與 間的關係

■ 一對一

■ 一對多

■ 多對多

■○ 可依照參數產生對應的 。

○ 資料拉回來後，會依照 關係自動合併成正確的資料結構。

定義資料操作

有了資料操作以後，就可以來組成畫面了

● 是當下伺服器接到的請求， 可以指定參數○

● 利用剛剛的資料操作，把這一頁的商品都列出來，存在 變數

● 我們有一個頁面 ，會把 變數變成頁面

樣板畫面

● 樣板畫面可以幫忙把 物件裡的資料，生成 代碼。

● 使用 語法，提供簡易條件判斷或迴圈。

○

● 是一些語法，讓瀏覽器能夠○ 顯示網頁排版

○ 定義每個物件的樣式

○ 與網頁上的元素互動

● 這三個東西，每一個東西都可以寫成一本書。

● 而且他們有無數變化，包含程式庫 框架 生產工具 新的概念 等。

● 而且每年流行的東西都不一樣○ 今年的東西都還沒學會，明年你就落伍了。

● 靠這三樣東西吃飯的人，叫做前端工程師。

所以前端工程師令人景仰。

雖然前端變化萬千，但是我們還是要用，不得不用。

不然沒有畫面。

沒關係，我們可以站在巨人的肩膀上！

用別人寫好的工具，能動就好

有緣再重寫

響應式網頁

● 網頁排版隨畫面寬度而有所改變 手機 桌機皆可瀏覽同一個畫面

● 有很多函式庫可以協助我們解決響應式網的的問題，我們使用

● 定義好一組語法，只要 依照指定的方式套入，就可以讓

網頁支援響應式。

● 亦提供一些預設定義好的模組可供套用

● 亦提供一些免費樣板可供套用

● 很多人用，參考資源很多○ 無私貢獻自己的設計

回家作業：把頁面變成這樣

完整流程

Route Controller View

Model

Database

1. Request

6. Response HTML

2. Dispatch

3. Get

4. Merge 5. Redner

一個流程做好了，再做下一個流程

來看複雜一點的例子

使用智付寶付款的流程

流程與狀態

範例：

智付寶付款與訂單流程

總結

當我們在設計新系統時

流程 頁面 操作 資料

資料 操作 頁面 流程

當我們在修改現有系統時

歡迎試用繪禮物

工商服務時間