cyruslung / bistro

Believe That Control Your Life

Bistro Project

Bistro為結合「食」、「育」、「樂」的線上酒品媒合平台。除了販售各國酒種、專業酒具與本國相關活動票券，也提供各式餐酒館和酒吧的預約服務，並以知識型部落格提供酒類專業文章，不論新手或老饕，都能在此找到最適合自己口味與需求的酒種和餐廳，期望藉以拉近大眾的距離，達成初衷「Believe That Control Your Life」，將品酩自然地融入日常生活。

Youtube

Skills

Guide

• 佐一點美食｜餐酒館預約

  使用者可以依照需求，篩選出理想之風格類型、所在地區，或是根據預算選擇價位區間內的餐廳，進行複合篩選。頁面右側結合Google Map功能，顯示區域附近餐酒館的位置，並且加入我的收藏。點擊後即顯示詳細該餐廳詳細資訊，使用者可選擇欲用餐人數、預約日期與時間，點選加入購物車後即會進入訂購流程。

• 找一點微醺｜各式酒種

  使用者可以依照需求，點選有興趣之酒種分類，下方即會出現該分類中的細項，可再做進階篩選；也能根據預算進行複合篩選（像是價格由高至低排列）。點擊商品後會進入其詳細資訊頁面，頁面最下方會推薦類似商品。使用者可點選加入我的收藏，或是加入購物車後即會進入訂購流程。

• 加一點風格｜酒類器具

  使用者可以依照需求，點選有興趣之酒具分類，下方即會出現該分類中的細項，可再做進階篩選；也能根據預算進行複合篩選（像是價格由高至低排列）。點擊商品後會進入其詳細資訊頁面，頁面最下方會推薦類似商品。使用者可點選加入我的收藏，或是加入購物車後即會進入訂購流程。

• 尋一點樂趣｜酒類活動

  使用者可以依照需求，篩選出各縣市區域內的將舉辦之酒類相關活動與展覽（像是國際酒展、品酒會等）。點擊後即顯示詳細該活動詳細資訊。使用者可根據需求，選擇人數與欲參加日期，點選加入購物車後即會進入活動票券訂購流程。

• 學一點酩識｜知識型部落格

  不同酒種各有其專業知識，BISTRO將社群互動轉化為部落格型式，以提供最新與正確性兼具的資訊為主軸。使用者可以透過篩選欄選擇酒種、歷月文章、精選分類，再進一步選擇欲閱讀的文章。如果喜歡某一篇，使用者能點擊加入收藏，或是發表評論。

• BISTRO會員中心

  會員以「登入／註冊」按鈕為始。符合使用直覺的UI設計，即使是初次造訪也能容易被引導至註冊頁面。在進入會員中心後，使用者可以查看與修改個人資料、檢視我的收藏清單、購物訂單、個人紅利、優惠券；此外也設置了提醒系統，如果使用者已購買之票券即將生效／回覆過的文章有新回應的話，系統會發出通知，溫馨提醒使用者。

How To Start

• 1.npm i (node v14.20.0 / npm v6.14.17)
• 2.npm run dev
• 3.npm run watch // 這個指令能將每次 react 檔案存檔後自動編譯
• 4.npm update
• 5.npm audit fix

Bistro-react -> npm strat React架構下的主網站

Guests -> npm start React架構迎賓頁（年齡確認）

node-rest-bistro

• 1.npm i @babel/cli @babel/node @babel/preset-env (因babel有新舊版差異)
• 2.npm install -g create-react-app (需使用CRA建立的專案架構)
• 3.npm start 使用node.js API 連線MySQL資料庫
• 4.cd blog_php php -S localhost:7777 開啟網站部落格後台資料庫連線 (進階系統設定->編輯環境變數->Path指定npm目錄，通常是 C:\Users\username\AppData\Roaming\npm)

xampp 安裝並開啟 apache(Config - Listen改3000) / MYSQL