Chapter 11 - PowerPoint PPT Presentation

chapter 11 n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Chapter 11 PowerPoint Presentation
play fullscreen
1 / 48
Chapter 11
385 Views
Download Presentation
willow
Download Presentation

Chapter 11

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  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下,如圖11.1.3,此目錄會依使用者安裝JDK時的目錄不同、版本不同路徑也可能不同,上述路徑為JDK預設安裝路徑,在此目錄中有個keytool.exe,此為建立認證指紋(MD5)的工具,在建立認證指紋之前,需要debug_keystore路徑。

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

  7. 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。

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

  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 <?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服務需存取網路,故也要加入使用網路的權限,修改如下:

  13. 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" > <!-- 放置MapView以及Map Api Key --> <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當中,如下列程式碼:

  14. 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:

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

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

  17. 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用來放置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 > 地圖不可缺少的一項功能為放大和縮小所看到的區域,在此我們使用ZoomControls這個元件。接著修改上面基本Map範例,加入將地圖放大及縮小的功能,首先修改main.xml的排版,程式碼如下:

  18. 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; } }

  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); 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(); } }

  22. 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); } // 略 }

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

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

  25. 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上,所以當使用者移動時,標誌圖案會跟著使用者移動,程式碼如下:

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

  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); mapView.postInvalidate(); } @Override 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,格式如下:

  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("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

  34. 翻譯小幫手 - Google Translate API

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

  36. 翻譯小幫手 - 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程式碼,如下:

  37. 翻譯小幫手 - 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參數,程式碼如下:

  38. 翻譯小幫手 - 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中,程式碼如下:

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

  40. Google天氣資訊 - Google Weather API

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

  42. 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為麻薩諸塞州的劍橋市的郵遞區號)

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

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

  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. Q&A