2016年10月15日 星期六

[Angular2] 在每個Request加入自訂的Header資訊

前言

開發架構都偏向後端是個REST API，而要做到身分驗證必須要走OAuth協定，而我們系統採用的是 Bearer Token ，Client 像 Server 端取得Access Token後，只要在Header加入Key 為 Authorization的格式，就能判斷該Request的登入身分，而這個 Header的Value 會長這樣 

Bearer XXXXXXXX
而在Angular2如何在每次像API發送Request的時候怎麼夾帶這個資訊呢?
範本安裝請參考 : http://kyleap.blogspot.tw/2016/10/angular2.html
== 前端版號很重要 ==

angular-cli: 1.0.0-beta.17
node: 6.6.0
angular : 2.0.0

== 前端版號很重要 ==

1. 於app目錄加入app.request.ts，並加入以下程式

 

螢幕快照 2016-10-15 下午5.14.07

自訂的AppRequestOptions繼承(extends)BaseRequestOptions Class，並執行底層Class的建構(super())，而如有登入過通常我會將OAuth所回傳的Token資訊存在localStorage，故判斷如果有資料的話則在Headers加入Authorization。

2. 於app.module.ts 注入app.reqequest

螢幕快照 2016-10-15 下午5.33.00

螢幕快照 2016-10-15 下午5.37.07

http模組加入RequestOptions及匯入剛剛的app.request.ts及於App Module注入即可

接著打開瀏覽器開發工具，就可以看到http發送Request後就可以看到Header多了Authorization

螢幕快照 2016-10-15 下午5.44.54

後記

這個方法可以很容易的帶入我們要的Header資訊，而還有另一個方式是自訂一個Http Provider，有機會再寫另一篇分享

本次範例程式 : https://github.com/kyleap/angular-learn-sample

--

References

https://angular.io/docs/ts/latest/api/http/index/BaseRequestOptions-class.html

 

 

 
 
 
張貼者： 於 沒有留言:
標籤：

2016年9月28日 星期三

[Angular2] 建立專案範本

前言

身為一個全端工程師，除了網站前後端外，在專案上開始也有開發App的需求，在過去我們團隊使用Angular來撰寫前端程式，後端採用ASP.NET Web API，而App我們使用Cordova搭配ionic 。但專案進入維護期，有新人也加入了，但因為Angular學習曲線有點太高，導致會不太好上手，且專案一大，因為是使用JavaScript開發，如果對於JavaScript特性不太熟悉，很容易掉入地獄裡面。在今年評估Angular2後，決定狠下心從將Angular1重構成Angular2專案，因為是搭配TypeScript來開發，搭配編輯器的功能，讓有些錯誤可以在編譯時期，且編輯器自動完成功能讓開發起來更加順手，對於TypeScript有種相間恨晚的感覺，應該在Angular1時間就使用TypeScript來撰寫會比較順手。

Angular2學習曲線我認為也不低，複雜在於"開發環境"，他將自己定位成平台，所以整合很多的open source技術進來，但就一個團隊新人來講，開發環境並不是首要去了解的，很多事情都定義成腳本，只要會使用就可以。就程式撰寫上，Angular2的學習曲線我覺得大大的降低，且因為官方就訂了很多程式開發標準.建議，讓使用Agnular2開發的人都有一致的開發風格，這也是後來在github看別人專案也能很快看懂的原因。

目前(2016年)也已經進入正式版，這篇文章算是一個開始，我陸續想將開發上所撰寫的功能及採到的地雷，整理成一篇一篇的小筆記，而不免俗的來Hello Word一下，讓之後demo的Sample Code都以此篇的專案範本來撰寫。

建立Angular2專案範本

使用前請安裝Node.js 會一併安裝NPM

可以用指令確認版本

螢幕快照 2016-10-08 下午9.46.40

透過NPM安裝 Angular-cli

npm install –g angular-cli

ng –v 確認版本

螢幕快照 2016-10-08 下午9.48.16

ng new mydemo 建立專案
cd mydemo 進入資料夾
ng serve 啟動本機localserver

用瀏覽器開啟http://localhost:4200/

如果有出現app work!畫面代表成功。

--

本篇利用Angular-cli很簡單的建立範本讓之後的文章做參考，

建議可以參考 Angular2官網手把手接學  照步驟做完應該就會開發了XD

也可以參考保哥的文章，整理很多Angular2觀念及延伸學習資源

文章索引連結(陸續新增)

Angular 2

[Angular2] 在每個Request加入自訂的Header資訊

[Angular2] 在angular-cli專案加入第三方套件-以jQuery.Bootstrap為例

[Angular2] 在專案加入多國語系

 

Ionic 2

張貼者： 於 2 則留言:
標籤：

2016年1月7日 星期四

[Web API] 在 Swagger UI 送出Http Header資訊

Swagger

