App開發(fā)教學(xué)案例設(shè)計

鐘元生　曹權(quán)

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

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

中圖分類號：G40-057 文獻標(biāo)識碼：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)中取得了很大的成功。近幾年，越來越多的學(xué)者在信息技術(shù)、生物、數(shù)學(xué)、心理學(xué)、地理、工程技術(shù)等學(xué)科中也開始嘗試采用案例教學(xué)方法，國外在案例教學(xué)領(lǐng)域有著深厚的研究，Barbara Barry Levin在1996年提到在教師在教學(xué)中運用案例教學(xué)方法[1]，而且Laurence.E Lynn Jr在1999年還出版了關(guān)于案例教學(xué)的指南[2]。我們在大學(xué)安卓編程案例設(shè)計上也做了一些研究[3]。

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

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

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

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

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

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

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

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

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

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

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

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

（4）客戶端框架搭建

客戶端開發(fā)流程簡圖如圖2所示。

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

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

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

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

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

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

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

（8）編譯打包及測試

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

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

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

（9）發(fā)布上線

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

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

3.1 案例功能設(shè)計

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

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

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

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

（2）投檔線查詢：查詢?nèi)珖髟盒５耐稒n線信息。

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

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

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

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

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

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

3.2 案例所涉源代碼

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

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

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

SourceCode->Chapter3->Database

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

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頁面

->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--學(xué)校錄取線頁面布局

->values

Styles.xml--菜單Menu布局

->drawable

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

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

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

->src

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

->score

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

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

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

->util

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

（4）IOS端源碼清單

SourceCode->Chapter8->IOS->NewScore_test

->GaoKaoHelper

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

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

->GaoKaoHelper--源代碼包

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

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

Main.m--程序入口方法

BaseViewController.h--根視圖頭文件

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Reachability.h

Reachability.m

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

MBProgressHUB.h

MBProgressHUB.m

->Utility--界面布局工具

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

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

SBJson.h

SBJson.m

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

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ù)器和如何修改的客戶端的請求URL鏈接。由于豹考通服務(wù)器端代碼是由JSP編寫，如果要讓此服務(wù)器代碼在本地機運行，則需用到的軟件包括Tomcat、JDK和MySQL。

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

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

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

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

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

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

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

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

Android端：

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

IOS端：

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

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

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

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

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

5 結(jié)論（Conclusion）

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

參考文獻（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].計算機教育，2014（10）：105-107.

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

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

作者簡介：

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

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