SITCON_2022_R0_先學_Flutter_再去學_Android，和一般人相反的_App_經驗開發分享_RKhfYy5Bl3I.srt

1
00:00:00,000 --> 00:00:11,000
接下來的議程是由吳克揚帶來的先學 Flutter 再學 Android 和一般人相反的 App 經驗開發分享

2
00:00:11,000 --> 00:00:13,000
讓我們歡迎吳克揚

3
00:00:18,000 --> 00:00:22,000
我的聲音夠大嗎？大家聽得到我的聲音嗎？

4
00:00:22,000 --> 00:00:24,000
大家早上好

5
00:00:24,000 --> 00:00:29,000
這是先學了 Flutter 再去學 Android 和一般人相反的 App 經驗開發分享

6
00:00:29,000 --> 00:00:31,000
我是主講者吳克揚

7
00:00:31,000 --> 00:00:34,000
大家應該蠻好奇我的標題的

8
00:00:34,000 --> 00:00:38,000
先來看一下我的經驗相反在哪裡

9
00:00:38,000 --> 00:00:41,000
一般人的話可能會先這個樣子學

10
00:00:41,000 --> 00:00:43,000
他們先學了 Android 再學 Flutter

11
00:00:43,000 --> 00:00:47,000
因為 Android 相較是一個比較廣為人知的作業系統

12
00:00:47,000 --> 00:00:50,000
大家就會想去學它的 App

13
00:00:50,000 --> 00:00:56,000
我再去看到了 Flutter 它是一個同時可以去開發 Android 和 iOS 的開發框架

14
00:00:56,000 --> 00:01:00,000
而且它會先去學習這些元件要怎麼去使用

15
00:01:00,000 --> 00:01:03,000
UI 資料要怎麼去溝通

16
00:01:03,000 --> 00:01:05,000
像是你按了一下你的 Button

17
00:01:05,000 --> 00:01:07,000
那你的文字會怎麼去改變等等

18
00:01:07,000 --> 00:01:10,000
然後你學習到這些知識之後

19
00:01:10,000 --> 00:01:12,000
你就會開始去創造自己的專案

20
00:01:12,000 --> 00:01:15,000
這是大部分人的 Role Map 大概是這樣子

21
00:01:15,000 --> 00:01:17,000
但是我是先這樣子

22
00:01:17,000 --> 00:01:20,000
我先學了 Flutter 再去學 Android

23
00:01:20,000 --> 00:01:23,000
而且我一開始要去做到的事情就是

24
00:01:23,000 --> 00:01:26,000
我想要把我的照片放在我的指定路徑

25
00:01:26,000 --> 00:01:28,000
聽起來是一個非常奇怪的一件事情

26
00:01:28,000 --> 00:01:31,000
但是我之後會去講解我的專案

27
00:01:31,000 --> 00:01:33,000
我的專案經驗大家之後會聽得懂

28
00:01:33,000 --> 00:01:35,000
我為什麼要做這件事情

29
00:01:35,000 --> 00:01:36,000
而且另外一件事情是

30
00:01:36,000 --> 00:01:38,000
Flutter 也可以拿來寫網頁

31
00:01:38,000 --> 00:01:42,000
所以我拿來寫我的網頁前端課程的期末專案

32
00:01:42,000 --> 00:01:44,000
而且拿了還蠻高分的成績

33
00:01:44,000 --> 00:01:46,000
然後最後我的 Android App

34
00:01:46,000 --> 00:01:50,000
是在我在學校上課的時候我才真的寫過的

35
00:01:50,000 --> 00:01:52,000
那這個是我的開發經驗

36
00:01:52,000 --> 00:01:54,000
和別人相反的點在這個地方

37
00:01:54,000 --> 00:01:57,000
好 那接下來就來做自我介紹

38
00:01:57,000 --> 00:02:01,000
還有如果大家在本議程有任何問題的話

39
00:02:01,000 --> 00:02:03,000
那就可以掃上方的 Slido

40
00:02:03,000 --> 00:02:07,000
然後在右上方的地方也有放著 Slido 的課程

41
00:02:07,000 --> 00:02:09,000
誒 議程代號

42
00:02:09,000 --> 00:02:11,000
然後我的名字叫吳克揚

43
00:02:11,000 --> 00:02:14,000
那我現在就讀台北科技大學資訊工程系

44
00:02:14,000 --> 00:02:16,000
然後我曾經是台北

45
00:02:16,000 --> 00:02:19,000
北科程式設計研究社的第五屆公關

46
00:02:19,000 --> 00:02:23,000
同時也是北科 2021-2022 的 GDSC Lead

47
00:02:24,000 --> 00:02:26,000
好 那就是接下來的

48
00:02:26,000 --> 00:02:28,000
今天這個議程的大概的目錄

49
00:02:28,000 --> 00:02:31,000
那我會先簡單介紹一下 Android 以及 Flutter

50
00:02:31,000 --> 00:02:34,000
接下來是介紹一下我這兩個的個人專案經驗

51
00:02:34,000 --> 00:02:37,000
接下來是 Android 以及 Flutter UI 作法

52
00:02:37,000 --> 00:02:39,000
以及邏輯與 UI 之間的溝通

53
00:02:39,000 --> 00:02:41,000
最後是來講結論

54
00:02:41,000 --> 00:02:45,000
好 那我就要開始剪接 Android 以及 Flutter 了

