文章

數位實境教學整合系統 – 老師端平板 APP

公司簡介

帝旺數位科技有限公司 (D-WON) 為數位內容多媒體製造公司,以製作國中小英語課外教材為主、創新、熱忱、關懷為公司經營之理念。

App 功能說明

此 App 主要為數位實境教學整合系統的裝置之一,提供授課老師使用,操作平板電腦 App 與主機連動,可以在離開電腦狀態下,一邊展示教材給同學觀看、一邊進行解說。

除了移動中操控要展示的教材之外,也可搭配其它教學設備,透過 App 與同學進行即時問答、搶答,或進行隨機叫號 (抽籤) 等師生間的互動。

App 設計畫面展示

老師平板 App - 數位實境教學整合系統 (帝旺數位) - 教學監控

老師平板 App - 數位實境教學整合系統 (帝旺數位) - 即時問答

老師平板 App - 數位實境教學整合系統 (帝旺數位) - 搶答

老師平板 App - 數位實境教學整合系統 (帝旺數位) - 抽籤

延伸閱讀

Windows Store App 開發參考規格表

Windows Store App 為近來 App 大戰中的後起之秀,但隨著 Windows 8 上市,整個 Windows Store App 應用範圍已是愈來愈廣。

與 iOS App 、 Android App 不同的是, Windows Store App 可以原生支援更多種程式語言來開發。對於開發人員來說,選擇的彈性更多了。而 HTML5 + Java Script 的原生支援,與其它平台只能用在 Web App 或混合式 App 不同,有其獨特的優勢。

並且自 Windows Phone 7 起的 Metro Style 介面,也走出與 iOS 及 Android 不同的風格,別有一番特色。

Microsoft Windows App 開發參考規格表
作業系統廠商 Microsoft
裝置類型 Windows Phone 手機 Windows 電腦 (ARM) Windows 電腦 (x86/x64)
最新作業系統 Windows Phone 8.1 Windows 8.1 RT Windows 8.1
應用程式商店 Windows Phone Store Windows Store Windows Store
主要開發工具 Visual Studio Visual Studio Visual Studio
SDK Windows Phone SDK 8.1 Windows 8.1 SDK Windows 8.1 SDK
主要程式語言 C / C++
C# / VB.NET
HTML5 + Java Script
XAML + C / C++
XAML + C# / VB.NET
DirectX + C++
HTML5 + Java Script
XAML + C / C++
XAML + C# / VB.NET
DirectX + C++
HTML5 + Java Script
參考型號
  • HTC 8X (Accord)
  • Nokia Lumia 920
  • Microsoft Surface
  • Acer Aspire S7
  • Microsoft Surface Pro
預設瀏覽器 Internet Explorer Mobile 11 Internet Explorer 11 Internet Explorer 11
排版引擎 Trident Trident Trident
Java Script 引擎 Chakra Chakra Chakra
HTML5 支援度 未知 78 % 78 %
  • 以上資訊為博全科技彙整,僅供 App 開發參考。相關資訊可能隨著時間而有所改變,一切應以 Microsoft 網站提供之最新資訊為準。
  • 以上未特別註明的「電腦」即泛指包含「平板電腦、筆記型電腦、桌面型電腦」的裝置。
  • HTML5 支援度之數據,為 caniuse.com 網站之統計結果。
<< 上一篇: Android App 規格表 [ App 開發簡介 ]

Android App 開發參考規格表

Android App 是繼 iOS App 之後,第二大的 App 陣營。開放式的 Android 作業系統,讓更多手機及平板電腦廠商都能夠預載 Android 系統,因此能執行 Android 的裝置數量也成長的很快速。

Android App 能夠在 Windows 、 Mac 、 Linux 等系統上進行開發,開發環境隨手可得,因此有許多開發人員都是由 Android App 開始。

