Location Based Services - LBS

Presentation on theme: "Location Based Services - LBS"— Presentation transcript:

1 Location Based Services - LBS
系統實例 – 魔法地圖 講師：蘇怡仁

2 Outline 系統簡介 系統規劃 系統環境建置 魔法地圖建置

3 Chapter1. 系統簡介

4 系統簡介 1. 創作動機 大部分的人在舉辦活動時，最常使用的聯絡工具應該是 共同問題: 無法掌握參與人即時狀況

5 系統簡介 1. 創作動機 晚一點到沒差 就快到了啦 再睡一下 都幾點了
在活動當天，可能會常遇到幾種狀況是，參與人沒有在活動時間點到位，但無法確定參與人目前所在位置 都幾點了

6 系統簡介 1. 創作動機 魔法地圖因應而生 因此若透過魔法地圖來辦活動的話則可以幫助解決這個問題

7 系統簡介 2. 系統功能 個人資料 搜尋好友 行動好友 使用者 活動訊息 邀請參加 舉辦活動 魔法地圖 顯示位置

8 系統簡介 3. 系統架構 Client Web Server Web Service Database Internet

9 系統簡介 個人資料 4. 系統操作流程 搜尋好友 否 是 新增 查詢 資料庫 行動好友 是否 存在

10 系統簡介 舉辦活動 活動訊息 邀請參加 4. 系統操作流程 建立活動 是否 存在 選擇地點 設定活動詳情 邀請好友 好友選擇是否參加

11 系統簡介 魔法地圖 顯示位置 4. 系統操作流程 魔法地圖 顯示地圖 活動清單 顯示參加者位置、本地位置、活動位置

12 Chapter2. 系統規劃

13 系統規劃 1. 系統功能介面規劃 3 4 6 7 1 2 5 8 活動清單

14 系統規劃 2.ER-Model 1 n m 1 simID Name aid title Join User Activity lat
lng lat lng simid aid

15 系統規劃 3. Web Service 規劃 Service 功能描述 需求參數 返回格式 返回參數 備註 user.php
列出所有好友清單 無 json simid name location.php 目前User所在經緯度 lat lng activity.php 列出目前User所參與活動清單 aid title

16 帳號登入(若沒帳號則會註冊，若有帳號則會更新姓名)
系統規劃 3. Web Service 規劃 Service 功能描述 需求參數 返回格式 返回參數 備註 updateLocation.php 更新目前User經緯度 simid json response lat lng login.php 帳號登入(若沒帳號則會註冊，若有帳號則會更新姓名) name addActivity.php 新增活動,與新增邀請好友功能 title aid friend[simid] 請使用","做間隔 joinUser.php 查詢參與活動人的相關資訊

17 系統規劃 4.軟體工程 Unified Modeling Language (UML, Unified Modeling Language)
UML全名是Unified Modeling Language 也稱「統一塑模語言」     ●Unified：UML是一種標準語言，廣泛運用於全世界。     ●Modeling：UML用途在於塑模(Modeling)，也就是畫軟體藍圖。     ●Language：UML是一種塑模語言， UML在軟體工程中用以建造模型，而這些模型使得工作團隊能夠：將系統具象化(Visualization)、將系統結構及行為規格化(Specification)、建構(Construction)系統、以及記錄(Documentation)發展系統過程中之各項決策。而非程式語言或標示語言。 參考來自:

18 系統規劃 4.軟體工程 Use Case Diagrams Class Diagrams Sequence Diagrams
(UML Diagrams) Use Case Diagrams Class Diagrams Sequence Diagrams UML所涵蓋的內容是表式法，無論以任何程序來開發軟體系統，都可以使用UML來描述軟體模型，其目的在於能在著手進行系統開發前，可以有妥善的規劃，將有助於團隊工作以及減少系統錯誤。 因應本教材，討論範圍會Focus在 Use Case Diagrams、Class Diagrams、Sequence Diagrams描述的部分。

19 系統規劃 5.Use Case Diagram 簡介 使用案例圖 (Use Case Diagram)
使用案例圖是從使用者的實際使用案例來描述系統所提供的功能。

20 系統規劃 5.Use Case Diagram 簡介 元素介紹(Element) Actor Use Case System (行為者)
魔法地圖 舉辦活動 舉辦活動 舉辦活動 Actor (行為者)：使用人形來表示一個Actor代表的是一個角色，它要表達的是一個與系統互動的角色（例：使用者、系統、時間） Use Case (使用案例)：使用橢圓形來表示一個使用案例，都有唯一的名稱，並且，使用案例的名稱均以動詞為開頭。這是從英文的語法結構來講。如果是用中文來描述使用案例，使用案例是代表系統能夠執行的功能，它代表的是動作、處理，因為使用案例描述系統的行為。 System(系統)：系統以一個方形為代表。用以表示系統的邊界。當開發的系統並不與其他系統有互動時，有時候會省略它 Actor Use Case System (行為者) (使用案例) (系統)

21 系統規劃 5.Use Case Diagram 簡介 元素介紹(Element) Association (連結線) 活動 舉辦人 活動申請
連結線是一條直線，它用來連結使用者及系統執行的功能。這條連結線表示某個角色的演員啟動了某個案例。 活動 舉辦人 Association (連結線)

22 系統規劃 5.Use Case Diagram 簡介 關係介紹(Relationship) – 包含關係(include)
– 延伸關係(extend)

23 系統規劃 5.Use Case Diagram 簡介 關係介紹(Relationship) Include (包含關係) 使用者
顯示參與 人所在位置 活動申請 包含的關係，以例子來說可解釋為在活動舉辦人操作”活動申請”功能後，一定會執行 “顯示參與人所在位置”的功能，所以是”必定會執行”，包含關係的表法為畫一條帶有箭頭的虛線，從案例A(包含者)連到案例B(被包含者)，並且在線上要標記出<<include>>，利用包含的關係就不需要在不同的地方重複描述同一個使用案例。 使用者 Include (包含關係) 可參考2-1系統功能介面規劃的(7,8)畫面流程圖

24 系統規劃 5.Use Case Diagram 簡介 關係介紹(Relationship) Extend (延伸關係) 使用者
顯示參與 人所在位置 活動列表 延伸的關係，以例子來說可解釋為在活動舉辦人操作”活動列表”功能後，在選擇活動列表上的活動後(達成某個條件)才會執行 “顯示參與人所在位置”的功能，所以是“達成某種條件後才會執行”，此延伸關係的表示方法為從使用案例B畫一條帶有箭頭的虛線指向使用案例A。也就是使用案例B安插到使用案例A，並且要在線上標出<<extend>> 使用者 Extend (延伸關係) 可參考2-1系統功能介面規劃的(5,8)畫面流程圖

25 系統規劃 6.魔法地圖 Use Case Diagram 魔法地圖 使用者 Service 地圖打點 活動申請 列出會員 顯示參與
<<include>> 地圖打點 活動申請 列出會員 <<include>> 使用者 顯示參與 人所在位置 活動列表 <<extend>> 上傳位置 Service

26 系統規劃 7.Class Diagram 簡介 類別圖 (Class Diagram)
類別是物件導向軟體系統的核心，可以用來描述軟體系統類別之間的關係與靜態之結構。

27 系統規劃 7.Class Diagram 簡介 元素介紹(Element) Persistent Class Transient Class
Class Name Class Name 永存類別(Persistent Class)：當程式執行後，該物件之資料需被儲存在資料庫者。 暫存類別(Transient Class)： 當程式執行後，該物件之資料不需被儲存在資料庫且該物件會被刪除者。 Persistent Class Transient Class (永存類別) (暫存類別)

