App開發教學案例設計

鐘元生　曹權

摘 要：為幫助高校更好開設App實踐課程，給出一個綜合教學案例——“豹考通”App開發的全過程。該教學案例包括App開發流程、服務器端、Android客戶端、IOS客戶端和數據庫端的設計等，不僅適合大學生在項目實驗中體會較大規模的App開發全過程，也適合于小組分工協作開發App軟件的參照模板。

關鍵詞：教學案例設計；App開發；移動應用；實踐教學

中圖分類號：G40-057 文獻標識碼：A

Abstract：To help universities better open app practical courses.It gives a comprehensive teaching case-"BaoKaoTong" app whole process of development.The case not only for college students experience a large-scale development of the whole process of app experiment，but also a reference template for group division of labor app software development.

Keywords：teaching case design；mobile application development；mobile applications；practice teaching

1 引言（Introduction）

案例教學法是在法律、醫學、工商管理等學科及師資培訓中取得了很大的成功。近幾年，越來越多的學者在信息技術、生物、數學、心理學、地理、工程技術等學科中也開始嘗試采用案例教學方法，國外在案例教學領域有著深厚的研究，Barbara Barry Levin在1996年提到在教師在教學中運用案例教學方法[1]，而且Laurence.E Lynn Jr在1999年還出版了關于案例教學的指南[2]。我們在大學安卓編程案例設計上也做了一些研究[3]。

當前計算機或軟件工程專業的學生存在著學用脫節、實際開發能力偏弱等問題，事實上，學生雖然接受了系統的軟件開發專業知識的學習和軟件開發技術應用的訓練，但軟件開發能力低下的情況還相當普遍[4]。在這種教學方式下，通常導致培養的學生實踐能力不足[5]。

為了解決上述問題，我們結合自己研發的一個實用App“豹考通”，在對其程序功能進行適當精簡的基礎上，開發了一個App綜合教學案例。本文簡要介紹之。詳情可參考即將在清華大學出版社出版的教材《App開發案例教程》。

2 App開發流程教學設計（Teaching design of app development process）

一個完整的軟件開發分為網頁端與移動端（App），而移動端又包括Android端和IOS端。

（1）服務器框架搭建

開發流程如圖1所示。

服務器端設計是移動項目設計中很重要的一個部分，如果說客戶端負責為用戶展現數據，那么服務器端可以說是為用戶準備數據。只有服務器端將用戶所需要的數據準備完畢后，客戶端才有可能去展示。

（2）數據庫設計與部署

對于移動App開發，數據庫的選擇就顯得至關重要，因為數據存儲結構、讀取速度直接影響到用戶體驗，盡量使用輕量級數據庫，這里我們使用的是MySQL。

數據庫開發分為邏輯結構設計和物理結構設計。

（3）服務器端實現

服務器端的實現是在MyEclipse 8中實現。配置開發環境，配置完成后，在MyEclipse 8中創建“豹考通”工程。

（4）客戶端框架搭建

客戶端開發流程簡圖如圖2所示。

（5）界面及素材設計和界面跳轉設計

項目素材制作的標準要按照Android和IOS開發要求制作，而且界面跳轉不宜過多。

（6）模塊類的實現

根據項目的需求分析，在項目中分別創建模塊文件夾，然后分別對功能模塊進行設計與實現。

（7）網絡數據讀取接口

網絡數據讀取接口由服務器端提供，包括網址和需要的參數，客戶端發送相應的參數請求從服務器端獲取運行結果，最后由客戶端呈現在用戶眼前。網絡數據接口形式如下：

http：//localhost/zhushou/RequestControlLinesAction.action？c=0&y=2013&s=14&b=0。

（8）編譯打包及測試

移動應用編譯打包、測試及發布上線的簡易流程如圖3所示。

對于Android端應用，需要在項目中打包生成APK文件；而對于IOS端應用，需要將其打包成ipa文件。

編譯打包完成后，可以在其他成員的手機上安裝測試，看有沒有問題出現。如果有，立即對程序進行調試；如果沒有，就可以在商店中發布上線了。

（9）發布上線

相對于IOS發布過程來說，Android應用的發布比較簡單；而IOS應用的發布審核相對來說更為嚴格，一些細節問題的出現都會讓Apple公司拒絕，如果是發布在第三方商店，如91助手，審核相對順利。所以在開發過程中，需要多參考Apple公司的文檔，這樣有利于審核的通過。

3 App開發教學用例（Teaching case of app development）

3.1 案例功能設計

“豹考通”App是一款面向全國高考學子和各大院校教師的新型App，服務考生和高校，借助智能手機幫助考生在填報志愿時掌握全面信息，提供數據跟蹤記錄和深度分析，供考生參考，并在高校與考生之間搭建一條新的交流途徑。

App已經在各大App商店上架，讀者可以先下載使用。

綜合考慮市場需求，豹考通主要實現了以下6個功能。

（1）省控線查詢：查詢各省市高考省控線信息，方便用戶查找，不需要到網上去搜集信息。

