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

(1)

報告題名：

老人安養照護

APP：

視訊共享

Elderly Nursing Care APP ： Visual Communication Sharing

作者：梁少榕、陳怡蕙、蕭鴻儒

系級：資訊工程學系

學號：D0285473、D0247913、D0247909

開課老師：楊東麟老師

課程名稱：專題研究(二)

開課系所：資訊工程學系

開課學年：105 學年度第 1 學期

F

C

U

e

P

a

p

e

r

(2)

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

中文摘要

目前社會上有許多關於老年照護的議題，由於少子化與人口老化是目前時代不可改變的趨勢，雖然國家已經通過長期照護服務法，但是相關資源和配套措施尚未完備，需要大家一起努力逐步建構幸福老化的社會。有鑑於老年人的移動性較低，需要視訊溝通來增加生活的方便性和樂趣的分享。尤其是科技一直在進步，現在幾乎每個人都至少有一台手機和家家戶戶都有電腦，以前人們只能透過寫信來傳遞訊息，後來有了電話可以即時的傳遞聲音，而現在則是更方便地藉由網路使用通訊軟體如 Line 或 Facebook Message。然而日益增加的老年人口始終不是這些通訊軟體的主要使用者，也因此缺乏許多可能會對老年人方便的功能，例如不需要打字而使用語音和影像溝通。所以我們希望打造一個 APP 與網站結合，能夠讓老年人與親友建立簡單的視訊溝通橋樑，藉由容易操作的視訊 APP，提供長輩方便、快樂生活照護上的視訊分享功能。。

關鍵字：幸福老化、手機 APP、Android、即時通訊、網站

(3)

逢甲大學學生報告 ePaper( 2016 年)

Abstract

Nowadays, there have been various issues regarding the elderly care in our society. Because the trend of declining birth rates and increasing aging population is not going to chang soon, we must take actions to achieve a successful aging society. Although the government has already passed the Long-term Care Services Act, the necessary resources and supporting measures are not yet adequate to develop a society with comprehensive elderly welfare.

Owing to the lower mobility of the elderly, visual communication is required to increase daily-life convenience and sharing of joys. With the advance of technology, almost everyone has at least one smart phone and every household has a home computer. Coming from the era of writing letters for communication, we move now from voice communication of phones to computer networks using additional channels of online messengers such as LINE or Facebook Messenger. However, most elderly people are not main users of the above communication software. This is because these services lack useful and easy-to-use features for the elderly. For example, instead of typing words, voice and visual communications are more suitable.

In view of this, we would like to develop a mobile APP along with a website to bridge the communication between the elderly and their family members and friends. This easy-to-use video chat application offers the elderly a video sharing feature for them to enjoy a more convenient and happy life.

Keyword：Android、Happy Aging、Instant Messaging、Mobile

Application、Website

(4)

誌謝

非常感謝楊東麟老師擔任我們專題的指導教授，從一開始我們毫無頭緒的時候，老師就給予我們學習的方向，讓我們能夠逐步策劃並實現出我們的系統。老師不僅時時刻刻叮嚀我們的進度、提供我們許多能夠參考的資訊、安排學長指導我們，每每遇到讓我們手足無措、停滯不前的阻礙時，更能提供我們許多的建議和解決方式。老師常常說：「遇到不會的問題沒有關係，但是要想辦法解決，或是找別種能夠替代的方式。」另外，也時時提醒我們「要找到我們和別人不一樣的地方」，也就是這樣不斷激發我們的想法和解決問題的能力，我們才能夠順利完成專題。

(5)

老人安養照護 APP：視訊共享逢甲大學學生報告 ePaper( 2016 年)

目錄

中文摘要 ... i Abstract ... ii 誌謝 ... iii 目錄 ... iv 圖目錄 ... vii 表目錄 ... viii 第一章緒論 ... 1 1.1 研究動機與創作背景 ... 1 1.2 研究目標 ... 1 1.3 原創性 ... 2 1.4 工作分配及甘特圖... 2 第二章系統開發環境... ... 4 2.1 Sublime Text 3 ... 4 2.1.1 簡介 ... 4 2.1.2 套件 ... 4 2.2 WAMP ... 5 2.2.1 簡介 ... 5 2.3 Android studio ... 5 2.3.1 簡介 ... 5 2.4 系統需求 ... 5 2.4.1 電腦 ... 5 軟體環境： ... 5 硬體環境： ... 6 2.4.2 行動裝置 ... 6 軟體環境： ... 6 硬體環境： ... 6 2.5 專案管理方式 ... 6 第三章系統分析與設計 ... 7 3.1 系統架構 ... 7 3.2 使用者案例 ... 8 3.3 系統平台功能概述 ... 9 3.3.1 註冊登入系統： ... 9 3.3.2 好友系統： ... 9

(6)

