107 學年國立彰化高商資料處理科專題製作成果展報告書
題
目：獨一無二-The Unique
學校名稱：國立彰化高級商業職業學校
指導老師：陳隨益老師
中 華 民 國
群
別：商業管理群
科
別：資料處理科
1 0 8
年
0 6
月
0 5
日
目錄 摘要 ------------------------------------------------------------------------------------------------------------------------------ 1 壹、前言 ----------------------------------------------------------------------------------------------------------------------- 1 一、研究動機 ------------------------------------------------------------------------------------------------------------- 1 二、研究目的 ------------------------------------------------------------------------------------------------------------- 1 貳、文獻探討 ----------------------------------------------------------------------------------------------------------------- 1 一、MediBand Paint Pro ----------------------------------------------------------------------------------------------- 1 二、協作平台(Google Site) -------------------------------------------------------------------------------------------- 2 三、雲端硬碟(Google Drive) ------------------------------------------------------------------------------------------ 2 四、Mr. Data Converter ------------------------------------------------------------------------------------------------ 3 五、APP Inventor --------------------------------------------------------------------------------------------------------- 3 參、研究架構 ----------------------------------------------------------------------------------------------------------------- 4 一、研究方法 ------------------------------------------------------------------------------------------------------------- 4 二、研究流程 ------------------------------------------------------------------------------------------------------------- 4 肆、系統實作及測試 ------------------------------------------------------------------------------------------------------- 4 一、系統架構 ------------------------------------------------------------------------------------------------------------- 4 二、系統操作流程 ------------------------------------------------------------------------------------------------------- 5 三、實作過程 ------------------------------------------------------------------------------------------------------------- 6 四、系統功能展示 ------------------------------------------------------------------------------------------------------- 6 伍、結果與討論 ------------------------------------------------------------------------------------------------------------- 7 一、可行性之評估 ------------------------------------------------------------------------------------------------------- 7 二、問題與討論 ---------------------------------------------------------------------------------------------------------- 7 陸、結論與建議 ------------------------------------------------------------------------------------------------------------- 7 一、結論 -------------------------------------------------------------------------------------------------------------------- 7 二、改善與建議 ---------------------------------------------------------------------------------------------------------- 7 參考文獻 ----------------------------------------------------------------------------------------------------------------------- 8
表目錄 表 1 研究流程圖 ....................................................................................................... 4 表 2 系統架構 ........................................................................................................... 5 表 3 系統操作流程 ................................................................................................... 5
圖目錄 圖 圖 圖 圖 圖 圖 圖
1 MediBang Paint ................................................................................................. 2 2 協作平台 ........................................................................................................... 2 3 雲端硬碟 ........................................................................................................... 3 4 Mr. Data Converter ............................................................................................ 3 5 APP Inventor ...................................................................................................... 3 6 首頁 ................................................................................................................... 6 7 作者介紹 ........................................................................................................... 6
圖 圖 圖 圖
8 關卡選擇 ........................................................................................................... 6 9 遊玩畫面 ........................................................................................................... 6 10 輸入錯誤 ......................................................................................................... 6 11 遊戲通關 ......................................................................................................... 6
獨一無二-The Unique 摘要 常常看到書店有在賣一整本都是填字遊戲的書，很多填字遊戲愛好者都會花 錢去買一本來玩，我們做了這個程式之後不僅可以讓玩家免費玩到填字遊戲，更 可以隨時隨地只要想玩打開手機就可以馬上玩不用掏筆與遊戲的書，還可以減少 紙張的利用。 關鍵字：專題製作、填字遊戲、手遊、APP 製作
壹、前言 一、研究動機 上課老師介紹學長姊的作品時，提到了一字千金這個節目，於是我們聯想到 了填字遊戲，但當初並不是馬上聯想到填字遊戲，而是口誤說成了數獨，後來才 正式的改為填字遊戲的 APP。
二、研究目的 原本的填字遊戲都是書面上的，想要遊玩不僅要攜帶遊戲本以及文具用品， 還要有一個可以容納得下書本的背包，不僅不方便而且印刷書本需要用到大量的 紙張，這樣是很不環保的行為，我們研發這個 APP 不僅比攜帶紙本與文具用品還 要來的方便，而且可以減少紙張的利用，兼具了環保與方便攜帶這兩點特色。
貳、文獻探討 一、MediBand Paint Pro 這是一套是免費、跨平台、支援繁體中文、功能齊全、簡單易用的插畫、漫 畫繪製軟體，它內建了多種筆刷與字體，也支援多種圖檔(如: JPG、PNG、GIF 和 BMP)，我們利用他製作所有 APP 上所需要用到的圖案(如：icon、遊戲畫面… 等)以及專題成果的海報。
1
圖 1 MediBang Paint
二、協作平台(Google Site) 是 Google 多年前推出的一個讓任何人都能做網頁、做網站的工具，尤其適 合做企業、團隊內部合作時使用的網站，因為可以整合來自 Google 雲端硬碟等 服務的資料，我們就是用這個來製作小組共同的平台，用它來記錄每個禮拜的進 度以及討論的內容，也是我們和老師的溝通橋樑。
圖 2 協作平台
三、雲端硬碟(Google Drive) Google 雲端硬碟是 Google 提供的免費儲存空間，每個帳號有 15 GB 的免費 儲存空間。可以直接上傳檔案，儲存電子郵件附件，備份相片，也可以線上製作 Google 文件、Google 試算表與 Google 簡報……等檔案。我們利用 Google Drive 的小組雲端硬碟這個功能，共享每個檔案，有需要時還可以在網路上共同編輯所 需要的檔案。
2
圖 3 雲端硬碟
四、Mr. Data Converter 這個網站可以將csv格式轉換為JSON格式。我們使用這個網站轉換文字格 式。用來製作APP的成語題庫。
圖 4 Mr. Data Converter
五、APP Inventor App Inventor使用積木式拼接方法，不需要打出程式碼，拉取方塊拼接即可 完成程式，版面也是拖拉即可布置完畢。對初學者而言非常容易上手。且在網 頁即可編輯，不用下載安裝軟體，隨時隨地可進行製作、編輯，十分方便。我 們使用它來編輯APP。
圖 5 APP Inventor 3
參、研究架構 一、研究方法 我們打算使用雲端硬碟來放置APP所須的檔案。協作平台來安排工作以及 放上討論內容、每周進度、APP成果等等。使用APP Inventor來編輯程式碼以及 製作APP版面。使用Mr. Data Converter將網路上蒐集到的題目轉為JSON檔。使用 MediBand PaintPro來製作APP的圖示、美化協作平台頁面以及成果海報。以上的 所提到的皆為免費且基本上都在網頁可以使用，可以方便我們隨時去編輯、更 新。
二、研究流程 首先我們討論出專題題目，去蒐集了相關資料，開始編寫計畫書、分配工作 ，再來是分析程式架構。同時美化APP版面和APP程式。完成後測試APP並改良不 好的地方。最後APP就完成了。
表 1 研究流程圖
肆、系統實作及測試 一、系統架構
4
打開APP後，會開啟首頁，有遊戲選擇、作者介紹兩個按鈕可以選擇。點擊 遊戲選擇可以選關卡數，再進入各關；點擊作者介紹進入頁面，會看到四個組員 的照片，點擊照片換成文字介紹。
首頁 遊戲選擇
作者介紹
關卡數選擇 遊玩頁面 表 2 系統架構
二、系統操作流程 進入APP後看到的即是首頁，選擇遊戲選擇，進入關卡選擇頁面，選擇任一 關卡即進入遊玩頁面。回到首頁，點擊作者介紹可以看到四張作者的照片，點擊 變為文字介紹再點擊則變回照片，如下表表示。
點擊APP
完成遊戲
返回首頁
進入首頁
開始遊玩
進入作者介紹
點擊遊戲選擇
選擇遊玩關卡
結束APP
表 3 系統操作流程
5
三、實作過程 我們使用成語大全搭配教育部成語典來蒐集我們的成語題庫，使用 JSON 來 將成語放進 APP 內。本來想要製作能夠依解釋填入成語，最後迫於時間還有能力 所以就擱置了。在程式的部分因為邏輯觀念不太好，常常理解錯誤而拼不出成果， 後來經過老師和媽媽的解釋也順利的完成到現在的階段。
四、系統功能展示 玩家點擊 APP 後進入首頁選擇觀看作者介紹或是直接遊玩遊戲。
圖 6 首頁
圖 7 作者介紹
圖 8 關卡選擇
點擊關卡選擇後進入遊玩畫面，輸入的字正確則填入該空白格中，若輸入錯 誤或是輸入空白則顯示輸入錯誤。遊戲通關則跳回關卡選擇並跳出恭喜過關 r 字 詞。
圖 9 遊玩畫面
圖 10 輸入錯誤 6
圖 11 遊戲通關
伍、結果與討論 一、可行性之評估 我們現在的 APP 可說是理想中的陽春版。拿掉了不少功能，但最主要的程式 還可以執行。程式部分因為有些地方需要重複使用同個程式碼則用副程式的方式 呈現，用 Call 在需要的地方呼叫。也解決不少邏輯不通的問題。雖然現在的 APP 不能算好，算是一個開始吧，還有很多地方可以幫它加入新色彩。
二、問題與討論 隨機出題在製作中困擾我們非常久，最後老師跟我們說可以將題目固定使用 人工出題用陣列來呈現，之後再去爬文看資料，最後在 APP 建立清單問題才得以 解決。 另一個問題是如何點擊框就顯示成語解釋，可能需要再建一個清單去判斷才 有可能達成。只是礙於時間不足則沒有時間去研究出個結果。
陸、結論與建議 一、結論 專題帶給我們很美好的憧憬，但隨著時間還有發現自己能力不足也帶來了非 常大的失落。但能夠做出個基本作品也是很感動了。這個學期下來我發現組員具 有強大的影響力，當組員都不怎麼積極時，甚至需要他卻找不到人，那個心也越 來越冷，感覺像是水滴，雖然只有一點點，但卻一直侵蝕熱情。最後還是謝謝組 員，我們能走到這步還是依靠大家的努力。
二、改善與建議 這個 APP 還有很多的功能還沒有齊全，這也是專題很大的遺憾了。很可惜時 間在前面卡關卡太久，且又不積極去面對才會有今天的局面。 如果有學弟妹看到這段話，我希望你們能記得兩點，主題慎選跟隊友慎選。 主題不感興趣或是太難你做不下去。隊友沒有選好，會讓人非常疲憊。我在我們 組內看不太到溝通以及分工合作，更別說是團隊精神了。這一路走來只覺得孤單 ，心裡想著為什麼很多工作都在我手上，可是真的嘗試去交給隊友時回來的東西 卻有一半又要打掉重來。而且做好了他們又不關心接下來的進度或是下禮拜的工 作。當組員找不到時的煎熬，明天要用那東西了，東西沒有，負責人也不見為了 這種事熬夜到兩、三點。熱度也會消失的。希望這些建議還有慘痛的案例能夠讓 你們瞭解這兩項有多麼重要。
7
參考文獻 Hung(2016) 免費繪圖軟體 MediBang Paint Pro。Xuite 日誌 esor huang(2016) 全新 Google 協作平台推出 ，做漂亮網站跟編輯文件一樣 簡單。部落客。 Hung(2018) Goolge 雲端硬碟備份與同步處理。部落客 有關App Inventor。
8