鐘元生　曹權(quán)

摘 要：為幫助高校更好開(kāi)設(shè)App實(shí)踐課程，給出一個(gè)綜合教學(xué)案例——“豹考通”App開(kāi)發(fā)的全過(guò)程。該教學(xué)案例包括App開(kāi)發(fā)流程、服務(wù)器端、Android客戶端、IOS客戶端和數(shù)據(jù)庫(kù)端的設(shè)計(jì)等，不僅適合大學(xué)生在項(xiàng)目實(shí)驗(yàn)中體會(huì)較大規(guī)模的App開(kāi)發(fā)全過(guò)程，也適合于小組分工協(xié)作開(kāi)發(fā)App軟件的參照模板。

關(guān)鍵詞：教學(xué)案例設(shè)計(jì)；App開(kāi)發(fā)；移動(dòng)應(yīng)用；實(shí)踐教學(xué)

中圖分類號(hào)：G40-057 文獻(xiàn)標(biāo)識(shí)碼：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）

案例教學(xué)法是在法律、醫(yī)學(xué)、工商管理等學(xué)科及師資培訓(xùn)中取得了很大的成功。近幾年，越來(lái)越多的學(xué)者在信息技術(shù)、生物、數(shù)學(xué)、心理學(xué)、地理、工程技術(shù)等學(xué)科中也開(kāi)始嘗試采用案例教學(xué)方法，國(guó)外在案例教學(xué)領(lǐng)域有著深厚的研究，Barbara Barry Levin在1996年提到在教師在教學(xué)中運(yùn)用案例教學(xué)方法[1]，而且Laurence.E Lynn Jr在1999年還出版了關(guān)于案例教學(xué)的指南[2]。我們?cè)诖髮W(xué)安卓編程案例設(shè)計(jì)上也做了一些研究[3]。

當(dāng)前計(jì)算機(jī)或軟件工程專業(yè)的學(xué)生存在著學(xué)用脫節(jié)、實(shí)際開(kāi)發(fā)能力偏弱等問(wèn)題，事實(shí)上，學(xué)生雖然接受了系統(tǒng)的軟件開(kāi)發(fā)專業(yè)知識(shí)的學(xué)習(xí)和軟件開(kāi)發(fā)技術(shù)應(yīng)用的訓(xùn)練，但軟件開(kāi)發(fā)能力低下的情況還相當(dāng)普遍[4]。在這種教學(xué)方式下，通常導(dǎo)致培養(yǎng)的學(xué)生實(shí)踐能力不足[5]。

為了解決上述問(wèn)題，我們結(jié)合自己研發(fā)的一個(gè)實(shí)用App“豹考通”，在對(duì)其程序功能進(jìn)行適當(dāng)精簡(jiǎn)的基礎(chǔ)上，開(kāi)發(fā)了一個(gè)App綜合教學(xué)案例。本文簡(jiǎn)要介紹之。詳情可參考即將在清華大學(xué)出版社出版的教材《App開(kāi)發(fā)案例教程》。

2 App開(kāi)發(fā)流程教學(xué)設(shè)計(jì)（Teaching design of app development process）

一個(gè)完整的軟件開(kāi)發(fā)分為網(wǎng)頁(yè)端與移動(dòng)端（App），而移動(dòng)端又包括Android端和IOS端。

（1）服務(wù)器框架搭建

開(kāi)發(fā)流程如圖1所示。

服務(wù)器端設(shè)計(jì)是移動(dòng)項(xiàng)目設(shè)計(jì)中很重要的一個(gè)部分，如果說(shuō)客戶端負(fù)責(zé)為用戶展現(xiàn)數(shù)據(jù)，那么服務(wù)器端可以說(shuō)是為用戶準(zhǔn)備數(shù)據(jù)。只有服務(wù)器端將用戶所需要的數(shù)據(jù)準(zhǔn)備完畢后，客戶端才有可能去展示。

（2）數(shù)據(jù)庫(kù)設(shè)計(jì)與部署

對(duì)于移動(dòng)App開(kāi)發(fā)，數(shù)據(jù)庫(kù)的選擇就顯得至關(guān)重要，因?yàn)閿?shù)據(jù)存儲(chǔ)結(jié)構(gòu)、讀取速度直接影響到用戶體驗(yàn)，盡量使用輕量級(jí)數(shù)據(jù)庫(kù)，這里我們使用的是MySQL。

數(shù)據(jù)庫(kù)開(kāi)發(fā)分為邏輯結(jié)構(gòu)設(shè)計(jì)和物理結(jié)構(gòu)設(shè)計(jì)。

