wu790616/xplorer

Xplorer

Explorer for learning and find your X

目錄

• 專案目的
• User Story (Done)
• User Story (In-Progress)
• Getting Started
• Built With
• Authors

專案目的

幫助學習者踏出學習的第一步：知識探索

解決的問題

1. 知識探索時方向不容易建立，或是容易迷失。
2. 個人知識探索領域不易建立系統，跨領域探索無法有效發揮交叉價值。

產品目標

1. 利用 Xplorer map 給予使用者各主題的熱門關聯領域，降低跨領域探索門檻。
2. 自動建立個人 Xplorer map，讓使用者在探索與學習中建立自己的知識系統。

User Story (Done)

Onboarding

1. 未登入使用者進入首頁的引導頁面

使用者相關

1. 使用者可註冊/登入方式
   • Email (devise gem)
   • 第三方API: Google/Facebook帳號
2. 使用者個人檔案：
   • 可編輯資料：
     • 暱稱
     • 大頭照(carrierwave gem, 具上傳功能)
     • 自我介紹
     • 個人技能
   • 資料可設定他人觀看權限：
     • Email
     • 個人關注主題(Xmap)
     • 個人收藏議題
3. 使用者可以互相追蹤
4. 通知功能
   • 新追隨者
   • 個人議題新留言/新回覆
   • 個人議題被讚/被收藏

議題相關功能

1. 使用者登入後
   • 可以新增/編輯議題
     • 可自訂標題
     • 可自訂內容 (ckeditor gem, 編輯器支援)
       • Rich Text Editor(富文本編輯器)
       • 貼上影片連結時會自動嵌入
       • 可插入程式碼
       • 可上傳圖片
     • 可自訂主題標籤
       • 標籤欄位可輸入關鍵字搜尋主題
       • 標籤欄位可利用下拉選單直接選擇主題
     • 可定義議題狀態
       • 存成草稿
       • 發佈
   • 針對議題可以留言/分享/收藏/按讚
2. 可點擊議題標題導向議題瀏覽頁
3. 可點擊議題作者導向作者個人檔案頁
4. 未登入使用者可瀏覽議題及分享

主題相關功能

1. 預設主題與主題間連結關係
2. 依據主題間連結關係產生Xplorer Map
   • 使用者能夠在 Xplorer Map 探索不同主題與了解學習領域關聯性
     • 提供不同擴展度的 Xplorer Map（一層擴展至三層擴展）
     • 為加速探索，提供熱門關聯主題推薦（同一時間最多提供四個關聯主題）
   • 點擊中心主題，進入主題頁與觀看相關議題
   • 點擊分支主題，改以該主題為中心繼續探索
   • 提供本次拜訪的探索履歷，讓使用者可以快速連結回前幾步的主題
3. 使用者登入後可以關注主題，建立個人的 X MAP
4. 為每位使用者繪製個人 X MAP，將個人關注的知識領域視覺化，以利使用者管理、調整個人的知識領域
5. 後台程式分析主題關聯度，以此微調與修正系統資訊
   • 紀錄使用者的 Xplorer Map 探索履歷
   • 分析使用者發布議題時加上的主題標籤
   • 依據使用者關注主題與進入主題頁次數，建立使用者對不同主題的關注度

後台數據分析

1. 使用 Whenever 以 crontab 自動排程，定時分析

Landing Page

1. 可瀏覽top10熱門作者
2. 可瀏覽全網站熱門議題
3. 可瀏覽全網站熱門作者的議題
4. 依使用者登入狀態呈現不同內容
   • 登入前
     • 可瀏覽全網站關注度top5熱門主題
   • 登入後
     • 可瀏覽個人關注主題關注度top5
     • 可看到追蹤者的新議題
     • 可看到關注主題的新議題
5. 可在導覽列使用全站搜尋，結果依議題、主題、使用者分類

User Story (In-Progress)

使用者相關

1. 使用者註冊/登入優化
   • 使用者註冊後，會收到註冊確認信

議題發表功能