Google Android App 開發參考規格表
作業系統廠商 Google
裝置類型 Android 手機 Android 電腦
最新作業系統 Android 8.0 (Oreo) Android 8.0 (Oreo)
應用程式商店 Google Play Google Play
主要開發工具 Android Studio
Eclipse for Java
Android Studio
Eclipse for Java
SDK Android SDK Android SDK
主要程式語言 Kotlin 、 Java Kotlin 、 Java
參考型號
  • HTC One X
  • HTC One XL
  • HTC One S
  • HTC One A9
  • Asus Nexus 7
  • Asus Transformer Pad TF300
預設瀏覽器 Android Browser Android Browser
排版引擎 WebKit WebKit
Java Script 引擎 V8 V8
HTML5 支援度 67 % 67 %
  • 以上資訊為博全科技彙整,僅供 App 開發參考。相關資訊可能隨著時間而有所改變,一切應以 Google Android 網站提供之最新資訊為準。
  • 以上未特別註明的「電腦」即泛指包含「平板電腦、筆記型電腦、桌面型電腦」的裝置。
  • HTML5 支援度之數據,為 caniuse.com 網站之統計結果。
<< 上一篇: iOS App / Mac App 規格表 [ App 開發簡介 ] 下一篇: Windows App 規格表 >>

iOS App / Mac OS App 開發參考規格表

由於 iPhone 、 iPad 的熱賣, iOS App 不但是 App 大戰的先鋒,也擁有最多、最熱門的 App ,最多人想開發的就是 iOS App 。

iOS App 必須在 Mac 電腦上透過 Xcode 工具開發及編譯,造成 iOS App 在開發上的一些門檻。但 iOS App 的執行效能較佳,且 Apple 的死忠用戶眾多、也較能接受付費 App 下載,因此 iOS App 的開發仍然相當炙手可熱。

Apple iOS App / Mac OS App 開發參考規格表
作業系統廠商 Apple
裝置類型 iPhone 手機 iPod touch
媒體播放器
iPad 平板電腦 Mac 電腦
最新作業系統 iOS 11 iOS 11 iOS 11 OS X Yosemite
應用程式商店 App Store App Store App Store Mac App Store
主要開發工具 Xcode Xcode Xcode Xcode
SDK iOS SDK (Cocoa Touch frameworks) Cocoa frameworks
主要程式語言 Objective-C
Swift
Objective-C
Swift
Objective-C
Swift
Objective-C
Swift
參考型號
  • iPhone 4S
  • iPhone 5
  • iPhone 5S
  • iPhone 6
  • iPhone 6S
  • iPhone 7
  • iPhone 8
  • iPhone 8 Plus
  • iPhone X
  • iPhone SE
  • iPod touch
    第四代
  • iPod touch
    第五代
  • iPad
  • iPad Air
  • iPad Pro
  • MacBook
  • MacBook Air
  • MacBook Pro
  • Mac Pro
  • Mac mini
  • iMac
  • iMac Pro
預設瀏覽器 iOS Safari iOS Safari iOS Safari Safari
排版引擎 WebKit WebKit WebKit WebKit
Java Script 引擎 Nitro Nitro Nitro Nitro
HTML5 支援度 73 % 73 % 73 % 82 %
  • 以上資訊為博全科技彙整,僅供 App 開發參考。相關資訊可能隨著時間而有所改變,一切應以 Apple 網站提供之最新資訊為準。
  • 以上未特別註明的「電腦」即泛指包含「平板電腦、筆記型電腦、桌面型電腦」的裝置。
  • HTML5 支援度之數據,為 caniuse.com 網站之統計結果。
<< 上一篇: 混合式 App 開發 [ App 開發簡介 ] 下一篇: Android App 規格表 >>

混合式 App 程式開發

混合式 App 的定義

混合式應用程式 (Hybrid App) 開發在此指的是,以一般以 Web App 方式開發用戶端程式,但最後可在包裝後像 原生 App 一樣上架至應用程式商店的作法。

以下是一般混合式 App 的開發及執行模式:

  • 前端使用 HTML / XHTML / HTML5 + CSS + Java Script … 等網頁標準技術製作。
  • 透過 PhoneGap … 等框架工具跟行動裝置硬體設備互動,或加上部份原生程式,並包裝成原生 App 的外殼。
  • 上架至應用程式商店供人下載執行。