（3）服務(wù)器端實(shí)現(xiàn)

服務(wù)器端的實(shí)現(xiàn)是在MyEclipse 8中實(shí)現(xiàn)。配置開(kāi)發(fā)環(huán)境，配置完成后，在MyEclipse 8中創(chuàng)建“豹考通”工程。

（4）客戶端框架搭建

客戶端開(kāi)發(fā)流程簡(jiǎn)圖如圖2所示。

（5）界面及素材設(shè)計(jì)和界面跳轉(zhuǎn)設(shè)計(jì)

項(xiàng)目素材制作的標(biāo)準(zhǔn)要按照Android和IOS開(kāi)發(fā)要求制作，而且界面跳轉(zhuǎn)不宜過(guò)多。

（6）模塊類的實(shí)現(xiàn)

根據(jù)項(xiàng)目的需求分析，在項(xiàng)目中分別創(chuàng)建模塊文件夾，然后分別對(duì)功能模塊進(jìn)行設(shè)計(jì)與實(shí)現(xiàn)。

（7）網(wǎng)絡(luò)數(shù)據(jù)讀取接口

網(wǎng)絡(luò)數(shù)據(jù)讀取接口由服務(wù)器端提供，包括網(wǎng)址和需要的參數(shù)，客戶端發(fā)送相應(yīng)的參數(shù)請(qǐng)求從服務(wù)器端獲取運(yùn)行結(jié)果，最后由客戶端呈現(xiàn)在用戶眼前。網(wǎng)絡(luò)數(shù)據(jù)接口形式如下：

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

（8）編譯打包及測(cè)試

移動(dòng)應(yīng)用編譯打包、測(cè)試及發(fā)布上線的簡(jiǎn)易流程如圖3所示。

對(duì)于Android端應(yīng)用，需要在項(xiàng)目中打包生成APK文件；而對(duì)于IOS端應(yīng)用，需要將其打包成ipa文件。

編譯打包完成后，可以在其他成員的手機(jī)上安裝測(cè)試，看有沒(méi)有問(wèn)題出現(xiàn)。如果有，立即對(duì)程序進(jìn)行調(diào)試；如果沒(méi)有，就可以在商店中發(fā)布上線了。

（9）發(fā)布上線

相對(duì)于IOS發(fā)布過(guò)程來(lái)說(shuō)，Android應(yīng)用的發(fā)布比較簡(jiǎn)單；而IOS應(yīng)用的發(fā)布審核相對(duì)來(lái)說(shuō)更為嚴(yán)格，一些細(xì)節(jié)問(wèn)題的出現(xiàn)都會(huì)讓Apple公司拒絕，如果是發(fā)布在第三方商店，如91助手，審核相對(duì)順利。所以在開(kāi)發(fā)過(guò)程中，需要多參考Apple公司的文檔，這樣有利于審核的通過(guò)。

3 App開(kāi)發(fā)教學(xué)用例（Teaching case of app development）

3.1 案例功能設(shè)計(jì)

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

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

綜合考慮市場(chǎng)需求，豹考通主要實(shí)現(xiàn)了以下6個(gè)功能。

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

（2）投檔線查詢：查詢?nèi)珖?guó)各院校的投檔線信息。

（3）生成投檔線曲線圖：根據(jù)用戶的信息選擇，系統(tǒng)會(huì)為用戶生成近幾年的投檔線和省控線的一個(gè)曲線圖，更加直觀的顯示分?jǐn)?shù)的變化波動(dòng)情況，供用戶參考。

（4）預(yù)測(cè)投檔線：根據(jù)往年投檔線情況，采用系統(tǒng)的算法，根據(jù)用戶不同的選擇，預(yù)測(cè)今年各學(xué)校投檔線情況。

（5）推薦學(xué)校：推薦學(xué)?？梢詾橛脩敉扑]一些感興趣并且有機(jī)會(huì)能投檔的院校，幫助用戶做出報(bào)考選擇。

（6）生成預(yù)測(cè)推薦報(bào)告：報(bào)告是根據(jù)用戶選擇的參數(shù)進(jìn)行生成，報(bào)告的內(nèi)容包括今年投檔線的預(yù)測(cè)和推薦的所有機(jī)會(huì)投檔大學(xué)等名單，為用戶的最終選擇提供參考。

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

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

3.2 案例所涉源代碼

打開(kāi)學(xué)習(xí)網(wǎng)站http：//www.10LAB.cn/resource.html，下載本文所涉源碼壓縮包——SourceCode，包中包括四個(gè)部分：

