[KATA] 用 TypeScript 作一個簡易的 TodoList (一) - 前置作業

目標

  1. 使用 typescript 開發
  2. 顯示/新增/刪除 TodoList

功能分析

  1. 只是練習,故不開發 server side 的程式
  2. 暫時存在 cookie 上
  3. 用 bootstrap 作簡單的樣式

實作記錄

UI : 使用 Bootstrap 沒有必要重新打造輪子,能用的就拿來用

  • 找到一個 TodoList 的樣版,內含 HTML 、 CSS 與 JS ,功能完整.
  • 取用樣版的 HTML.
  • 引用 bootstrap 3.3.5 CDN 上的 css .
  • 建立一個 todo.css 直接引用樣版的 css 並加入頁面參考.

開發環境

  1. 安裝 typescript
    npm install typescript --save
  2. 安裝 gulp
    npm install gulp
    npm install --global gulp
  3. 安裝 gulp-typescript
    npm install gulp-typescript
  4. 建立 gulpfile.js
1
2
3
4
5
6
7
8
var gulp = require("gulp");
var tsc = require("gulp-typescript");
gulp.task("default", function () {
return gulp
.src("public/javascripts/**/*.ts")
.pipe(tsc())
.pipe(gulp.dest("public/javascripts/"));
});

Typescript

  1. 關於 typescript 的定義檔, 以前有 tsd 與 typings 兩種管理工具,現在可以更簡便的合併到 npm 作管理 .

  2. 透過 TypeSearch 可以找到 bootstrap 的 typescript 定義檔.

  3. 執行 npm install --save @types/bootstrap 安裝 bootstrap (目前的版本是 Bootstrap 3.3.5) , 因為相依於 jquery 所以也會一併安裝

  4. 安裝 jquery-ui 的定義檔
    npm install --save @types/jqueryui

  5. 新增檔案 todo.ts ,將 樣版 的 javascript 複製貼上 .
    *註:因為 typescript 是 javascript 的 superset , 完全可以相容原生 javascript, 如果有任何錯誤, TypeScript 將會提示你

  6. todo.ts 引用 jquery 、jquery-ui 與 bootstrap 的 typescript 定義檔.

    1
    2
    3
    /// <reference path="../../../node_modules/@types/jquery/index.d.ts" /> ///
    <reference path="../../../node_modules/@types/bootstrap/index.d.ts" /> ///
    <reference path="../../../node_modules/@types/jqueryui/index.d.ts" />
  7. 頁面載入對應的 js 檔,記得放置順序 jquery 要在最前面,並將放在<\body>之後

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <script
    src="http://code.jquery.com/jquery-2.2.4.min.js"
    integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
    crossorigin="anonymous"
    ></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script
    src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
    integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
    crossorigin="anonymous"
    ></script>
  8. 執行 gulp ,會產生 todo.js

  9. 頁面載入 js 檔,記得要放在相依的 js( jquery 、 bootstrap 、 jqueryui)之後.

1
<script type="text/javascript" src="/javascripts/kata/todo.js"></script>

截至目前為止,僅僅是在作複製樣版,同時一併處理一些基本 gulp 與 typescript 相關的配置
接下來才要開始寫 typescript

(待續)

參考

  1. 關於 TypeScript 2.0 之後的模組定義檔 ( Declaration Files ) ( *.d.ts )
  2. bootsnipp
  3. TYPESCRIPT + EXPRESS + NODE.JS

(fin)

[實作筆記] 怎麼建立一個網站?(三) - 簡單讓網站升級使用HTTP/2

應該知道的事

  • HTTP/1.1 是目前被應用得最廣泛的通訊協定,也可以說是最成功的一個
    • HTTP/1.1 基於 TCP,需要三方交握。
    • HTTP/1.1 本身存在得需多問題,安全性、效率等…。
  • HTTP/2 可以有效改善 HTTP/1.1 的缺點,而且可以向下相容
    • 主流的瀏覽器都開始支援了。
    • 只要設定好 Web Server,Client 端看使用的瀏覽器支不支援
  • 一流公司制定標準,二流作品牌,三流賣技術,四流作產品
    • HTTP/2 是源自 Google 的 SPDY。
    • Google 下一代 QUIC 推動中。
  • HTTP/2 並不強制加密(HTTPS)
    • 在主流瀏覽器為了向下相容,保留了 80 port 的 HTTP/1.1 通訊協定,用 443 port 實作 HTTP/2。
    • 所以還是要走 HTTPS,所以需要安全性憑証。
    • 安全性憑証要錢(現在也有免費的)。
    • cloudflare提供免費的安全性憑証。

