2010年3月9日 星期二

【參考】- 如何使用 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 網站下載與研究,漁郎在此就不贅述了。




[實作環境]
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>
   
    <script type="text/javascript"><!--
        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>
    <script type="text/javascript"
       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 (行動廣告)就行了!

1 則留言:

  1. If you're looking for a solid contextual ad network, I recommend you try Chitika.

    回覆刪除