2016年4月17日 星期日

Raspberry Pi 3 開機自動啟動程式

前言

最近在執行的專案需要在RPi開機時自動執行Python Script,在網路上爬了不少文章,但似乎沒有一篇可以完全解決問題的,多半是設定後沒有任何反應,經過一番拼湊,終於找出可以在RPi 3上正常執行的方法,在這邊記錄一下。

本文內容是基於這幾篇文章編寫,並視實測結果進行調整


原理

將RPi開機選項設定為以GUI啟動且自動登入User Pi,配合修改對應的autostart設定檔實現開機時自動執行某程式。

開機選項設定

設定步驟

  1. 開啟autostart設定檔,位於pi使用者下的 ~/.config/lxsession/LXDE-pi/autostart。視你目前操作情況,選用適當的編輯器開啟即可(例vi, nano, lefapad)。
  2. 在設定檔最下方填入以下指令。請將demo.py替換為你的python程式所在路徑。
  3. @/usr/bin/python demo.py
    
  4. 若設定無誤,重新啟動後應會看到 demo.py 已被執行。
  5. 若不想重啟,可直接下 startx 指令。



2016年2月14日 星期日

安裝Cordova Plugin

前篇「Cordova 安裝與開發流程」講述Cordova開發環境的準備及基本的使用教學,而本篇則是要說明如何在Cordova專案加入Plugin,讓你的專案具有使用相機、GPS、麥克風等諸多行動裝置硬體設備之能力。

以下就以裝載Camera的Plugin為例,在Cordova專案中裝載該插件:


