【Android學習筆記】你的第一支PhoneGap應用程式:Hello Inside!

PhoneGap是一個跨平台行動開發解決方案,它把行動網頁的介面包成像原生軟體一樣,在先前本站的Richard曾專文介紹過:請參閱:跨越行動網頁與原生軟體的隔閡 – PhoneGap,其中談到的例子是以iPhone為範例,今天筆者參照官網的教學範例,簡單的分享如何用PhoneGap在Android上開發一支Hello Inside程式。
評論
評論

[image credit : laihiu]

PhoneGap 是一個跨平台行動開發解決方案,它把行動網頁的介面包成像原生軟體一樣,在先前本站的 Richard 曾專文介紹過:請參閱:跨越行動網頁與原生軟體的隔閡 – PhoneGap,其中談到的例子是以 iPhone 為範例,今天筆者參照官網的教學範例,簡單的分享如何用 PhoneGap 在 Android 上開發一支 Hello Inside 程式。

並建立一個專案本文以 [helloinside] 為名稱,分別輸入專案的屬性為

Application name:helloinside

Package name:com.phonegap.helloinside

Create Activity:app

註:經筆者的測試,目前 PhoneGap 0.9.3 用 Android 2.3 以上版本會出錯,所以 Build Target 請選 Android 2.2 以下的版本。

  • 解開你的 PhoneGap 資料夾,選擇 Android,裡面會有一個 phonegap.js 和 phonegap.jar 檔
  • 接著在你建立 Android 的 workspace 的根目錄 ,新增二個目錄

/libs
/assets/www

  • phonegap.jar 複製到/libs 裡,而 phonegap.js 複製到/assets/www

修改程式碼