優點

  • 就像 Web App 那樣,前端操作介面可使用統一的網頁技術來做 (推薦用 HTML5 實作) ,可以跨較多裝置平台,不必為不同裝置維護多種程式語言版本。
  • 有些框架工具,可讓混合式 App 也能像原生 App 般,控制硬體裝置。例如:相機功能、 GPS 地理定位、測速計、磁力計、陀螺儀 … 等。
  • 可以在官方線上 App 商店上架,設定下載 App 的人是否要付錢,用以賺取費用。
  • 使用已安裝的 App 時,不需要開瀏覽器及輸入網址。

缺點

  • 混合式 App 開發方式,在不同裝置仍可能需要透過不同開發工具,分開編譯 (Compile) 包裝之後,才能進行功能測試。
  • 較需複雜運算的功能或遊戲,用混合式 App 開發方式,效能可能還是比不上原生 App 。
  • 對硬體裝置的支援度仍比不上原生 App 。
  • App 程式若有更新,就需要重新上架、審核,而使用者也必須更新或重新下載,才能使用新的功能。
<< 上一篇: Web App 開發 [ App 開發簡介 ] 下一篇: iOS App / Mac App 規格表 >>

Web App 程式開發

Web App 的定義

Web App 即網頁應用程式 (Web Application) 的簡稱。

Web App 本身透過網頁瀏覽器操作執行,在 Web 2.0 這個名詞風行時,由於許多網站平台已經由單純的官方網站,變成更具功能性、互動性的網站系統,因此 Web 應用程式這名詞也開始被愈來愈多人使用。

而我們以下所指的 Web App ,主要以行動裝置上的瀏覽器應用為主,所以又經常被稱為行動網頁 App (Mobile App) 。

以下是一般 Web App 的開發及執行模式:

  • 前端網頁使用 HTML / XHTML / HTML5 + CSS + Java Script … 等網頁標準技術製作。
  • 後端使用 PHP 、 ASP.NET 、 JSP 、 RoR … 等程式語言開發,並連結資料庫或其它資料來源。
  • 透過瀏覽器輸入網址後執行。

優點

  • 通常在不同的裝置上, Web App 只需要用相同的前端網頁技術來開發即可,不需要使用不同程式語言來開發。 (通常被稱作跨平台)
  • 開發過程中, Web App 只要使用裝置的瀏覽器輸入網址即可執行測試。若有任何問題,程式修改後,可以快速的進行測試,甚至有時只需要簡單的重新整理網頁即可。
  • Web App 不需要支付官方開發者年費,也不需要至官方應用程式商店上架、審核或讓官方抽成。
  • Web App 有任何功能更新,只需要在後端網站主機修改即可,使用者不需要重新下載安裝,就可以隨時使用最新的功能。

缺點

  • Web App 執行速度沒有原生應用程式來的快,較不適合需要極快速反應的程式、複雜的動畫、遊戲 … 等。
  • Web App 對硬體裝置的支援度不好,許多硬體上的功能可能無法使用。例如:相機功能、 GPS 地理定位、測速計、磁力計、陀螺儀 … 等。
  • Web App 依賴瀏覽器執行,而瀏覽器的種類繁多,對網頁技術的支援性也有些不同,雖然大都能夠執行,但 UI 畫面較不同易達到一致,且部份功能需要針對不同瀏覽器做不同的處理。
  • 行動裝置執行 Flash 功能多有限制,在行動裝置網頁上顯示 2D 動畫、 3D 動畫、影片通常並不容易。 (但行動裝置目前對新的 HTML5 標準支援愈來愈好,採用 HTML5 將會對網頁的功能性及效能獲得許多改善)
  • 需要打開瀏覽器及輸入網址才能執行 Web App ,感覺較麻煩。 (透過加入成為書籤、設定於主畫面螢幕點選執行、或提供 QR Code 讓行動裝置掃描,可以得到一些改善)
  • 在網路斷線的狀態下, Web App 有可能完全無法繼續操作。 (除非在開發時一併開發離線支援功能)
<< 上一篇: 原生 App 開發 [ App 開發簡介 ] 下一篇: 混合式 App 開發 >>

