如何在有限資源下實現十年的後端服務演進

Slide 1

Slide 1 text

如何在有限資源下實現十年的後端服務演進 Kewang, Funliday

Slide 2

Slide 2 text

Kewang ● 王慕羣 Kewang ● JavaScript / Java ● PostgreSQL / MongoDB / Elasticsearch / HBase ● Git / DevOps ● 熱愛開源 Linkedin Linkedin kewangtw kewangtw SlideShare SlideShare kewang kewang Gmail Gmail cpckewang cpckewang Facebook Facebook Kewang 的資訊進化論 Kewang 的資訊進化論 devopsday taipei devopsday taipei '17 '17 hadoopcon hadoopcon '14 '15 '14 '15 jcconf jcconf '16 '17 '18 '16 '17 '18 GitHub GitHub kewang kewang Funliday Funliday kewang kewang modernweb modernweb '18 '19 '20 '21 '18 '19 '20 '21 coscup coscup '20 '21 '20 '21 mopcon mopcon '14 '20 '22 '14 '20 '22

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

4 時間軸

Slide 5

Slide 5 text

5 時間軸

Slide 6

Slide 6 text

6 時間軸 ● 從 Parse.com 停止服務開始

Slide 7

Slide 7 text

7 時間軸 ● 從 Parse.com 停止服務開始 ● 因為 Google Maps API 開始收費

Slide 8

Slide 8 text

8 時間軸 ● 從 Parse.com 停止服務開始 ● 因為 Google Maps API 開始收費 ● 全世界的災難 COVID-19

Slide 9

Slide 9 text

9 開始

Slide 10

Slide 10 text

10 在我之前 (2014/9~2018/8)

Slide 11

Slide 11 text

11 在我之前 (2014/9~2018/8) ● Funliday 小有一點點名氣

Slide 12

Slide 12 text

12 在我之前 (2014/9~2018/8) ● Funliday 小有一點點名氣 ● 剛募到天使輪資金

Slide 13

Slide 13 text

13 在我之前 (2014/9~2018/8) ● Funliday 小有一點點名氣 ● 剛募到天使輪資金 ● 後端從 Parse.com 轉到 heroku+MongoDB

Slide 14

Slide 14 text

14 在我之前 (2014/9~2018/8) ● Funliday 小有一點點名氣 ● 剛募到天使輪資金 ● 後端從 Parse.com 轉到 heroku+MongoDB ● Google Maps API 開始收費

Slide 15

Slide 15 text

15 在我之前 (2014/9~2018/8) ● Funliday 小有一點點名氣 ● 剛募到天使輪資金 ● 後端從 Parse.com 轉到 heroku+MongoDB ● Google Maps API 開始收費 ● Web, Android 殘破不堪

Slide 16

Slide 16 text

16 從開發景點資料庫開始

Slide 17

Slide 17 text

17 從開發景點資料庫開始 ( 一條龍 )

Slide 18

Slide 18 text

18 從開發景點資料庫開始 - 背景 (2018/9)

Slide 19

Slide 19 text

19 從開發景點資料庫開始 - 背景 (2018/9) ● Google Maps API 開始收費

Slide 20

Slide 20 text

20 從開發景點資料庫開始 - 背景 (2018/9) ● Google Maps API 開始收費 – 以 Funliday 的使用方式，每個月要幾十萬台幣

Slide 21

Slide 21 text

21 從開發景點資料庫開始 - 背景 (2018/9) ● Google Maps API 開始收費 – 以 Funliday 的使用方式，每個月要幾十萬台幣 – 我的第一個專案就是解耦 Google Maps API

Slide 22

Slide 22 text

22 從開發景點資料庫開始 - 團隊 (1*2+0.5*2) ● iOS 、 Web 、 Backend 、找錢、會計： 1 ● Android ： 0.5 ● Design ： 0.5 ● 景點資料庫： 1 一個在日本 part time 一個還有正職工作

Slide 23

Slide 23 text

23 從開發景點資料庫開始 - 實作

Slide 24

Slide 24 text

24 從開發景點資料庫開始 - 實作 ● OpenStreetMap ：景點資料庫基礎

Slide 25

Slide 25 text

25 從開發景點資料庫開始 - 實作 ● OpenStreetMap ：景點資料庫基礎 ● PostgreSQL ：關聯資料庫基礎

Slide 26

Slide 26 text

26 從開發景點資料庫開始 - 實作 ● OpenStreetMap ：景點資料庫基礎 ● PostgreSQL ：關聯資料庫基礎 ● PostGIS ： GIS 新手入門

Slide 27

Slide 27 text

27 從開發景點資料庫開始 - 實作 ● OpenStreetMap ：景點資料庫基礎 ● PostgreSQL ：關聯資料庫基礎 ● PostGIS ： GIS 新手入門 ● Elasticsearch ：全文搜尋資料庫

Slide 28

Slide 28 text

28 從開發景點資料庫開始 - 實作 ● OpenStreetMap ：景點資料庫基礎 ● PostgreSQL ：關聯資料庫基礎 ● PostGIS ： GIS 新手入門 ● Elasticsearch ：全文搜尋資料庫 ● Redis ： Sorted Set 實作 autocomplete

