我 們 要 建 立 什 麼? 創 造 你 的 第 一 個 行 動 app 在 本 教 學 指 引 中, 你 將 會 學 習 如 何 建 立 一 個 行 動 app 此 app 會 從 雲 端 資 料 庫 中 羅 列 清 單, 而 此 app 會 藉 REST API 跟 資 料 庫 進 行 溝 通 此 app 外 觀 如 下 : 開 始 前 o 教 學 對 象 : 初 學 者, 您 的 第 一 個 行 動. o 必 備 工 具 : 一 個 帳 號. ( 亞 洲 註 冊 : appery.asia) 帳 號 新 增
進 入 www.appery.asia 網 站, 進 入 方 案 頁 面, 選 取 所 需 要 的 方 案 請 填 寫 必 要 欄 位 姓 名 和 電 子 郵 件 與 預 設 密 碼, 其 他 可 以 選 擇 性 的 填 寫 並 按 下 Sign up 就 完 成 註 冊 了
完 成 帳 號 新 增,email 收 信 確 認, 準 備 開 始 使 用 點 選 您 email 啟 用 的 鏈 結, 就 可 以 開 始 立 刻 使 用, 無 須 安 裝 任 何 軟 體
建 立 全 新 app 建 立 新 的 app, 自 Apps 的 選 單 點 選 建 立 新 的 app, 並 為 其 命 名 WarehouseApp 並 點 選 建 立 建 立 使 用 者 介 面 1. 每 個 新 app 都 有 一 個 預 設 的 首 頁 打 開 Pages > startscreen:
2. 點 選 app 的 頁 首, 並 修 改 文 字, 在 屬 性 中 改 成 Warehouse App 3. 從 元 件 板 中 拖 曳 選 單 元 件, 選 單 進 入 頁 面, 下 方 會 提 供 三 個 項 目 4. 選 擇 選 單 後, 在 屬 性 中 找 尋 合 適 的 專 案 作 調 整, 並 改 成 1 利 用 元 件 中 的 各 種 樣 式 説 明 你 選 擇 頁 面 元 素 我 們 會 自 資 料 庫 中 下 載 資 料 ( 從 REST 服 務 ), 因 此 我 們 只 是 簡 單 的 重 複 專 案 動 作, 就 可 以 建 立 清 單 你 的 頁 面 應 該 會 如 下 : 5. 由 於 您 是 使 用 網 路 行 動 app (HTML5), 您 可 以 隨 時 測 試 這 個 app 在 流 覽 器 上 的 狀 態 點 選 Test( 測 試 ), 即 可 在 新 視 窗 進 行 app 測 試 ( 請 確 認 彈 出 式 視 窗 能 夠 開 啟 appery.io 網 域 )
建 立 資 料 庫 現 在 你 將 要 建 立 資 料 庫 及 完 成 資 料 集, 並 將 資 料 集 放 入 範 例 資 料 中 1. 自 app 建 造 器 中, 點 選 Database( 資 料 庫 ) 以 開 啟 資 料 庫 頁 面 ( 會 開 啟 新 的 欄 位 ): 2. 當 欄 位 出 現, 點 選 Create new database( 建 立 新 資 料 庫 ) 3. 資 料 庫 名 稱 請 輸 入 WarehouseDB 並 點 選 Create( 創 立 ) 當 資 料 庫 建 立 後, 你 會 看 到 以 下 頁 面 : o o o 使 用 者 資 料 (Users data) 已 經 預 設 好 做 為 使 用 者 管 理, 如 登 入 執 行 及 註 冊 檔 案 資 料 庫 (Files data) 已 經 為 上 傳 檔 案 預 設 完 成 設 備 資 料 庫 (Devices data) 已 經 預 設 好 與 其 他 設 備 協 同 作 業 建 立 資 料 集 資 料 集 就 像 是 彼 此 相 關 的 資 料 庫 總 集 1. 建 立 一 個 新 的 資 料 集 來 儲 存 資 料 點 選 Create new collection( 建 立 新 資 料 集 ) 名 字 輸 入 商 品, 並 點 選 Add( 新 增 ) 這 一 個 新 增 的 資 料 集 就 會 在 資 料 集 中
2. 每 一 個 資 料 集 都 有 事 先 建 好 的 欄 位 ( 例 如 :_ 帳 號,_ 建 立 位 置 ) 你 可 以 建 立 新 的 欄 位, 只 須 點 選 +Col 功 能 變 數 名 稱 輸 入 專 案 名 稱 ( 字 型 維 持 String), 點 選 Create column( 建 立 欄 位 ) 你 就 可 以 在 資 料 集 中 看 到 新 的 欄 位 增 加 資 料 庫 中 的 資 料 要 將 資 料 集 放 入 範 例 資 料 中, 只 需 簡 單 點 選 + Row, 你 就 可 以 新 增 一 筆 資 料 集 資 料 : 以 下 範 例 是 有 三 個 專 案 的 資 料 集 現 在 你 將 建 立 REST 服 務 以 讀 取 資 料 庫 中 的 資 料 請 注 意 每 一 個 資 料 集 都 有 REST 的 指 令 顯 示, 這 表 示 資 料 及 跟 其 中 的 資 料 一 直 都 與 REST APIs 連 線 藉 REST 服 務 讀 取 資 料 1. 在 app 建 造 器 中 選 取 Create New > Database Services. 2. 自 清 單 中 選 取 WarehouseDB( 總 倉 資 料 庫 ) 展 開 Merchandise 資 料 集, 可 以 看 到 所 有 可 行 的 動 作
3. 由 於 我 們 目 前 僅 需 要 講 資 料 展 示 出 來, 點 選 List( 清 單 ) 服 務 4. 點 選 Import selected services( 匯 入 選 取 的 服 務 ) 在 Services 服 務 的 子 目 錄 下 可 以 看 到 兩 個 服 務 已 經 自 動 產 生 一 個 是 Settings 設 定 服 務, 將 會 為 資 料 庫 的 API 把 關, 以 及 另 一 個 是 REST 接 收 資 料 庫 中 資 料 的 服 務 : 5. 打 開 WarehouseDB_Merchandise_list_service. 你 會 看 到 所 有 你 需 要 的 東 西, 包 含 URL 需 求 及 回 應 參 數 6. 轉 換 到 Test 測 試 按 鍵 你 可 以 在 此 測 試 服 務 ( 與 執 行 指 令 相 同 ) 點 選 Test( 測 試 ) 你 可 以 看 到 資 料 集 中 你 創 建 的 主 題
連 結 服 務 1. 打 開 startscreen 並 轉 換 到 Data 資 料, 按 鍵 就 在 元 件 板 的 左 邊 2. 要 新 增 資 料 來 源 Add datasource, 點 選 Service > WarehouseDB_Merchandise_list_service. 點 選 Add( 新 增 ) 這 個 服 務 便 會 加 到 頁 面 中 3. 要 連 結 服 務 到 頁 面 中, 點 選 Edit Mapping 編 輯 製 圖 4. 需 求 部 分 不 需 要 特 別 編 輯, 資 料 庫 的 相 關 設 定 已 經 在 Settings 設 定 服 務 中 設 定 好 了 轉 換 到 Response 回 應 的 部 分 5. 進 行 如 下 的 配 對 展 開 $, startscreen, mobilelist_2, 以 及 mobilelistitem_3, and 然 後 進 行 拖 放 :
o 配 對 $ 到 清 單 中 能 夠 讓 我 們 有 自 動 迴 圈 的 特 色 這 也 使 你 能 夠 展 示 所 有 自 資 料 庫 來 的 專 案 o Item( 項 目 ) 是 商 品 的 名 字, 而 且 要 跟 清 單 中 屬 性 裡 的 Text( 內 文 ) 彼 此 相 連 啟 用 服 務 1. 前 往 Design 設 計 面 版, 自 樣 式 中 選 擇 startscreen ( 螢 幕 起 始 ) 2. 打 開 Events 事 件, 位 置 在 螢 幕 下 方 將 事 件 欄 位 改 成 Page show ( 頁 面 顯 示 ) 新 增 事 件 則 選 擇 Invoke Service > restservice1 點 選 Add event ( 新 增 事 件 ) 3. 點 選 Save ( 儲 存 ), 位 於 螢 幕 的 左 上 方 App 上 線
點 選 Test ( 測 試 ) 將 app 放 在 流 覽 器 中 ( 當 你 測 試 app 時, 它 就 在 流 覽 器 了, 並 非 模 擬 ) app 在 行 動 裝 置 上 使 用 要 讓 app 在 行 動 裝 置 上 使 用, 你 可 以 掃 描 QR 碼 首 先, 請 要 讓 app 能 公 開 請 確 認 已 勾 選 Public ( 公 開 ) 如 果 你 的 手 機 沒 有 QR 碼 讀 取 器, 你 可 以 將 連 結 ( 不 要 外 框 ) 用 電 子 郵 件 方 式 寄 到 你 的 裝 置 在 Android 中 公 開
要 將 app 放 上 Android, 點 選 Export ( 匯 出 ) 點 擊 Binary app 下 方 的.apk 鈕 開 始 進 行 Android 設 定 請 注 意 建 立.apk 的 檔 案 需 要 大 約 40-50 秒 當 建 立 完 成 時, 你 會 發 現.apk 的 檔 案 能 被 下 載, 而 你 也 能 看 到 QR 碼 : 你 可 以 掃 描 這 個 QR 碼 直 接 將 檔 案 下 載 到 你 的 Android 手 機 並 進 行 安 裝 增 加 自 家 特 色 增 加 一 些 原 設 備 功 能 的 功 能 到 app 能 加 分 不 少 為 了 操 作 容 易, 你 可 以 新 增 一 個 鈕, 當 點 擊 此 鈕, 你 可 以 說 明 這 個 設 備 的 資 訊, 以 及 Apache Cordova (PhoneGap) 的 使 用 版 本
1. 拖 拉 一 個 鈕, 放 到 Button 頁 尾 更 改 內 文 為 Device Info( 裝 置 資 訊 ) 在 屬 性 中, 將 Corners( 轉 角 ) 的 勾 選 取 消 即 可 使 轉 角 變 為 正 方 形 2. 點 選 按 鈕 並 將 Events( 事 件 ) 版 打 開 3. 此 時 按 鈕 及 點 選 事 件 都 已 被 選 取 選 擇 Run JavaScript 開 始 跑 JavaScript 4. 貼 上 下 方 的 JavaScript 程 式 碼 : 1 var msg = 'Model: '+ device.model+'\ncordova: '+device.cordova+'\nplatform: '+device.platform; 2 3 4 5 6 7 8 9 10 navigator.notification.alert( msg, alertwindowclosed, 'Appery.io App', 'Close' ); function alertwindowclosed() { // do nothing for now 11 } 5. 點 選 Add event ( 新 增 事 件 ), 然 後 按 Save ( 儲 存 ) 使 用 Appery.io Tester 測 試 器 測 機 上 app 由 於 這 個 API 會 運 用 裝 置 功 能, 你 可 以 不 用 再 在 流 覽 器 上 做 測 試 一 個 方 法 是 建 立 再 建 一 個 二 進 位, 然 後 在 你 的 裝 置 上 進 行 更 新 另 一 個 ( 比 較 好 的 ) 方 法 是 用 Appery.io Tester 進 行 測 試
Appery.io 測 試 器 (Appery.io Tester) 是 一 個 在 地 的 app, 用 來 讓 你 測 試 在 Appery.io 建 立 的 app Appery.io 測 試 器 讓 整 個 測 試 過 程 變 得 簡 單 因 為 你 不 需 要 每 做 一 個 改 變 就 重 新 安 裝 一 次 app Appery.io 測 試 器 免 費, 在 iphone 及 Android 都 是 開 放 的 資 源 在 Android 中, 你 可 以 在 Google Play Store 中 找 到 這 個 app. 一 旦 這 個 app 安 裝 完 成, 請 點 選 開 並 登 入 ( 使 用 你 的 http://appery.io 認 證 資 訊 ) 在 清 單 中 找 到 你 的 app, 輕 點 一 下 即 可 進 行 測 試 在 iphone 中,Appery.io 測 試 器 的 資 源 碼 要 以 open source project 下 載, 請 遵 循 readme.txt 檔 案 中 的 指 示, 有 一 個 文 字 檔, 名 為 How to Build an ios Binary 移 動 式 網 路 app 上 線 你 也 可 以 把 你 的 app 放 在 Appery.io, 或 者 你 自 己 的 網 域, 做 為 一 個 移 動 式 網 路 app 在 app 建 造 器 中, 點 選 Back to app list( 回 app 清 單 ) ( 左 上 方 ), 捲 軸 向 下 到 Hosting 主 控 區
輸 入 你 想 要 放 置 app 的 網 域, 並 點 選 Publish( 上 線 ), 幾 秒 後 你 的 app 就 可 以 在 name.app.appery.io. 中 見 到