314494340cf2a2de5b2c99a8db2ae22a.ppt
- Количество слайдов: 48
Chapter 11 Google服務應用開發 本投影片(下稱教用資源)僅授權給採用教用資源相關之旗標書籍為教科書之授課老師(下稱老師)專用,老師為教學使用之目的,得摘錄、編輯、重製 教用資源(但使用量不得超過各該教用資源內容之 80%)以製作為輔助教學之教學投影片,並於授課時搭配旗標書籍公開播放,但不得為網際網路公開 傳輸之遠距教學、網路教學等之使用;除此之外,老師不得再授權予任何第三人使用,並不得將依此授權所製作之教學投影片之相關著作物移作他用。 著作權所有 © 旗標出版股份有限公司
Google服務應用開發 n Google提供了許多免費服務,例如搜尋引擎、 Google Map、 Google翻譯、Google文件、Google日 曆、GMail、 Google Talk、 Youtube等常見的服務, Google擁有大量的資料以及對這些資料作分析 的能力,因此可以提供更多元的服務類型。在 豐富的資源下將 Google服務與 Android的應用程 式結合能讓使用者在使用上覺得更便利,也將 這些 Google服務帶著走。
Google Map服務
Google Map API金鑰 n 要開發 Google Map服務相關應用程式服務之前,必須 先到 Google網站上取得 Google Map的開發金鑰 (API KEY),才能夠使用 Google Map所提供之服務,否則就算 程式能夠運作,地圖也不會顯示出來。如下圖:
Google Map API金鑰 n 申請步驟 – 產生認證指紋 MD 5: • 進入命令提示字元,將目錄切換至 C: Program FilesJavajdk 1. 6. 0_17bin下,如圖 11. 1. 3,此目錄會依使用者安裝 JDK時的目錄不同、版本不同路徑也可能不同,上述路徑為 JDK預 設安裝路徑,在此目錄中有個 keytool. exe,此為建立認證指紋( MD 5)的 具,在建立認證指紋之前,需要 debug_keystore路徑。
Google Map API金鑰 n 申請步驟 – 產生認證指紋 MD 5: • 開啟 Eclipse,由上方的 具 Windows -> Preferences -> Android -> Build 中 找 Default debug keystore的路徑,如圖 11. 1. 4,並將此路徑複製下來,以 範例而言,路徑為「C: Usersdreamilylife. androiddebug. keystore」。
Google Map API金鑰 n 申請步驟 – 產生認證指紋 MD 5: • 接著回到 C: Program FilesJavajdk 1. 6. 0_17bin目錄下面,輸入下列指令: keytool -list -alias androiddebugkey -keystore "debug_keystore的路徑" -storepass android keypass android • 上述 path_to_debug_keystore為從 Eclipse當中複製出來的 Default debug keystore 路徑,故在本範例為「C: Usersdreamilylife. androiddebug. keystore」,接著會產 生認證指紋(MD 5),如圖 11. 1. 5。
Google Map API金鑰 n 申請 API Key – 接著進入 Google MAP API Key申請頁面,圖 11. 1. 6: http: //code. google. com/intl/zh-TW/android/maps-api-signup. html
Google Map API金鑰 n 在畫面中有個 My certificate‘s MD 5 fingerprint,在後面欄 位填上由 keytool所得到的認證指紋碼並同意 Google在 網頁上列出的條款後點擊 Generate API Key後,即可產 生 Android Maps API 金鑰,如下圖:
Google地圖定位 - Google Map API n 開發 Google Map應用時,在開啟專案時須選擇 Google APIs
Google地圖定位 - Google Map API n 開啟後可看到使用的 lib會多一個 maps. jar
Google地圖定位 - Google Map API n 由於 Google Map API必須額外加入,故必須手動在 Android. Manifest. xml中加入自訂的函式庫,由於 Google Map服務需存取網路,故也要加入使用網路的權限,修 改如下: <? xml version="1. 0" encoding="utf-8"? > <manifest xmlns: android="http: //schemas. android. com/apk/res/android" package="ncu. bnlab. Map. Example" android: version. Code="1" android: version. Name="1. 0"> <application android: icon="@drawable/icon" android: label="@string/app_name"> <activity android: name=". Map. Api. Example" 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: min. Sdk. Version="6" /> <uses-permission android: name="android. permission. INTERNET"></uses-permission> </manifest>
Google地圖定位 - Google Map API n 透過 Map. View來使用 Google Map服務,此元件必須使用 在 Google上註冊的金鑰,否則 Map將無法顯示。在申請 成功後除了得到金鑰之外,網頁也提供一段 xml代碼提 供使用者使用。本範例將此段代碼放置 res/layout/main. xml當中,如下列程式碼: <? xml version="1. 0" encoding="utf-8"? > <Linear. Layout xmlns: android="http: //schemas. android. com/apk/res/android" android: orientation="vertical" android: layout_width="fill_parent" android: layout_height="fill_parent" > <!-- 放置 Map. View以及 Map Api Key --> <com. google. android. maps. Map. View android: layout_width="fill_parent" android: layout_height="fill_parent" android: api. Key="01 uynn. MZDkj. Yct. Fx. IPb 2 n 3 H 5 i. BU 5 Jf. F 4 w. V 5 NCgg" /> </Linear. Layout>
Google地圖定位 - Google Map API n 除此之外,在主程式部分也必須要將 Map. Activity: package ncu. bnlab. Map. Example; import android. os. Bundle; import com. google. android. maps. Map. Activity; public class Map. Api. Example extends Map. Activity { /** Called when the activity is first created. */ @Override public void on. Create(Bundle saved. Instance. State) { super. on. Create(saved. Instance. State); set. Content. View(R. layout. main); } @Override protected boolean is. Route. Displayed() { return false; } } Activity改為
Google地圖定位 - Google Map API n 修改上述程式碼後,即為最基本的 務,程式結果如圖下: Google Map應用服
Google地圖定位 - Google Map API n 在 XML當中的 Map. View可加入一項參數,讓使用者可 以與地圖作互動: android: clickable="true" n 若此值為 false,則使用者無法利用觸控方式來移動視 窗上的地圖。
Google地圖定位 - Google Map API n 地圖不可缺少的一項功能為放大和縮小所看到的區域, 在此我們使用 Zoom. Controls這個元件。接著修改上面基 本 Map範例,加入將地圖放大及縮小的功能,首先修改 main. xml的排版,程式碼如下: 布局文件 (res/layout/main. xml): <? xml version="1. 0" encoding="utf-8"? > <Relative. Layout 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. Map. View android: id="@+id/map. View" android: layout_width="fill_parent" android: layout_height="fill_parent" android: clickable="true" android: api. Key="01 uynn. MZDkj. Yct. Fx. IPb 2 n 3 H 5 i. BU 5 Jf. F 4 w. V 5 NCgg" /> <!-- 此Linear. Layout用來放置 Zoom --> <Linear. Layout android: id="@+id/zoom. View" android: layout_align. Bottom="@id/map. View" android: layout_width="wrap_content" android: layout_height="wrap_content" android: layout_center. Horizontal="true” /> </Relative. Layout >
Google地圖定位 - Google Map API Map. Api. Example. java public class Map. Api. Example extends Map. Activity { /** Called when the activity is first created. */ @Override public void on. Create(Bundle saved. Instance. State) { super. on. Create(saved. Instance. State); set. Content. View(R. layout. main); Linear. Layout linear. Layout; Map. View map. View; Zoom. Controls my. Zoom; linear. Layout = (Linear. Layout) find. View. By. Id(R. id. zoom. View); map. View = (Map. View) find. View. By. Id(R. id. map. View); // 將map. View加上 Zoom. Controls功能 my. Zoom = (Zoom. Controls) map. View. get. Zoom. Controls(); linear. Layout. add. View(my. Zoom); } @Override protected boolean is. Route. Displayed() { // TODO Auto-generated method stub return false; } }
Google地圖定位 - Google Map API n 範例結果如下:
Google地圖標誌 n 在平常使用 Google Map中,常常用到的一個功能就是 在地圖上標記地點,而要達到此功能要使用 com. google. android. maps. Itemized. Overlay類別,此類別可 讓使用者在地圖上放上標誌。有了放置標誌的功能後, 接下來是要指定放置的位置,要達到此功能則要使用 com. google. android. maps. Geo. Point類別來指定經緯度,故 使用上述兩個類別中的方法後,就可以利用經緯度將 自訂的標誌放上地圖。
Google地圖標誌 Map. Overlay. java public class Map. Overlay extends Itemized. Overlay<Overlay. Item>{ private Array. List<Overlay. Item> g. List = new Array. List<Overlay. Item>(); Drawable marker; public Map. Overlay(Drawable default. Marker) { super(default. Marker); marker = default. Marker; } // 將Overlay. Item加入 g. List中 public void add. Overlay. Item(Overlay. Item o. Item){ g. List. add(o. Item); populate(); } @Override public void draw(Canvas canvas, Map. View map. View, boolean shadow) { super. draw(canvas, map. View, shadow); bound. Center. Bottom(marker); } @Override protected Overlay. Item create. Item(int arg 0) { return g. List. get(arg 0); } @Override public int size() { return g. List. size(); } }
Google地圖標誌 Map. Api. Example 02. java public class Map. Api. Example 02 extends Map. Activity { @Override public void on. Create(Bundle saved. Instance. State) { super. on. Create(saved. Instance. State); set. Content. View(R. layout. main); Linear. Layout linear. Layout; Map. View map. View; Zoom. Controls m. Zoom; Drawable mdrawable; linear. Layout = (Linear. Layout) find. View. By. Id(R. id. zoom. View); map. View = (Map. View) find. View. By. Id(R. id. map. View); m. Zoom = (Zoom. Controls) map. View. get. Zoom. Controls(); linear. Layout. add. View(m. Zoom); mdrawable = this. get. Resources(). get. Drawable(R. drawable. icon); Map. Overlay map. Overlay = new Map. Overlay(mdrawable); // 加入一經緯度 Geo. Point add. Point = new Geo. Point(24968134, 121195464); Overlay. Item overlay. Item = new Overlay. Item(add. Point, ""); map. Overlay. add. Overlay. Item(overlay. Item); map. View. get. Overlays(). add(map. Overlay); // 依照 add. Point設定之經緯度為中心 map. View. get. Controller(). set. Center(add. Point); } // 略 }
Google地圖標誌 n 建立好 Overlay類別後,產生一個 Map. Overlay物 件,接著設定放置的位置: Geo. Point add. Point = new Geo. Point(24968134, 121195464); n 建立一個 add. Point物件設定座標為中央大學的 地理座標位置,接著宣告 Overlay. Item: Overlay. Item overlay. Item = new Overlay. Item(add. Point, ""); n 最後將定義好的 overlay. Item加入我們定義的 Map. Overlay中。
Google地圖標誌 n 範例結果如下:
Google Map加入 GPS定位 n 接著介紹如何加入 GPS定位服務,範例會依照當下 GPS 訊號將標誌產生放置在 Google Map上,所以當使用者移 動時,標誌圖案會跟著使用者移動,程式碼如下: public class Map. Api. Example 03 extends Map. Activity { private Location. Manager location. Manager; private Location. Listener location. Listener; Linear. Layout linear. Layout; Map. View map. View; Zoom. Controls m. Zoom; Drawable mdrawable; @Override public void on. Create(Bundle saved. Instance. State) { super. on. Create(saved. Instance. State); set. Content. View(R. layout. main); linear. Layout = (Linear. Layout) find. View. By. Id(R. id. zoom. View); map. View = (Map. View) find. View. By. Id(R. id. map. View); m. Zoom = (Zoom. Controls) map. View. get. Zoom. Controls(); linear. Layout. add. View(m. Zoom); mdrawable = this. get. Resources(). get. Drawable(R. drawable. icon); // 設定此經緯度為 Map開啟時的中心位置 Geo. Point add. Point = new Geo. Point(24968134, 121195464); map. View. get. Controller(). set. Center(add. Point); Update. Location(); }
Google Map加入 GPS定位 public void Update. Location() { location. Manager = (Location. Manager) get. System. Service(Context. LOCATION_SERVICE); // 設定 Location. Listener,當經緯度位置更改時則觸發此事件 location. Listener = new Location. Listener() { public void on. Location. Changed(Location new. Location) { Update. New. Location(new. Location); } }; location. Manager. request. Location. Updates(Location. Manager. GPS_PROVIDER, 0, 0, location. Listener); } void Update. New. Location(Location new. Location) { List overlays = map. View. get. Overlays(); // 移除舊的 overlay if ( overlays. size() > 0 ) { for (Iterator iterator = overlays. iterator(); iterator. has. Next(); ) { iterator. next(); iterator. remove(); } } // 取得經度 Double longitude = new. Location. get. Longitude() * 1000000; // 取得緯度 Double latitude = new. Location. get. Latitude() * 1000000;
Google Map加入 GPS定位 Geo. Point new. Point = new Geo. Point( longitude. int. Value(), latitude. int. Value()); Map. Overlay overlay = new Map. Overlay(mdrawable); Overlay. Item overlay. Item = new Overlay. Item(new. Point, ""); overlay. add. Overlay. Item(overlay. Item); map. View. get. Overlays(). add(overlay); // 移動位置到新的經緯度 map. View. get. Controller(). animate. To(new. Point); map. View. post. Invalidate(); } @Override protected boolean is. Route. Displayed() { // TODO Auto-generated method stub return false; } } 完整程式碼請參考光碟中 Map. Api. Example 03. java
Google Map加入 GPS定位 n 範例結果如下:
QR Code二維條碼 - Google Chart API
QR Code二維條碼 - Google Chart API n QR Code是一種很常用的 2 D barcode, Code可 QR 以儲存文字、網址或是電話號碼等,接著介紹 如何利用 Google Chart API來產生 QR Code。 n Google Chart API利用網址的參數來產生相對應 的 QR Code,格式如下: http: //chart. apis. google. com/chart? cht=qr&chs=300 x 300 &chl=輸入之文字
QR Code二維條碼 - Google Chart API n 各參數意義如下: –「 cht=qr」代表要製作的是 QR Code –「 chs=300 x 300」則是產生圖表的大小 –「 chl=」則是將輸入的文字製作成 QR Code
QR Code二維條碼 - Google Chart API n 在範例中,利用 URL連線將要轉換成 QR Code之 文字傳給 Google Chart API來幫我們產生相對應 的 Code,並利用Image. View將產生的結果顯示出。
QR Code二維條碼 - Google Chart API QRCode. Example 01. java private Bitmap QRencoder(String input) { URL chart. API_URL; try { // 建立 Google Chart Api的連線,將圖檔大小以及要轉換的文字放置 // 網址當中 chart. API_URL = new URL("http: //chart. apis. google. com/chart? cht=qr&chs=300 x 300&chl="+URLEncoder. encode(i nput, "UTF-8")); URLConnection conn = chart. API_URL. open. Connection(); connect(); Input. Stream is = conn. get. Input. Stream(); Buffered. Input. Stream bis = new Buffered. Input. Stream(is); Bitmap QRbitmap = Bitmap. Factory. decode. Stream(bis); bis. close(); Log. i("TEST", "On. Click"); return QRbitmap; } catch (IOException e) { e. print. Stack. Trace(); } 完整程式碼請參考光碟中 QRCode. Example 01. java
翻譯小幫手 - Google Translate API
翻譯小幫手 - Google Translate API n Google有提供網頁形式的翻譯功能,而在 android要使用到 Google翻譯的話,可利用 Web. View來達到此功能,在使用 Google翻 譯時,必須用到 Java. Script來呼叫 Google翻 譯的函式。
翻譯小幫手 - Google Translate API n 首先創建一個 translate. html用來嵌入 Google翻譯的 Java. Script程式碼,如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=big 5" /> </head> <script type="text/javascript" src="http: //www. google. com/jsapi"></script> <script type="text/javascript“> google. load("language", "1"); function translater( my. String ) { var text = my. String; 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 on. Click="window. translate. click()"> <p></p> <div style="text-align: center; padding: 5 px 5 px; ">翻譯 </div></a> </body> </html>
翻譯小幫手 - Google Translate API n 接著設定 Web. View參數,程式碼如下: @Override public void on. Create(Bundle icicle) { super. on. Create(icicle); set. Content. View(R. layout. main); m. Web. View = (Web. View) find. View. By. Id(R. id. Web. View 01); Text. View 01 = (Text. View) find. View. By. Id(R. id. Text. View 01); Edit. Text 01 = (Edit. Text) find. View. By. Id(R. id. Edit. Text 01); // 設定 web. View的參數 Web. Settings web. Settings = m. Web. View. get. Settings(); web. Settings. set. Save. Password(false); web. Settings. set. Save. Form. Data(false); // 由於翻譯 API為 Java. Script,故Java. Script功能必須開啟 web. Settings. set. Java. Script. Enabled(true); web. Settings. set. Support. Zoom(false); m. Web. View. set. Web. Chrome. Client(new My. Web. Chrome. Client()); m. Web. View. add. Javascript. Interface(new Google. Translate. Example(), "translate"); m. Web. View. load. Url("file: ///android_asset/translate. html"); }
翻譯小幫手 - Google Translate API n 當按下翻譯時將欲翻譯的字串輸入至 html並將翻譯結果輸入至 Text. View中,程 式碼如下: // 當按下翻譯按鈕後,將要翻譯的字串輸入到 translate. html中 final class Google. Translate. Example { public void click() { m. Handler. post(new Runnable() { public void run() { String input. String = Edit. Text 01. get. Text(). to. String(); m. Web. View. load. Url("javascript: translater('" + input. String + "')"); } } // 利用 on. Js. Alert將在 translate. html中Alert的訊息顯示在 Text. View上 final class My. Web. Chrome. Client extends Web. Chrome. Client { @Override public boolean on. Js. Alert(Web. View view, String url, String message, Js. Result result) { Log. d("ALERT_TAG", message); Text. View 01. set. Text(message); result. confirm(); return true; } } }
翻譯小幫手 - Google Translate API n 範例結果如下圖:
Google天氣資訊 - Google Weather API
Google天氣資訊 - Google Weather API n Google Weather API提供各地天氣資訊,而這些資訊分 為兩個部分,一為當天天氣資訊,另一部分為四天內 大略天氣資訊,資訊內容如下表: 天氣資訊 當天天氣資訊 天氣狀態 有 華氏氣溫 有 攝氏氣溫 有 濕度 有 風向 有 天氣狀態圖示 有 日期 無 最低溫 無 最高溫 無
Google天氣資訊 - Google Weather API n 此 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 n Google Weather API是以 XML形式來顯示, 顯示結果如下:
Google天氣資訊 - Google Weather API n 由於此 API是以 XML形式回傳,所以我們可以 利用 SAXParser來幫助我們分析 XML內的資訊, 使用方法如下: // 建立一個SAXParser. Factory物件 SAXParser. Factory factory = SAXParser. Factory. new. Instance(); // 產生一個SAXParser sax. Parser = factory. new. SAXParser(); // 將指定 input. Stream設定為 BIG 5,因指定API回傳為 zh-tw的 語言 Input. Stream. Reader isr = new Input. Stream. Reader(url. open. Stream(), "BIG 5"); // 建立 Input. Source,用於SAXParser中 Input. Source is = new Input. Source(isr); // 產生自訂的 handler物件 Weather. Handler the. Handler = new Weather. Handler(); // 將 Input. Source和自訂處理 XML的 handler開始做 Parse的動作
Google天氣資訊 - Google Weather API n 範例結果如下:
Google天氣資訊 - Google Weather API n 由於此 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 n 主程式部分主要提供一個 Spinner讓使用者選擇 要查詢的縣市,而在此設定一個 Listener On. Item. Selected. Listener,當使用者選擇縣市時觸 發,當觸發後將使用者選擇的縣市索引傳給自 訂的 Update. Weather. Info來將縣市資料透過 Google Weather API取得 XML並分析後更新到 UI上,程 式碼請參閱光碟。
Q&A
314494340cf2a2de5b2c99a8db2ae22a.ppt