Slide 29

Slide 29 text

29 Elasticsearch - function score 自訂評分函數

Slide 30

Slide 30 text

30 Elasticsearch - function score 自訂評分函數

Slide 31

Slide 31 text

31 Elasticsearch - function score 自訂評分函數

Slide 32

Slide 32 text

32 Redis - Sorted Set 實作 autocomplete

Slide 33

Slide 33 text

33 Redis - Sorted Set 實作 autocomplete

Slide 34

Slide 34 text

34 Redis - Sorted Set 實作 autocomplete 用 \x00 區分是否為結果

Slide 35

Slide 35 text

35 Redis - Sorted Set 實作 autocomplete 用 \x00 區分是否為結果

Slide 36

Slide 36 text

36 從開發景點資料庫開始

Slide 37

Slide 37 text

37 從開發景點資料庫開始 ( 有 team 的話 ...)

Slide 38

Slide 38 text

38 有 team 的話 ... ● OpenStreetMap+PostgreSQL+PostGIS ： 1 ● Elasticsearch ： 1 ● Redis ： 1

Slide 39

Slide 39 text

39 接手後端開發並重構

Slide 40

Slide 40 text

40 接手後端開發並重構 ( 一條龍 )

Slide 41

Slide 41 text

41 接手後端開發並重構 - 背景 (2019/9)

Slide 42

Slide 42 text

42 接手後端開發並重構 - 背景 (2019/9) ● 找錢太花心力，要儘量減少開發工作

Slide 43

Slide 43 text

43 接手後端開發並重構 - 背景 (2019/9) ● 找錢太花心力，要儘量減少開發工作 ● 功能愈來愈多，技術債造成擴展困難

Slide 44

Slide 44 text

44 接手後端開發並重構 - 團隊 (1*4) ● iOS 、 Web 、找錢、會計： 1 ● Android ： 1 ● Design ： 1 ● Backend ： 1 都回歸團隊，還缺 Web

Slide 45

Slide 45 text

45 接手後端開發並重構 - 實作

Slide 46

Slide 46 text

46 接手後端開發並重構 - 實作 ● Callback hell

Slide 47

Slide 47 text

47 接手後端開發並重構 - 實作 ● Callback hell – Node.js 早期都是使用 callback 為主

Slide 48

Slide 48 text

48 接手後端開發並重構 - 實作 ● Callback hell – Node.js 早期都是使用 callback 為主 – 持續調整為 Promise (async/await)

Slide 49

Slide 49 text

49 Callback hell

Slide 50

Slide 50 text

50 Callback hell

Slide 51

Slide 51 text

51 Callback hell 亂！有 thenable 又有 async/await

Slide 52

Slide 52 text

52 接手後端開發並重構 - 實作

Slide 53

Slide 53 text

53 接手後端開發並重構 - 實作 ● MongoDB schema 偏亂

Slide 54

Slide 54 text

54 接手後端開發並重構 - 實作 ● MongoDB schema 偏亂 – schema 一開始沒有通盤規劃

Slide 55

Slide 55 text

55 接手後端開發並重構 - 實作 ● MongoDB schema 偏亂 – schema 一開始沒有通盤規劃 – RDBMS 無法套用在 NoSQL 上

Slide 56

Slide 56 text

56 接手後端開發並重構 - 實作 ● MongoDB schema 偏亂 – schema 一開始沒有通盤規劃 – RDBMS 無法套用在 NoSQL 上 – 有 NoSQL 基礎，容易理解 schema 設計

Slide 57

Slide 57 text

57 MongoDB schema 偏亂

Slide 58

Slide 58 text

58 MongoDB schema 偏亂

Slide 59

Slide 59 text

59 MongoDB schema 偏亂測試資料夾裡面有許多景點

Slide 60

Slide 60 text

60 MongoDB schema 偏亂 - RDBMS 的做法

Slide 61

Slide 61 text

61 MongoDB schema 偏亂 - RDBMS 的做法

Slide 62

Slide 62 text

62 MongoDB schema 偏亂 - RDBMS 的做法 POI collection

Slide 63

Slide 63 text

63 MongoDB schema 偏亂 - RDBMS 的做法

Slide 64

Slide 64 text

64 MongoDB schema 偏亂 - RDBMS 的做法

Slide 65

Slide 65 text

65 MongoDB schema 偏亂 - RDBMS 的做法 POI folder collection

Slide 66

Slide 66 text

66 MongoDB schema 偏亂 - NoSQL 的做法

Slide 67

Slide 67 text

67 MongoDB schema 偏亂 - NoSQL 的做法

Slide 68

Slide 68 text

68 MongoDB schema 偏亂 - NoSQL 的做法要怎麼顯示，就怎麼存

Slide 69

Slide 69 text

69 接手後端開發並重構 - 實作

Slide 70

Slide 70 text

70 接手後端開發並重構 - 實作 ● API 沒有 RESTful

Slide 71

Slide 71 text

