很多計算機專業大學生經常和我交流：畢業設計沒思路、不會做、論文不會寫、太難了......

針對這些問題，決定分享一些軟、硬件項目的設計思路和實施方法，希望可以幫助大家，也祝愿各位學子，順利畢業！

項目專欄：7天搞定畢業設計和論文

本課題為基于智能手機的報紙閱讀器。老年人大多有讀書看報的喜好，但受限于視力衰退，閱讀報紙上較小的文字極為吃力，時間一長容易導致眼睛不舒服等不良狀況，給日常生活造成了不小的麻煩。如果有人或者使用軟件能夠幫助老人將報紙內容朗讀出來，這個問題就可以在一定程度上得到解決。

目前在 Android 應用市場有不計其數的 APP 應用，但提供給老年人使用的卻少之又少，而且普遍質量較差，并沒有針對老年人的特點和使用場景進行有針對性的設計和開發。結果就是這些 APP 并沒有真正解決老年人的某些痛點問題。

本課題選擇Android平臺作為開發平臺，因其使用范圍廣，基數大，可使其適用性大大增加。老年人只需使用該 App 對所需要閱讀的內容拍照，本應用即會將選中的內容朗讀出來，解決了老年人由于新聞正文字體較小而造成的閱讀不便的問題。本 App 還提供了存儲功能，用戶可選擇將之前閱讀的內容緩存起來，便于下次使用。

項目工程資源下載請參見：https://download.csdn.net/download/m0_38106923/87845018

1

項目功能

本課題的目標是開發一款基于 Android 系統的報紙閱讀器，能夠具備良好的兼容性、穩定性與實用性。所需要實現的基礎功能如下：

• 拍照：調用手機自帶的攝像頭對報紙內容進行拍照。

• 裁剪內容：由于上一步得到的圖片可能混入了一些與所需內容無關的部分，因此需要對圖片進行裁剪。

• OCR：將裁剪后的圖片上傳至遠端的 OCR Cloud 引擎進行文字識別，并將識別結果返回給用戶。

• TTS：將識別所得的文字朗讀出來。

• 存儲：將 COR 是被后的文字存儲在手機上，方便下一次使用，同時也需提供刪除功能。

• 音量調節：可以對發音人的音量進行調大或者調小。

• 語音設置：進一步的個性化設置，可選擇不同的地方性語言進行朗讀。

2

項目業務處理流程

本課題主要為設計一款在 Android 系統上運行的報紙閱讀器，并實現上述的所有功能。

用戶打開該應用后，程序會自動檢測手機中是否安裝訊飛語音，該語音引擎在朗讀文字的時候需要用到。如果檢測到用戶尚未安裝，會彈出對話框提醒用戶安裝。安裝完成后可以選擇“拍照”或者“瀏覽”功能。

選擇“拍照”后，程序調用系統自帶的相機供用戶拍攝報紙內容，待拍照完成后，跳轉至圖片裁剪界面。在該界面中會將用戶在上一步拍攝的照片顯示出來，并在圖片中提供一個可任意方向及大小拖動的方框，用戶可拖動該方框選出需要識別的圖片部分。裁剪完成后點擊“確定”即開始進行文字識別。由于該識別過程需要聯網，如果發現用戶為接入互聯網會彈出對話框提醒用戶進行相關設置。

在文字識別完成后，程序會自動跳轉到朗讀的界面。該界面會顯示新聞的標題，并提供音量調節功能，拖動音量條即可對朗讀的音量進行實時調節，并且程序會記錄用戶上一次所使用的音量大小，避免每次朗讀時都要手動調大音量的麻煩。

改界面還提供語音設置與刪除新聞的功能。語音設置功能由訊飛語音提供，可以更換不同的發音語言。

點擊“瀏覽”跳轉到歷史新聞的界面，該界面以列表的形式顯示了用戶所有的識別記錄。點擊某條新聞即可跳轉到朗讀界面自動朗讀。如果需要刪除，長按該條新聞，會彈出對話框提醒用戶是否真的需要刪除，防止誤操作。

3

開發環境搭建