55
00:02:45,000 --> 00:02:48,000
那 Android 它是本身是一個作業系統

56
00:02:48,000 --> 00:02:51,000
那在本議程 我會用比較開發的角度去講解

57
00:02:51,000 --> 00:02:53,000
那它使用的程式語言呢

58
00:02:53,000 --> 00:02:55,000
大概有 Java 和 Kotlin

59
00:02:55,000 --> 00:02:57,000
那它可以運行的硬體裝置呢

60
00:02:57,000 --> 00:02:59,000
第一個有電視 然後手機平板

61
00:02:59,000 --> 00:03:01,000
穿戴式裝置以及車機

62
00:03:01,000 --> 00:03:03,000
這是它可以運行的硬體裝置

63
00:03:03,000 --> 00:03:05,000
那對應到 Flutter 的話

64
00:03:05,000 --> 00:03:08,000
那它是一個跨平台的開發框架

65
00:03:08,000 --> 00:03:10,000
那它所使用的程式語言是 Dart

66
00:03:10,000 --> 00:03:14,000
那可以運行的平台就有 Android 和 iOS

67
00:03:14,000 --> 00:03:16,000
還有網頁 桌面應用程式

68
00:03:16,000 --> 00:03:18,000
以及嵌入系統的程式

69
00:03:18,000 --> 00:03:21,000
那這兩個的大概介紹到這個地方

70
00:03:21,000 --> 00:03:23,000
接下來我會介紹我的 Android 專案

71
00:03:25,000 --> 00:03:27,000
好 那我的 Android 專案

72
00:03:27,000 --> 00:03:29,000
這個它的名字叫做 Notification Manager

73
00:03:29,000 --> 00:03:31,000
那它的背景想法呢

74
00:03:31,000 --> 00:03:33,000
第一個我想要去整理這個查亂的通知

75
00:03:33,000 --> 00:03:37,000
因為我是一個不會把 App 的通知全部關掉的人

76
00:03:37,000 --> 00:03:41,000
然後因為我覺得每則通知可能都會有重要的地方

77
00:03:41,000 --> 00:03:43,000
但是多了就會亂嘛

78
00:03:43,000 --> 00:03:45,000
所以我想要去整理它

79
00:03:45,000 --> 00:03:47,000
然後接下來是預期的時間有預期的通知

80
00:03:47,000 --> 00:03:50,000
那這部分可能比較難理解

81
00:03:50,000 --> 00:03:52,000
那我就帶入一個情境

82
00:03:52,000 --> 00:03:55,000
假設你在早上九點的時候去上班上課

83
00:03:55,000 --> 00:03:58,000
然後結果你收到一則通知

84
00:03:58,000 --> 00:04:01,000
可能你的購物網站在晚上九點的時候

85
00:04:01,000 --> 00:04:03,000
可能會有一些折扣什麼的啊

86
00:04:03,000 --> 00:04:06,000
然後如果你現在把這則通知滑掉

87
00:04:06,000 --> 00:04:08,000
那你就會忘記有這件事情了

88
00:04:08,000 --> 00:04:11,000
那我就希望在晚上九點的時候

89
00:04:11,000 --> 00:04:12,000
這則通知才發出來

90
00:04:12,000 --> 00:04:13,000
然後最後呢

91
00:04:13,000 --> 00:04:15,000
這是我 Android 課程期末專案

92
00:04:15,000 --> 00:04:16,000
那我也提到說

93
00:04:16,000 --> 00:04:18,000
我 Android 是在上課的時候才學的

94
00:04:18,000 --> 00:04:19,000
那它的功能呢

95
00:04:19,000 --> 00:04:22,000
我要對應到我的背景想法

96
00:04:22,000 --> 00:04:24,000
那第一個就是記錄每則通知

97
00:04:24,000 --> 00:04:25,000
因為我要去整理它嘛

98
00:04:25,000 --> 00:04:27,000
然後第二個是通知的排程

99
00:04:27,000 --> 00:04:29,000
就是我想在九點的時候

100
00:04:29,000 --> 00:04:32,000
再把這個通知發出來這個過程

101
00:04:34,000 --> 00:04:36,000
那我的 Android 專案大概介紹到這

102
00:04:36,000 --> 00:04:39,000
接下來我會介紹我的 Flutter 專案

103
00:04:39,000 --> 00:04:41,000
那我的 Flutter 專案呢

104
00:04:41,000 --> 00:04:43,000
它的名字叫 Picademy

105
00:04:43,000 --> 00:04:44,000
那它的背景想法就是

106
00:04:44,000 --> 00:04:47,000
上課時如果有拍黑板做筆記的時候

107
00:04:47,000 --> 00:04:48,000
照片不易整理

108
00:04:48,000 --> 00:04:51,000
那如果大家有經驗在

109
00:04:51,000 --> 00:04:52,000
老師寫在黑板上

110
00:04:52,000 --> 00:04:55,000
然後之後你把那些東西拍下來

111
00:04:55,000 --> 00:04:56,000
當作記錄的話

112
00:04:56,000 --> 00:04:59,000
然後之後你在你的相簿的預覽

113
00:04:59,000 --> 00:05:00,000
可能會發現說

114
00:05:00,000 --> 00:05:02,000
全部都是一些黑板的照片

115
00:05:02,000 --> 00:05:04,000
然後你其實是非常難從