71 接手後端開發並重構 - 實作 ● API 沒有 RESTful – API 全部都是 POST /actionName

Slide 72

Slide 72 text

72 接手後端開發並重構 - 實作 ● API 沒有 RESTful – API 全部都是 POST /actionName – 資料塞在 Request body

Slide 73

Slide 73 text

73 接手後端開發並重構 - 實作 ● API 沒有 RESTful – API 全部都是 POST /actionName – 資料塞在 Request body ● 持續正規化 body 、 header

Slide 74

Slide 74 text

74 接手後端開發並重構 - 實作 ● API 沒有 RESTful – API 全部都是 POST /actionName – 資料塞在 Request body ● 持續正規化 body 、 header 沒有 HTTP cache

Slide 75

Slide 75 text

75 API 沒有 RESTful

Slide 76

Slide 76 text

76 API 沒有 RESTful

Slide 77

Slide 77 text

77 API 沒有 RESTful parseMemberObjectId, token 要統一放到 header

Slide 78

Slide 78 text

78 接手後端開發並重構 - 實作

Slide 79

Slide 79 text

79 接手後端開發並重構 - 實作 ● 擴展 Express.js 函式

Slide 80

Slide 80 text

80 接手後端開發並重構 - 實作 ● 擴展 Express.js 函式 – req.funliday

Slide 81

Slide 81 text

81 接手後端開發並重構 - 實作 ● 擴展 Express.js 函式 – req.funliday – res.success

Slide 82

Slide 82 text

82 擴展 Express.js 函式 - req.funliday

Slide 83

Slide 83 text

83 擴展 Express.js 函式 - req.funliday

Slide 84

Slide 84 text

84 擴展 Express.js 函式 - req.funliday 自訂 header 放到 x-funliday 裡面

Slide 85

Slide 85 text

85 擴展 Express.js 函式 - req.funliday

Slide 86

Slide 86 text

86 擴展 Express.js 函式 - req.funliday

Slide 87

Slide 87 text

87 擴展 Express.js 函式 - req.funliday 取出 x-funliday-header

Slide 88

Slide 88 text

88 擴展 Express.js 函式 - req.funliday

Slide 89

Slide 89 text

89 擴展 Express.js 函式 - req.funliday

Slide 90

Slide 90 text

90 擴展 Express.js 函式 - req.funliday 與 semver 實際運用

Slide 91

Slide 91 text

91 擴展 Express.js 函式 - res.success

Slide 92

Slide 92 text

92 擴展 Express.js 函式 - res.success

Slide 93

Slide 93 text

93 擴展 Express.js 函式 - res.success 可支援 object 以及 array

Slide 94

Slide 94 text

94 擴展 Express.js 函式 - res.success

Slide 95

Slide 95 text

95 擴展 Express.js 函式 - res.success

Slide 96

Slide 96 text

96 擴展 Express.js 函式 - res.success 資料庫多回傳一筆資料，可以判斷是否還有下一頁

Slide 97

Slide 97 text

97 接手後端開發並重構

Slide 98

Slide 98 text

98 接手後端開發並重構 ( 有 team 的話 ...)

Slide 99

Slide 99 text

99 有 team 的話 ... ● MongoDB schema 偏亂： 1 ● API 沒有 RESTful+ 擴展 Express.js 函式： 1

Slide 100

Slide 100 text

100 老大哥正在看著你

Slide 101

Slide 101 text

101 老大哥正在看著你 ( 一條龍 )

Slide 102

Slide 102 text

102 老大哥正在看著你 - 背景 (2019/9)

Slide 103

Slide 103 text

103 老大哥正在看著你 - 背景 (2019/9) ● 為了記錄 log

Slide 104

Slide 104 text

104 老大哥正在看著你 - 背景 (2019/9) ● 為了記錄 log ● 機器一直死

Slide 105

Slide 105 text

105 老大哥正在看著你 - 團隊 (1*4) ● iOS 、 Web 、找錢、會計： 1 ● Android ： 1 ● Design ： 1 ● Backend ： 1 團隊沒有變化，還在找 Web

Slide 106

Slide 106 text

106 老大哥正在看著你 - 實作

Slide 107

Slide 107 text

107 老大哥正在看著你 - 實作 ● 加上 log

Slide 108

Slide 108 text

108 老大哥正在看著你 - 實作 ● 加上 log – 原本使用 heroku 合作的 papertrail

Slide 109

Slide 109 text

109 老大哥正在看著你 - 實作 ● 加上 log – 原本使用 heroku 合作的 papertrail – 因為有裝 Elasticsearch ，所以整合進 ELK stack

Slide 110

Slide 110 text

110 老大哥正在看著你 - 實作 ● 加上 log – 原本使用 heroku 合作的 papertrail – 因為有裝 Elasticsearch ，所以整合進 ELK stack 一開始為了省事，之後為了省錢

Slide 111

Slide 111 text

111 老大哥正在看著你 - 實作

Slide 112

Slide 112 text

112 老大哥正在看著你 - 實作 ● 加上 APM

Slide 113

Slide 113 text

113 老大哥正在看著你 - 實作 ● 加上 APM – Application Performance Monitoring

