170409/_LabSteps_Cordova.txt at master · wgpd01/170409 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
Lab: 以 Intel XDK 實作 Cordova 手機應用程式


1.	下載與安裝「Intel XDK」


1.1	Google: 「Intel XDK」或者直接連到 Intel XDK 官網:
	https://software.intel.com/en-us/intel-xdk


1.2	下載 Intel XDK 安裝程式


1.3	執行下載回來的安裝程式


1.4	第一次啟動 Intel XDK 時，會要求註冊，請依畫面指示輸入E-mail、密碼等資料。


2.	新增專案


2.1	先點按主畫面左上角的「Projects」


2.2	再點按主畫面左下角的「START A NEW PROJECT」


2.3	左側邊欄偏中間的 HTML5 COMPANION HYBRID MOBILE OR WEB APP 分類
	點按「+」 展開 Templates


2.4	選擇 「HTML5 + Cordova」這個專案範本


2.5	點按右下角的「Continue」按鈕


2.6	Project Diretory 選擇(例如) C:\Lab


2.7	Project Name: testCordova


2.8	點按右下角的「Create」按鈕


3.	套用 jQuery Mobile


3.1	先點按主畫面上方的「DEVELOP」頁籤


3.2	左側邊欄，滑鼠右鍵點按「www」| Show in Explorer

	<Note> 檔案總管會直接帶出 www 資料夾以方便我們修改資料夾內容


3.3	將本次練習 template 資料夾的內容(資料夾+檔案)複製貼上到 www 資料夾


3.4	左側邊欄點按「www」展開，其中應該會有:
	js 資料夾，index.html 與 init_code.txt


3.5	點按 init_code.txt 開啟該檔案


3.6	將 <!-- HEAD --> 的內容貼到 index.html 的 </head> 前一行


3.7	將 init_code.txt <!-- BODY --> 的內容貼到 index.html
	取代原 <body> 的內容


3.8	組合鍵 Ctrl + S 儲存檔案


4.0	測試程式


4.1	點按主畫面上方的「SIMULATE」頁籤


4.2	畫面上方工具列從左到右，
	選「Android小機器人」
	HTC Droid Incredible
	圓形的「>」按鈕


4.3	試用一下手機模擬器，然後切換回「DEVELOP」頁籤


4.4	在 <div data-role="content"> 元素內部，置入下列內容:

	<input type="button" id="btnTest" value="Test" />
	<br>
	<div id="googleMap" style="width: 100%; height: 300px; border: 1px solid gray;"></div>
	<div id="debug"></div>


4.5	Ctrl + S 儲存檔案


4.6	切換到手機模擬器，試用新的畫面


5.	偵測 GPS 位置


5.1	先點按主畫面左上角的「Projects」


5.2	確認目前選擇的焦點是我們這次的「testCordova」專案


5.3	點按「+ Plugin Management」 展開 「Plugin Management」
	點按「Add Plugins to this Project」


5.4	選擇 Geolocation，點按「Add Plugin」，回答「OK」


5.5	切換回「DEVELOP」頁籤，針對 index.html，加入下列程式到 </head> 的前一行:

<script>

document.addEventListener(
    "deviceready",
    function () {

        $("#btnTest").click(function () {

            navigator.geolocation.getCurrentPosition(
                function(position) {
                    var p = position.coords.latitude + "," + position.coords.longitude;
                    $("#debug").html(p);
                },
                function (e) { alert("error!") }
            );

        })

    }, // end of deviceready
    false
);

</script>


5.6	組合鍵 Ctrl + S 儲存檔案


5.7	關閉手機模擬器，點按主畫面上方的「SIMULATE」頁籤，然後重新啟動手機模擬器


5.8	地圖位置請挪動到台灣，點按手機模擬器的「Test」按鈕以取得 GPS 座標。


6	利用 Google Map 繪製地圖


6.1	在 index.html <head> 元素內，貼入下列這行: (引用 Google Map API)
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyA6gcpi9-EnxyDjXeWzkU9DHpyB5iyEUvY"></script>


6.2	將上述 5.5 的 JavaScript 程式，改成這樣:

<script>

document.addEventListener(
    "deviceready",
    function () {

        $("#btnTest").click(function () {

            navigator.geolocation.getCurrentPosition(
                function(position) {

                    var currentPosition = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
                    var mapProp = {
                        center : currentPosition,
                        zoom : 14,
                        mapTypeId : google.maps.MapTypeId.ROADMAP
                    };

                    // 繪製地圖
                    var map = new google.maps.Map(
                            googleMap,
                            mapProp);


                },
                function (e) { alert("error!") }
            );

        })

    }, // end of deviceready
    false
);

</script>


6.3	組合鍵 Ctrl + S 儲存檔案


6.4	點按手機模擬器的「Test」按鈕以測繪地圖。


6.5	將 JavaScript 程式再改成這樣: (完成後，Ctrl + S 儲存檔案，測試程式)

<script>

document.addEventListener(
    "deviceready",
    function () {

        $("#btnTest").click(function () {

            navigator.geolocation.getCurrentPosition(
                function(position) {

                    var currentPosition = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
                    var mapProp = {
                        center : currentPosition,
                        zoom : 14,
                        mapTypeId : google.maps.MapTypeId.ROADMAP
                    };

                    // 繪製地圖
                    var map = new google.maps.Map(
                            googleMap,
                            mapProp);

                    // 加上圖標
                    var marker = new google.maps.Marker({
                           position: currentPosition
                           });

                    marker.setMap(map);


                    // 圖標提示文字
                    var infowindow = new google.maps.InfoWindow(
                            {content: "I'm here"}
                        );

                    infowindow.open(map,marker);


                },
                function (e) { alert("error!") }
            );

        })

    }, // end of deviceready
    false
);

</script>