2017年8月26日 星期六

[部落格移轉]

因目前自己做筆記都習慣用 VS Code + markdown 格式來寫了
但Blogger一直都不支援MD 因實在不想做兩次工
所以決定將 Blog 移轉至 https://kyleap.github.io/ 囉 ~~

2016年11月19日 星期六

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

前言

在專案啟動時,我習慣直接將多國語系考慮進去,不然到時老闆一句話要Support時又要將所有程式改動挺麻煩的,在Angular2有一個整合i18n的模組叫做ng2-translate ,本篇文章就來說明如何將它加入專案中。

如何建立範本請參考 [Angular2] 建立專案範本

 

NPM安裝

$ npm install ng2-translate –save
or
$ yarn add ng2-translate

 

模組Import

Angular2 變成模組化開發後載入第三方函示庫不外乎就是 NPM安裝=>找你的模組匯入,此範例我們打開app.module.ts

螢幕快照 2016-11-20 上午10.30.29

這樣就會載入transModule,此設定翻譯檔預設會抓網站底下的i18n目錄,如果你要自訂翻譯檔的路徑可以改由以下設定:

@NgModule({
    imports: [
        BrowserModule,
        HttpModule,
        TranslateModule.forRoot({
            provide: TranslateLoader,
            useFactory: (http: Http) => new TranslateStaticLoader(http, '/assets/i18n', '.json'),
            deps: [Http] 
        })
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

 

語言設定

接著打開根元件app.conponent.ts,使用TranslateService並設定語言

螢幕快照 2016-11-20 上午10.52.16

 

定義翻譯檔

開發階段src為網站目錄,我們在src資料夾底下增加i18,並增加en.json & zh.json

en.json

{
    "HelloTrans": "Learing ng2-translate!"
}

zh.json

{
    "HelloTrans": "實作多國語系!"
}

 

使用翻譯檔

Html 要抓取翻譯檔定義需改由以下寫法


<div>
    {{ 'HelloTrans' | translate }}
</div>

而在.ts要抓取翻譯檔定義則需要使用Service

translate.get('HelloTrans').subscribe((val: string) => {
     console.log('HelloTrans',val);
});

 

切換語系

而切換語系也很簡單,我們在html加入兩個按鈕

<button class="btn btn-primary" (click)="changeLang('en')">切換語系至English</button>
<button class="btn btn-primary" (click)="changeLang('zh')">切換語系至中文</button>

在app.component.ts增加changeLang這個method

changLang(langKey){
     this.translate.use(langKey);
}

這樣就可以完成語系切換,而當使用者重新整理網頁時要怎麼維持當前語系呢? 通常我會使用localStorage來處理,譬如在app.conponent.ts底下改成如下:

螢幕快照 2016-11-20 上午11.07.24

 

後記

使用多國語系一點也不複雜,而且因為是使用Angular2開發,如果您有在寫ionic2 要在App做多國語系也是差不多的步驟~

而.json檔通常是給專業的翻譯,這部分可以找一些線上工具,將excel樣板提供給翻譯人員完成,之後再將excel檔轉成json檔,後續也較好維護。

至於i18n的語系代碼可參考 http://www.science.co.il/Language/Codes.php

--

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

2016年11月10日 星期四

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

前言

接觸angular後其實真的很少寫jQuery,但很多時候拿到的html版可能是UI設計師所提供的,或者是花錢買的樣板,所以免不了要用jQuery寫入一些效果,本篇就簡單介紹一些如何在angular-cli專案加入第三方的.js .css.

如何建立範本請參考 [Angular2] 建立專案範本

webpack

angular2是個模組化的開發方式,透過angular-cli所建置的專案已改由system.js改由webpack,以往要在angular2專案加入webpack,你必需要去了解webpack的建置環境,這對於一個全端工程師來說是個很焦慮的事XD,因為webpack要懂得的東西還真的不少,好在angular-cli已幫我們整合好,只要懂得用他的指令即可,而angular-cli相關webpack設定檔都至於node_modules底下,而webpack本身還有許多額外的套件,如果要增加的話不建議直接改node_modules這些設定檔,可在專案底下加入會比較彈性一點。

螢幕快照 2016-11-11 下午1.08.32

angular.cli.json

webpack會將我們相依的程式及模組打包成一隻.js減少request,而以下就介紹如何在專案下加入jQuery及bootstrap

先用yarn將jQuery及bootstrap安裝回來

# yarm是完全相依npm的套件管理工具,執行上比npm快非常多,可參考此篇文章

$ yarn add jQuery bootstrap

package.json

螢幕快照 2016-11-11 下午1.20.48

在angular.cli.json 加入路徑

"styles": [
           "styles.css",
           "../node_modules/bootstrap/dist/css/bootstrap.min.css"
       ],
       "scripts": [
           "../node_modules/jquery/dist/jquery.min.js"
],

接著我們app.component.html加入一個bootstrap的Button (強烈建議編輯器要安裝snippet套件快速開發)

螢幕快照 2016-11-11 下午1.31.47

ng serve 啟動本機伺服器 可以看到已套用bootstrap

螢幕快照 2016-11-11 下午1.34.46

接著在app.component.ts加入jQuery試試

螢幕快照 2016-11-11 下午1.36.38

這時你會發現 $ 字號有毛毛蟲 這是因為Typescript是強行別的開發方式,檢查會變得較為嚴謹,任何開發尚未定義的變數都會在編譯時期就出錯。

而要讓Typescript看得懂 $ 字號為jQuery其實只要宣告一下就好了:

declare var $:any;

TypeScript With jQuery

而宣告成any還不夠帥,且每支檔案都要宣告一次還挺麻煩的,我們可以將此宣告移到一個全域的地方,
並且載入Typescript的jQuery設定檔定義檔,讓開發起來更順手
安裝jQuery Typescript定義檔:
$ yarn add @types/jquery
找到src/tsconfig.js,有關Typescript的設定都會在這檔案,加入types

"types": [
         "jquery"
     ]

接著回到app.componet.ts,會看到有關jQuery語法都開始會有智慧提示功能 (VS Code Rock!!)

螢幕快照 2016-11-11 下午1.50.22

在執行一次ng serve,即可看到jQuery正常執行

螢幕快照 2016-11-11 下午1.52.03

原則上Typescript用第三方函示庫就要有相對應的.d.ts定義檔,如果該函示庫如果沒有定義檔也可以自行製作一個

可參考保哥的教學影片 https://www.youtube.com/watch?v=_9fUQus6EqQ

或者是可以考慮在src/typings.d.ts進行全域的宣告也可

--

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

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

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 的標籤: ,,,