第五章 系統實作
5.1 網頁實作(電腦)
5.1.1 首頁(登入)
使用者可以在首頁看見介紹影片，並進行登入
圖 5.1 首頁之登入頁面圖(介紹影片暫時由其它影片替代) 5.1.2 首頁(註冊)
使用者可以在點擊「註冊會員」之後進行註冊會員
老人安養照護 APP：視訊共享
逢甲大學學生報告 e-Paper( 2016 年)
5.1.2 首頁(忘記密碼)
使用者可以在點擊「忘記密碼」之後輸入資料，找回失去的密碼
圖 5.3 首頁之忘記密碼頁面圖(介紹影片暫時由其它影片替代) 輸入資料後，系統會自動以 SMTP 發送信件給使用者
圖 5.4 忘記密碼信件示意圖
老人安養照護 APP：視訊共享
5.1.2 個人資料
使用者登入後可以在「我的資料」查看與修改個人資料
圖 5.5 個人資料頁面圖
圖 5.6 個人資料頁面圖 2(捲軸往下拉)
老人安養照護 APP：視訊共享
逢甲大學學生報告 e-Paper( 2016 年)
使用者登入後可以這修改資料，並設定不同的分享權限
圖 5.7 個人資料修改圖 5.1.3 我的好友
使用者登入後可以在「我的好友」查看使用者與加入或刪除好友 使用者只會看見自己權限可以看見的資料
圖 5.8 我的好友頁面圖(查詢目前不是好友的會員)
老人安養照護 APP：視訊共享
圖 5.9 我的好友頁面圖(查詢已發送好友邀請，但對方尚未回覆的會員)
圖 5.10 我的好友頁面圖(查詢您尚未回覆好友邀請的會員)
老人安養照護 APP：視訊共享
逢甲大學學生報告 e-Paper( 2016 年)
圖 5.11 我的好友頁面圖(查詢自己)
左方可顯示收到的好友邀請，並接受或拒絕
圖 5.12 我的好友邀請示意圖
老人安養照護 APP：視訊共享
圖 5.13 我的好友頁面圖(查詢好友，或是從左方好友名單點擊好友)
5.1.3 聊天訊息
使用者登入後可以在這傳送文字、影片、圖片給好友
老人安養照護 APP：視訊共享
逢甲大學學生報告 e-Paper( 2016 年)
圖 5.15 聊天訊息之頁面圖(點擊好友欄可以直接開啟右方聊天室)
圖 5.16 聊天訊息頁面圖(開啟右方聊天室後的畫面)
老人安養照護 APP：視訊共享
圖 5.17 點擊聊天室圖片(可以開啟 FancyBox 並看到檔案資訊)
圖 5.18 點擊「相簿檔案」(可以開啟直接選取相簿圖片發送到聊天室)
老人安養照護 APP：視訊共享
逢甲大學學生報告 e-Paper( 2016 年)
5.1.4 我的相簿
使用者可以在這裡存放、管理圖片與影片
上傳在聊天室的圖片或影片也會自動存放到預設相簿
圖 5.19 我的相簿頁面圖(點擊相簿圖片可以進入相簿) 使用者可以在這上傳圖片、影片到該相簿，或刪除該相簿的檔案 使用者可以在這更換相簿的封面、修改相簿的資訊
使用者可以在這分享該相簿給其它的好友
使用者可以在這藉由檔案資訊快速搜尋相簿裡的檔案、編輯與移動檔案
老人安養照護 APP：視訊共享
圖 5.20 進入相簿後的頁面圖
圖 5.21 點擊相簿裡的圖片
圖 5.22 點擊相簿裡的影片
老人安養照護 APP：視訊共享
逢甲大學學生報告 e-Paper( 2016 年)
圖 5.23 點擊編輯相簿
圖 5.24 點擊分享相簿
老人安養照護 APP：視訊共享
圖 5.25 點擊搜尋檔案
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：視訊共享