1. 使用者登入後
   • 可自訂主題標籤
     • 標籤欄位未找到欲標籤之主題，可以自行新增

Getting Started

Install project

$ bundle install
$ rails db:migrate

Setup data for development

$ rails dev:fake_demo

Setup environment

Facebook/Google認證功能，需要取得Facebook/Google App ID和App Secret， 取得專屬App ID和App Secret後請創建config/local_env.yml，並在檔案中設定：

FB_APP_ID: 'YOUR_FB_APP_ID'
FB_SECRET: 'YOUR_FB_APP_SECRET'
GOOGLE_APP_ID: 'YOUR_GOOGLE_APP_ID'
GOOGLE_SECRET: 'YOUR_GOOGLE_APP_SECRET'

CKeditor的embed功能搭配iframely的服務，需要申請自己的API KEY， 否則embed的媒體大小會有所限制，在iframely網址申請後，請至config/local_env.yml，並在檔案中設定：

IFRAMELY_LINK: '//iframe.ly/api/oembed?url={url}&callback={callback}&api_key=YOUR_API_KEY_HERE'

將YOUR_API_KEY_HERE換成自己的API KEY。

Setup whenever

$ whenever --update-crontab

Install Nokogiri

$ gem install nokogiri

Setup Redis server

MAC:

$ brew install redis
$ redis-server /usr/local/etc/redis.conf

Linux:

$ wget http://download.redis.io/redis-stable.tar.gz
$ tar xvzf redis-stable.tar.gz
$ cd redis-stable
$ make
$ redis-server

設定好redis server後，需要在config/cable.yml修改相應的設定

Built With

• Rails 5.2.1
• Authentication and OAuth: Devise, Omniauth Facebook, Omniauth Google Oauth2
• User Activity: Ahoy
• Editor: Ckeditor, Iframely
• Pagination: Kaminari
• Uploader: CarrierWave
• HTTP client and tools: REST Client
• Testing data: ffaker
• Social Share: Social Share Button
• Layout: Bootstrap 3, Bootswatch, D3.js
• Search: Ransack
• Schedule: Whenever
• HTML parser: Nokogiri
• Sanitize content: Sanitize
• Fake Issue Source
  • Wikipedia
  • Ari的學習心法
  • Pexels

Authors

Miki

Wendy

Yedda

xplorer's Issues

[Product Feedback] 文本需要過濾 JavaScript

如標題，以避免 XSS 攻擊。
範例： https://www.xplorer.gq/issues/916/edit

[Product Feedback] 已收藏議題更易於存取

對於使用者來說，註冊帳號最主要的目的除了發布之外，大概就是收藏喜歡的議題。
但目前使用者若是要看到收藏，必須先點擊個人檔案後、再點擊分頁才看得到，若能放在 navbar 之類的地方可能會更好。

直接以if clause的結果做variable assignment 去減少重覆的程式碼

if current_user
        if current_user.followingtopic?(topics[i])
          @map_topics.push({name: topics[i].name, base: topics[i].id, center: topics[i].id, from: topics[i].id, page: 0, strength: 200, status: 10})
        else
          @map_topics.push({name: topics[i].name, base: topics[i].id, center: topics[i].id, from: topics[i].id, page: 0, strength: 200, status: 4})
        end
      else
        @map_topics.push({name: topics[i].name, base: topics[i].id, center: topics[i].id, from: topics[i].id, page: 0, strength: 200, status: 8})
      end

可以改寫成

      status = if current_user
        if current_user.followingtopic?(topics[i])
          10
        else
          4
        end
      else
        8
      end
      @map_topics.push({name: topics[i].name, base: topics[i].id, center: topics[i].id, from: topics[i].id, page: 0, strength: 200, status: status})

讓if clause的影響更易懂，讀起來更清楚這段程式碼只控制status 這個變數

[Product Feedback] 查看留言應該優先於回覆留言

如下圖，當使用者遇到巢狀留言時，會先看到留言表單、才會看到巢狀內容，有點不符合使用情境。

避免在model 中使用UrlHelper