前置作業

  1. 你要有cloudflare帳號。
  2. 看過我之網站的設定,簡單說就是一個 github page 與 透過 OpenShift 這個 PaaS 服務建立的網站。

配置

  1. cloudflare 設定 DNS,在指定的 domain 下,設定為「DNS and HTTP Proxy(CDN)」。
    設定為「DNS and HTTP Proxy(CDN)」
  2. 設定 Page-Rules,這個是為了開啟 SSL 1. 設定SSLFlexible,輸入*.username.com/*
    這個時候你就可以瀏覽https://blog.username.com/,但同時也可以瀏覽http://blog.username.com/
    我希望 HTTP 能自動跳轉 HTTPS,這部份如果是 Node 建立的網站,我可以用程式作轉導,
    但是如果是 github page 建立網站,就要再仰賴 cloudflare 了。
  3. 設定 Page-Rules,這個是為了開啟 SSL 1. 設定ALWAYS USE HTTPS,輸入http://*.username.com/*
    設定為「DNS and HTTP Proxy(CDN)」

設定完大致如下,順利的話幾分鐘就生效了。
生效

這時候瀏覽 http://blog.username.com/ 就會轉導到 https://blog.username.com/ 了 。

檢驗

使用 support HTTP/2 的瀏覽器,瀏覽網頁,觀察其 protocol 。
HTTP/2

系列文章

參考

(fin)

[工作筆記] 匯入文字資料到 MsSQL

前置作業

  1. 一個有權限寫入的 MsSQL Server 與 SSMS 管理工具
  2. 準備好你的檔案資料(Row Data)
  3. 這份記錄僅供參考(DB版本使用Microsoft SQL Server 2014)

步驟記錄

  1. 開啟 SSMS,連線測試 SQL Server
  2. 對測試資料庫右鍵>工作>匯入資料,開啟「SQL Server 匯入匯出精靈」
  3. 「開始畫面」> 下一步
  4. 「資料來源」選擇一般檔案來源,「檔案名稱」選取 Row Data 的檔案路徑
  5. 請依實際狀況選擇下列欄位
    • 「略過的標頭資料列數」: 預設為0,可透過設定此欄位略過 Row Data 內含註解,標頭等資料
    • 「第一個資料列的資料行名稱」:若Row Data第一行為標頭,請勾選此欄位
    • 左側選單選擇「資料行」>「資料列分隔符號」選擇「{CR}{LF}」、「資料行分隔符號」選擇「Tab鍵{t}」
  6. 左側選單選擇「預覽」確認匯入的資料無誤後,點擊下一步
  7. 「目的地」請選擇「SqlServer」,設定ConnectionString
    • Data Source=1**...;Initial Catalog=TestDB;Persist Security Info=True;User ID=tester;Password=*****;
  8. 「選取來源資料表和檢視畫面」確認無誤後,點擊下一步。
  9. 「檢閱資料類型對應畫面」請忽略資料類型的警告,點擊下一步。
  10. 「執行封裝畫面」勾選「立即執行」,點擊下一步。
  11. 「完成精靈畫面」點選完成。
  12. 執行時間長短,依Row Data大小而有所差異。

(fin)

[實作筆記] 怎麼建立一個網站?(二) - 簡單用github page 建立靜態網站

前置作業

  • 你要有一個 GitHub 帳號

建立 github page

如果不排斥看原文,可以直接參考

  1. 建立一個 Repository , 並且命名為 username.github.io , 這裡的 username 請使用你的 GitHub 帳號的 username.

  2. clone username.github.io 到你的本機上.

    1
    git clone https://github.com/username/username.github.io
  3. 建立一個靜態網頁 index.html , 隨便打點什麼。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">
    <html>
    <head>
    <title>Hello world</title>
    </head>
    <body>
    <h1>Hello world</h1>
    <p>This is my github page</p>
    </body>
    </html>
  4. commit 之後,push 到 github 上 > git add –all > git commit -m “Initial commit” > git push -u origin master

  5. 瀏覽 http://username.github.io 即完成

使用自訂的 Domain

  1. 首先準備好一個 domain ex: username.xyz
  2. 需要在根目錄底下,放入一個 CName file
    檔案的內容只需要你的 domain 即可
    ex:
    blog.username.xyz
    username.xyz
    username.xyz
  3. 在 Name Servers (例如cloudflare)上設定 CNAME 到 github page,
    blog.username.xyz 綁定到 username.github.io
    ex:
TYPE NAME VALUE TTL
CName * username.xyz auto
CName blog username.github.io auto

更多請參考「購買網域到設定 DNS」.

透過 Hexo 部署

Hexo 基本概念可以參考官方中文文件 .

  1. 重點在於 _config.yml 的設定
    deploy:
    type: git
    repository: https://github.com/username/username.github.io
    branch: master

  2. 執行 hexo d 進行部署,這個動作會將 hexo 建立出來的靜態網站(html+css+javascript+圖片等…)部署到 github page 上。

系列文章

(fin)

如何讓 Google Analytics 追踪你的 Hexo Blog

前置作業

  1. 你要有 google 帳號,並申請好你的 google_analytics ID
  2. 這個記錄僅針對 Hexo 預設的 Theme 有作用,未來有改 Theme 的話,可能會需要手動加入,再寫文章補上

開啟_config.yml

  1. 確定一下你是使用預設的 theme landscape ## Themes
    theme: landscape
  2. 開啟 root/themes/landscape/_config.yml
  3. 找到以下的設定區段 # Miscellaneous
    google_analytics:
  4. 填入步驟 1. 中所取得 google_analytics ID
  5. 部署網站,完成!

(fin)

[實作筆記] 怎麼建立一個網站?(一) - 購買網域到設定DNS

前置作業

  1. 準備好你的 google 帳號。
  2. 可以連到美國的 VPN。google domain beta 台灣尚未開放
  3. 準備一張信用卡,狠狠的刷下去(挑對 domain 其實很便宜啦)
  4. 你的網站,什麼語言都可以,靜態的網頁也可以。
    *這裡我事先準備好了兩個網站,
    分別是用github pagenodejsexpress,實作有機會再作記錄。

設定 domain

  1. Github page 所建立的網站,會提供一組 domain 給你
    ex:myDomain.github.io

  2. OpenShift 建立的網站,一樣會提供一組 domain 給你
    ex:myDomain.rhcloud.com

  3. google domain 本身有提供 Name servers , 但是由於 typeA 的 Domain,
    必須指定公用 ip(家中有裝 HiNet ADSL 可以申請一組);但實際上我的兩個網站,並不需要我準備實體 IP,
    只需要使用 type CName 將我的 subdomain 指向原本服務的 domain 即可。
    ex:

    • blog.myDomain.me → myDomain.github.io
    • www.myDomain.me → myDomain.rhcloud.com
  4. github page 要注意的事情,

你需要在你的 github page 的 repo root 加入一個名叫CName的檔案,
檔案的內容很簡單, 只需要你的 domain 即可
ex:
blog.myDomain.me
myDomain.me

Bare CName

大多數的時候, CName 的設定就夠了;不過對於我來說,
我會希望可以直接使用我的頂級 domain,畢竟這樣網址可以更短一些,
myDomain.mewww.myDomain.me 更有感覺。

這裡受限於 google 的 Name servers , 頂級 domain 必為 TypeA須綁定 ip
這裡我們可以使用一個免費的服務cloudflare,來達成目的

  1. 註冊cloudflare

  2. 登入後add site,輸入你註冊的 domain
    ex:myDomain

  3. cloudflare 會提供你至少兩組 Name servers
    ex:
    carter.ns.cloudflare.com
    tina.ns.cloudflare.com

  4. 請先登入google domain beta設定 Name servers 到cloudflare

  5. 請依以下步驟設定

    • * → myDomain.me
    • blog.myDomain.me → myDomain.github.io
    • www.myDomain.me → myDomain.rhcloud.com
  6. 等待約數分鐘就 ok 啦

結語

前前後後查資料弄了一個禮拜,但是實際上設定大概 1~2 小時就搞定了。
對 domain 跟 ip 的相對關係與實務結合後更有體會了。

歡迎指教討論。

系列文章

(fin)

Please enable JavaScript to view the LikeCoin. :P