2023 年河北省職業(yè)院校技能大賽（中職組）移動應(yīng)用與開發(fā)賽項賽題第三套

2023年河北省職業(yè)院校技能大賽（中職組）

移動應(yīng)用與開發(fā)賽項賽題C（樣卷）

賽位號：_____________

2023年5月

一、項目背景

當(dāng)前發(fā)展數(shù)字經(jīng)濟已成為國家重點戰(zhàn)略。據(jù)預(yù)測，預(yù)計到2025年數(shù)

字經(jīng)濟占GDP比重將超50%。智慧城市（英語：SmartCity）是指在城市

規(guī)劃、設(shè)計、建設(shè)、管理與運營等領(lǐng)域中，運用物聯(lián)網(wǎng)、云計算、大數(shù)據(jù)、

空間地理信息集成等數(shù)字技術(shù)，使得城市管理、教育、醫(yī)療、房地產(chǎn)、交

通運輸、公用事業(yè)和公眾安全等城市組成的關(guān)鍵基礎(chǔ)設(shè)施組件和服務(wù)更互

聯(lián)、高效和智能，從而為市民提供更美好的生活和工作服務(wù)、為企業(yè)創(chuàng)造

更有利的商業(yè)發(fā)展環(huán)境、為政府賦能更高效的運營與管理機制。智慧城市

是數(shù)字經(jīng)濟發(fā)展應(yīng)用的重要場景。

D公司是行業(yè)領(lǐng)先的全球化信息技術(shù)、產(chǎn)品和解決方案公司，目前與

G市簽署了智慧城市建設(shè)戰(zhàn)略合作協(xié)議。雙方將面向智慧政務(wù)、智慧社保、

智慧醫(yī)療、智慧健康、智慧環(huán)保、智慧交通、智慧黨建、數(shù)字鄉(xiāng)村等11

大系統(tǒng)、48個場景，為城市生活打造的一個數(shù)字化界面，建設(shè)G市城市大

腦。通過G市城市大腦，市民憑借它觸摸城市脈搏、感受城市溫度、享受

城市服務(wù)，城市管理者通過它配置公共資源、做出科學(xué)決策、提高治理效

能。

二、競賽內(nèi)容

賽卷分模塊A、模塊B和模塊C三個部分。

模塊編號模塊名稱競賽時間分數(shù)

A移動應(yīng)用界面設(shè)計30

B移動應(yīng)用前端開發(fā)240分鐘50

C移動應(yīng)用測試與交付20

合計100

第2頁/共18頁

三、智慧城市服務(wù)端

訪問服務(wù)器http://IP:PORT/（具體將在競賽任務(wù)書中給定），下載

API接口文檔，以獲取智慧城市后臺服務(wù)數(shù)據(jù)。

四、成果物提交

參賽選手根據(jù)分配的賬號登錄系統(tǒng)，把A、B、C三個模塊的任務(wù)要求

提交對應(yīng)的成果物，將A、B、C三個模塊壓縮為“成果物.zip”,“成果

物.zip”應(yīng)包含“移動應(yīng)用界面設(shè)計.xd”、“SmartCity.apk”、“產(chǎn)品手

冊.doc”、“缺陷分析.doc”，裁判基于平臺下載對應(yīng)選手競賽成果物，進

行評判。

1.用戶登錄

登錄http://IP/（具體將在競賽任務(wù)書中說明），進入競賽管理系統(tǒng)

登錄界面，輸入二次加密的賬戶和密碼登錄技能競賽管理系統(tǒng)。

2.模塊成果物上傳

參賽選手登錄技能競賽管理系統(tǒng)后，在成果物上傳界面上傳“成果

物.zip”，參賽選手在比賽結(jié)束前可以自愿修改重新上傳成果物，比賽結(jié)

束時系統(tǒng)自動鎖定，選手無法提交成果物。

五、競賽注意事項

