---
# System prepended metadata

title: 食譜採購比價網
tags: [Google DSC Hackathon, Documentation]

---


# 食譜採購比價網

###### tags: `Google DSC Hackathon` `Documentation`

## 網站服務
- 防疫也要省錢，本網站蒐集不同購物網站的價格資訊，讓民眾在家能夠低成本購入他們所需的食材，並依照食譜進行料理。

## 功能簡介
- 使用者可於本網站搜尋食譜，搜尋到食譜後會自動跳出該食譜所需之食材，並於各購物網站抓取食材資訊，讓使用者可以一站式比價，買到最划算的食材。

## 使用技術
### Frontend
- Flutter
### Backend
- FastAPI
- Python

## 如何使用

### 前端

* 進到專案工作目錄
```
cd foodprice
```
* 建立`.env` 至專案根目錄並複製以下資料
```shell=
CORS_PROXY=http://128.199.227.138:9527/
INGREDIENT_API=http://128.199.227.138:8000/ingredient/
RECIPE_SEARCH_API=http://128.199.227.138:8000/search-recipe
RECIPE_DETAIL_API=http://128.199.227.138:8000/get-recipe
THUMBNAIL=https://imageproxy.icook.network/resize?background=255%2C255%2C255&height=150&width=200&nocrop=false&stripmeta=true&type=auto&url=
COMPRESSOR=https://imageproxy.icook.network/resize?background=255%2C255%2C255&height=600&width=800&nocrop=false&stripmeta=true&type=auto&url=
```

* 將原始碼編譯成網頁
```
flutter build web
```
* 進到網頁工作目錄
```
cd build/web
```
* 利用Python作為網頁伺服器進行快速瀏覽，即可透過http://127.0.0.1:8000上前端網頁
```
python3 -m http.server 8000
```


## 未來規劃
- 整合更多食譜及購物網來源
- 購物網加入購物車之功能
- 與市場均價比價功能


## 參考網站
[愛料理](https://icook.tw/)
[momo購物網](https://www.momoshop.com.tw/main/Main.jsp)
[遠傳Friday購物](https://shopping.friday.tw/index.html)

## 使用者界面
* 首頁
![](https://i.imgur.com/M0bAiyF.png)

* 搜尋頁面
![](https://i.imgur.com/yrnUV0g.png)

* 食譜頁面
![](https://i.imgur.com/VJd4SMf.png)

* 比價頁面
![](https://i.imgur.com/WNG8WuL.png)