Chapter 11

Chapter 11 Google服務應用開發

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

Google Map服務

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

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

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

Google Map API金鑰 • 申請步驟 • 產生認證指紋MD5： • 接著回到C:\Program Files\Java\jdk1.6.0_17\bin目錄下面，輸入下列指令： • 上述path_to_debug_keystore為從Eclipse當中複製出來的Default debug keystore路徑，故在本範例為「C:\Users\dreamilylife\.android\debug.keystore」，接著會產生認證指紋（MD5），如圖11.1.5。

Google Map API金鑰 • 申請API Key • 接著進入Google MAP API Key申請頁面，圖11.1.6：http://code.google.com/intl/zh-TW/android/maps-api-signup.html

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

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

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

Google地圖定位- Google Map API <?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/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-sdkandroid:minSdkVersion="6" /> <uses-permission android:name="android.permission.INTERNET"></uses-permission> </manifest> 由於Google Map API必須額外加入，故必須手動在AndroidManifest.xml中加入自訂的函式庫，由於Google Map服務需存取網路，故也要加入使用網路的權限，修改如下：

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

Google地圖定位- Google Map API 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. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); } @Override protected boolean isRouteDisplayed() { return false; } } 除此之外，在主程式部分也必須要將Activity改為MapActivity：

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

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

Google地圖定位- Google Map API 布局文件(res/layout/main.xml)： <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation=“vertical” android:layout_width="fill_parent" android:layout_height=“fill_parent” android:id=“@+id/mainlayout” > <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 android:id="@+id/zoomView" android:layout_alignBottom="@id/mapView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true” /> </RelativeLayout > 地圖不可缺少的一項功能為放大和縮小所看到的區域，在此我們使用ZoomControls這個元件。接著修改上面基本Map範例，加入將地圖放大及縮小的功能，首先修改main.xml的排版，程式碼如下：

Google地圖定位- Google Map API MapApiExample.java public class MapApiExample extends MapActivity { /** Called when the activity is first created. */ @Override 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(); linearLayout.addView(myZoom); } @Override protected boolean isRouteDisplayed() { // TODO Auto-generated method stub return false; } }

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

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

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); populate(); } @Override public void draw(Canvas canvas, MapView mapView, boolean shadow) { super.draw(canvas, mapView, shadow); boundCenterBottom(marker); } @Override protected OverlayItem createItem(int arg0) { return gList.get(arg0); } @Override public int size() { return gList.size(); } }

Google地圖標誌 MapApiExample02.java public class MapApiExample02 extends MapActivity { @Override 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(24968134,121195464); OverlayItem overlayItem = new OverlayItem(addPoint, "", ""); mapOverlay.addOverlayItem(overlayItem); mapView.getOverlays().add(mapOverlay); // 依照addPoint設定之經緯度為中心 mapView.getController().setCenter(addPoint); } // 略 }

Google地圖標誌 建立好Overlay類別後，產生一個MapOverlay物件，接著設定放置的位置：建立一個addPoint物件設定座標為中央大學的地理座標位置，接著宣告OverlayItem：最後將定義好的overlayItem加入我們定義的MapOverlay中。

Google地圖標誌 範例結果如下：

Google Map加入GPS定位 public class MapApiExample03 extends MapActivity { private LocationManager locationManager; private LocationListener locationListener; LinearLayout linearLayout; MapView mapView; ZoomControls mZoom; Drawable mdrawable; @Override 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(24968134,121195464); mapView.getController().setCenter(addPoint); UpdateLocation(); } 接著介紹如何加入GPS定位服務，範例會依照當下GPS訊號將標誌產生放置在Google Map上，所以當使用者移動時，標誌圖案會跟著使用者移動，程式碼如下：

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() * 1000000; // 取得緯度 Double latitude = newLocation.getLatitude() * 1000000;

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); mapView.postInvalidate(); } @Override protected boolean isRouteDisplayed() { // TODO Auto-generated method stub return false; } } 完整程式碼請參考光碟中MapApiExample03.java

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

QR Code二維條碼 - Google Chart API

QR Code二維條碼 - Google Chart API QR Code是一種很常用的2D barcode，QR Code可以儲存文字、網址或是電話號碼等，接著介紹如何利用Google Chart API來產生QR Code。 Google Chart API利用網址的參數來產生相對應的QR Code，格式如下：

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

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

QR Code二維條碼 - Google Chart API QRCodeExample01.java private Bitmap QRencoder(String input) { URL chartAPI_URL; try { // 建立Google Chart Api的連線，將圖檔大小以及要轉換的文字放置 // 網址當中 chartAPI_URL = new URL("http://chart.apis.google.com/chart?cht=qr&chs=300x300&chl="+URLEncoder.encode(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

翻譯小幫手 - Google Translate API

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

翻譯小幫手 - Google Translate API <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=big5" /> </head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <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> 首先創建一個translate.html用來嵌入Google翻譯的JavaScript程式碼，如下：

翻譯小幫手 - Google Translate API @Override 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"); } 接著設定WebView參數，程式碼如下：

翻譯小幫手 - Google Translate API // 當按下翻譯按鈕後，將要翻譯的字串輸入到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 { @Override public boolean onJsAlert(WebView view, String url, String message, JsResult result) { Log.d("ALERT_TAG", message); TextView01.setText(message); result.confirm(); return true; } } } 當按下翻譯時將欲翻譯的字串輸入至html並將翻譯結果輸入至TextView中，程式碼如下：

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

Google天氣資訊 - Google Weather API

Google天氣資訊 - Google Weather API Google Weather API提供各地天氣資訊，而這些資訊分為兩個部分，一為當天天氣資訊，另一部分為四天內大略天氣資訊，資訊內容如下表：

Google天氣資訊 - Google Weather API • 此API提供三種形式來查詢天氣： • 第一種利用經緯度來查詢天氣，範例如下： • http://www.google.com/ig/api?hl=zh-tw&weather=,,,25091075,121559834（25091075,121559834為台北的經緯度） • 第二種則是利用地名來查詢，但只適用於較大的城市，範例如下： • http://www.google.com/ig/api?hl=zh-tw&weather=Taipei • 第三種則是利用郵遞區號來查詢，此方式只適用於美國地區，範例如下： • http://www.google.com/ig/api?hl=zh-tw&weather=02139（02139為麻薩諸塞州的劍橋市的郵遞區號）

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

Google天氣資訊 - Google Weather API 由於此API是以XML形式回傳，所以我們可以利用SAXParser來幫助我們分析XML內的資訊，使用方法如下：

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

Google天氣資訊 - Google Weather API 由於此API無法利用縣市名稱查詢台灣各地天氣資訊，故在範例中使用縣市的經緯度來當作查詢的條件，座標資訊為下表：

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

Q&A

Chapter 11

Chapter 11

Presentation Transcript

Chapter 11

Chapter 11

Chapter 11

Chapter 11

Chapter 11

Chapter 11

Chapter 11

Chapter 11

CHAPTER 11

Chapter 11

Chapter 11

Chapter 11

Chapter 11

Chapter 11

Chapter 11

Chapter 11

CHAPTER 11

Chapter 11

Chapter 11

Chapter 11

Chapter 11

Chapter 11