116
00:05:04,000 --> 00:05:06,000
預覽圖上面看出說

117
00:05:06,000 --> 00:05:07,000
你寫了什麼字

118
00:05:07,000 --> 00:05:09,000
這張照片到底在做什麼

119
00:05:09,000 --> 00:05:10,000
所以我想去整理它

120
00:05:10,000 --> 00:05:12,000
那第二個是我認為課表是

121
00:05:12,000 --> 00:05:14,000
更好呈現資料夾的方式

122
00:05:14,000 --> 00:05:15,000
因為課程是一個

123
00:05:15,000 --> 00:05:18,000
有週期性的一個活動

124
00:05:18,000 --> 00:05:20,000
所以比起相簿這種

125
00:05:20,000 --> 00:05:23,000
直接按照著時間

126
00:05:23,000 --> 00:05:25,000
這樣一個一個排下來的方式

127
00:05:25,000 --> 00:05:26,000
我認為課表是一個

128
00:05:26,000 --> 00:05:28,000
較好的呈現方式

129
00:05:28,000 --> 00:05:29,000
那第三個呢

130
00:05:29,000 --> 00:05:31,000
它的想法是從 GoodNotes 來的

131
00:05:31,000 --> 00:05:33,000
那先來介紹一下什麼是 GoodNotes

132
00:05:33,000 --> 00:05:35,000
它是一個 iOS App

133
00:05:35,000 --> 00:05:36,000
那如果你有用 iPad 的話

134
00:05:36,000 --> 00:05:38,000
那你就可以把

135
00:05:38,000 --> 00:05:40,000
你的手寫筆記寫在上面

136
00:05:40,000 --> 00:05:42,000
那我覺得說手寫筆記

137
00:05:42,000 --> 00:05:44,000
如果已經有一個 App

138
00:05:44,000 --> 00:05:45,000
可以去整理的話

139
00:05:45,000 --> 00:05:46,000
那你的照片筆記

140
00:05:46,000 --> 00:05:47,000
應該也要有一個 App

141
00:05:47,000 --> 00:05:48,000
可以去整理

142
00:05:48,000 --> 00:05:50,000
因為手寫筆記和照片筆記

143
00:05:50,000 --> 00:05:51,000
都是一個

144
00:05:51,000 --> 00:05:53,000
現代人所有筆記的方式嘛

145
00:05:53,000 --> 00:05:54,000
好 接下來呢

146
00:05:54,000 --> 00:05:55,000
我要講到功能

147
00:05:55,000 --> 00:05:57,000
那第一個就是

148
00:05:57,000 --> 00:05:58,000
我拍下的照片

149
00:05:58,000 --> 00:06:00,000
能夠根據時間

150
00:06:00,000 --> 00:06:01,000
放到對應的資料夾

151
00:06:01,000 --> 00:06:03,000
那就是做到上面

152
00:06:03,000 --> 00:06:04,000
我想要去整理我的照片

153
00:06:04,000 --> 00:06:06,000
那假設如果你在早上

154
00:06:06,000 --> 00:06:08,000
你在禮拜三的

155
00:06:08,000 --> 00:06:10,000
九點到十點有數學課的話

156
00:06:10,000 --> 00:06:12,000
那你在這段時間

157
00:06:12,000 --> 00:06:14,000
把你的照片拍下來

158
00:06:14,000 --> 00:06:15,000
那就會存放到

159
00:06:15,000 --> 00:06:16,000
你的對應資料夾

160
00:06:16,000 --> 00:06:17,000
然後第二個就是

161
00:06:17,000 --> 00:06:20,000
用課表呈現資料夾的時間關係

162
00:06:20,000 --> 00:06:22,000
那這個就是 Picademy 的

163
00:06:22,000 --> 00:06:24,000
背景想法及功能

164
00:06:24,000 --> 00:06:26,000
大概介紹到這邊

165
00:06:26,000 --> 00:06:28,000
接下來我要講 Android 的 UI

166
00:06:28,000 --> 00:06:30,000
是要怎麼做的

167
00:06:30,000 --> 00:06:31,000
那第一個呢

168
00:06:31,000 --> 00:06:32,000
我要講 UI 結構

169
00:06:32,000 --> 00:06:34,000
那它是一個樹狀的結構

170
00:06:34,000 --> 00:06:36,000
那它第一層叫做 ConstraintLayout

171
00:06:36,000 --> 00:06:38,000
那它就是整個的 UI

172
00:06:38,000 --> 00:06:39,000
然後第二層呢

173
00:06:39,000 --> 00:06:40,000
它叫 RecyclerView

174
00:06:40,000 --> 00:06:42,000
那從上面可以看得出來

175
00:06:42,000 --> 00:06:43,000
它是一個

176
00:06:43,000 --> 00:06:45,000
會有很多的長方條的資訊卡

177
00:06:45,000 --> 00:06:47,000
上面放著通知的資訊

178
00:06:47,000 --> 00:06:48,000
那直觀的認為

179
00:06:48,000 --> 00:06:49,000
它會是一個

180
00:06:49,000 --> 00:06:51,000
可以滑動的一個狀態

181
00:06:51,000 --> 00:06:52,000
那這 RecyclerView

182
00:06:52,000 --> 00:06:54,000
就是在處理這個狀態

183
00:06:54,000 --> 00:06:56,000
那第三層叫 LinearLayout

