在 000WebHost 上執行 App Inventor 2 資料庫專題特訓班 (第一版) Chapter 10 雲端 POS 訂購系統
文淵閣工作室的 Inventor 系列，一直是我認為寫得最棒的，針對不同程度的學生，推出各個系列的書籍，其中資料庫專題特訓班，更是所有系列中的佼佼者！這本書雖然現在有很多範例專案是無法執行了！但是還是可以學到很多實戰技巧！而這次主要是修改第一版檔案的，最後一章專案內容，並將 PHP 檔案放到 000WebHost 主機上執行！(第二版的內容不知道是不是和第一版的一樣！？這邊以第一版為主)
2022/12/13 更新
更新網址：
https://jbprogramnotes.tk/AppInventor/orderdrink/
https://jbprogramnotes.tk/AppInventor/orderdrink/cart.html
更新範例檔案：
前置作業準備：
請先到 000WebHost 建立一個網站！
建站詳細過程請參考：申請免費虛擬主機 000WebHost 並安裝 OpenCart 購物車系統
建好後請到網站後台，我們要先修改網站的 PHP 版本。(因為範例的 PHP 檔案，是 PHP 5.6 的語法，用 PHP 7 是沒辦法執行的！)
1. 點選後台左手邊的「Website Settings」，然後再點選「General」。
在右方找到 PHP Version，點「Change PHP Version」按鈕，選擇「PHP 5.6」。
好了之後，退回到 Build a Website。
2. 點選後台左手邊的「Tools」，然後再點選「Database Manager」。
我們要先把資料表給匯入進去
點擊「+ New Database」按鈕
輸入資料庫的名稱、使用者名稱和密碼 (密碼要有大小寫英文 + 數字 + 符號)
3. 資料庫建好後，點右邊的「Manage」按鈕，再選「PhpMyAdmin」。
進去後先點左邊的「你的 ID + _orderdrink」
再點右上角的「匯入」
接者我們開啟範例檔案「orderdrink_d.sql」，它在資料夾「sql」裡。
把前面這一大段都刪掉，其實主要是要刪除「CREATE DATABASE」那裡，因為我們剛剛已經建立過一個了！所以這裡不用再建一次
回到匯入畫面，點選擇檔案上傳 sql 檔。
畫面滑到底下按執行
P.S. 剛剛 sql 檔案，最底下的三行也可以刪除，如果沒刪，雖然執行時會顯示錯誤，但前面的 SQL 是有成功執行的！所以左方一樣可以看到匯入的資料。
可以看到資料成功匯入了！
4. 接著畫面切回 Database Manager，然後把範例資料夾「orderdrink」裡面的 PHP 檔案，全部用記事本開啟。
先從 connsql.php 檔案開始，要把裡面 localhost、root、1234，改成我們剛剛建置時輸入的，如下：
000WebHost 的 DB Host 也是 localhost，所以不用變動！改完記得要存檔喔～
接著換 index.php
把資料庫的名稱改掉！
改成如下：
換 itemSort.php
要改的地方跟 index.php 一樣
換 json.php
要改的地方跟 index.php 一樣
換 orderdrink.php
要改的地方跟 index.php 一樣
最底下的寄信部分也能修改，但用 000WebHost 信寄不出去，所以改不改都沒差！
$mailTo 可以改成自己的，這裡就是當顧客點完餐後，會將信寄給賣家。
$mailContent 右邊的 <a> 標籤裡的網址，可以改成自己的。在 000WebHost 建完網站後，會給妳一個專用的子網域。
以下為例：
上面網址就是指，我的根目錄裡的 AppInventor 資料夾，裡面的 orderdrink 資料夾，裡面的 showorder.php 檔案。後面的問號是帶入參數用的~
最後剩下 showorder.php 檔案
也是改資料庫名稱就好
到此，全部的 php 檔案已修改完畢！接著要把檔案上傳到虛擬主機
5. 到後台點擊 Tools -> File Manager，再點選畫面中央的 Upload Files。
進入 public_html 資料夾 (這裡是我們的根目錄)
右上角有一個 New Folder 按鈕，點此新增兩個資料夾，AppInventor 和 orderdrink。(這樣以後還可以放其它 Inventor 要用的檔案)
右上角有一個 Upload Files 按鈕，點此將所有修改好的 php 檔上傳至虛擬主機。
6. 在範例檔案和 php 檔放一起的還有 jquery-mobile 資料夾
請按照資料夾名稱，依序在虛擬主機建立，然後再將檔案上傳。
示範如下：
(本來是要建立一個壓縮檔，上傳後再解壓縮，但不知為何一直失敗。)
先建立 jquery-mobile 資料夾
將資料夾裡的三個檔案上傳
在 jquery-mobile 資料夾裡再建一個 images 資料夾
最後將 images 資料夾裡的五個圖檔上傳
好！虛擬主機的部分到此就先告一個段落，接著要修改 App Inventor 檔案！
開啟 App Inventor
7. Inventor 開啟後，將範例檔案 proj_poscloud.aia 上傳。
切換到程式設計
先找到當 Screen1 初始化的方塊，將 Web1 元件的網址改成自己的，示範如下：
原本是：
http://www.e-happy.com.tw/webapp/orderdrink/json.php
改成：
https://jamesbnotes.000webhostapp.com/AppInventor/orderdrink/json.php
接著找到 getUrl 副程式，將合併文字最定端的網址改成自己的，要注意這串網址最後還有一個問號，因為要接底下參數的，示範如下：
原本是：
http://www.e-happy.com.tw/webapp/orderdrink/orderdrink.php?
改成：
https://jamesbnotes.000webhostapp.com/AppInventor/orderdrink/orderdrink.php?
App 修改完成！可以執行測試了
可以到以下網址看看結果：
https://jamesbnotes.000webhostapp.com/AppInventor/orderdrink/
App 執行範例：
如果覺得文章內容還不錯的話，麻煩請幫我點個讚！感謝
可以多點幾次喔~~
第一次點讚需使用 Google 或 Facebook 帳號註冊
21 則留言
88
老師好，謝謝您提供這麼完整的教材。
我的程式設計不太好，有幾點想請教:
1.WEB上的查詢未處理訂單、查詢歷史訂單該怎麼寫比較好
2.APP上我想加入自己的歷史點餐情況，包含日期、產品、金額、熱量等該怎麼下手
3.APP點餐時只有加入購物車，沒有清除的選項該怎麼下手
如果可以的話希望老師可以附檔案參考，謝謝!!
JamesBang
你好，文淵閣工作室的這個範例的網頁部分，除了 cart.html 之外，其餘都是用 PHP 程式語言寫的，而且版本是 5.6，現在 PHP 已經出到 8 了！如果現在要學最好是 7 or 8，而且還要會 HTML5，基本上網頁都是由 HTML 的標籤組成的，如果對以上已有基本的了解，那麼要直接修改這個範例不難。
如果對 PHP 不熟，沒法修改的話，可以參考我的 App Inventor & Google 試算表教學系列，把你要的點餐紀錄及項目寫到 Google 試算表，在 App 端只要下 SQL 指令，就能把你要的顯示在手機了！(其中日期可以透過計時器元件來取得當下的日期)
這個範例是有清除購物車商品的功能的，你把商品加入購物車後，底下網頁會顯示編號，只要點選編號就能將商品刪除。
https://i.imgur.com/YhJaWpJ.png
這個範例你可以至以下網址下載：
http://books.gotop.com.tw/v_ACL045431#07
88
所以我可以透過試算表在我送出訂單的同時在app又能記錄自己點了甚麼嗎?
因為我看老師那篇試算表的文章好像是要自己打資料上去，而我想要的功能是能夠在送出訂單的同時在app也能夠顯示出自己訂了些甚麼
JamesBang
那你再多拉個清單變數去記錄就好，如果不想資料消失就用 TinyDB 元件，或者你也可以在資料寫入試算表的時候，做從試算表讀取的動作，那麼不管是哪一種方法，你都要用 Label 元件或其它元件做顯示。
88
老師，這部分能不能做個教學示範，麻煩了!
JamesBang
你可以看 getUrl 的副程式，裡面的參數資料就有姓名、電話、地址、訂單總額及訂單項目。
https://i.imgur.com/rPXFnpn.png
你在自己的 App，看你自己想要怎麼呈現，例如：拉個 Label 元件到 App 上，再把副程式裡的變數，丟給 Label 就好。
如果還是做不太出來的話，我晚上有空再做示範。
88
老師，我自己弄起來還是怪怪的，能不能麻煩做個示範，萬分感激!!
JamesBang
OK！我晚點有空來寫，寫好再 PO 上來
JamesBang
你好！
因為不知道你想以什麼樣形式呈現點餐紀錄，所以我直接在網頁瀏覽器元件(的下方，放一個區域，然後用 Label 元件來顯示訂餐紀錄。
https://i.imgur.com/qkyxM09.png
P.S. 首頁的路徑和我文章的不同，所以如果你無法瀏覽的話，就自己找一下你的 cart.html 在哪裡。
新增的程式方塊在程式設計區的右下角，我新拉了一個字串變數「點餐紀錄」，還有一個副程式，副程式的部分，就是將訂購人的資訊和點餐項目設定給變數「點餐紀錄」，最後再設定給 Label 標籤。
https://i.imgur.com/Pics97o.png
P.S. 我有利用計時器元件，將訂購日期也加上去。
要呼叫副程式的地方就是，餐點成功送出後，也就是「當 Web2 取得文字」方塊，放在關閉進度對話框的下面。
https://i.imgur.com/liVMCvR.png
這是一個簡單的範例，在 App 關閉後，點餐紀錄的資料就會消失，如果要下次開啟 App 時，資料還存在的話，就用 TinyDB 記錄起來，每當 App 開啟時，就先將之前的點餐紀錄給變數「點餐紀錄」。
範例實作影片：
https://i.imgur.com/BO78vz4.mp4
範例 aia 檔案：
https://drive.google.com/file/d/1fVuP54APSk86CXhjjsyXmMw9nGC2ugJe/view?usp=sharing
有任何問題，歡迎再留言詢問。
88
還有個問題，我送出訂單的時間都會跟真實時間相差8小時，應該去哪裡修比較好?
JamesBang
你進到 PhpMyAdmin，執行以下 SQL 語法看看。
select NOW();
set global time_zone = ‘+8:00’;
set time_zone = ‘+8:00’;
flush privileges;
select NOW();
88
錯誤
SQL 查詢：
set global time_zone = ‘+8:00’
MySQL 回應： 說明文件
#1227 – Access denied; you need (at least one of) the SUPER privilege(s) for this operation
好像沒有權限修改的樣子orz
JamesBang
那如果只下一行呢？
set time_zone = ‘+8:00’;
88
沒辦法欸，系統還是會自動修改成原來系統所在的時區
JamesBang
這樣喔… 我自己測試是正常的。
https://i.imgur.com/dXct4Ft.png
再不然你就重建資料庫看看，在執行範例的 SQL 時，把「SET time_zone = “+00:00”;」給刪掉。
88
首先先謝謝老師很有耐心的講解而且很詳細，十分受用!
如果要下次開啟 App 時，資料還存在的話，就用 TinyDB 記錄起來，每當 App 開啟時，就先將之前的點餐紀錄給變數「點餐紀錄」。
這部分能否多解釋一下，不太懂!!
JamesBang
因為我是將點餐紀錄給一個變數，再設定給 Label 元件顯示，但是如果將 App 關閉再重新啟動後，變數的資料會不見，也就是上一次的訂購記錄會不見，所以可以透過 TinyDB 元件，這是一個超小型的資料庫，可以將資料存在使用者的手機裡，使用這個元件將每次的訂餐紀錄存起來，下次再開啟 App 時就能將資料讀取到手機上了。但有一個缺點是，手機要是重新整理，資料就不見了！
88
老師，大概可以怎麼寫啊，在下面先呼叫微型資料庫儲存數值嗎?
抱歉，實在是對AI2很不熟，又要麻煩老師示範了ORZ
JamesBang
我明天有空再 PO 上來
JamesBang
SORRY，我最近突然很忙，可能得到下禮拜的周末才能 PO 上來，期間你可以網上搜尋 TinyDB 的相關用法。有問題一樣可以詢問，謝謝。
JamesBang
你可以在初始化方塊新增「呼叫 TinyDB 取得數值」的方塊，並將此值給變數 “點餐紀錄”，然後再顯示在 Label 標籤。
https://i.imgur.com/SPjeMiy.png
當然如果是第一次執行，因為還沒記錄過，所以是空的。
接著在副程式「新增點餐紀錄」的最下方，將點餐資料透過「呼叫 TinyDB 儲存數值」方塊儲存資料。
https://i.imgur.com/T47hXPJ.png
這樣在下一次開啟 App 時，就能顯示上一次的點餐紀錄了！
P.S. 我虛擬主機的資料庫突然打不開，所以在執行範例時，沒辦法抓到商品資料，請自行更改成自己的主機位置。