[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
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 定義檔.

    /// <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>之後

    <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 、 bootstap 、 jqueryui)之後.

    <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

怎麼建立一個網站?(三) - 簡單讓網站升級使用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 。

(fin)

參考

匯入文字資料到MSSQL

前置作業

  1. 一個有權限寫入的MSSQLServer與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 到你的本機上.
    > git clone https://github.com/username/username.github.io
  3. 建立一個靜態網頁 index.html , 隨便打點什麼。
    <!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
  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
      branche: 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: https://hexo.io/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的domian,
    必須指定公用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)