投影片 1

Transcription

1 Chapter 11 Google 服務應用開發

2 Google 服務應用開發 Google 提供了許多免費服務, 例如搜尋引擎 Google Map Google 翻譯 Google 文件 Google 日曆 GMail Google Talk Youtube 等常見的服務,Google 擁有大量的資料以及對這些資料作分析的能力, 因此可以提供更多元的服務類型 在豐富的資源下將 Google 服務與 Android 的應用程式結合能讓使用者在使用上覺得更便利, 也將這些 Google 服務帶著走

3 Google Map 服務

4 Google Map API 金鑰 要開發 Google Map 服務相關應用程式服務之前, 必須先到 Google 網站上取得 Google Map 的開發金鑰 (API KEY), 才能夠使用 Google Map 所提供之服務, 否則就算程式能夠運作, 地圖也不會顯示出來 如下圖 :

5 Google Map API 金鑰 申請步驟 產生認證指紋 MD5: 進入命令提示字元, 將目錄切換至 C:\Program Files\Java\jdk1.6.0_17\bin 下, 如圖 , 此目錄會依使用者安裝 JDK 時的目錄不同 版本不同路徑也可能不同, 上述路徑為 JDK 預設安裝路徑, 在此目錄中有個 keytool.exe, 此為建立認證指紋 (MD5) 的工具, 在建立認證指紋之前, 需要 debug_keystore 路徑

6 Google Map API 金鑰 申請步驟 產生認證指紋 MD5: 開啟 Eclipse, 由上方的工具 Windows -> Preferences -> Android -> Build 中找 Default debug keystore 的路徑, 如圖 , 並將此路徑複製下來, 以範例而言, 路徑為 C:\Users\dreamilylife\.android\debug.keystore

7 Google Map API 金鑰 申請步驟 產生認證指紋 MD5: 接著回到 C:\Program Files\Java\jdk1.6.0_17\bin 目錄下面, 輸入下列指令 : keytool -list -alias androiddebugkey -keystore "debug_keystore 的路徑 " -storepass android - keypass android 上述 path_to_debug_keystore 為從 Eclipse 當中複製出來的 Default debug keystore 路徑, 故在本範例為 C:\Users\dreamilylife\.android\debug.keystore, 接著會產生認證指紋 (MD5), 如圖

8 Google Map API 金鑰 申請 API Key 接著進入 Google MAP API Key 申請頁面, 圖 :

9 Google Map API 金鑰 在畫面中有個 My certificate s MD5 fingerprint, 在後面欄位填上由 keytool 所得到的認證指紋碼並同意 Google 在網頁上列出的條款後點擊 Generate API Key 後, 即可產生 Android Maps API 金鑰, 如下圖 :

10 Google 地圖定位 - Google Map API 開發 Google Map 應用時, 在開啟專案時須選擇 Google APIs

11 Google 地圖定位 - Google Map API 開啟後可看到使用的 lib 會多一個 maps.jar

12 Google 地圖定位 - Google Map API 由於 Google Map API 必須額外加入, 故必須手動在 AndroidManifest.xml 中加入自訂的函式庫, 由於 Google Map 服務需存取網路, 故也要加入使用網路的權限, 修改如下 : <?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android=" package="ncu.bnlab.mapexample" android:versioncode="1" android:versionname="1.0"> <application android:icon="@drawable/icon" android:label="@string/app_name"> <activity android:name=".mapapiexample" android:label="@string/app_name"> <intent-filter> <action android:name="android.intent.action.main" /> <category android:name="android.intent.category.launcher" /> </intent-filter> </activity> <uses-library android:name="com.google.android.maps" /> </application> <uses-sdk android:minsdkversion="6" /> <uses-permission android:name="android.permission.internet"></uses-permission> </manifest>