（2）投檔線查詢：查詢全國各院校的投檔線信息。

（3）生成投檔線曲線圖：根據用戶的信息選擇，系統會為用戶生成近幾年的投檔線和省控線的一個曲線圖，更加直觀的顯示分數的變化波動情況，供用戶參考。

（4）預測投檔線：根據往年投檔線情況，采用系統的算法，根據用戶不同的選擇，預測今年各學校投檔線情況。

（5）推薦學校：推薦學校可以為用戶推薦一些感興趣并且有機會能投檔的院校，幫助用戶做出報考選擇。

（6）生成預測推薦報告：報告是根據用戶選擇的參數進行生成，報告的內容包括今年投檔線的預測和推薦的所有機會投檔大學等名單，為用戶的最終選擇提供參考。

圖4和圖5分別給出Android和IOS客戶端的代表界面。

案例中訪問服務器的部分，均使用www.10LAB.cn作為我們的服務器地址，所有的程序、軟件包及源代碼都可以從此網站中獲取，當然讀者也可以自己搭建本地服務器（訪問局域網），具體的本地服務器搭建方法見后。圖6為客戶端服務器網絡連接示意圖。

3.2 案例所涉源代碼

打開學習網站http：//www.10LAB.cn/resource.html，下載本文所涉源碼壓縮包——SourceCode，包中包括四個部分：

這些代碼包括數據庫端、服務器端、Android端和IOS端四個部分，“→”符號代表文件夾，即打開后還有文件。

（1）數據庫端源碼清單

SourceCode->Chapter3->Database

createTable.sql--創建數據庫表

InsertAction.sql--插入數據

DeleteAction.sql--刪除數據

ModifyAction.sql--修改數據

createbatchTable.sql--創建批次表

insertbatchTable.sql--向批次表插入數據

createcategoryTable.sql--創建科類表

insertcategoryTable.sql--向科類表插入數據

（2）服務器端源碼清單

SourceCode->Chapter4->Server

server.xml--綁定域名文件（xml）

Hello_BaoKaoTong.java--新建服務器類

index.jsp--編輯JSP頁面

->Zhushou

JsonAction.java--Json解析類

struts.xml--增加Json類中方法

ControlLineAdapter.java--省控線查詢Adapter類

（3）Android端源碼清單

SourceCode->Chapter6->Android

->NewScore_test

OpenDoorActivity.java--開門動畫類

->res

->layout

content_frame.xml--程序主界面布局

fragment_enroll.xml--學校錄取線頁面布局

->values

Styles.xml--菜單Menu布局

->drawable

menu_btn.xml--特殊圖片狀態布局

menu_pressed.xml--按下按鈕狀態

menu_unpressed.xml--按鈕未按下狀態

->src

MainActivity.java--主界面相關事件

->score

EnrollScoreFragment.java--查詢學校錄取線事件

EnrollScoreResultFragment.java--查詢結果布局

TrendView.java--生成趨勢曲線事件

->util

AccessToServer.java--服務器端訪問工具類

（4）IOS端源碼清單

SourceCode->Chapter8->IOS->NewScore_test

->GaoKaoHelper

->GaoKaoHelper.proj--XCode項目程序（執行程序）

->GaoKaoHelper.test--項目測試包

->GaoKaoHelper--源代碼包

AppDelegate.h--程序監聽接口頭文件

AppDelegate.m--程序監聽接口實現文件

Main.m--程序入口方法

BaseViewController.h--根視圖頭文件

BaseViewController.m-根視圖實現文件

BaseNavigationController.h--基導航控制器頭文件

BaseNavigationController.m--基導航控制器實現文件

myScoreViewController.h--我的高考模塊頭文件

myScoreViewController.m--我的高考模塊實現文件

shengyuandiViewController.h--生源地選擇控制器頭文件

shengyuandiViewController.m--實現生源地選擇控制器

subjectViewController.h--科類選擇控制器頭文件

subjectViewController.m--科類選擇控制器實現文件

batchViewController.h--批次選擇控制器頭文件

batchViewController.m--批次選擇控制器實現文件

recommendViewController.h--推薦學校模塊基視圖頭文件

recommendViewController.m--推薦學校模塊基視圖實現文件

SchoolInfoViewController.h--學校信息控制器頭文件

SchoolInfoViewController.m--學校信息控制器實現文件

proViewController.h--省份選擇視圖控制器頭文件

proViewController.m--省份選擇視圖控制器實現文件

searchScoreViewController.h--省控線查詢模塊基視圖頭文件

searchScoreViewController.m--省控線查詢模塊基視圖實現文件

provinceViewController.h--省份選擇控制器頭文件

provinceViewController.m--省份選擇控制器實現文件

LineViewController.h--省控線查詢結果控制器頭文件

LineViewController.m--省控線查詢結果控制器實現文件

schoolScoreViewController.h--學校分數線查詢模塊基視圖頭文件

