About

kevinbird61 & ToolBuddy

kevinbird61

• 研究主軸 -
  Programmable data plane 架構
   

• 對土砲很有興趣！

  • 復刻憤怒鳥、皇室戰爭
     

• 以製作順手的小工具為樂！

About

• 學習後分享，發現不足後繼續學習的良性循環出發

• 成大許多課程的不足：
  實作太少、缺乏實際演練 (看著虛擬碼止渴)

• 將修過的所有課程都記錄自己的思路，並實作有趣、有難度的程式碼來學習 !

• 自行開發專案、學習 Tutorial 撰寫都很歡迎！
   

利用一己之力來慢慢改變周遭的環境吧！

About

ToolBuddy

LuisHsu

Daniel Chen

yih6208 (李庭宇)

Yung-Sheng Lu

About

ToolBuddy Partners

Join us!

Why              ?

先看張圖吧！[原文連結]

• 從前端擴展到後端，
  跳脫瀏覽器上運行的限制
   

• 能像一般程式的開發

  • gtop - htop 的 Node.js 版本

  • Electron - 桌面應用開發

  • Meteor - Web APP 打包

涵蓋廣！

Fig. - gtop

• 比起 C/C++ 開發，
  Node.js 擁有大量的模組！
   

• npm package
  大大加速程式開發的進程！

快速！

雖然在 Rust、GoLang 等語言的崛起

Node.js 在某些方面的宰制力已經不及以往

Server

System

還是要對           

我曾用              做過的應用......

• 以 Server 居多 - 當初從架設 Server 開始學習 Node.js

  • 自製皇室戰爭的及時連線

  • 專案需要的 APP 後端 (mongoos, esequelize, etc.)

  • 專題使用的一般網站架設

  • 共通點：真的很快可以完成！

  • 缺點：單執行序的侷限

• 應用工具

  • 成大學生會門禁系統

  • docoGen

  • papoGen

• 手機 APP - by Meteor

對此我覺得             定位應屬於

所以今天為大家帶來......

現有許多工具，為何要土炮？

透過實作學習！

這也是今天來傳教分享的目的

• 是我第一個以 Node.js 開發的工具

• 以做出一個能夠簡單撰寫論文的工具為出發

• 挑選 LaTeX 格式作為後端

• 以 Markdown / JSON 格式為輸入

• 透過簡單的格式撰寫後，生成看似很專業 README

• 後來轉變為一般專案內的說明文件使用

docoGen

About

• 找上了同學，趁他很閒的時候 拉他入坑 XD

• 有了編寫同一種文檔格式，同時產生網站、文件 (PDF) 的想法

• 於是乎請他幫忙處理 靜態網頁的生成！

Modularize

docoGen

docoGen WebUI

目前支援 8 種型態

none, text, list, table, formula, code, figure, restful-api

產生靜態網頁！

Fig. - docoGen WebUI 頁面

可任意擺放！

• 只要指定 Project 根目錄 即可！docoGen 會蒐集根目錄下的
  所有 script file 來合併產生目標檔案！
   

• 相對路徑 的處理！
  e.g., 圖片、程式碼檔案

標記式

• 生成的順序由 Priority 指定
   

• 透過 "content" -> "type" 
  指定 8 種不同的型態
   

• 依格式編輯 "data" 的內容

Markdown

• 嘗試透過更直覺的方法產生
   

• 採用 Markdown 格式輸入
   

• 比起 JSON 有可讀性更好、
  且更好撰寫！

於專案內使用

• 課堂作業是最好的宣傳！
   
• 直接展示
  如何在自己的專案內
  使用 docoGen！

產生 LaTeX 文件的 DEMO

• IEEEtran

• Proc

• Report

• Article

• 從 Markdown 轉換的結果

每次嘗試......

LaTeX

MD Parser

模組使用

papoGen

About

1. 使用者編寫好資料

2. 透過 papoGen 指令 給予生成參數

3. papoGen 依據參數處理

   • 提取版型 (doc, resume) 及 CSS 資源

   • 將資源 (圖檔、程式碼檔案) 複製到目的地

   • 生成網頁程式碼並儲存

Workflow

• 目前提供二種模版： doc 與 resume
   

• 參考原始碼中 lib/template 下的 *.pug 檔案
   

• 允許自行新增模板

  • 在 lib/template 下新增 <template name>.pug

  • 依照格式自行撰寫模板
     

• 利用 pug 可以分檔的特性，大幅上升模板的可讀性！

Template

• 目前使用 PaperCSS 作為 CSS 樣式
   

• 未來將支援 更多不同的 CSS 樣式！

  • 透過 pug 可依據想要的 CSS 來實作模板！

  • e.g., custom tag name, class name.

CSS

• 嘗試使用 JSON 與 YAML 作為文檔格式
  • 並規劃從 Markdown 轉換的支援
• 目前支援 8 種格式
  • e.g., card, code, formula, hyper, image, list, table, text.

• papoGen 提供 透過指令產生範例模板

• 使用者編輯後再 透過指令生成目標網站

文檔格式

指令支援

Step 1. - 使用者透過指令產生腳本

Step 2. - 開啟檔案編輯

Step 3. - 運行指令產生網頁

Step 4. - 查看結果！

• 透過套件 markdown-it 支援，轉換最麻煩的部份（ 覆蓋 markdown 語法 ）

• 轉換成 html 字串後，插入到已設計好的 pug  template 中

• 更方便寫！也更適合教材、markdown blog 的實作！

Markdown Support

Demo - md-doc

未來 & 結語

• 論文 citation 爬蟲
• 主要 porting 原本 python 的版本到 js 上，提供使用者另一種選擇來使用!

• 實驗室網站的 framework，並以 moodle 的功能設計來做開發。
• 未來希望可以提供一套順手的課程網站、實驗室網站給學校使用

ScholarJS

About

WeboGen

About

也有紀錄學習內容

除此之外......

• 課程中草率的證明、多數答案都是由 "結果" 推原因

  • 圖形理論在選課名單上被列為玄學

• 找了許多資源，在吸收並了解後撰寫教學

• 樂於分享！

• 透過 Python 來操作網路模擬環境的建置

• 學習好用的工具！

• 紀錄學習的步伐，提供其他有興趣的同好使用

Graph Theory

Mininet

如果你有相同想法

歡迎加入我們

或是想來玩？