184
00:06:56,000 --> 00:06:57,000
那它就是

185
00:06:57,000 --> 00:07:00,000
每個長方形的資訊卡的本體

186
00:07:00,000 --> 00:07:02,000
那第四個就是一些文字

187
00:07:02,000 --> 00:07:04,000
然後它就會構成這個

188
00:07:04,000 --> 00:07:06,000
通知的資訊卡

189
00:07:06,000 --> 00:07:08,000
接下來我要

190
00:07:08,000 --> 00:07:10,000
它如果實際寫成 Code 的話

191
00:07:10,000 --> 00:07:12,000
它會長成這個樣子

192
00:07:12,000 --> 00:07:13,000
那它是有 SML 一個

193
00:07:13,000 --> 00:07:14,000
這個標註語言

194
00:07:14,000 --> 00:07:16,000
所描述出來的 UI

195
00:07:16,000 --> 00:07:18,000
那它會

196
00:07:18,000 --> 00:07:20,000
從它的縮排可以看得出來

197
00:07:20,000 --> 00:07:21,000
它是一個樹狀結構

198
00:07:21,000 --> 00:07:23,000
那其實你不用去真的去

199
00:07:23,000 --> 00:07:26,000
把每一段文字寫出來

200
00:07:26,000 --> 00:07:28,000
然後你可以用這種方式

201
00:07:28,000 --> 00:07:30,000
就是原件可以用拉的

202
00:07:30,000 --> 00:07:32,000
那它拉好的原件會有 ID

203
00:07:32,000 --> 00:07:34,000
幫你自動修改 SML 的檔案

204
00:07:34,000 --> 00:07:37,000
那我們就看一個 Demo 影片

205
00:07:42,000 --> 00:07:43,000
然後首先呢

206
00:07:43,000 --> 00:07:46,000
就是我沒有任何的東西

207
00:07:46,000 --> 00:07:48,000
喔 其實有東西啦

208
00:07:48,000 --> 00:07:50,000
然後之後我再從

209
00:07:50,000 --> 00:07:53,000
這邊拉出一個 Button 的話

210
00:07:53,000 --> 00:07:55,000
那我就可以看到說

211
00:07:55,000 --> 00:07:57,000
我的 SML 這個地方

212
00:07:57,000 --> 00:07:59,000
就會自動幫我修改

213
00:07:59,000 --> 00:08:01,000
它這是 ID 幫我自動修改的

214
00:08:01,000 --> 00:08:03,000
那 Android UI 的寫法

215
00:08:03,000 --> 00:08:05,000
它大概會長這個樣子

216
00:08:12,000 --> 00:08:14,000
那 Android UI 大概講到這裡

217
00:08:14,000 --> 00:08:16,000
接下來我要講 Flutter 的 UI

218
00:08:16,000 --> 00:08:18,000
那它的 UI 長相呢

219
00:08:18,000 --> 00:08:20,000
我也是會用我的範例專案

220
00:08:20,000 --> 00:08:22,000
來做為講解

221
00:08:22,000 --> 00:08:24,000
然後因為課表是一個

222
00:08:24,000 --> 00:08:25,000
比較複雜的 UI

223
00:08:25,000 --> 00:08:27,000
所以我就 Focus 在這個

224
00:08:27,000 --> 00:08:30,000
這張課程的資訊卡上

225
00:08:32,000 --> 00:08:34,000
那它先有一個概念

226
00:08:34,000 --> 00:08:35,000
那 Flutter 的 UI 上

227
00:08:35,000 --> 00:08:37,000
每個東西都叫做一個 Widget

228
00:08:37,000 --> 00:08:39,000
那大家應該也可以從

229
00:08:39,000 --> 00:08:41,000
上面的鎖牌看出來

230
00:08:41,000 --> 00:08:43,000
它是一個 Widget Tree 的結構

231
00:08:43,000 --> 00:08:45,000
那實際上放在上面的 UI 呢

232
00:08:45,000 --> 00:08:47,000
就是這個綠色的 Card

233
00:08:47,000 --> 00:08:49,000
還有橘色的 Text

234
00:08:49,000 --> 00:08:52,000
它就會形成這種 Widget Tree 的結構

235
00:08:53,000 --> 00:08:57,000
然後如果它實際寫成 Code 的話

236
00:08:57,000 --> 00:08:58,000
它大概會講這樣

237
00:08:58,000 --> 00:09:00,000
那也是可以從這個鎖牌看得出來

238
00:09:00,000 --> 00:09:02,000
它是一個梳妝結構

239
00:09:02,000 --> 00:09:04,000
那它是由 Dart 所編寫而成的

240
00:09:04,000 --> 00:09:06,000
和剛剛的 XML 不一樣

241
00:09:06,000 --> 00:09:07,000
XML 是一個標注語言

242
00:09:07,000 --> 00:09:09,000
所以它不能做一些邏輯的事情

243
00:09:09,000 --> 00:09:11,000
但是 Dart 是一個程式語言

244
00:09:11,000 --> 00:09:14,000
也就是說如果有個按鈕

245
00:09:14,000 --> 00:09:16,000
然後之後你可以寫個函式

246
00:09:16,000 --> 00:09:19,000
然後之後它按下去的事件

247
00:09:19,000 --> 00:09:20,000
你可以把這函式

248
00:09:20,000 --> 00:09:22,000
直接賦予在這個事件上