頁面

數位實境教學整合系統 – 老師端平板 APP

公司簡介

帝旺數位科技有限公司 (D-WON) 為數位內容多媒體製造公司,以製作國中小英語課外教材為主、創新、熱忱、關懷為公司經營之理念。

App 功能說明

此 App 主要為數位實境教學整合系統的裝置之一,提供授課老師使用,操作平板電腦 App 與主機連動,可以在離開電腦狀態下,一邊展示教材給同學觀看、一邊進行解說。

除了移動中操控要展示的教材之外,也可搭配其它教學設備,透過 App 與同學進行即時問答、搶答,或進行隨機叫號 (抽籤) 等師生間的互動。

App 設計畫面展示

老師平板 App - 數位實境教學整合系統 (帝旺數位) - 教學監控

老師平板 App - 數位實境教學整合系統 (帝旺數位) - 即時問答

老師平板 App - 數位實境教學整合系統 (帝旺數位) - 搶答

老師平板 App - 數位實境教學整合系統 (帝旺數位) - 抽籤

延伸閱讀

Windows Store App 開發參考規格表

Windows Store App 為近來 App 大戰中的後起之秀,但隨著 Windows 8 上市,整個 Windows Store App 應用範圍已是愈來愈廣。

與 iOS App 、 Android App 不同的是, Windows Store App 可以原生支援更多種程式語言來開發。對於開發人員來說,選擇的彈性更多了。而 HTML5 + Java Script 的原生支援,與其它平台只能用在 Web App 或混合式 App 不同,有其獨特的優勢。

並且自 Windows Phone 7 起的 Metro Style 介面,也走出與 iOS 及 Android 不同的風格,別有一番特色。

Microsoft Windows App 開發參考規格表
作業系統廠商 Microsoft
裝置類型 Windows Phone 手機 Windows 電腦 (ARM) Windows 電腦 (x86/x64)
最新作業系統 Windows Phone 8.1 Windows 8.1 RT Windows 8.1
應用程式商店 Windows Phone Store Windows Store Windows Store
主要開發工具 Visual Studio Visual Studio Visual Studio
SDK Windows Phone SDK 8.1 Windows 8.1 SDK Windows 8.1 SDK
主要程式語言 C / C++
C# / VB.NET
HTML5 + Java Script
XAML + C / C++
XAML + C# / VB.NET
DirectX + C++
HTML5 + Java Script
XAML + C / C++
XAML + C# / VB.NET
DirectX + C++
HTML5 + Java Script
參考型號
  • HTC 8X (Accord)
  • Nokia Lumia 920
  • Microsoft Surface
  • Acer Aspire S7
  • Microsoft Surface Pro
預設瀏覽器 Internet Explorer Mobile 11 Internet Explorer 11 Internet Explorer 11
排版引擎 Trident Trident Trident
Java Script 引擎 Chakra Chakra Chakra
HTML5 支援度 未知 78 % 78 %
  • 以上資訊為博全科技彙整,僅供 App 開發參考。相關資訊可能隨著時間而有所改變,一切應以 Microsoft 網站提供之最新資訊為準。
  • 以上未特別註明的「電腦」即泛指包含「平板電腦、筆記型電腦、桌面型電腦」的裝置。
  • HTML5 支援度之數據,為 caniuse.com 網站之統計結果。
<< 上一篇: Android App 規格表 [ App 開發簡介 ]

Android App 開發參考規格表

Android App 是繼 iOS App 之後,第二大的 App 陣營。開放式的 Android 作業系統,讓更多手機及平板電腦廠商都能夠預載 Android 系統,因此能執行 Android 的裝置數量也成長的很快速。

Android App 能夠在 Windows 、 Mac 、 Linux 等系統上進行開發,開發環境隨手可得,因此有許多開發人員都是由 Android App 開始。