28 系統規劃 7.Class Diagram 簡介 元素介紹(Element) Attribute Operation class (類別)
Class Name + attribute1 :type # attribute2 :type Attribute Attribute：每個屬性都有特定的資料型態。 例如: boolean、int、 long、double、float、char、String。 Operation：操作是一個類別可以執行的動作或是功能。操作代表著這個類別能接收到的訊息(message)。 一旦接受到訊息，類別就有責任對這個訊息做相對的處理或是運算。 ~ attribute3 :type - operation1() :type Operation - operation2() :type class (類別)

29 系統規劃 7.Class Diagram 簡介 能見度介紹(Visibility)
Class Name Public + attribute1 :type Protected # attribute2 :type 公共的（Public）：所有的物件都可以存取與設定它的值。 保護的（Protected）：只有子類別可以存取與設定它的值。 類別庫（Package）：只有相同類別庫之類別可以存取與設定它的值。 私有的（Private）：只屬於它自己，任何其他的類別都不可以存取它。 Package ~ attribute3 :type Private - operation1() :type - operation2() :type class (類別)

30 系統規劃 7.Class Diagram 簡介 關係介紹(Relationship) Association (關聯) 參加 使用者 活動
相依關係：是一種「使用」的關係表示一個類別會用到其他類別，且被使用之類別的改變可能會影響使用它的類別，但反之則不必然。 一般化關係：父類別的所有特徵、性質及操作，都會自動被子類別所繼承。子類別不需再去定義它們，就可以自動擁有。 關聯關係：關聯關係代表物件與物件在結構上的連結。關聯關係是用一條直線來連結相關的物件。關聯具有方向性，如上表示使用者參加活動，所以具有方向性，若關聯為雙向則可直接表達成一條直線。 實現化關係：表達某一類別的行為是由另一介面類別來描述定義。例如Java中的 Interface。 Association (關聯)

31 系統規劃 7.Class Diagram 簡介 多重性介紹(Multiplicity) Multiplicity (多重性) 表示法 說明
使用者 活動 表示法 說明 1 恰好一個(不重複) 0…* 0個或多個 1…* 1個或多個(Not Null) 0…1 1個或1個 2…4 指定範圍2~4個 １ ０…* Multiplicity (多重性)

32 系統規劃 8.魔法地圖 Class Diagram <<persistent>> Join
0…* <<persistent>> Join - simid : String - aid : Int + invite(simid,aid) + getPartipants(aid): List 1 <<persistent>> User - simid : String - name : String - lat : Double - lng : Double + getName(simid): String + getPosition(simid): String 0…* <<persistent>> Activity - aid : Int - title : String - lat : Double - lng : Double + invite(simid,aid) + getPartipants(aid): List 1 1 1 <<transient>> Background Service + setPosition(simid,aid)

33 系統規劃 9. Sequence Diagram 簡介 循序圖 (Sequence Diagram)
循序圖用於顯示參與一個使用案例彼此之間傳遞訊息時間上的執行順序。

34 系統規劃 9. Sequence Diagram 簡介 元素介紹 obj:class Participants Lifeline
Activation：啟動棒可觀察一項操作所歷經時間長短與物件訊息傳遞的流入與流出。 Participants Lifeline Activation (參與者) (生命線) (啟動棒)

35 系統規劃 9. Sequence Diagram 簡介 訊息介紹 Message (訊息) obj:class obj:class
result= message(paramter):type 透過訊息(Message)的傳遞可以讓啟動棒執行需要之操作 同步訊息：當參與者送出同步訊息，必須等到 Return 後才會繼續執行，同步訊息是使用實心三角形箭頭線來表示 非同步訊息：參與者送出非同步訊息，並不需要 Return 就可以繼續執行。 message(paramter):type Message 同步訊息 (Synchronous Messages) (訊息) 非同步訊息 (Asynchronous Messages)

36 系統規劃 10. 魔法地圖 Sequence Diagram :會員 :參加 :活動 Web Android Service
getUserList():array getUserList():json return return getLocation(simid):array getLocation(simid):json return return getJoinActivity(simid):array getJoinActivity(simid):json getTitle(aid):String return return return

37 (title,lat,lng,friend[]):boolean
系統規劃 10. 魔法地圖 Sequence Diagram Web Service Android :會員 :參加 :活動 login(simid,name):boolean checkUser(simid,name):json return return addActivity (title,lat,lng,friend[]):boolean addActivity(title,lat,lng) Return:aid addParticipant(aid,friend[]):json return return getJoinUser(aid):array getJoinUser(aid) return:simid[] return getUserInfo(simid[]) return

38 系統規劃 10. 魔法地圖 Sequence Diagram :會員 Android (Background Service) Web
updateLocation(simid,lat,lng):boolean updateLocation(simid,lat,lng):json return return

39 Chapter3. 系統環境建置

40 系統環境建置 2.建置資料庫 點擊Admin，啟動MySQL管理介面

41 系統環境建置 2.建置資料庫 1 4 magicmaps utf8_general_ci 2 3

42 系統環境建置 3.建置資料庫欄位 3 user 4 1 2

43 系統環境建置 2.建置資料庫欄位 建立user相關欄位

44 系統環境建置 2.建置資料庫欄位 join 3 join 3 1 2

45 系統環境建置 2.建置資料庫欄位 建立join相關欄位

46 系統環境建置 2.建置資料庫欄位 activity 3 4 1 2

47 系統環境建置 2.建置資料庫欄位 建立activity相關欄位

48 Chapter4. 魔法地圖建置

49 魔法地圖建置 3. 權限說明 Uses Permission INTERNET 網路存取權限 ACCESS_FINE_LOCATION
GPS定位權限 ACCESS_COARSE_LOCATION 無線網路定位 ACCESS_NETWORK_STATE 允許應用程序訪問有關GSM網絡信息 WRITE_EXTERNAL_STORAGE 允許應用程序寫入外部存儲器

50 魔法地圖建置 3. 權限說明 Uses Permission Permission MAPS_RECEIVE 允許下載圖資
READ_PHONE_STATE 允許存取 SIM Card 資訊 READ_GSERVICES 允許 API 訪問 Google Web 的服務 Permission MAPS_RECEIVE 允許下載圖資

51 在其他user-permission底下貼上READ_GSERVICES權限
魔法地圖建置 在其他user-permission底下貼上READ_GSERVICES權限 只有READ_GSERVICES的權限需要透過手動的方式加入到AndroidManifest.xml程式碼當中 2 1 <uses-permission android:name="com.google.android.providers.gsf.permission.READ_GSERVICES"/>