249
00:09:22,000 --> 00:09:25,000
然後就可以讓邏輯和 UI 一起寫

250
00:09:25,000 --> 00:09:26,000
但是我們還是希望說

251
00:09:26,000 --> 00:09:28,000
邏輯和 UI 是可以分離的

252
00:09:28,000 --> 00:09:30,000
因為這樣是比較乾淨的一個做法

253
00:09:30,000 --> 00:09:33,000
那講到邏輯與 UI 間的關係呢

254
00:09:33,000 --> 00:09:35,000
我就來接著介紹

255
00:09:35,000 --> 00:09:39,000
我的專案在哪裡運動到這個情況

256
00:09:39,000 --> 00:09:41,000
第一個我會先講 Android 專案

257
00:09:41,000 --> 00:09:43,000
然後我的 Notification Manager

258
00:09:43,000 --> 00:09:45,000
那就是我的新增

259
00:09:45,000 --> 00:09:46,000
如果有通知發出的話

260
00:09:46,000 --> 00:09:48,000
那我要新增資訊卡

261
00:09:49,000 --> 00:09:50,000
那我是怎麼做的呢

262
00:09:50,000 --> 00:09:53,000
先來介紹一個東西叫做 Activity

263
00:09:53,000 --> 00:09:54,000
那它是一個物件啊

264
00:09:54,000 --> 00:09:56,000
透過

265
00:10:04,000 --> 00:10:05,000
回來了嗎

266
00:10:05,000 --> 00:10:07,000
那它的名字叫做 Activity

267
00:10:07,000 --> 00:10:09,000
那它可以透過 ID 去綁定

268
00:10:09,000 --> 00:10:11,000
你的 UI 上的各個物件

269
00:10:11,000 --> 00:10:12,000
像是文字、Button 等等

270
00:10:12,000 --> 00:10:14,000
你就可以透過 ID 綁定

271
00:10:14,000 --> 00:10:17,000
然後 Activity 就可以去修改到這些元件

272
00:10:19,000 --> 00:10:22,000
但是在 Notification Manager 遇到的情況

273
00:10:22,000 --> 00:10:24,000
它監聽的通知不在 Activity 裡

274
00:10:24,000 --> 00:10:25,000
也就是說

275
00:10:25,000 --> 00:10:27,000
平常的觸發事件可能會是

276
00:10:27,000 --> 00:10:28,000
按鈕按下去之後

277
00:10:28,000 --> 00:10:30,000
然後你的文字會改變

278
00:10:30,000 --> 00:10:32,000
但是我是去監聽這個事件

279
00:10:32,000 --> 00:10:35,000
所以和剛剛的做法比較不一樣

280
00:10:35,000 --> 00:10:38,000
我要再去加一些新的東西

281
00:10:38,000 --> 00:10:40,000
那我要先介紹一個東西叫做 Manification

282
00:10:40,000 --> 00:10:41,000
那它是一個物件

283
00:10:41,000 --> 00:10:42,000
也是一個物件啊

284
00:10:42,000 --> 00:10:45,000
它是 Global 都可以讀取得到的

285
00:10:45,000 --> 00:10:47,000
那我就把 Activity 放在裡面

286
00:10:47,000 --> 00:10:49,000
那如果我的手機跳通知的話

287
00:10:49,000 --> 00:10:54,000
那我就可以從這個 Global 的 Manification 物件

288
00:10:54,000 --> 00:10:56,000
然後就把 Activity 抓出來

289
00:10:56,000 --> 00:10:59,000
那我就可以變動到我的 UI 了

290
00:10:59,000 --> 00:11:02,000
對 這是我的 Android 的做法

291
00:11:02,000 --> 00:11:06,000
那如果你的 Flutter 也有用到這種

292
00:11:06,000 --> 00:11:08,000
不是由 UI 所觸發

293
00:11:08,000 --> 00:11:11,000
像是按鈕按下去的這種事件的話

294
00:11:11,000 --> 00:11:13,000
而是去監聽其他事件的話

295
00:11:13,000 --> 00:11:15,000
那我使用的方法會是這個

296
00:11:15,000 --> 00:11:18,000
然後它是一個套件的名稱

297
00:11:18,000 --> 00:11:19,000
叫做 Get It

298
00:11:19,000 --> 00:11:23,000
那它可以將你所想要使用的 case 註冊為服務

299
00:11:23,000 --> 00:11:25,000
就是像是你的監聽事件的 case

300
00:11:25,000 --> 00:11:27,000
你就把它註冊成服務

301
00:11:27,000 --> 00:11:29,000
那在痊癒中就可以定位到

302
00:11:29,000 --> 00:11:31,000
你想要做到的這件事情

303
00:11:31,000 --> 00:11:35,000
然後就可以解決這個問題

304
00:11:35,000 --> 00:11:38,000
接下來我要來介紹我的 Flutter 專案

305
00:11:38,000 --> 00:11:40,000
Picademy 它遇到了什麼

306
00:11:40,000 --> 00:11:43,000
它要去處理這個如果是 UI 鍵的處理

307
00:11:43,000 --> 00:11:44,000
要怎麼去處理

308
00:11:44,000 --> 00:11:47,000
那它的情境就是

309
00:11:47,000 --> 00:11:50,000
如果你在新增或刪除課程資訊的時候

