【參考】- 如何使用 Eclipse 在 Google App Engine 建立一個免費的行動網站服務與行動網頁，以提供 Android 程式崁入行動廣告？

由於有個 Google 員工在 Google AdSense 論壇發表了一篇令人疑惑的文章，詳見這裡，所以，請夥伴們就先將此篇文章當作是建置行動網頁的參考吧 ^__^ \\\

近日想在 Android 手機的應用程式中試試崁入 Google AdSense Mobile (行動廣告)，卻遇上了個難題：漁郎手邊沒有網站伺服器，所有的東東都是使用免費資源，對於這種有特殊需求的行動廣告，一時間「頭殼抱在燒」‧‧

還好在膜拜了半天 Google 大神後，赫然發現 Google 提供了 App Engine 這樣的服務，可以讓使用者自行建立所需的 Web Service，以讓您『建立行動網站』或『製作行動網頁』，其中不但有漁郎愛用的 Eclipse 整合開發工具，且最最最溫暖我心的是‧‧‧免費‧哇哈哈‧‧‧

Google App Engine 可讓使用者下載各種專用的 SDK，漁郎在此單刀直入只介紹使用 Eclipse 3.4 (GANYMEDE) 的方案，如夥伴們想用別的 SDK，請上 Google App Engine 網站下載與研究，漁郎在此就不贅述了。

https://appengine.google.com/

[實作環境]
1. Windows XP SP3
2. Eclipse 3.4.1 (GANYMEDE)
3. Google App Engine SDK for Eclipse 3.4

在此僅針對 Eclipse、Google App Engine SDK 的使用與整合，其它諸如 AdSense 的申請與 AdSense Mobile 廣告發佈程式碼 (JavaScript) 的取得，請自行謨拜 Google 大神求得解答。

[實作步驟]

Step 1. 登入或註冊 Google App Engine：http://appengine.google.com/

Step 2. 加入一個 Application :
只可以使用英文小寫與數字，例如 e68clubads，且不能與一些關鍵字相同，請試到可以用為止。

Step 3. 將 SDK 下載並掛到 Eclipse 中：
打開 Eclipse，並點選 Help --> Software Updates... --> Available Software --> Add Site.... --> Location：填入 http://dl.google.com/eclipse/plugin/3.4，勾選 http://dl.google.com/eclipse/plugin/3.4 下的所有項目。然後，點選 Install... --> 點選 Next。看過同意書後，點選 Finish。最後，點選 Yes 重新啟動 Eclipse。

Step 4. 使用 Eclipse 建立 Google app engine 專案：
開啟 Eclipse，點選 File --> New --> Web Application Project 建立新的專案。

範例： (Use Google Web Toolkit 取消勾選)

Step 5. 修改專案部份內容，以發佈 AdSense Mobile 行動網頁到 App Engine：
找到專案下的 war 目錄内的 index.html，將從 AdSense 抓下的行動廣告之 JavaScript 放在<head> 下之 <meta ..> <title></title> 與 </head> 之間

index.html 內容範例如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; user-scalable=1;"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>

<style type="text/css">
body {
margin: 0;
padding: 0;
border: 0;
}
</style>

    <title>AdSense Mobile App on Google App Engine</title>

window.googleAfmcRequest = {

client: 'ca-mb-pub-123456789012345',

ad_type: 'image',

output: 'html',

channel: '',

format: '320x50_mb',

oe: 'utf8',

color_border: '555555',

color_bg: 'EEEEEE',

color_link: '0000CC',

color_text: '000000',

color_url: '008000',

};

//--></script>

src="http://pagead2.googlesyndication.com/pagead/show_afmc_ads.js"></script>

</head>
<body></body>
</html>

注意：紅色部份請改填從 AdSense Mobile 抓下的 JavaScript

注意：channel (頻道)的部份除非要測試某些特定的類型廣告，不然別設定，因會造成出現在行動廣告上的都是公益廣告，而當在 AdSense Mobile 上的任一參數改變時，要重新抓取 AdSense Mobile 上的 JavaScript 填入程式中。

Step 6. 更改 war 下 WEB-INF 內的 web.xml 內容

web.xml 內容範例如下：

<?xml version="1.0" encoding="utf-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xmlns="http://java.sun.com/xml/ns/javaee"
        xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
        xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
        http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5">

    <welcome-file-list>
        <welcome-file>index.html</welcome-file>
    </welcome-file-list>

</web-app>

Step 7. 編輯 war 目錄中 WEB-INF 下的 appengine-web.xml
將步驟 (2) 中取得的應用程式 ID 填入 <application>...</application> 之間，
範例：<application>e68clubads</application>

也可使用 UI 設定 Application ID，方法是：以滑鼠右鍵點選個別專案上的內容(Properties)，在 Google -> App Engine 中的 Deployment 下的 Application ID 中填入您的 application ID。

Step 8. 部署應用程式到 Google App Engine 上
將游標停在專案名稱上, 按一下「應用服務引擎」部署按鈕 (Deploy App Engine Prohect)，輸入 Project 名稱，Google app engine 的登入帳號(e-mail)，與密碼，按下 Deploy 即可。當看到 Console 有 Deployment completed successfully 出現時，就成功了 !

Step 9. 測試 AdSense Mobile (行動廣告)是否可以使用 (只有手機可看到內容)
發行後的網頁位址為 http://你的應用服務 ID.appspot.com/，
例如：http://yourApplicationID.appspot.com/
開啟 Android 手機上的 Browser，填入網址 http://yourApplicationID.appspot.com/，如可順利看到 Google AdSense Mobile (行動廣告)就行了!

e68Club 漁郎工坊 - 數位生活札記

2010年3月9日星期二