# YTP 學習歷程檔案

＠NTUST, Taiwan
_________________________
### 小組簡介
>隊名：薛爛了
>組員1：[姚承希](https://hackmd.io/@SoraiMahiro/H197nZJaA)
>組員2：[吳赫宥](請補上投影片超連結)
>組員3：[薛尹喆](https://hackmd.io/Pcm0sJqHRPe3sdQiWuiU0w)
>題目/目標：演算法動畫網站
>精誠資訊輔導員：蘇育瑨
>助教：

_________________________
:::success
### 時程規劃
| | 預估完成時間 | 實際完成時間 |
|:--------------:|:------------:|:------------:|
| 定義題目 | 2024/9 | 2024/10/7 |
| 分工規劃 | 2024/10 | 2024/10 |
| 完成期中報告投影片 | 2024/11 | 2024/11 |
| 完成實作 | 2025/2 | n |
| 完成期末報告投影片 | Text | n |
| 完成預演 | Text | n |
| 比賽日 | Text | n |

- 待辦清單
- [ ] 前端
- [x] [name=姚承希]UI介面
[time=2024/12/30]
- [x] [name=所有人]動畫表達式語法設計
[time=2024/12/26]
- [ ] [name=姚承希]動畫表達式語法解析
- [x] [name=薛尹喆]節點圖繪製
[time=2025/1/3]
- [ ] [name=薛尹喆]動畫功能
- [ ] [name=吳赫宥]動畫編輯

:::
### 實作
https://github.com/YTP-XueMoney/Frontend_new
- 前端:
- 網頁框架: vue.js
- 編輯器: monaco editor
- 動畫: d3.js


---
### Meeting Minutes

#### 2024/9/11: 啟動會議
- 報告事項：
- 各組介紹 (6頁)
- 簡單介紹自己，貼上大頭照(每位同學一頁)
- 參與此專題的目的(每組一頁)
- 每週預期付出的時間(每組一頁)
- 希望得到的協助(每組一頁)
- 決議
- 工作1: 預期成果、負責人、預計完成時間

#### 2024/10/8 例行會議
- 討論事項: 主題決定並詢問教授([投影片](https://www.canva.com/design/DAGS-Ki2H2k/vGrTxFOsDXqSduqxP8bWZg/view?utm_content=DAGS-Ki2H2k&utm_campaign=designshare&utm_medium=link&utm_source=editor))
- 決議:
製作主題：圖論動畫網站
- 動機: 可視化可以幫助學習者更好理解複雜演算法。因此，我們的想法就是建立一個用來繪製圖論動畫的網站，以動態的方式展示演算法的執行情形，如深度優先搜尋（DFS）與廣度優先搜尋（BFS）和最短路徑演算法(dijkstra)等。這樣的工具不僅能幫助程式教學，也可以增強學員對這些核心演算法的直觀理解。
- 預計製作畫面:
- Comments from Prof. Ray
1. 使用者是誰？Business Model?
2. 有沒有類似的解決方案？
3. 做這件事的困難度？重要性？
4. 分工
5. 預計如何展示？

#### 2024/11/1 例行會議
- 討論事項: 期中報告前預演
[投影片](https://www.canva.com/design/DAGVC0tQQfE/p5q3bah2w10lJHzIWX0NwA/view?utm_content=DAGVC0tQQfE&utm_campaign=designshare&utm_medium=link&utm_source=editor)

#### 2024/11/9 期中報告
Q/A:
1. 使用者已有一定背景，可以增加一些可調整的prompt
2. 目標分割縮小

#### 2025/1/10
- 進度報告
[投影片](https://www.canva.com/design/DAGbVo107hM/mZJ0p6R6GQWO_AZ6va_9xA/edit?utm_content=DAGbVo107hM&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton)

使用故事包裝

----

### Q&A
1. 使用者是誰？
- 使用者:學生 教授 老師
2. 有沒有類似的解決方案？
- https://www.cs.usfca.edu/~galles/visualization/Algorithms.html
- https://tldraw.dev/#features
- https://algorithm-visualizer.org/brute-force/binary-tree-traversal
3. 做這件事的困難度？重要性？
- 困難度高：需要前端（如 Vue.js、D3.js）和後端（如 Flask）知識，並處理使用者互動的問題
- 重要性
- 教育價值:圖論動畫能夠幫助程式學習者視覺化地理解複雜演算法，可用於程式教育、教學演示，在課堂教學和自學中都有很大的應用潛力。

---
### 目前遇到的問題
1. 沒有伺服器
- 初步解決方法: 使用git上傳到github，每個人下載到自己的電腦執行開發
- 成果展示比較麻煩
- 是否可以申請一個伺服器空間