---
# System prepended metadata

title: Omni-Trend 專案分享 - (1)

---

# 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)
專案心得與反思
專案成效與貢獻
專案未來發展方向建議