52 魔法地圖建置 4. 物件參數設定 value.java 1 2 3 4 5 6 7 8 9 而 service 參數要設定成自己的位置 /*
package com.stu.MagicMap; 2 public final class value { 3 public static String simid = ""; 4 public static String name = ""; 5 public static String service = 6 " 7 /* 每個頁面可能會用到的參數， 8 都會先宣告在 value 物件當中 9 而 service 參數要設定成自己的位置 /* 10 11 } 打開 value.java

53 魔法地圖建置 5. 登入功能描述 Android Web Service MainActivity.java 1 Require
將 SIMID 與 NAME 傳送給 Service 後，便可直接登入到功能頁面 Require response simid Web Service name JSON login.php GET 第一次登入會透過SIM CARD ID 當作帳號與輸入姓名來新增一筆帳號，再次登入僅會更新姓名資料 Response

54 魔法地圖建置 5-1. 登入功能 Service login.php 1 2 3 4 5 6 7 8 9 10 11
if (isset($_GET['simid']) && isset($_GET['name'])) 2 { 3 $simid = mysql_real_escape_string($_GET['simid']); 4 $name = mysql_real_escape_string($_GET['name']); 5 //透過 GET 代入 simid (SIM Card ID) 與 name (名稱) 參數 6 include("../connect.php"); 7 $sql = "SELECT * FROM user WHERE simid = '$simid'"; 8 $result = mysql_query($sql, $link) or die("oops"); 9 //指定查詢 $simid 是否有註冊紀錄，若回傳資料筆數為 0 則表示未註冊 1 則已註冊 10 if(mysql_num_rows($result) != 0) { 11 $sql = "Update user SET name = '$name' WHERE simid = '$simid'";

55 魔法地圖建置 12 // 若已註冊則更新這個 $simid 的 name 欄位，更改名稱 13 $result = mysql_query($sql, $link) or die("oops"); 14 }else{ 15 $sql = "INSERT INTO user(simid,name,lat,lng) VALUES('$simid','$name','0','0')"; 16 //若未註冊則新增一筆使用者紀錄，預設 lat 與 lng 經緯度位置為 0 17 18 } 19 if($result) { 20 $data['responese'] = 'success'; 21 echo json_encode($data); 22 23 24

56 魔法地圖建置 5-2. 登入功能 Layout activity_main.xml 1 2 3 4 5 6 7 8 9 10 11
<RelativeLayout xmlns:android=" 2 xmlns:tools=" 3 android:layout_width="match_parent" 4 android:layout_height="match_parent" 5 6 7 8 9 tools:context=".MainActivity" > 10 <Button 11

57 魔法地圖建置 12 android:layout_width="wrap_content" 13 android:layout_height="wrap_content" 14 android:layout_alignParentBottom="true" 15 android:layout_centerHorizontal="true" 16 android:layout_marginBottom="78dp" 17 android:text="登入" /> 18 <EditText 19 20 21 22 android:layout_alignParentTop="true" 23 24 android:layout_marginTop="95dp"

58 魔法地圖建置 25 android:ems="10" 26 android:inputType="textMultiLine" > 27 <requestFocus /> 28 </EditText> 29 <TextView 30 31 android:layout_width="wrap_content" 32 android:layout_height="wrap_content" 33 34 android:layout_centerHorizontal="true" 35 android:layout_marginBottom="51dp" 36 android:text="名稱" 37 android:textAppearance="?android:attr/textAppearanceLarge" /> 38 </RelativeLayout>

59 魔法地圖建置 5-3. 登入功能 MainActivity.java 1 2 3 4 5 6 7 8 9 10 11
import org.apache.http.HttpEntity; 3 import org.apache.http.HttpResponse; 4 import org.apache.http.client.HttpClient; 5 import org.apache.http.client.methods.HttpGet; 6 import org.apache.http.impl.client.DefaultHttpClient; 7 import org.apache.http.util.EntityUtils; 8 import android.app.Activity; 9 import android.content.Context; 10 import android.content.Intent; 11 import android.os.Bundle; Android:MainActivity.java 打開 MainActivity.java

60 魔法地圖建置 12 import android.telephony.TelephonyManager; 13 import android.util.Log; 14 import android.view.View; 15 import android.view.View.OnClickListener; 16 import android.widget.Button; 17 import android.widget.EditText; 18 19 public class MainActivity extends Activity { 20 EditText name; 21 Button login; 22 23 protected void onCreate(Bundle savedInstanceState) { 24 super.onCreate(savedInstanceState);

61 魔法地圖建置 25 setContentView(R.layout.activity_main); 26 findViwe(); 27 //前置先與 Layout 元件作連結 28 simid(); 29 //取得 SIM Card ID 30 initListener(); 31 32 } 33 public void findViwe() { 34 name = (EditText) findViewById(R.id.editText1); 35 login = (Button) findViewById(R.id.button1); 36 //連結 EditText 與 Button 元件，並給定到參數中 37

62 魔法地圖建置 38 39 40 41 42 43 44 45 46 47 48 49 50 public void simid() {
TelephonyManager manager = 40 (TelephonyManager) getSystemService(Context.TELEPHONY_SERVICE); 41 value.simid = manager.getDeviceId(); 42 //透過 TelephonyManager 取得 SimCard ID，存放到 value.simid 43 } 44 45 public void initListener() { 46 login.setOnClickListener(new OnClickListener() { 47 public void onClick(View v) { 48 value.name = name.getText().toString(); 49 login Login = new login(); 50 Login.start();

63 魔法地圖建置 51 52 53 54 55 並在執行 Login 執行緒後，轉跳功能選擇頁 /* 56 } 57 }); 58 59 60
Intent intent = new Intent(); 52 intent.setClass(MainActivity.this, select.class); 53 startActivity(intent); 54 /* 將 name 當中輸入的字串設定給 value 物件， 55 並在執行 Login 執行緒後，轉跳功能選擇頁 /* 56 } 57 }); 58 59 60 61 62 63

64 魔法地圖建置 64 class login extends Thread { 65 66 public void run() { 67 super.run(); 68 try { 69 HttpClient client = new DefaultHttpClient(); 70 String url = value.service + "login.php?simid=" + value.simid 71 + "&name=" + value.name; 72 //將 value 物件中的 service 與 simid 與 name 透過 GET 呼叫 login.php 73 HttpGet get = new HttpGet(url); 74 HttpResponse response = client.execute(get); 75 //執行 url 設定的 Login Service 76

65 魔法地圖建置 77 HttpEntity resEntity = response.getEntity(); 78 String result = EntityUtils.toString(resEntity); 79 //回傳執行的結果並存放在 result 當中 80 } catch (Exception e) { 81 e.printStackTrace(); 82 } 83 84 85 86 87 88 89

66 魔法地圖建置 6. 功能清單功能描述 Android Web Service 3 select.php
backgroundService.php Require 登入後提供兩個按鈕功能選單，並啟動 Background Service 來不斷更新當前位置資訊 (當觸發 Location Change 事件後作更新) 2 simid response lat Web Service lng JSON GET updateLocation.php 更新該 simid 用戶目前所處經緯度位置 Response

67 魔法地圖建置 6-1. 更新用戶位置資訊 Service updateLocation.php 1 2 3 4 5 6 7 8 9 10
if (isset($_GET['simid']) && isset($_GET['lat']) && isset($_GET['lng'])) { 3 { 4 $simid = mysql_real_escape_string($_GET['simid']); 5 $lat = mysql_real_escape_string($_GET['lat']); 6 $lng = mysql_real_escape_string($_GET['lng']); 7 //透過 GET 代入 simid (SIM Card ID) 與 lat, lng (經緯度)參數 8 include("../connect.php"); 9 $sql = "Update user SET lat = '$lat',lng = '$lng' WHERE simid = '$simid'"; 10 11

68 魔法地圖建置 12 $result = mysql_query($sql, $link) or die("oops"); 13 //指定查詢 $simid 是否有註冊紀錄，若回傳資料筆數為 0 則表示未註冊 1 則已註冊 14 15 if($result) 16 { 17 $data['responese'] = 'success'; 18 echo json_encode($data); 19 } 20 21 22 23 24

69 魔法地圖建置 6-2. 功能選單 Layout select.xml 1 2 3 4 5 6 7 8 9 10 11
<RelativeLayout xmlns:android=" 2 3 android:layout_width="match_parent" 4 android:layout_height="match_parent" 5 android:orientation="vertical" > 6 <Button 7 8 android:layout_width="wrap_content" 9 android:layout_height="wrap_content" 10 android:layout_alignParentLeft="true" 11 android:layout_alignParentTop="true"

70 魔法地圖建置 12 android:layout_marginLeft="105dp" 13 android:layout_marginTop="68dp" 14 android:text="朋友清單" /> 15 <Button 16 17 android:layout_width="wrap_content" 18 android:layout_height="wrap_content" 19 20 21 22 android:layout_marginTop="131dp" 23 android:text="活動" /> 24 </RelativeLayout>

71 魔法地圖建置 6-3. Activity 註冊 AndroidManifest.xml 1 3 2

72 魔法地圖建置 6-3. Activity 註冊 新增一組 Activity

73 將新增的 Activity 選取對應的程式位置
魔法地圖建置 6-3. Activity 註冊 1 將新增的 Activity 選取對應的程式位置 ※此後新增一個 Activity，皆需要執行此註冊動作

74 魔法地圖建置 6-4.功能選單 select.java 1 2 3 4 5 6 7 8 9 Button friend; 10
import android.app.Activity; 2 import android.content.Intent; 3 import android.os.Bundle; 4 import android.view.View; 5 import android.view.View.OnClickListener; 6 import android.widget.Button; 7 8 public class select extends Activity { 9 Button friend; 10 Button activity; 11 打開 select.java

75 魔法地圖建置 12 protected void onCreate(Bundle savedInstanceState) { 13 super.onCreate(savedInstanceState); 14 setContentView(R.layout.select); 15 findView(); 16 //前置先與 Layout 元件作連結 17 setListener(); 18 //設置觸發事件 19 } 20 public void findView() { 21 friend = (Button) findViewById(R.id.button1); 22 activity = (Button) findViewById(R.id.button2); 23 24

76 魔法地圖建置 25 public void setListener(){ 26 activity.setOnClickListener(new OnClickListener() { 27 public void onClick(View v) { 28 Intent intent = new Intent(); 29 intent.setClass(select.this, activity.class); 30 startActivity(intent); 31 } 32 }); 33 //設置觸發點擊活動按鈕事件即轉跳到活動功能清單 34 friend.setOnClickListener(new OnClickListener() { 35 36 37 intent.setClass(select.this, friend_list.class);

77 魔法地圖建置 38 39 40 41 42 43 44 45 46 47 48 49 50 startActivity(intent); }
}); 41 42 //設置觸發點擊活動按鈕事件即轉跳到朋友清單 43 protected void onResume() { 44 super.onResume(); 45 Intent intent = new Intent(this,backgroundService.class); 46 startService(intent); 47 //啟動更新用戶位置的 Background Service 48 49 50

78 魔法地圖建置 6-5. Background Service AndroidManifest.xml 3 1 2

79 魔法地圖建置 6-5. Background Service 新增一組 Service

80 將 Service 設定給 backgroundService 物件
魔法地圖建置 6-5. Background Service 1 將 Service 設定給 backgroundService 物件

81 打開 backgroundService.java
魔法地圖建置 6-5. Background Service backgroundService.java 1 import org.apache.http.HttpEntity; 2 import org.apache.http.HttpResponse; 3 import org.apache.http.client.HttpClient; 4 import org.apache.http.client.methods.HttpGet; 5 import org.apache.http.impl.client.DefaultHttpClient; 6 import org.apache.http.util.EntityUtils; 7 import android.app.Service; 8 import android.content.Context; 9 import android.content.Intent; 10 import android.location.Criteria; 11 import android.location.Location; 打開 backgroundService.java

82 魔法地圖建置 12 import android.location.LocationListener; 13 import android.location.LocationManager; 14 import android.os.Bundle; 15 import android.os.IBinder; 16 17 public class backgroundService extends Service { 18 private Location locationInfo; 19 public void onCreate() { 20 LocationManager locationManager = 21 (LocationManager) getSystemService(Context.LOCATION_SERVICE); 22 String bestProvider = locationManager.getBestProvider(new Criteria(), true); 23 //初始化 locationManager 並取得最佳定位提供者 24

83 魔法地圖建置 25 26 27 28 29 30 31 32 33 34 35 36 37 locationManager.
requestLocationUpdates(bestProvider, 10000, 1, locationListener); 27 //定位更新(bestProvider ,時間間隔10000ms ,距離間隔1m ,監聽物件) 28 super.onCreate(); 29 } 30 31 public IBinder onBind(Intent arg0) { 32 return null; 33 34 35 private void updateLoaction() { 36 String url = value.service + "updateLocation.php?simid=" + value.simid 37 + "&lat=" + locationInfo.getLatitude() + "&lng="

84 魔法地圖建置 38 + locationInfo.getLongitude(); 39 HttpGet get = new HttpGet(url); 40 try { 41 HttpClient client = new DefaultHttpClient(); 42 HttpResponse response = client.execute(get); 43 HttpEntity resEntity = response.getEntity(); 44 String result = EntityUtils.toString(resEntity); 45 } catch (Exception e) { 46 } 47 48 49 private LocationListener locationListener = new LocationListener() { 50 public void onLocationChanged(Location location) {

85 魔法地圖建置 51 locationInfo = location; 52 if (location != null) { 53 Thread theard = new Thread() { 54 public void run() { 55 updateLoaction(); 56 /* 當觸發LocationChanged事件，即呼叫 updateLocation() 更新最新經緯度到 57 Server 上 */ 58 } 59 }; 60 theard.start(); 61 62 63