提交的成果物資源內(nèi)容中，不能填寫與選手相關(guān)的信息，如賽位號、

姓名和院校。如出現(xiàn)上述標記，成績按照零分處理。

第3頁/共18頁

模塊A：移動應(yīng)用界面設(shè)計

一、競賽任務(wù)

此模塊分數(shù)為30分。

（一）競賽主題

隨著第五代移動通信技術(shù)（5G）高速發(fā)展，推動新一代信息技術(shù)與各

個行業(yè)的融合發(fā)展，“智慧城市”這一概念隨著城市化進程的快速發(fā)展應(yīng)

運而生。

智慧城市是指利用新一代信息技術(shù)，以整合、系統(tǒng)的方式管理城市運

行體系，讓城市中各個功能彼此協(xié)調(diào)運作，為城市中的企業(yè)提供優(yōu)質(zhì)的發(fā)

展空間，為市民提供更高的生活品質(zhì)，讓城市成為適合人全面發(fā)展的城市，

涵蓋了智慧服務(wù)、智慧養(yǎng)老、智慧黨建、智慧環(huán)保、智慧社區(qū)、精準扶貧、

時代楷模等數(shù)十個場景。

圖1智慧城市系統(tǒng)架構(gòu)

（二）任務(wù)要求

1.使用原型圖工具（AdobeXD）和圖形處理工具（AdobePhotoshop）

設(shè)計符合目標受眾的App高保真原型稿，每個功能至少一個畫板。

2.畫板尺寸為1080×1920，狀態(tài)欄高度72px，標題欄高度為144px，

標簽欄高度為72px。

3.原型繪制畫板大小尺寸及各部分內(nèi)容區(qū)尺寸參考。

第4頁/共18頁

圖2尺寸參考圖

4.當(dāng)內(nèi)容超出高度區(qū)域時，設(shè)置滾動區(qū)域來顯示內(nèi)容。

5.畫板要對齊，界面版式布局合理、美觀，內(nèi)容完整；同樣功能請復(fù)

用樣式，避免一種功能、兩種樣式的情況。

6.原型要有交互設(shè)計內(nèi)容，用戶體驗良好。檢查存在的漏洞，防止出

現(xiàn)異常流程和異常內(nèi)容狀態(tài)。

7.頁面所需數(shù)據(jù)，詳見API接口文檔，利用Postman工具獲取。API

接口文檔和部分素材詳見平臺——模塊A：移動應(yīng)用界面設(shè)計——資源下

載——設(shè)計素材。

（三）需求描述

任務(wù)1：看電影界面設(shè)計（7.5分）

任務(wù)說明：

1.主頁面，頁面包括頂部導(dǎo)航欄目、宣傳幻燈片、搜索、電影信息顯

示板塊。具有返回按鈕，點擊返回按鈕可以返回智慧城市主頁面。下方搜

索在頁面搜索框下面顯示電影信息并圖文顯示。

第5頁/共18頁

（1）頁面頂部具有返回按鈕，點擊返回按鈕返回智慧城市主頁。

（2）產(chǎn)品功能宣傳幻燈片展示。

（3）搜索，根據(jù)電影名稱進行查詢，結(jié)果列表顯示在電影信息展示

區(qū)。

（4）電影展示區(qū)列表均顯示圖片、影片名稱、上映時間、時長等內(nèi)

容，默認顯示1-5條，點擊“查看更多”可查看所有電影信息。

2.信息詳情頁，點擊電影列表中的某一部電影，進入到電影詳情頁面。

詳情頁面分別展示電影封面圖片、電影名稱、評分、上映時間、想看人數(shù)

等信息。底部展示主頁按鈕，點擊“主頁”，返回電影主頁。

注：接口數(shù)據(jù)詳見API接口文檔

任務(wù)2：物流查詢界面設(shè)計（7.5分）

任務(wù)說明：

1.進入物流查詢主頁面，頁面顯示返回上一頁按鈕、搜索輸入框、廣