本項目需要安裝 Android 開發環境以及 Cordova 框架。下面將分為 JDK、Android SDK、Node.js、Cordova 4個部分進行講解。

• 安裝JDK

編譯 Android 時需要用到 JRE 支持。安裝 JDK 需要在 Sun 官方網站進行下載，地址是 http://www.oracle.com/technetwork/java/javase/downloads/index.html ，這里選擇 Java SE 8u45 下載。然后雙擊下載后的文件即可自動安裝。安裝完成后打開終端，并輸入 java -version ，即可看到相應的 Java 安裝信息。默認的安裝目錄實在 /System/Libray/Frameworks /JavaVM.Framwork/，在該目錄下 Versions 文件夾里存放了不同版本的 JDK。

• 安裝Android SDK

前往 Android 開發者網站下載，地址是 developer.android.com 。下載后解壓即可使用。

• 安裝Node.js

前往 Node.js 官方網站進行下載，地址是 https://nodejs.org/ 。這里選擇的是 Node.js for Mac的安裝文件進行下載，下載完成后雙擊下載文件即可自動開始安裝。安裝完成后在終端中輸入 node -v 即可顯示當前 Node.js 的安裝版本號。

• 安裝Cordova

在電腦打開終端，輸入 sudo npm install -g cordova 開始安裝 Cordova。安裝完成后在終端輸入 cordova -v 即可顯示當前 cordova 的版本號。

4

Cordova工程創建

1. 打開終端，輸入 cordova create SmartReader com.xyq.smartreader SmartReader即可成功創建 Cordova項目。上述命令行的第一個參數是指創建該工程的文件夾名，如果不存在將會創建該文件夾。第二個參數為該項目的包名。第三個參數為該項目在手機下顯示的名字。

2. 在終端輸入 cd SmartReader，進入該項目的文件夾。輸入 cordova platform add android，添加Android平臺的支持。Cordova會調用Android SDK在platform/android 中創建一個完整的Android應用工程。

3. 在WebStorm中打開SmartReader文件夾，即可看到該目錄下已經生成了一系列的代碼文件。

4. 完成創建 Cordova工程。Cordova會在www目錄下默認生成index.html，css/index.css，img/logo.png和js/index.js等文件。

5. 將手機通過USB數據線與筆記本連接，并開啟開發者選項以及使用USB調試的功能。在終端中輸入 cordova run android 即可將該項目安裝在手機上。如果需要在筆記本上的模擬器運行，則在終端輸入 cordova emulate android 即可啟動Android模擬器。

5

軟件功能實現

5.1、UI界面

由于 Cordova只提供了調用Native API的接口，并沒有提供任何UI方面的功能，所以UI方面這里使用 Ratchet 框架來構造界面。Ratchet 是一款專門為移動開發打造的框架，包括按鈕、列表、標簽欄等在移動設備上常見的組件，讓開發者可以很方便的制作精美的頁面。其支持 Android 與iOS7兩種風格，本軟件使用iOS7風格。首先需要到 Ratchet 官方網站上下載該框架，下載完成后解壓，將相應的 JavaScript 和 CSS 文件復制到項目目錄下 www 文件夾的對應目錄。然后即可引用：

<link rel="stylesheet" href="ratchet/css/ratchet.min.css"/>

5.2、數據存儲

HTML5提供了兩種在客戶端存儲數據的新方法，分別是localStorage和sessionStorage。在這之前，這類功能都是使用 cookie實現的。但是cookie并不適合大量數據的存儲，一般情況下只能存儲大約4KB的數據。localStorage對數據的存儲沒有時間限制，sessionStorage存儲的數據在用戶關閉瀏覽器窗口后會給刪除。因而在本應用中實現存儲功能應使用localStorage。localStorage使用鍵值對的方式進行數據存儲，目前僅支持存儲字符串類型的數據。其提供了 setItem、getItem和removeItem三個方法，分別對應的是寫、讀、刪的功能。

5.3、拍照功能

由于從 Cordova 3開始采用插件的方式提供核心 API，因此需要通過安裝插件的方式進行拓展。首先安裝 Cordova 插件 org.apache.cordova.camera，該插件提供對系統照相機功能調用的接口。在終端輸入 cordova plugin add org.apache.cordova.camera ，安裝該插件。

