- 起步
- assets/
- beanfun_tracker/
- components/
- middleware/
- news_detail_page/
- pages/
- plugins/
- static/
- store/
- test/
- babel.config.js
- deploy.bat
- jsconfig.json
- nuxt.config.base.js
- nuxt.config.dev.js
- nuxt.config.js
- package.json
- vue.config.js
- 進行開發
npm install
npm run dev
- 進行部署
npm run generate
# 完成後上傳到 storage blob, 或是透過 azure cli(請見 deploy.bat 章節)
星球主頁
載入時, 會引入https://.../beango-static-stg/sdk/beanfun.min.js
, 提供方法能夠取得 beanfun! app 的資訊, 或是操控一些行為.- 資料夾內有
beango/[index index-async index-mock].js
包裝了他的方法, 而專案內統一呼叫包裝過的方法. index.js
: 第一層包裝的方法, 紀錄 log, 並使用 callback 形式取得結果index.async.js
: 從index.js
擴充, 將那些使用 callback 形式的方法改成使用 Promise, 達成 async 呼叫.index.async.mock.js
: 從index.async.js
擴充, 將那些能夠取得結果的方法改成直接回傳 mock 結果, 方便於網頁上測試(網頁不支援使用 beango sdk)
formatter.js
- 這裡定義了
推薦新聞
和推薦商品
的資料格式化方法
- 這裡定義了
events.js
- 這裡列出
追蹤使用者行為
的所有事件資訊, 包含事件 Id
,事件 Payload 格式化方法
- 這裡列出
utils.js
- 這裡定義了使用於
追蹤使用者行為
的工具, 如:- 依據手機裝置名稱, 取得對應的手機作業系統
- 取得目前瀏覽器的時區
- 這裡定義了使用於
- 這裡是將 fetch API 包裝, 提供
get
,patch
,post
方法- 有預設 api prefix, 也可透過參數
apiPrefix
指定
- 有預設 api prefix, 也可透過參數
- 這裡定義了
星球主頁
的資料格式化方法, 包括新聞
和影音
,數字
格式化使用於影音觀看數
(詳見test/formatter.test.js
)
- 這裡定義了使用於
星球主頁
的工具, 如:- 隨機產生 uuid
- 取得 query string 參數組合的物件
- 隱藏或顯示 VConsole
- 這裡是將 store 的
dispatch
和commit
包裝, 將第三個參數options
都預設傳入{ root: true }
, 這樣才能達成 namespaced 架構中 rootactions
和mutations
的呼叫.
- 這裡是星球的靜態資料
- [注意] 內容中的 id 會對應 news api 回傳的星球 id, 若有星球 id 更動, 或是新增星球, 這裡必須修改.
- 由於遵照 Component-scoped styles in Single File Components, 專案中元件的樣式都寫在 *.vue 的
<style>
裡面, 另外專案中 HTML Element Class 的命名規範是遵照 BEM.
- 這裡是全域 css, 如:
- 微軟正體字型
- 連結文字不加底線
- 寬度小於 1024px 會隱藏 scrollbar
- 隱藏 VConsole
- 請見 demo
- 元件說明請見 Style Guide
- 這裡是判斷 client app 版本是否為最新版本, 若不是則使用 beango sdk 強制重整頁面.
- 這裡是執行一般的初始化, 如:
- 啟用 VConsole, 再隱藏 VConsole
- log 環境變數
- 這裡是執行與追蹤事件有關的初始化, 如
- 透過 utils, beango sdk, 或是環境變數, 收集事件所需資料
- BTracker 初始化
- 這裡會向 news api 請求星球資料
- 這裡會判斷若是不允許國家地區的使用者, 重導向至 /noallow
- 這裡會向 news api 請求 server 端的環境變數
- 這裡定義了
新聞內頁
使用的資料格式化方法, 如:- 將毫秒轉換成
新聞內頁
需要顯示的文字(詳見test/news_detail_page/formatter.test.js
)
- 將毫秒轉換成
- 這裡是 bundle news_detail_page.js 的 entry, 涉及的範圍如下:
- 判斷目前是 development 還是 production, 才能決定匯入
nuxt.config.dev.js
還是nuxt.config.js
- 程式進入點是從引入所有需要的 scripts 開始, 像是 Vue, Vue 元件的 umd 套件, beango, VConsole 等等, 這些 script tag onload 都會綁定指定的 function
- beanfun 和 vue 的 scripts 成功載入後, 會接續完成:
- 向 news api 請求 server 端環境變數
- 透過 utils, beango sdk, 或是環境變數, 收集事件所需資料
- BTracker 初始化
- 向 news api 請求
新聞內頁
的新聞資料
- 向 news api 請求
新聞內頁
的新聞資料- 格式化新聞資料
- render 動態 DOM
- 綁定事件, 如:
- scroll: 追蹤使用者閱讀新聞比例
- click
<a.link__open-by-default-browser>
: 使用 beango sdk 打開手機預設瀏覽器並導向 - long-touch
<div.title>
: 顯示 VConsole, 使用 touchstart, touchend 和 touchcancel 達成 - click
<div.tool-menu__inside-sharing>
使用 beango sdk 內部分享 - click
<div.tool-menu__outside-sharing>
先透過 news api 提供的縮短網址服務, 再使用 beango sdk 外部分享
- render Vue 元件的 umd 套件
- BRecomendNewsBlock
- BRecomendAdBlock
- 判斷目前是 development 還是 production, 才能決定匯入
- 這裡定義了
新聞內頁
上與 DOM 動態顯示的方法, 如:- 工具列(beanfun! app 內部分享與外部分享)
- 來源資訊(來源圖片, 來源名稱)
- 時間資訊(發布時間, 更新時間)
- 推薦新聞區塊的標題
- 推薦廣告區塊的標題
- 來源新聞連結
- beanfun! app 分享訊息的格式化方法, 內部分享與外部分享
- 這裡定義了使用於
news_detail_page.js
的工具, 如:- 動態引入 script tags, 並綁定 onload
- 簡單分群
- 將 news id 從網址中解析出來
- 這裡定義
news_detail_page.js
bundle 設定, 如:- 進入檔是
/news_detail_page/index.js
- 使用 babel-loader
- 輸出於
/static/news_detail_page.js
- 傳入 DEVELOPMENT 判斷是 development 還是 production
- 進入檔是
- 這是
影音內頁
- 這是
新聞主頁
- 這是
不支援目前國家地區的資訊頁
- 這裡是定義每個元件都很有可能需要的資料, 如:
- 透過星球 id 取得星球名稱
- Server 端環境變數
- 請手動建立這個資料夾, 因為開發時可能需要, 建立後手動下載幾篇
新聞內頁
html, 並且保持網址的路徑, 放置於此資料夾內. - 當你要開發
新聞內頁
時, 可以透過這些新聞內頁
html 測試, 每當修改完記得要執行npm run build:detail
將news_detail_page.js
更新.
- 這裡是跟 beanfun tracker sdk 有關的資源
index.html
: 這是說明文件, 說明如何使用 BTrackerapp.js
: 測試用途
- BTracker bundle, 需要執行
npm run build:tracker
- 這裡是放置使用到的 icons
- 這裡是放置
Vue 元件的 umd 套件
的展示頁面
- 這裡是放置
Vue 元件的 umd 套件
, 需要執行npm run build:packages
- 這裡是 styleguide 頁面, 需要執行
npm run styleguide:build
- 這是
新聞內頁
所使用到的 css
- 這是
新聞內頁
所使用到的 bundle js, 需要執行npm run build:detail
- 這是
新聞內頁
的範本
- 每一個 store 都會分為三個檔案, 舉例
foo.js
:api/foo.js
- [不公開] 包含所有 foo 相關的 api 呼叫方法
stateRepo/foo.js
- [不公開] 包含所有 foo 相關的 state 和 mutations,
foo.js
- [公開] 包含所有 foo 相關的 getters 和 actions
- 目的是當對外公開 foo store 時, 只公開他的 getters 和 actions, 也就是外面使用端:
- 透過 getters 取得 state, 或是經過運算後的 state.
- 透過 actions 先呼叫
/api/foo.js
的 actions 取得資料, 再透過 mutations 更新 state.
- api 提供影音資料, 若要篩選有兩種方式:
- 指定星球
- 指定分類
- api 提供 access token 驗證服務
- api 提供分類資料
- api 提供追蹤使用者行為服務
- api 提供新聞資料, 若要篩選有兩種方式:
- 指定星球
- 指定分類
- api 提供推薦資料, 共有三種資料:
- 依據關鍵字取得商品
- 依據新聞 Id 取得推薦新聞
- 依據 openId 取得推薦新聞
- api 提供星球資料
- api 提供 Server 端環境變數
- 影音列表
- 從 beango 收集的資料
- 分類列表
- 追蹤事件所需要的資料
- 新聞列表
- 星球列表
- Server 端環境變數
- ts: 若要向 news api 請求新聞/影音資料, 需要指定 timestamp, 這樣才不會因為有更新的新聞/影音而導致重複. 所以在網頁載入後會設定一個 ts, 直到重整都會傳入同一個 ts 值.
- 取得影音資料
- 取得從 beango 提供的資料
- 取得分類資料
- 取得追蹤事件所需要資料, 發送追蹤事件
- 取得新聞 & 推薦新聞資料,
- 取得星球資料, 以星球 Id 找星球
- 取得 Server 端環境變數
- 更新 ts
- 以 jest 測試, 需要執行
npm run test
- 用於 jest 的 babel 設定, 即可在
test/**/*.js
使用 es6 語法.
- 可以建立此 bat 方便開發端部署到 azure storage blob
- 需要安裝 azure cli
npm run generate:supplier
# 或是 npm run generate
az storage blob upload-batch --account-name {account_name} --source ./dist --destination $web --account-key {account_key}
# account_name: storage 名稱
# account_key: storage key
- nuxt 所提供
- nuxt 所有設定
- 從
nuxt.config.base.js
擴充, 加上 development 使用的環境變數
- 從
nuxt.config.base.js
擴充, 加上 production 使用的環境變數
指令 | 是組合 指令 |
說明 |
---|---|---|
dev |
X | 會以 nuxt.config.dev.js 啟動 nuxt server |
build |
X | 建置 nuxt |
start |
X | 啟動 nuxt server |
generate |
V | pre-build nuxt generate : static site generationstyleguide:build |
pre-build |
V | generate:version build:packages build:detail |
build:packages |
V | build:package:BRecommendNewsBlock build:package:BRecommendAdBlock |
build:package:BRecommendNewsBlock |
X | 使用 vue-cli 建置 Vue 元件的 umd 套件 - 推薦新聞區塊 |
build:package:BRecommendAdBlock |
X | 使用 vue-cli 建置 Vue 元件的 umd 套件 - 推薦廣告區塊 |
build:detail |
X | 使用 webpack 進行 bundle news_detail_page.js |
build:tracker |
X | 使用 webpack 進行 bundle beanfun_tracker/sdk/beanfun_tracker.min.js |
test |
X | 進行 jest 測試 |
styleguide |
X | 啟動 styleguide server |
styleguide:build |
X | 建置 styleguide |
generate:version |
X | 執行 version/index.js 他會產生 static/version.json , 用於判斷是否為最新版本 |
- 若指令有接著
:supplier
, 代表使用nuxt.config.dev.js
, 而非nuxt.config.js
.
- vue cli 所需要的設定, 用於 bundle
共用的 Vue 元件