在 Eclipse 裡展開專案,並點開 [src] –> [com.phonegap.helloinside] –> [app.java] 並執行以下步驟:

  • 把 Class extends 名稱從 Activity 改成 DroidGap
  • 把最後一行的 setContentView(R.layout.main); 改成 super.loadUrl(file:///android_asset/www/index.html);
  • 在程式碼上方加入 Add import com.phonegap.*;

照理說現在程式碼裡會出現一堆錯誤訊息,別擔心,這是因為程式沒有抓到你剛複製進去的 phonegap.jar,右鍵點專案名稱,並 refresh

  • 右鍵點選你剛複製進去的 libs/phonegap.jar,選擇 [Build Path」-> [Add to Bulid Path]

錯誤訊息就會消失了!

  • 右鍵點選專案中的 AndroidManifest.xml,並選擇 Open With -> Text Editor,接著把以下的程式碼都複製到 android:versionName="1.0″> 後面

<supports-screens
android:largeScreens="true"
android:normalScreens="true"
android:smallScreens="true"
android:resizeable="true"
android:anyDensity="true"
/>
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.RECEIVE_SMS" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.READ_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

  • 再把 android:configChanges="orientation|keyboardHidden" 加到 activity 裡的 android:label="@string/app_name" 的後面,如下圖:

存檔後,一個 phonegap 的開發環境就算完成了。

建立你的第一個 Phonegap 程式:Hello Inside

  • assets/www 裡新增一個名為 [index.html] 的空白檔案,把以下網頁程式碼複製進去,並存檔

<!DOCTYPE HTML>
<html>
<head>
<title>Hello Inside</title>
<script type="text/javascript" charset="utf-8″ src="phonegap.js"></script>
</head>
<body>
<h1>Hello Inside</h1>
</body>
</html>

大功告成

完成了?對,就是這麼簡單!

  • 在專案上按右鍵選擇 [Run As] –>  [ Android Application],(你可以選擇 android 2.2 版以下的模擬器,或是將你的 Android 手機的 USB 偵錯模式打開,用 USB 接上你的電腦),然後剛剛的網頁就會出現了!(如下圖)
如果你曾經設計過網頁,你可以把 assets/www 想成是你電腦裡的網頁根目錄,你想要做的內容就可以用網頁的方式搭配 Phonegap,變成一個很像原生程式的 Android App,還可以上架 Android Market。這是不是很酷呢?

reference:http://www.phonegap.com/start#android

原文教學影片:http://www.youtube.com/watch?v=MzcIcyBYJMA


警戒升級,店面安全也升級!月租型 HomeSecurity AI 店家防護,小店業者無痛導入

監視器不稀奇,不過在盡量不外出的管制期,還要另外花錢購買監視器,對於備受衝擊的業者來說彷彿又多剝一層皮。幸好還有台灣大寬頻月租型「HomeSecurity AI 店家防護」,每月不用千元即可遠端守護店面安全。
評論
Photo Credit:iStock
評論

全國三級疫情警戒,市景進入半封城的模樣,人人自危。許多店家也只好選擇暫停營業,減少營運成本;尤其雙北限制餐廳內用後,不少店家也改做外帶/外送服務,關閉原本的室內用餐空間。門可羅雀不是最可怕的,最可怕的是當在家防疫、減少外出的同時,店面安全出現破口,遭有心人士闖空門。既然花錢請一個人專門顧店或是花時間親自坐鎮都不是好辦法,此時引進智慧監控系統,才是明智之舉。

月租型HomeSecurity AI 店家防護,安心無負擔

監視器不稀奇,不過在疫情嚴峻期間,花費破千、破萬的預算購買昂貴監視器,對於備受疫情衝擊的業者來說,彷彿又多剝了一層皮。此時此刻最需要的,應該是能夠減緩大筆支出,陪伴業者度過艱難時期的店家防護系統。

對此,台灣大寬頻的月租型「HomeSecurity AI 店家防護」是很好的解決方案,不只遠端守護店面安全,搭配指定光纖上網方案,每月也只要 999 元起的價格,十分超值划算。

異地監控店家,同步更新雲端、方便即時察看與回放

價格好入門可不是「HomeSecurity AI 店家防護」唯一的優點。一般來說,架設閉路電視系統監控、將監視器的影像即時上傳網路,同時還要 AI 智慧監控功能,總要耗費不少資金成本。不過為了讓眾多小店家業者享有同等級的監控服務,台灣大寬頻推出月租型「HomeSecurity AI 店家防護」能以相對實惠的方案,滿足小型店家的科技監控需求。

首先,店主可以根據店面需求,選擇「槍型」或「吸頂」等網路攝影機款式。接著,店主可以跨裝置檢視監控畫面,無論是桌機、筆電、智慧型手機、平板,都能觀看 1920x1080p 的高畫質即時監控影像;此外,分割畫面也能讓店主同時監看多角度或連鎖分店的情況。

拜先進的雲端技術之賜,「HomeSecurity AI 店家防護」的監控影像可以即時串流雲端,店主能不限時間、地點登入網頁或 App 服務,觀看各網路攝影機的即時影像與錄影回放,不必再辛苦傳輸資料畫面或手動上傳雲端,監控管理十分方便。

AI 影像告警,聰明防竊;另有最高 36 萬竊盜損失補償

更讓人安心的是,「HomeSecurity AI 店家防護」最重要的核心技術「AI 人像辨識」。簡言之,就是網路攝影機能將拍攝畫面快速回傳至技術平台並分析數據,進而精準判斷畫面中是否有「人」入侵。一旦AI影像告警確認店內有人為入侵,便會立即以電話、簡訊、App 推播等管道主動通報緊急聯絡人。

不只聰明防竊,也另有完善的配套讓店主安心。萬一真的不幸發生竊盜損失,台灣大寬頻和富邦產險合作,能提供竊盜損失補償,因此只要在案發 30 天內,以報案後憑警察機關刑事報案證明三聯單以及相關影像證據提出申請,店主最高可獲得每年 36 萬元的補償。

防疫期間,同島一命。台灣大寬頻推出「HomeSecurity AI 店家防護」以相對平易近人的方案,提供台灣小型企業店家安心智慧的守護,以嚴密堅實的智慧監控,陪伴業者迎來雨過天青的彼日。