之前開發Web API，都是透過Chome Postman來測試API，測試無誤後，將他儲存Collections再匯出給其他同事繼續開發前端部分，但前陣子發現Swagger這個好物，可以將註解直接變成文件，且可以直接在介面發送Request，查看Response，真的省了不少時間，至於怎麼在VS安裝使用，有很多前輩都分享了：

KingKong Bruce記事 - ASP.NET WEB API 文件產生器(2) – SWAGGER

mrkt 的程式學習筆記 - ASP.NET Web API 文mrkt 的程式學習筆記件產生器 - 使用 Swagger

但在開發App通常我會在Header加入Token來驗證是否有存取API的權限，但發現Swagger無法在UI直接加入我要傳入的Header資訊。

b64347a88e264b6383b9d05e0ef9ee56

沒有這欄位，只好硬幹了，以下就依步驟紀錄一下

首先先在你的ASP.NET網站底下加入一個scripts (當然存放位置可以依你而定)，在這個js上點右鍵，建置動作改成內嵌資源

45276f387cbe488aa218e0106e5d3121

接著找到App_Start\SwaggerConfig.cs底下，找到181行，取消註解 c.InjectJavaScript

將字串改為你的專案名稱及存放的Namespace

b9a21869aed84e1c97cea378f6c5ba75

Swagger預設已經掛載jQuery，所以我們在swagger-header.js寫些程式

右上角有個api_key的欄位，此欄位的用途在於調用API的時候自動幫你帶api_key這個參數

a7602f2645a340539e15aace6d6e2143

這個我們用不到，所以我們在js寫個程式把它隱藏，然後插入兩個DOM: Header Name跟Header Value的textbox

7760e2a4cd52476a984e81b27da9bce2

畫面就會變這樣:

1c341f6896804aa2bd49f17593cb3c9d

接著我們將這兩個textbox change的時候，透過Swagger的API加入Header資訊

d08e8a91839c474f87a751922409c38d

這樣再發送Request的時候就會看到Header的值：

1ec69a5aaa4c4d01aed6f33f94e5737d

可以用Chome的開發者工具至Network查看

12770befe8824361949bb9fffe381b6b

知道怎麼用jQuery去改UI，就可以依你的需求去調整硬幹了~

--

References :

http://stevemichelotti.com/customize-authentication-header-in-swaggerui-using-swashbuckle/

張貼者： 於 沒有留言:

2015年10月25日 星期日

Cordova 環境安裝 (OSX)

安裝Node.js

https://nodejs.org/en/

於terminal輸入 node -v 確認版本

於App Store 安裝XCode，安裝IOS開發環境

安裝JAVA SDK

https://support.apple.com/downloads/#java

於terminal輸入javac –version 確認版本

安裝Apache Ant

安裝 Homebrew

http://brew.sh/

terminal

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

brew install ant 透過brew安裝ant

於terminal輸入 ant –version確認版本

安裝Android SDK Tools

http://developer.android.com/intl/zh-tw/sdk/index.html#Other

進入bash_profile設定

cd
nano .bashrc

依照路徑指定platform-tools及tools位置

export PATH=/Users/username/android/sdk/platform-tools:/Users/username/android/sdk/tools:$PATH

輸入CTRL+O . CTRL+X 儲存

nano .bash_profile 確認export是否正確

terminal

adb version  確認版本

android 開啟 Android SDK Manager

安裝packges

測試Cordova

cordova create MyApp

cd MyApp

cordova platform add android (或ios)

cordova build android (或ios)

cordova run android (或ios)

 

Technorati 的標籤: ,,,
張貼者： 於 沒有留言:
標籤：

2015年10月24日 星期六

Cordova 環境安裝 (Windows)

如果你是.NET開發人員，慣於習慣使用Visual Studio開發，那2015版本已經將Cordova整合在裡面，安裝Apache Corodva Tools則可將Cordova所需的環境安裝完成，預設是不會安裝的，故在安裝VS的時候需額外勾選

Visual Studio 2015 Community下載

https://www.visualstudio.com/zh-tw/products/visual-studio-community-vs.aspx

9a2914a584874e0f86dc913ad6cd45d3

如果你不是.NET開發人員，在開發Cordova前，需先依序安裝以下環境：

安裝Node.js

https://nodejs.org/en/

安裝完後，可於命令提示字元輸入 node – -v 確認版本

0a4e04010d0e480fb39bece08f5ebff5

安裝git client

http://git-scm.com/

安裝完後，可於命令提示字元輸入 git –version 確認版本

a70aed640a684e46a408e2ec59023613

透過NPM安裝Cordova套件

NPM會於安裝Node.js一併安裝

npm install -g cordova

cordova -v 確認版本

24cccd560f8a49d1a4f90965b678f624

安裝 Java JDK

http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

49a032edea164c118779ff79178c646e

設定環境變數PATH

設定JDK安裝路徑，加於分號之後
;C:\Program Files\Java\jdk1.8.0_65\bin

