2016年12月25日 星期日

Package an Angular CLI Application into Electron

Package an Angular CLI Application into Electron | Bruno d'Auria

Electron Tutorial - YouTube

Packaging and distributing your electron/angular 2 desktop apps. - YouTube

electron-userland/electron-packager: Package and distribute your Electron app with OS-specific bundles (.app, .exe etc) via JS or CLI

使用 electron-packager 時可能會出現不知道 electron 版本的問題,在下指令時指定即可:

electron-packager dist --asar --platform=linux --arch=x64 --version=1.4.13

指令下在 angular-cli project 根目錄

先用 ng build 產出 dist 目錄(參數可省略)
 ng build --prod --aot=true -sm=false
--asar:保護原始碼不會被直接看到(需要安裝 asar :npm install -g asar)

--platform=win32 可編譯成 windows 的程式,不過要裝 wine 才可以

electron-userland/electron-builder: A complete solution to package and build a ready for distribution Electron app with “auto update” support out of the box

electron-builder 是另一套打包工具,不過我沒用過....

electron 官網文件:Documentation - Electron

electron type 定義檔:@types/electron


electron-forge  可以打包成 deb / rpm / zip ..... 等檔案格式

2016年12月19日 星期一

Libraries.io : 找 library 的一個好地方

Search for angular2 - Libraries.io

Search for angular 2 - Libraries.io

關鍵字分別是:angular2 與 angular 2

angular2-modal:不錯的 modal 套件,還有產生器可用

Angular2 modal demo application

shlomiassaf/angular2-modal: Angular2 Modal / Dialog window

其中 bootstrap plugin 還有產生器可用喔

HTML5 Drag and Drop file upload

一系列4篇文章:



Demo

Code

Create a MEAN app with Angular 2 and Docker Compose

Create a MEAN app with Angular 2 and Docker Compose | Scotch

重點在 docker 與 docker-compose ....

2016年12月18日 星期日

JavaScript — Observables Under The Hood

JavaScript — Observables Under The Hood

雖然後面的 code 看不太懂,不過前面的比喻還蠻貼切的,希望以後能完全看懂....

angular2 讀取 excel 資料表 part 2

上一篇

這次安裝 typescript wrapper,angular-cli.json 不用改了


1:  /* app.component.ts */  
2:    
3:  import { Component } from '@angular/core';  
4:    
5:  @Component({  
6:   selector: 'app-root',  
7:   templateUrl: './app.component.html',  
8:   styleUrls: ['./app.component.css']  
9:  })  
10:  export class AppComponent {  
11:    
12:   title = 'app works!';  
13:   dropzoneStyle: any = null;  
14:    
15:   reader: FileReader = new FileReader();  
16:   files: FileList = null;  
17:    
18:   workBook: IWorkBook = null;  
19:   workSheetNames: string[] = [];  
20:   workSheets: { [sheet: string]: IWorkSheet } = null;  
21:   currentWorkSheet: IWorkSheet = null;  
22:   currentData: any[]=[];  
23:    
24:   constructor() {  
25:    this.reader.onload = this.setReaderOnloadHandler();  
26:   }  
27:    
28:   /**  
29:    * drop event handler  
30:    *  
31:    * @param e  
32:    */  
33:   readFile(e: DragEvent): void {  
34:    e.stopPropagation();  
35:    e.preventDefault();  
36:    
37:    this.workBook = null;  
38:    this.workSheetNames = [];  
39:    this.workSheets = null;  
40:    this.currentWorkSheet = null;  
41:    this.currentData = [];  
42:    
43:    let files = e.dataTransfer.files;  
44:    this.files = files;  
45:    // console.log(e, files);  
46:    this.dropzoneStyle = {borderColor: 'green'};  
47:    
48:    // 取得第一個檔案  
49:    let file = files[0];  
50:    
51:    this.reader.readAsBinaryString(file);  
52:   }  
53:    
54:   /**  
55:    * dragover event handler  
56:    *  
57:    * @param e  
58:    */  
59:   onDragOver(e: DragEvent): void {  
60:    e.stopPropagation();  
61:    e.preventDefault();  
62:    
63:    this.dropzoneStyle = {borderColor: 'red'};  
64:   }  
65:    
66:   /**  
67:    * 回傳 FileReader onload handler  
68:    *  
69:    * @returns {()=>undefined}  
70:    */  
71:   private setReaderOnloadHandler() {  
72:    return () => {  
73:     let data = this.reader.result;  
74:     try {  
75:      this.workBook = read(data, {type: 'binary'});  
76:     } catch (err) {  
77:      console.log('檔案格式錯誤:', err);  
78:      return;  
79:     }  
80:     this.workSheetNames = this.workBook.SheetNames;  
81:     this.workSheets = this.workBook.Sheets;  
82:    }  
83:   }  
84:    
85:   /**  
86:    * 載入資料表內容  
87:    *  
88:    * @param sheetName  
89:    */  
90:   loadSheetData(sheetName: string): void {  
91:    this.currentWorkSheet = this.workSheets[sheetName];  
92:    
93:    /**  
94:     * header : 0 => 標題欄位名(內容)當 key 產生物件 => default  
95:     * header : 1 => 標題欄位名(內容)為第一個陣列,第二個陣列以後是資料,數字索引  
96:     * header : 'A' => 標題欄位名(字母)當 key 產生物件,第一個物件是標題欄位名(內容),第二個物件以後是資料  
97:     */  
98:    this.currentData = utils.sheet_to_json(this.currentWorkSheet, {header: 1});  
99:   }  
100:  }  
101:    
102:    
103:  /* app.component.html */  
104:    
105:  <div id="drop"  
106:   style="height: 200px;width: 300px;border: dashed gray 3px;"  
107:   [ngStyle]="dropzoneStyle"  
108:   (dragover)="onDragOver($event)"  
109:   (drop)="readFile($event)" >  
110:   Drop here....  
111:  </div>  
112:    
113:  資料表:  
114:  <ul>  
115:   <li *ngFor="let sheet of workSheetNames" (click)="loadSheetData(sheet)">{{ sheet }}</li>  
116:  </ul>  
117:    
118:  currentData  
119:  <div>  
120:   <div *ngFor="let row of currentData;let first = isFirst">  
121:    <span *ngFor="let cell of row">{{cell}}</span> |   
122:   </div>  
123:  </div>  
124:    
125:    