310
00:11:50,000 --> 00:11:52,000
那你的 UI 也會跟著變動

311
00:11:52,000 --> 00:11:56,000
那就是邏輯和 UI 間的有在溝通

312
00:11:56,000 --> 00:11:58,000
那我們先來講 Flutter 的做法

313
00:11:58,000 --> 00:12:01,000
那 Picademy 實作的情況就是

314
00:12:01,000 --> 00:12:04,000
一開始課表是一個比較複雜的 UI

315
00:12:04,000 --> 00:12:07,000
而且如果你只是要新增或是刪除課程資訊

316
00:12:07,000 --> 00:12:10,000
你並不需要去重新刷新它

317
00:12:10,000 --> 00:12:13,000
而是你只要去 focus 在局部的改變

318
00:12:13,000 --> 00:12:17,000
那我要怎麼做呢

319
00:12:17,000 --> 00:12:21,000
那就是這個狀態管理的部分

320
00:12:21,000 --> 00:12:24,000
那狀態管理就可以有做到這件事情

321
00:12:24,000 --> 00:12:26,000
就是小範圍的資訊運動

322
00:12:26,000 --> 00:12:28,000
它只是改變局部的 UI

323
00:12:28,000 --> 00:12:30,000
然後避免大範圍的重新渲染

324
00:12:30,000 --> 00:12:31,000
那它有多種的做法呢

325
00:12:31,000 --> 00:12:33,000
上面五種只是做個範例

326
00:12:33,000 --> 00:12:37,000
那接下來我會專注的講解

327
00:12:37,000 --> 00:12:41,000
這個 Provider 這個套件要怎麼做使用

328
00:12:41,000 --> 00:12:45,000
那就是做到我剛剛講的狀態管理的方法

329
00:12:45,000 --> 00:12:49,000
然後它主要有三個概念

330
00:12:49,000 --> 00:12:50,000
一個是 Change Notifier

331
00:12:50,000 --> 00:12:52,000
Change Notifier Provider

332
00:12:52,000 --> 00:12:53,000
以及 Consumer

333
00:12:53,000 --> 00:12:56,000
那先來講 Change Notifier 要做什麼事情

334
00:12:56,000 --> 00:12:58,000
你要自己去寫個 class

335
00:12:58,000 --> 00:12:59,000
然後去繼承它

336
00:12:59,000 --> 00:13:03,000
那你會把你的所需要改變的資料

337
00:13:03,000 --> 00:13:04,000
像是課程資訊

338
00:13:04,000 --> 00:13:07,000
有課程名稱或者是時間等等

339
00:13:07,000 --> 00:13:11,000
你就要把它放進你的 class 裡面

340
00:13:11,000 --> 00:13:13,000
當成一個 property

341
00:13:13,000 --> 00:13:16,000
然後你要去監聽這個會改變狀態的事件

342
00:13:16,000 --> 00:13:17,000
像是增加課程

343
00:13:17,000 --> 00:13:20,000
你的課程資訊

344
00:13:20,000 --> 00:13:22,000
課程的名稱或者是時間

345
00:13:22,000 --> 00:13:24,000
也會跟著改變

346
00:13:24,000 --> 00:13:25,000
然後你要去監聽它

347
00:13:25,000 --> 00:13:26,000
然後第二個

348
00:13:26,000 --> 00:13:28,000
Change Notifier Provider

349
00:13:28,000 --> 00:13:30,000
那我剛剛有說過我要寫個 class

350
00:13:30,000 --> 00:13:33,000
那它實例化出來的 instance

351
00:13:33,000 --> 00:13:36,000
你要讓 UI 所知道

352
00:13:36,000 --> 00:13:38,000
你要知道它這個 instance

353
00:13:38,000 --> 00:13:40,000
那最後一個是 Consumer

354
00:13:40,000 --> 00:13:44,000
那它就是我剛剛有講到

355
00:13:44,000 --> 00:13:47,000
Butter 在 UI 上每個東西都是一個 widget

356
00:13:47,000 --> 00:13:49,000
所以它是實際放在 UI 裡

357
00:13:49,000 --> 00:13:51,000
而且它包得越底層越好

358
00:13:51,000 --> 00:13:55,000
因為你想要去局部改變這個 UI

359
00:13:55,000 --> 00:13:58,000
那就是這三個概念

360
00:13:58,000 --> 00:14:01,000
好 最後我來講

361
00:14:01,000 --> 00:14:03,000
最後來講結論

362
00:14:03,000 --> 00:14:09,000
我們先用一個類似表格的來去整理

363
00:14:09,000 --> 00:14:11,000
我剛剛講的東西

364
00:14:11,000 --> 00:14:13,000
比較需要去了解的地方就是

365
00:14:13,000 --> 00:14:16,000
複雜 UI 避免重新渲染這個部分

366
00:14:16,000 --> 00:14:18,000
在 Android 上

367
00:14:18,000 --> 00:14:21,000
因為你本身就是用 ID 去綁定的

368
00:14:21,000 --> 00:14:23,000
所以在變動的時候

369
00:14:23,000 --> 00:14:25,000
本身就不會去重新渲染

370
00:14:25,000 --> 00:14:30,000
所以這個方式就可以這樣解決

371
00:14:30,000 --> 00:14:35,000
接下來就是一些人比較可能會有的問題

372
00:14:35,000 --> 00:14:38,000
先學了 Flutter 會有障礙嗎？