86 魔法地圖建置 64 public void onProviderDisabled(String arg0) { 65 } 66 67 public void onProviderEnabled(String arg0) { 68 69 70 public void onStatusChanged(String arg0, int arg1, Bundle arg2) { 71 72 }; 73 74 75 private void updateLoaction() { 76 String url = value.service + "updateLocation.php?simid="

87 魔法地圖建置 77 + value.simid + "&lat=" + locationInfo.getLatitude() 78 + "&lng=" + locationInfo.getLongitude(); 79 80 HttpGet get = new HttpGet(url); 81 try { 82 HttpClient client = new DefaultHttpClient(); 83 HttpResponse response = client.execute(get); 84 HttpEntity resEntity = response.getEntity(); 85 String result = EntityUtils.toString(resEntity); 86 } catch (Exception e) { 87 } 88 89

88 魔法地圖建置 7. 用戶清單功能描述 Android Web Service friend_list.java 4 Require
列出所有用戶清單，此區目前僅列出所有註冊用戶的名稱 simid name none Web Service JSON GET user.php 查詢出所有用戶的名稱清單 Response

89 魔法地圖建置 7-1. 查詢所有用戶資訊 Service user.php 1 2 3 4 5 6 7 8 9 10 11
include("../connect.php"); 2 $sql = "SELECT simid,name FROM user"; 3 $result = mysql_query($sql, $link) or die("oops"); 4 //查詢所有使用者 5 $data = array(); 6 while($row = mysql_fetch_array($result,MYSQL_ASSOC)){ 7 array_push($data,$row); 8 //將所有查詢出來的資料放入 $data 陣列當中 9 } 10 echo json_encode($data); 11 //透過 json 來制定格式傳遞資料

90 魔法地圖建置 7-2.用戶清單功能 Layout friend_list.xml 1 2 3 4 5 6 7 8 9 10 11
<?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmlns:android=" 3 android:layout_width="match_parent" 4 android:layout_height="match_parent" 5 android:orientation="vertical" > 6 <ListView 7 8 9 android:layout_height="wrap_content" > 10 </ListView> 11 </LinearLayout>

91 魔法地圖建置 7-3.用戶清單功能 friend_list.java 1 2 3 4 5 6 7 8 9 10 11
import org.apache.http.HttpEntity; 2 import org.apache.http.HttpResponse; 3 import org.apache.http.client.HttpClient; 4 import org.apache.http.client.methods.HttpGet; 5 import org.apache.http.impl.client.DefaultHttpClient; 6 import org.apache.http.util.EntityUtils; 7 import org.json.JSONArray; 8 import org.json.JSONException; 9 import org.json.JSONObject; 10 import android.app.Activity; 11 import android.os.Bundle; 打開 friend_list.java

92 魔法地圖建置 12 import android.os.Handler; 13 import android.os.Message; 14 import android.util.Log; 15 import android.widget.ArrayAdapter; 16 import android.widget.ListView; 17 18 public class friend_list extends Activity { 19 ListView listView; 20 21 protected void onCreate(Bundle savedInstanceState) { 22 super.onCreate(savedInstanceState); 23 setContentView(R.layout.friend_list); 24 findView();

93 魔法地圖建置 25 26 27 28 29 30 31 32 33 34 35 36 37 //前置先與 Layout 元件作連結
FriendList fl = new FriendList(); 27 fl.start(); 28 //執行 fl 執行緒 來向 Service 請求所有使用者的資料 29 } 30 31 public void findView() { 32 listView = (ListView) findViewById(R.id.listView1); 33 34 35 class FriendList extends Thread { 36 public void run() { 37 super.run();

94 魔法地圖建置 38 try { 39 HttpClient client = new DefaultHttpClient(); 40 String url = value.service + "user.php"; 41 HttpGet get = new HttpGet(url); 42 HttpResponse response = client.execute(get); 43 HttpEntity resEntity = response.getEntity(); 44 String result = EntityUtils.toString(resEntity); 45 46 Bundle countBundle = new Bundle(); 47 countBundle.putString("list", result); 48 //打包朋友清單相關資料，並命名為 list 49 Message msg = new Message(); 50 msg.setData(countBundle);

95 魔法地圖建置 51 mHandler.sendMessage(msg); 52 //將打包資料方置放在 Message 物件當中，並傳送給 handler 53 } catch (Exception e) { 54 e.printStackTrace(); 55 } 56 57 58 59 private Handler mHandler = new Handler() { 60 public void handleMessage(Message msg) { 61 super.handleMessage(msg); 62 setList(msg.getData().getString("list")); 63 /*

96 魔法地圖建置 64 透過 handler 來請 main thread 處理 setList 65 sub thread 不能值接對 UI 作控制，必須透過 handler 來請主程序作 66 */ 67 } 68 }; 69 70 public void setList(String list) { 71 JSONArray json; 72 try { 73 json = new JSONArray(list); 74 String[] values = new String[json.length()]; 75 for (int i = 0; i < json.length(); i++) { 76 JSONObject jsonData = new JSONObject(json.get(i).toString());

97 魔法地圖建置 77 values[i] = jsonData.getString("name"); 78 } 79 listView.setAdapter(new ArrayAdapter<String>(this, 80 android.R.layout.simple_list_item_1, values)); 81 //將字串 list 回傳的 JSON 透過解析後存到 values 陣列並傳給 listView 作清單的顯示 82 } catch (JSONException e) { 83 e.printStackTrace(); 84 85 86 87 88 89

98 魔法地圖建置 8. 活動清單功能描述 Android Web Service activity.java 5 Require aid
列出所有活動清單，並增加一個建立活動的按鈕 aid title simid Web Service JSON GET activity.php 查詢出所有活動的名稱與活動編號 Response

99 魔法地圖建置 8-1. 參與活動清單 Service activity.php 1 2 3 4 5 6 7 8 9 10 11
if (isset($_GET['simid'])) { 2 $simid = mysql_real_escape_string($_GET['simid']); 3 //透過 GET 代入 simid (SIM Card ID) 參數 4 include("../connect.php"); 5 $sql = "SELECT title,c.aid FROM `join` c JOIN `activity` a on c.aid = a.aid 6 WHERE c.simid = '$simid'"; 7 $result = mysql_query($sql, $link) or die("oops"); 8 /* JOIN join 與 activity 兩張資料表， 9 並篩選出 $simid 用戶有參與的活動 title (活動名稱) 與 aid (活動編號) 10 */ 11 $data = array();

100 魔法地圖建置 12 while($row = mysql_fetch_array($result,MYSQL_ASSOC)){ 13 array_push($data,$row); 14 //將所有查詢出來的資料放入 $data 陣列當中 15 } 16 echo json_encode($data); 17 //透過 json 來制定格式傳遞資料 18 19 20 21 22 23 24

101 魔法地圖建置 8-2.活動清單功能 Layout add_activity.xml 1 2 3 4 5 6 7 8 9 10 11
<?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmlns:android=" 3 android:layout_width="match_parent" 4 android:layout_height="match_parent" 5 android:orientation="vertical" > 6 7 <Button 8 9 10 android:layout_height="wrap_content" 11 android:text="建立活動" />

102 魔法地圖建置 12 <ListView 13 14 android:layout_width="match_parent" 15 android:layout_height="wrap_content" > 16 </ListView> 17 18 </LinearLayout> 19 20 21 22 23 24

103 魔法地圖建置 8-3.活動清單功能 activity.java 1 2 3 4 5 6 7 8 9 10 11
import org.apache.http.HttpEntity; 2 import org.apache.http.HttpResponse; 3 import org.apache.http.client.HttpClient; 4 import org.apache.http.client.methods.HttpGet; 5 import org.apache.http.impl.client.DefaultHttpClient; 6 import org.apache.http.util.EntityUtils; 7 import org.json.JSONArray; 8 import org.json.JSONException; 9 import org.json.JSONObject; 10 import android.app.Activity; 11 import android.content.Intent; 打開 activity.java

104 魔法地圖建置 12 import android.os.Bundle; 13 import android.os.Handler; 14 import android.os.Message; 15 import android.util.Log; 16 import android.view.View; 17 import android.view.View.OnClickListener; 18 import android.widget.AdapterView; 19 import android.widget.ArrayAdapter; 20 import android.widget.Button; 21 import android.widget.ListView; 22 import android.widget.AdapterView.OnItemClickListener; 23 24

105 魔法地圖建置 25 public class activity extends Activity { 26 ListView listView; 27 Button button; 28 String actionList[]; 29 protected void onCreate(Bundle savedInstanceState) { 30 super.onCreate(savedInstanceState); 31 setContentView(R.layout.add_activity); 32 findView(); 33 //前置先與 Layout 元件作連結 34 setListener(); 35 //設置觸發事件 36 ActionList al = new ActionList(); 37 al.start();

106 魔法地圖建置 38 } 39 40 public void findView() { 41 listView = (ListView) findViewById(R.id.listView1); 42 button = (Button) findViewById(R.id.button1); 43 44 45 public void setListener(){ 46 button.setOnClickListener(new OnClickListener() { 47 public void onClick(View v) { 48 Intent intent = new Intent(); 49 intent.setClass(activity.this, activity_map.class); 50 startActivity(intent);

107 魔法地圖建置 51 52 53 54 55 56 57 58 59 60 61 62 63 //觸發按鈕點擊事件後，轉跳到新增活動地圖頁面
} 53 }); 54 55 listView.setOnItemClickListener(new OnItemClickListener() { 56 public void onItemClick(AdapterView<?> parent, View v, 57 int position, long id) { 58 Intent intent = new Intent(); 59 Bundle bundle = new Bundle(); 60 bundle.putString("aid", actionList[position]); 61 //預先設定傳遞打包資料 62 intent.putExtras(bundle); 63 intent.setClass(activity.this, Map.class);

108 魔法地圖建置 64 65 66 67 68 69 70 71 72 73 74 75 76 startActivity(intent);
//設定當觸發活動清單項目，轉跳到活動地圖功能頁面 66 } 67 }); 68 69 70 class ActionList extends Thread { 71 public void run() { 72 super.run(); 73 try { 74 HttpClient client = new DefaultHttpClient(); 75 String url = value.service + "activity.php?simid=" 76 + value.simid;

109 魔法地圖建置 77 HttpGet get = new HttpGet(url); 78 HttpResponse response = client.execute(get); 79 HttpEntity resEntity = response.getEntity(); 80 String result = EntityUtils.toString(resEntity); 81 Bundle countBundle = new Bundle(); 82 countBundle.putString("list", result); 83 //打包活動清單相關資料，並命名為 list 84 Message msg = new Message(); 85 msg.setData(countBundle); 86 mHandler.sendMessage(msg); 87 } catch (Exception e) { 88 e.printStackTrace(); 89 }

110 魔法地圖建置 90 } 91 92 93 private Handler mHandler = new Handler() { 94 public void handleMessage(Message msg) { 95 super.handleMessage(msg); 96 setList(msg.getData().getString("list")); 97 //透過 handler 來呼叫 setList() 傳送清單內容與更新活動清單 98 99 }; 100 101 public void setList(String list) { 102 JSONArray json;

111 魔法地圖建置 103 try { 104 json = new JSONArray(list); 105 String[] values = new String[json.length()]; 106 actionList = new String[json.length()]; 107 108 for (int i = 0; i < json.length(); i++) { 109 JSONObject jsonData = new JSONObject(json.get(i).toString()); 110 values[i] = jsonData.getString("title"); 111 actionList[i] = jsonData.getString("aid"); 112 } 113 114 //Json 回傳 title(活動標題) 與 aid(活動ID) 的資料，分別使用陣列來承接 115

112 魔法地圖建置 116 listView.setAdapter(new ArrayAdapter<String>(this, 117 android.R.layout.simple_list_item_1, values)); 118 } catch (JSONException e) { 119 e.printStackTrace(); 120 } 121 122 123 124 125 126 127 128

113 魔法地圖建置 9. 建立活動功能描述 Android Web Service 6 7 activity_map.java
activity_title.java Require 設定活動標題，並列出好友選單透過勾選方式來加入參與人，且透過選取地圖位置來設定活動位置 title lat lng friend[simid] response aid Web Service JSON addActivity.php GET 建立一筆新活動，設定活動名稱與位置，並可記錄所有參與人 Response

114 魔法地圖建置 9-1. 參與活動清單 Service addActivity.php 1 2 3 4 5 6 7 8 9 10 11
if (isset($_GET['title']) && isset($_GET['lat']) && 2 isset($_GET['lng']) && isset($_GET['friend'])) { 3 $title = mysql_real_escape_string($_GET['title']); 4 $lat = mysql_real_escape_string($_GET['lat']); 5 $lng = mysql_real_escape_string($_GET['lng']); 6 $friend = mysql_real_escape_string($_GET['friend']); 7 //透過 GET 代入 title (活動名稱) lat, lng (經緯度) friend (參與人) 參數 8 $addFriends = explode(','$friend); //透過 explode 作字串的分割 9 include("../connect.php"); 10 $sql = "INSERT INTO activity(title,lat,lng) VALUES('$title','$lat','$lng')"; 11 $result = mysql_query($sql, $link) or die("oops");

115 魔法地圖建置 12 //先建立出一筆新活動，並設定 title (活動名稱) lat, lng (經緯度) 13 $aid = mysql_insert_id(); 14 //因 aid 為自動編號，故需透過 mysql_insert_id 來取得產生之活動編號 15 for($i=0;$i<count($addFriends);$i++) { 16 $sql = "INSERT INTO `join`(simid,aid) VALUES('$addFriends[$i]','$aid')"; 17 $result = mysql_query($sql, $link) or die("oops"); 18 //將所有參與人ID與對應活動編號一筆筆新增到 `join` 資料表當中 19 } 20 if($result) { 21 $data['responese'] = 'success'; 22 echo json_encode($data); 23 24

116 魔法地圖建置 9-2.活動地圖打點功能 Layout activity_map.xml 1 2 3 4 5 6 7 8 9 10 11
<RelativeLayout xmlns:android=" 2 xmlns:tools=" 3 android:layout_width="match_parent" 4 android:layout_height="match_parent" 5 6 7 8 9 tools:context=".MainActivity" > 10 11 <fragment

117 魔法地圖建置 12 13 14 15 16 17 18 19 20 21 22 23 24 android:id="@+id/map"
android:layout_width="match_parent" 14 android:layout_height="match_parent" 15 class="com.google.android.gms.maps.MapFragment" /> 16 <Button 17 18 android:layout_width="wrap_content" 19 android:layout_height="wrap_content" 20 android:layout_alignParentBottom="true" 21 android:layout_centerHorizontal="true" 22 android:layout_marginBottom="14dp" 23 android:text="下一頁" /> 24 </RelativeLayout>

118 魔法地圖建置 9-3.活動地圖打點功能 activity_map.java 1 2 3 4 5 6 7 8 9 10 11
import android.app.Activity; 2 import android.content.Intent; 3 import android.location.Location; 4 import android.os.Bundle; 5 import android.view.View; 6 import android.view.View.OnClickListener; 7 import android.widget.Button; 8 import android.widget.Toast; 9 import com.google.android.gms.maps.CameraUpdateFactory; 10 import com.google.android.gms.maps.GoogleMap; 11 import com.google.android.gms.maps.MapFragment; 打開 activity_map.java

119 魔法地圖建置 12 import com.google.android.gms.maps.GoogleMap.OnMapClickListener; 13 import com.google.android.gms.maps.GoogleMap.OnMarkerClickListener; 14 import com.google.android.gms.maps.model.LatLng; 15 import com.google.android.gms.maps.model.Marker; 16 import com.google.android.gms.maps.model.MarkerOptions; 17 18 public class activity_map extends Activity implements OnMarkerClickListener, 19 OnMapClickListener { 20 Location location; 21 GoogleMap mMap; 22 LatLng latlng = new LatLng( , ); 23 MarkerOptions mMarkOption; 24 Button next;

120 魔法地圖建置 25 String lat, lng; 26 27 protected void onCreate(Bundle savedInstanceState) { 28 super.onCreate(savedInstanceState); 29 setContentView(R.layout.activity_map); 30 findView(); 31 //前置先與 Layout 元件作連結 32 setMap(); 33 //設置地圖 34 setListener(); 35 //設置觸發事件 36 } 37

121 魔法地圖建置 38 39 40 41 42 43 44 45 46 47 48 49 50 public void findView(){
next = (Button) findViewById(R.id.next); 40 mMap = ((MapFragment) getFragmentManager() 41 .findFragmentById(R.id.map)) .getMap(); 42 } 43 44 public void setMap(){ 45 mMap.moveCamera(CameraUpdateFactory 46 .newLatLngZoom(latlng, 15.0f)); 47 mMap.setOnMapClickListener(this); 48 49 50 public void setListener() {

122 魔法地圖建置 51 next.setOnClickListener(new OnClickListener() { 52 public void onClick(View v) { 53 if (lat.length() == 0 && lng.length() == 0) { 54 Toast.makeText(activity_map.this, "請點選活動位置", 55 Toast.LENGTH_LONG).show(); 56 } else { 57 Intent intent = new Intent(); 58 intent.setClass(activity_map.this, activity_title.class); 59 Bundle bundle = new Bundle(); 60 bundle.putString("lat", lat + ""); 61 bundle.putString("lng", lng + ""); 62 intent.putExtras(bundle); 63

123 魔法地圖建置 64 65 66 67 68 69 70 71 72 73 74 75 76 startActivity(intent);
finish(); 67 } 68 69 }); 70 71 72 public boolean onMarkerClick(Marker marker) { 73 return false; 74 75 76

124 魔法地圖建置 77 public void onMapClick(LatLng point) { 78 mMap.clear(); 79 MarkerOptions lonlng = new MarkerOptions() 80 .position(point).title(point.toString()); 81 mMap.addMarker(lonlng); 82 lat = point.latitude + ""; 83 lng = point.longitude + ""; 84 } 85 86 87 88 89

125 魔法地圖建置 9-4.活動新增功能 Layout activity_title.xml 1 2 3 4 5 6 7 8 9 10 11
<?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmlns:android=" 3 android:layout_width="match_parent" 4 android:layout_height="match_parent" 5 android:orientation="vertical" > 6 7 <Button 8 9 10 android:layout_height="wrap_content" 11 android:layout_alignParentBottom="true"

126 魔法地圖建置 12 android:layout_alignParentLeft="true" 13 android:layout_alignParentRight="true" 14 android:text="下一頁" /> 15 16 <EditText 17 18 android:layout_width="wrap_content" 19 android:layout_height="wrap_content" 20 android:layout_alignParentTop="true" 21 android:layout_centerHorizontal="true" 22 android:ems="10" 23 android:gravity="center" 24 android:text="活動名稱" >

127 魔法地圖建置 25 26 27 28 29 30 31 32 33 34 35 36 37 <requestFocus />
</EditText> 27 28 <ListView 29 30 android:layout_width="match_parent" 31 android:layout_height="wrap_content" 32 33 android:layout_alignParentLeft="true" 34 > 35 </ListView> 36 </RelativeLayout> 37

128 打開 activity_title.java
魔法地圖建置 9-5.活動新增功能 activity_title.java 1 import java.util.ArrayList; 2 import org.apache.http.HttpEntity; 3 import org.apache.http.HttpResponse; 4 import org.apache.http.client.HttpClient; 5 import org.apache.http.client.methods.HttpGet; 6 import org.apache.http.impl.client.DefaultHttpClient; 7 import org.apache.http.util.EntityUtils; 8 import org.json.JSONArray; 9 import org.json.JSONException; 10 import org.json.JSONObject; 11 import android.app.Activity; 打開 activity_title.java

129 魔法地圖建置 12 import android.content.Intent; 13 import android.os.Bundle; 14 import android.os.Handler; 15 import android.os.Message; 16 import android.util.Log; 17 import android.view.View; 18 import android.view.View.OnClickListener; 19 import android.widget.AdapterView; 20 import android.widget.AdapterView.OnItemClickListener; 21 import android.widget.ArrayAdapter; 22 import android.widget.Button; 23 import android.widget.EditText; 24 import android.widget.ListView;

130 魔法地圖建置 25 public class activity_title extends Activity { 26 EditText editText; 27 Button button; 28 ListView listView; 29 ArrayList<Integer> checkedList; 30 String lat = "", lng = ""; 31 String[] simidList; 32 33 protected void onCreate(Bundle savedInstanceState) { 34 super.onCreate(savedInstanceState); 35 setContentView(R.layout.activity_title); 36 getValue(); 37 //取得前頁 Intent 的相關參數

131 魔法地圖建置 38 findView(); 39 //前置先與 Layout 元件作連結 40 setListener(); 41 //設置觸發按鈕事件 42 FriendList fl = new FriendList(); 43 fl.start(); 44 //執行FriendList 45 } 46 47 public void getValue() { 48 Bundle bundle = new Bundle(); 49 bundle = this.getIntent().getExtras(); 50 lat = bundle.getString("lat");

132 魔法地圖建置 51 lng = bundle.getString("lng"); 52 //設定活動地圖標記位置經緯度 53 } 54 55 public void findView() { 56 listView = (ListView) findViewById(R.id.listView1); 57 button = (Button) findViewById(R.id.button1); 58 editText = (EditText) findViewById(R.id.editText1); 59 checkedList = new ArrayList<Integer>(); 60 61 62 public void setListener() { 63 button.setOnClickListener(new OnClickListener() {

133 魔法地圖建置 64 public void onClick(View v) { 65 AddAction AA = new AddAction(); 66 AA.start(); 67 } 68 }); 69 //設定觸發點擊事件 "下一頁" 的按鈕，會執行 AddAction Thread 70 71 listView.setOnItemClickListener(new OnItemClickListener() { 72 public void onItemClick(AdapterView<?> parent, View v, 73 int position, long id) { 74 if (listView.getCheckedItemPositions().get(position)) { 75 checkedList.add(position); 76 } else {

134 魔法地圖建置 77 checkedList.remove(new Integer(position)); 78 } 79 80 }); 81 /* 設定觸發點擊事件好友清單的項目(Item)，會加入參與人陣列 82 (checkedList)，打勾則加入清單資料，取消打勾則移除陣列清單資料 */ 83 84 editText.setOnClickListener(new OnClickListener() { 85 public void onClick(View v) { 86 editText.setText(""); 87 88 89 //設定觸發點擊文字輸入(Title 文字欄位)，即清空文字內容(預設為"活動名稱")

135 魔法地圖建置 90 } 91 92 class FriendList extends Thread { 93 public void run() { 94 super.run(); 95 try { 96 HttpClient client = new DefaultHttpClient(); 97 String url = value.service + "user.php"; 98 HttpGet get = new HttpGet(url); 99 HttpResponse response = client.execute(get); 100 HttpEntity resEntity = response.getEntity(); 101 String result = EntityUtils.toString(resEntity); 102 Bundle countBundle = new Bundle();

136 魔法地圖建置 103 countBundle.putString("list", result); 104 Message msg = new Message(); 105 msg.setData(countBundle); 106 mHandler.sendMessage(msg); 107 } catch (Exception e) { 108 e.printStackTrace(); 109 } 110 111 112 113 private Handler mHandler = new Handler(){ 114 public void handleMessage(Message msg) { 115 super.handleMessage(msg);

137 魔法地圖建置 116 setList(msg.getData().getString("list")); 117 } 118 }; 119 120 public void setList(String list) { 121 JSONArray json; 122 try { 123 json = new JSONArray(list); 124 String[] values = new String[json.length()]; 125 simidList = new String[json.length()]; 126 for (int i = 0; i < json.length(); i++) { 127 JSONObject jsonData = new JSONObject(json.get(i).toString()); 128 values[i] = jsonData.getString("name");

138 魔法地圖建置 129 simidList[i] = jsonData.getString("simid"); 130 } 131 // 設定ListView 為 複選模式 132 listView.setChoiceMode(ListView.CHOICE_MODE_MULTIPLE); 133 listView.setAdapter(new ArrayAdapter<String>(this, 134 android.R.layout.simple_list_item_multiple_choice, values)); 135 } catch (JSONException e) { 136 e.printStackTrace(); 137 138 139 140 141

139 魔法地圖建置 142 class AddAction extends Thread { 143 public void run() { 144 super.run(); 145 String list = ""; 146 for (int i = 0; i < checkedList.size(); i++) { 147 if(checkedList.size()-1 == i) 148 { 149 list += simidList[checkedList.get(i)]; 150 }else 151 152 list += simidList[checkedList.get(i)] + ","; 153 } 154

140 魔法地圖建置 155 try { 156 HttpClient client = new DefaultHttpClient(); 157 String url = value.service + "addActivity.php?title=" 158 + editText.getText().toString() + "&lat=" + lat 159 + "&lng=" + lng + "&friend=" + list; 160 HttpGet get = new HttpGet(url); 161 HttpResponse response = client.execute(get); 162 HttpEntity resEntity = response.getEntity(); 163 String result = EntityUtils.toString(resEntity); 164 Bundle countBundle = new Bundle(); 165 166 countBundle.putString("list", result); 167 Message msg = new Message(); 168 msg.setData(countBundle);

141 魔法地圖建置 169 mHandler2.sendMessage(msg); 170 } catch (Exception e) { 171 e.printStackTrace(); 172 } 173 174 175 176 private Handler mHandler2 = new Handler(){ 177 public void handleMessage(Message msg) { 178 super.handleMessage(msg); 179 changePage(msg.getData().getString("list")); 180 181 };

142 魔法地圖建置 182 public void changePage(String list){ 183 JSONArray json; 184 try { 185 JSONObject jsonObj = new JSONObject(list); 186 String aid = jsonObj.getString("aid"); 187 Intent intent = new Intent(); 188 Bundle bundle = new Bundle(); 189 bundle.putString("aid", aid); 190 intent.putExtras(bundle); 191 intent.setClass(activity_title.this, Map.class); 192 startActivity(intent); 193 finish(); 194 /* 完成頁面轉跳後，即關閉此Activity，

143 魔法地圖建置 195 目的在於不讓使用者返回上一頁(新增活動功能頁面) */ 196 197 } catch (JSONException e) { 198 e.printStackTrace(); 199 } 200 201 202 203 204 205 206 207

144 魔法地圖建置 10. 魔法地圖功能描述 Android Web Service 9 map.java Require name lat
在地圖上顯示活動位置與所有參與人目前位置資訊 name lat lng aid Web Service GET JSON joinUser.php 查詢此活動以及所有參與人的相關位置資訊 Response

145 魔法地圖建置 10-1. 活動參與人資訊 Service joinUser.php 1 2 3 4 5 6 7 8 9 10 11
if (isset($_GET['aid'])) { 2 $aid = mysql_real_escape_string($_GET['aid']); 3 //透過 GET 代入 aid (活動編號) 參數 4 include("../connect.php"); 5 $sql = "SELECT name,lat,lng FROM `join` c JOIN `user` u on u.simid = c.simid 6 WHERE c.aid = '$aid'"; 7 $result = mysql_query($sql, $link) or die("oops"); 8 /* JOIN join 與 user 兩張資料表， 9 並篩選出所有參與 $aid 活動中參與人的 name (名稱) 與 lat, lng (經緯度) */ 10 $data = array(); 11 while($row = mysql_fetch_array($result,MYSQL_ASSOC)){

146 魔法地圖建置 12 13 14 15 16 17 18 19 20 21 22 23 24 array_push($data,$row);
} 15 $str = "SELECT * FROM activity WHERE aid = '$aid'"; 16 $result = mysql_query($str, $link) or die("oops"); 17 $row = mysql_fetch_array($result,MYSQL_ASSOC); 18 $temp['name'] = $row['title']; 19 $temp['lat'] = $row['lat']; 20 $temp['lng'] = $row['lng']; 21 array_push($data,$temp); 22 //將活動地點一併加入到陣列當中 23 echo json_encode($data); 24 } //透過 json 來制定格式傳遞資料

147 魔法地圖建置 10-2.魔法地圖功能 Layout map.xml 1 2 3 4 5 6 7 8 9 10 11
<?xml version="1.0" encoding="utf-8"?> 2 <fragment xmlns:android=" 3 4 android:layout_width="match_parent" 5 android:layout_height="match_parent" 6 class="com.google.android.gms.maps.MapFragment"/> 7 8 9 10 11

148 魔法地圖建置 10-3.魔法地圖功能 map.java 1 2 3 4 5 6 7 8 9 10 11 打開 map.java
import org.apache.http.HttpEntity; 2 import org.apache.http.HttpResponse; 3 import org.apache.http.client.HttpClient; 4 import org.apache.http.client.methods.HttpGet; 5 import org.apache.http.impl.client.DefaultHttpClient; 6 import org.apache.http.util.EntityUtils; 7 import org.json.JSONArray; 8 import org.json.JSONException; 9 import org.json.JSONObject; 10 import android.app.Activity; 11 import android.location.Location; 打開 map.java

149 魔法地圖建置 12 import android.os.Bundle; 13 import android.os.Handler; 14 import android.os.Message; 15 import android.util.Log; 16 import com.google.android.gms.maps.CameraUpdateFactory; 17 import com.google.android.gms.maps.GoogleMap; 18 import com.google.android.gms.maps.MapFragment; 19 import com.google.android.gms.maps.model.LatLng; 20 import com.google.android.gms.maps.model.Marker; 21 import com.google.android.gms.maps.model.MarkerOptions; 22 23 public class Map extends Activity { 24 Location location;

150 魔法地圖建置 25 26 27 28 29 30 31 32 33 34 35 36 37 GoogleMap mMap;
LatLng latlng = new LatLng( , ); 27 Marker myMarker; 28 MarkerOptions mMarkOption; 29 String aid = ""; 30 boolean markerClicked; 31 32 protected void onCreate(Bundle savedInstanceState) { 33 super.onCreate(savedInstanceState); 34 setContentView(R.layout.map); 35 findView(); 36 //前置先與 Layout 元件作連結 37 getValue();

151 魔法地圖建置 38 39 40 41 42 43 44 45 46 47 48 49 50 //取得前頁 Intent 的相關參數
setMap(); 40 //設置地圖 41 SetMarker Stm = new SetMarker(); 42 Stm.start(); 43 //啟用 Thread 來執行 Service 44 } 45 46 public void findView() { 47 mMap = ((MapFragment) getFragmentManager().findFragmentById(R.id.map)) 48 .getMap(); 49 50

152 魔法地圖建置 51 52 53 54 55 56 57 58 59 60 61 62 63 public void getValue() {
Bundle bundle = new Bundle(); 53 bundle = this.getIntent().getExtras(); 54 aid = bundle.getString("aid"); 55 //設定活動地圖標記位置經緯度 56 } 57 58 public void setMap(){ 59 mMap.moveCamera(CameraUpdateFactory.newLatLngZoom(latlng, 15.0f)); 60 //設置地圖 Camera 移動位置與縮放大小 61 62 63 class SetMarker extends Thread {

153 魔法地圖建置 64 65 66 67 68 69 70 71 72 73 74 75 76 public void run() {
super.run(); 66 try { 67 HttpClient client = new DefaultHttpClient(); 68 String url = value.service + "joinUser.php?aid=" + aid; 69 HttpGet get = new HttpGet(url); 70 HttpResponse response = client.execute(get); 71 HttpEntity resEntity = response.getEntity(); 72 String result = EntityUtils.toString(resEntity); 73 Bundle countBundle = new Bundle(); 74 countBundle.putString("list", result); 75 Message msg = new Message(); 76 msg.setData(countBundle);

154 魔法地圖建置 77 //將 Service 資料回傳並存放在 Message 當中 78 mHandler.sendMessage(msg); 79 //透過 Handler 來傳遞資料並更新UI(地圖標記) 80 } catch (Exception e) { 81 e.printStackTrace(); 82 } 83 84 85 86 private Handler mHandler = new Handler() { 87 public void handleMessage(Message msg) { 88 super.handleMessage(msg); 89 try {

155 魔法地圖建置 90 JSONArray jsonData = new JSONArray(msg.getData().getString("list")); 91 JSONObject jsonObject; 92 for (int i = 0; i < jsonData.length(); i++) { 93 jsonObject = jsonData.getJSONObject(i); 94 MarkerOptions markerOptions = new MarkerOptions(); 95 double lat = Double.parseDouble(jsonObject 96 .getString("lat")); 97 double lng = Double.parseDouble(jsonObject 98 .getString("lng")); 99 String title = jsonObject.getString("name"); 100 //解析並取出經緯度與名稱 101 LatLng latLng = new LatLng(lat, lng); 102 markerOptions.position(latLng);

156 魔法地圖建置 103 markerOptions.title(title); 104 mMap.addMarker(markerOptions); 105 //解析回傳的 JSON 資料，並將所有的經緯度標記在地圖上 106 } 107 } catch (JSONException e) { 108 e.printStackTrace(); 109 110 111 }; 112 113 114 115