# Schedulio -- 抓到！有人正在偷看你的行事曆

## 專題簡介
### 簡介
Schedulio 是一個行程預約器。
使用者可以在登入後串連自己的 Google 帳戶（多個）並查看自己的行程，藉由輸入他人的帳號名稱。
可以查看他人行事曆上的空檔時段，並寄送活動邀請進行行程預約。被邀請者會收到一封確認信，可以選擇接受或拒絕邀請，接受後會自動將活動排入自己的行程表內。
當個人的行程表被他人查看時，系統也會透過 email 進行通知。

### 遇到問題
#### 前端
1. 格式調整步驟繁瑣
- 產生好用又美觀的前端是需要技術的
3. 與後端串接時的功能調整
- axios 套件使用以及與後端討論 method、資料格式與 api 內容
5. UI 套件使用與讀官方 doc 文檔
- 最困難的部分其實是使用套件的部分，總需要花費很多時間了解該套件的配置以及符合我們需要的客製化內容

#### 後端
- log-in and sign-up problem
- 需要設定在前後端分別記錄、傳遞、或移除 session 的方式，以得知是否有在登入的狀態
- 要額外處理「帳號已被註冊」或「帳號或密碼錯誤」等額外狀況
- 因為有些頁面應該要在登入後才能使用，因此在不同的 route 需要設定類似 middleware 的存在
- get calendar problem
- 連接 google api 有它特殊的方法及分類，需要查詢各參數的意義及需要的方法
- 像是授權的方法、給予的授權種類、讀取需要的資料的方法，以及如何讓前端讀取獲得的資料等等。
- 遇到了讀取 email 的 scope 與其他的差異，access_token 的刷新問題，不同的獲取授權的方法，不同時間格式的轉換，以及資料儲存方法，還有各種錯誤修正等等困難。
- CORS Error
- 因為前後端分離，所以前端和後端需要透過 API 來溝通，但是因為前後端的 domain 不一樣，所以需要在後端設定允許來自不同 domain 的 request（額外的 HTTP Header），才能正常運作。
- 最後是使用「Sanic-Cors」這個套件，在 post 的 API 加上 Header 解決這個問題。
- send email problem
- 寄信需要設定很多 SMTP service 的環境變數，例如：寄信用的帳號、SMTP Server Host、SMTP Server Port 等。
- 我們使用 Gmail 來寄信，而 Google 要求使用比較安全的方式登入寄信用的帳號，所以稍微研究了一下怎麼設定（使用「應用程式密碼」）。
- database problem
- 需要事先學習 SQL 的語法，並建立資料表的架構與關聯，還要在程式中與資料庫進行連線
- Git problem
- 由於我們是選擇使用 GitHub 來進行合作，因此需要熟悉 Git 的語法，以及遇到各種情況（如 conflict、branch）的解決辦法

## 使用說明

### 使用教學
進入頁面後，按右上角進行登入

跳轉至登入介面

或是進註冊頁

點選 My Calendar，進入空白 calender，再點選下方藍色 add 按鈕連接自己的 Google 行事曆

透過google驗證後自己的行事曆就會出現了！

如果你想查看其他人的行事曆，點選 Other Calendar，輸入其他人的 User Name

接著就可以看到其他User有空的時間

在偷看其他User行程時，系統將會寄一封通知信給對方(有變態!!!!!)

將頁面下拉，可以寫下要預定的時間及事件內容，系統將會自動傳送確認信給對方

對方最後也會收到你的行程預定信件

### 環境設定
* **Frontend**

For the first time, you have to run:

yarn

In the project directory, you can run:

yarn start

Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.

The page will reload if you make edits.\
You will also see any lint errors in the console.

* **Backend**

#### 下載虛擬環境套件

pip3 install virtualenv

#### 創建虛擬環境

virtualenv virt

#### 允許腳本運行(powershell)

Set-ExecutionPolicy Unrestricted -Scope Process

#### 開啟虛擬環境

.\virt\Scripts\activate.ps1

#### 安裝套件(會看到(virt)在前面)

pip install -r requirements.txt

> [`requirements.txt`](https://github.com/jason01180118/Schedulio-backend/blob/main/requirements.txt) 在專案裡有

#### 執行

python app.py

#### 建立自己的 `.env`

cp env.example.py env.py

## 完整程式碼及說明
### 程式碼
Frontend：https://github.com/jason01180118/Schedulio-frontend
Backend：https://github.com/jason01180118/Schedulio-backend

### 說明

#### 前端（框架：React with TypeScript）
| 檔案 | 說明 |
| ---------------- | ------------------------------------------------------------------------------------------------------------ |
| CalendarPage.tsx | 讀取後端的資料並顯示相對應的行事曆畫面，接受在行事曆上的各種操作（包含新增自己的 `email`，以及對他人進行預約） |
| HomePage.tsx | 程式的主頁，可以連接到其他頁面 |
| LinkPage.tsx | 輸入 `user name` 後，跳轉回 `CalendarPage` 讓它顯示該 `user name` 的行事曆 |
| LoginPage.tsx | 登入畫面操作，登入後跳轉回主頁 |
| RegisterPage.tsx | 註冊畫面操作，註冊完成會跳轉回登入頁面 |
| header.tsx | 上方導航欄，負責路由部份的連結操作 |
| axios.ts | 負責處理與後端 api 的參數設定，並將所有 api 作集中整合 |

#### 套件
1. eslint
2. tailwind
3. React Scheduler
4. mui
5. react-cookie
6. react-router-dom
7. axios

#### 後端（框架：Sanic）
| 檔案 | 說明 |
| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| app.py | `Sanic` 框架的主程式，用來連接各個 `route` ，並與前端進行連接，進行對應的資料處理、回傳和錯誤偵測，除了 `calendar` 操作以外的主要實作方法都寫在這裡 |
| Database.py | 與資料庫（`Schedulio.db`）進行互動的 `class`，所有與資料庫相關的動作都在此完成 |
| env.py | 各種環境、權杖相關的設定，需要先透過 `cp env.example.py env.py` 產生，並進行正確的設定後才能讓程式正常使用 |
| get_calendar.py | 開啟授權網站後將新增的 `email` 及其 `credentials` 存入資料庫或是根據拿到的 `session` 或 `account` 從資料庫中讀取 `email` 及其 `credentials` ，並回傳該使用者的行事曆。其 `method` 會在 `app.py` 被呼叫 |

## 架構圖


## 功能測試
https://drive.google.com/file/d/1sLqLNepml-khQdV3spHlGJcCkkwqXvql/view?usp=share_link

## 團隊分工

| 姓名 | 工作內容 |
| ------ | ---------------------- |
| 陳歆 | 前端、UI/UX、CSS |
| 蕭詠繼 | 後端、Database、login/signup、debug |
| 許尚軒 | 後端、get_calendar、debug |
| 沈富堅 | 前端、React、前後端串接、debug |
| 溫婕宇 | 後端、email、CORS、debug |