# **雲科美食吃透透**
---

### 組長：
* 吳奇彥B10917036

### 組員：
* 馬明逸B10917014

* 蕭瑋廷B10917026

* 劉哲彰B10917030

* 張筱萱B10917034

## A.系統發展生命週期(System Development Life Cycle; SDLC)

## 1.初步調查 (Preliminary Investigation)

* 吃飯對於人類是不可或缺的，而身為雲科人，有著一個非常讓大家頭痛的問題，那就是——要吃什麼？雲科大周邊其實不乏美食，但真正全都嘗試過的卻寥寥無幾，可能是因為有著眾多原因而導致，問過許多同學，有的人說：「交通不便所以只吃過龍潭路」，有的人說：「課程太滿了…大多吃學餐而已」，更有人說：「我就懶，我都叫外賣」，諸如此類理由點出了我們看到的部分問題，並決定做出一個雲科人能夠直覺使用此網站、以此讓使用者接觸到更多未嘗試的美食。

* 本次在開發前我們組有稍微訪問了一下身邊的朋友且觀察了雲科大周圍的店家。而在訪問同學過程中，我們深入了解了身為雲科人，平常的用餐選擇的依據究竟為何？結合我們自己組員的想法，整理出了下列結論。

### 一、怕踩到地雷

* 有的人可能因為習慣問題，抑或是害怕踩到地雷餐點而選擇少數幾間店作為日常用餐消費，再來也有可能是不太在食物上面耗費太多心思，故不太踏出舒適圈去嘗試新的店或食物，這邊我們能把食物簡介呈現出來，以供學生能有更多選擇。

### 二、時間問題

* 有的人起床時已經是中午，而常常困惑著到底要吃早、午餐抑或是早午餐要吃什麼，但難免會遇到想吃的店當天沒有開或是該時段沒有營業的問題，這種時間的問題若能以符合人性化的方式將未在服務時段內的餐廳排除顯示，想必能大大提高方便性。

### 三、交通性問題

* 考慮到有些人可能還沒有摩托車，甚至沒有腳踏車，也沒有後座能蹭，而眼光難免會放在如同「千里之外」的餐廳，在這邊我們會可能將焦點放在龍潭路及中山路等雲科周邊的餐廳進行主要參考，太遠的我們就暫不考慮。

## 2.系統分析 (System Analysis)

* 依照初步調查，結合線上所查詢之美食引導網站，我們對於我們的網站有了一些最基本的雛型，以下將大致介紹我們希望保留及新增的：

### 一、欲保留的功能

#### (1).直覺化的篩選系統

* 一個良好的網站，勢必要對應不同用戶當下需求而去做網頁的開發，而在我們調查後，發現很多美食網站都有提供分類的功能，舉例來說依照時間當下而分類的「早餐」、「午餐」、「晚餐」、「消夜」等；依照地點而分類的「龍潭路」、「中山路」等；依照食物種類而分類的「飯類」、「麵類」、「炸物」等。上述這些都是非常人性化的分類系統，可以依照個人需求，按下選單按鍵後，將各餐廳篩選出來，讓使用者在使用上能更加直覺、方便。

#### (2).依照個人需求的搜尋系統

* 一個美食網站可能含有成千上萬的餐廳，如何從「茫茫餐廳海」中找尋到自己的心之所向呢？那當然是必須要有我們的搜尋系統啦，一個好的美食網站，有著直覺的搜尋系統，能夠提供給使用者良好的操作體驗，而雖然我們這次的雲科美食吃透透的範圍不大，但依舊希望能保留並呈現這項良好功能。

### 二、欲新增或優化的功能

#### (1).會員功能優化

* 我們看到的網站，使用者登入後的會員功能便是發表文章等功能，這邊我們希望能實現出「我的最愛」或者是「購物車」等類似功能，讓使用者藉此能夠方便地將喜歡的餐廳放入收藏中。

#### (2).新增「為您推薦」

* 使用者可能會有著想破頭仍然無法決定要吃什麼的狀況發生，這邊我們新增了一個「為您推薦」的網頁，對應當下時間，配合餐廳營業打烊，依照各種方法，如「隨機大轉盤」、「排除法」等，一一篩選出為使用者推薦的餐廳，進而解決使用者的煩惱。

## 3.系統設計 (System Design)

### 一、首頁介面設計
* 上圖為本次主頁的雛型，在主頁的上橫條部份我們提供了四種功能：區域、時段、種類、登入，此部分是以下拉式選單的方式呈現，提供使用者良好的分類使用體驗，而主頁的下半部分是提供使用者若有自己想找的餐廳可以直接利用搜尋的方式快速找到心中所想的餐廳，而點進去後便會將使用者帶到Google地圖中，讓使用者快速定位餐廳的位置。