373
00:14:38,000 --> 00:14:41,000
我是覺得不太會有障礙的

374
00:14:41,000 --> 00:14:43,000
因為它的開發程式語言

375
00:14:43,000 --> 00:14:45,000
其實我的語法是蠻接近的

376
00:14:45,000 --> 00:14:48,000
但是我曾經有遇到過一些問題

377
00:14:48,000 --> 00:14:51,000
我要先介紹一個東西叫做 Blue Gradle

378
00:14:51,000 --> 00:14:52,000
它是一個設定檔

379
00:14:52,000 --> 00:14:58,000
它可以去管理你的 Android 上面的一些套件

380
00:14:58,000 --> 00:15:00,000
如果有寫過 Android 的人就知道

381
00:15:00,000 --> 00:15:02,000
它的專案結構下

382
00:15:02,000 --> 00:15:06,000
內外都各有一個 Blue Gradle

383
00:15:06,000 --> 00:15:09,000
我在寫 Flutter 的時候

384
00:15:09,000 --> 00:15:12,000
要去動到 Android 的專案結構

385
00:15:12,000 --> 00:15:14,000
要去修改 Blue Gradle 檔案

386
00:15:14,000 --> 00:15:17,000
所以我曾經把內外的 Blue Gradle 弄錯過

387
00:15:17,000 --> 00:15:21,000
這個就是我有遇到過的問題

388
00:15:21,000 --> 00:15:27,000
最後是開發 App 的想法

389
00:15:27,000 --> 00:15:32,000
可以從我的兩個範例專案就可以知道說

390
00:15:32,000 --> 00:15:35,000
我都是在去整理一些

391
00:15:35,000 --> 00:15:40,000
我覺得生活上比較雜亂的一些東西

392
00:15:40,000 --> 00:15:44,000
所以我的想法都是從觀察生活上開始

393
00:15:44,000 --> 00:15:48,000
再去選擇我想要使用的工具

394
00:15:48,000 --> 00:15:50,000
再用這個工具去解決

395
00:15:50,000 --> 00:15:53,000
這就是我的開發 App 的想法

396
00:15:53,000 --> 00:15:58,000
那最後可以進入 Q&A 時間

397
00:16:18,000 --> 00:16:21,000
現場有問題嗎？

398
00:16:21,000 --> 00:16:23,000
有點尷尬耶

399
00:16:25,000 --> 00:16:27,000
講師的聲音好好聽喔

400
00:16:27,000 --> 00:16:29,000
謝謝 謝謝 謝謝

401
00:16:30,000 --> 00:16:32,000
你要不要當我的製作人

402
00:16:36,000 --> 00:16:37,000
沒了是不是

403
00:16:37,000 --> 00:16:39,000
那我可以再切回來一下嗎

404
00:16:40,000 --> 00:16:42,000
我再切回一下我的簡報一下

405
00:16:42,000 --> 00:16:46,000
打內斯

406
00:16:46,000 --> 00:16:48,000
那個

407
00:16:48,000 --> 00:16:50,000
他被切回去了

408
00:16:55,000 --> 00:16:57,000
我就剛講一下

409
00:16:57,000 --> 00:16:59,000
剛有一個打內的問題嘛

410
00:16:59,000 --> 00:17:05,000
因為我是比較偏向開發 APP 的學生

411
00:17:05,000 --> 00:17:07,000
所以說

412
00:17:07,000 --> 00:17:09,000
所以說

413
00:17:09,000 --> 00:17:10,000
開發 APP 的學生

414
00:17:10,000 --> 00:17:12,000
所以說其實我沒寫過打內的

415
00:17:12,000 --> 00:17:13,000
對 對不起

416
00:17:13,000 --> 00:17:16,000
這可能要請別人來回答

417
00:17:16,000 --> 00:17:17,000
講師讓人好暈

418
00:17:17,000 --> 00:17:19,000
那你可以吃暈車藥

419
00:17:21,000 --> 00:17:23,000
什麼是 Build Gradle

420
00:17:23,000 --> 00:17:26,000
那 Build Gradle 是一個設定檔

421
00:17:26,000 --> 00:17:28,000
那它可以去管理你的一些 Android

422
00:17:28,000 --> 00:17:31,000
使用到的一些套件

423
00:17:31,000 --> 00:17:33,000
然後之後也可以設定你 Android

424
00:17:33,000 --> 00:17:35,000
要使用的 SDK

425
00:17:35,000 --> 00:17:37,000
對 就是一個設定檔的概念

426
00:17:37,000 --> 00:17:43,000
好想看講師跳 house

427
00:17:43,000 --> 00:17:45,000
不要啦

428
00:17:48,000 --> 00:17:51,000
想做 App 跟網頁要怎麼學

429
00:17:51,000 --> 00:17:53,000
Flutter 是一個跨平台的開發框架

430
00:17:53,000 --> 00:17:56,000
那它可以同時用同一份 Code

431
00:17:56,000 --> 00:17:58,000
去寫出網頁和 App

432
00:17:58,000 --> 00:17:59,000
然後我剛剛有提到說

433
00:17:59,000 --> 00:18:01,000
我的網頁期末專案

434
00:18:01,000 --> 00:18:02,000
就是用 Flutter 寫的

435
00:18:02,000 --> 00:18:03,000
我完全沒有用到寫