告輪播圖、物流公司推薦、下方顯示其他物流公司列表。

（1）搜索輸入框：輸入搜索內(nèi)容后，點擊軟鍵盤“搜索”按鈕，判

斷輸入數(shù)據(jù)合法性后，跳轉(zhuǎn)至物流運單詳情頁面。

（2）廣告輪播圖：每間隔3秒切換廣告圖。

（3）物流公司推薦:以圖標和名稱為單元格方式顯示，手機端顯示4

個，共三行，每個類目入口布局顯示為公司logo和物流公司名稱，點擊

圖標可以進入對應(yīng)物流公司詳情頁面。

（4）其他物流公司列表：列表項顯示物流公司名稱，順序按照物流

公司名稱首字母降序排列。

2.物流公司詳情頁面：點擊首頁的物流公司推薦圖標信息，進入對應(yīng)

第6頁/共18頁

物流公司詳情頁面，頁面展示新聞資訊輪播、公司簡介、運輸方式介紹、

運費介紹信息。

3.物流運單詳情頁：首頁搜索框輸入運單號，點擊搜索后進入運單詳

情頁面，頁面上方顯示返回按鈕及任務(wù)名稱，下方顯示帶有運單號的搜索

框，物流公司logo、名稱和投訴電話圖標，下部顯示物流派送過程信息步

進時間線，信息包括時間、地點和跟蹤進度，底部顯示物流投訴按鈕。

4.投訴頁面：點擊物流運單詳情頁的投訴按鈕，跳轉(zhuǎn)至以往個人投訴

列表頁，點擊新增按鈕進入投訴新增頁面，頁面展示公司名稱、運單號、

投訴類別和投訴內(nèi)容，點擊確認按鈕，提交成功后自動返回投訴列表頁。

注：接口數(shù)據(jù)詳見API接口文檔

任務(wù)3：找工作界面設(shè)計（7.5分）

任務(wù)說明：

找工作功能主要包括找工作、投遞記錄和個人簡歷三項功能導(dǎo)航，點

擊上方導(dǎo)航欄“返回”按鈕返回智慧城市主頁面。

1.找工作頁面，具備宣傳幻燈片、職位搜索、熱門職位（自行計算，

展示招聘職位數(shù)量為前三的職位）和職位列表顯示功能。

（1）產(chǎn)品功能宣傳幻燈片展示（使用首頁幻燈片即可）。

（2）職位搜索欄目，實現(xiàn)職位列表查詢，點擊“搜索”按鈕，更新

職位列表顯示，信息包括職位名稱、崗位職責(zé)、公司地點、薪資待遇。

（3）以9宮格方式顯示職位名稱，只顯示職位名稱，點擊職位名稱，

更新下方相對應(yīng)職位名稱的招聘列表數(shù)據(jù)。

（4）默認顯示所有招聘信息，點擊列表中的招聘信息進入招聘詳情

頁面，招聘詳情頁面分為兩部分，第一部分顯示信息包括職位名稱、崗位

第7頁/共18頁

職責(zé)、公司地點、薪資待遇、聯(lián)系人、職位描述、職位需求；第二部分顯

示公司信息包括公司名稱、公司簡介。最下方顯示“投簡歷”按鈕；點擊

“投簡歷”按鈕實現(xiàn)個人簡歷投遞，如果個人簡歷中沒有工作經(jīng)歷、教育

經(jīng)歷信息，則跳轉(zhuǎn)至個人簡歷頁面，完善簡歷后再進行投遞。

2.投遞記錄頁面，列表顯示本人已經(jīng)投簡歷的公司，信息包括崗位名

稱、公司名稱、薪資和投遞簡歷時間。

3.個人簡歷頁面，實現(xiàn)用戶個人簡歷的管理，包括查詢、新增、編輯。

個人簡歷包括用戶基本信息、求職信息兩部分?；拘畔ㄓ脩絷欠Q、