schoolScoreViewController.m--學校分數線查詢模塊基視圖實現文件

schoolViewController.h--學校選擇控制器頭文件

schoolViewController.m--學校選擇控制器實現文件

ScoreLineViewController.h--學校分數線查詢結果控制器頭文件

ScoreLineViewController.m--學校分數線查詢結果控制器實現文件

CurveViewController.h--趨勢曲線控制器頭文件

CurveViewController.m--趨勢曲線控制器實現文件

CurveView.h--趨勢曲線圖視圖頭文件

CurveView.m--趨勢曲線圖視圖實現文件

->ConnectNetWork--網絡連接判斷第三方類

Reachability.h

Reachability.m

->MBProgressHUD--讀取信息進度轉輪第三方類

MBProgressHUB.h

MBProgressHUB.m

->Utility--界面布局工具

->ASIHttpRequest--實現網絡連接第三方類

->SBJson--JSon解析第三方類

SBJson.h

SBJson.m

GaoKaoHelper-info.plist--項目配置文件

infoPlist.strings--配置文件字符

area.plist--地區信息plist文件

GaoKaoHelper-Prefix.pch--預編譯文件

4 基于局域網的教學環境搭建（Setting up teaching and learning environment based on LAN）

下面介紹如何搭建支持App客戶端可訪問的本地服務器和如何修改的客戶端的請求URL鏈接。由于豹考通服務器端代碼是由JSP編寫，如果要讓此服務器代碼在本地機運行，則需用到的軟件包括Tomcat、JDK和MySQL。

4.1 連接局域網本地服務器方法

將實驗室的教師端電腦與學生端電腦互聯在一個局域網內，只需將請求的URL地址修改為教師端或任何一臺學生機服務器的IP地址即可，如192.168.1.100（教師機），192.168.1.101（小組1服務器）。若服務器連接成功，不論是手機還是模擬器都能讀取到對應省份學校數據；如果連接服務器失敗，則不顯示學校數據。

4.2 啟動本地服務器的步驟

（1）下載bkt_android.rar壓縮包，http：//www.10LAB.cn/download/bkt_android.rar。

（2）將壓縮包解壓，請將bkt_android解壓在不帶有空格的路徑上，如D：＼bkt_android。

（3）運行JTM1.1.exe程序，單擊“啟用（調試模式）”，Tomcat和MySQL服務器的指示燈變成綠色。需注意的是這兩個彈出窗口不能關閉，關閉后會停止相關服務，導致本地服務器關閉。

（4）通過瀏覽器進行訪問測試http：//localhost：8080/，若出現“服務器搭建成功測試頁”信息，表示JSP服務器環境搭建成功。

4.3 修改客戶端URL訪問本地服務器

Android端：

修改豹考通NewScore_Test項目src下包名為iet.jxufe.cn.android.score.util的工具類Constants.java。將類中的遠程服務器地址URL修改為：http：//{IP}：8080/bkt/；即public static final String URL=" http：//192.168.1.101：8080/bkt/"；修改URL后，重新發布App和啟動Android模擬器，這樣Android客戶端訪問的數據就是本地服務器中的數據。

IOS端：

與Android端類似，IOS端訪問本地服務器只需要將進行網絡訪問接口域名更換成本地服務器所在PC機的IP地址即可。遠程服務器的url為：

http：//www.10LAB.cn/zhushou/getRecommendSchoolsJson.action？

域名為：www.10LAB.cn，將域名更換成服務器本機IP地址加上端口號，http：//{IP}：8080/bkt/。

即URL="http：//192.168.1.102：8080/bkt/"；修改URL后，重新發布App，這樣IOS客戶端訪問的數據就是本地服務器中的數據。

IP為本地服務器PC機的IP地址，比如http：//192.168.1.101：8080/bkt/，然后再次編譯運行，即可訪問本地服務器。

5 結論（Conclusion）

通過“豹考通”軟件引入App開發流程，并對“豹考通”App進行相關介紹，最后介紹了服務器端局域網配置的基本知識，讓讀者通過本地服務器進行與客戶端的交互。

參考文獻（References）

[1] Levin B. B.Using Case Method in Teacher Education：The Role of Discussion and Experience in Teachers' Thinking about Cases[D].Unpublished Doctoral Dissertation，University of California-Berkeley，1996：22-24.

[2] Laurence.E Lynn Jr.Teaching&Learning with Cases，A Guide book[M].Chatham House Pub，1999：98-161.

[3] 鐘元生，高成珍.高校Android編程教材設計研究[J].計算機教育，2014（10）：105-107.

[4] 蔡建平.軟件開發綜合能力培養的案例教學[J].計算機教育，2011（20）：102.

[5] 李偉.基于工具軟件和案例開發的軟件工程教學方法[J].中國科教創新導刊，2014（01）：152-153.

作者簡介：

鐘元生（1968-），男，博士，教授，博士生導師.研究領域：電子商務，教育技術.

曹 權（1991-），男，碩士生.研究領域：移動學習與手機軟件開發.