互聯網+APP的校瞳視頻產品設計實現

林沛聰 楊楷環 張火源 張國杰

摘要：過去，人們接收新鮮的訊息往往是通過文字或者長視頻等形式，相比較這些需要花費一定時間去看的內容，短視頻的內容要更加多元化且不受空間和時間的限制，同時用戶還擁有更多的自主選擇觀看權。為了讓更多的用戶花費更少的時間，了解更多的資訊，設計了互聯網+移動APP的短視頻系統——校瞳。該文章主要是通過介紹校瞳APP的開發方法及實現的具體步驟。

關鍵詞：短視頻;用戶;校瞳;Java;Ionic3.x

中圖分類號：TP37 文獻標識碼：A

文章編號：1009-3044（2019）32-0224-04

1背景

隨著互聯網市場高速的發展，人們娛樂的方式發生了翻天覆地的變化，基于移動環境下的“短視頻”類的APP迅速崛起，成了信息交換與傳遞的主流方式之一，并且呈現出一定的傳播規律。

通過分析，發現缺少一個主要的面向大學生分享生活以及從中獲取自己需要的視頻應用軟件，讓大學生能實時的分享自己的生活以及通過該應用知道其他的大學生生活中有趣的事情之外，還能從中了解社團以及學校發布的通知，同時周邊店家也能從中發布兼職信息以及學校招聘會企業發布招聘人才信息，減低商家招聘成本，實現人職相匹。與此相關，一個“校瞳”項目誕生了。

2總體設計

2.1“校瞳”的架構設計

“校瞳”APP分別有“學生”“教師”“院系”“社團”“企業”和“家長”共六大角色構建成。

對于學生：學生可以在線進行課堂學習，分享娛樂性的文字和視頻，查看院系和社團活動、講座信息、選修課程介紹、周邊店鋪的兼職信息以及企業招聘信息。

對于教師：教師可以進行課堂直播供學生在線學習，以及通過該軟件發布選課信息和進行簡單對選修課程的介紹;分享老師最新的研究成果等。

對于院系或社團：院系可以進行講座信息的通知和宣傳;社團可以發布自己社團活動、展示社團自身的魅力。

對于學校周邊的店鋪：學校周邊的店鋪發布兼職信息沒有一個完整的平臺，同時也給勤工助學的同學減少兼職困擾，通過該平臺店家可以高效找到兼職者，同時對自己店家活動進行宣傳。

對于企業：每年學校舉行的招聘會，企業都只能通過狹窄的校園擺攤或者是學生主動咨詢的渠道提高企業的知名度，企業通過該平臺，可提高自身的曝光率，通過影視宣傳能更準確并更快捷找到與崗位剛匹配的人才，同時學生也能根據自身的特點找到理想企業。

對于家長：需要給家里上小學、中學的孩子找家教的家長可以通過改平臺，發布家教相關信息，為家里的小孩找到合適的家教。

2.2“校瞳”的功能設計

“校瞳”系統有三大核心功能模塊，分別是：“用戶功能模塊”，“視頻功能模塊”，“評論功能模塊”。這三大核心功能模塊相對應的作用如下。

2.2.1用戶管理模塊

1）注冊功能：用戶需要注冊，綁定手機號進行短信驗證可完成注冊操作。

2）登錄功能：用戶注冊成功后可進行登錄操作，登錄成功即可進入系統。

3）查詢該手機是否已存：注冊操作前可進行手機號是否已被注冊驗證。

4）獲取當前用戶信息：登錄后可獲得當前用戶的信息。

5）修改用戶普通信息：登錄后可修改當前用戶的信息。

6）修改用戶頭像：登錄后可修改當前用戶的頭像。

7）退出功能：注銷當前賬號。

2.2.2視頻管理模塊

1）視頻發布功能：登錄后可上傳視頻供校友觀看。

2）視頻刪除功能：登錄后可刪除自己之前上傳的視頻。

3）視頻分享功能：登錄后可分享他人上傳的視頻。

4）視頻舉報功能：登錄后可舉報他人的違規視頻。

5）視頻查詢功能：登錄后可按條件查詢特定種類的視頻。

2.2.3評論管理模塊

1）評論發布功能：登錄后可評論他人的視頻。

2）評論刪除功能：登錄后可刪除曾經評論他人的評論，被評論的用戶也可以及進行刪除評論。

2.3數據庫概要設計

“校瞳”的數據庫概念設計主要針對三大功能模塊建立相關的數據表進行“增刪改查”等操作。具體可以劃分為：

1）用戶功能模塊相關數據表;

2）視頻功能模塊相關數據表;

3）評論功能模塊相關數據表。

3設計與實現

3.1歡迎、登錄與注冊頁面的設計

