在 000WebHost 上執行 App Inventor 2 資料庫專題特訓班 (第一版) Chapter 10 雲端 POS 訂購系統
App Inventor,  問題解決

在 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 檔案開始,要把裡面 localhostroot1234,改成我們剛剛建置時輸入的,如下:




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也能夠顯示出自己訂了些甚麼

  • 88

    首先先謝謝老師很有耐心的講解而且很詳細,十分受用!

    如果要下次開啟 App 時,資料還存在的話,就用 TinyDB 記錄起來,每當 App 開啟時,就先將之前的點餐紀錄給變數「點餐紀錄」。

    這部分能否多解釋一下,不太懂!!

  • JamesBang

    因為我是將點餐紀錄給一個變數,再設定給 Label 元件顯示,但是如果將 App 關閉再重新啟動後,變數的資料會不見,也就是上一次的訂購記錄會不見,所以可以透過 TinyDB 元件,這是一個超小型的資料庫,可以將資料存在使用者的手機裡,使用這個元件將每次的訂餐紀錄存起來,下次再開啟 App 時就能將資料讀取到手機上了。但有一個缺點是,手機要是重新整理,資料就不見了!

發表迴響