# Omni-Trend 專案分享 - (1)

以下是一個專案分享的大綱範例：

I. 專案概述
專案背景與動機

##### 一開始由 Yen、Scott 開始的網站資料蒐集與分析專案，後來於2022年的3月與 PD 合作開發，我們負責視覺、UX、前端。
##### 由2021年的二月到2022年3月我們開始接手，就專案而言已經經歷一年左右的時間，整個專案處於一個急須看到成果的狀態。
##### 專案組成
- collector.js 蒐集網頁使用者資訊，包含：瀏覽器資訊，使用者行為
- Back End: Dashboard

---
II. 專案執行計畫(Jean)
專案流程與時間軸歷史
如何從 Peter scss 到 crown 到 scott - react 到 Jean Leo

- 技術迭代
- collector v1(由 Jean 開發雛形再由 Yen 開發)
- 開發者
- Jean 開發(### 寫一下印象深刻的部分)
- 依照使用者動作取得網頁結構的部分
- 點擊
- 滾動
- Yen 開發主要邏輯
- 蒐集瀏覽器紀錄
- 發送資料邏輯
- 串接 api
- 取消蒐集
- 資料加密
- 既有問題
- 閱讀與維運的困難
- 一隻 500 多行的 js 程式，其中包含註解與主要邏輯
- 沒說明文件
- collector v2(refractor v1)
- 客製化事件
- 傳遞 帳號 延續生命週期
- 調整指標
- Web 指標
- Largest Contentful Paint (LCP) ：最大內容繪製，測量加載性能。為了提供良好的用戶體驗，LCP 應在頁面首次開始加載後的2.5 秒內發生。
- First Input Delay (FID) ：首次輸入延遲，測量交互性。為了提供良好的用戶體驗，頁面的 FID 應為100 毫秒或更短。
- Cumulative Layout Shift (CLS) ：累積佈局偏移，測量視覺穩定性。為了提供良好的用戶體驗，頁面的 CLS 應保持在 0.1. 或更少。
- 移除沒在分析的資料
- html 結構
- 測試頁面
- 避免機器人
- react + python M1,
- 在 python 下執行 js，需要了解 python 環境如何建置，基礎的 python 語法

專案組織架構與角色分工：
- Design: Peter, Crowe
- Front End: Jean, Leo

專案需求與資源分析
- 前後端分離
- 使用 react
- 沒有測試
- 搜集用戶資料
- 沒有網站架構
- 想到哪做到哪
- 每個都很急

##### 專案組成
- collector.js 蒐集網頁使用者資料，包含：瀏覽器資訊，使用者行為
- admin back-end: 資料分析、使用者管理
---
III. 專案方法與技術(Jean)
專案所需技術與工具介紹
- 為何研究為何研究這些，以及最後抉擇的原因
Ui liberate
CSS management

- react
- Style components

專案開發環境與設計原則(Jean)

- git
- node
- util, redux, graphql
---
IV. 專案實作與測試(Jean)
系統功能與模組介紹

錯誤處理與優化策略
- 講解重大的 bug，或是最有印象的
- 講解如何測試
---
V. 專案成果與評估(Jean)
專案完成度與目標達成情況
系統效能與使用者體驗評估
專案問題與未來展望
---
VI. 結論與建議(Jean)
專案心得與反思
專案成效與貢獻
專案未來發展方向建議