該插件提供了 navigator.camera.getPicture 這個方法來調用系統的拍照功能，該方法需要傳入三個參數，分別是：拍照成功后的回調函數、拍照失敗后的回調函數和拍照的參數。拍照的參數包括圖片質量（默認為75%）、圖片寬高、圖片拓展名等。具體使用代碼如下：

navigator.camera.getPicture(onSuccess, onFail, {
   quality: 100,
   destinationType: Camera.DestinationType.FILE_URI
});


function onSuccess(imageURI) {
   localStorage.setItem("imgUrl", imageURI);
     location.href = "crop.html";
 }


function onFail(error) {}

在拍照完成后需要跳轉到裁剪圖片的頁面，因此在跳轉前需要把圖片的地址保存下來以供下一步使用。

5.4、裁剪圖片

使用 Image Cropper 插件實現。首先需要到該插件官網 https://github.com/fengyuanchen/cropper 下載。下載完成后將文件解壓，將相應的 JavaScript 文件 和 CSS 文件放到 SmartReader 項目下的 www 文件夾中對應的位置。由于該插件依賴 jQuery，因此在引入其 JavaScript 前需要先引入 jQuery。引入代碼如下：

"stylesheet" type="text/css" href="css/crop.css" />

以及：

<script src="js/jquery.min.js">script>
<script src="js/cropper.js">script>

引入完成后即可開始使用。該插件提供了一個名為cropper 的方法供開發者調用裁剪功能，該方法需要傳入一個為 Object形式的配置項參數。可選的配置項包括圖片比例、默認裁剪框的百分比、圖片縮放、限制裁剪大小等。

首先需要在 HTML 文件中放置一個 img 標簽供該插件使用：

"container">
    <img id="crop" src="" alt="" style="display: none;"/>
div>
開始裁剪：
$("#crop").cropper({
    autoCropArea: 0.85
});

獲得裁剪后的圖片信息，為 DataURL 形式：

var dataURL = $("#container #crop").cropper("getCroppedCanvas").toDataURL();

5.5、上傳圖片

需要使用 Cordova 插件 org.apache.cordova.file-transfer。在終端中輸入 cordova plugin add org.apache.cordova.file-transfer，可安裝。該插件提供了全局的FileTransfer和FileUploadOptions構造函數，使用時需要先實例化。實例化FileUploadOptions后需要配置fileKey，這是一個字符串，需要跟服務器端統一，這樣服務器端才可根據該 Key值取到相應的上傳圖片。實例化FileTransfer后需要傳入五個參數，分別是上傳的數據、服務器地址、上傳成功的回調、上傳失敗的回調和FileUploadOptions實例化對象。上傳代碼如下：

var options = new FileUploadOptions();
options.fileKey = "ocrImage";
options.chunkedMode = false;


var uri = encodeURI("http://dev.paper-reader.avosapps.com/upload");
var ft = new FileTransfer();


ft.upload(dataURL, uri, function (r) {
    window.plugins.spinnerDialog.hide();
    var text = r.response;
    localStorage.setItem("text", text);
    location.href = "speak.html";
 }, function (error) {
}, options);

在獲取 OCR 識別后的文字，需要該文件存儲在 localStorage 中，以便下一次的使用。這一步的操作將放到跳轉到朗讀頁面后進行。存儲的內容包括新聞標題、正文以及一個全局 id，全局id 用于在朗讀或者刪除時在 localStorage 中找到對應的內容。默認將文本的第一行作為標題，其余部分為正文。存儲代碼如下：