郵件、電話號碼、性別，求職信息包括工作經(jīng)驗、最高學(xué)歷、現(xiàn)居住地、

期望職位、期望薪資、教育經(jīng)歷、個人簡介。

注：接口數(shù)據(jù)詳見API接口文檔

任務(wù)4：寵物醫(yī)院功能模塊（7.5分）

任務(wù)說明：

1.進入寵物醫(yī)院主頁面，頁面顯示返回上一頁按鈕、寵物種類標題和

種類、我的問診標題和問診列表、問診案例標題和案例列表。

（1）寵物種類：包括狗、貓咪、小寵、水族、鳥、爬蟲等種類；以

宮格形式顯示，每行5個，每個宮格內(nèi)顯示種類圖標和種類名稱，點擊種

類跳轉(zhuǎn)至找醫(yī)生頁面。

（2）我的問診列表：列表項顯示醫(yī)生頭像、醫(yī)生姓名和案例描述，

點擊列表項跳轉(zhuǎn)至問診詳情頁面。

（3）問診案例列表：列表項顯示醫(yī)生頭像、醫(yī)生姓名和案例描述，

點擊案例跳轉(zhuǎn)至案例詳情頁面。

2.找醫(yī)生頁面，頁面顯示醫(yī)生列表，列表項左側(cè)顯示醫(yī)生頭像，右側(cè)

第8頁/共18頁

顯示醫(yī)生姓名、職稱、執(zhí)業(yè)編號、擅長描述和從業(yè)年限，點擊列表項進入

問診頁面。

3.問診頁面，頁面顯示醫(yī)生頭像、醫(yī)生姓名、醫(yī)生職稱、執(zhí)業(yè)編號、

問題描述多文本輸入框、圖片和提交按鈕，點擊提交按鈕時彈出提交結(jié)果

提示，提交成功后跳轉(zhuǎn)至主頁面。

4.問診詳情頁面，頁面顯示醫(yī)生頭像、醫(yī)生姓名、醫(yī)生職稱、執(zhí)業(yè)編

號、咨詢描述、圖片、問答列表、追問輸入框和發(fā)送按鈕，輸入問題并點

擊發(fā)送按鈕可繼續(xù)追問醫(yī)生。

5.案例詳情頁面，頁面顯示醫(yī)生頭像、醫(yī)生姓名、醫(yī)生職稱、執(zhí)業(yè)編

號、去提問按鈕、咨詢描述、圖片和醫(yī)生回復(fù)。點擊去提問按鈕跳轉(zhuǎn)至問

診頁面。

注：接口數(shù)據(jù)詳見API接口文檔

二、模塊考核點

本模塊以產(chǎn)品初步設(shè)計原型為目標，考查參賽選手熟練收集、分析和

歸納客戶需求，清晰梳理業(yè)務(wù)流程，編制規(guī)范的需求規(guī)格說明書，熟練

使用UI設(shè)計軟件進行產(chǎn)品UI/UE設(shè)計，掌握正確的UI配色方案，設(shè)計

出符合人體工學(xué)的移動App優(yōu)秀作品。

模塊B：移動應(yīng)用前端開發(fā)

一、競賽任務(wù)

此模塊分數(shù)50分。

第9頁/共18頁

二、任務(wù)描述

參賽選手根據(jù)客戶給定的需求描述，利用跨平臺開發(fā)工具或原生開發(fā)

工具，編碼實現(xiàn)任務(wù)需求功能設(shè)計。

任務(wù)1：實現(xiàn)用戶登錄界面（12.5分）

設(shè)計智慧城市App，利用移動開發(fā)工具（AndroidStudio）創(chuàng)建

SmartCity項目或HbuilderX打開項目，編碼實現(xiàn)智慧城市App的登錄頁

面，包括App的標題、賬戶和密碼、自動登錄切換按鈕、登錄按鈕，以及

微信、QQ和sina微博快捷登錄的圖標。