Google Android App 開發參考規格表
作業系統廠商 Google
裝置類型 Android 手機 Android 電腦
最新作業系統 Android 8.0 (Oreo) Android 8.0 (Oreo)
應用程式商店 Google Play Google Play
主要開發工具 Android Studio
Eclipse for Java
Android Studio
Eclipse for Java
SDK Android SDK Android SDK
主要程式語言 Kotlin 、 Java Kotlin 、 Java
參考型號
  • HTC One X
  • HTC One XL
  • HTC One S
  • HTC One A9
  • Asus Nexus 7
  • Asus Transformer Pad TF300
預設瀏覽器 Android Browser Android Browser
排版引擎 WebKit WebKit
Java Script 引擎 V8 V8
HTML5 支援度 67 % 67 %
  • 以上資訊為博全科技彙整,僅供 App 開發參考。相關資訊可能隨著時間而有所改變,一切應以 Google Android 網站提供之最新資訊為準。
  • 以上未特別註明的「電腦」即泛指包含「平板電腦、筆記型電腦、桌面型電腦」的裝置。
  • HTML5 支援度之數據,為 caniuse.com 網站之統計結果。
<< 上一篇: iOS App / Mac App 規格表 [ App 開發簡介 ] 下一篇: Windows App 規格表 >>

iOS App / Mac OS App 開發參考規格表

由於 iPhone 、 iPad 的熱賣, iOS App 不但是 App 大戰的先鋒,也擁有最多、最熱門的 App ,最多人想開發的就是 iOS App 。

iOS App 必須在 Mac 電腦上透過 Xcode 工具開發及編譯,造成 iOS App 在開發上的一些門檻。但 iOS App 的執行效能較佳,且 Apple 的死忠用戶眾多、也較能接受付費 App 下載,因此 iOS App 的開發仍然相當炙手可熱。

Apple iOS App / Mac OS App 開發參考規格表
作業系統廠商 Apple
裝置類型 iPhone 手機 iPod touch
媒體播放器
iPad 平板電腦 Mac 電腦
最新作業系統 iOS 11 iOS 11 iOS 11 OS X Yosemite
應用程式商店 App Store App Store App Store Mac App Store
主要開發工具 Xcode Xcode Xcode Xcode
SDK iOS SDK (Cocoa Touch frameworks) Cocoa frameworks
主要程式語言 Objective-C
Swift
Objective-C
Swift
Objective-C
Swift
Objective-C
Swift
參考型號
  • iPhone 4S
  • iPhone 5
  • iPhone 5S
  • iPhone 6
  • iPhone 6S
  • iPhone 7
  • iPhone 8
  • iPhone 8 Plus
  • iPhone X
  • iPhone SE
  • iPod touch
    第四代
  • iPod touch
    第五代
  • iPad
  • iPad Air
  • iPad Pro
  • MacBook
  • MacBook Air
  • MacBook Pro
  • Mac Pro
  • Mac mini
  • iMac
  • iMac Pro
預設瀏覽器 iOS Safari iOS Safari iOS Safari Safari
排版引擎 WebKit WebKit WebKit WebKit
Java Script 引擎 Nitro Nitro Nitro Nitro
HTML5 支援度 73 % 73 % 73 % 82 %
  • 以上資訊為博全科技彙整,僅供 App 開發參考。相關資訊可能隨著時間而有所改變,一切應以 Apple 網站提供之最新資訊為準。
  • 以上未特別註明的「電腦」即泛指包含「平板電腦、筆記型電腦、桌面型電腦」的裝置。
  • HTML5 支援度之數據,為 caniuse.com 網站之統計結果。
<< 上一篇: 混合式 App 開發 [ App 開發簡介 ] 下一篇: Android App 規格表 >>

混合式 App 程式開發

混合式 App 的定義

混合式應用程式 (Hybrid App) 開發在此指的是,以一般以 Web App 方式開發用戶端程式,但最後可在包裝後像 原生 App 一樣上架至應用程式商店的作法。

以下是一般混合式 App 的開發及執行模式:

  • 前端使用 HTML / XHTML / HTML5 + CSS + Java Script … 等網頁標準技術製作。
  • 透過 PhoneGap … 等框架工具跟行動裝置硬體設備互動,或加上部份原生程式,並包裝成原生 App 的外殼。
  • 上架至應用程式商店供人下載執行。