Typescript — Integrate jQuery Plugin in your Project

Typescript — Integrate jQuery Plugin in your Project – Medium

一個在 angular-cli 下新增自定義 type 的例子

Angular 2 — Take Advantage Of The exportAs Property

Angular 2 — Take Advantage Of The exportAs Property

雖然不太有機會自己寫 directive,不過很少看到 exportAs 的例子說....

exportAs ==> 將 instance export 給樣板參考變數

就像:

#f="ngForm"

Angular 2 : Deal with Different Form Controls Cheat Sheet

Angular 2 — Deal with Different Form Controls Cheat Sheet — Template vs Model

收下來參考

Persisting user authentication with BehaviorSubject in Angular

Persisting user authentication with BehaviorSubject in Angular

利用 BehaviorSubject 取得最近一次的值 或 初始值的特性,讓寫法簡潔許多。

最好將 Observable 利用 share(),避免多個 subscriber 時的問題。(文末有說明)

External JavaScript dependencies in Typescript and Angular 2

External JavaScript dependencies in Typescript and Angular 2 - Rick Strahl's Web Log

當使用的套件沒有 type 定義檔時真的很傷腦筋.....

文章中幾種方式可以嘗試看看

angular2 讀取 excel 資料表

SheetJS/js-xlsx: XLSX / XLSM / XLSB / XLS / SpreadsheetML (Excel Spreadsheet) / ODS parser and writer

@types/xlsx

Demo: JS-XLSX Live Demo

typescript wrapper:(還沒試過)

DxCx/ts-xlsx: A working XLSX Library for typescript (Rebuild of the original xlsx): https://github.com/SheetJS/js-xlsx/

drag and drop 參考資料:
康廷數位: HTML5 支援拖曳/置放(Drag and Drop)行為
HTML ondragover Event Attribute
HTML5 Drag Files into the Browser from the Desktop
How to Use HTML5 File Drag and Drop
Pro HTML5 Programming: Chapter 9 | Working with HTML5 Drag-and-Drop
HTML Drag and Drop API - Web APIs | MDN

ng2匯入外部函式庫的幾種方法:

External JavaScript dependencies in Typescript and Angular 2 - Rick Strahl's Web Log


安裝套件:

npm install xlsx --save
npm install @types/xlsx --save-dev

程式碼:

angular-cli.json

    "scripts": [  
     "../node_modules/xlsx/dist/ods.js",  
     "../node_modules/xlsx/dist/xlsx.full.min.js"  
    ]  

app.component.ts

1:  import { Component, ViewChild } from '@angular/core';  
2:  import { IWorkBook, IWorkSheet } from 'xlsx';  
3:    
4:  // declare var XLSX: any;  
5:  let XLSX = window['XLSX'];  
6:    
7:  @Component({  
8:   selector: 'app-root',  
9:   templateUrl: './app.component.html',  
10:   styleUrls: ['./app.component.css']  
11:  })  
12:  export class AppComponent {  
13:    
14:   title = 'app works!';  
15:   dropzoneStyle: any = null;  
16:   reader: FileReader = new FileReader();  
17:   files: FileList = null;  
18:   workBook: IWorkBook = null;  
19:   workSheetNames: string[] = [];  
20:   workSheets: { [sheet: string]: IWorkSheet } = null;  
21:   currentWorkSheet: IWorkSheet = null;  
22:   currentData: any[]=[];  
23:    
24:   constructor() {  
25:    this.reader.onload = this.setReaderOnloadHandler();  
26:   }  
27:    
28:   readFile(e: DragEvent) {  
29:    e.stopPropagation();  
30:    e.preventDefault();  
31:    let files = e.dataTransfer.files;  
32:    this.files = files;  
33:    console.log(e, files);  
34:    this.dropzoneStyle = {borderColor: 'green'};  
35:    
36:    // 取第一個檔  
37:    let file = files[0];  
38:    
39:    this.reader.readAsBinaryString(file);  
40:   }  
41:    
42:   onDragOver(e: DragEvent) {  
43:    e.stopPropagation();  
44:    e.preventDefault();  
45:    
46:    this.dropzoneStyle = {borderColor: 'red'};  
47:   }  
48:    
49:   private setReaderOnloadHandler() {  
50:    return () => {  
51:     let data = this.reader.result;  
52:     this.workBook = XLSX.read(data, {type: 'binary'});  
53:     this.workSheetNames = this.workBook.SheetNames;  
54:     this.workSheets = this.workBook.Sheets;  
55:     this.currentWorkSheet = this.workSheets[this.workSheetNames[0]];//this.workSheets['評量成績'];  
56:     /**  
57:      * header : 0 => 標題欄位名(內容)當 key 產生物件 => default  
58:      * header : 1 => 標題欄位名(內容)為第一個陣列,第二個陣列以後是資料,數字索引  
59:      * header : 'A' => 標題欄位名(字母)當 key 產生物件,第一個物件是標題欄位名(內容),第二個物件以後是資料  
60:      */  
61:     this.currentData = XLSX.utils.sheet_to_json(this.currentWorkSheet, {header: 1});;  
62:    }  
63:   }  
64:  }  
65:    