這些代碼包括數(shù)據(jù)庫(kù)端、服務(wù)器端、Android端和IOS端四個(gè)部分，“→”符號(hào)代表文件夾，即打開(kāi)后還有文件。

（1）數(shù)據(jù)庫(kù)端源碼清單

SourceCode->Chapter3->Database

createTable.sql--創(chuàng)建數(shù)據(jù)庫(kù)表

InsertAction.sql--插入數(shù)據(jù)

DeleteAction.sql--刪除數(shù)據(jù)

ModifyAction.sql--修改數(shù)據(jù)

createbatchTable.sql--創(chuàng)建批次表

insertbatchTable.sql--向批次表插入數(shù)據(jù)

createcategoryTable.sql--創(chuàng)建科類表

insertcategoryTable.sql--向科類表插入數(shù)據(jù)

（2）服務(wù)器端源碼清單

SourceCode->Chapter4->Server

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

Hello_BaoKaoTong.java--新建服務(wù)器類

index.jsp--編輯JSP頁(yè)面

->Zhushou

JsonAction.java--Json解析類

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

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

（3）Android端源碼清單

SourceCode->Chapter6->Android

->NewScore_test

OpenDoorActivity.java--開(kāi)門(mén)動(dòng)畫(huà)類

->res

->layout

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

fragment_enroll.xml--學(xué)校錄取線頁(yè)面布局

->values

Styles.xml--菜單Menu布局

->drawable

menu_btn.xml--特殊圖片狀態(tài)布局

menu_pressed.xml--按下按鈕狀態(tài)

menu_unpressed.xml--按鈕未按下?tīng)顟B(tài)

->src

MainActivity.java--主界面相關(guān)事件

->score

EnrollScoreFragment.java--查詢學(xué)校錄取線事件

EnrollScoreResultFragment.java--查詢結(jié)果布局

TrendView.java--生成趨勢(shì)曲線事件

->util

AccessToServer.java--服務(wù)器端訪問(wèn)工具類

（4）IOS端源碼清單

SourceCode->Chapter8->IOS->NewScore_test

->GaoKaoHelper

->GaoKaoHelper.proj--XCode項(xiàng)目程序（執(zhí)行程序）

->GaoKaoHelper.test--項(xiàng)目測(cè)試包

->GaoKaoHelper--源代碼包

AppDelegate.h--程序監(jiān)聽(tīng)接口頭文件

AppDelegate.m--程序監(jiān)聽(tīng)接口實(shí)現(xiàn)文件

Main.m--程序入口方法

BaseViewController.h--根視圖頭文件

BaseViewController.m-根視圖實(shí)現(xiàn)文件

BaseNavigationController.h--基導(dǎo)航控制器頭文件

BaseNavigationController.m--基導(dǎo)航控制器實(shí)現(xiàn)文件

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

myScoreViewController.m--我的高考模塊實(shí)現(xiàn)文件

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

shengyuandiViewController.m--實(shí)現(xiàn)生源地選擇控制器

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

subjectViewController.m--科類選擇控制器實(shí)現(xiàn)文件

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

batchViewController.m--批次選擇控制器實(shí)現(xiàn)文件

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

recommendViewController.m--推薦學(xué)校模塊基視圖實(shí)現(xiàn)文件

SchoolInfoViewController.h--學(xué)校信息控制器頭文件

SchoolInfoViewController.m--學(xué)校信息控制器實(shí)現(xiàn)文件

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

proViewController.m--省份選擇視圖控制器實(shí)現(xiàn)文件

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

searchScoreViewController.m--省控線查詢模塊基視圖實(shí)現(xiàn)文件

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

provinceViewController.m--省份選擇控制器實(shí)現(xiàn)文件

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

LineViewController.m--省控線查詢結(jié)果控制器實(shí)現(xiàn)文件

schoolScoreViewController.h--學(xué)校分?jǐn)?shù)線查詢模塊基視圖頭文件

schoolScoreViewController.m--學(xué)校分?jǐn)?shù)線查詢模塊基視圖實(shí)現(xiàn)文件

schoolViewController.h--學(xué)校選擇控制器頭文件

schoolViewController.m--學(xué)校選擇控制器實(shí)現(xiàn)文件

ScoreLineViewController.h--學(xué)校分?jǐn)?shù)線查詢結(jié)果控制器頭文件

ScoreLineViewController.m--學(xué)校分?jǐn)?shù)線查詢結(jié)果控制器實(shí)現(xiàn)文件

CurveViewController.h--趨勢(shì)曲線控制器頭文件