優點

  • 就像 Web App 那樣,前端操作介面可使用統一的網頁技術來做 (推薦用 HTML5 實作) ,可以跨較多裝置平台,不必為不同裝置維護多種程式語言版本。
  • 有些框架工具,可讓混合式 App 也能像原生 App 般,控制硬體裝置。例如:相機功能、 GPS 地理定位、測速計、磁力計、陀螺儀 … 等。
  • 可以在官方線上 App 商店上架,設定下載 App 的人是否要付錢,用以賺取費用。
  • 使用已安裝的 App 時,不需要開瀏覽器及輸入網址。

缺點

  • 混合式 App 開發方式,在不同裝置仍可能需要透過不同開發工具,分開編譯 (Compile) 包裝之後,才能進行功能測試。
  • 較需複雜運算的功能或遊戲,用混合式 App 開發方式,效能可能還是比不上原生 App 。
  • 對硬體裝置的支援度仍比不上原生 App 。
  • App 程式若有更新,就需要重新上架、審核,而使用者也必須更新或重新下載,才能使用新的功能。
<< 上一篇: Web App 開發 [ App 開發簡介 ] 下一篇: iOS App / Mac App 規格表 >>

Web App 程式開發

Web App 的定義

Web App 即網頁應用程式 (Web Application) 的簡稱。

Web App 本身透過網頁瀏覽器操作執行,在 Web 2.0 這個名詞風行時,由於許多網站平台已經由單純的官方網站,變成更具功能性、互動性的網站系統,因此 Web 應用程式這名詞也開始被愈來愈多人使用。

而我們以下所指的 Web App ,主要以行動裝置上的瀏覽器應用為主,所以又經常被稱為行動網頁 App (Mobile App) 。

以下是一般 Web App 的開發及執行模式:

  • 前端網頁使用 HTML / XHTML / HTML5 + CSS + Java Script … 等網頁標準技術製作。
  • 後端使用 PHP 、 ASP.NET 、 JSP 、 RoR … 等程式語言開發,並連結資料庫或其它資料來源。
  • 透過瀏覽器輸入網址後執行。

優點

  • 通常在不同的裝置上, Web App 只需要用相同的前端網頁技術來開發即可,不需要使用不同程式語言來開發。 (通常被稱作跨平台)
  • 開發過程中, Web App 只要使用裝置的瀏覽器輸入網址即可執行測試。若有任何問題,程式修改後,可以快速的進行測試,甚至有時只需要簡單的重新整理網頁即可。
  • Web App 不需要支付官方開發者年費,也不需要至官方應用程式商店上架、審核或讓官方抽成。
  • Web App 有任何功能更新,只需要在後端網站主機修改即可,使用者不需要重新下載安裝,就可以隨時使用最新的功能。

缺點

  • Web App 執行速度沒有原生應用程式來的快,較不適合需要極快速反應的程式、複雜的動畫、遊戲 … 等。
  • Web App 對硬體裝置的支援度不好,許多硬體上的功能可能無法使用。例如:相機功能、 GPS 地理定位、測速計、磁力計、陀螺儀 … 等。
  • Web App 依賴瀏覽器執行,而瀏覽器的種類繁多,對網頁技術的支援性也有些不同,雖然大都能夠執行,但 UI 畫面較不同易達到一致,且部份功能需要針對不同瀏覽器做不同的處理。
  • 行動裝置執行 Flash 功能多有限制,在行動裝置網頁上顯示 2D 動畫、 3D 動畫、影片通常並不容易。 (但行動裝置目前對新的 HTML5 標準支援愈來愈好,採用 HTML5 將會對網頁的功能性及效能獲得許多改善)
  • 需要打開瀏覽器及輸入網址才能執行 Web App ,感覺較麻煩。 (透過加入成為書籤、設定於主畫面螢幕點選執行、或提供 QR Code 讓行動裝置掃描,可以得到一些改善)
  • 在網路斷線的狀態下, Web App 有可能完全無法繼續操作。 (除非在開發時一併開發離線支援功能)
<< 上一篇: 原生 App 開發 [ App 開發簡介 ] 下一篇: 混合式 App 開發 >>