Transcript Google Chart API

Chapter 11
Google服務應用開發
本投影片（下稱教用資源）僅授權給採用教用資源相關之旗標書籍為教科書之授課老師（下稱老師）專用，老師為教學使用之目的，得摘錄、編輯、重製教用資
源（但使用量不得超過各該教用資源內容之80%）以製作為輔助教學之教學投影片，並於授課時搭配旗標書籍公開播放，但不得為網際網路公開傳輸之遠距教學、
網路教學等之使用；除此之外，老師不得再授權予任何第三人使用，並不得將依此授權所製作之教學投影片之相關著作物移作他用。
著作權所有 © 旗標出版股份有限公司
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目錄下面，輸入下列指令：
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），如圖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
 由於Google Map API必須額外加入，故必須手動在
AndroidManifest.xml中加入自訂的函式庫，由於Google
Map服務需存取網路，故也要加入使用網路的權限，修改
如下：
<?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-sdk android:minSdkVersion="6" />
<uses-permission android:name="android.permission.INTERNET"></uses-permission>
</manifest>
Google地圖定位 - Google Map
API
 透過MapView來使用Google Map服務，此元件必須使用在
Google上註冊的金鑰，否則Map將無法顯示。在申請成功
後除了得到金鑰之外，網頁也提供一段xml代碼提供使用
者使用。本範例將此段代碼放置res/layout/main.xml當中，
如下列程式碼：
<?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>
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. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}
@Override
protected boolean isRouteDisplayed() {
return false;
}
}
Google地圖定位 - Google Map
API
 修改上述程式碼後，即為最基本的Google Map應用服務，
程式結果如圖下：
Google地圖定位 - Google Map
API
 在XML當中的MapView可加入一項參數，讓使用者可以與
地圖作互動：
android:clickable="true"
 若此值為false，則使用者無法利用觸控方式來移動視窗上
的地圖。
Google地圖定位 - Google Map
API
 地圖不可缺少的一項功能為放大和縮小所看到的區域，在
此我們使用ZoomControls這個元件。接著修改上面基本
Map範例，加入將地圖放大及縮小的功能，首先修改
main.xml的排版，程式碼如下：
布局文件(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 >
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物件，
接著設定放置的位置：
GeoPoint addPoint = new GeoPoint(24968134,121195464);
 建立一個addPoint物件設定座標為中央大學的地理
座標位置，接著宣告OverlayItem：
OverlayItem overlayItem = new OverlayItem(addPoint, "", "");
 最後將定義好的overlayItem加入我們定義的
MapOverlay中。
Google地圖標誌
範例結果如下：
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 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();
}
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，格式如下：
http://chart.apis.google.com/chart?cht=qr&chs=300x300&
chl=輸入之文字
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(i
nput, "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
首先創建一個translate.html用來嵌入Google
翻譯的JavaScript程式碼，如下：
<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>
翻譯小幫手 - Google
Translate API
接著設定WebView參數，程式碼如下：
@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");
}
翻譯小幫手 - 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 {
@Override
public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
Log.d("ALERT_TAG", message);
TextView01.setText(message);
result.confirm();
return true;
}
}
}
翻譯小幫手 - 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=zhtw&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內的資訊，使用
方法如下：
// 建立一個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);
Google天氣資訊 - Google
Weather API
範例結果如下：
Google天氣資訊 - Google
Weather API
 由於此API無法利用縣市名稱查詢台灣各地天氣資訊，故在範例中使
用縣市的經緯度來當作查詢的條件，座標資訊為下表：
縣市
台北市
台北縣
桃園縣
新竹市
新竹縣
苗栗縣
台中市
台中縣
彰化縣
南投縣
雲林縣
嘉義市
嘉義縣
台南市
台南縣
高雄市
高雄縣
屏東縣
台東縣
花蓮縣
宜蘭縣
基隆市
經緯度
25091075,121559834
24915712,121673937
24937587,121216847
24803946,120964687
24703281,121125217
24489269,120941737
24150187,120642999
24233208,120941737
23992974,120481845
23838760,120987632
23755852,120389665
23475449,120447285
23458895,120573958
23005897,120182022
23174894,120297420
22625107,120308954
23010871,120666004
22549506,120619990
22984612,120987632
23756899,121354163
24692947,121719546
25108981,121708145
Google天氣資訊 - Google
Weather API
 主程式部分主要提供一個Spinner讓使用者選擇要
查詢的縣市，而在此設定一個Listener
OnItemSelectedListener，當使用者選擇縣市時觸發，
當觸發後將使用者選擇的縣市索引傳給自訂的
UpdateWeatherInfo來將縣市資料透過Google
Weather API取得XML並分析後更新到UI上，程式
碼請參閱光碟。
Q&A