老人安養照護 APP：視訊共享 3.3.3 傳送文字訊息： ... 9 3.3.4 傳送圖片： ... 9 3.3.5 傳送影片： ... 9 3.3.6 即時視訊： ... 9 3.3.7 相簿系統： ... 9 3.4 功能流程圖 ... 10 3.4.1 APP 流程 ... 10 3.4.2 網頁流程 ... 10 3.4.3 APP 使用案例流程 ... 11 3.4.3.1 範例一阿嬤請孫子幫忙買東西 ... 11 3.4.3.2 範例二孫子與阿嬤分享出遊景色 ... 11 3.4.3.3 範例三在外地的孫子陪同阿嬤看醫生 ... 12 3.4.3.4 範例四孫子替在家的阿嬤到醫院看病 ... 13 3.5 資料庫 ER 圖 ... 14 第四章系統測試 ... 15 4.1 產品測試 ... 15 4.2 單元測試 ... 15 4.3 功能性測試 ... 15 4.3.1 測試報告 ... 18 4.3.2 伺服器壓力測試 ... 18 4.3.3 APP 相容性測試 ... 18 第五章系統實作 ... 19 5.1 網頁實作(電腦) ... 19 5.1.1 首頁(登入) ... 19 5.1.2 首頁(註冊) ... 19 5.1.2 首頁(忘記密碼) ... 20 5.1.2 個人資料 ... 21 5.1.3 我的好友 ... 22 5.1.3 聊天訊息 ... 25 5.1.4 我的相簿 ... 28 5.2 APP 實作(手機) ... 31 5.2.1 首頁(登入與註冊) ... 31 5.2.2 個人頁面 ... 31 5.2.3 媒體 ... 32

(7)

老人安養照護 APP：視訊共享逢甲大學學生報告 ePaper( 2016 年) 5.2.7 聊天 ... 39 第六章結論和未來展望 ... 41 6.1 結論 ... 41 6.2 未來展望 ... 41 6.2.1 技術方面 ... 41 6.2.2 產學效益與後續發展 ... 41 6.3 遭遇問題 ... 41 6.4 心得 ... 42 參考文獻 ... 45 附錄一、專題介紹影片 ………..46 附錄二、專題發表投影片………...46 附錄三、專題海報………...56

(8)

圖目錄

圖 1.1 開發時間甘特圖 ... 3 圖 2.1 實際 Github 專案頁面圖 ... 7 圖 3.2 系統架構圖 ... 8 圖 3.3 系統使用者案例圖 ... 8 圖 3.4 APP 流程圖 ... 10 圖 3.5 網頁流程圖 ... 10 圖 3.6 APP 範例流程一 ... 11 圖 3.7 APP 範例流程二 ... 12 圖 3.8 APP 範例流程三 ... 12 圖 3.9 APP 範例流程四 ... 13 圖 3.10 資料庫 ER 圖 ... 14 圖 4.1 JMeter 結果報表 ... 18 圖 5.1 首頁之登入頁面圖 ... 19 圖 5.2 首頁之註冊頁面圖 ... 19 圖 5.3 首頁之忘記密碼頁面圖 ... 20 圖 5.4 忘記密碼信件示意圖 ... 20 圖 5.5 個人資料頁面圖 ... 21 圖 5.6 個人資料頁面圖 2 ... 21 圖 5.7 個人資料修改圖 ... 22 圖 5.8 我的好友頁面圖(查詢目前不是好友的會員) ... 22 圖 5.9 我的好友頁面圖(查詢已發送好友邀請，但對方尚未回覆的會員) ... 23 圖 5.10 我的好友頁面圖(查詢您尚未回覆好友邀請的會員) ... 23 圖 5.11 我的好友頁面圖(查詢自己) ... 24 圖 5.12 我的好友邀請示意圖 ... 24 圖 5.13 我的好友頁面圖(查詢好友，或是從左方好友名單點擊好友) ... 25 圖 5.14 我的好友頁面圖(查詢好友，或是從左方好友名單點擊好友) ... 25 圖 5.15 聊天訊息之頁面圖(點擊好友欄可以直接開啟右方聊天室) ... 26 圖 5.16 聊天訊息頁面圖(開啟右方聊天室後的畫面) ... 26 圖 5.17 點擊聊天室圖片(可以開啟 FancyBox 並看到檔案資訊) ... 27 圖 5.18 點擊「相簿檔案」(可以開啟直接選取相簿圖片發送到聊天室) ... 27 圖 5.19 我的相簿頁面圖(點擊相簿圖片可以進入相簿) ... 28 圖 5.20 進入相簿後的頁面圖 ... 28 圖 5.21 點擊相簿裡的圖片 ... 29 圖 5.22 點擊相簿裡的影片 ... 29 圖 5.23 點擊編輯相簿 ... 30

(9)

老人安養照護 APP：視訊共享逢甲大學學生報告 e-Paper( 2016 年) 圖 5.28 APP 媒體選擇頁面 ... 32 圖 5.29 APP 拍照頁面 ... 33 圖 5.30 APP 進行拍照 ... 33 圖 5.31 APP 相片預覽及儲存 ... 34 圖 5.32 APP 錄影頁面 ... 34 圖 5.33 APP 進行錄影並儲存 ... 34 圖 5.34 APP 檔案上傳頁面 ... 35 圖 5.35 APP 上傳檔案選擇相簿 ... 35 圖 5.36 APP 上傳檔案上傳圖片 ... 36 圖 5.37 APP 上傳圖片選擇圖片 ... 36 圖 5.38 APP 上傳圖片上傳成功 ... 37 圖 5.39 APP 點擊好友選擇動作 ... 37 圖 5.40 APP 視訊來電圖示 ... 38 圖 5.41 APP 進行視訊通話 ... 38 圖 5.42 APP 視訊中錄影 ... 39 圖 5.43 APP 視訊轉換鏡頭 ... 39 圖 5.44 APP 聊天功能 ... 40

表目錄

表 1.1 工作分配表 ... 2

(10)

第一章緒論

1.1 研究動機與創作背景

科技不斷的進步，通訊已經從電話轉向更快捷的網路通訊，現代主流的通訊軟體，例如 Line、Facebook Message，都是鎖定廣大的青壯年族群為主要使用者，也因此提供的功能、介面，皆是針對年輕族群所設計的。然而隨著時間逐漸步入嚴重的高齡化社會，老年人在生活上的方便照護與安全，成為我們需要探討的議題，所以也希望能夠結合科技來營造一個舒適、無憂的生活環境給長輩們度過晚年。因此我們開發一個老人安養照護 APP-視訊共享與 WEB 結合，提供長輩一個友善、便利的平台與他人視訊溝 通，不僅讓他們的生活更方便和增添樂趣，也能夠和親友交流時有個方便的分享工具。舉例來說：當孫子替阿嬤到超市買醬油，看到琳瑯滿目的種類與品牌卻不知道阿嬤想要的是哪一種的時候，就可以直接使用我們的 APP 來進行視訊通話，即時拍攝照片或影片作傳送，由另一端的阿嬤同步選擇並作立即的回覆，圓滿的達成購買醬油的任務。另外，孫子也可以使用這個 APP 和阿公分享一些因為行動不便而無法一起上山下海的活動過程、探訪舊居和各地風光美景。系統主要的概念為，長輩的親朋好友甚至志工團隊，都可以使用我們的 APP，經由網路便可透過立即視訊來與長輩進行通訊，並且留下紀錄儲存起來。除了一般的影視溝通，相關的應用包含：正在外縣市工作的兒女，只要利用此 APP 的視訊溝通功能，可以如同實際陪伴長輩到醫院看診一樣，在醫生的認可下替長輩了解並記下醫生的叮嚀，而不會因為長輩轉述或聽不懂造成問題。我們最主要的目的是藉由簡單操作的視訊 APP，提供長輩方便、安康的生活照護上的視訊分享功能。

1.2 研究目標

希望使老年人可以很輕易的使用我們的 APP，來與親朋好友建立起簡單的視訊互動和分享。目前的目標設定兩類的應用，使用案例列舉如下：一個是當孫子外出幫奶奶買物品時，可以藉由 APP 方便的詢問奶奶要買的是哪一個廠牌的產品，透過視訊讓奶奶挑選後購買。另一個是當孫子外出旅遊時，因為奶奶

(11)

老人安養照護 APP：視訊共享逢甲大學學生報告 e-Paper( 2016 年)

1.3 原創性

目前市面上雖然已經有許多通訊軟體，如 Line、Facebook Message 或 WeChat 等 APP。甚至是一些交友軟體，也能夠做到傳送文字、圖片等功能。但是這些軟體都有各自不同的設計主軸，例如 Line 就是以輕便為主，以及大量可以使用的貼圖是它的特色。而 Facebook Message 則是建構在他們會員之上的通訊 APP，介面沒有 Line 簡單、貼圖和功能沒有 Line 多，但是只要是 Facebook 的會員，就可以用來和 Facebook 上的好友聊天。這些軟體雖然都各有其特色，然而設計的出發點卻也都不是為較年長的人設計的，因此我們希望可以設計出簡單、親切的使用介面，讓使用者可以很輕易地上手。除此之外，我們從老年人和其親友的需求出發，設身處地的提供方便、簡單的視訊溝通功能，可以符合他們的生活情境上實際應用，而且減輕子女照護長輩的負擔。這些是目前市面上其他泛用的通訊軟體所沒有的。

1.4 工作分配及甘特圖

表 1.1 工作分配表工作項目工作分配網站開發梁少榕ＡＰＰ開發蕭鴻儒、陳怡蕙書面報告梁少榕、蕭鴻儒、陳怡蕙後端資料庫梁少榕

(12)

(13)

第二章系統開發環境

2.1 Sublime Text 3

2.1.1 簡介 Sublime Text 3 [1]是目前非常有名且熱門的文本編輯器，這套軟體不但空間小、免費(但可以藉由付費去除不定時會跳出來的贊助視窗)，且最大的特色就是可以使用許多套件(Package)來加速開發流程。除了一些需要編譯的程式語言會使用專門的 IDE，目前許多程式設計師都是使用 Sublime Text 3 來撰寫像網頁前端這種無法馬上編譯的語言。在撰寫專題時，網頁皆是使用 Sublime Text 3 [2]來進行撰寫。以下簡單列出幾項 Sublime Text 3 的特點： 1. 檔案瀏覽側邊欄 2. 簡化的視窗介面 3. 全文快速瀏覽側邊欄 4. 檔案標籤列 5. 文件記憶功能 2.1.2 套件 以下列出在開發時所使用到的 Sublime Text 3 套件： 1. Html-CSS-JS Pretty：將程式碼自動做不同的顏色配置。 2. Color Picker ：在 CSS 檔案中直接開啟色盤選色。 3. BracketHighlighter ：可自動顯示 HTML 標籤或 JavaScript 的各種對應區塊。

4. Blade Snippets ：Blade 模版的 Snippets。

5. AutoFileName ：自動找出正確的路徑，並提供該路徑下的所有檔案或資料夾選擇。 6. ConvertToUTF8 ：自動轉換為 UTF-8 編碼，解決中文亂碼。 7. SFTP/FTP ：存檔後自動將檔案上傳到設定的 FTP 伺服器。 8. Alignment ：自動將程式碼進行排版。 9. Emmet：提供 html 與 CSS 程式碼簡寫快捷鍵。 10. LiveReload：能夠在存檔時，自動同步重新整理瀏覽器。

(14)

2.2 WAMP

2.2.1 簡介 WAMP 是一個專門在 Windows 作業系統上的免費軟體，其整合了 Apache、MySQL 和 PHP 等架構網站伺服器所需要的環境，因此使用 WAMP 就可以快速地在 Windows 作業系統上架設網站，而不必另外分別處理 Apache、 MySQL 與 PHP 問題。在我們的專題中，我們將網站與 MySQL 資料庫藉由 WAMP 架設在實驗室裡的 Windows10 作業系統上。

2.3 Android studio

2.3.1 簡介 Android studio 是一個近幾年發布的軟體開發工具，免費提供開發者使用，其中完整整合了許多原本開發 Android APP 所需要使用到的工具，讓使用者更能便利且有效的開發與測試 Android APP。其中的特點包括： 1.視覺化的介面設計 2.便利快速的代碼重構 3.UI 編輯器，可以拖曳方式擺放元件，並預覽顯示效果 4.支援 Gradle (專案自動化建構工具)的建構方式

而我們選擇 Android Studio 來開發專題 APP，主要是因為操作介面相較其它工具較為明確精簡，容易學習也便於瀏覽與使用，在智能搜索、提示與許多特別功能，尤其是 UI 的編輯方式，更有助於我們在 APP 開發的學習與掌握。

2.4 系統需求

2.4.1 電腦

(15)

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

硬體環境：

CPU: Intel Core i5-3470 記憶體: 4GB Ram 硬碟: 2TB

I/O 設備: 鍵盤、滑鼠、螢幕

2.4.2 行動裝置

軟體環境：

Android 5.0.2、Android 6.0.1、Android 5.1.1、

硬體環境：

HTC One M9s、Samsung Galaxy S7 edge、Samsung Galaxy A7(2016 版)

2.5 專案管理方式

我們的專案使用「Github https://github.com」來做版本管理，並隨時記錄系統文件。

(16)

第三章系統分析與設計

3.1 系統架構

系統主要概念圖如下圖 3.1 所示，系統可以使用電腦的網頁，或者是手機的 APP，也可以直接使用手機瀏覽器到網頁，而這些裝置會連接到後端的 Server 與 Websocket，使用者可以藉由 Websocket 來即時傳遞文字、圖片和影片，並且將這些資料存在 Server 的資料庫上。此外使用者可以隨時藉由各種裝置連接到後端，取得那些曾經傳送過的對話記錄、圖片和影片，並可以簡單的分享給其他同樣使用平台的好友。在下圖 3.1 中，電腦、手機和主機是硬體，而網站和 APP 則是軟體。使用者可以藉由現在常見的硬體設備(電腦、手機)來使用軟體(網站、APP)上的功能。圖 3.1 系統整體概念圖系統架構圖如下圖所示，右上方為 APP 端分為四個子系統，左方為伺服器端有兩個子系統與一個外部系統，子系統分別是網頁端用來讀取 DB 資料的 Ajax 和 APP 端用來讀取資料的 API。而右上方區域的 APP 透過 API 子系統與左方伺服器端統相互連接。APP 端分別有影音與視訊兩個子系統，網頁端則是有好友、聊天和相簿資料子系統。

(17)

老人安養照護 APP：視訊共享逢甲大學學生報告 e-Paper( 2016 年) 圖 3.2 系統架構圖

3.2 使用者案例

圖為本系統之使用者案例圖，每個橢圓分別代表特定功能完成使用者案例。圖 3.3 系統使用者案例圖

(18)

3.3 系統平台功能概述

3.3.1 註冊登入系統： 使用者可以依據自己的資料註冊自己的專屬帳號，並在之後於 APP 或網頁進行登入轉至自己的專屬頁面。 3.3.2 好友系統： 使用者可以依照不同的帳號將其他使用者加入自己的好友名單，並在後續與對方使用各種不同的功能。 3.3.3 傳送文字訊息： 系統可以透過網頁或 APP 來發送文字訊息，並將文字對話存入系統資料庫，使用者可以隨時找到先前曾經發送過的對話。 3.3.4 傳送圖片： 使用者可以從 APP 即時拍照並且傳送照片，也可以從手機相簿選擇照片傳送，網站也能從聊天訊息選擇電腦中的照片並且傳送。例如當孫子去幫阿嬤買醬油時，孫子可以拍攝商品櫃上的商品傳送給阿嬤，並詢問阿嬤需要的是哪一種醬油。 3.3.5 傳送影片： 使用者可以從 APP 即時錄影並且傳送，網站聊天訊息亦能選擇影片檔案傳送。能與阿嬤分享生活上發生的瑣事，或是其他有趣的影片。 3.3.6 即時視訊： 使用者可以透過網路撥打視訊電話，進行即時視訊。例如當一家人出去遊玩時，阿嬤因為身體不便而沒有一同出遊，孫子便可以藉由視訊讓阿嬤在家也能欣賞外面的景色。 3.3.7 相簿系統： 使用者可以隨時瀏覽曾經發送過的圖片與影片，並且為這些檔案加上文字註解，且透過關鍵字進行搜尋，同時也可以將相簿分享權限給其他朋友。

(19)

3.4 功能流程圖

3.4.1 APP 一般功能流程 圖 3.4 APP 流程圖 3.4.2 網頁流程

(20)

老人安養照護 APP：視訊共享圖 3.5 網頁流程圖 3.4.3 APP 使用案例流程 針對 APP 的視訊功能，分別搭配是否錄影和使用手機前、後鏡頭，列出以下四項情境作為範例流程。 3.4.3.1 範例一阿嬤請孫子幫忙買東西 此範例主要使用手機後鏡頭拍攝商品讓阿嬤便於瀏覽、選擇，再搭配前鏡頭讓孫子面對面通話，且在談話途中可選擇是否錄影留下紀錄，便於日後若是需要購買相同物品可直接搜尋影片資料。圖 3.6 APP 範例流程一 3.4.3.2 範例二孫子與阿嬤分享出遊景色 此範例和範例一運用相同的概念，主要使用手機後鏡頭讓阿嬤可以一同觀看孫子拍攝的畫面，同時孫子也可以和阿嬤進行分享、對話，其中孫子可以詢問阿嬤想往哪裡走、較喜歡哪一邊的景色，結束通話後孫子便可開啟錄影功能錄下阿嬤喜歡的景色，上傳到共同相簿讓雙方隨時都能瀏覽影片。

(21)

老人安養照護 APP：視訊共享逢甲大學學生報告 e-Paper( 2016 年) 圖 3.7 APP 範例流程二 3.4.3.3 範例三在外地的孫子陪同阿嬤看醫生 此範例是利用手機前鏡頭讓在外地的孫子能夠和醫生面對面對談，模擬孫子在場陪伴阿嬤看醫生的情境，且在看病的途中都可以選擇錄影錄下醫生所說的內容，避免日後遺忘需要注意的部分。圖 3.8 APP 範例流程三

(22)

老人安養照護 APP：視訊共享 3.4.3.4 範例四孫子替在家的阿嬤到醫院看病 此範例和範例三的差別是由孫子代替在家的阿嬤到醫院看病，利用手機的前鏡頭讓阿嬤能夠和醫生進行看診，其中亦能選擇是否錄下醫生所說的內容，便於日後查詢相關資訊。圖 3.9 APP 範例流程四

(23)

3.5 資料庫 ER 圖

圖 3.10 資料庫 ER 圖本系統資料庫 ER 圖如上圖 3.10 所示有 7 個資料表，users 儲存會員的主要資料，userSubData 則是儲存會員的選填資料，userFriendInviteStates 儲存會員之間的好友關係，chatMsg 儲存好友之間的聊天訊息，albumList 儲存相簿的相關資訊， albumFile 儲存相簿裡的檔案資訊，albumPermission 儲存每個會員對於相簿的讀取權限。

(24)

第四章系統測試

4.1 產品測試

本系統每個模組皆有單元測試，而系統整合後進行功能性測試，後端伺服器進行壓力測試，並對 APP 版本運行相容性測試，確保 APP 品質。

4.2 單元測試

本系統每個模組皆有撰寫相對應的單元測試，單元測試的測試準則為程式碼覆蓋率達到 70%以上，目前我們的程式碼覆蓋率為 85%，有達到我們預期的標準。

4.3 功能性測試

本系統針對每個使者案例設計相對應的功能性測試，確保每個使用者案例都有被正確地實作。測試案例如下：測試案例 1 測試傳送文字訊息使用案例：傳送文字訊息測試結果：通過(pass) 預期結果：系統可以藉由網站傳送文字訊息，使對方即時收到測試步驟：開啟網頁登入系統後，進入聊天訊息頁面選擇好友輸入文字發送訊息測試案例 2 測試在聊天室傳送圖片使用案例：在聊天室傳送圖片測試結果：通過(pass) 預期結果：系統可以藉由網站在聊天室傳送圖片測試步驟：開啟網頁登入系統後，進入聊天訊息頁面選擇好友選擇傳送圖片按鈕選擇電腦或手機裡的圖片完成發送測試案例 3 測試在相簿上傳圖片

(25)

老人安養照護 APP：視訊共享逢甲大學學生報告 e-Paper( 2016 年) 開啟網頁登入系統後，進入相簿頁面選擇上傳相簿選擇上傳圖片按鈕選擇電腦或手機裡的圖片完成上傳測試案例 4 測試在聊天室傳送影片使用案例：在聊天室傳送影片測試結果：通過(pass) 預期結果：系統可以藉由網站在聊天室傳送影片測試步驟：開啟網頁登入系統後，進入聊天訊息頁面選擇好友選擇傳送影片按鈕選擇電腦或手機裡的影片完成傳送測試案例 5 測試在相簿裡上傳影片使用案例：在相簿上傳影片測試結果：通過(pass) 預期結果：系統可以藉由網站在相簿上傳影片測試步驟：開啟網頁登入系統後，進入相簿頁面選擇上傳相簿選擇上傳影片按鈕選擇電腦或手機裡的影片完成傳送測試案例 6 測試觀看、修改相簿裡的資料使用案例：觀看、修改相簿裡的資料測試結果：通過(pass) 預期結果：系統可以藉由網站，觀看與修改相簿裡的資料測試步驟：開啟網頁登入系統後，進入相簿頁面選擇相簿點擊圖片或影片即可觀看相片資訊點擊修改檔案輸入要修改的資訊

(26)

老人安養照護 APP：視訊共享完成修改測試案例 7 測試在 APP 上進行視訊通話使用案例：與好友進行視訊通話測試結果：通過(pass) 預期結果：系統可以經由網路撥打視訊電話，並且進行即時視訊測試步驟：開啟手機 APP 登入系統後，進入個人好友頁面選擇好友點擊 video 按鍵進行撥號待對方接聽後進行視訊通話點擊 end 結束通話完成視訊通話測試案例 8 測試在 APP 上進行錄影使用案例：在 APP 上進行錄影測試結果：通過(pass) 預期結果：系統可以在 APP 個人化頁面進行錄影功能，並且將檔案儲存至手機測試步驟：開啟手機 APP 登入系統後，進入個人好友頁面選擇好友點擊 record 按鍵跳入錄影畫面進行錄影點擊結束鍵結束錄影完成錄影測試案例 9 測試在 APP 上進行拍照使用案例：在 APP 上進行拍照測試結果：通過(pass) 預期結果：系統可以在 APP 個人化頁面進行拍照功能，並且將檔案儲

(27)

老人安養照護 APP：視訊共享逢甲大學學生報告 e-Paper( 2016 年) 開啟手機 APP 登入系統後，進入個人好友頁面選擇好友點擊 picture 按鍵跳入拍照畫面進行拍照點擊儲存鍵結束拍照完成拍照 4.3.1 測試報告  測試案例涵蓋使用案例比率：85%  測試案例通過率：100% 4.3.2 伺服器壓力測試 我們對後端伺服器使用 Apache JMeter 進行壓力測試，以得知在多人同時使用時的穩定性。我們設定每次執行 100 個執行緒，對後端進行存取，而每個執行緒執行 1000 次的壓力測試，並且執行 5 次，收集結果如圖 5 所示。圖 4.1 JMeter 結果報表由測試結果可以得知伺服器的輸出為每秒 145.8 個 request，在伺服器壓力大時，在這樣的情況下平均 response time 為 5s。因應成本與方便的關係，我們目前將我們的後端架設在學校實驗室主機的虛擬機上進行測試，因此無法承擔較大的流量，未來若使用需求有達到標準，則會尋求能夠承受更大壓力的主機。 4.3.3 APP 相容性測試

原先我們想使用 Google Cloud Test Lab 模擬 APP 跑在各種型號手機的相容性，但礙於此軟體在 2016/8/15 開始收費並更名為 Firebase Test Lab for

(28)

第五章系統實作

5.1 網頁實作(電腦)

5.1.1 首頁(登入) 使用者可以在首頁看見介紹影片，並進行登入圖 5.1 首頁之登入頁面圖(介紹影片暫時由其它影片替代) 5.1.2 首頁(註冊) 使用者可以在點擊「註冊會員」之後進行註冊會員

(29)

老人安養照護 APP：視訊共享逢甲大學學生報告 e-Paper( 2016 年) 5.1.2 首頁(忘記密碼) 使用者可以在點擊「忘記密碼」之後輸入資料，找回失去的密碼圖 5.3 首頁之忘記密碼頁面圖(介紹影片暫時由其它影片替代) 輸入資料後，系統會自動以 SMTP 發送信件給使用者圖 5.4 忘記密碼信件示意圖

(30)

5.1.2 個人資料

使用者登入後可以在「我的資料」查看與修改個人資料

圖 5.5 個人資料頁面圖

(31)

老人安養照護 APP：視訊共享逢甲大學學生報告 e-Paper( 2016 年) 使用者登入後可以這修改資料，並設定不同的分享權限 圖 5.7 個人資料修改圖 5.1.3 我的好友 使用者登入後可以在「我的好友」查看使用者與加入或刪除好友使用者只會看見自己權限可以看見的資料圖 5.8 我的好友頁面圖(查詢目前不是好友的會員)

(32)

圖 5.9 我的好友頁面圖(查詢已發送好友邀請，但對方尚未回覆的會員)

(33)

圖 5.11 我的好友頁面圖(查詢自己)

左方可顯示收到的好友邀請，並接受或拒絕

(34)

圖 5.13 我的好友頁面圖(查詢好友，或是從左方好友名單點擊好友)

5.1.3 聊天訊息

(35)

圖 5.15 聊天訊息之頁面圖(點擊好友欄可以直接開啟右方聊天室)

(36)

圖 5.17 點擊聊天室圖片(可以開啟 FancyBox 並看到檔案資訊)

(37)

老人安養照護 APP：視訊共享逢甲大學學生報告 e-Paper( 2016 年) 5.1.4 我的相簿 使用者可以在這裡存放、管理圖片與影片上傳在聊天室的圖片或影片也會自動存放到預設相簿圖 5.19 我的相簿頁面圖(點擊相簿圖片可以進入相簿) 使用者可以在這上傳圖片、影片到該相簿，或刪除該相簿的檔案使用者可以在這更換相簿的封面、修改相簿的資訊使用者可以在這分享該相簿給其它的好友使用者可以在這藉由檔案資訊快速搜尋相簿裡的檔案、編輯與移動檔案

(38)

圖 5.20 進入相簿後的頁面圖

圖 5.21 點擊相簿裡的圖片

(39)

圖 5.23 點擊編輯相簿

(40)

圖 5.25 點擊搜尋檔案

5.2 APP 實作(手機)

5.2.1 首頁(登入與註冊)

(41)

老人安養照護 APP：視訊共享逢甲大學學生報告 e-Paper( 2016 年) 圖 5.27 APP 個人頁面 5.2.3 媒體 使用者選擇媒體後可選擇拍照或是錄影圖 5.28 APP 媒體選擇頁面

(42)

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

圖 5.29 APP 拍照頁面

(43)

老人安養照護 APP：視訊共享逢甲大學學生報告 e-Paper( 2016 年) 圖 5.31 APP 相片預覽及儲存選擇錄影後進入錄影畫面[5] 圖 5.32 APP 錄影頁面圖 5.33 APP 進行錄影並儲存

(44)

5.2.4 檔案上傳

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

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

(45)

圖 5.36 APP 上傳檔案上傳圖片

(46)

圖 5.38 APP 上傳圖片上傳成功

5.2.5 我的好友

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

(47)

老人安養照護 APP：視訊共享逢甲大學學生報告 e-Paper( 2016 年) 5.2.6 視訊 在個人頁面選擇好友後可點擊「視訊」撥打視訊電話給對方[3] 圖 5.40 APP 視訊來電圖示通話成功後可在視訊中點擊右下角「開始錄影」進行錄影但選擇錄影的前提是該使用者開啟的鏡頭是前置鏡頭點擊視訊畫面中自己的畫面便可轉換前、後置鏡頭點擊結束錄影後自動將影片儲存至手機相簿

(48)

圖 5.41 APP 進行視訊通話

(49)

老人安養照護 APP：視訊共享逢甲大學學生報告 e-Paper( 2016 年) 圖 5.43 APP 視訊轉換鏡頭 5.2.7 聊天 在個人頁面選擇好友後可點擊「聊天」與好友進行文字對話圖 5.44 APP 聊天功能

(50)

第六章結論和未來展望

6.1 結論

在我們的專題裡，我們提供了使用者可以藉由手機與網頁來達成視訊、錄影、傳送圖片、影片與文字訊息與分享相簿等功能，希望藉由這些功能，可以使得使用者解決一些生活上的問題。比如說在 3.4.3 APP 使用案例流程中所提到的例子，幫阿嬤買東西、出遊的分享、代替行動不便的阿嬤去醫院，或者是當因為工作無法陪同阿嬤去醫院時，可以藉由我們的 APP 來與醫生進行通訊。希望藉由這套系統，能夠讓子孫們在長輩需要時，能夠成為他們的眼睛或者是雙腳。

6.2 未來展望

6.2.1 技術方面 這次開發我們撰寫結合手機 App 和 Web 網頁的完整系統，因此花了許多時間學習和善用數種程式語言，包括 HTML、CSS、PHP、JavaScript、Android Java。其中在網站的方面，我們使用 PHP 作為後端的程式語言，而在資料庫方面則是使用 MySQL。除此之外我們還使用了現在最火熱的 PHP Laravel 框架來進行開發，使得開發速度和安全性都提升了許多。也使得原本的程式碼相較於一般的 PHP，更俱備物件導向開發的特性。如在資料庫的操作，從使用原本的 mysqli 函式，轉為使用物件導向的 PDO(PHP Data Objects)。

在伺服器測試方面，因為想要知道我們伺服器的穩定度，所以使用曾經在課程上聽老師說過的 Apache JMeter 壓力測試工具，並且花時間研究如何使用這個軟體。雖然測試完後發現我們放在實驗室上的主機並沒有辦法承受太大的流量有點難過，不過也藉由這次實驗，讓我們感受到主機的重要性，否則就可能會像許多購票平台或選課系統一樣，在使用者人數一多時就無法負荷，導致使用者體驗不佳。 6.2.2 產學效益與後續發展 雖然我們的 APP 還未上架，但是已經展示給家中長輩和親友使用，也獲得了許多寶貴的建議，讓我們思考如何可以增加更多有用的功能，以及讓長輩更容易使用的介面。因為我們的 APP 可以應用的範圍很廣，包括正在外縣市工作的兒女，無法陪伴長輩到醫院看診，可以利用此 APP 的視訊溝通功能，達到關心和了解醫生的診療過程。未來如果有機會進行產學合作或商業化，會進一步做到個人化符合特定的需求，以及使用置入廣告的方式獲利。

6.3 遭遇問題

(51)

老人安養照護 APP：視訊共享逢甲大學學生報告 e-Paper( 2016 年) 我們嘗試過許久還是沒辦法解決這個硬體上的問題，所以目前的 APP 只能夠在開啟前置鏡頭視訊時才能利用後置鏡頭進行錄影。但針對這個問題我們則是利用使用者流程來解決，我們利用 APP 可行的功能盡量達到了相同的功能，雖然離原本預想還有一點便利程度上的差距，但已經能夠達到相同的結果，在未來我們希望能夠找尋到完整解決的辦法。

6.4 心得

團隊合作： 這個專題是由我們三個人共同從一開始討論方向、建立系統雛形，到現在終於完成。中途也經歷了大大小小的問題，我們都互相鼓勵並且一起思考解決的辦法。期間雖然也免不了團隊溝通上的爭執，甚至每個人可以配合的時間產生問題，但是秉持著互相尊重與體諒，我們彼此都能以這個共同目標為重，相互磨合並且維持了最好的平衡，一步一步的繼續向前行。最重要是能夠整合三個人的不同想法取得共識，然後一起共同努力，這個專題才順利的完成了。 梁少榕： 對我來說，專題研究大概是大學四年裡面最困難，但卻也最實際的一門課了。在這門課裡，我們不但必須應用在大學四年中，在資工系的所學，程式該怎麼寫、系統分析與設計該怎麼做、軟體品質與測試，還有凡事都必須按照格式來的書面報告。除了所學，在做專題的過程中，我也學會了如何與組員分工合作與討論溝通、如何與教授進行討論，等人際關係上的處理。很感謝楊東麟老師和他的研究生學長，在這將近一年的時間裡，花費時間與心力與我們討論，提供我們想法與意見，並協助解決我們遇到的問題。如果沒有他們，我們在遇到問題時，在沒有人帶領、幫助的情況下，可能會花費更多的時間在摸索與尋找答案上。在撰寫程式部份，我負責的是網頁，這是一塊我從來都沒有接觸過的領域，因為學校在我升上大四之前，系上並沒有開設任何一門關於網頁的課程，於是我便一個人摸索、學習了許久。也深刻體認到，Google 的確可以說是我最好的老師，在這段時間裡，從一開始只會寫簡單的 HTML 標籤、搞不清楚 CSS 的 Box modal 到底是怎麼排版的、完全不會使用 JavaScript，到現在可以很快的寫出 HTML 結構，並使用 CSS 使的 UI 更加人性化，再加上使用 Javascript 來賦予網頁生命。我從一開始的什麼都不會，到現在可以使用 PHP Laravel 框架的大部份基礎功能、可以使用 CSS 和 Bootstrap 做出 RWD 排版、可以使用 jQuery 來輕易的做到大部份我想做的事。除了自己撰寫以外，我也瞭解到了找工具的重要性，網路上有很多 PHP 或是 JS 的套件，都是別人寫好免費提供的開源作品，我們只要懂得如何使用，就能很快速的套用。也透過看見別人寫的程式，瞭解到程式設計確實是一門妙不可言的藝術。

(52)

老人安養照護 APP：視訊共享 陳怡蕙： 專題研究雖然在大學四年必須修習的一百多學分內，僅佔了其中的四學分，但學習到的遠遠超越它字面上的數字。從準備升上三年級的暑假找了楊東麟老師擔任我們的專題教授，他便在一開始討論就告訴了我們各種不同的方向，讓我們「學習自己學習」，包含可能需要用到的語言和工具，更請了學長姐來指導我們，分享他們學習的經驗。面對那些我們從未接觸過的領域，如何在網路這個超大型的資料庫查詢到自己所需要的資料已經是一門很重要的課題，更重要的則是當遇到了問題如何尋求解決的方法。也是從這裡我學到了許多課堂上額外的知識和能力。當有了一定的基礎，能夠開始專題實作進度的時間也已經是學期的開始，如何分配時間和和組員之間的配合變成一個新的課題，除了在原先的課業進度安排出時間做專題的研究，對事情的輕重緩急、先後選擇與對自己進度的監督都變成了一種持續性的訓練，讓我更能夠掌控對自己的安排與負責。其中非常感謝東麟老師從一開始便不厭其煩的叮嚀我們的進度，甚至周周和我們開會討論，若是沒有老師教導我們要先訂定一個進度表，再從中修正自己的步調，我們一定會耗費更多的時間，也有可能導致後期亂了步調。另外除了程式碼的撰寫，每一次和老師、組員開會討論我都能從中學習到很多東西，包含互相討論使用者的需求，從其他人的角度發現自己忽略掉的部分，不管是介面上的設計，或是功能使用流程流暢的程度，甚至是如何包裝、向他人介紹自己的成果，都是開發者需要學習的課題。 蕭鴻儒： 專題研究是我所寫過最大的程式，投入的時間也是最久的。因為從來沒寫過那麼大的程式，所以光是挑選撰寫的語言就花了不少的時間去研究。我在這之前所寫的程式全部都是作業類型的小程式，雖然在撰寫前有想過設計架構，在之前的課堂上也認識了把程式寫乾淨的重要性，但是實際撰寫時卻沒有明確訂立程式規範，沒有完全結構化程式，帶給我中後期擴展功能以及維護上相當大的麻煩。在撰寫專題中，幾乎沒有一次沒遭遇到問題，這培養了我找尋解決問題的能力，大部分的情況都是用網路來找尋解法，雖說網路會給你很多解答，但其實很多都是過時的解答，所以如何正確在網路上搜尋並篩選出自己所需資訊的能力也是很重要的。不吝於向同學和學長請教也很重要，同學/學長的經驗往往能指出問題發生的原因，並指引方向或是直接解決掉。學會和組員團隊溝通以及分工合作也很重要，在一個團隊裡，自己一個人的失誤就可能造成團隊的進度拖延，或者和組員溝通時不夠清楚，可能就會誤解原意，讓工作走了許多冤枉路。與組員共同撰寫同一程式時，還要注意版本控管的問題；把程式銜接到另一個平台時，還要考慮到對方而改變寫法，不能隨自己意願去構築方法。在每一次的會議中，教授都會提醒我所沒注意到的方向，使得程式更加完整、

(53)

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

(54)

參考文獻

[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

(55)

附錄一、專題介紹影片

專題使用情境介紹影片

專題 App 操作影片

附錄二、專題發表投影片

(56)

(57)

(58)

(59)

(60)

(61)

(62)

(63)

(64)

(65)

(66)

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

報告題名：