app.component.html

1:  <div id="drop"  
2:   style="height: 200px;width: 300px;border: dashed gray 3px;"  
3:   [ngStyle]="dropzoneStyle"  
4:   (dragover)="onDragOver($event)"  
5:   (drop)="readFile($event)" >  
6:   Drop here....  
7:  </div>  
8:  <hr />  
9:  files  
10:  <pre>{{files | json}}</pre>  
11:  <hr />  
12:  workBook  
13:  <pre>{{workBook | json}}</pre>  
14:  <hr />  
15:  workSheetNames  
16:  <pre>{{workSheetNames | json}}</pre>  
17:  <hr />  
18:  workSheets  
19:  <pre>{{workSheets | json}}</pre>  
20:  <hr />  
21:  currentWorkSheet  
22:  <pre>{{currentWorkSheet | json}}</pre>  
23:  <hr />  
24:  currentData  
25:  <pre>{{currentData | json}}</pre>  
26:    
27:    

2016年12月3日 星期六

Angular 2 Lifecycle Hooks

My Right To Code - Angular 2 Lifecycle Hooks

有一段短片可以觀察 lifecycle hook 的順序

  1. constructor
  2. OnChanges
  3. OnInit
  4. DoCheck
  5. AfterContentInit
  6. AfterContentChecked
  7. AfterViewInit
  8. AfterViewChecked
  9. OnDestroy
參考:


2016年11月27日 星期日

Angular 2 form fundamentals by Todd Motto

Angular 2 form fundamentals: template-driven forms

Angular 2 form fundamentals: reactive forms

Updating Angular 2 Forms with patchValue or setValue

Updating Angular 2 Forms with patchValue or setValue

patchValue 會忽略不存在的 formControl

setValue 則會報錯

兩者都可以 formGroup 、 formControl 呼叫,formGroup 的實作實際是 wrapper

Composing Reusable Modal Dialogs with Vue.js

Composing Reusable Modal Dialogs with Vue.js

值得參考的方法,不只是 vue 能用喔....

虛擬化 (Proxmox VE)本地與每天雲端空間備份方法

虛擬化 (Proxmox VE)本地與每天雲端空間備份方法 – OSSLab

雖然沒有真正用過 proxmox,先記下來再說囉....

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

[Angular2] 在每個Request加入自訂的Header資訊 - 程式宅急便

Angular2 Http Authentication Interceptor - illucIT Blog

ng2-http-wrapper

Angular 2, Http service wrapper to pass authorization token with each request.

Play with BaseRequestOptions in Angular2


在使用 token 時就有需要囉,沒有在 angular2 實作過,有機會再試試。

2016年11月24日 星期四

PHP 讓 json_encode() 指定回傳格式

PHP 讓 json_encode() 指定回傳格式 - Tsung's Blog

以 PHP 當作 api 時是以 json 格式將資料傳回前端,使用 json_encode 將資料轉成 json 格式,但是數字也會被轉成字串,可以在第二個參數傳入 JSON_NUMERIC_CHECK 解決,這樣前端就比較好處理啦。

2016年11月19日 星期六

PHP 回傳 json 時 header 的寫法

header('Content-Type: application/json; charset=utf-8');

資料來源:

回傳 JSON 記得送 header - Tsung's Blog

boolean 反相之 sql 語法

要將某筆紀錄的 boolean 欄位值反相,又不想先撈出該筆資料 (多一次查詢),sql 語法可以像這樣寫:

UPDATE todos SET done = NOT done WHERE id = 該筆紀錄的 id

讓 ubuntu 支援 exfat

手上有一張 64G 的 micro sd,檔案系統格式是 exfat,在 ubuntu 16.04 中預設不支援,輸入以下指令就可以囉:

sudo apt install exfat-utils exfat-fuse

2016年10月13日 星期四