### 二、下拉式選單細項介紹
* 上圖為本次下拉式的雛型，以上分別提供了多種分類選擇以供使用者做選擇，藉由這些功能，能夠使得使用者能有更好的選擇體驗，未來希望能增加更多功能。

### 三、會員功能介紹
* 上圖為主頁中的登入系統，根據調查，發現許多網站都會有提供會員登入的功能，我們希望呈現的功能有：提供會員註冊、登入、購物車、我的最愛等功能，過程中會接觸到我們從未嘗試過的資料庫，希望能有更多功能來豐富這個網站。

### 四、欲新增功能

* 左圖為抽籤轉盤，右圖為之前看到的刪去法小遊戲，這些都是我們認為很不錯的工具，可以以此想法開發出能替有著選擇困難症的使用者做選擇一個小工具，這部分待基本的頁面設計完善後可能會進行新增，進而發展出不同於一般美食網站的功能。

## 4.系統開發 (System Development)

### 一、軟體、開發環境說明

#### (1). Visual Studio Code

* Visual Studio Code是一款由微軟開發且跨平台的免費原始碼編輯器，在本次網站開發中為我們的中心開發軟體，以此為開發環境，將程式撰寫出來，而後一併交由組長進行統整。

### 二、使用語言說明

#### (1).HTML、CSS、JavaScript

* 這三個是開發美觀實用網頁不可或缺的基本元素，HTML配合CSS進行網頁外觀修飾，再結合JavaScript將功能呈現出來，適當運用上述來實作開發，便可製造出我們理想中的網頁了。

## 5.系統實施與評估 (System Implementation and Evaluation)
本次專題我們分為五個主要部分：

### 一、 主頁面
* 先以HTML拉出一個主要的框架，再以CSS做畫面修飾及美化，最後以JS做出主要功能，這部分我們先做好後便以此為主要框架供給其他組員進行後續開發，以此框架為底便能統一每個網頁的格式。主頁面功能的部分基本會有：餐廳展示，後續若有新增功能會再做補充。
### 二、 下拉式選單-區域
* 以jQuery將下拉式選單實現出來，分配組員此工作，須將餐廳分類為各區域分開顯示，如：龍潭路、中山路，後續若有新增功能會再做補充。
### 三、 下拉式選單-美食
* 以jQuery將下拉式選單實現出來，分配組員此工作，須將餐廳分類為各時段分開顯示，如：早餐、午餐、晚餐、消夜，後續若有新增功能會再做補充。
### 四、 下拉式選單-種類
* 以jQuery將下拉式選單實現出來，分配組員此工作，須將餐廳分類為各種類分開顯示，如：飯類、麵類、炸物、素食，後續若有新增功能會再做補充。
### 五、 登入系統
* 以資料庫結合HTML，提供使用者進行註冊及登入的動作，其內容可能涵蓋：購物車、我的最愛等多元功能，後續若有新增功能會再做補充。

---

## B. 小組工作分配
* ### 吳奇彥：各人網頁整合，分頁(種類)，功能統合及補充，報告撰寫，
* ### 馬明逸：分頁(區域)，程式優化
* ### 張筱萱：主頁設計，選單設計，CSS整合、登入系統
* ### 蕭瑋廷：分頁(時段)，資料蒐集
* ### 劉哲彰：登入系統

---

## C.開發可能面臨的困難、所需資源、語言、甘特圖。
本次開發網頁的過程可能會遇到的問題以及所需資源如以下：

### 一、可能面臨困難點

* 一開始在12/3前，我們組員皆有著許多雜事需要處理，故沒有一個能固定回報進度的狀況，而在經過12/3後，組內才步入正軌，故時間分配問題是我們所需要關注、並且掌控的問題。我們這次想嘗試看看結合資料庫來將登入系統在網頁中實現出來的功能，在此我們先前從未學過，我們將會上網看相關教學影片一步步摸索，紮實地將功能實現出來。

### 二、所需資源

* 對於本次開發，我們所使用的資源基本上以上課教材作為基本，以Google作為輔助，遇到不會的就從中學習，正所謂「做中學，學中覺」。程式撰寫環境方面我們採用Visual Studio Code來撰寫，實做完後上傳公共雲端，交由組長整合，大致上是以以上流程做開發。

### 三、使用語言

* 本次使用HTML、CSS等標記語言配合JavaScript程式語言來進行開發，流程為：HTML先將主頁面框架拉好，而後使用CSS將畫面修飾得更加多元，之後再以JavaScript將內部功能實現出來。

### 四、甘特圖