Slide 114

Slide 114 text

114 老大哥正在看著你 - 實作 ● 加上 APM – Application Performance Monitoring – 也是使用 heroku 合作的 New Relic

Slide 115

Slide 115 text

115 老大哥正在看著你 - 實作 ● 加上 APM – Application Performance Monitoring – 也是使用 heroku 合作的 New Relic – 原本要改用 Elastic APM ，但安裝失敗

Slide 116

Slide 116 text

116 老大哥正在看著你 - 實作 ● 加上 APM – Application Performance Monitoring – 也是使用 heroku 合作的 New Relic – 原本要改用 Elastic APM ，但安裝失敗一開始為了省事，之後為了省錢

Slide 117

Slide 117 text

117 老大哥正在看著你 - 實作

Slide 118

Slide 118 text

118 老大哥正在看著你 - 實作 ● 加上 status page

Slide 119

Slide 119 text

119 老大哥正在看著你 - 實作 ● 加上 status page – 避免被動得知系統發生錯誤

Slide 120

Slide 120 text

120 老大哥正在看著你 - 實作 ● 加上 status page – 避免被動得知系統發生錯誤 – 直到 2023/6 才加上去

Slide 121

Slide 121 text

121 老大哥正在看著你 - 實作 ● 加上 status page – 避免被動得知系統發生錯誤 – 直到 2023/6 才加上去 – 使用 Uptime Kuma

Slide 122

Slide 122 text

122 加上 status page

Slide 123

Slide 123 text

123 加上 status page

Slide 124

Slide 124 text

124 老大哥正在看著你

Slide 125

Slide 125 text

125 老大哥正在看著你 ( 有 team 的話 ...)

Slide 126

Slide 126 text

126 有 team 的話 ...

Slide 127

Slide 127 text

127 有 team 的話 ... ● 全部交給 SRE ！

Slide 128

Slide 128 text

128 持續加入各種功能

Slide 129

Slide 129 text

129 持續加入各種功能 ( 一條龍 )

Slide 130

Slide 130 text

130 持續加入各種功能 - 背景 (2019/6)

Slide 131

Slide 131 text

131 持續加入各種功能 - 背景 (2019/6) ● Funliday 不可能只有景點跟行程

Slide 132

Slide 132 text

132 持續加入各種功能 - 背景 (2019/6) ● Funliday 不可能只有景點跟行程 ● 開始讓使用者寫遊記 (2014 就有的想法 )

Slide 133

Slide 133 text

133 持續加入各種功能 - 背景 (2019/6) ● Funliday 不可能只有景點跟行程 ● 開始讓使用者寫遊記 (2014 就有的想法 ) ● 這時，還沒想到如何賺錢

Slide 134

Slide 134 text

134 持續加入各種功能 - 團隊 (1*5) ● iOS 、找錢、會計： 1 ● Web ： 1 ● Android ： 1 ● Design ： 1 ● Backend ： 1 新功能上線，需要 Web 實作

Slide 135

Slide 135 text

135 持續加入各種功能 - 實作

Slide 136

Slide 136 text

136 持續加入各種功能 - 實作 ● 寫遊記

Slide 137

Slide 137 text

137 持續加入各種功能 - 實作 ● 寫遊記 – 上傳圖片： S3+CloudFront

Slide 138

Slide 138 text

138 持續加入各種功能 - 實作 ● 寫遊記 – 上傳圖片： S3+CloudFront – 縮圖功能

Slide 139

Slide 139 text

139 持續加入各種功能 - 實作 ● 寫遊記 – 上傳圖片： S3+CloudFront – 縮圖功能 ● 第一版使用 Lambda (Python+thumbor)

Slide 140

Slide 140 text

140 持續加入各種功能 - 實作 ● 寫遊記 – 上傳圖片： S3+CloudFront – 縮圖功能 ● 第一版使用 Lambda (Python+thumbor) ● 第二版自製 image service (Node.js+sharp)

Slide 141

Slide 141 text

141 持續加入各種功能 - 實作 ● 寫遊記 – 上傳圖片： S3+CloudFront – 縮圖功能 ● 第一版使用 Lambda (Python+thumbor) ● 第二版自製 image service (Node.js+sharp) ● 第三版新增 Blurhash

Slide 142

Slide 142 text

142 第一版使用 Lambda

Slide 143

Slide 143 text

143 第一版使用 Lambda ● AWS labs 的解決方案 serverless-image-handler

Slide 144

Slide 144 text

144 第一版使用 Lambda ● AWS labs 的解決方案 serverless-image-handler ● payload 最大 6MB

Slide 145

Slide 145 text

145 第一版使用 Lambda ● AWS labs 的解決方案 serverless-image-handler ● payload 最大 6MB ● 但沒人會寫 python ，無法維護

Slide 146

Slide 146 text

146 第三版新增 Blurhash

Slide 147

Slide 147 text

147 第三版新增 Blurhash

Slide 148

Slide 148 text

148 第三版新增 Blurhash

Slide 149

Slide 149 text

149 第三版新增 Blurhash