CurveViewController.m--趨勢(shì)曲線控制器實(shí)現(xiàn)文件

CurveView.h--趨勢(shì)曲線圖視圖頭文件

CurveView.m--趨勢(shì)曲線圖視圖實(shí)現(xiàn)文件

->ConnectNetWork--網(wǎng)絡(luò)連接判斷第三方類

Reachability.h

Reachability.m

->MBProgressHUD--讀取信息進(jìn)度轉(zhuǎn)輪第三方類

MBProgressHUB.h

MBProgressHUB.m

->Utility--界面布局工具

->ASIHttpRequest--實(shí)現(xiàn)網(wǎng)絡(luò)連接第三方類

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

SBJson.h

SBJson.m

GaoKaoHelper-info.plist--項(xiàng)目配置文件

infoPlist.strings--配置文件字符

area.plist--地區(qū)信息plist文件

GaoKaoHelper-Prefix.pch--預(yù)編譯文件

4 基于局域網(wǎng)的教學(xué)環(huán)境搭建（Setting up teaching and learning environment based on LAN）

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

4.1 連接局域網(wǎng)本地服務(wù)器方法

將實(shí)驗(yàn)室的教師端電腦與學(xué)生端電腦互聯(lián)在一個(gè)局域網(wǎng)內(nèi)，只需將請(qǐng)求的URL地址修改為教師端或任何一臺(tái)學(xué)生機(jī)服務(wù)器的IP地址即可，如192.168.1.100（教師機(jī)），192.168.1.101（小組1服務(wù)器）。若服務(wù)器連接成功，不論是手機(jī)還是模擬器都能讀取到對(duì)應(yīng)省份學(xué)校數(shù)據(jù)；如果連接服務(wù)器失敗，則不顯示學(xué)校數(shù)據(jù)。

4.2 啟動(dòng)本地服務(wù)器的步驟

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

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

（3）運(yùn)行JTM1.1.exe程序，單擊“啟用（調(diào)試模式）”，Tomcat和MySQL服務(wù)器的指示燈變成綠色。需注意的是這兩個(gè)彈出窗口不能關(guān)閉，關(guān)閉后會(huì)停止相關(guān)服務(wù)，導(dǎo)致本地服務(wù)器關(guān)閉。

（4）通過(guò)瀏覽器進(jìn)行訪問(wèn)測(cè)試http：//localhost：8080/，若出現(xiàn)“服務(wù)器搭建成功測(cè)試頁(yè)”信息，表示JSP服務(wù)器環(huán)境搭建成功。

4.3 修改客戶端URL訪問(wèn)本地服務(wù)器

Android端：

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

IOS端：

與Android端類似，IOS端訪問(wèn)本地服務(wù)器只需要將進(jìn)行網(wǎng)絡(luò)訪問(wèn)接口域名更換成本地服務(wù)器所在PC機(jī)的IP地址即可。遠(yuǎn)程服務(wù)器的url為：

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

域名為：www.10LAB.cn，將域名更換成服務(wù)器本機(jī)IP地址加上端口號(hào)，http：//{IP}：8080/bkt/。

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

IP為本地服務(wù)器PC機(jī)的IP地址，比如http：//192.168.1.101：8080/bkt/，然后再次編譯運(yùn)行，即可訪問(wèn)本地服務(wù)器。

5 結(jié)論（Conclusion）

通過(guò)“豹考通”軟件引入App開(kāi)發(fā)流程，并對(duì)“豹考通”App進(jìn)行相關(guān)介紹，最后介紹了服務(wù)器端局域網(wǎng)配置的基本知識(shí)，讓讀者通過(guò)本地服務(wù)器進(jìn)行與客戶端的交互。

參考文獻(xiàn)（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編程教材設(shè)計(jì)研究[J].計(jì)算機(jī)教育，2014（10）：105-107.

[4] 蔡建平.軟件開(kāi)發(fā)綜合能力培養(yǎng)的案例教學(xué)[J].計(jì)算機(jī)教育，2011（20）：102.

[5] 李偉.基于工具軟件和案例開(kāi)發(fā)的軟件工程教學(xué)方法[J].中國(guó)科教創(chuàng)新導(dǎo)刊，2014（01）：152-153.

作者簡(jiǎn)介：

鐘元生（1968-），男，博士，教授，博士生導(dǎo)師.研究領(lǐng)域：電子商務(wù)，教育技術(shù).

曹 權(quán)（1991-），男，碩士生.研究領(lǐng)域：移動(dòng)學(xué)習(xí)與手機(jī)軟件開(kāi)發(fā).