13 Google 地圖定位 - Google Map API 透過 MapView 來使用 Google Map 服務, 此元件必須使用在 Google 上註冊的金鑰, 否則 Map 將無法顯示 在申請成功後除了得到金鑰之外, 網頁也提供一段 xml 代碼提供使用者使用 本範例將此段代碼放置 res/layout/main.xml 當中, 如下列程式碼 : <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <!-- 放置 MapView 以及 Map Api Key --> <com.google.android.maps.mapview android:layout_width="fill_parent" android:layout_height="fill_parent" android:apikey="01uynnmzdkjyctfxipb2n3h5ibu5jff4wv5ncgg" /> </LinearLayout>

14 Google 地圖定位 - Google Map API 除此之外, 在主程式部分也必須要將 Activity 改為 MapActivity: package ncu.bnlab.mapexample; import android.os.bundle; import com.google.android.maps.mapactivity; public class MapApiExample extends MapActivity { /** Called when the activity is first created. public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); protected boolean isroutedisplayed() { return false;

15 Google 地圖定位 - Google Map API 修改上述程式碼後, 即為最基本的 Google Map 應用服務, 程式結果如圖下 :

16 Google 地圖定位 - Google Map API 在 XML 當中的 MapView 可加入一項參數, 讓使用者可以與地圖作互動 : android:clickable="true" 若此值為 false, 則使用者無法利用觸控方式來移動視窗上的地圖

17 Google 地圖定位 - Google Map API 地圖不可缺少的一項功能為放大和縮小所看到的區域, 在此我們使用 ZoomControls 這個元件 接著修改上面基本 Map 範例, 加入將地圖放大及縮小的功能, 首先修改 main.xml 的排版, 程式碼如下 : 布局文件 (res/layout/main.xml): <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android=" android:orientation= vertical android:layout_width="fill_parent" android:layout_height= fill_parent > <com.google.android.maps.mapview android:id="@+id/mapview" android:layout_width="fill_parent" android:layout_height="fill_parent" android:clickable="true" android:apikey="01uynnmzdkjyctfxipb2n3h5ibu5jff4wv5ncgg" /> <!-- 此 LinearLayout 用來放置 Zoom --> <LinearLayout android:id="@+id/zoomview" android:layout_alignbottom="@id/mapview" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerhorizontal="true /> </RelativeLayout >

18 Google 地圖定位 - Google Map API MapApiExample.java public class MapApiExample extends MapActivity { /** Called when the activity is first created. public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.main); LinearLayout linearlayout; MapView mapview; ZoomControls myzoom; linearlayout = (LinearLayout) findviewbyid(r.id.zoomview); mapview = (MapView) findviewbyid(r.id.mapview); // 將 mapview 加上 ZoomControls 功能 myzoom = (ZoomControls) mapview.getzoomcontrols(); protected boolean isroutedisplayed() { // TODO Auto-generated method stub return false;

19 Google 地圖定位 - Google Map 範例結果如下 : API

20 Google 地圖標誌 在帄常使用 Google Map 中, 常常用到的一個功能就是在地圖上標記地點, 而要達到此功能要使用 com.google.android.maps.itemizedoverlay 類別, 此類別可讓使用者在地圖上放上標誌 有了放置標誌的功能後, 接下來是要指定放置的位置, 要達到此功能則要使用 com.google.android.maps.geopoint 類別來指定經緯度, 故使用上述兩個類別中的方法後, 就可以利用經緯度將自訂的標誌放上地圖

21 Google 地圖標誌 MapOverlay.java public class MapOverlay extends ItemizedOverlay<OverlayItem>{ private ArrayList<OverlayItem> glist = new ArrayList<OverlayItem>(); Drawable marker; public MapOverlay(Drawable defaultmarker) { super(defaultmarker); marker = defaultmarker; // 將 OverlayItem 加入 glist 中 public void addoverlayitem(overlayitem oitem){ glist.add(oitem); public void draw(canvas canvas, MapView mapview, boolean shadow) { super.draw(canvas, mapview, shadow); protected OverlayItem createitem(int arg0) { return public int size() { return glist.size();

22 Google 地圖標誌 MapApiExample02.java public class MapApiExample02 extends MapActivity public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.main); LinearLayout linearlayout; MapView mapview; ZoomControls mzoom; Drawable mdrawable; linearlayout = (LinearLayout) findviewbyid(r.id.zoomview); mapview = (MapView) findviewbyid(r.id.mapview); mzoom = (ZoomControls) mapview.getzoomcontrols(); linearlayout.addview(mzoom); mdrawable = this.getresources().getdrawable(r.drawable.icon); MapOverlay mapoverlay = new MapOverlay(mdrawable); // 加入一經緯度 GeoPoint addpoint = new GeoPoint( , ); OverlayItem overlayitem = new OverlayItem(addPoint, "", ""); mapoverlay.addoverlayitem(overlayitem); mapview.getoverlays().add(mapoverlay); // 依照 addpoint 設定之經緯度為中心 mapview.getcontroller().setcenter(addpoint); // 略

23 Google 地圖標誌 建立好 Overlay 類別後, 產生一個 MapOverlay 物件, 接著設定放置的位置 : GeoPoint addpoint = new GeoPoint( , ); 建立一個 addpoint 物件設定座標為中央大學的地理座標位置, 接著宣告 OverlayItem: OverlayItem overlayitem = new OverlayItem(addPoint, "", ""); 最後將定義好的 overlayitem 加入我們定義的 MapOverlay 中

24 範例結果如下 : Google 地圖標誌

25 Google Map 加入 GPS 定位 接著介紹如何加入 GPS 定位服務, 範例會依照當下 GPS 訊號將標誌產生放置在 Google Map 上, 所以當使用者移動時, 標誌圖案會跟著使用者移動, 程式碼如下 : public class MapApiExample03 extends MapActivity { private LocationManager locationmanager; private LocationListener locationlistener; LinearLayout linearlayout; MapView mapview; ZoomControls mzoom; Drawable public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.main); linearlayout = (LinearLayout) findviewbyid(r.id.zoomview); mapview = (MapView) findviewbyid(r.id.mapview); mzoom = (ZoomControls) mapview.getzoomcontrols(); linearlayout.addview(mzoom); mdrawable = this.getresources().getdrawable(r.drawable.icon); // 設定此經緯度為 Map 開啟時的中心位置 GeoPoint addpoint = new GeoPoint( , ); mapview.getcontroller().setcenter(addpoint); UpdateLocation();

26 Google Map 加入 GPS 定位 public void UpdateLocation() { locationmanager = (LocationManager) getsystemservice(context.location_service); // 設定 LocationListener, 當經緯度位置更改時則觸發此事件 locationlistener = new LocationListener() { public void onlocationchanged(location newlocation) { UpdateNewLocation(newLocation); ; locationmanager.requestlocationupdates(locationmanager.gps_provider, 0, 0, locationlistener); void UpdateNewLocation(Location newlocation) { List overlays = mapview.getoverlays(); // 移除舊的 overlay if ( overlays.size() > 0 ) { for (Iterator iterator = overlays.iterator(); iterator.hasnext();) { iterator.next(); iterator.remove(); // 取得經度 Double longitude = newlocation.getlongitude() * ; // 取得緯度 Double latitude = newlocation.getlatitude() * ;

27 Google Map 加入 GPS 定位 GeoPoint newpoint = new GeoPoint( longitude.intvalue(), latitude.intvalue()); MapOverlay overlay = new MapOverlay(mdrawable); OverlayItem overlayitem = new OverlayItem(newPoint, "", ""); overlay.addoverlayitem(overlayitem); mapview.getoverlays().add(overlay); // 移動位置到新的經緯度 mapview.getcontroller().animateto(newpoint); protected boolean isroutedisplayed() { // TODO Auto-generated method stub return false; 完整程式碼請參考光碟中 MapApiExample03.java

28 Google Map 加入 GPS 定位 範例結果如下 :

29 QR Code 二維條碼 - Google Chart API

30 QR Code 二維條碼 - Google Chart API QR Code 是一種很常用的 2D barcode,qr Code 可以儲存文字 網址或是電話號碼等, 接著介紹如何利用 Google Chart API 來產生 QR Code Google Chart API 利用網址的參數來產生相對應的 QR Code, 格式如下 : chl= 輸入之文字

31 QR Code 二維條碼 - Google Chart API 各參數意義如下 : cht=qr 代表要製作的是 QR Code chs=300x300 則是產生圖表的大小 chl= 則是將輸入的文字製作成 QR Code

32 QR Code 二維條碼 - Google Chart API 在範例中, 利用 URL 連線將要轉換成 QR Code 之文字傳給 Google Chart API 來幫我們產生相對應的 Code, 並利用 ImageView 將產生的結果顯示出

33 QR Code 二維條碼 - Google Chart API QRCodeExample01.java private Bitmap QRencoder(String input) { URL chartapi_url; try { // 建立 Google Chart Api 的連線, 將圖檔大小以及要轉換的文字放置 // 網址當中 chartapi_url = new URL(" de(input, "UTF-8")); URLConnection conn = chartapi_url.openconnection(); conn.connect(); InputStream is = conn.getinputstream(); BufferedInputStream bis = new BufferedInputStream(is); Bitmap QRbitmap = BitmapFactory.decodeStream(bis); bis.close(); is.close(); Log.i("TEST", "OnClick"); return QRbitmap; catch (IOException e) { e.printstacktrace(); 完整程式碼請參考光碟中 QRCodeExample01.java

34 翻譯小幫手 - Google Translate API

35 翻譯小幫手 - Google Translate API Google 有提供網頁形式的翻譯功能, 而在 android 要使用到 Google 翻譯的話, 可利用 WebView 來達到此功能, 在使用 Google 翻譯時, 必須用到 JavaScript 來呼叫 Google 翻譯的函式

36 翻譯小幫手 - Google Translate API 首先創建一個 translate.html 用來嵌入 Google 翻譯的 JavaScript 程式碼, 如下 : <html> <head> <meta http-equiv="content-type" content="text/html; charset=big5" /> </head> <script type="text/javascript" src=" <script type="text/javascript > google.load("language", "1"); function translater( mystring ) { var text = mystring; google.language.detect(text, function(result) { if (!result.error && result.language) { google.language.translate(text, result.language, "zh-tw", function(result) { if (result.translation) { alert(result.translation); ); ); </script> <body> <a onclick="window.translate.click()"> <p></p> <div style="text-align:center; padding: 5px 5px 5px 5px;"> 翻譯 </div></a> </body> </html>

37 翻譯小幫手 - Google Translate API 接著設定 WebView 參數, 程式碼如下 public void oncreate(bundle icicle) { super.oncreate(icicle); setcontentview(r.layout.main); mwebview = (WebView) findviewbyid(r.id.webview01); TextView01 = (TextView) findviewbyid(r.id.textview01); EditText01 = (EditText) findviewbyid(r.id.edittext01); // 設定 webview 的參數 WebSettings websettings = mwebview.getsettings(); websettings.setsavepassword(false); websettings.setsaveformdata(false); // 由於翻譯 API 為 JavaScript, 故 JavaScript 功能必須開啟 websettings.setjavascriptenabled(true); websettings.setsupportzoom(false); mwebview.setwebchromeclient(new MyWebChromeClient()); mwebview.addjavascriptinterface(new GoogleTranslateExample(), "translate"); mwebview.loadurl("file:///android_asset/translate.html");

38 翻譯小幫手 - Google Translate API 當按下翻譯時將欲翻譯的字串輸入至 html 並將翻譯結果輸入至 TextView 中, 程式碼如下 : // 當按下翻譯按鈕後, 將要翻譯的字串輸入到 translate.html 中 final class GoogleTranslateExample { public void click() { mhandler.post(new Runnable() { public void run() { String inputstring = EditText01.getText().toString(); mwebview.loadurl("javascript:translater('" + inputstring + "')"); ); // 利用 onjsalert 將在 translate.html 中 Alert 的訊息顯示在 TextView 上 final class MyWebChromeClient extends WebChromeClient public boolean onjsalert(webview view, String url, String message, JsResult result) { Log.d("ALERT_TAG", message); TextView01.setText(message); result.confirm(); return true;

39 翻譯小幫手 - Google 範例結果如下圖 : Translate API

40 Google 天氣資訊 - Google Weather API

41 Google 天氣資訊 - Google Weather API Google Weather API 提供各地天氣資訊, 而這些資訊分為兩個部分, 一為當天天氣資訊, 另一部分為四天內大略天氣資訊, 資訊內容如下表 : 天氣資訊天氣狀態華氏氣溫攝氏氣溫濕度風向天氣狀態圖示日期最低溫最高溫 當天天氣資訊有有有有有有無無無

42 Google 天氣資訊 - Google Weather API 此 API 提供三種形式來查詢天氣 : 第一種利用經緯度來查詢天氣, 範例如下 : 為台北的經緯度 ) 第二種則是利用地名來查詢, 但只適用於較大的城市, 範例如下 : 第三種則是利用郵遞區號來查詢, 此方式只適用於美國地區, 範例如下 : 為麻薩諸塞州的劍橋市的郵遞區號 )

43 Google 天氣資訊 - Google Weather API Google Weather API 是以 XML 形式來顯示, 顯示結果如下 :

44 Google 天氣資訊 - Google Weather API 由於此 API 是以 XML 形式回傳, 所以我們可以利用 SAXParser 來幫助我們分析 XML 內的資訊, 使用方法如下 : // 建立一個 SAXParserFactory 物件 SAXParserFactory factory = SAXParserFactory.newInstance(); // 產生一個 SAXParser SAXParser saxparser = factory.newsaxparser(); // 將指定 inputstream 設定為 BIG5, 因指定 API 回傳為 zh-tw 的語言 InputStreamReader isr = new InputStreamReader(url.openStream(), "BIG5"); // 建立 InputSource, 用於 SAXParser 中 InputSource is = new InputSource(isr); // 產生自訂的 handler 物件 WeatherHandler thehandler = new WeatherHandler(); // 將 InputSource 和自訂處理 XML 的 handler 開始做 Parse 的動作 saxparser.parse(is, thehandler);

45 Google 天氣資訊 - Google 範例結果如下 : Weather API

46 Google 天氣資訊 - Google Weather API 由於此 API 無法利用縣市名稱查詢台灣各地天氣資訊, 故在範例中使用縣市的經緯度來當作查詢的條件, 座標資訊為下表 : 縣市 經緯度 台北市 , 台北縣 , 桃園縣 , 新竹市 , 新竹縣 , 苗栗縣 , 台中市 , 台中縣 , 彰化縣 , 南投縣 , 雲林縣 , 嘉義市 , 嘉義縣 , 台南市 , 台南縣 , 高雄市 , 高雄縣 , 屏東縣 , 台東縣 , 花蓮縣 , 宜蘭縣 , 基隆市 ,

47 Google 天氣資訊 - Google Weather API 主程式部分主要提供一個 Spinner 讓使用者選擇要查詢的縣市, 而在此設定一個 Listener OnItemSelectedListener, 當使用者選擇縣市時觸發, 當觸發後將使用者選擇的縣市索引傳給自訂的 UpdateWeatherInfo 來將縣市資料透過 Google Weather API 取得 XML 並分析後更新到 UI 上, 程式碼請參閱光碟

48 課後習題 1. 若沒有註冊 Google Map Api Key 的話是否可正常運作? 同一把 key 是否可在不同電腦上開發? 申請到的 API Key 要放置在何處? 2. 要使用何種工具來產生認證指紋 MD5? 3. 開發 Google Map API 應用程式在開發時要使用何種 SDK 版本? 4. 開發 Map 服務必須開啟何種權限方可正常運作? 5. 請簡單敘述抓取 GPS 座標的流程

49 Q&A