Slide 150

Slide 150 text

150 第三版新增 Blurhash qeFsDNIo8_x]%2WARiWXpf%MngkXRkj[jYt7? wWVj]flV@ogt7V@bxt7t8ofV@kWWBj[ozkCxva dWDogjYWBt8j[a~jZofoMRjoz

Slide 151

Slide 151 text

151 第三版新增 Blurhash qeFsDNIo8_x]%2WARiWXpf%MngkXRkj[jYt7? wWVj]flV@ogt7V@bxt7t8ofV@kWWBj[ozkCxva dWDogjYWBt8j[a~jZofoMRjoz 資料量小，與其他解決方案比會少一次 request

Slide 152

Slide 152 text

152 持續加入各種功能 - 實作

Slide 153

Slide 153 text

153 持續加入各種功能 - 實作 ● 定義資料結構一致的列表

Slide 154

Slide 154 text

154 持續加入各種功能 - 實作 ● 定義資料結構一致的列表 – 至少要跟設計師討論

Slide 155

Slide 155 text

155 持續加入各種功能 - 實作 ● 定義資料結構一致的列表 – 至少要跟設計師討論 – 統一遊記、行程、使用者、景點、商品列表

Slide 156

Slide 156 text

156 定義資料結構一致的列表

Slide 157

Slide 157 text

157 定義資料結構一致的列表

Slide 158

Slide 158 text

158 定義資料結構一致的列表

Slide 159

Slide 159 text

159 定義資料結構一致的列表

Slide 160

Slide 160 text

160 定義資料結構一致的列表封面 + 標題 + 座標

Slide 161

Slide 161 text

161 定義資料結構一致的列表

Slide 162

Slide 162 text

162 定義資料結構一致的列表

Slide 163

Slide 163 text

163 定義資料結構一致的列表

Slide 164

Slide 164 text

164 定義資料結構一致的列表用 type 決定顯示的方式，用 action 決定點擊的行為

Slide 165

Slide 165 text

165 持續加入各種功能

Slide 166

Slide 166 text

166 持續加入各種功能 ( 有 team 的話 ...)

Slide 167

Slide 167 text

167 有 team 的話 ... ● 寫遊記： 2 ● 定義資料結構一致的列表： 1

Slide 168

Slide 168 text

168 總算想到 SEO

Slide 169

Slide 169 text

169 總算想到 SEO ( 一條龍 )

Slide 170

Slide 170 text

170 總算想到 SEO - 背景 (2019/10)

Slide 171

Slide 171 text

171 總算想到 SEO - 背景 (2019/10) ● Funliday 一開始只有 App

Slide 172

Slide 172 text

172 總算想到 SEO - 背景 (2019/10) ● Funliday 一開始只有 App ● 要分享給一般使用者，做了 Web

Slide 173

Slide 173 text

173 總算想到 SEO - 背景 (2019/10) ● Funliday 一開始只有 App ● 要分享給一般使用者，做了 Web ● Web 開發使用 React

Slide 174

Slide 174 text

174 總算想到 SEO - 背景 (2019/10) ● Funliday 一開始只有 App ● 要分享給一般使用者，做了 Web ● Web 開發使用 React ● 沒有使用 create-react-app

Slide 175

Slide 175 text

175 總算想到 SEO - 背景 (2019/10) ● Funliday 一開始只有 App ● 要分享給一般使用者，做了 Web ● Web 開發使用 React ● 沒有使用 create-react-app ● 開發模式為前後端分離

Slide 176

Slide 176 text

176 總算想到 SEO - 團隊 (1*5) ● iOS 、找錢、會計： 1 ● Web ： 1 ● Android ： 1 ● Design 、找錢： 1 ● Backend ： 1 黑暗時期，連設計也要出來找錢

Slide 177

Slide 177 text

177 API 取得 metadata

Slide 178

Slide 178 text

178 API 取得 metadata

Slide 179

Slide 179 text

179 API 取得 metadata

Slide 180

Slide 180 text

180 API 取得 metadata 前後端分離的極致，很奇怪的模式

Slide 181

Slide 181 text

181 自建 prerender

Slide 182

Slide 182 text

182 自建 prerender

Slide 183

Slide 183 text

183 自建 prerender 自己用 puppeteer 開發的 prerender

Slide 184

Slide 184 text

184 自建 prerender

Slide 185

Slide 185 text

185 自建 prerender

Slide 186

Slide 186 text

186 自建 prerender 透過 Nginx 轉導 crawler 到 prerender

Slide 187

Slide 187 text

187 重要 route 改從 DB

Slide 188

Slide 188 text

188 重要 route 改從 DB

Slide 189

Slide 189 text

189 重要 route 改從 DB

Slide 190

Slide 190 text

190 重要 route 改從 DB 開始朝向 SSR 前進

Slide 191

Slide 191 text

191 新 route 改成 SSR

Slide 192

Slide 192 text

192 新 route 改成 SSR

Slide 193

Slide 193 text

193 新 route 改成 SSR 純 SSR ，需要不排斥寫後端的前端人

Slide 194

Slide 194 text

194 總算想到 SEO

Slide 195

Slide 195 text

195 總算想到 SEO ( 有 team 的話 ...)

Slide 196

Slide 196 text

196 有 team 的話 ... ● 重要 route 改從 DB ： 2 ● 新 route 改成 SSR ： 2

Slide 197

Slide 197 text

197 開始導入電商

Slide 198

Slide 198 text

198 開始導入電商 ( 一條龍 )

Slide 199

Slide 199 text

199 開始導入電商 - 背景 (2020/9)

Slide 200

Slide 200 text

200 開始導入電商 - 背景 (2020/9) ● COVID-19 無法出國，報復式國旅

Slide 201

Slide 201 text

201 開始導入電商 - 背景 (2020/9) ● COVID-19 無法出國，報復式國旅 ● 除了流量，也要開始注意營收

Slide 202

Slide 202 text

202 開始導入電商 - 名詞解釋：分銷

Slide 203

Slide 203 text

203 開始導入電商 - 名詞解釋：分銷 ● 在 Funliday 找商品

Slide 204

Slide 204 text

204 開始導入電商 - 名詞解釋：分銷 ● 在 Funliday 找商品 ● 在 Funliday 看商品細節

Slide 205

Slide 205 text

205 開始導入電商 - 名詞解釋：分銷 ● 在 Funliday 找商品 ● 在 Funliday 看商品細節 ● 在 Funliday 結帳

Slide 206

Slide 206 text

206 開始導入電商 - 名詞解釋：分銷 ● 在 Funliday 找商品 ● 在 Funliday 看商品細節 ● 在 Funliday 結帳 ● 利潤高

Slide 207

Slide 207 text

207 開始導入電商 - 名詞解釋：分銷 ● 在 Funliday 找商品 ● 在 Funliday 看商品細節 ● 在 Funliday 結帳 ● 利潤高 ● 各種意義上的開發成本高

Slide 208

Slide 208 text

208 開始導入電商 - 團隊 (1*6) ● iOS 、找錢、會計： 1 ● Web ： 1 ● Android ： 1 ● Design 、找錢、營運： 1 ● Business Development ： 1 ( 日本人 ) ● Backend ： 1 設計開始扛營運有了一位日本 BD

Slide 209

Slide 209 text

209 開始導入電商 - 分銷實作

Slide 210

Slide 210 text

210 開始導入電商 - 分銷實作 ● 一個行程：很多景點組成

Slide 211

Slide 211 text

211 開始導入電商 - 分銷實作 ● 一個行程：很多景點組成 ● 一個遊記：一個行程 + 很多圖片

Slide 212

Slide 212 text

212 開始導入電商 - 分銷實作 ● 一個行程：很多景點組成 ● 一個遊記：一個行程 + 很多圖片 ● 一個商品：一個遊記 + 可販賣

Slide 213

Slide 213 text

213 開始導入電商 - 分銷實作困難點

Slide 214

Slide 214 text

214 開始導入電商 - 分銷實作困難點 ● 資料庫交易 (transaction)

Slide 215

Slide 215 text

215 開始導入電商 - 分銷實作困難點 ● 資料庫交易 (transaction) – 避免超賣

Slide 216

Slide 216 text

216 開始導入電商 - 分銷實作困難點 ● 資料庫交易 (transaction) – 避免超賣 ● 租車金額試算 (estimate)

Slide 217

Slide 217 text

217 開始導入電商 - 分銷實作困難點 ● 資料庫交易 (transaction) – 避免超賣 ● 租車金額試算 (estimate) – 各家供應商算法不同

Slide 218

Slide 218 text

218 開始導入電商 - 分銷實作困難點 ● 資料庫交易 (transaction) – 避免超賣 ● 租車金額試算 (estimate) – 各家供應商算法不同 – 平日假日算法不同

Slide 219

Slide 219 text

219 開始導入電商 - 分銷實作困難點 ● 資料庫交易 (transaction) – 避免超賣 ● 租車金額試算 (estimate) – 各家供應商算法不同 – 平日假日算法不同 – 連假算法不同

Slide 220

Slide 220 text

220 開始導入電商 - 分銷實作困難點 ● 資料庫交易 (transaction) – 避免超賣 ● 租車金額試算 (estimate) – 各家供應商算法不同 – 平日假日算法不同 – 連假算法不同 – 連續租 n 日算法不同

Slide 221

Slide 221 text

221 開始導入電商 - 分銷實作困難點 ● 資料庫交易 (transaction) – 避免超賣 ● 租車金額試算 (estimate) – 各家供應商算法不同 – 平日假日算法不同 – 連假算法不同 – 連續租 n 日算法不同 – ... 等

Slide 222

Slide 222 text

222 開始導入電商 - 分銷營運困難點

Slide 223

Slide 223 text

223 開始導入電商 - 分銷營運困難點 ● 客服成本超高

Slide 224

Slide 224 text

224 開始導入電商 - 分銷營運困難點 ● 客服成本超高 – 人工出票

Slide 225

Slide 225 text

225 開始導入電商 - 分銷營運困難點 ● 客服成本超高 – 人工出票 – 所有商品的 FAQ 都要完全了解

Slide 226

Slide 226 text

226 開始導入電商 - 分銷營運困難點 ● 客服成本超高 – 人工出票 – 所有商品的 FAQ 都要完全了解 – ... 等

Slide 227

Slide 227 text

227 開始導入電商 - 分銷營運困難點

Slide 228

Slide 228 text

228 開始導入電商 - 分銷營運困難點

Slide 229

Slide 229 text

229 開始導入電商 - 分銷營運困難點

Slide 230

Slide 230 text

230 開始導入電商 - 分銷營運困難點

Slide 231

Slide 231 text

231 開始導入電商 - 分銷營運困難點 ● 但景點商家不知道

Slide 232

Slide 232 text

232 開始導入電商 - 分銷營運困難點 ● 但景點商家不知道 – QR code 不同

Slide 233

Slide 233 text

233 開始導入電商 - 分銷營運困難點 ● 但景點商家不知道 – QR code 不同 – 現場退票

Slide 234

Slide 234 text

234 開始導入電商 - 分銷營運困難點 ● 但景點商家不知道 – QR code 不同 – 現場退票 – ... 等

Slide 235

Slide 235 text

235 開始導入電商 - 分銷營運困難點

Slide 236

Slide 236 text

236 開始導入電商 - 分銷營運困難點 ● 但 Funliday 不知道

Slide 237

Slide 237 text

237 開始導入電商 - 分銷營運困難點 ● 但 Funliday 不知道 – 供應商商品已下架

Slide 238

Slide 238 text

238 開始導入電商 - 分銷營運困難點 ● 但 Funliday 不知道 – 供應商商品已下架 – 供應商改價格

Slide 239

Slide 239 text

239 開始導入電商 - 分銷營運困難點 ● 但 Funliday 不知道 – 供應商商品已下架 – 供應商改價格 – ... 等

Slide 240

Slide 240 text

240 開始導入電商 - 分銷營運困難點

Slide 241

Slide 241 text

241 開始導入電商 - 分銷營運困難點 ● 票券及一日遊有無限組合，上架困難，舉例：

Slide 242

Slide 242 text

242 開始導入電商 - 分銷營運困難點 ● 票券及一日遊有無限組合，上架困難，舉例： – 平日 299 元、假日 399 元

Slide 243

Slide 243 text

243 開始導入電商 - 分銷營運困難點 ● 票券及一日遊有無限組合，上架困難，舉例： – 平日 299 元、假日 399 元 – 大人票 299 元、小孩票 199 元

Slide 244

Slide 244 text

244 開始導入電商 - 分銷營運困難點 ● 票券及一日遊有無限組合，上架困難，舉例： – 平日 299 元、假日 399 元 – 大人票 299 元、小孩票 199 元 – 一個小孩一定要配一個大人

Slide 245

Slide 245 text

245 開始導入電商 - 分銷營運困難點 ● 票券及一日遊有無限組合，上架困難，舉例： – 平日 299 元、假日 399 元 – 大人票 299 元、小孩票 199 元 – 一個小孩一定要配一個大人 – 七八月第一週假日特價 99 元

Slide 246

Slide 246 text

246 開始導入電商 - 分銷營運困難點 ● 票券及一日遊有無限組合，上架困難，舉例： – 平日 299 元、假日 399 元 – 大人票 299 元、小孩票 199 元 – 一個小孩一定要配一個大人 – 七八月第一週假日特價 99 元 – ... 等

Slide 247

Slide 247 text

247 開始導入電商 - 分銷營運困難點

Slide 248

Slide 248 text

248 開始導入電商 - 分銷營運困難點

Slide 249

Slide 249 text

249 開始導入電商 - 分銷營運困難點

Slide 250

Slide 250 text

250 開始導入電商 - 分銷營運困難點

Slide 251

Slide 251 text

251 開始導入電商 - 分銷營運困難點

Slide 252

Slide 252 text

252 開始導入電商 - 分銷營運困難點 ● 業務開發困難

Slide 253

Slide 253 text

253 開始導入電商 - 分銷營運困難點 ● 業務開發困難 – 店家主動聯絡希望上架他們商品，但利潤低

Slide 254

Slide 254 text

254 開始導入電商 - 分銷營運困難點 ● 業務開發困難 – 店家主動聯絡希望上架他們商品，但利潤低 – 店家都已在雙 K 上架，不想在 Funliday 上架

Slide 255

Slide 255 text

255 開始導入電商 - 分銷營運困難點 ● 業務開發困難 – 店家主動聯絡希望上架他們商品，但利潤低 – 店家都已在雙 K 上架，不想在 Funliday 上架 – 沒有專職台灣業務開發夥伴

Slide 256

Slide 256 text

256 開始導入電商 - 分銷營運困難點 ● 業務開發困難 – 店家主動聯絡希望上架他們商品，但利潤低 – 店家都已在雙 K 上架，不想在 Funliday 上架 – 沒有專職台灣業務開發夥伴 – ... 等

Slide 257

Slide 257 text

257 開始導入電商

Slide 258

Slide 258 text

258 開始導入電商 ( 有 team 的話 ...)

Slide 259

Slide 259 text

259 有 team 的話 ... ● 專門客服： 2 ● 業務開發： 2

Slide 260

Slide 260 text

260 導購真香

Slide 261

Slide 261 text

261 導購真香 - 名詞解釋

Slide 262

Slide 262 text

262 導購真香 - 名詞解釋 ● 在 Funliday 找商品

Slide 263

Slide 263 text

263 導購真香 - 名詞解釋 ● 在 Funliday 找商品 ● 在 OTA 看商品細節

Slide 264

Slide 264 text

264 導購真香 - 名詞解釋 ● 在 Funliday 找商品 ● 在 OTA 看商品細節 ● 在 OTA 結帳

Slide 265

Slide 265 text

265 導購真香 - 名詞解釋 ● 在 Funliday 找商品 ● 在 OTA 看商品細節 ● 在 OTA 結帳 ● 利潤低

Slide 266

Slide 266 text

266 導購真香 - 名詞解釋 ● 在 Funliday 找商品 ● 在 OTA 看商品細節 ● 在 OTA 結帳 ● 利潤低 ● 各種意義上的開發成本低

Slide 267

Slide 267 text

267 導購真香 - 名詞解釋 ● 在 Funliday 找商品 ● 在 OTA 看商品細節 ● 在 OTA 結帳 ● 利潤低 ● 各種意義上的開發成本低 ● 客服成本超低

Slide 268

Slide 268 text

268 導購真香 - 名詞解釋 ● 在 Funliday 找商品 ● 在 OTA 看商品細節 ● 在 OTA 結帳 ● 利潤低 ● 各種意義上的開發成本低 ● 客服成本超低 Online Travel Agency ：線上旅行社

Slide 269

Slide 269 text

269 導購真香 - 背景 (2023/6)

Slide 270

Slide 270 text

270 導購真香 - 背景 (2023/6) ● 分銷太困難，引進導購合作

Slide 271

Slide 271 text

271 導購真香 - 背景 (2023/6) ● 分銷太困難，引進導購合作 ● 供應商先搞定雙 K 就好

Slide 272

Slide 272 text

272 導購真香 - 背景 (2023/6) ● 分銷太困難，引進導購合作 ● 供應商先搞定雙 K 就好 ● 現有系統可直接支援

Slide 273

Slide 273 text

273 導購真香 - 團隊 (1*8) ● iOS 、找錢、會計： 1 ● Web ： 1( 香港人 ) ● Android ： 1 ● Design 、營運： 1 ● Business Development ： 1 ( 日本人 ) ● Marketing ： 1 ● Backend ： 2 設計可以專心在營運上面團隊愈來愈多元多了一位行銷和後端

Slide 274

Slide 274 text

274 導購真香 - 實作

Slide 275

Slide 275 text

275 導購真香 - 實作 ● 後端不需太多調整

Slide 276

Slide 276 text

276 導購真香 - 實作 ● 後端不需太多調整 ● 前端有依照原規格實作，少許調整就可上線

Slide 277

Slide 277 text

277 導購真香 - 實作

Slide 278

Slide 278 text

278 導購真香 - 實作

Slide 279

Slide 279 text

279 導購真香 - 實作導購轉址頁

Slide 280

Slide 280 text

280 導購真香 - 實作

Slide 281

Slide 281 text

281 導購真香 - 實作

Slide 282

Slide 282 text

282 回顧一下

Slide 283

Slide 283 text

283 回顧一下

Slide 284

Slide 284 text

284 回顧一下

Slide 285

Slide 285 text

285 Conclusion

Slide 286

Slide 286 text

286 永遠迎接更多的困難

Slide 287

Slide 287 text

287 永遠迎接更多的困難 ● 前端開發很奔放

Slide 288

Slide 288 text

288 永遠迎接更多的困難 ● 前端開發很奔放 – 為了前端孤兒，後端要支援舊前端

Slide 289

Slide 289 text

289 永遠迎接更多的困難 ● 前端開發很奔放 – 為了前端孤兒，後端要支援舊前端 ● 新創資深工程師的 context switch 要夠快速

Slide 290

Slide 290 text

290 永遠迎接更多的困難 ● 前端開發很奔放 – 為了前端孤兒，後端要支援舊前端 ● 新創資深工程師的 context switch 要夠快速 – 許多 knowhow 都放在腦子裡

Slide 291

Slide 291 text

291 永遠迎接更多的困難 ● 前端開發很奔放 – 為了前端孤兒，後端要支援舊前端 ● 新創資深工程師的 context switch 要夠快速 – 許多 knowhow 都放在腦子裡 ● 創業最缺的就是時間

Slide 292

Slide 292 text

292 永遠迎接更多的困難 ● 前端開發很奔放 – 為了前端孤兒，後端要支援舊前端 ● 新創資深工程師的 context switch 要夠快速 – 許多 knowhow 都放在腦子裡 ● 創業最缺的就是時間 – 可以用錢解決的就不要花時間研究