var obj = {};
var current = parseInt(localStorage.getItem("current")) + 1;
title = text.split("
")[0];
var content = text.split("
").slice(1).join("");


id = current;
obj.id = current;
obj.title = title;
obj.content = content;
newsList = JSON.parse(localStorage.getItem("news"));
newsList.push(obj);
localStorage.setItem("news", JSON.stringify(newsList));
localStorage.setItem("current", current);

5.6、瀏覽新聞

需要先將所有存儲在 localStorage 中的新聞條目取出，再逐條渲染在一個列表中。該頁面提供兩種操作：點擊新聞，即可跳轉到朗讀界面，自動朗讀該條新聞；

長按新聞，將會彈出一個對話框詢問是否刪除該條新聞，如果選擇“確定”將會把該條新聞從列表和 localStorage 存儲中移除。

var newsList = JSON.parse(localStorage.getItem("news"));
var newsElem = document.getElementById("news");
var template = '
%title%
';
var elemList = [];
 
if (newsList.length == 0) {
   document.getElementById("tip-container").style.display = "block";
   return;
}
 
for (var i = 0, length = newsList.length; i < length; i++) {
    var id = newsList[i].id;
    var title = newsList[i].title;
    var elemStr = template.replace("%link%", "speak.html?id=" + id)
                    .replace("%title%", title)
                    .replace("%id%", id);
    elemList.push(elemStr);
 }
 
 newsElem.innerHTML = elemList.join("");
 newsElem.style.display = "block";

5.7、朗讀

需要使用 Cordova 插件 com.wordsbaking.cordova.tts。在終端中輸入 cordova plugin add com.wordsbaking.cordova.tts，即可安裝。該插件提供TTS.speak這個方法用于朗讀指定的文本。使用該方法需要傳入三個參數，分別是朗讀配置項、朗讀成功后的回調函數和朗讀失敗后的回調函數。其中朗讀配置項是一個Object形式的參數，可設置朗讀文本、朗讀語音和朗讀速率。如果需要停止朗讀，則需調用TTS.stop()這個方法。

TTS.speak({
    text: text,
    locale: "zh-CN",
    rate: 0.75
}, function () {
}, function () {
});

5.8、音量調節

需要使用 Cordova 插件 com.develcode.plugins.volumeControl。在終端中輸入 cordova plugin add git+https://github.com/manusimpson/Phonegap-Android-VolumeControl.git，即可安裝。該插件提供了名為VolumeControl.setVolume的方法用于控制音量。

使用該方法是需要傳入三個參數，分別是目標音量大小、調整音量成功后的回調函數和調整音量失敗后的回調函數。如果需要獲取當前音量大小，則使用 VolumeControl.getVolume 方法即可。

VolumeControl.setVolume(parseInt(elem.value), onVolSuccess, onVolError);
 
function onVolSuccess(){}
function onVolError(){}

5.9、音量條UI

需要使用插件 Powerange。這是一款具有 iOS7 風格的滑塊插件。首先需要到該插件官網http://abpetkov.github.io/powerange/ 下載。完成后解壓，并將相應的 JavaScript文件和CSS文件拷貝到項目文件夾www目錄中對應的文件夾。該插件提供了名為Powerange的構造函數。實例化時需要傳入兩個參數，分別是用于綁定的HTML Input元素和配置項。其中配置項包括一系列可選的參數，包括移動滑塊后觸發的回調函數、滑塊的取值范圍、起始位置等。使用代碼如下：

"range-container">
    <input type="text" name="range" id="range" style="display: none;"/>
div>
 
var elem = document.getElementById("range");
new Powerange(elem, {
    min: 0,
    max: 100,
    start: parseInt(localStorage.getItem("volume")),
    callback: function() {
       VolumeControl.setVolume(parseInt(elem.value), onVolSuccess, onVolError);
       localStorage.setItem("volume", elem.value + "");
     }
});

5.10、檢測網絡狀態

需要使用 Cordova 插件 org.apache.cordova.network-information。在終端中輸入 cordova plugin add org.apache.cordova.network-information，即可安裝。通過獲取 navigator.connection.type 該屬性的值即可得知用戶實時的網絡狀況。由于這里僅需要在用戶無網絡連接時給出提醒，因此僅需判斷 navigator.connection.type 是否 為 “none” 即可。代碼如下：

var networkState = navigator.connection.type;


if (networkState == "none") {
    navigator.notification.confirm(
        "檢測到您已經斷開網絡，是否馬上打開？",
        onConfirm,
        "未聯網",
        ["取消", "去打開"]
     );


     function onConfirm(buttonIndex) {
        if (buttonIndex == 2) {
             LocationAndSettings.switchToWifiSettings();
         }
}

5.11、檢測是否安裝訊飛語音

需要使用 Cordova 插件 com.ohh2ahh.plugins.appavailability。在終端輸入 cordova plugin add com.ohh2ahh.plugins.appavailability，即可安裝。該插件提供了名為appAvailability.check的方法用于檢測特定的APP是否有被安裝在手機上。使用該方法時需要傳入三個參數，分別是APP的包名、檢測到成功安裝的回調函數和檢測到未成功安裝的回調函數。使用代碼如下：

appAvailability.check(
    ' com.iflytek.tts ',
    function() {           
        // 已安裝
    },
    function() {           
        // 未安裝
    }
);

5.12、跳轉至設置界面

需要使用 Cordova 插件 sk.tamex.locationandsettings。在終端中輸入 cordova plugin add sk.tamex.locationandsettings，即可安裝。該插件提供了一系列的設置功能，包括對Wifi、GPS和TTS等。這里僅需要使用跳轉至Wifi和TTS設置界面的功能即可。

跳轉至 Wifi 設置界面，使用如下方法：

LocationAndSettings.switchToWifiSettings();

跳轉至 TTS設置界面，使用如下方法：

LocationAndSettings.switchToTTSSettings();

6

項目效果

點擊“拍照”后跳轉至系統設置界面：

拍照完成后跳轉至裁剪圖片界面：

中間的方格框可隨意拖動，當裁剪到合適大小后向下滾動頁面，點擊“確定”按鈕開始進行 OCR 識別，點擊“取消”返回到啟動界面：

經過實際測試，在 wifi 條件下識別大概需要 30秒 的時間：

識別結果：

識別完成即自動開始朗讀，以下為朗讀時的界面，提供音量調節功能（會自動記住上一次設置的音量，避免每次播放都要調大音量，默認的音量為50%大小），以及重復朗讀功能：

點擊“語音設置”按鈕，跳轉到系統的語音設置界面，可進行一系列相關的設置：

重新打開軟件，點擊“瀏覽”，來到新聞列表界面，點擊相關條目即可直接朗讀：

如果需要刪除某條新聞，長按該條新聞即可：

由于本應用需要使用科大訊飛的語音引擎，以及 OCR 識別需要在聯網的條件的進行，因此當檢測到以上條件不滿足時會給用戶提醒：

7

兼容性測試

兼容性是指硬件之間、軟件之間或是軟硬件組合系統之間的相互協調工作的程度。兼容的概念比較廣，對于軟件的兼容性，指的是指某個軟件能穩定地工作在若干個操作系統之中，而不會出現意外的退出等問題。

這里使用阿里移動測試服務對本應用進行基本的兼容性測試，地址是http://mts.aliyun.com。阿里移動測試服務是為廣大移動開發者提供真機測試服務的云平臺，擁有大量熱門機型，提供7x24全天候服務。能夠幫助開發者以最低的成本、最高的效率發現APP中的各類隱患，包括APP崩潰、各類兼容性、功能性、性能問題等。網站界面如下圖所示：

測試使用的手機設備包括三星、華為、小米和魅族一共30部手機，測試的Android操作系統版本從4.0.4 到4.4.4，已經涵蓋了市面上大多數的Android熱門機型，因此其測試結果也是具有一定的實際意義的。本應用的兼容性測試結果如下圖所示：

8

模塊功能測試

功能測試，也稱為行為測試，根據產品特性、操作描述和用戶方案，測試一個產品的特性和可操作行為以確定它們滿足設計需求。功能測試是為了確保程序以期望的方式運行而按功能要求對軟件進行的測試，通過對一個系統的所有的特性和功能都進行測試確保符合需求和規范。功能測試也叫黑盒測試或數據驅動測試，只需考慮需要測試的各個功能，不需要考慮整個軟件的內部結構及代碼.一般從軟件產品的界面、架構出發，按照需求編寫出來的測試用例，輸入數據在預期結果和實際結果之間進行評測，進而提出更加使產品達到用戶使用的要求。測試用例與測試結果分別如下表所示：