在“校瞳“APP的歡迎頁面中，其背景顏色是從白色到灰色漸變，由“校瞳”的LOGO和感嘆號里面的Slogan組成，呈現出簡潔的藝術感。無論是“校瞳“LOGO，又或是標語“透過你的眼發現你”，都標志著這是一個“短視頻類”軟件。其效果圖如圖1所示。

此外，在“校瞳”APP的注冊與登錄頁面中，由注冊與登陸的條件和注冊與登陸的角色兩部分組成。不同的注冊角色，需要填寫的注冊條件各不相同。具體由“學生”“家長”“教師”“社團”“院系”“企業”這六大角色所組成。

當角色為“學生”或者“家長”時，需要填寫學校、昵稱、手機號碼、驗證碼、密碼這五大部分;當角色為“教師”或者“社團”又或者“院系”時，需要填寫學校、用戶名、郵箱、密碼、相關證明材料等資料;當角色為“企業”時，需要填寫企業名稱、地址、郵箱、密碼、相關證明等資料。其效果圖如圖2所示。

當用戶填寫完成相對應的注冊資料的時候，“注冊”按鈕才可被點擊，再跳到登錄頁面。其效果圖如圖3所示。

3.2首頁和視頻詳情頁的設計

在“校瞳”APP的首頁中，采用了簡約的界面設計，讓用戶感受一種簡約美，讓APP更耐看！其次，首頁主要分為“全國”和“本校”兩大部分，而這兩大部分中，又分別分為了“校園招聘”“社團或院系活動”“名家講堂”“文娛活動”“選課導向”“家教兼職”“在線課堂”這七小部分，每一小部分都有由其相對應的角色發布的短視頻，可供用戶觀看。然而，在“全國”和“本校”這兩大部分的主要區別在于，“全國”是用戶可以看到除了本校園以外，其他學校用戶所發布的短視頻;而“本校”就是用戶本校園的用戶所發布的短視頻。其效果圖如圖4所示。

在“校瞳”APP的視頻詳情頁中，用戶除了可以觀看短視頻外，還可以對此短視頻進行點贊，又或者進行評論。其次，還可以對相對應的評論進行回復。

而且，當用戶發現此短視頻有出現違規情況，也可進行視頻的舉報。后端管理員會收到用戶所舉報的信息，做出相對應的排查。其效果圖如圖5所示。

3.3具體功能實現

3.3.1前端的核心代碼

在“校瞳”APP中，前端的ionic 3.X默認采用懶加載機制，什么是懶加載呢？當第一次進入應用，會加載app.module，如果沒有采用懶加載，那么app.module里的所有東西都會被加載，很顯然這是不太合適的，因為里面的組件和服務在第一次進入應用時并沒有全部使用，可能只使用了很少的一部分，那么對于比較大型的應用來說，由于頁面和其他的服務，指令，管道比較多，就會造成比較用戶體驗不好的影響。這個時候需要把應用分為一個個module，各自引入自己用到的東西，不要管別的模塊。那么第一次進入應用，就只加載很少的app.module和root page對應的module，當進入其他頁面的時候，才會去加載相應的module。這樣的好處是項目代碼結構清晰，易于維護，易于開發，而且第一次加載速度比較快。當使用ionic 3.X的CLI來新建頁面，默認的會是懶加載的結構，甚至不止頁面，所有的component，service，directive都默認的是懶加載。

此外，在“校瞳”APP中，前端也使用了ionic 3.X的Storage本地緩存，可以很容易地存儲鍵值對和JSON對象。Storage在底層使用多種存儲引擎，根據運行平臺選擇最佳的存儲方式。當運行在Native模式時，Storage將優先使用SQLite。當運行在Web中或作為PWA應用時，Storage將根據你確定的優先級使用IndexedDB、WebSQL或localstorage。

當用戶在“校瞳”APP對某個視頻進行評論操作的時候，后臺先將被評論的視頻ID、評論者id、評論內容、該條評論創建時間等數據一次通過控制層、業務邏輯層傳到數據庫交互層。其次，利用MyBatis框架進行數據庫操作，將數據存儲到數據庫對應的表中。

4結束語

“校瞳”是一個完整的視頻分享APP，在用戶模塊，視頻模塊，評論模塊三大模塊實現之后，已經具備了一個手機APP所需的功能。其次，“校瞳”系統的角色架構清晰明確，大體分為“學生”“家長”“教師”“社團”“院系”“企業”這六大角色。各個角色都有其相對應的功能與操作準則。

它使我們可以隨時隨地享受軟件樂趣，讓我們擺脫沉重的日常生活。該軟件的主界面力求美觀，令人愉悅，提升用戶對軟件的興趣。該軟件的控制模塊易于理解和操作，為用戶提供良好的軟件環境。它了解用戶的需求，了解工作流程以及可能出現的問題。