398d2319bbbe4daea0b0e1173e32cefa

新增環境變數JAVA_HOME

C:\Program Files\Java\jdk1.8.0_65

ced72524563c4ec6b5c418932f12392c

確認JAVA版本

javac –version

d572b3faef9c43009f8e789770e55943

安裝 Apache Ant

http://ant.apache.org/bindownload.cgi

Ant是Android的編譯程式，他為開發Andorid的必要環境

下載.zip檔，並解壓縮，此例為放置C:\ant的位置

設定PATH環境變數，一樣新增於分號後面

C:\ant\apache-ant-1.9.6\bin

f8cdcaa9359c42cbb5af017cb451b130

新增ANT_HOME環境變數

C:\ant\apache-ant-1.9.6

2c6efd116fb84cfd82f50646c8a57705

確認版本

cfdace1681a34766b9fa81afc3882cc0

安裝 Android SDK Tools

http://developer.android.com/intl/zh-tw/sdk/index.html#Other

設定Android Path環境變數

;[SDK Tools位置];[SDK platform-tools位置]

範例：

;C:\Program Files (x86)\Android\android-sdk\tools;C:\Program Files (x86)\Android\android-sdk\platform-tools

輸入 adb version 確認版本

30a2bc2d09b940dda01aa6a3678bcfa3

輸入android 後應會跳出SDK Manager，將建議安裝的Packges安裝完成

3b322800422842f6a561f72d13f13a00

測試Cordova

在命令提示字元依序輸入，確認是否能執行模擬器

cordova create MyApp

cd MyApp

cordova platform add android

cordova build

cordova run android

af06b1f08d8e4ed79d05801dff8fc184

張貼者： 於 沒有留言:
標籤： , ,

2015年8月14日 星期五

用filesaver.js 輕鬆將html table的資料匯出成Excel

過去有關Excel的匯出我都是用NPOI套件來撰寫，之前也有寫過類似的文章:

[鐵人30天]當ASP.NET MVC 遇見 Angular.js MVC 客戶管理系統(23) – NPOI匯出功能

但看到同事有使用filesaver.js這個套件來做匯出，個人覺得蠻方便的，就來分享一下

唯一有個限制，因為是用Html5的Blob來實現的，所以較舊的瀏覽器不支援

而有些版本只要再加載Blob.js也可正常運作

c85eee520a2e43589c3188a35b6ed0da

資訊來自 filesaver.js Github

官網已經有Demo示範匯出 png . txt . xhtml 的類型，以下就來實作實務上很常見的匯出table raw data

首頁Github整個clone下來會發現filesaver.min.js這個檔案，將這個檔案載入到你的網頁

e7a4119874a646ff9c98b135453ca671

接著我們寫個html假資料，並加個匯出按鈕，當然實際上你的資料來源可能是後端提供而來

ed9c7e3d3ce34582b205dcdc3784598e

22927ec38a9544ea871d38fcf1ce6978

接著我們用jQuery button click的時候，將tbData這個div底下的資料匯出

$(function () {
    $('Button').click(function () {
        var blob = new Blob([document.getElementById('tbData').innerHTML], {
            type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"
        });
        var strFile = "Report.xls";
        saveAs(blob, strFile);
        return false;
    });
});

這樣就可以很方便的匯出資料了!


780e1092f82642c59ffae31dead7beb5


Technorati 的標籤: ,,,
張貼者： 於 2 則留言:
標籤： , , ,

2015年8月13日 星期四

Visual Studio 2015 的localDB

好久沒更新部落格…近半年已無時間跟體力在文章上，但依然遇到一些問題還是有做一些未經整理的筆記，有時間再一一補上來分享….

今年依然是個技術大爆發的一年，前陣子將開發環境重新安裝成 Win 10 + Visual Studio 2015後，原本在2013 Run的專案，SQL Server是用本機的localDB，但用VS 2015開已經連不上，至於什麼是localDB呢？可以看看保哥這篇文章:

再以往使用localdb你的連線字串可能看起來會是這樣：

<add name="ConnectionString" connectionString="Data Source=(localdb)\v11.0;Initial Catalog=DataBaseName;Persist Security Info=True;MultipleActiveResultSets=True;Application Name=EntityFramework" providerName="System.Data.SqlClient" />


再VS 2015 開始有了新的命名方式，必須改用 (localdb)\MSSQLLocalDB 來取代

<add name="ConnectionString" connectionString="Data Source=(localdb)\MSSQLLocalDB;Initial Catalog=DataBaseName;Persist Security Info=True;MultipleActiveResultSets=True;Application Name=EntityFramework" providerName="System.Data.SqlClient" />


當然，如果還是要用舊的執行個體，也可以下載安裝：


https://msdn.microsoft.com/zh-tw/sqlserver2014express.aspx


--


一點小筆記...

張貼者： 於 沒有留言:
標籤： , ,
訂閱： 文章 (Atom)