[講座分享] Composer 從入門到實戰 (PHP 也有 Day #28)

[講座分享] Composer 從入門到實戰 (PHP 也有 Day #28) – Medium

示範原始碼

setup phinx config using php instead of yaml file.

env() helper functions without Laravel framework

Packagist Semver Checker - madewithlove


好東西,不收藏不行呀

其他:

Composer.json Schema CheatSheet - Dependency Manager for PHP

PHP 不能在 heredoc 中使用 static 變數的解法

將靜態變數存到另一個一般變數,在 heredoc 中使用一般變數即可,最好用大括號界定變數。另外還有一個 nowdoc,其作用與單引號包圍的字串相同,heredoc 作用同雙引號。



參考資料:

Build Angular 2 apps with TypeScript and Visual Studio Code

Youtube

簡報

johnpapa/angular2-tour-of-heroes @ github

John Papa 在 Microsoft Ignite 上的演講,想了解 Angular2 的可以看看

2016年10月1日 星期六

Rewrite rules for SPA

現在的 SPA 的 router 應該都支援 html5 pushstate, url 看起來就像一般的網址,可以當作書籤,看似方便,但我卻想到一個問題,如果直接輸入該 url 或開啟書籤,browser 應該會發出 request 到 web server,那 web server 會如何回應?我的想法是,正常來說應該是會經由 SPA 的網頁,假設是 index.html ,經由 SPA router 處理,例如:example.com 會載入 example.com/index.html ,此為 SPA 的入口,example.com/login 會由 SPA 的 router 載入相對應的 component,request 還是由 index.html 處理。但如果直接輸入 example.com/login ,一般的 web server 是否會直接處理這個 request,然後因為找不到人處理,所以報錯?

因為沒有實作過,所以不知道我的猜想是否正確。不過今天看到一些討論,看來我的猜想是對的,所以找了一些常見的 web server 的 rewrite rule 設定,有機會再來實作驗證看看。

for Apache and Nginx :




Creating Rewrite Rules for the URL Rewrite Module : The Official Microsoft IIS Site


angular2 可用(Apache,.htaccess ):
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule . index.html [L]

How to Setup Watchman on Ubuntu 16.04

執行 angular-cli 的 ng 指令時會出現以下訊息:
Could not start watchman; falling back to NodeWatcher for file system events.
Visit http://ember-cli.com/user-guide/#watchman for more info.
如果看不順眼,可以這樣做:

1:  git clone https://github.com/facebook/watchman.git  
2:  cd watchman/  
3:  git checkout v4.7.0  
4:  sudo apt-get install -y autoconf automake build-essential python-dev  
5:  ./autogen.sh   
6:  ./configure   
7:  make  
8:  sudo make install  
9:  watchman --version 


來源: How to Setup Watchman on Ubuntu 16.04

 Watchman 官網: Watchman | A file watching service

2016年9月29日 星期四

[ 筆記 ] 在 angular-cli 中使用 auth0-lock (2)

上一篇的方法雖然可以運作,可是解法其實蠻醜陋的,於是又研究了幾天,終於找到一個比較能接受的解法。

版本:

angular-cli : 1.0.0-beta.16

auth0-lock : 10.4.0

angular2-jwt : 0.1.23

-----------------------------------------------------------------------------

安裝套件:

npm install --save auth0-lock

npm install --save angular2-jwt

npm install --save-dev @types/auth0-lock

-----------------------------------------------------------------------------

設定 tsconfig.json :

加入 "allowSyntheticDefaultImports": true

-----------------------------------------------------------------------------

在 ts 檔中 

import Auth0Lock from 'auth0-lock'


參考資料:

[ 教學 ] building hacker news with angular 2 cli, rxjs and webpack

Building Hacker News with Angular 2 CLI, RxJS and Webpack

不錯的文章,解釋的算仔細,而且第一次看到遞迴使用 component 的用法。

2016年9月26日 星期一

[ 筆記 ] 在 angular-cli 中使用 auth0-lock (1)

Auth0官網教學文

官網教學文是使用 CDN 載入,想試著結合 angular-cli,用 bundle 的方式使用,就試了一下囉。

---------------------------------------------------------------

版本:

angular-cli : 1.0.0-beta15

auth0-lock : 10.3.0

angular2-jwt : 0.1.23

---------------------------------------------------------------

安裝套件:

npm install auth0-lock --save

npm install angular2-jwt --save

---------------------------------------------------------------

設定:

* angular-cli 專案資料夾下的 angular-cli.json 中 packages 陣列加入

"../node_modules/auth0-lock"
像這樣

 "packages": [
    "../node_modules/auth0-lock"
  ]

* app/auth.service.ts 加入(我是加在 import 之下):

let Auth0Lock = require('auth0-lock').default;

* Auth0 Dashboard,在 client 設定中設定 Allowed Origins (CORS),加入

http://localhost:4200

視實際狀況,網址可能不同,angular-cli default 是 4200 port


 ---------------------------------------------------------------

Sample Code:

2016年9月24日 星期六

javascript 產生連續數字的陣列

let a = Array(10).fill().map((value, index) => index + 1);

a 是一個 10 個元素的陣列,其值為 1 - 10

let a = Array(10).fill(5);

a 是一個 10 個元素的陣列,其值全部都是 5

2016年9月21日 星期三

[ 工具 ] 跨平台的 SQL Client:DBeaver

DBeaver | Free Universal SQL Client

跨平台的 SQL Client,支援多種資料庫系統。雖然有中文語系,不過是簡體中文,看不習慣就....換成英文吧。只要啟動時加上  -nl en 就好,可以考慮直接修改啟動捷徑。

Ubuntu 的啟動檔路徑:

/usr/share/applications/dbeaver.desktop



Exec=/usr/share/dbeaver/dbeaver

改成

Exec=/usr/share/dbeaver/dbeaver -nl en

[ 參考 ] 圖片裁切範例@Laravel

Laravel 5.2 - Image Crop and Edit Example

使用 Laravel 與 Jcorp 進行圖片裁切

[ 參考 ] MySQL 超新手入門

MySQL 超新手入門

參考參考

2016年9月18日 星期日

[ 筆記 ] angular 2 之 $event.stopPropagation()

下面是 angular.io 的一段程式碼範例:

1:   <li *ngFor="let hero of heroes" (click)="onSelect(hero)"  
2:     [class.selected]="hero === selectedHero">  
3:    <span class="badge">{{hero.id}}</span>  
4:    <span>{{hero.name}}</span>  
5:    <button class="delete"  
6:     (click)="delete(hero); $event.stopPropagation()">x</button>  
7:   </li>  

li 有個 click event,內層的 button 也有個 click event,為了防止按下內層的刪除按鈕的同時也觸發了外層 li 的 click event,所以加入 $event.stopPropagation() 以阻止 event bubble 的發生。

其他資料:

[IE][JavaScript] Bubble Event - StopPropagation | 當麻許 - 點部落

DOM 的事件傳遞機制:捕獲與冒泡 | TechBridge 技術共筆部落格 (推薦閱讀)

2016年9月11日 星期日

用前端技術開發桌面應用程式的框架

NW.js  vs  Electron

目前個人比較傾向於 electron,雖然都沒實際用過啦。網路上對於 nwjs 的評價似乎有不少坑,不過 nwjs 程式的進入點可以採用 html or js 檔是我比較喜歡的點,electron 只能用 js 檔。

2016年9月5日 星期一

2016年9月2日 星期五

zeal:離線文件查詢器

記性不好,寫程式時常常要查詢文件?試試 zeal 吧,還是跨平台的呦!


ubuntu 16.04 下安裝:
sudo apt update
sudo apt install zeal
安裝好之後要先下載離線文件檔:
File -> Options -> Docsets
在 PhpStorm 中,先安裝 plugin : Dash

JetBrains Plugin Repository :: Dash

預設快速鍵:
Ctrl + Shift + D
用法:

選擇要查詢的關鍵字,然後按快速鍵即可查詢

PS. zeal 是從下面的影片看來的

給 PHP 開發者的 Visual Studio Code 指南/給 PHP開發者的Visual Studio Code指南 | Community Open Camp 2016 | Channel 9

2016年8月31日 星期三

Build a Laravel Application with User Authentication

Build a Laravel Application with User Authentication

使用第三方服務,提供使用者註冊、驗證、密碼管理等功能,懶得自己來的可以參考看看,不過相關畫面的中文化可能要思考一下如何進行。

2016年8月20日 星期六

Solaar : Linux 下 Logitech Unifying Receiver 的管理工具

因為桌機滑鼠壞了,買了一個同樣使用 unifying receiver 的新滑鼠,但羅技並沒有提供支援 ubuntu 的配對工具,因為原來的接收器已有鍵盤配對使用,於是要把新滑鼠與舊的接收器配對。拜了一下谷先生,果然找到了!!


ubuntu 16.04 可直接從 apt 安裝:

sudo apt update
sudo apt install solaar solaar-gnome3

在啟動 solaar 之前,最好先把舊的接收器拔起重插。以下就看圖說故事囉!!













2016年8月16日 星期二

多重開機 USB 隨身碟設定檔

運用 syslinux 製作多重開機 usb,設定檔 在此

內含Clonezilla live (to ram)、 DRBL live (to ram) 與 Ubuntu 的設定

2016年8月13日 星期六

[ 參考 ] How to scale Laravel horizontally with Docker

How to scale Laravel horizontally with Docker — Medium

[ 參考 ] 用 Docker 建立 Laravel 的開發環境

艦長,你有事嗎?: 用 Docker 建立 Laravel 的開發環境

下面幾個可以試試:

mysql in docker 的一些『眉角』

今天臨時要用較新版本的 mysql server,又不想安裝在日常使用的機器,所以就想到用 docker 啦,可是在用 adminer 連線時卻一直連不上,所以就研究了一下,順便也解決預設編碼的問題囉。

docker 版本:1.12
mysql image:tag 5.7版,https://hub.docker.com/r/library/mysql/

需求:

  • 建立資料庫 demo
  • 建立 user 帳密 demo / demo,管理資料庫 demo
  • 本機 3306 port 對應至 container 3306 port
  • 將資料庫編碼由 latin1 更改為 utf8
  • 預設時區更改為 +8:00

Step 1:
建立 docker-mysqld.cnf(檔名可自訂),假設存放在 /home/user/docker-mysqld.cnf

[mysqld]
user = mysql
datadir = /var/lib/mysql
collation-server = utf8_unicode_ci
init-connect='SET NAMES utf8'
character-set-server = utf8
           default-time-zone = '+8:00'


utf8_unicode_ci 可換成 utf8_general_ci,我比較常用這兩種,laravel 我個人偏好 utf8_unicode_ci

Step 2:

docker run 啟動指令如下

docker run --name mysql \
   -p 3306:3306 \
   -v /home/user/docker-mysqld.cnf:/etc/mysql/conf.d/mysqld.cnf \
   -e MYSQL_ROOT_PASSWORD=12345678 \
   -e MYSQL_DATABASE=demo \
   -e MYSQL_USER=demo \
   -e MYSQL_PASSWORD=demo \
   -d mysql:5.7
如果要將資料庫保存下來,有幾種方式,比較簡單的作法步驟如下

  1. 建立資料夾,如:/home/user/db
  2. 啟動指令在 run 之後,mysql:5.7 之前加入 -v /home/user/db:/var/lib/mysql
Step 3:
在 host 用 adminer 連線時,用 localhost 會無法連線,請用 ip,127.0.0.1 或 docker host 端的 172.17.0.1 或 container 端的 ip 如 172.17.0.2


補充:

container 的操作可以用 chrome 應用程式 simple docker ui,GUI 喔


參考資料:

2016年7月28日 星期四

安裝 Linux 的筆電之電池續航力增加術

Re: [問題] 低耗電上網版本選擇? - 看板 Linux - 批踢踢實業坊

linrunner.de: TLP – Linux Advanced Power Management

PCMan 推薦,值得試試!!

我是安裝 Ubuntu 16.04

sudo apt update
sudo apt install tlp tlp-rdw

不錯的 Docker Swarm Mode 筆記

[TIL] Learning note about Docker Swarm Mode

不錯的 Docker Swarm Mode 筆記

[ 參考 ] ViewChild (VuewChildren) vs ContentChild (ContentChildren)、viewProviders vs providers

ViewChildren and ContentChildren in Angular 2 – Minko Gechev's blog

解釋了什麼是:

  • ViewChild
  • ViewChildren
  • ContentChild
  • ContentChildren
以及 viewProviders 與 providers 的差異

以下是概略的筆記:

view child 為 child component,child component tag 會出現在  parent component 的 template中

content child 出現在 component open tag 與 close tag 之間,在 component 的 template 中會以 ng-content 插入


ViewChild 和 ContentChild 是單數,只有一個

ViewChildren 和 ContentChildren 是複數,可以有多個

@ViewChild(TodoInputComponent) todoInput: TodoInputComponent;

@ViewChildren(TodoComponent) todoComponents: QueryList<TodoComponent>;

可以在 ngAfterOnViewInit 取得 this.todoInput 與 this.todoComponents 之值,其中 this.todoComponents 可以看作是 Observable

ContentChild 與 ContentChildren 可以在 ngAfterOnContentInit 取得值

viewProviders 宣告的 service 只有 view child(ren) 可以用,content child(ren) 無法使用

providers 宣告的 service 都可以用

2016年7月22日 星期五

[ 參考 ] Observables in angular2

Taking advantage of Observables in Angular 2

有個搜尋 wiki 的範例

Taking advantage of Observables in Angular 2 - Part 2

進一步重構搜尋 wiki 的範例

Exploring Rx Operators: map




The introduction to Reactive Programming you've been missing



ReactiveX

ReactiveX/rxjs: A reactive programming library for JavaScript ( RxJS 5 (beta) )

Reactive-Extensions/RxJS: The Reactive Extensions for JavaScript ( RxJS 4 )

RxJS Lessons - Screencast Video Tutorials @eggheadio

Introduction to Functional Reactive Programming with RxJS

RxMarbles: Interactive diagrams of Rx Observables

Reactive Programming 簡介與教學(以 RxJS 為例) | TechBridge 技術共筆部落格

[ 參考 ] ES6 你可能不知道的事

ES6 你可能不知道的事 - 基礎篇 | Taobao FED | 淘寶前端團隊

哇....好多都真的不知道呀....

[ 參考 ] angular2 的 routing

Routing Angular 2 Single Page Apps with the Component Router | Scotch

用一個簡單的範例講解 routing,包含 child routing 以及 guard

Routing in Angular 2 revisited

有用到 route 的 snapshot

Protecting Routes using Guards in Angular 2

說明三種 guard

The Amazing Angular 2 Router v3 by Gerard Sans

有不少範例可看喔

[ 參考 ] angular 2 rc4 的兩種 form

Using Angular 2』s Template-Driven Forms | Scotch

Template-Driven Form

Using Angular 2』s Model-Driven Forms with FormGroup and FormControl | Scotch

Model-Driven Form

Model-driven Forms in Angular 2

How to Build Nested Model-driven Forms in Angular 2

How to Deal with Different Form Controls in Angular 2 | Scotch

Bind RadioButton List in Angular 2

如何處理各種表單元素

How to implement custom validator (confirm password) in Angular2 RC.4 (template driven form) — Frontend Weekly — Medium

自定義驗證規則,以「確認兩次密碼是否相符」為例

Custom Form Controls in Angular 2

Angular 2: Connect your custom control to ngModel with Control Value Accessor.


2016年7月17日 星期日

[ 參考 ] 如何將自定義的 Pipe 設為全域的 Pipe

Create a Globally Available Custom Pipe in Angular 2 | Scotch

原本自定義的 Pipe 要在 Component 使用,必須在 @Component 加入 pipes 設定,如果有很多 Component 要用就很麻煩,可以在 bootstrap 時就先加入 DI,就可以像內建的 Pipe 直接用啦。

2016年7月10日 星期日

在 Ubuntu 16.04 使用 nvm 安裝 Node.js

參考:



sudo apt-get update
sudo apt-get install build-essential libssl-dev
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.31.2/install.sh | bash

搞定!重開終端機讓 path 生效。


查看可安裝的 Node.js 版本
nvm ls-remote

安裝指定版本
nvm install v6.2.2

查看已安裝版本
nvm ls

查看現在使用的 node 與 npm 版本
node -v
npm version

2016年7月5日 星期二

ubuntu 16.04 安裝新版 ubuntu-make

ubuntu-make 可以讓安裝 WebStorm、PhpStorm、Arduino IDE、Android Studio 等工具更方便,但 ubuntu 16.04 內建的版本似乎較舊,能安裝的東西較少,例如:WebStorm、PhpStorm 就沒有。

sudo apt-add-repository ppa:ubuntu-desktop/ubuntu-make
sudo apt update
sudo apt install ubuntu-make


查詢 ubuntu-make 版本:(目前使用版本為 16.05~xenial1)
apt search ubuntu-make

安裝 WebStorm:
umake ide webstorm

安裝 PhpStorm:
umake ide phpstorm

安裝 Visual Studio Code:
umake ide visual-studio-code

安裝 Arduino IDE:
umake ide arduino

安裝 Android Studio:
umake android android-studio --accept-license

安裝預設路徑:(以 WebStorm 為例)
~/.local/share/umake/ide/webstorm

更改安裝路徑:(以 Arduino IDE 為例,安裝到 /home/user/arduino)
umake ide arduino /home/user/arduino

ubuntu 16.04 用 apt 安裝 virtualbox 官方版

1、 /etc/apt/sources.list 加入:

deb http://download.virtualbox.org/virtualbox/debian xenial contrib

2、加入金鑰

wget -q https://www.virtualbox.org/download/oracle_vbox_2016.asc -O- | sudo apt-key add -

3、 sudo apt update

4、 sudo apt install virtualbox-5.0

2016年7月3日 星期日

2016年6月25日 星期六

解決 ubuntu 16.04 字型檢視程式無法啟動

今天將家裡桌機升上 ubuntu 16.04,結果要裝字型時發現預設的字型檢視程式無法啟動,找了一下出問題的不只我一個呀,Font Manager Fails in Ubuntu 16.04 - Ask Ubuntu

由這個 PPA 安裝 font-manager:

sudo add-apt-repository ppa:font-manager/staging

sudo apt update

sudo apt install font-manager


補充:
原字型檢視程式的指令是 gnome-font-viewer,
.desktop 是 /usr/share/applications/org.gnome.font-viewer.desktop

新安裝的是 org.gnome.FontManager.desktop 與 org.gnome.FontViewer.desktop

2016年6月24日 星期五

angular-cli 執行 ng serve 錯誤之解法

angular-cli 是個方便開發 angular2 應用的工具,不過最近執行如 ng serve 指令時都會出現如下圖的錯誤。



解法:

npm install glob --save-dev


希望這個問題官方能趕快修正掉啊....

2016年6月6日 星期一

[ 參考 ] 用 Arduino + ESP8266做 WiFi 遙控車

參考資料:



目前使用的主要元件:
電源部份:
  • 18650 充電電池 * 2
  • 供電給 L298P,再由 L298P 供電給 UNO
遙控部份:
  • 網頁
  • Android APP

2016年6月5日 星期日

App Inventor 2 啟用多點觸控

App Inventor 2 預設似乎並不支援多點觸控,最近試做的功能需要同時操作兩個 Canvas,就需要多點觸控,找了一下,方法還滿簡單的,只是有些『眉角』要注意....

使用工具:Windows 限定,需要有 JRE,下載解壓縮,執行 runMeWindows_v40.bat
apptomarket 網上論壇
AppToMarket 下載
AiLiveComplete! - Browse Files at SourceForge.net => 最新版

參考資料:
[GUIDE] I will show you how to have multitouch with App Inventor 2
<uses-sdk> | Android Developers

設定 Certiticate Details:
基本上隨便填,設定一次即可,除非要改設定。
如果要相容 App Inventor 的 keystore,參考:
Making your keystore compatible with App Inventor

修改步驟:

  1. 從 App Inventor 下載 apk 到電腦
  2. 切換到 2> De/Re compile and wrap-up
  3. 按 Browse 找到下載的 apk
  4. 按 1> Decompile
  5. Features 中設定 Min SDK Ver 為 4,Target SDK Ver 為 11,其他視需要設定(這個步驟似乎沒有正確加入設定,須手動加入)
  6. 按 2> Update Manifest
  7. 按 3> Edit Manifest,加入:參考<uses-sdk> | Android Developers
    <uses-sdk android:minSdkVersion="5" android:targetSdkVersion="11" />
  8. 按 Save 再按 Close
  9. 按 3> Create New .apk,會產生 _new.apk 檔
  10. 按 4> Sign
  11. 按 5> Verify
  12. 按 6> Zip Align,產生 _new_zipAlign.apk 檔,用這個檔安裝

收工啦!!

2016年4月29日 星期五

[ 參考 ] Don’t use hidden attribute with AngularJS 2

Don’t use hidden attribute with AngularJS 2

hidden 是 HTML5 新增的屬性,瀏覽器會對指定了 hidden 屬性的元素附加 display: none; 的樣式以隱藏元素。但如果針對同類元素(例如: p)設定了 display: flex; ,則會失去隱藏的效果。文章裡提供了幾種解決方案。

2016年4月8日 星期五

[ 範例 ] Role Based Authentication in Laravel with JWT

Role Based Authentication in Laravel with JWT

使用 JWT 搭配 Entrust + jwt-auth 實現角色 / 權限控管

example source code

[ 參考 ] angular2 component lifecycle hook 之 DoCheck 與 OnChanges

Fine grained change detection with Angular 2

OnChanges 如果觀察的 input 是物件,則只有更換新物件(參考變更)才會執行,只變更物件 property 不會執行,此時要改用 DoCheck

----------------------------------------------------------------

其他參考資料:

Angular 2 Change Detection Explained

[ 參考 ] 用 Angular 2 和 Immutable.js 實做踩地雷遊戲

How to build Minesweeper using Angular 2 and Immutable.js

How I optimized Minesweeper using Angular 2 and Immutable.js to make it insanely fast

第一篇是原來的實做,第二篇是最佳化 view re-render 的過程,程式碼有些更動,建議兩篇都看才完整喔。

--------------------------------------------------------------------------------------
其他參考資料:

ANGULAR, IMMUTABILITY AND ENCAPSULATION

[ 參考 ] 簡明RESTful API設計要點

簡明RESTful API設計要點

不錯的參考資料,尤其是 HTTP 狀態碼的說明值得參考

2016年3月27日 星期日

為 PhpStorm 或 WebStorm 加入 angular2 live template

Angular 2 Style Guide WebStorm Live Templates

使用 PhpStorm 2016.1 版為例,OS 為 Ubuntu

到 這裡,點 RAW 按鈕然後複製,存為 Angular2-StyleGuide-LiveTemplates.xml,存放到:

~/.PhpStorm2016.1/config/templates

若 PhpStorm 已開啟則重新開啟即可。

不同作業系統的路徑可從 這裡 查到

2016年3月13日 星期日

[ 參考 ] 利用 email 實做無密碼登入 in Laravel

Creating a password-less, Medium-style, email-only authentication system in Laravel

基本上就是利用 email 當作身份證明啦,文章中改造 Laravel 內建的註冊與認證機制。

流程:

輸入 email -> 收信 -> 點連結 -> 完成登入

2016年3月8日 星期二

[ 參考 ] Emulated or Native Shadow DOM in Angular 2 with ViewEncapsulation

Emulated or Native Shadow DOM in Angular 2 with ViewEncapsulation

有詳細解說與範例

ViewEncapsulation.Emulated
global:繼承
component 內的:不會 override global
預設模式

ViewEncapsulation.Native
global:不繼承
component 內的:不會 override global
即 shadow dom

ViewEncapsulation.None
global:繼承
component 內的:會 override global

相關參考資料:
Web Components and concepts, ShadowDOM, imports, templates, custom elements

2016年2月13日 星期六

javascript 中,變數前的 「+」號

最近看到一段程式碼(angular2):

getHero(id: number | string) {
    return heroesPromise
      .then(heroes => heroes.filter(h => h.id === +id)[0]);
  }

對於 h.id === +id 之中的 +id 覺得奇怪,查了一下,原來可以用來轉成數字啊!!

id 其型別可能為數字或字串, h.id 為數字,用了 === 進行比較,所以要轉型呀。


後來在 angular2 官網文件看到了這一段話:

All route parameters are strings. The (+) in front of the routeParameters.get expression is a JavaScript trick to convert the string to an integer.


參考資料:
https://angular.io/docs/ts/latest/guide/router.html
http://stackoverflow.com/questions/6682997/javascript-plus-symbol-before-variable
https://en.wikibooks.org/wiki/JavaScript/Operators

2016年2月12日 星期五

關於 @Injectable()

當一個 service 自己也有 DI 的需求時就要加入 @Injectable()

angular 2 官方的文件也有提到,不管 service 需不需要 DI,最好都加入  @Injectable():

  1. 以後需要 DI 時避免忘記加入 @Injectable()
  2. 一致性

ngFor 可用的變數

<div *ngFor="#item of items; #i = index; #isOdd = odd; #isEven = even; #isLast = last">
.......略過 item 的部份......
索引:{{ i }}
是否為奇數索引:{{ isOdd }} <br>
是否為偶數索引:{{ isEven }} <br>
是否為後一個元素:{{ isLast }}
</div>

index 為索引值,從 0 開始

odd 索引值是否為奇數,布林值

even 索引值是否為偶數,布林值

last 是否為最後一個元素,布林值

2016年2月7日 星期日

[ 參考 ]Variable and Function Hoisting in JavaScript

Variable and Function Hoisting in JavaScript
粗談hoisting...
JavaScript Hoisting Explained ==> 文章只有提到變數的部份,不過影片也有提到 function 的部份

結論:

對於變數,最好是先宣告再使用

對於 function,對於

var a = function () {}; 或 var a = function myfunc() {};

也是先宣告比較好;對於

function myfunc(){}

這種形式的就沒差啦

這一篇也可以看看:

定義 JavaScript 函數(Functions)的各種方式

20170119 新增:

Understanding Hoisting in JavaScript | Scotch

2016年2月3日 星期三

Enable angular2 to production mode

angular 2 預設是 development mode,要如何切換到 production mode?在 browser console 中有提示:

Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode.

假設 angular 2 application 是由 bootstrap.js 啟動,則在 bootstrap.ts 中:

import {enableProdMode} from "angular2/core";

然後在執行 bootstrap() 之前執行 enableProdMode() 即可,如:

enableProdMode();
bootstrap(MyApp);

PS: 撰寫本文時使用的版本是 2.0.0-beta.2

參考資料:
stackoverflow.com

Angular-CLI:官方的 angular2 application 產生器

GitHub

需要先安裝 nodejs 4 以上版本

可快速產生 angular 2 application 鷹架,包含測試,也可以產生其他元件的鷹架,包含:

  • Component
  • Directive
  • Pipe
  • Service

相關指令 github 上可以查到

雷與解法:


ng serve 會開啟 development server,會偵測檔案變化執行編譯與live reload,在 Linux 上是利用 inotify watcher 進行檔案變動之偵測,所需資源可能超過系統限制而無法執行:




解決方法是將限制改大一些:

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

上述指令是將限制設為 512K,只要做一次即可,我的 OS 是 ubuntu 15.10 x64,預設值 8K


查詢目前限制大小: