中華醫事科技大學資訊管理系

103 學年度專題製作報告

寵物社群：PetBook

指導老師：林耀三班 級：四資管四 A

學 生：徐子晟、江國豪、郭柏輝、賴俊廷、孫郁甡

61

目錄一、 動機與目的.................................................................................................................6

二、 相關文獻.....................................................................................................................7

2-1、Facebook.....................................................................................................72-2、飛格寵物家族.............................................................................................92-3、BeeTalk......................................................................................................102-4、QME 寵物社群.........................................................................................112-5、8591 交易系統..........................................................................................15

三、App Inventor：2 開發平台............................................................................................18

3-1、系統介紹...................................................................................................183-2、環境建置...................................................................................................193-3、開發平台...................................................................................................203-4、功能介紹...................................................................................................233-4-1、程式介面區........................................................................................................23

3-4-2、程式撰寫區介紹................................................................................................31

3-4-3、程式呈現方法....................................................................................................33

3-5、App Inventor1 跟 2 的差別.......................................................................403-5-1、開啟程式撰寫區方法不同................................................................................40

3-5-2、是否可以輸入中文字........................................................................................41

四、寵物社群：PetBook.......................................................................................................42

4-1、附加功能...................................................................................................424-2、商業部分...................................................................................................444-3、七大熱門寵物...........................................................................................45

五、系統開發........................................................................................................................46

5-1、寵物社群 Icon（示意圖）.......................................................................465-2、快速註冊功能...........................................................................................475-3、登入畫面...................................................................................................485-4、寵物動態畫面...........................................................................................495-5、畫面下方的標籤欄（Tab Bar）...............................................................505-6、左側功能選單（螢幕向右滑動）...........................................................515-7、個人資料頁面...........................................................................................535-8、寵物成就頁面...........................................................................................54

61

5-9、新增或編輯寵物.......................................................................................555-10、右側好友清單（螢幕向左滑動）..........................................................565-11、狗骨頭兌換小店.....................................................................................575-12、貓罐頭商城.............................................................................................58

六、樹狀圖............................................................................................................................59

七、未來展望........................................................................................................................60

八、甘特圖............................................................................................................................62

九、文獻來源........................................................................................................................63

圖目錄圖 1...........................................................................................................................................7

圖 2...........................................................................................................................................9

圖 3.........................................................................................................................................10

圖 4.........................................................................................................................................11

圖 5.........................................................................................................................................12

圖 6.........................................................................................................................................13

圖 7.........................................................................................................................................14

圖 8.........................................................................................................................................15

61

圖 9.........................................................................................................................................16

圖 10.......................................................................................................................................17

圖 11.......................................................................................................................................18

圖 12.......................................................................................................................................20

圖 13.......................................................................................................................................20

圖 14.......................................................................................................................................20

圖 15.......................................................................................................................................21

圖 16.......................................................................................................................................21

圖 17.......................................................................................................................................22

圖 18.......................................................................................................................................22

圖 19.......................................................................................................................................23

圖 20.......................................................................................................................................24

圖 21.......................................................................................................................................25

圖 22.......................................................................................................................................25

圖 24.......................................................................................................................................25

圖 25.......................................................................................................................................26

圖 26.......................................................................................................................................26

圖 27.......................................................................................................................................27

圖 28.......................................................................................................................................28

圖 29.......................................................................................................................................29

圖 30.......................................................................................................................................30

圖 32~35.................................................................................................................................30

圖 36.......................................................................................................................................31

圖 37.......................................................................................................................................31

圖 38.......................................................................................................................................32

圖 39.......................................................................................................................................32

圖 40.......................................................................................................................................33

61

圖 41.......................................................................................................................................33

圖 42.......................................................................................................................................34

圖 43.......................................................................................................................................34

圖 44.......................................................................................................................................35

圖 45.......................................................................................................................................35

圖 46.......................................................................................................................................36

圖 47.......................................................................................................................................36

圖 48.......................................................................................................................................37

圖 49.......................................................................................................................................37

圖 50.......................................................................................................................................38

圖 51.......................................................................................................................................39

圖 52.......................................................................................................................................40

圖 53.......................................................................................................................................40

圖 54.......................................................................................................................................41

圖 55.......................................................................................................................................41

圖 56.......................................................................................................................................41

圖 57.......................................................................................................................................46

圖 58.......................................................................................................................................46

圖 59.......................................................................................................................................47

圖 60.......................................................................................................................................48

圖 62.......................................................................................................................................50

圖 63.......................................................................................................................................51

圖 64.......................................................................................................................................52

圖 65.......................................................................................................................................53

圖 66.......................................................................................................................................54

圖 67.......................................................................................................................................55

圖 68.......................................................................................................................................56

61

圖 69.......................................................................................................................................57

圖 70.......................................................................................................................................58

圖 71.......................................................................................................................................59

一、 動機與目的本專題研究主要在建立一個專屬寵物交流平台的手機應用程式

（簡稱 APP），因為其他社群服務平台，社群內大部份的寵物照片，都是來自於個人和特定人群的喜好，而不是想要分享或是跟別人討論寵物，因為，朋友不一定懂寵物。

如果出現一個是大家都懂寵物的交流平台，就可以互相交流彼此的心得及感想，甚至於切磋養寵技巧、照顧寵物健康，畢竟，在社群網站（如臉書）上就算是說自己的寵物多麼地有趣、多麼地特別，不懂的人還是不懂。

61

因此，我們計畫建立一個有創意力和發展力的寵物交流平台，透過養寵飼主或愛心人士的彼此接觸，直接或間接地進行知識交流，共同學習與找出養寵訣竅，一起減少寵物被惡意棄養的社會醜態，給寵物一個更好的生存空間。

二、 相關文獻以下是我們找到與社群系統相關的企業與手機 APP測試相關功能：

2-1、Facebook

61

圖 1

首先有這個想法，是因為有參考到 Facebook，因為，Facebook

在寵物方面沒有受到足夠的重視，所以設計一個新的寵物社群（PetBook）以寵物為主的社交系統，同時我們發現 Facebook 上的

61

缺點，她的社團是不需要通過本人同意即可加入，非常不注重個人隱私，在寵物交流方面，非常的不流暢，因為他是以人為主的網頁，假如在 Facebook 上交流寵物的話，想要領養或是買賣方面會相當不方便，在這方面我們可以保證他們在寵物交易上有相當的保障，讓當事人比較不用擔心交易後的問題。

2-2、飛格寵物家族

61

我們也在這個網頁中，找到關於寵物方面的資訊以及寵物買賣認養的部份，他們是以貼圖單調的資訊，來説明他們的寵物資料，而我們是以動態消息的方式來宣傳自己的寵物，有安裝App 的使用者，

我們會已通知的方式，讓使用者可以馬上看到對方給自己的留言，而非像論壇一樣，要自己上去點閱網站才會出現新的留言消息，如圖 2所示。

圖 2

61

2-3、BeeTalk

這是我們設計主畫面時，參考的介面，把五個主要功能列放在最下面這就是我們唯一參考的介面。 如圖 3所示。

圖 3

61

2-4、QME 寵物社群這是我們在網路上偶然看到的一個網站，很適合做一個參考對象他們是以走失寵物，尋找寵物為主的網頁，而我們是以寵物社群、寵物交流為主的 App，另外參考了他們可以新增寵物大頭貼的功能跟我們 Facebook 新增大頭貼的功能很相似，是一個非常好的出發點，如圖 4，圖 5，圖 6所示。

這是他們的首頁，進去後可以看到社群及協尋的功能，協尋我們不打算增加，所以沒有特別介紹。

圖 4

61

此圖為寵物新增大頭貼的功能，是一個我們會參考的部分，因為這是這App 的重要開頭。

圖 5

61

這邊是我們可參考的寵物照片，寵物點閱率的部分，顯然的這個網站沒甚麼人在用，所以無法呈現我們所想要的地方。我們會針對這個地方下手，讓寵物 App 的介面更完美。

圖 6

61

圖 7 為寵物設定自己名字後，可以在圖片上自我介紹的功能，還有開放其他使用者在下面留言的功能，都是值得參考的地方。

圖 7

61

2-5、8591 交易系統這是以線上遊戲寶物交易的網頁，功能十分強大，是以遊戲對遊戲中以遊戲寶物換取台幣的網頁，此網站可以保障玩家的權益，並刊登玩家是多久之前上傳的，還有此商品被瀏覽過多少次，玩家在8591 的誠信程度也是玩家買賣東西的參考價值之一，另外顯示玩家是否有在 8591 的線上，可以直接透過即時訊息或是問與答讓買賣雙方進行溝通。此圖為 8591 的首頁，我們參考的部份為可以用 FB直接登入及註冊、還有在線人數、免費刊登及搜尋關鍵字的部份。

圖 8

此圖為我們參考他們的內容關鍵字搜尋、商品排列及商品價格、刊

61

登時間、瀏覽次數人氣高低以及使用者是否有在線上的消息部分。

圖 9

此圖為我們參考他們的商品出售名稱、放入購物車及購買部份、交

61

易時間、賣家資料、賣家的評價及賣家是否在線、賣家商品的說明、問與答及賣家的交易評價、賣家的其他商品讓消費者可以看到賣家的其他商品。

圖 10

三、App Inventor：2 開發平台

61

圖 11

3-1、系統介紹 App Inventor原是 Google實驗室（Google Lab）的一個子計畫，由一群 Google工程師與勇於挑戰的 Google使用者共同參與。Google

App Inventor 是一個完全線上開發的 Android 程式環境，拋棄複雜的程式碼而使用樂高積木式的堆疊法來完成您的 Android 程式。除此之外它也正式支援樂高NXT 機器人，對於 Android初學者或是機器人開發者來說是一大福音。因為對於想要用手機控制機器人的使用者而言，他們不大需要太華麗的介面，只要使用基本元件例如按鈕、文字輸入輸出即而我們是使用 App Inventor2，MIT 行動學習中心已發表 App Inventor 2 (本文後簡稱 AI2)，省略了需要使用 Java 才能開啟的 Blocks Editor，將其整合在網頁中即可使用，可說是與 Scratch 

愈來愈像了。在操作上也將各指令藉由下拉式選單大幅簡化，使用者應該可以更快找到所需的指令。

61

3-2、環境建置如何使用 Google App Inventor 2 開發環境？

    Google App Inventor 2 為全雲端的開發環境，所有的動作皆在瀏覽器上完成 (建議使用 Google Chrome瀏覽器)

需要準備三件事:

1. 必需有 Gmail帳號及使用 Google Chrome瀏覽器

2.確認是否可正確在電腦上運行 Java

3.如要用 Android模擬器測試需要安裝

3-3、開發平台首先必須使用 Google瀏覽器。

61

圖 12

網頁搜尋App Inventor 2，如圖 13所示。

圖 13

點選網頁上第一個連結"MIT's App Inventor 2"，如圖 14所示。

圖 14

進入後點選網頁右上角橘色的 Create按鈕進入，如圖 15所示。

61

圖 15

如果沒登入 Google帳戶要登入才可使用，如圖 16所示。

圖 16

進入頁面後點擊左上角的，空白處點一 New Project 建立新專案，如

61

圖 17所示。

圖 17

建立專案完進入主畫面，如圖 18所示。

圖 18

3-4、功能介紹

61

3-4-1、程式介面區

App Inventor 2工作畫面，分為四大區域，如圖 19所示。

圖 19

一、 組件面板(Palette)基本面版：

61

為最常用的元件，例如按鍵(Button)、核取方塊(CheckBox)、圖片(Image)、清單選擇器(ListPicker)、Media-多媒體元件庫

圖 20

Drawing and Animation-繪圖和動畫元件

61

圖 21

Sensors-感應器元件 Social-社群元件

圖 22 圖 23

Layout-螢幕排版元件

圖 24

61

Storage-儲存元件

圖 25

Connectivity-連結元件

圖 26

61

二、 檢視器(Viewer)：

主要設計界面，如圖 27所示。

圖 27

61

點選畫面左上角 Screen1按鈕可觀看已創建的場景，如圖 28所示。

圖 28

61

點擊上方 Add Screen 可建立新場景，如圖 29所示。

圖 29

61

三、 元件(Components)：在這可進行元件的命名、刪除動作，如圖 30所示。圖 31 是目前已使用的元件。

圖 30 圖 31

四、 屬性(Properties)：左邊可設定背景、按鈕…..等寬度高度，右邊可勾選內建螢幕設定。圖 32~35。

61

3-4-2、程式撰寫區介紹

開發主畫面，左上角Designer 是回到檢視器，Blocks則是進入程式撰寫區，如圖 36所示。

圖 36

圖片上方 Built-in 為常用基本元件，下方為已建立的元件，圖 37所示。

圖 37

61

點擊左圖元件會顯示右邊的拼圖元件可選取選擇需要什麼指令，如圖 38所示。

圖 38

選取完所需指令可用組合方式拼出完整程式碼，如圖 39所示。

圖 39

61

3-4-3、程式呈現方法

一、使用 QRcode 掃描：先點選圖中右上角選取Designer再點選左上圖 Build，點選 App(provide QR code for .apk)，如圖 40所示。

圖 40

跳出編譯APK包的載入視窗，如圖 41所示。

圖 41

61

載入完成後跳出 QRcode 的下載連結，掃描後即可下載至手機，如圖 42所示。

圖 42

二、使用模擬器檢視：點選 Connect，選取 Emulator，如圖 43所示。

.

圖 43

61

點擊Need Help超連結，如圖 44所示。

圖 44

點選 Instructions超連結，如圖 45所示。

圖 45

61

點擊 Instructions for Windows超連結，如圖 46所示。

圖 46

點選 Download the installer 下載，如圖 47所示。

圖 47

61

安裝完成後點選 aiStarter捷徑，如圖 48所示。

圖 48

必須先執行 aiStarter才可開啟模擬器，如圖 49所示。

圖 49

61

模擬器畫面，如圖 50所示。

圖 50

61

三、使用 USB 傳輸檢視：使用 USB傳輸檢視一樣得開啟 aiStarter，點選 Connect 在選取USB

即可傳輸檔案，如圖 51所示。

圖 51

61

3-5、App Inventor1 跟 2 的差別3-5-1、開啟程式撰寫區方法不同

App Inventor 1 開啟程式撰寫區需先點選 Open Blocks Editorp，如圖52所示。

圖 52

點選下載檔案AppInventorForAndroidCodeblocks 開啟，如圖 53所示。

61

圖 53

程式撰寫區畫面，如圖 54所示。

圖 54

3-5-2、是否可以輸入中文字

App Inventor 1 不可輸入中文，如圖 55所示。

圖 55

61

App Inventor 2 可以輸入中文，如圖 56所示。

圖 56

四、寵物社群：PetBook

4-1、附加功能我們打算另外再建置兩個平台，分別為「寵物交流平台」和

「寵物交易平台」，交易平台可以跟交流平台以線上即時通訊一樣的方式進行交流，不需要用問與答這個方式來做，通常問與答這個方式比較慢，不能即時回覆導致問答時間拖延很久，透過線上即時通訊，可以查看對方是否已看過，寵物交流平台可以設置相簿依各種寵物不同分類存放照片，例如：這隻寵物有他自己專屬照片，所以跟 Facebook 一樣有個人照及個人相簿。

而寵物交易平台，當我購買寵物的時候，賣家可以選擇自己是否要附送寵物生活的點滴，個人養法不同，而寵物適應程度也不同，例如，某種貓某種狗，幾時肚子餓，幾時會想喝水。

如果人剛好不在寵物身邊，可以使用寵物鬧鐘及或是寵物餵食系統提醒當寵物不在身邊的時候，提醒自己去餵食寵物。

61

如果寵物太久沒出門　會有一個出遊的提醒　提醒自己寵物多久沒出門了而主人也該帶寵物出門遊玩，讓寵物及自己放鬆，並且設

置一個，當地的氣候及定位功能，可以隨時針對自己與寵物身在何處與各個擁有寵物的人發表文章。

最後我們會推薦寵物文章人氣，如果文章多人點閱或是推薦可以加亮文章的標題或者變頭版，貼上 Hot 標籤。

另外還有搖一搖功能可尋找附近的人，和聊天室塗鴉功能（使用貼圖代替文字傳送）

增加一個寵物自拍拼圖 成就列表 還有一鍵查看所有成就。

61

4-2、商業部分營利來源：商城消費及寵物交易手續費。

商城營利流程：使用者透過金流儲值換取商城幣（這裡稱為貓罐頭，較貼近現實生活），然後花費於商城購買虛擬道具上。

寵物交易營利流程：買方先透過金流儲值換取商城幣→在指定平台上找賣方購買→確定購買後，將先暫時扣除買方全額商城幣交由平台方保管→買家這時候會拿到一組隨機獨特密碼→直到買家取得商品後，把該密碼給賣家→賣家再去平台上完成交易，取回剩餘商城幣→買賣方互相評價。

4-3、七大熱門寵物

61

選擇這些寵物種類的理由：我們是以網路上最熱門的前幾種寵物種類作為預設資料，另外

附加回報功能，避免造成使用者有無法分類的寵物種類的困擾。一 二 三 四 五

狗類 拉不拉多犬

黃金獵犬 柴犬 馬爾濟斯

犬 貴賓犬

魚類 孔雀魚 鬥魚 金魚 錦鯉 石斑

貓類 蘇格蘭折耳貓

美國短毛貓 混種貓 曼赤肯貓 俄羅斯藍

貓

鳥類 玄鳳鸚鵡

金剛鸚鵡 鴿子 八哥 畫眉

鼠類 天竺鼠 蜜袋鼯鼠 趴趴鼠 布丁鼠 楓葉鼠

兩棲爬蟲類 烏龜 蛇 蜥蜴 青蛙 鱷魚蟲類 甲蟲 蟋蟀 蠶 蜘蛛 蠍子

五、系統開發5-1、寵物社群 Icon（示意圖）

61

圖 57

使用簡潔的場景圖片，可以讓使用者有煥然一新的感受。這是我們的登入範例畫面，由此進行註冊與登入。

圖 58

5-2、快速註冊功能

61

以 E-mail當作註冊帳號，可以保障帳號的唯一性，又能達成快速註冊之目的，個人的隱私資料填寫則在註冊後才需要登錄，並且利用推廣機制快速累積人氣（推廣人雙方皆可獲得一定的獎賞）。

圖 59

隱私權和使用條款的部分，是避免相關爭議所研擬的事項。

5-3、登入畫面

61

與一般會員功能一樣，可使用會員帳號密碼登入 APP，也可以連結第三方社群帳號來做登入，另外也提供帳號綁定功能，讓使用者帳號與第三方社群帳號做綁定，達成快速登入之目的。

圖 60

5-4、寵物動態畫面

61

獨創成長樹（傑克的神奇藤蔓），利用直向時間軸，從底部新增動態趣聞（可搭配圖片或影片），慢慢累積越上方可看到的風景就越高，依序可看到電線桿、天空、熱氣球、大氣層甚至是火星。讓使用者每天都能發現新樂趣。

畫面左列的寵物標籤，依序為：『朋友或訂閱者的全部寵物動態和更新通知』、『個人的全部寵物動態』、『第一隻寵物』、『第二隻寵物』…更多。

圖 61

61

5-5、畫面下方的標籤欄（Tab Bar）是一組固定在頁面最底下的功能列，分別有「首頁」、「動態」、「鬧鐘」、「健康」、「更多」等按鈕功能。

圖 62

首頁：點擊後將前往APP首頁，可以查看最新與熱門消息。 動態：連結回「寵物動態畫面」，若有新動態通知，也會在按鈕旁邊顯示提醒。

鬧鐘：可自行設定鬧鐘以提醒使用者記住一些事情，例如：餵食時間、定期施打寵物疫苗、換水…等。

健康：提供相關的寵物健康查詢，例如：寵物歷史體型或體重報表、寵物疫苗追蹤及注意事項、查詢寵物疾病功能...等。

更多：提供其他有趣的附加功能，例如：製作寵物拼圖（上傳圖片後自動製作成拼圖供自己或朋友挑戰）。

61

5-6、左側功能選單（螢幕向右滑動）顯示使用者的基本資料與管理寵物、社團與訂閱功能，並在最

底下提供新手導覽、問題回報等相關設定。

圖 63

61

圖 64

61

5-7、個人資料頁面

圖 65

61

5-8、寵物成就頁面單純只製作一個新社群 APP 的點子或許不夠新鮮，但是在這裡

我們還加入了寵物成就機制，讓使用者一步步累積成就感的同時，還能滿足收集與炫耀的欲望。

圖 66

61

5-9、新增或編輯寵物提供使用者在此新增或編輯寵物資訊，晶片號碼則是運用在貓

狗類寵物身上，方便追蹤寵物健康。

圖 67

61

5-10、右側好友清單（螢幕向左滑動）使用者只要點選好友名稱，就能快速查看對方的近期狀況，也

可以和對方寵物 Say Hello。點選聊天圖示，可以快速打開聊天室，和朋友進行線上聊天；

點選挑戰功能，可以對朋友自訂的小遊戲關卡進行挑戰，例如：將寵物照片轉成拼圖，讓使用者養寵物的同時還能激起腦力激盪！另附有搜尋好友和新增好友功能。

圖 68

61

5-11、狗骨頭兌換小店狗骨頭取得方式：須透過文章支持數、文章分享數和推廣數量

取得，累積一定量可以至 APP 中的狗骨頭兌換小店換取一些低價值性的虛擬道具（例：寵物更名券、成長樹主題包）。

圖 69

61

5-12、貓罐頭商城貓罐頭取得方式：達成特定成就獎勵，或是經過金流儲值取得，

可以換取的虛擬道具價值較「狗骨頭商城」為高，另外也可以當作交易平台的交易媒介。

圖 70

61

六、樹狀圖導覽圖如下所示。

61

圖 71

七、未來展望前言

我們的專題是用 Google帳號綁定的 App Inventor 2 來開發的程式，它是一個以 Java 為基礎的拼圖程式設計工具，專門開發於 Android

手機系統的應用程式。我們初步的想法是利用這款開發工具來學習程式設計、語法邏輯、資料庫管理和版面編排，但對於剛接觸不熟悉的我們，從網路上查找了許多有關 App Inventor 2 的教學影片，一步一步地幫助我們找到需要的相關資料，才發現原來程式設計沒有想像中的困難。

而在撰寫 App 手機程式時，建立了很多基本的概念，並了解每塊拼圖它的涵義，每個部份、功能的不同，而我們的任務就是利用這些拼圖來完成這項目前還沒人做出來的手機應用程式。

未來方向用 App Inventor 2做出我們專題基本的雛型之後，為了讓專題更

加完整以及執行上的穩定度，將來還會增加寵物訂閱和寵物社團的額外功能。

61

未 來 我 們會選擇 Google App Engine 當作 管 理後台 ， 是 因 為Google App Engine包含了資料庫與網頁介面控制，可以省去租用主機、裝作業系統、設定維護雲端資料庫等等的成本，還可以在Google各地的

資料中心執行自己的網頁應用，而會選用 Google App Engine做為後台 是 因 為 App Inventor 2 有提供一 個 可 以 跟雲端共用 的 Tiny

WebDB，這個元件可以連結上 Google App Engine，將資料儲存於網路伺服器上，進而達到資料連線、儲存甚至分享的作用，之後我相信我們專題離上架Google Play 的距離也不遠了。

61

八、甘特圖2013/

12月2014/

01月2014/

02月2014/

03月2014/

04月2014/

05月2014/

06月

討論主題

App 系統設

計

搜尋資料

App美化

61

討論書面報

告

製作報告

註記 : 完成 預計完成

九、文獻來源引用資料—書名—作者—出版社—年份

1. Goolge App Inventor 2 --手機應用程式設計超簡單：App Inventor

2零基礎入門班--鄧文淵--碁峯--2014 年

2. 中華醫事科技大學專題報告—智慧型手機結合電子地圖 Now

Maps—張準—2012 年

3. 中華醫事科技大學專題報告—圖書管理系統—高嘉馨—2013 年

4. Google Java教學--Java 7 教學手冊 第五版-- 洪維恩-- 旗標—2012

61

年5. 中華醫事科技大學專題報告—財產管理系統 App—張仰鈞—2013

年6. 中華醫事科技大學專題報告—手機預約訂位系統—蔡文元—

2012 年

關鍵字—網址1. Icon Archive-- http://www.iconarchive.com/show/cute-social-2014-

icons-by-designbolts.2.html

2. Facebook-- https://www.facebook.com/

3. 飛格寵物家族-- http://flycall.com/bbs/

4. QME 寵物社群--http://qmemore.com/

5. Beetalk --http://beetalk.tw/

6. 8591寶物交易網-- http://www.8591.com.tw/

7. Nearby Icon--https://www.iconfinder.com/

61

8. App Inventor TW 中文教學網-- http://www.appinventor.tw/setup