436
00:18:03,000 --> 00:18:05,000
什麼 HTML CSS 之類的

437
00:18:05,000 --> 00:18:08,000
而且我拿滿滿高分的

438
00:18:10,000 --> 00:18:12,000
好 那應該結束了吧

439
00:18:12,000 --> 00:18:14,000
我是哪一省的

440
00:18:16,000 --> 00:18:18,000
有用過 JP Compose 嗎

441
00:18:18,000 --> 00:18:19,000
我沒有用過

442
00:18:19,000 --> 00:18:22,000
因為我剛剛講解的 Android UI 的寫法

443
00:18:22,000 --> 00:18:24,000
就是比較傳統的

444
00:18:24,000 --> 00:18:26,000
要去修改 XAML 的寫法

445
00:18:28,000 --> 00:18:30,000
這樣算有回答到吧

446
00:18:31,000 --> 00:18:36,000
請問哪裡有推薦的學習資源或網站嗎

447
00:18:36,000 --> 00:18:40,000
我覺得官方文檔和 Stakeoverflow 吧

448
00:18:48,000 --> 00:18:51,000
其實我是 Flutter 比較熟的

449
00:18:51,000 --> 00:18:54,000
所以可能要再想想

450
00:18:54,000 --> 00:19:03,000
Flutter 好多 class 跟元件很難考清楚其中的關係怎麼辦

451
00:19:03,000 --> 00:19:09,000
其實它可以用一個 ID 去看到你的 Widgetree 的結構

452
00:19:09,000 --> 00:19:12,000
這樣用一個可視化的方式應該比較容易懂

453
00:19:12,000 --> 00:19:17,000
除了 Android 以外

454
00:19:17,000 --> 00:19:21,000
因為我沒有 Mac

455
00:19:21,000 --> 00:19:24,000
所以我沒有寫過 IOS

456
00:19:24,000 --> 00:19:28,000
對不起我沒寫過 IOS

457
00:19:28,000 --> 00:19:30,000
哪個對新手比較友善

458
00:19:30,000 --> 00:19:32,000
其實我覺得兩個難度差不多

459
00:19:32,000 --> 00:19:35,000
但是其實我覺得 Flutter 的 CP 值比較高

460
00:19:35,000 --> 00:19:39,000
因為它可以用同一份 code 去寫出很多種不同的東西

461
00:19:39,000 --> 00:19:46,000
而且都會滿好看的

462
00:19:46,000 --> 00:19:52,000
Anaconda 不是

463
00:19:52,000 --> 00:19:55,000
這個可能之後再問一下

464
00:19:55,000 --> 00:19:57,000
這個我可能先跳過

465
00:19:57,000 --> 00:19:59,000
我看不太懂

466
00:19:59,000 --> 00:20:01,000
有想要試著上架 Google Play

467
00:20:01,000 --> 00:20:03,000
我在這裡工商一下

468
00:20:03,000 --> 00:20:07,000
我們的北科程式設計研究室開發一款 APP 叫做 TAT

469
00:20:07,000 --> 00:20:10,000
我們實際有上架到 Google Play 的

470
00:20:10,000 --> 00:20:12,000
如果有興趣的話可以下載看看

471
00:20:12,000 --> 00:20:14,000
你只要有北科帳號就是了

472
00:20:18,000 --> 00:20:20,000
記得 Flutter 可以是 iOS App

473
00:20:20,000 --> 00:20:23,000
但是你還是要有 Mac 才可以去把它 Run 起來

474
00:20:23,000 --> 00:20:26,000
你要有一個 Xcode

475
00:20:28,000 --> 00:20:30,000
有沒有考慮錄 Podcast

476
00:20:30,000 --> 00:20:32,000
沒有耶

477
00:20:32,000 --> 00:20:34,000
沒有

478
00:20:36,000 --> 00:20:38,000
有推薦的 ID 嗎

479
00:20:38,000 --> 00:20:41,000
我通常這兩個都是用 Android Studio

480
00:20:41,000 --> 00:20:43,000
就是官方的東西

481
00:20:45,000 --> 00:20:47,000
Flutter 的學習教材

482
00:20:47,000 --> 00:20:49,000
其實剛剛就有說過是

483
00:20:49,000 --> 00:20:52,000
官方文件和 Stakeoverflow

484
00:20:52,000 --> 00:20:55,000
那零了

485
00:20:55,000 --> 00:20:58,000
我可以再切回我的簡報一下嗎

486
00:20:58,000 --> 00:21:12,000
最後感謝聆聽

487
00:21:12,000 --> 00:21:14,000
右邊是我的 Github

488
00:21:14,000 --> 00:21:15,000
左邊是我的 LinkedIn

489
00:21:15,000 --> 00:21:17,000
那如果你在這個議程

490
00:21:17,000 --> 00:21:18,000
還有任何問題的話

491
00:21:18,000 --> 00:21:19,000
你可以找到 Github

492
00:21:19,000 --> 00:21:20,000
然後我開了一個 Repo

493
00:21:20,000 --> 00:21:21,000
你可以在上面發 issue

494
00:21:21,000 --> 00:21:22,000
如果有任何問題的話

495
00:21:22,000 --> 00:21:24,000
就在上面發問

496
00:21:24,000 --> 00:21:26,000
那感謝大家今天的聆聽

497
00:21:26,000 --> 00:21:28,000
這個議程就到這裡結束