在Bookmark#notify，Comment#notify，Like#notify，Reply#notify 和 UserFollowship#notify 中都有使用Rails.application.routes.url_helpers.issue_path 這個method，但UrlHelper設計上是用來在View 中用來動態產生連結的，一般不會用來儲存在database

建議做法是先在NotificationsHelper建一個notifable_link(notification) method 以Notification#notifiable的class 判斷，產生相對的url，再在 notifications/_share_list.html.erb 中呼叫這個helper method來使用

多使用Array#map method 去減少程式碼

在TopicsController#fullmap 中的

    topics = []
    topics.push(Topic.where(name: "電腦").first)
    topics.push(Topic.where(name: "AI" ).first)
    topics.push(Topic.where(name: "大數據" ).first)
    topics.push(Topic.where(name: "藝術" ).first)
    topics.push(Topic.where(name: "生活" ).first)
    topics.push(Topic.where(name: "心理" ).first)
    topics.push(Topic.where(name: "科學" ).first)
    topics.push(Topic.where(name: "數學" ).first)
    topics.push(Topic.where(name: "區塊鏈" ).first)
    topics.push(Topic.where(name: "生物學" ).first)
    topics.push(Topic.where(name: "化學" ).first)
    topics.push(Topic.where(name: "物理" ).first)
    topics.push(Topic.where(name: "語言" ).first)
    topics.push(Topic.where(name: "文學" ).first)
    topics.push(Topic.where(name: "行銷" ).first)
    topics.push(Topic.where(name: "經濟" ).first)
    topics.push(Topic.where(name: "市場" ).first)
    topics.push(Topic.where(name: "設計" ).first)
    topics.push(Topic.where(name: "**學" ).first)
    topics.push(Topic.where(name: "藝術" ).first)

可以改寫成為

topics = %w(電腦 AI 大數據 藝術 生活 心理 科學 數學 區塊鏈 生物學 化學 物理 語言 文學 行銷 經濟 市場 設計 **學 藝術).map {|name| Topic.where(name: name).first}

避免在condition 使用or operator

and 和 or Logical Operator的Precedence是比 && 和 || 要低的，因此大部份情況下條件式中都只需要使用後者，前者一般是用來做flow control

在某些情況下的使用兩者可以導致不一樣的後果，如下

irb(main):001:0> true ? false : false || true
=> false
irb(main):002:0> true ? false : false or true
=> true

[product] 個人意見

Pro:

知識管理分享系統，可以是新型態的 blog / medieum 系統，對於需要找到新知或者對專業領域者會有很強烈需求

採用 mindmap 方式讓使用者可以得到更多關連性分類

具備 notification 讓使用者有互動時可以有提示效果

Cons:

Map 與底下標題列表，似乎沒有太大關連性，但實際上是希望可以推薦更多深入的內容給使用者，使用者向下滑動的時候，上面的 mindmap 就失去作用，會有點可惜花時間作的 mindmap link

大多採用 page reload / redirect 的方式，使用者互動效果降低，建議例如登入提示匡等，可以用 js bootstrap modal 來建立提示框登入。

避免在程式碼中直接使用non-ascii 字元

在TopicsController#fullmap 中有直接以中文字元作database query 的參數，建議以yaml 檔放在config directory𥚃面

使用Bitwise AND 去比較Boolean condition？

https://github.com/wu790616/xplorer/blob/master/app/controllers/topics_controller.rb#L101

 # User activity
    if((params[:from].to_i != 0)&(params[:from] != params[:center]))
      ahoy.track "XmapViewlog", {from: params[:from].to_i, to: params[:center].to_i, layer: @scale, progress: "init"}
    end

js file 類型，可以直接採用 assets 的靜態檔案方式提供

views/xxxxx.js.erb

這類的內容，實際上可以直接使用

<script src="/assets/javascripts/xxxxx.js"></script>

這樣的方式來做使用

瀏覽過的主題紀錄，點擊左側列表，會一直不斷重複增加

瀏覽過的主題紀錄，會一直不斷重複，