輸入賬戶和密碼后，點擊登錄按鈕，進入主界面。

注：接口數(shù)據(jù)詳見API接口文檔

第10頁/共18頁

任務(wù)2：實現(xiàn)主界面（12.5分）

進入App主頁面（主頁），彰顯智慧城市風(fēng)采，打造智慧型服務(wù)大廳，

科技賦能，創(chuàng)新智能，打造視、聽、觸體驗具佳的業(yè)務(wù)服務(wù)大廳，同時供

·應(yīng)多種智慧城市解決方案。

1.顯示系統(tǒng)廣告輪播圖，點擊輪播圖跳轉(zhuǎn)至新聞對應(yīng)詳情頁面。

2.顯示智慧城市各領(lǐng)域應(yīng)用服務(wù)入口，以圖標和名稱為單元宮格方式

顯示，手機端每行顯示3個，共兩行，第2行最后一個顯示“更多服務(wù)”

3.顯示底部導(dǎo)航欄，采用圖標加文字方式顯示，圖標在上，文字在下，

共四個圖標分別為首頁、新聞、物流查詢、寵物醫(yī)院，點擊標簽進入對應(yīng)

頁面，并顏色標記當(dāng)前頁面所在導(dǎo)航欄。

第11頁/共18頁

注：輪播圖和應(yīng)用服務(wù)資源通過服務(wù)器API接口獲取。

任務(wù)3：實現(xiàn)物流查詢界面（12.5分）

點擊App底部物流查詢標簽，進入物流查詢頁面。

1.進入物流查詢主頁面，頁面顯示返回上一頁按鈕、搜索輸入框、廣

告輪播圖、物流公司推薦、下方顯示其他物流公司列表。

（1）搜索輸入框：輸入搜索內(nèi)容后，點擊軟鍵盤“搜索”按鈕，判

斷輸入數(shù)據(jù)合法性后，跳轉(zhuǎn)至物流運單詳情頁面。

（2）廣告輪播圖：每間隔3秒切換廣告圖。

（3）物流公司推薦:以圖標和名稱為單元格方式顯示，手機端顯示4

個，共三行，每個類目入口布局顯示為公司logo和物流公司名稱，點擊

圖標可以進入對應(yīng)物流公司詳情頁面。

（4）其他物流公司列表：列表項顯示物流公司名稱，順序按照物流

第12頁/共18頁

公司名稱首字母降序排列。

2.物流公司詳情頁面：點擊首頁的物流公司推薦圖標信息，進入對應(yīng)

物流公司詳情頁面，頁面展示新聞資訊輪播、公司簡介、運輸方式介紹、

運費介紹信息。

3.物流運單詳情頁：首頁搜索框輸入運單號，點擊搜索后進入運單詳

情頁面，頁面上方顯示返回按鈕及任務(wù)名稱，下方顯示帶有運單號的搜索

框，物流公司logo、名稱和投訴電話圖標，下部顯示物流派送過程信息步

進時間線，信息包括時間、地點和跟蹤進度，底部顯示物流投訴按鈕。

4.投訴頁面：點擊物流運單詳情頁的投訴按鈕，跳轉(zhuǎn)至以往個人投訴

列表頁，點擊新增按鈕進入投訴新增頁面，頁面展示公司名稱、運單號、

投訴類別和投訴內(nèi)容，點擊確認按鈕，提交成功后自動返回投訴列表頁。

注：數(shù)據(jù)詳見API接口文檔。

任務(wù)4：實現(xiàn)寵物醫(yī)院（12.5分）

在App主頁面上，點擊底部導(dǎo)航欄“寵物醫(yī)院”，進入寵物醫(yī)院頁面。

第13頁/共18頁

1.進入寵物醫(yī)院主頁面，頁面顯示返回上一頁按鈕、寵物種類標題和

種類、我的問診標題和問診列表、問診案例標題和案例列表。