取得與安裝Plugin

  1. 連線至Cordova官方提供的Plugin Search頁面 (https://cordova.apache.org/plugins/),輸入你想查找的關鍵字即可。我們在此輸入「camera」,馬上可以看到對應的Plugin已顯示。
    Codrova Plugins 搜尋頁面



    cordova-plugin-camera


  2. 使用指令 cordova plugin add cordova-plugin-camera,將會把camera插件下載並裝到Project/platforms目錄下的所有平台。


安裝原理簡述

執行plugin add 指令後,系統已在背後悄悄的完成許多異動,例如:


  1. 將Plugin檔案下載至Project/plugins目錄。
  2. 將已下載的「cordova-plugin-camera」安裝至各平台,這邊以Android為例,即為Project\platforms\android\assets\www\plugins 目錄。
  3. 依安裝的plugin 更新 Project\platforms\android\assets\www 目錄下的「cordova_plugins.js」。
  4. Project\platforms\android中的「AndroidManifest.xml」權限異動。
  5. android\src 目錄,新增「org.apache.cordova.camera」Package與所屬java檔。

雖然這些異動有跡可尋,但仍不建議自行修正,照著正規的方法來處理比較妥當。

檢視現有的 Plugin

使用指令 cordova plugin ls 即可。

移除 Plugin

使用指令 cordova plugin rm [plugin_name],例如要移除 Camera Plugin,則下 cordova plugin rm cordova-plugin-camera。若你忘了Plugin的全名,可由前面的 ls 命令找到。

延伸閱讀

Apache Cordova Documentation - Camera, https://cordova.apache.org/docs/en/3.3.0/cordova/camera/camera.html

2016年2月11日 星期四

Java Script 跨域請求

平日寫App慣了,在App呼叫遠端PHP程式存取資料庫是件相當自然的事。但近期有個Case是以Web方式開發,透過AJAX存取另一Server上的PHP時卻罷工了,追查一下發現是跨域請求造成的問題,在這邊筆記一下。


還原現場

  • 有一個存放於遠端Server的PHP程式,它會讀取資料庫並傳回結果,使用的資料格式為JSON。
query.php
<?php
 //存取資料庫,略!
 $arr = array(
  "id" => "a01",
  "name" => "elephant"
 );    
 echo json_encode($arr);
?>


  • 本機有一JavaScript,以jQuery提供的ajax function呼叫遠端PHP取回JSON字串。

search.js
$.ajax({
 method: "POST",
 url: "http://遠端Server IP/query.php",
 dataType: "json"
}).done(function(data) {
 alert(data.name);
}).fail(function() {
 alert("fail");
});


  • 執行看看,將跳出fail的alert。


錯誤訊息

目前主流的瀏覽器皆內建了開發人員工具,這邊以Firefox為例,執行前述提到的query.js,將看到如下的錯誤訊息:




相當親民的訊息,直接告訴你這是跨域請求的問題,缺少了Access-Control-Allow-Origin檔頭。



解決跨域資源請求之問題

在此以這篇文章「js跨域访问,No ‘Access-Control-Allow-Origin‘ header is present on」提供的方法來解。文內亦有提到跨域存取之細節,有興趣可以讀讀看。欲解決此問題,必須在前述的PHP程式加入「header("Access-Control-Allow-Origin: *");」。


<?php
 header("Access-Control-Allow-Origin: *");
 //存取資料庫,略!
 $arr = array(
  "id" => "a01",
  "name" => "elephant"
 );
 echo json_encode($arr);
?>




2016年1月31日 星期日

Android存取後端Server (part 1)

前言

若您開發的App有保存資料的需求,多半希望將資料存集至遠端伺服器,比較建議的作法是透過PHP, JSP, AST.NET等技術,以Web方式實作資料傳輸的媒介,存取資料即使用POST或GET的方式來進行。

在實作前有件事情需要注意,Android 4.0規定了存取網路的操作必須執行在另一Thread(執行緒)中,為了因應此規定,目前有兩大方向可供選擇:
  1. 使用Runnable與Handler:這種方法比較複雜,但彈性高,可依自己的需求規劃,同時在Handler的使用上需注意Memory leak之情況。
  2. 使用非同步任務(AsyncTask):此為相對簡單的方法,依規定好的格式即可以輕易完成網路存取。
接下來,就開始以第一種方式實作(Runnable + Handler),簡單一點的AsyncTask預計寫在下一篇(part2)。以下以重點說明為主,完整的範例已放在GitHub上,有需要的參考一下即可。


Step 0. 理解執行架構與流程

這邊用張簡圖表示,描述自步驟1發出請求起,至將遠端資料顯示至TextView的第驟6。Handler, Thread與Activity的互動關係大略是這樣。




Step 1. 開啟網際網路存取權限

為專案加入網際網路存取權限,找到AndroidManifest.xml,加入 android.permission.INTERNET 。


Step 2. HTTP請求與回應

以下程式摘錄自SendDataRunnable.java,可以直接套用,範圍程式中已把它包成method,若您想要自己另外處理,參數對照一下即可。這段程式碼有幾個重點:
  1. 第n列,有些教學範例會使用HttpClient這個類別來操作,但其已被Android棄用,因此這邊改以HttpURLConnection實作。
  2. 第n列,URL物件需要傳入Server上某個php檔案 (或其他Web程式)的路徑。
  3. 第n列,HTTP_OK這個常數值為200,表示正常狀態,確認正常了才開始讀取Response,你也可以再該處加上else,處理一些異常狀態。
  4. 第n列,composePostString( )負責組合參數,需傳入HashMap作為數個參數的集合(HashMap有Tag與Value對應的概念),詳見範例程式。
private String sendData(String target, HashMap params){
    String responseData = "";
    try {
        URL url = new URL(target);
        //建立與目標之間的連線
        HttpURLConnection connection = (HttpURLConnection)url.openConnection(); 
        connection.setRequestMethod("POST");
        connection.setDoInput(true);
        connection.setDoOutput(true);

        OutputStream stream = connection.getOutputStream();
        BufferedWriter writer = new BufferedWriter(new OutputStreamWriter(stream, "UTF-8"));
        String c = composePostString(params);

        writer.write(c);

        writer.flush();
        writer.close();
        stream.close();
  
        int httpResponseCode = connection.getResponseCode();
        if(httpResponseCode == HttpsURLConnection.HTTP_OK) {
            String oneLine = "";
            BufferedReader reader = new BufferedReader(
                new InputStreamReader(connection.getInputStream()));
            while ((oneLine = reader.readLine()) != null) {
                responseData += oneLine;
            }
        }

    } catch (MalformedURLException e) {
        e.printStackTrace();
    } catch (IOException e) {
        e.printStackTrace();
    }

    return responseData;
}



Step 3. 實作Run()

run( )是Runnable介面中唯一的方法,當其被執行時會自動呼叫,在範例程式中拿來呼叫Step 2.所寫的sendData( )。

此段程式相當簡單,sendData( )會傳回Server回應的資料,故需檢查資料長度是否正常,並針對各情況進行處理。傳回來的資料會放在response變數中,至此所有動作仍不在Android的主執行緒上執行,若你要在這邊把資料更新到UI上是無法存取的,所以這邊有個handler.obtainMessage( ),用它把資料傳至主執行緒上的Handler。

但有一點請注意,obtainMessage傳入兩個參數,第一個是int型別的值,這是讓你識別目前的情況用的,姑且稱它為「識別碼」,你可以自己決定該如何實作,例如:1代表新增成功、2代表刪除成功、3代表取得清單資料等。為了方便管理,也可以宣告常數來處理,讓程式更易維護。


@Override
public void run() {
    String response = sendData(this.path, this.params);
    if(response.length() > 0) {
        //TODO
        handler.obtainMessage(0, response).sendToTarget();
    }else{
        //TODO
    }
}



Step 4. Handler

在上一步驟中,我們已經取得Server回應的字串資料,為了在主執行者中接收這個字串資料,需要準備Handler來承接,礙於Memory Leak的問題(有機會再談),建議以內部靜態類別來實作,完整程式請參考範例中的main.java。

這邊定義了HttpHandler類別,其繼承Handler (來自android.os.Handler,別import錯了)。

請特別注意幾個地方:
  1. 第n列,將WeakReference強迫轉型為Main,這個Main需繼承當初建立WeakReference傳入的泛型 (本例是Activity),白話的說Main是Activity,但其具有Activity沒有的成員與方法(因為繼承),因此我們要把它強迫轉型為Main,以方便進行後續處理。
  2. 第n列,這邊用if判斷了msg.what值,該值就是在Step 3所傳入的int參數(本例為0),所以這邊檢查等於0時把Server傳回的response字串顯示在TextView上。
  3. 承上,response字串也是是在Step 3傳入,但其型別為Object,所以這邊取出時要再強迫轉型為字串。


static class HttpHandler extends Handler {
    WeakReference weakReference;
 
 public HttpHandler(Activity activity) {
        weakReference = new WeakReference<>(activity);
    }

    @Override
    public void handleMessage(Message msg) {
        Main main = (Main)weakReference.get();
        if(msg.what == 0) {
            //TODO 依what判斷後續處理
            main.txvResponse.setText((String)msg.obj);
        }
    }
}



Step 5. 串接一切

各細節寫好了,現在要把他們串起來!實際上該封裝的東西也都裝好了,所以真正在呼叫時動作不會太多。

首先,在呼叫前確保handler與params兩個物件有新建了,兩者的作用在前面都有提過。
handler = new HttpHandler(this);
HashMap<String, String> params = new HashMap<>();
接著填入要送至Server的參數,每個參數都會有Tag (或稱為Name)與Value的對應。
params.put("name", "tom");

最後要將整個HTTP的請求與回應動作放在另一個執行緒中執行,因此我們這麼處理。記得網址的部分自己換掉。
new Thread(
    new SendDataRunnable(handler, "http://www.example.com", params)
).start();


小結

上述的程式還可以再封裝的更細緻,但有時封過頭會綁手綁腳的,大家若要直接使用範例程式,請注意裡面標示//TODO的地方。
這邊有小建議,請盡可能的將識別碼、網址或ip之類的資源統一管理,看是要宣告成常數,還是把它放在string.xml中。
還有!安全議題也需注意,本篇沒有特針對安全部分進行討論,若你要傳輸的資料是有安全顧慮的,請以https的方式進行,亦需留意Server端的安全措施。


2016年1月10日 星期日

IoT App 開發工具 Evothings 介紹


以下內文已於 2016/4 針對正式釋出的 2.0 版進行微調。

Evothings是一套針對物聯網(IoT)相關行動App開發工具,開發技術採用Cordova。它內建了不少相關範例程式(BLE/Beacon、Arduino、LinkIt One,甚至是ESP8266等相關應用)。

Evothings主要分為2大部分:執行在PC上的Evothings Workbench與執行在行動裝置上的Evothings Viewer (小於2.0版的是使用Evothings Client)。以下內文內容以Evothings 2.0 為基準。

Evothings提供的Viewer程式已事先裝載了相關Plugin,透過Workbench可將你的開發環境(PC)與Viewer(Mobile)串接,優點是每次變更程式時,不需手動編譯與打包,更動的結果會即時反應在行動端。目前Evothings不能完成打包的動作,主要用途是用於快速開發原型(prototype)與實驗目前的想法是否可行。

接著開始看看如何使用Evothings:


下載Evothings Workbench

至官方網站下載即可,本文以Evothings Workbench 2.0 為介紹對象。
https://evothings.com/


執行Workbench

以Windows平台而言,下載後解壓縮即可,執行其中的「EvothingsWorkbench.exe」即可啟動,需無進行安裝動作。

安裝Evothings Viewer

記得這邊談的是2.0以上版本,請在行動裝置安裝Evothings Viewer。若是使用較早的Workbench搭配的是Evothings Client。在Apple App Store或Google Play搜尋Evothings即可找到相應App,將其安裝即可。




Workbench與Viewer連線

2.0版本可以透過外網連線,也因此會有KEY的產生與登入之功能,在2.0以前是Workbench與Viewer都是區網的情況下才可使用
切換至Workbench的Connect頁籤,按下「GET KEY」即可產生金鑰,並在Viewer中輸入金鑰即可連線。 (實際使用時有遇過timeout的情況,再多試幾次即可)。




範例程式的使用

前面有提到,Evothings內建了不少IoT相關應用範例,這些範例都可以在Workbench的Examples頁籤中找到。2.0版與先前版本的差異是,在使用這些範例要先按下「COPY」把它複製到你的開發目錄(依你的習慣設定即可),完成複製的專案可以在My Apps頁籤中找到。早期版本是直接修正範例檔,若沒有事先備份可能會回不去。


修改範例程式並執行

在Workbench中切換至My Apps頁籤,在想要修改的專案中按下「CODE」即會開啟放置原始碼的目錄,使用你習慣的程式碼編輯器開啟相關檔案即可。這邊用Notepad++打開index.html。在此時你可以修正這些檔案的內容,包含html、js與css等,一經修正並存檔,即會自動把結果反應至行動裝置。若你發現修正後行動裝置並沒有跟著改變,可能是Workbench與Viewer之間的連線中斷了,請檢查看看。






打包釋出

如同前述,目前Evothings沒有提供這個功能,但由於專案骨子裡是Cordova,因此可以用Cordova自己的打包流程來產出最終結果。這部分可以先參考本Blog的文章「Cordova 安裝與開發流程」會較有概念。



其他功能

若你有原本的Cordova專案,可以直接把專案中的主html檔拖拉至My App頁籤,即可透過Evothings幫你快速執行至實機。



而在Viewer右上角的選單可以打開「Info」頁面,即可查詢目前包含的Plugin,可以發現有battery、camera、geolocation等常用Plugin,以及特定用途的像是ble與beacon。


2015年10月26日 星期一

解決 Android Studio 設定檔占用C磁碟之問題

Android Studio 的設定檔預設存放於 C 磁碟,包含 config 與 system 兩個資料夾,使用至今大約有230 MB,若你的 C 碟空間很保貴,可以考慮更改預設的儲存路徑。

這種問題多半在行時 Android Studio 會出現警告「Low disk space on a android studio system directory partition.」,若磁碟真的滿了,後續動作將無法正常執行。

依這篇文章「Android Studio使用问题小结」裡面提供了解決方法,但目前(2015/10)的版本似乎有些出入,但大致上是沒有問題的。

路徑設定步驟

  1. 找到 Android Studio 的安裝路徑,展開至 AndroidStudio\bin。
  2. 用文字編輯器開啟 idea.properties。
  3. 直接新增設定,包含 idea.config.path=D:/xxx/config 與 idea.system.path=D:/xxx/system。

請注意,原本的設定檔若放在 C 碟,可以直接把它搬到上面第3點指定的路徑,讓其能夠正常對應即可。

2015年10月18日 星期日

Cordova 安裝與開發流程

安裝Cordova

Cordova是個跨平台行動應用程式設計的解決方案,主要色是使用HTML, JavaScript, CSS等常見的Web技術來製作App。首先介紹如何安裝,這邊以官方提供的標準安裝方法來進行,依照以下步驟完成(適用Windows):
  1. 至Node.js官方 (https://nodejs.org/) 下載Node.js並安裝。
  2. 開啟「cmd」或「Node.js command prompt」,會出現命令列視窗。
  3. 輸入指令「npm install -g cordova」,將會自動完成Cordova的下載與安裝。

npm install -g cordova


開發前置準備


為使後續開發能順利進行,還需要進行以下設定,各平台可能不太一樣。這邊以Android為例,需先安裝Android SDK,並設定「環境變數」內的「系統變數」,包含:
  1. 新增ANDROID_HOME變數,值為Android SDK的安裝路徑,例如D:\Android\sdk,依你實際安裝路徑為主。
  2. 調整path變數,新增以下兩者,記得用分號「;」隔開:
%ANDROID_HOME%/tools
%ANDROID_HOME%/platform-tools


 建立Cordova專案

安裝好Cordova,即可利用指令的方式建立專案,其指令相當簡單,不需使用其他工具來完成。

  1. 開啟「cmd」或「Node.js command prompt」,利用「cd」指令移到你想建立專案的目錄下。
  2. 使用指令建立專案,參數ProjectName請自行代換為專案名稱,它會作為整個專案的資料夾,且建立在目前的位置上。
  3. cordova create PROJECT_DIR APP_ID APP_NAME
    
    這邊的 APP_ID 即對應到 Android 的 Package Name 與 iOS 的 Bundle Identifier。
  4. 使用指令移至剛才建立的專案目錄內。
  5. cd PROJECT_DIR
    
  6. 依你的需求,將專案加入平台,平台指的是你的App之後要執行在哪,以Android為例,使用指令完成。
  7. cordova platform add android 


開始撰寫程式

Cordova是個跨平台解決方案,還記得在前面我們用「cordova platform add」指令加入了Android平台嗎?你的App最終可能要執行在Android, iOS, WP8, BlackBerry等平台,既然是跨平台,當然希望「寫一次」程式就可以執行在各個平台上,為了實現這個需求,你可以編輯的資源僅限於「www」資料夾內的檔案。

那麼之前在platforms\android\assets\www中看到的檔案呢?若你直接異動它,再透過對應的IDE還是可以產出可執行的App,但無法兼顧其他平台,既然選擇Cordova,最好不要這樣處理。

另外有關App的基本資訊,Cordova為了兼顧多平台,統一將設定放在專案根目錄中的config.xml檔案,若欲調整App名稱與版本等資料請編輯該檔。


編譯與打包

在完成程式的新增與編輯之後(記得,僅存取\www內的資源),於Node.js command prompt執行以下指令即可,執行前請確認有完成「開發前置準備」裡面提到的環境變數設定。
cordova build

值得注意,這個build指令會自動把\www內的東西copy至個平台中的\assets\www,並且依各平台不同特性加入與修正必要檔案,為確保整個流程正確,這部分請不要手動完成。

但是!若你不想要使用這種命令方式來打包成apk檔案,可以借用其他IDE來完成,若你有這個打算,請不要直接執行build,而改用以下指令(不同平台請自行抽換參數):
cordova prepare android


prepare會把相關檔案copy至正確的地方,但不進行編譯與打包之動作。實際上執行前面說的build,它也是自動幫你在背後執行prepare與compile兩個指令。
 

使用Android Studio編譯與打包

基本上透過Cordova CLI可以完成整個開發流程,包括撰寫程式與編譯,但實際上,熟悉Android Studio者,或想以圖形操作介面包完成打包的人,可以將Cordova的Android專案以Android Studio來維護。

個人偏好以這樣的方式進行開發,可以直接執行到實機、觀察Log,而簽署apk時圖形化介面也比較友善。

若前面有將Cordova專案加入Android平台的話,在專案根目錄下,應會產生platforms\android,我們直接使用Android Studio開啟這個目錄,具體的操作方式:

開啟Android Studio,選擇「Import project (Eclipse ADT, Gradle, etc…)」把專案載入,請記得要載入的是Cordova專案中platforms\android目錄。


Δ 選擇「Import project (Eclipse ADT, Gradle, etc…)」把專案載入 

Δ 載入Cordova專案中platforms\android目錄

若Android Studio有提示Android Gradle plugin需要更新,請按下「Fix plugin version and sync project」讓它自動完成即可。

開啟後就依以往的方式把apk檔案打包出來,直接接上實機也可以執行,如同開發原生程式一般。


特別提醒!使用 Android Studio 可以方便的將程式執行到實機,但每次更改程式後,在透過 AS 執行前記得先執行 cordova prepare 指令,否則執行到裝置上的的 App 會是先前的版本


後記

Cordova版本持續更新,本文撰寫於2015/10,使用的Cordova版本為5.3.3。(要查版本可以下cordova -v指令)。未來新版本難保會有不同的處理流程,屆時請大家自行注意。

本文皆以個人經驗撰寫,部分資料來自官方文件,若讀者有更好的解決方案歡迎提供!

下期預告「安裝Cordova Plugin」。


延伸閱讀

  1. APACHE CORDOVA: The Command-Line Interface,
    http://cordova.apache.org/docs/en/5.1.1/guide/cli/index.html
  2. Tiger-Workshop Blog: PhoneGap 與 Cordova 的實際差異,
    http://blog.tiger-workshop.com/difference-between-phonegap-and-cordova/