從 Zero 開始(10)- 安裝與使用 PiCommander WEB App by Michael | CodeData
top

從 Zero 開始(10)- 安裝與使用 PiCommander WEB App

分享:

從 Zero 開始(9)- 安裝與使用 PiCommander Android App << 前情

準備與確認工作

現在準備安裝PiCommander Web App,可以在網頁監控連接在Raspbbery Pi的設備與零件。在開始接下來的工作之前,先確認已經準備好下列的項目:

  • Raspberry Pi
    • 已經啟動PiCommander而且可以正確的運作
    • 已經連接至少一個LED
    • 已經連接至少一個開關

設定環境變數

依照下列的步驟執行設定環境變數的工作:

  1. 選擇「開始」後,在「電腦」上按滑鼠右鍵,選擇「內容」。
  2. 在「系統」視窗選擇「進階系統設定」:

    swz_10_001

  3. 選擇「進階」標籤後選擇「環境變數」:

    swz_10_002

  4. 選擇系統變數的「新增」按鈕:

    swz_10_003

  5. 在變數名稱欄位輸入「JAVA_HOME」,在變數值欄位輸入JDK安裝的位置,例如「C:\Program Files\Java\jdk1.8.0_25」。輸入完成後選擇「確定」按鈕:

    swz_10_004

  6. 為了方便後續執行的工作,加入Java工具程式資料夾到Path系統環境變數。在環境變數視窗選擇系統變數「Path」後選擇「編輯」按鈕:

    swz_10_005

  7. 保留原來變數值欄位的內容,在最前面加入「%JAVA_HOME%\bin;」,選擇「確定」按鈕:

    swz_10_006

  8. 回到環境變數視窗後選擇「確定」按鈕;回到系統內容視窗後同樣選擇「確定」按鈕;最後關閉系統視窗完成設定。

啟動一個新的命令提示字元視窗,執行「javac -version」指令,確認是否設定成功:

    Prompt > javac -version
    javac 1.8.0_25

安裝 Java 網頁伺服器

依照下列的步驟安裝TomEE網頁伺服器:

  1. 在個人電腦啟動瀏覽器,開啟網頁http://tomee.apache.org/downloads.html
  2. 選擇「1.7.4 – WebProfile(Java EE 6 certified)」的「ZIP」,儲存下載的檔案:

    swz_10_007

  3. 解壓縮下載的檔案。

  4. 啟動命令提示字元視窗,執行下面切換資料夾的指令:

    cd TomEE解壓縮資料夾\apache-tomee-webprofile-1.7.4\bin
  5. 在命令提示字元視窗,執行下面啟動TomEE伺服器的指令:

    startup.bat
  6. 啟動完成以後的畫面:

    swz_10_008

  7. 啟動瀏覽器,開啟網頁http://localhost:8080/,如果看到下面的網頁,表示TomEE啟動成功:

    swz_10_009

  8. 在命令提示字元視窗,執行下面關閉TomEE伺服器的指令:

    shutdown.bat

下載與安裝 PiCommander WEB App

依照下列的步驟下載與安裝 PiCommander WEB App:

  1. 依照「從 Zero 開始(5)- Firebase 雲端即時資料庫服務」說明的「匯入資料到 Firebase」,下載需要的檔案後,可以在這裡找到PiCommander 網頁應用程式:

    儲存檔案的資料夾\PiComFire2-master\projects\PiComWeb\PiComWeb.war
  2. 把「PiComWeb.war」檔案複製到「TomEE解壓縮資料夾\apache-tomee-webprofile-1.7.4\webapps」資料夾。

  3. 啟動命令提示字元視窗,執行下面切換資料夾的指令:

    cd TomEE解壓縮資料夾\apache-tomee-webprofile-1.7.4\bin
  4. 在命令提示字元視窗,執行下面啟動TomEE伺服器的指令:

    startup.bat
  5. 啟動瀏覽器,開啟網頁http://localhost:8080/PiComWeb,如果看到下面的網頁,表示PiCommander Web App安裝成功:

    swz_10_010

修改 Firebase 連線資訊

  1. 啟動瀏覽器,開啟網頁http://console.firebase.google.com,選擇「Console」以後,選擇「將Firebase加入您的網路應用程式」:

    swz_10_011

  2. 選擇並複製畫面中的內容:

    swz_10_012

  3. 開啟下面的檔案:

    儲存檔案的資料夾\PiComFire2-master\projects\PiComWeb\PiComWeb\WEB-INF\include\firebase.txt
  4. 把第二個步驟複製的內容貼入firebase.txt,存檔並關閉。

  5. 啟動命令提示字元視窗,執行下面切換資料夾的指令:

    cd TomEE解壓縮資料夾\apache-tomee-webprofile-1.7.4\bin
  6. 在命令提示字元視窗,執行下面啟動TomEE伺服器的指令:

    startup.bat

使用 PiCommander WEB App

安裝好PiCommander WEB App以後,可以搭配PiCommander Android App一起測試。在網頁選擇「Control」功能,畫面顯示Raspberry Pi GPIO的即時狀態:

swz_10_011

選擇網頁畫面中的「Status」按鈕,可以切換與儲存最新的狀態到Firebase。在PiCommander Android App執行操作,或是按下連接在Raspberry Pi的開關,網頁與Android App都會接收到最新的狀態:

swz_10_012

下一步

完成PiCommander系統的架構了,接下來為PiCommander加入讀取溫、濕度的功能。

後續 >> 從 Zero 開始(11)- 使用 PiCommander 即時監測溫濕度資訊

分享:
按讚!加入 CodeData Facebook 粉絲群

留言

留言請先。還沒帳號註冊也可以使用FacebookGoogle+登錄留言

關於作者

張益裕。目前的工作是講師與作者,專長是教育訓練課程規劃、教材編製與課程推廣,技術書籍與專欄寫作。涵蓋的領域有OOAD、Java程式設計、JavaFX、Java Embedded、Android與SQL。已出版電子書Google Play圖書Pubu

熱門論壇文章

熱門技術文章