（1）寵物種類：包括狗、貓咪、小寵、水族、鳥、爬蟲等種類；以

宮格形式顯示，每行5個，每個宮格內(nèi)顯示種類圖標和種類名稱，點擊種

類跳轉(zhuǎn)至找醫(yī)生頁面。

（2）我的問診列表：列表項顯示醫(yī)生頭像、醫(yī)生姓名和案例描述，

點擊列表項跳轉(zhuǎn)至問診詳情頁面。

（3）問診案例列表：列表項顯示醫(yī)生頭像、醫(yī)生姓名和案例描述，

點擊案例跳轉(zhuǎn)至案例詳情頁面。

2.找醫(yī)生頁面，頁面顯示醫(yī)生列表，列表項左側(cè)顯示醫(yī)生頭像，右側(cè)

顯示醫(yī)生姓名、職稱、執(zhí)業(yè)編號、擅長描述和從業(yè)年限，點擊列表項進入

問診頁面。

3.問診頁面，頁面顯示醫(yī)生頭像、醫(yī)生姓名、醫(yī)生職稱、執(zhí)業(yè)編號、

問題描述多文本輸入框、圖片和提交按鈕，點擊提交按鈕時彈出提交結(jié)果

提示，提交成功后跳轉(zhuǎn)至主頁面。

4.問診詳情頁面，頁面顯示醫(yī)生頭像、醫(yī)生姓名、醫(yī)生職稱、執(zhí)業(yè)編

號、咨詢描述、圖片、問答列表、追問輸入框和發(fā)送按鈕，輸入問題并點

擊發(fā)送按鈕可繼續(xù)追問醫(yī)生。

5.案例詳情頁面，頁面顯示醫(yī)生頭像、醫(yī)生姓名、醫(yī)生職稱、執(zhí)業(yè)編

號、去提問按鈕、咨詢描述、圖片和醫(yī)生回復(fù)。點擊去提問按鈕跳轉(zhuǎn)至問

診頁面。

注：接口數(shù)據(jù)詳見API接口文檔

第14頁/共18頁

三、模塊考核點

本模塊以編程實現(xiàn)移動應(yīng)用產(chǎn)品為目標，基于移動開發(fā)平臺，設(shè)計移

動應(yīng)用App?？疾檫x手程序UI還原設(shè)計能力和移動開發(fā)編程能力，其中

包括AppUI編程設(shè)計、網(wǎng)絡(luò)通信封裝、異步數(shù)據(jù)通信、數(shù)據(jù)解析、數(shù)據(jù)

存儲、網(wǎng)絡(luò)多媒體資源處理等技能，熟悉項目發(fā)布流程。

模塊C：移動應(yīng)用測試與交付

一、競賽任務(wù)

此模塊分數(shù)20分。

（一）待測系統(tǒng)描述

隨著第五代移動通信技術(shù)（5G）高速發(fā)展，推動新一代信息技術(shù)與各

個行業(yè)的融合發(fā)展，“智慧城市”這一概念隨著城市化進程的快速發(fā)展應(yīng)

運而生。

智慧城市是指利用新一代信息技術(shù)，以整合、系統(tǒng)的方式管理城市運

行體系，讓城市中各個功能彼此協(xié)調(diào)運作，為城市中的企業(yè)提供優(yōu)質(zhì)的發(fā)

展空間，為市民提供更高的生活品質(zhì)，讓城市成為適合人全面發(fā)展的城市，

第15頁/共18頁

涵蓋了智慧政務(wù)、智慧環(huán)保、智慧安防、智慧交通、智慧教育、智慧醫(yī)療、

智慧生活等數(shù)十個場景。

（二）待測應(yīng)用安裝

1.下載“智慧城市.apk”（競賽管理平臺右側(cè)資源下載區(qū)）文件。

2.將apk文件安裝到模擬器中，啟動App，配置服務(wù)器的IP和

port，準備運行測試。

（三）基本要求

使用模塊