• 沒有找到結果。

首頁(登入與註冊)

第五章 系統實作

5.2 APP 實作(手機)

5.2.1 首頁(登入與註冊)

使用者可以在進入 APP 第一個畫面進行註冊和登入的動作

老人安養照護 APP:視訊共享

逢甲大學學生報告 e-Paper( 2016 年)

圖 5.27 APP 個人頁面 5.2.3 媒體

使用者選擇媒體後可選擇拍照或是錄影

圖 5.28 APP 媒體選擇頁面

老人安養照護 APP:視訊共享

選擇拍照後進入拍照畫面[4]

圖 5.29 APP 拍照頁面

圖 5.30 APP 進行拍照

老人安養照護 APP:視訊共享

逢甲大學學生報告 e-Paper( 2016 年)

圖 5.31 APP 相片預覽及儲存 選擇錄影後進入錄影畫面[5]

圖 5.32 APP 錄影頁面

圖 5.33 APP 進行錄影並儲存

老人安養照護 APP:視訊共享

5.2.4 檔案上傳

選擇檔案上傳後進行上傳檔案的動作,可選擇上傳圖片或影片

上傳成功後的圖片或影片會存入指定網站相簿,並可進行瀏覽和搜尋

圖 5.34 APP 檔案上傳頁面

老人安養照護 APP:視訊共享

逢甲大學學生報告 e-Paper( 2016 年)

圖 5.36 APP 上傳檔案上傳圖片

圖 5.37 APP 上傳圖片選擇圖片

老人安養照護 APP:視訊共享

圖 5.38 APP 上傳圖片上傳成功 5.2.5 我的好友

選擇好友後可以與該好友進行特定動作(聊天、視訊)

可在個人頁面點擊編輯好友進行對好友的管理(增加、刪除)

老人安養照護 APP:視訊共享

逢甲大學學生報告 e-Paper( 2016 年)

5.2.6 視訊

在個人頁面選擇好友後可點擊「視訊」撥打視訊電話給對方[3]

圖 5.40 APP 視訊來電圖示

通話成功後可在視訊中點擊右下角「開始錄影」進行錄影 但選擇錄影的前提是該使用者開啟的鏡頭是前置鏡頭 點擊視訊畫面中自己的畫面便可轉換前、後置鏡頭 點擊結束錄影後自動將影片儲存至手機相簿

老人安養照護 APP:視訊共享

圖 5.41 APP 進行視訊通話

圖 5.42 APP 視訊中錄影

老人安養照護 APP:視訊共享

逢甲大學學生報告 e-Paper( 2016 年)

圖 5.43 APP 視訊轉換鏡頭 5.2.7 聊天

在個人頁面選擇好友後可點擊「聊天」與好友進行文字對話

圖 5.44 APP 聊天功能

老人安養照護 APP:視訊共享 間學習和善用數種程式語言,包括 HTML、CSS、PHP、JavaScript、Android Java。其中在網站的方面,我們使用 PHP 作為後端的程式語言,而在資料庫方 面則是使用 MySQL。除此之外我們還使用了現在最火熱的 PHP Laravel 框架來 進行開發,使得開發速度和安全性都提升了許多。也使得原本的程式碼相較於 一般的 PHP,更俱備物件導向開發的特性。如在資料庫的操作,從使用原本的 mysqli 函式,轉為使用物件導向的 PDO(PHP Data Objects)。

在伺服器測試方面,因為想要知道我們伺服器的穩定度,所以使用曾經在課程 上聽老師說過的 Apache JMeter 壓力測試工具,並且花時間研究如何使用這個軟 體。雖然測試完後發現我們放在實驗室上的主機並沒有辦法承受太大的流量有

老人安養照護 APP:視訊共享 是我便一個人摸索、學習了許久。也深刻體認到,Google 的確可以說是我最好的 老師,在這段時間裡,從一開始只會寫簡單的 HTML 標籤、搞不清楚 CSS 的 Box modal 到底是怎麼排版的、完全不會使用 JavaScript,到現在可以很快的寫出 HTML 結構,並使用 CSS 使的 UI 更加人性化,再加上使用 Javascript 來賦予網頁

老人安養照護 APP:視訊共享

老人安養照護 APP:視訊共享

逢甲大學學生報告 e-Paper( 2016 年)

不足,使得軟體成品與理想中有些落差,無法完美地完成專題研究。不過,我已經 盡力而為,以後會更加努力學習。

老人安養照護 APP:視訊共享

參考文獻

[1] Sublime Text 3 官方網站:

https://www.sublimetext.com/

[2] Sublime Text 3 介紹網頁:

http://www.vedfolnir.com/sublime-text-editor-good-choice-6263.html [3] Sinch 官方網頁:

https://www.sinch.com/

[4] android --相機使用詳解概述:

http://fecbob.pixnet.net/blog/post/39322397

[5]Android 中使用 MediaRecorder 進行錄影詳解(視頻錄製): http://fecbob.pixnet.net/blog/post/38383079

老人安養照護 APP:視訊共享

逢甲大學學生報告 e-Paper( 2016 年)

附錄一、專題介紹影片

專題使用情境介紹影片

專題 App 操作影片

附錄二、專題發表投影片

老人安養照護 APP:視訊共享

老人安養照護 APP:視訊共享

逢甲大學學生報告 e-Paper( 2016 年)

老人安養照護 APP:視訊共享

老人安養照護 APP:視訊共享

逢甲大學學生報告 e-Paper( 2016 年)

老人安養照護 APP:視訊共享

老人安養照護 APP:視訊共享

逢甲大學學生報告 e-Paper( 2016 年)

老人安養照護 APP:視訊共享

老人安養照護 APP:視訊共享

逢甲大學學生報告 e-Paper( 2016 年)

老人安養照護 APP:視訊共享

老人安養照護 APP:視訊共享

逢甲大學學生報告 e-Paper( 2016 年)

老人安養照護 APP:視訊共享

附錄三、專題海報

相關文件