kerkerj

Again, and again

Sun, 22 Feb 2026 00:00:00 +0800

過了這麼多年又來整理一下了，有了 AI 幫忙真的是省了好多時間
包含要把失效連結整理一下、format metadata 等
甚至是直接幫忙做整篇文章的摘要
都不用自己來了
現在也越來越多 AI 自己寫的文了
目前看到多數是會標「本文由 AI 撰寫」
不過我想大概再過一陣子後，就會特別標「此文由人類撰寫」了吧
之後的世界到底會長什麼呢

How to Setup Slack and Drone Slack Blame

Sun, 22 Nov 2020 23:24:20 +0800

Slack now has deprecated legacy tokens, instead, Slack encourages us to create Slack Apps to do our job, so I created a note to record how I set up Slack app and use it on drone-slack-blame plugin.

Create a app: https://api.slack.com/apps?new_app=1
Add features and functionality

Edit App display name
Go to OAuth & Permission, then edit the scope of bots:

What I need is to make Drone (drone-slack-blame) to notify the users with the build status, and send messages to channels as well, so I need users:read permission to map Github users and Slack users (you can set mapping in drone-slack-blame section in drone.yml), and Drone Bot requires chat:write to send private messages, and chat:write:public to send messages to public channels.
Install App to workspace

then you should see Bot User OAuth Access Token is present.
Now you can use the token in Drone, here is the example of my drone setting:

Remember to set user mappings, first argument is your GitHub name, and the second one is Slack display name. You can check more in the source code.
How it works?

The image below is for private messages:

And it sends message to a public channel as well:

Last but not least, you can check https://api.slack.com/apps/ to configure your Slack app, I have to say that Slack administration pages are like a huge maze… it always takes me some time to find out what I want.

Use Zap Observer

Sun, 22 Nov 2020 23:03:48 +0800

If you are using zap as your logging tool, then when you write the tests, you might want to assert the function via the logs. You can use zap/observer package to make it possible.

Below is a code piece to demonstrate how it works:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30


package main

import (
	"testing"

	"go.uber.org/zap"
	"go.uber.org/zap/zapcore"
	"go.uber.org/zap/zaptest/observer"
)

func LogHello(name string) {
	zap.L().Info("hello: " + name)
}

func TestLogHello(t *testing.T) {
	// arrange
	core, recordedLogs := observer.New(zapcore.InfoLevel)
	zap.ReplaceGlobals(zap.New(core))

	// act
	LogHello("Jerry")

	// assert
	gotLog := recordedLogs.All()[0].Message
	if gotLog != "hello: Jerry" {
		t.Errorf("LogHello(\"Jerry\") = %s; want: `hello: Jerry`", gotLog)
	}

	t.Logf("%+v\n", recordedLogs.All())
}

goplayground url: https://play.golang.org/p/7olsFLGF6aZ

Google Cloud - ML Study Jam

Mon, 20 May 2019 23:23:20 +0800

參加了 Google Cloud 的 Basic ML Study Jam，紀錄一下

這邊的 lab 在按下 start lab 後，最好在無痕模式開啟 gcloud console，並且在結束 lab 後登出該 console，避免和下一個撞。

Predict Taxi Fare with a BigQuery ML Forecasting Model

url: https://google.qwiklabs.com/focuses/1797?parent=catalog

Google Cloud Speech API: Qwik Start

Url: https://google.qwiklabs.com/focuses/588?parent=catalog

call API XD 會幫你辨識語音，輸出辨識結果。

Speech to Text Transcription with the Cloud Speech API

Url: https://google.qwiklabs.com/focuses/2187?parent=catalog

call API XD 和上一個 lab 有一部分任務重複，並另外丟一個法文的語音讓 speech API 辨識。

Translate Text with the Cloud Translation API

Url: https://google.qwiklabs.com/focuses/697?parent=catalog

call API XD 給定文字，指定要翻譯成哪種語言，讓 Google 幫你翻譯；或是給定各種語言，讓 Google 幫你偵測是哪種語言。

kubectx

Mon, 20 May 2019 22:23:45 +0800

最近在學習 k8s（lag 好久）

好用工具：https://github.com/ahmetb/kubectx

自己用到的情境是，會有多個 kube config，因此會先用 KUBECONFIG 這個環境變數預先定義好，例如：

1
2
3
4
5


# ~/.zshrc
export KUBECONFIG=~/.kube/config-prod:~/.kube/config-staging

# or merge into one file:
# KUBECONFIG=~/.kube/this-config:~/.kube/other-config kubectl config view --flatten > ~/.kube/config

使用 kubectx 後就可以多選（使用 fzf 更方便 :D）

Go pprof

Tue, 21 Aug 2018 16:12:37 +0800

簡單筆記一下會用到的 pprof 相關指令

Prepare

使用 net/http/pprof 提供的 routes 來 profiling

1

import _ "net/http/pprof"

用 gin 的話可以直接用這個 lib https://github.com/gin-contrib/pprof

可以的話盡量不要讓 pprof routes 暴露在外面，看是聽另一個 port 或是限制 routing，都只給內網存取。

Profiling

幾個常見的 profile 指令列於下方

Memory profiling - heap profile

1

$ go tool pprof http://ip:port/debug/pprof/heap

CPU profiling - 30-second CPU profile

1
2
3


$ go tool pprof http://ip:port/debug/pprof/profile
(pprof) top10
(pprof) web

或是直接存取 http://ip:port/debug/pprof/profile，預設 30 秒後會提供檔案下載。

Collect a 5-second execution trace

1

$ wget http://ip:port/debug/pprof/trace?seconds=5

go-torch

使用 go-torch 來產生火焰圖，但如果是 go 1.10 之後已經內建可以看火焰圖，就不需要這個了

1

$ go-torch --url=http://ip:port/debug/ --suffix=/debug/pprof/profile --seconds 60 --file torch.svg

go execution tracer

1
2


$ curl http://ip:port/debug/pprof/trace?seconds=30 > trace.out
$ go tool trace trace.out

如果是要找出跑得比較慢的函式，或是找出大部分的 CPU 時間花在什麼地方，用 pprof；execution tracer 則適合拿來追蹤函式的流程，或是分析 race condition 之類資源搶奪的問題。

補充一下之前 Dave Cheney 分享的 workshop

https://github.com/davecheney/understanding-the-execution-tracer

ProxySQL + Percona XtraDB Cluster Using Docker

Fri, 20 Jul 2018 00:00:00 +0800

GitHub:

Percona Xtradb Cluster https://github.com/percona/percona-xtradb-cluster
Proxysql https://github.com/sysown/proxysql
proxsysql-admin-tool https://github.com/percona/proxysql-admin-tool
percona dockers https://github.com/percona/percona-docker

參考：

Adding Galera Support

https://www.percona.com/doc/percona-xtradb-cluster/LATEST/howtos/proxysql.html

1
2
3


Admin> INSERT INTO scheduler(id,active,interval_ms,filename,arg1,arg2,arg3,arg4,arg5)
 VALUES (1,'1','10000','/usr/bin/proxysql_galera_checker','1','2','0','1',
 '/var/lib/proxysql/proxysql_galera_checker.log');

Argument	Name	Required	Description
`arg1`	`HOSTGROUP WRITERS`	YES	The ID of the hostgroup with nodes that will server writes.
`arg2`	`HOSTGROUP READERS`	NO	The ID of the hostgroup with nodes that will server reads.
`arg3`	`NUMBER WRITERS`	NO	Maximum number of the node from the writer hostgroup that can be marked `ONLINE`. If set to `0`, all nodes can be marked `ONLINE`.
`arg4`	`WRITERS ARE READERS`	NO	If set to `1` (default), `ONLINE` nodes in the writer hostgroup will prefer not to be `ONLINE` in the reader `hostgroup`.
`arg5`	`LOG FILE`	NO	File where node state checks and changes are logged to (verbose).

1
2
3


Admin> LOAD SCHEDULER TO RUNTIME;
Admin> SELECT * FROM runtime_scheduler\G
Admin> SELECT hostgroup_id,hostname,port,status FROM mysql_servers;

新增 proxysql -> mysql 的使用者

1
2
3
4
5


mysql@pxc > CREATE USER 'proxyuser'@'%' IDENTIFIED BY 'proxypass';
mysql@pxc > GRANT ALL ON *.* TO 'proxyuser'@'%';

mysql@proxysql> INSERT INTO mysql_users (username,password) VALUES ('proxyuser','proxypass');
mysql@proxysql> LOAD MYSQL USERS TO RUNTIME; SAVE MYSQL USERS TO DISK;

PMM (Percona Monitoring and Management)

ref:

安裝 server (docker)：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


$ docker create \
 -v /opt/prometheus/data \
 -v /opt/consul-data \
 -v /var/lib/mysql \
 -v /var/lib/grafana \
 --name pmm-data \
 percona/pmm-server:1.1.1 /bin/true
$ docker run -d \
 -p 80:80 \
 --volumes-from pmm-data \
 --name pmm-server \
 --restart always \
 percona/pmm-server:1.1.1

安裝 client：

1
2


$ wget https://www.percona.com/downloads/pmm/1.12.0/binary/debian/jessie/x86_64/pmm-client_1.12.0-1.jessie_amd64.deb \
 && dpkg -i pmm-client_1.12.0-1.jessie_amd64.deb

設定 client：

1
2
3
4
5
6
7
8
9


$ pmm-admin config --server {PMM IP} --bind-address {client IP} --client-address {client IP}
OK, PMM server is alive.

PMM Server | {PMM IP}
Client Name | {client hostname}
Client Address | {client IP}

# 設定 mysql
$ pmm-admin add mysql --user root --password xxx --host 127.0.0.1 --port 3306

接著就可以連上 PMM 看各種數據。

note: 想知道 container 的 ip 可以透過此指令來找到

1

$ docker inspect {container id} | grep IPAddress

Grafana dashboard

https://github.com/percona/grafana-dashboards/blob/master/dashboards/ProxySQL_Overview.json

Mysql status

除非有連線，不然 status 不會自動改

舉例：將 proxysql 開起來，pxc 沒有開，此時 runtime_mysql_servers 的 status 都還是 ONLINE

但透過 mysql client 試著連進去，會 timeout，此時 runtime_mysql_servers 的 status 就會是 SHUNNED

centos 開機順序

舊版的會吃 /etc/rc.local，但其實是相容模式，背後還是透過 systemd 處理

若要在 rc.local 執行前啟動 docker 的話，則要在編輯 service 檔案

https://fedoramagazine.org/systemd-unit-dependencies-and-order/

1
2
3
4
5


$ systemctl edit --full rc-local
Wants=docker.service
After=network.target docker.service

# 檢查 /etc/systemd/system/rc-local.service

??? 在 After 加入 docker.service，這樣就會在開機啟動時，執行 rc.local 前啟動 docker.service

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


[root@proxysql ~]# sestatus
SELinux status: enabled
SELinuxfs mount: /sys/fs/selinux
SELinux root directory: /etc/selinux
Loaded policy name: targeted
Current mode: enforcing
Mode from config file: enforcing
Policy MLS status: enabled
Policy deny_unknown status: allowed
Max kernel policy version: 31

[root@proxysql ~]# vim /etc/sysconfig/selinux

default proxysql.cnf

 1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141


#file proxysql.cfg

# This config file is parsed using libconfig , and its grammar is described in:
# http://www.hyperrealm.com/libconfig/libconfig_manual.html#Configuration-File-Grammar
# Grammar is also copied at the end of this file



datadir="/var/lib/proxysql"

admin_variables=
{
	admin_credentials="admin:admin"
	mysql_ifaces="0.0.0.0:6032"
	refresh_interval=2000
#	debug=true
}

mysql_variables=
{
	threads=4
	max_connections=2048
	default_query_delay=0
	default_query_timeout=36000000
	have_compress=true
	poll_timeout=2000
	interfaces="0.0.0.0:6033;/tmp/proxysql.sock"
	default_schema="information_schema"
	stacksize=1048576
	server_version="5.1.30"
	connect_timeout_server=10000
	monitor_history=60000
	monitor_connect_interval=200000
	monitor_ping_interval=200000
	ping_interval_server=10000
	ping_timeout_server=200
	commands_stats=true
	sessions_sort=true
}


# defines all the MySQL servers
mysql_servers =
(
#	{
#		address = "127.0.0.1" # no default, required . If port is 0 , address is interpred as a Unix Socket Domain
#		port = 3306 # no default, required . If port is 0 , address is interpred as a Unix Socket Domain
#		hostgroup = 0	 # no default, required
#		status = "ONLINE" # default: ONLINE
#		weight = 1 # default: 1
#		compression = 0 # default: 0
# max_replication_lag = 10 # default 0 . If greater than 0 and replication lag passes such threshold, the server is shunned
#	},
#	{
#		address = "/var/lib/mysql/mysql.sock"
#		port = 0
#		hostgroup = 0
#	},
#	{
#		address="127.0.0.1"
#		port=21891
#		hostgroup=0
#		max_connections=200
#	},
#	{ address="127.0.0.2" , port=3306 , hostgroup=0, max_connections=5 },
#	{ address="127.0.0.1" , port=21892 , hostgroup=1 },
#	{ address="127.0.0.1" , port=21893 , hostgroup=1 }
#	{ address="127.0.0.2" , port=3306 , hostgroup=1 },
#	{ address="127.0.0.3" , port=3306 , hostgroup=1 },
#	{ address="127.0.0.4" , port=3306 , hostgroup=1 },
#	{ address="/var/lib/mysql/mysql.sock" , port=0 , hostgroup=1 }
)


# defines all the MySQL users
mysql_users:
(
#	{
#		username = "username" # no default , required
#		password = "password" # default: ''
#		default_hostgroup = 0 # default: 0
#		active = 1 # default: 1
#	},
#	{
#		username = "root"
#		password = ""
#		default_hostgroup = 0
#		max_connections=1000
#		default_schema="test"
#		active = 1
#	},
#	{ username = "user1" , password = "password" , default_hostgroup = 0 , active = 0 }
)



#defines MySQL Query Rules
mysql_query_rules:
(
#	{
#		rule_id=1
#		active=1
#		match_pattern="^SELECT .* FOR UPDATE$"
#		destination_hostgroup=0
#		apply=1
#	},
#	{
#		rule_id=2
#		active=1
#		match_pattern="^SELECT"
#		destination_hostgroup=1
#		apply=1
#	}
)


# http://www.hyperrealm.com/libconfig/libconfig_manual.html#Configuration-File-Grammar
#
# Below is the BNF grammar for configuration files. Comments and include directives are not part of the grammar, so they are not included here.
#
# configuration = setting-list | empty
#
# setting-list = setting | setting-list setting
#
# setting = name (":" | "=") value (";" | "," | empty)
#
# value = scalar-value | array | list | group
#
# value-list = value | value-list "," value
#
# scalar-value = boolean | integer | integer64 | hex | hex64 | float
# | string
#
# scalar-value-list = scalar-value | scalar-value-list "," scalar-value
#
# array = "[" (scalar-value-list | empty) "]"
#
# list = "(" (value-list | empty) ")"
#
# group = "{" (setting-list | empty) "}"
#

Cheatsheet

1
2
3
4
5
6


LOAD MYSQL USERS TO RUNTIME; SAVE MYSQL USERS TO DISK;
LOAD MYSQL SERVERS TO RUNTIME; SAVE MYSQL SERVERS TO DISK;
LOAD MYSQL QUERY RULES TO RUNTIME; SAVE MYSQL QUERY RULES TO DISK;
LOAD MYSQL VARIABLES TO RUNTIME; SAVE MYSQL VARIABLES TO DISK;

LOAD ADMIN VARIABLES TO RUNTIME; SAVE ADMIN VARIABLES TO DISK;

Apache Flink 學習筆記

Tue, 26 Jun 2018 00:00:00 +0800

flink, hadoop, scala

on mac

Install flink on mac

Whatever the way you choose to install flink, download the flink directly will make things easier.

Download page: https://archive.apache.org/dist/flink/flink-1.4.2/

I download: https://archive.apache.org/dist/flink/flink-1.4.2/flink-1.4.2-bin-hadoop27-scala_2.11.tgz

I’ll use flink 1.4.2, and the latest version is 1.5.0.

homebrew

1

$ brew install apache-flink # flink-1.5.0

docker-compose

ref: flink#running-a-cluster-using-docker-compose

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24


version: "2.1"
services:
 jobmanager:
 image: ${FLINK_DOCKER_IMAGE_NAME:-flink}
 expose:
 - "6123"
 ports:
 - "8081:8081"
 command: jobmanager
 environment:
 - JOB_MANAGER_RPC_ADDRESS=jobmanager

 taskmanager:
 image: ${FLINK_DOCKER_IMAGE_NAME:-flink}
 expose:
 - "6121"
 - "6122"
 depends_on:
 - jobmanager
 command: taskmanager
 links:
 - "jobmanager:jobmanager"
 environment:
 - JOB_MANAGER_RPC_ADDRESS=jobmanager

1
2


$ FLINK_DOCKER_IMAGE_NAME=flink:1.4.2 docker-compose up
$ docker-compose scale taskmanager=<N>

Test flink installation

homebrew

Use brew info apache-flink to get the installation path of flink.

e.g. /usr/local/Cellar/apache-flink/1.5.0, then:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


# terminal tab1
# run flink
# You can use ./libexec/bin/stop-cluster.sh to stop service
$ cd /usr/local/Cellar/apache-flink/1.5.0
$ ./libexec/bin/start-cluster.sh # run flink in daemon mode
Starting cluster.
Starting standalonesession daemon on host xxx.
Starting taskexecutor daemon on host xxx.
$ tail -f ./libexec/log/*.out # tail task output log

# terminal tab2
# open a local socket server for port 9000
$ nc -l 9000 

# terminal tab3
# run flink example
$ cd /usr/local/Cellar/apache-flink/1.5.0
$ ./bin/flink run examples/streaming/SocketWindowWordCount.jar --port 9000

Type some words in terminal tab2, hit enter, and terminal tab1 will show the task logs.

docker-compose
1 2 3 4 5 6 7

# terminal tab1 # run flink $ FLINK_DOCKER_IMAGE_NAME=flink:1.4.2 docker-compose up # terminal tab2 # open a local socket server for port 9000 $ nc -l 9000
Upload examples/streaming/SocketWindowWordCount.jar to flink, the file is in flink-1.4.2-bin-hadoop27-scala_2.11.tgz.

Open http://localhost:8081/#/submit, and click the checkbox on the uploaded item.

Insert Program Arguments with --hostname docker.for.mac.localhost --port 9000, the task will be executed.

Type some words in terminal tab2, hit enter, and terminal tab1 will show the task logs.

Note that the domain name docker.for.mac.localhost makes docker containers able to connect host.

Develop flink tasks in Scala with Intellij

Intellij, sbt

Intellij

Flink recommend to use Intellij for developing tasks in Scala, so download and install it.

Open preference (cmd + ,), select Plugin in sidebar, and search Scala plugin, install it.

sbt - scala build tool

1

$ brew install sbt

Project template

Tutorial: https://ci.apache.org/projects/flink/flink-docs-master/quickstart/scala_api_quickstart.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


$ bash <(curl https://flink.apache.org/q/sbt-quickstart.sh)
Project name (Flink Project): flink-test
Organization (org.example): org.example
Version (0.1-SNAPSHOT):
Scala version (2.11.12):
Flink version (1.5.0): 1.4.2

-----------------------------------------------
Project Name: flink-test
Organization: org.example
Version: 0.1-SNAPSHOT
Scala version: 2.11.12
Flink version: 1.4.2
-----------------------------------------------
Create Project? (Y/n):
Creating Flink project under flink-test

This script will help you to create project.

open Intellij -> import project -> select flink-test folder.
choose import project from external model, and select sbt
use java 1.8 as project SDK (or any Java version in your local machine)
click Finish
Intellij will start to dump project structure from sbt, so wait for it.
open WordCount.scala

Run WordCount.scala

1

Error: Could not find or load main class org.example.WordCount

File -> Project Structure (or cmd + ;) -> library -> add -> select java -> open flink-1.4.2-bin-hadoop27-scala_2.11.tgz and select all jar files in lib, and select root module to import.

Run WordCount again, output should be like this:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28


(and,1)
(arrows,1)
(be,2)
(is,1)
(nobler,1)
(of,2)
(a,1)
(in,1)
(mind,1)
(or,2)
(slings,1)
(suffer,1)
(against,1)
(arms,1)
(not,1)
(outrageous,1)
(sea,1)
(the,3)
(tis,1)
(troubles,1)
(whether,1)
(fortune,1)
(question,1)
(take,1)
(that,1)
(to,4)

Process finished with exit code 0

Build quickstart project and send to flink web UI

Now let’s build quickstart project.

Use Intellij

Open project structure (cmd + ;) and choose Artifacts
Click + (Add)
Choose Jar -> from modules with dependencies -> click OK with default value
Click OK with default value (Or you can edit name and output directory)
Choose Buiild -> Build Artifacts to build jar file, and output file will show up in the output directory after compiling.

Use sbt

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


$ cd /to/projects/flink-quickstart
$ sbt assembly
[info] Loading settings from idea.sbt ...
[info] Loading global plugins from /Users/kerkerj/.sbt/1.0/plugins
[info] Loading settings from assembly.sbt ...
[info] Loading project definition from /Users/kerkerj/projects/flink-quickstart/project
[info] Loading settings from idea.sbt,build.sbt ...
[info] Set current project to Flink Project (in build file:/Users/kerkerj/projects/flink-quickstart/)
[info] Compiling 3 Scala sources to /Users/kerkerj/projects/flink-quickstart/target/scala-2.11/classes ...
[warn] there was one feature warning; re-run with -feature for details
[warn] one warning found
[info] Done compiling.
[warn] Multiple main classes detected. Run 'show discoveredMainClasses' to see the list
[info] Checking every *.class/*.jar file's SHA-1.
[info] Merging files...
[info] SHA-1: b9026fa18e6d7e9a8e8669cb7876286c9b4fa598
[info] Packaging /to/projects/flink-quickstart/target/scala-2.11/Flink Project-assembly-0.1-SNAPSHOT.jar ...
[info] Done packaging.
[success] Total time: 5 s, completed Jun 26, 2018 3:29:19 PM

The output file will be generated.

Run jar file in flink

Open http://localhost:8081/#submit
Upload the generated jar file, and check the uploaded item.

Ref:

What is the mainRunner project for?

flink-project

Goland Hotkey Map Memo

Thu, 21 Jun 2018 00:00:00 +0800

首先從 command line 開啟（Intellij 是 idea）

cmd + o - 搜尋 project 裡的 Class (e.g. 有個 struct 叫做 Coordinate, 輸入 Coordinate 即可到該 struct)
shift + cmd + o - 搜尋檔案名
alt + cmd + o - 搜尋 Symbol
cmd + b - 到變數宣導的地方
cmd + 7 - toggle go structure tree
cmd + e - 最近開啟的檔案
cmd + shift + e - 最近變更過的檔案
alt + F7 - Find usages (沒作用，不知道是啥)
alt + space - quick definition （衝突了)
cmd + n - 針對某個 struct 來選擇要實作哪個 interface
cmd + p - paramter info 在方法參數上按下 cmd + p 會顯示該參數需要的型別
F1 - 顯示函數的文件
shift + ctrl + cmd - Expression Type
alt + enter - show intention action，在有綠色底線的顯示底下輸入則會顯示可以做哪些事
shift + cmd + a - 顯示 action
shift + F6 - rename (refactor)
選擇一段程式，然後輸入 ctrl + T - extract code
alt + F12 - toggle terminal view
cmd + shift + [] - switch tabs (或是使用 ctrl + tab 來開啟 switcher)
cmd + E - view recent file
cmd + r - replace mode
cmd + capslock - reopen closed tab (capslock is change to be Esc)
在函式參數上按下 cmd + p - 顯示函式的參數

開關檔案列表 - cmd + 1
開關 go 的結構 - cmd + 7
開關 terminal 視窗 - alt + F12
顯示函數文件 - F1
搜尋檔案名 - shift + cmd + o
搜尋字串 - shift + cmd + f (可選擇在 project / module / directory)

Refactor:

rename - shift + F6
extract - 選取程式區塊後
1. extract to variable - cmd + alt + v
2. extract to method - cmd + alt + m
3. extract to constant - cmd + alt + c

Again

Thu, 17 May 2018 23:51:15 +0800

嗯，我又把 theme 換掉了。還有個原因是裝了最新版的 hugo 後，就 build 不出來了，只好順便換個新的 theme。

整理了一下才發現原本的文章竟然是從 2011 年開始的呢，那時先從 blogger 開始放，後來才用 static site generator。想想這中間文章的 meta data 應該很亂（事實證明看了產生出來的 categories 頁面真的超級亂），有空的話也許會整理吧，也許也不會，因為回頭看，發現以前都在亂寫一些東西，搞不好就把舊文章整個 zip 起來不誤人子弟了。

其實也是因為現在在 github page 上使用 custom domain 有提供 https 的支援啦 :)

[讀書] 工作大解放：這樣做事反而更成功

Mon, 14 Nov 2016 20:36:23 +0800

最近看了一些書，有空就寫點筆記上來…

ISBN: 978-986-216-605-5

以下記一些片段

計畫是一種猜測
別當工作狂（J: work smart）
坐而言不如起而行（真正的重點在於你執行得好不好）
實現夢想完全是自己的責任，當你夠可望，自然就能撥出時間。（J: 不僅只是夢想，別拿時間當藉口）
明確表明立場
使命宣言不是說說而已（J: 莫忘初衷）
你需要的其實比想像少（J: 現階段真的需要這麼多嗎？）
別在進場時就想著怎麼退場（你需要的是實踐承諾的策略而不是退場策略）
擁抱限制、不要貪多
從核心要點做起
忽略初期的細枝末節
不管你規劃的多詳盡，凡事總有出錯的時候
懂得捨去才是關鍵
減少投入反而解決了問題
聚焦於不會改變的事物（專注於永久性的特點 e.g. 沒有人希望程式跑很慢的，一定都是越快越好）
不斷地動手做
有時放棄是對的
不必逞英雄
人類不擅長估計，預估一件大事很難，但預估小事簡單多了，把大事切成許多小事吧
一次只做一個小決定
不要抄襲、避免大眾化
預設拒絕立場
自己先動手做
靈感是會過期的

這本書和 hiroshi 大人借的，應該可以入手一本，覺得前半部比較偏個人、後半部就偏專案產品面，

這本書值得不時拿出來細細品味，不同時間看應該都有不同的感覺。

goroutine 執行相關討論

Tue, 25 Oct 2016 12:32:55 +0800

幾天前在 Golang Taiwan 的 slack 裡看到了一些關於 goroutine 的討論

有人問了以下程式碼 (from http://blog.mergermarket.it/now-youre-thinking-with-channels/)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


package main

import "fmt"

func main() {
	channelForInts := make(chan int)
	go printIntFromChannel(channelForInts)
	channelForInts <- 5
}

func printIntFromChannel(channel chan int) {
	number := <-channel
	fmt.Println("The number is:", number)
}

提到上述程式碼在 goplayground 上測試好幾次都會印出 The number is:5

但他自己在本機跑是怎樣執行都不會出現 5

看到這個問題第一個想到的是 sync.Waitgroup

之前剛開始學 goroutine 的概念時，就在 stackoverflow 上看到有人討論相關的議題

加個 sync.Waitgroup 就可以保證看到 goroutine 執行完後的結果。

而事實上會這樣子的原因 Go Programming Language Specification 有寫

Program execution begins by initializing the main package and then invoking the function main. When that function invocation returns, the program exits. It does not wait for other (non-main) goroutines to complete.

所以在 main 執行完後也不管 goroutine 了，反正我就是要關掉了～這樣

改成用 sync.Waitgroup 的話大概就是長下面這樣，有稍微變形一下，多另外一個 goroutine 來往 channel 丟值

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41


package main

import (
	"fmt"
	"sync"
)

var wg sync.WaitGroup

func main() {
	channelForInts := make(chan int)

	wg.Add(2)
	go setNum(channelForInts)
	go printIntFromChannel(channelForInts)

	wg.Wait()
}

func setNum(channel chan int) {
	defer wg.Done()
	
	for i := 0; i < 100; i++ {
		channel <- i
	}
	close(channel)
}

func printIntFromChannel(channel chan int) {
	defer wg.Done()

	for {
		number, ok := <-channel

		if !ok {
			break
		}

		fmt.Println("The number is:", number)
	}
}

另外社群朋友也提到另一個觀點，那就是將 GOMAXPROCS 設成 1

The GOMAXPROCS variable limits the number of operating system threads that can execute user-level Go code simultaneously. There is no limit to the number of threads that can be blocked in system calls on behalf of Go code; those do not count against the GOMAXPROCS limit.

且 goroutine 內沒有 system call，就不會有 context switch

所以會等 goroutine 跑完後回 main 把整個 process 完成

也是挺有趣的，從沒想過這個地方。

最後就是看起來這兩個來源值得一讀

Golang 的 spec https://golang.org/ref/spec
Golang Memory Model https://golang.org/ref/mem

tld_length 在 Rails session_store 與 HTTP URL 的設定

Thu, 20 Oct 2016 10:47:58 +0800

工作上 rails 在每個 stage 的 domain 長度都不太一樣

例如 production 是 example.com，staging 是 kerkerj.staging.example.com

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


MyApp::Application.config.session_store :redis_session_store, {
 key: 'example_session_token',
 domain: :all,
 tld_length: 4,
 serializer: :hybrid,
 redis: {
 host: "....",
 key_prefix: "...",
 expire_after: 7.day,
 }
}

相關原始碼: action_dispatch/middleware/cookies.rb

在這裡的 tld_length 就是看你 domain 的 tld 想設定到哪就寫多少

以 kerkerj.staging.example.com 為例，想要 example.com 就是 2，想要 kerkerj.staging.example.com 就是 4

而在 Rails App 裡，在 config.action_dispatch.tld_length (或 ActionDispatch::Http::URL.tld_length ) 設定的 tld_length

在 rails api document 的 #domain 有用法

原始碼則解釋得更清楚 actionpack/lib/action_dispatch/http/url.rb

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


> ActionDispatch::Http::URL.extract_domain("kerkerj.staging.example.com", 1)
=> "example.com"
> ActionDispatch::Http::URL.extract_domain("kerkerj.staging.example.com", 2)
=> "staging.example.com"
> ActionDispatch::Http::URL.extract_domain("kerkerj.staging.example.com", 3)
=> "kerkerj.staging.example.com"
> ActionDispatch::Http::URL.extract_domain("example.com", 1)
=> "example.com"
> ActionDispatch::Http::URL.extract_domain("example.com", 3)
=> "example.com"

tld_length 在兩邊的實作與意義上不同，需要注意。

Rails initializer 的載入順序

Thu, 20 Oct 2016 10:39:30 +0800

如果 rails app 裡的 initializer 有載入順序的需求的話

可以照著 Ruby On Rails Guide 這篇來設定

If you have any ordering dependency in your initializers, you can control the load order through naming. Initializer files are loaded in alphabetical order by their path. For example, 01_critical.rb will be loaded before 02_normal.rb.

檔名加個數字前綴，rails 就會以數字順序來依序載入~

Use goconvey in projects maganged by gb

Wed, 19 Oct 2016 00:01:04 +0800

這是前陣子在工作上用到的

有個 golang 的專案，使用了 gb 來管理第三方套件

當時想套 goconvey 進來

但是一直搞不定執行的方式

後來在 github goconvey issue 裡找到了方式

1
2
3


$ cd /to/your/gb_projects
$ PROJECT_DIR=`pwd`
$ GOPATH="$PROJECT_DIR/vendor:$PROJECT_DIR" goconvey -packages=1 -port 8899

這樣就會跑 web ui 出來摟

不想跑 web ui 就執行 gb test -v 就可以了…上面這樣只是單純想跑 web ui 而已 XD

docker HA proxy

Tue, 18 Oct 2016 23:36:40 +0800

不知道標題該下啥…

前陣子因為工作需要，需要測試一個 web app 分布在多台機器下的狀況

想說使用 docker 來做這件事，但又懶得弄 nginx 的設定

稍微查了一下發現有 dockercloud/haproxy

我使用的情境是 web app * 3 + ha * 1 + redis * 1

web 使用了兩個 port 7788, 7789

但是不想讓 ha 把流量導去 7788，所以可以設定 EXCLUDE_PORTS

如此一來，在 docker-compse up 後，就可以透過 http://192.168.99.100:5566/ 來連上了

並且可以透過 docker stats $(docker ps -q) 這個指令來觀察正在執行中的 containers 的基本 metrics~

快速簡單!

[tool] diff-so-fancy

Tue, 11 Oct 2016 11:10:52 +0800

現在想到什麼都來 PO 一下 XD

https://github.com/so-fancy/diff-so-fancy

拿來幫你把 git diff 變漂亮的東東

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


// install
$ brew install diff-so-fancy

// Setup
$ git config --global core.pager "diff-so-fancy | less --tabs=4 -RFX"

// make it more fancier
$ git config --global color.diff-highlight.oldNormal "red bold"
$ git config --global color.diff-highlight.oldHighlight "red bold 52"
$ git config --global color.diff-highlight.newNormal "green bold"
$ git config --global color.diff-highlight.newHighlight "green bold 22"

New theme

Sun, 09 Oct 2016 00:47:31 +0800

結果過了這麼久的一篇文就是把 theme 換掉了 XD

可能再補個幾篇這一年有紀錄的一些小玩意兒吧 XDD

Migrating to Hugo from Octopress

Sun, 03 May 2015 02:14:59 +0800

hugo

hugo - 快速又現代的靜態網站產生器

^^^ 這是 spf13 自己說的

繼 spf13-vim 後又一個 spf13 出品的好東西 XD

在靜態網站產生器中最廣為人知的應該就是 Jekyll

以及基於 Jekyll 的 Octopress 了

(關於靜態網站產生器，這篇文章介紹了六個除了 Jekyll 以外的產生器)

為什麼要用 hugo？

雖然 Jekyll / Octopress 很紅資源多主題也不少

但是缺點就是要使用它們就必須裝 ruby、裝 gem

有在寫 ruby 的人感覺應該還好

沒在寫 ruby 的光想像就覺得應該會被搞死… XD

而且覺得文章一多時在編譯的時候好慢…

用 hugo 的好處就是因為他是用 go 寫的

執行速度飛快，而且只要下載一個 binary 檔案後就可以操作了喲~

基本 hugo 安裝與操作

首先先安裝 hugo (我是用 mac 的 homebrew)

1

$ brew install hugo

使用 hugo 產生一個新的網站

1
2
3


$ hugo new site /path/to/the/site
e.g.
$ hugo new site /Users/kerkerj/my_hugo_blog

到剛剛產生的網站目錄底下

1
2
3


$ cd /path/to/the/site
e.g.
$ cd /Users/kerkerj/my_hugo_blog

產生一些內容

1

$ hugo new about.md

或是一篇文章

1

$ hugo new post/first-post.md

安裝主題

1

$ git clone --recursive https://github.com/spf13/hugoThemes themes

把 hugo 跑起來!

1

$ hugo server --theme=hyde-x --buildDrafts --watch

指令說明:

--theme=hyde-x

指的是使用哪一個主題，可以在 themes 資料夾裡找，並將 hyde 替換掉就可以換主題，例如換成 greyshade

--buildDrafts

使用 hugo new post/first-post.md 預設會是草稿 (在 first-post.md 裡會有 draft=true)

如果下 --buildDrafts 的意思就是會把草稿也 build 出來讓你看到

--watch

如果在 server 開啟時，編輯文章並儲存的話，server 會幫你根據修改的內容重新產生網頁，

不需要再下指令重新 build 一次

Migrating from octopress

我自己原本是用 octopress

為了不要怕改壞原本的 octopress 文章

我把在 octopress 的文章 (source/_posts)

全數複製一份到 my_hugo_blog/content/post/ 底下

接著就試著跑 hugo server 起來試試看

當然是炸了一堆 ERROR 出來啦 XD

以下是我遇到的幾個常見問題

Meta-data 的 Date

這是我的錯誤訊息

1
2


ERROR: 2015/05/02 Failed to parse date '2010-10-04 18:25' in page post/2010-10-04-freebsd81-famp.md
...

首先瞭解一下文章的 meta-data 格式

octopress 的是 yaml 格式

1
2
3
4
5
6
7
8


---
title: "Setup wifi on raspberry pi2"
date: 2015-04-22 22:59:11 +0800
comments: true
categories: [raspberry]
keywords: [raspberry, pi, pi2, wifi]
description: 
---

hugo 的則是 toml 格式

1
2
3
4
5
6


+++
date = "2015-05-02T02:27:21+08:00"
draft = true
title = "test"

+++

現在 hugo 0.13 版開始也可以讀 yaml 格式了

(在 config 中可以設定 metaDataFormat: "yaml")

不過比較麻煩的是 date 這個屬性，兩邊長得並不太一樣

octopress 比較舊的是長這樣 2010-10-04 18:25

新一點 (某一次更新後) 的長這樣 2014-10-02 01:37:44 +0800

不過不管怎樣，hugo 都不吃

因為 hugo 的長這樣 2015-05-02T02:27:21+08:00

囧了

因此必須將 octopress 的格式換成 hugo 的

接下來下的指令最好先 git commit 一下後再做 XD

1
2


$ cd my_hugo_blog/content/post/ 
$ find . -type f -exec sed -i "" -e 's/date: \([0-9]\{4\}-[0-9]\{2\}-[0-9]\{2\}\).*$/date: \1/g' {} \;

這個指令會將原本的 date 格式換成只有 yyyy-mm-dd 的格式

例如 2014-10-02 01:37:44 +0800 換成只有 2014-10-02

這樣 hugo 就看得懂

permallink 的問題

當日期問題修好後，重開 server

發現點擊文章標題進單篇文章網頁時會跳 404

原因是 hugo 預設產生的連結是

http://yoursite.com/post/2015-04-22-raspberry-pi2-remote-webcam/

而在 octopress 是根據日期區分

http://yoursite.com/post/2015/04/22/raspberry-pi2-remote-webcam/

這個問題的解法比較簡單

在 config.toml 加入這行就行

1
2


[Permalinks]
	post = "/:year/:month/:day/:filename/"

不過因為 octopress 本身在產生檔案時就已經把日期加入檔名中

(e.g. 2015-04-22-raspberry-pi2-remote-webcam.md)

因此 octopress 的文章連結看起來就會很長，例如:

1

http://localhost:1313/2015/04/22/2015-04-22-raspberry-pi2-remote-webcam/

這時候就看要不要把檔名改掉啦

例如把 2015-04-22-raspberry-pi2-remote-webcam.md

改成 raspberry-pi2-remote-webcam.md

或者可以試著改成:

1
2


[Permalinks]
	post = "/:year/:month/:day/:title/"

不過我試了一下，會有機會因為標題有特殊符號或中文

1

e.g. http://localhost:1313/2014/10/20/swift-d20---basic---%E6%8D%A8%E6%A3%84-storyboard-%E4%BD%BF%E7%94%A8%E7%B4%94%E7%A8%8B%E5%BC%8F%E7%A2%BC-%E7%9A%84%E6%96%B9%E5%BC%8F%E6%92%B0%E5%AF%AB-viewcontroller/

產生出奇怪的資料夾名稱而導致該文章無法存取

所以這個方式僅供參考，可以試試 XD

BTW，我個人在撰寫文章時都沒有用到產生器的樣板語言，因此在轉換時比較沒遇到什麼問題

上述問題解法的參考來源:

Migrating to Hugo From Octopress

OctopressからHugoへ移行した

設定檔 (config.toml, config.yml, config.json)

hugo 預設的是 config.toml，也支援 yaml 和 json

而 hugo 讀取的順位是照上述順序

如果是要將網頁讓 GitHub host 的話，就必須使用 config.yaml

因此我就把 config.toml 換成 config.yml 了 (也比較習慣)

以下是我的 config.yml 主要的設定

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


baseurl: "http://blog.kerkerj.in/"
languageCode: "en-us"
title: "My New Hugo Site"

buildDrafts: false
config: "config.yml"
metaDataFormat: "yaml"

permalinks:
 post: "/blog/:year/:month/:day/:filename/"

theme: "purehugo"

設定 metaDataFormat: "yaml" 的話

使用 hugo new 的文章 meta-data 都會是 yaml 格式喔

要查詢預設的參數在這 Configuring Hugo

主題佈景 Theme

其實在 hugo 裡比較讓我覺得麻煩的還是主題的挑選吧

因為選擇實在不多

我最喜歡的是在 octopress 中的 greyshade

雖然 spf13/hugoThemes 的 repo 中有人 porting，但是完成度似乎不高

改 template 是應該沒什麼難度，照著改就好，不過…實在沒這麼多時間 Orz

而且 hugo 在二月底 release 了 0.13 版，有一部分的主題佈景都不能動了 XD

這邊列出我試過可以 work 的

vienna 的 index list 壞掉了，不過 single page 能動，佈景也還算漂亮

自己修一下應該就可以

其實其他不少佈景也都是 index page 不能動，其他都能動

另外在試的過程中，發現除非 repo 有特別說

不然 config.yml 的 disqus 的 key 都是 disqusShortname

(因為有個佈景的 key 是 disqus_short_name)

hyde-x 是最多人 star 的主題佈景，有八種色系可以選擇

功能也蠻齊全，不想自己搞東搞西的話，建議就直接選這個主題

(因為我最後 fork 人家的 theme 自己改了一堆 (遮臉) )

Syntax highlight

寫技術筆記的人應該對這個非常執著 XD

我使用的主題是 purehugo

不過他的 syntax highlight 是預設的常見的模式

因此我就自己把他抽掉換成 highlight.js

hugo 在這篇文件中有另外說明關於如何自訂 syntax highlight

支援 (disqus, ga, pagination, SEO, robot.txt, favcon)

disqus 要看佈景有無支援，GA 也是

不過如果主題沒有的話，也是自己寫一個 partial 插進去就好

另外 pagination 也是在最新版 (0.13) 才加入，所以也要看佈景有沒有支援

不然文章多的就會發現首頁往下捲捲不完… XD

SEO 的部分有人特別寫 partial nozzle/hugo-snippets

自己寫在 theme 的 header.html 當然是最直覺的

robot.txt、favcon 就自己加進 static 資料夾，再到 theme 裡面修改

Deploy

hugo 有一篇教學文教你如何放在 GitHub 上

有兩種方式 (Project page or Personl page)

不過都需要先在 config.yml 加入以下資訊

1
2
3
4
5
6
7
8
9


---
contentdir: "content"
layoutdir: "layouts"
publishdir: "public"
indexes:
 category: "categories"
baseurl: "http://kerkerj.github.io/ or http://kerkerj.github.io/hugo_gh_blog/"
title: "Hugo Blog Template for GitHub Pages"
canonifyurls: true

Project page: e.g. http://your_github_account.github.io/hugo_gh_blog/

先處理好本機端 hugo 的 blog，接著 git init 並且 commit 後

加入 gh-pages 這個 branch (教學)

接著回到 master，照著下列步驟

1
2
3
4
5
6
7
8
9


# Fetch the deployment script into the root of your source tree, make it executable.
wget https://github.com/X1011/git-directory-deploy/raw/master/deploy.sh && chmod +x deploy.sh

# For setting it up to build to a folder other than "dist", see the options in deploy.sh.
# Build the site to /dist.
hugo -d dist

# Run the deploy.sh script installed above.
./deploy.sh

就可以 deploy 到 github project page 了

存取網址就是 http://your_github_account.github.io/hugo_gh_blog/

Personal page: e.g. http://kerkerj.github.io/

建立兩個 repo，一個拿來放 my_hugo_blog 本機端的資料

一個就是 your_github_account.github.io 這個 repo

會拿來放 my_hugo_blog/public 資料夾裡的資料

所以就必須先在 GitHub 上有 your_github_account.github.io 這個 repo

這邊會比較簡單

以剛剛的例子的話就會是 my_hugo_blog，這個資料夾裡放了所有剛剛 hugo 產生的資料

先處理 deploy.sh:

可以直接自己把以下內容存成 deploy.sh，並 chmod +x deploy.sh 使其可執行

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25


#!/bin/bash
# Deploy hugo site to GitHug personal page
 
echo -e "\033[0;32mDeploying updates to GitHub...\033[0m"
 
# Build the project. 
hugo # if using a theme, replace by `hugo -t <yourtheme>`
 
# Go To Public folder
cd public
# Add changes to git.
git add -A
 
# Commit changes.
msg="rebuilding site `date`"
if [ $# -eq 1 ]
 then msg="$1"
fi
git commit -m "$msg"
 
# Push source and build repos.
git push origin master
 
# Come Back
cd ..

或下載 deploy.sh (同時使其可執行)

1

wget https://gist.githubusercontent.com/kerkerj/18b18a24af8e8a0ec0ee/raw/654dfb7faaa23db24f707c4d746319e458157d89/deploy.sh && chmod +x deploy.sh

如果有使用 theme，記得修改 deploy.sh

把

1

hugo # if using a theme, replace by `hugo -t <yourtheme>`

換成

1

hugo -t yourtheme # if using a theme, replace by `hugo -t <yourtheme>`

所以現在已經處理好的東西有:

my_hugo_blog 資料夾以及可執行的 deploy.sh
已經在 GitHub 上有 your_github_account.github.io 這個 repo

(p.s. 如果有要設定 CNAME 什麼的，就把 CNAME 檔案放 static 這個資料夾裡)

接下來，先將 server 跑起來

1

$ hugo server --watch -t <yourtheme>

把你想要的網站調整好後，關掉 server 並將 public 資料夾刪除 (等等會重新在 deploy.sh 中產生)

1

$ rm -rf public

接著把 GitHub 的 repo 加到 public 裡

1

$ git submodule add git@github.com:<username>/<username>.github.io.git public

最後就 deploy 到 github 上

1
2
3
4
5


# 自動產生 commit message
$ ./deploy.sh 

# 如果要自訂 commit message 的話
$ ./deploy.sh "Your commit message"

如果是第一次 deploy 到 GitHub 的話，需要等待大約 15 ~ 20 分鐘

才會在 GitHub 上看到你的網站喲

Raspberry Pi2 remote webcam

Wed, 22 Apr 2015 00:00:00 +0800

如題~

先假設 pi2 本身的 IP 是 192.168.1.200

首先先進去 server 來更新一下~

1

$ sudo apt-get update && sudo apt-get upgrade

再來就裝 motion

他其實是一個 motion detector，不過也可以拿來當作 web cam 用的 streaming server XD

1

$ sudo apt-get install motion

編輯設定檔 /etc/motion/motion.conf

1

$ sudo vi /etc/motion/motion.conf

找到以下幾個值，並分別改成下面

1
2
3


daemon = ON
webcam_localhost = OFF
control_localhost = OFF

webcam_localhost 是 streaming 介面

control_localhost 是設定介面

如果要改預設 port，就找 webcam_port, or control_port

最後設定將 service 啟動

1

$ sudo vi /etc/default/motion

將 no 改成 yes

1

start_motion_daemon = yes

啟動 service

1

$ sudo service motion start

motion 這個 service 預設的 port 是 8080 / 8081 (可以在前述的設定檔更改)

開啟瀏覽器, 連入 http://192.168.1.200:8080 or http://192.168.1.200:8081

這邊會有個小問題，就是連 8080 時會很正常

但是 8081 時如果是用 chrome，則怎麼都進不去

後來發現這篇

他說 Chrome 不再支援 raw MJPEG streams 了

所以就是用其他瀏覽器開吧, 我是用 Safari :D

記得要和你的 pi2 在同一個 wifi 環境下~

剩下的還有許多設定可以玩～改天再來慢慢玩

Setup wifi on raspberry pi2

Wed, 22 Apr 2015 00:00:00 +0800

2021-0527 更新

先確認自己的 kernal 版本
1 2

$ uname -r 5.10.17-v7+

到 http://downloads.fars-robotics.net/ 裡找相對應版本

1
2
3
4
5
6
7
8
9


http://downloads.fars-robotics.net/
	wifi-drivers/
		8188eu-drivers/ 
			...
			8188eu-3.18.7-757.tar.gz
			...
			8188eu-4.1.15-829.tar.gz
			....
			8188eu-5.10.17-v7-1414.tar.gz

檔案命名的規則是 8188eu-{$kernal_version}-xxxx.tar.gz

找到相對應的 kernal 版本後下載下來並解壓

1
2


$ wget http://downloads.fars-robotics.net/wifi-drivers/8188eu-drivers/8188eu-5.10.17-v7-1414.tar.gz
$ tar xvf 8188eu-5.10.17-v7-1414.tar.gz

執行 install.sh 後重開機應該就有了
1

$ ./install.sh

若沒有的話，翻翻 http://downloads.fars-robotics.net/ 的資料看有沒有提供解方

(這是篇筆記)

前陣子從前同事那接手了一塊 raspberry pi2 的板子

想要用 wifi 來連網，於是就買了一個 usb 無線網卡

型號是:

TP-LINK TL-WN725N 150MbpsUSB無線網卡 (pchome連結)

一開始當然還是必須先插網路線，ssh 進去後

先檢查 pi2 的 kernel 版本

1
2


$ uname -r
3.18.7-v7+ # 這是我的版本

接著根據這個 repo

將韌體載下來放到 /lib/firmware 裡

1

$ sudo wget https://github.com/lwfinger/rtl8188eu/raw/c83976d1dfb4793893158461430261562b3a5bf0/rtl8188eufw.bin -O /lib/firmware/rtlwifi/rtl8188eufw.bin

再來設定 pi2 的網路

1
2
3
4


$ ifconfig
eth0 Link encap:Ethernet 
lo Link encap:Local Loopback
wlan0 Link encap:Ethernet 

如果網卡有裝成功，應該就會有 wlan0 或是 wlanX 之類的 (X 是數字)

最後就是手動掃描無線網路，並設定連線值囉

1
2
3
4
5
6


$ sudo iwlist scan => 掃描無線網路 AP
wlan0 Scan completed :
 Cell 01 - Address: XX:XX:XX:XX:XX:XX
 ESSID:"GGININDER"
 Cell 02 - Address: XX:XX:XX:XX:XX:XX
 ESSID:"TP-LINK_F5566"

連線的 SSID 就找 Cell 裡的 ESSID

(通常應該會記得自己家的 AP 啦，可以用來確認一下)

開啟 /etc/network/interfaces 來寫入連線值

我的 AP 的加密機制是 WPA/WPA2，所以使用下面的方式連線

若是其他方式 (e.g. WEP) 可以參考這篇

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


$ vi /etc/network/interfaces
auto lo

iface lo inet loopback
iface eth0 inet dhcp

# 重點是下面這段

# 允許熱插拔 wlan0 這個介面
allow-hotplug wlan0 

# 預設設定為 dhcp
iface default inet dhcp

# 設定 wlan0 這張介面卡為 DHCP 自動取得 IP
iface wlan0 inet dhcp

# 你的 AP 的 SSID
wpa-ssid "GGININDER"

# 你的 AP 的密碼
wpa-psk "password"

設定好後，重新啟動 wlan0 介面就可以連線囉

1
2
3


$ sudo ifdown wlan0
$ sudo ifup wlan0
$ ifconfig wlan0 # 確認是否取得 IP

reference:

raspberry pi forum: http://www.raspberrypi.org/forums/viewtopic.php?f=28&t=62371&start=475

網路設定: http://inpega.blogspot.tw/2013/09/blog-post_15.html

ithome 鐵人賽 - 規劃

Sat, 01 Nov 2014 00:00:00 +0800

半個月前不怕死的報名了 ithome 的連續三十天不中斷發文鐵人賽，

還報名了兩個主題，真的是太誇張了…

但是由於 ithome 的編輯器其實排版起來沒有很漂亮，

因此決定利用這邊先發文，再轉文到 ithome 的方式來處理，

比較順手一些，順便在這篇文章貼上規劃方向，topic 可能隨時會變，但大方向不變

第一次寫的主題都幾乎不是自己專精的技術，

規劃表如下： (Evernote 連結)

https://www.evernote.com/l/AFFz7an43x1K46hErAgyJdD5K9BuFFMN9Dg

因此若有錯誤也請有看到的大大們多多幫忙指正囉！

有時候會因為比較忙，可能文章比較精簡一些，還請大家多多包涵 :P

有任何文章更新也會同步在此篇文章中!

##RESTful API Service:
Day1 - [API-d1] - 定義 1 - 什麼是 REST/RESTful?
Day2 - [API-d2] - 定義 2 - RESTful 的優點與要求
Day3 - [API-d3] - 使用時機與實際 API 參考
Day4 - [API-d4] - 使用技術與工具介紹及原因
Day5 - [API-d5] - [Server 番外篇] 建立自己的本機虛擬伺服器 1 - Vagrant + VirtualBox 安裝
Day6 - [API-d6] - [Server 番外篇] 建立自己的本機虛擬伺服器 2 - Ubuntu 基本設定與安裝 Node.js, MongoDB
Day7 - [API-d7] - [Server 番外篇] 建立自己的本機虛擬伺服器 3 - 打包環境
Day8 - [API-d8] - Node.js - Hello World!
Day9 - [API-d9] - NVM 與 NPM 使用
Day10 - [API-d10] - Express - Hello World!
Day11 - [API-d11] - MongoDB - Hello World!
Day12 - [API-d12] - MongoDB - Hello World! (Client-side)
Day13 - [API-d13] - [Javascript 番外篇] Javascript require/ module/ Module Pattern
Day14 - [API-d14] - [Javascript 番外篇] Javascript function scopes 和 closures
Day15 - [API-d15] - [Javascript 番外篇] Javascript callback, event
Day16 - [API-d16] - 實戰開發 - 設定主題及規劃
Day17 - [API-d17] - 實戰開發 - 專案結構
Day18 - [API-d18] - 實戰開發 - 套件模組
Day19 - [API-d19] - 實戰開發 - index & route & http status code
Day20 - [API-d20] - 實戰開發 - Routes 2, get params and request data
Day21 - [API-d21] - 實戰開發 - 新增 TODO task API with mongoose
Day22 - [API-d22] - 實戰開發 - 讀取 TODO task API with mongoose
Day23 - [API-d23] - 實戰開發 - 修改 TODO task API with mongoose
Day24 - [API-d24] - 實戰開發 - 刪除 TODO task API with mongoose
Day25 - [API-day25] - 實戰開發 - 處理 404 & 500
Day26 - [API-d26] - 實戰開發 - API-key
Day27 - [API-d27] - 實戰開發 - log 處理及 config (db, apikey)
Day28 - [API-d28] - 實戰開發 - 發佈 - forever
Day29 - [API-d29] - 實戰開發 - 發佈 - nginx
Day30 - [API-d30] - 總結

[API-d30] - 總結

Thu, 30 Oct 2014 00:00:00 +0800

總結三十天下來的 Restful API service 建置

其實接觸到的東西很廣泛

從 server 端到程式端，還有虛擬機器的使用都有沾到邊

其實不管是哪個領域都是要一點一滴累積起來的

以這次的開發技術來說，

vagrant 方便在於我在和別人共享 server 環境時非常方便

自己在架測試環境時也可以先將乾淨的 web serser 打包起來

供日後隨時要用時開起來馬上 deploy 就可以使用

另外加上方便的網路設定，

在測試時非常方便

另外則是 nodejs，

這次會選擇 nodejs 主要也是想進入 javascript 的世界

nodejs 若作為一個後端程式語言來說，我認為是非常輕量且入門非常簡單

套一句最近常聽到的話

javascript is everywhere

不管是網頁前後端，nodejs 還可以拿來寫桌面應用、嵌入式系統

應用領域非常廣泛

也希望這門語言能夠更標準化，擺脫歷史包袱

看最近幾年的發展，其實我認為是勢在必行的

只缺一個領頭羊來帶領大家前往偉大的航道了! XD

希望三十天的分享能給大家帶來不一樣的感受~

對了突然想到一件事，這個主題的副標最後一句是想要和 APP 結合

APP 在隔壁棚啦 XD

[Swift-d30] - 總結

Thu, 30 Oct 2014 00:00:00 +0800

30 天下來其實中間受到不少人幫忙

因為第一次寫 iOS 程式，對於 iOS 的基本運作流程還是詢問了不少同事

包含在隔壁棚用 Cocos2d 寫 2D 遊戲的 Andy

還有同事 Henry 和 Felix 都給予了很大的幫忙

最後這隻小 app 其實 code 的品質並沒有很好

主要還是因為寫來 demo 用的，以及老實講也沒什麼時間寫…

報兩個組別真的是很鐵人哪

還看到隔壁棚一次報三四個主題的大大

真是太厲害了

假設明年還會參賽的話，應該還是會以單一技術來鑽研吧!

Swift 有蠻多特性是 Objective-C 所沒有的

如果有想在新專案嘗試的話

最好還是先多看看網路上的比較

避免踩到雷

像有一點是我們同事曾經踩到的雷

就是 NSDictionary V.S. Dictionary

兩者的速度可以差到 5, 6 倍以上

網路上搜尋也會發現有人在討論 Swift Dictionary 的效能差異

若要在新專案使用還是要查詢一下避免掉一些問題

另外還有就是 Swift on Xcode 的穩定度還是有待加強…

總而言之, 30 天結束了，ya!

[API-d29] - 實戰開發 - 發佈 - nginx

Wed, 29 Oct 2014 00:00:00 +0800

接下來這篇就會比較偏 server 設定了！

nginx 是一套伺服器軟體，和 apache 並駕齊驅

(其實我覺得 nginx »> apache XD)

主要是 nginx 清量快速

我們要拿他幫 nodejs 處理接收 request 的部分，再將 request 導往 nodejs

所以感覺就會如下圖:

可以讓 nginx 當作是 load balancer,

透過 reverse proxy 的方式轉發 request 給 nodejs, 讓 nginx 承受流量

這就是我們今天要做的事情，

所以首先，我們就要先裝 nginx，因此就先進虛擬機吧!

1
2


$ sudo apt-get update && sudo apt-get upgrade -y
$ sudo apt-get install nginx 

這樣就會安裝一個 nginx 了!

Nginx 的設定檔都是放在 /etc/nginx/ 底下

個別網站的設定放在 /etc/nginx/sites-available

如果要讓該網站上線，則會將 /etc/nginx/sites-available 的設定檔 link 到 /etc/nginx/sites-enable

因此若想自己新增設定檔的話，慣例是會在 available 新增，然後再 link 到 enable

如果我們進到 /etc/nginx/sites-enable 的話，裡面應該已經有一個 default 的設定檔了

1

$ sudo vim /etc/nginx/sites-enable/default

內容應該是:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25


server {
 listen 80 default_server;
 listen [::]:80 default_server ipv6only=on;

 root /usr/share/nginx/html;
 index index.html index.htm;

 # Make site accessible from http://localhost/
 server_name localhost;

 location / {
 # First attempt to serve request as file, then
 # as directory, then fall back to displaying a 404.
 try_files $uri $uri/ =404;
 # Uncomment to enable naxsi on this location
 # include /etc/nginx/naxsi.rules
 }

 # Only for nginx-naxsi used with nginx-naxsi-ui : process denied requests
 #location /RequestDenied {
 # proxy_pass http://127.0.0.1:8080;
 #}
 
 ...
}

將設定檔改成如下:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


upstream nodejs {
 server 127.0.0.1:3000;
 #server 127.0.0.1:3001;
}

server {
 listen 80;

 server_name localhost;

 location / {
 proxy_pass http://nodejs;
 proxy_http_version 1.1;
 proxy_set_header Upgrade $http_upgrade;
 proxy_set_header Connection 'upgrade';
 proxy_set_header Host $host;
 proxy_cache_bypass $http_upgrade;
 }
}

解釋一下以下這段:

1
2
3
4


upstream nodejs {
 server 127.0.0.1:3000;
 #server 127.0.0.1:3001;
}

下面這段則是 proxy pass 的部分, 會將 / 的流量導到 nodejs 的 server cluster 裡面，不過因為我們現在只有一台 server 開起來，所以只會被導到 3000 port 的那台機器

1
2
3
4
5
6
7
8


location / {
 proxy_pass http://nodejs;
 proxy_http_version 1.1;
 proxy_set_header Upgrade $http_upgrade;
 proxy_set_header Connection 'upgrade';
 proxy_set_header Host $host;
 proxy_cache_bypass $http_upgrade;
 }

如果 nodejs server 的承載量不夠，可以開好幾檯，只要 port 不一樣即可

這樣就可以建立一個 nodejs cluster

再來使用 forever 開啓 nodejs server

再重新開啟 nginx

使用 postman 戳戳看 API

就成功囉~~

[Swift-d29] - 實戰開發 - TODOList - API 4 刪除

Wed, 29 Oct 2014 00:00:00 +0800

Github link

今天要處理刪除

其實超簡單的

只是想偷懶一下 XD

一樣將下列程式碼新增到 RestApi class:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30


func deleteTodoList(completionHandler: ((NSDictionary!, NSError!) -> Void)!, todoId: String) {
 var session = NSURLSession.sharedSession()
 
 var request = NSMutableURLRequest(URL: NSURL(string: "http://192.168.1.158:3000/user/kerkerj/todos/\(todoId)")!)
 request.HTTPMethod = "DELETE"
 
 var err: NSError?
 request.addValue("application/json", forHTTPHeaderField: "Content-Type")
 request.addValue(self.API_key, forHTTPHeaderField: "API-Key")
 
 
 let task = session.dataTaskWithRequest(request, completionHandler: {data, response, error -> Void in
 if (error != nil) {
 return completionHandler(nil, error)
 }
 
 var error: NSError?
 let json = NSJSONSerialization.JSONObjectWithData(data, options: NSJSONReadingOptions.MutableContainers, error: &error) as NSDictionary
 
 println(json)
 
 if (error != nil) {
 return completionHandler(nil, error)
 } else {
 return completionHandler(json, nil)
 }
 })
 
 task.resume()
 }

回到 ViewController 中的 tableView commitEditingStyle 的方法中

將其更新為:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


func tableView(tableView: UITableView, commitEditingStyle editingStyle: UITableViewCellEditingStyle, forRowAtIndexPath indexPath: NSIndexPath) {
 
 api.deleteTodoList({data, err -> Void in
 let alert = UIAlertView()
 alert.title = "Alert"
 alert.addButtonWithTitle("Ok")
 
 if (err != nil) {
 alert.message = "Failed to delete: \(err)"
 alert.show()
 } else {
 alert.message = "ok!"
 
 self.fakeData.removeAtIndex(indexPath.row)
 
 dispatch_async(dispatch_get_main_queue(), {
 // must be "tableView!" not "tableView?"
 alert.show()
 self.tableView!.reloadData()
 })
 }
 }, todoId: fakeData[indexPath.row]["_id"]!)
 }

改好程式碼後，執行該程式

在清單中將 item 往左滑，就可以看到刪除的按鈕了!

超簡單的啦!

[API-d28] - 實戰開發 - 發佈 - forever

Tue, 28 Oct 2014 00:00:00 +0800

Github 參考

接下來兩天要講 deploy 的部分

由於 deploy 的 script 其實非常的麻煩，因此我們就不提 deploy 的 script 了

我們只專注在 server 上需要什麼東西

今天要來看看 forever 這個套件

這個套件可以幫助 nodejs 的 server 遇上無預警的 server 掛掉時

會幫你自動重新啟動 nodejs 的 server

也就是說

假設說 nodejs 寫的 server 某個 route 有問題，

送 request 後會因為某些因素造成 server error 造成程式碼 crash 時

forever 的 monitor 會偵測到，並幫你自動重啟 server

至少不會造成其他正常存取 server 的使用者遭遇到 server down 的問題

這個套件可以選擇裝在 global 或是 project

在這邊我是選擇裝成 global

進到虛擬機

1

$ npm install -g forever

p.s. 如果遇到問題，試著跑下面的指令看看?

1

$ sudo chown vagrant:vagrant -R ~/.npm/

接下來我們就可以使用 forever 這個指令了!

原本我們要啟動 server 的話

是要下:

1

$ npm start

同義於:

1

$ node ./bin/server.js

如果要改用 forever 的話:

1
2
3
4
5


// 記得先到專案根目錄
$ forever start bin/server.js
warn: --minUptime not set. Defaulting to: 1000ms
warn: --spinSleepTime not set. Your script will exit if it does not stay up for at least 1000ms
info: Forever processing file: ./bin/server.js

然後就會被丟到背景執行了

那要怎麼知道我的 server 有跑起來呢?

1
2
3
4


$ forever list
info: Forever processes running
data: uid command script forever pid logfile uptime
data: [0] 6qhd /home/vagrant/.nvm/v0.10.32/bin/node bin/server.js 13746 13748 /home/vagrant/.forever/6qhd.log 0:0:0:47.743

就會列出相關資訊以及 forever 自己的 log file 位置

要關閉的話:

1
2
3
4


$ forever stop bin/server.js
info: Forever stopped process:
data: uid command script forever pid logfile uptime
[0] 6qhd /home/vagrant/.nvm/v0.10.32/bin/node bin/server.js 13746 14061 /home/vagrant/.forever/6qhd.log 0:0:0:6.595

bin/server.js 也可以替換成 forever uid 或 pid

如果要重開的話

1

$ forever restart bin/server.js

超簡單!

這樣就可以不用擔心 server 突然掛掉了….嗎?

錯，還是必須要監控 server 狀態

畢竟，forever 也是會有 bug 的

所以自己的 server 自己顧

真正應用在 production 環境還是必須要監控的

今天就分享到這啦!

[Swift-d28] - 實戰開發 - TODOList - API 3 新增與更新

Tue, 28 Oct 2014 00:00:00 +0800

Github link

昨天做了 get list

今天就來做新增和儲存吧!

可能有人會問說，那讀取一筆 todo 的 API 呢?

因為在這邊資料量少，所有的東西都可以從最外層的 list 拿到

所以雖然有換頁的動作，但是節省流量可以不需要實做這件事

在實際開發中也會如此，case by case，有些情況一次拿完回來處理最好

不過有些則不是~

離題了，

以下是新增 todo 的程式碼:

先到 RestApi.swift 新增 post function

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31


func addTodoList(completionHandler: ((NSDictionary!, NSError!) -> Void)!, content: String) {
 var session = NSURLSession.sharedSession()
 
 var request = NSMutableURLRequest(URL: self.addTodoUrl!)
 request.HTTPMethod = "POST"
 
 var params = ["content": content] as Dictionary<String, String>
 
 var err: NSError?
 request.HTTPBody = NSJSONSerialization.dataWithJSONObject(params, options: nil, error: &err)
 request.addValue("application/json", forHTTPHeaderField: "Content-Type")
 request.addValue(self.API_key, forHTTPHeaderField: "API-Key")
 
 
 let task = session.dataTaskWithRequest(request, completionHandler: {data, response, error -> Void in
 if (error != nil) {
 return completionHandler(nil, error)
 }
 
 var error: NSError?
 let json = NSJSONSerialization.JSONObjectWithData(data, options: NSJSONReadingOptions.MutableContainers, error: &error) as NSDictionary
 
 if (error != nil) {
 return completionHandler(nil, error)
 } else {
 return completionHandler(json, nil)
 }
 })
 
 task.resume()
 }

再來就是在程式中呼叫這隻 API 囉! 我們會在 UpdateViewController 中做這件事

因為這隻 controler 處理了 “Add” 和 “Update” 兩件事

在 save() 這個 function 裡面修改成:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


// 記得 class 中先產生一個 api 物件
var api = RestApi()

func save() {
 if from == "add" {
 api.addTodoList({data, error -> Void in
 if data == nil {
 println(error)
 }
 
 dispatch_async(dispatch_get_main_queue(), {
 println("done")
 self.navigationController?.popToRootViewControllerAnimated(true)
 })
 }, content: self.textField.text)

 } else if from == "edit" {
 println("Save edited data")
 }
 }

打開執行就可以新增 todo 了!

“Update” 的行為和新增一樣

先到 RestApi class 加入 update 的方法:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31


func updateTodoList(completionHandler: ((NSDictionary!, NSError!) -> Void)!, content: String, todoId: String) {
 var session = NSURLSession.sharedSession()
 
 var request = NSMutableURLRequest(URL: NSURL(string: "http://192.168.1.158:3000/user/kerkerj/todos/\(todoId)")!)
 request.HTTPMethod = "PUT"
 
 var params = ["content": content] as Dictionary<String, String>
 
 var err: NSError?
 request.HTTPBody = NSJSONSerialization.dataWithJSONObject(params, options: nil, error: &err)
 request.addValue("application/json", forHTTPHeaderField: "Content-Type")
 request.addValue(self.API_key, forHTTPHeaderField: "API-Key")
 
 
 let task = session.dataTaskWithRequest(request, completionHandler: {data, response, error -> Void in
 if (error != nil) {
 return completionHandler(nil, error)
 }
 
 var error: NSError?
 let json = NSJSONSerialization.JSONObjectWithData(data, options: NSJSONReadingOptions.MutableContainers, error: &error) as NSDictionary
 
 if (error != nil) {
 return completionHandler(nil, error)
 } else {
 return completionHandler(json, nil)
 }
 })
 
 task.resume()
 }

再到剛剛的 UpdateViewController ，把 save() 的另外一個 “edit” 的區塊改成下面的程式碼

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


else if from == "edit" {
 println("Save edited data")
 api.updateTodoList({data, error -> Void in
 if data == nil {
 println(error)
 }
 
 dispatch_async(dispatch_get_main_queue(), {
 println("done")
 self.navigationController!.popToRootViewControllerAnimated(true)
 })
 
 }, content: self.textField.text, todoId: self.index)
 }

所以整個 save() 會長這樣:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28


func save() {
 if from == "add" {
 api.addTodoList({data, error -> Void in
 if data == nil {
 println(error)
 }
 
 dispatch_async(dispatch_get_main_queue(), {
 println("done")
 self.navigationController?.popToRootViewControllerAnimated(true)
 })
 }, content: self.textField.text)

 } else if from == "edit" {
 println("Save edited data")
 api.updateTodoList({data, error -> Void in
 if data == nil {
 println(error)
 }
 
 dispatch_async(dispatch_get_main_queue(), {
 println("done")
 self.navigationController!.popToRootViewControllerAnimated(true)
 })
 
 }, content: self.textField.text, todoId: self.id
 }
 }

在這邊要再修改一個之前的 bug Orz

由於我們要更新的時候，必須要使用到該筆資料的 object id

我們之前在 view 中傳遞的都是 content，都沒有 id，因此要加進去

首先要先改的地方是

ViewController 中的

1
2
3
4


showViewController.id = fakeData[indexPath.row]["id"]

// 改成:
showViewController.id = fakeData[indexPath.row]["_id"]

因為在 mongodb 中 object id 的名字是 _id

再來要在 ShowViewController 中加入一個把 id 傳到 UpdateViewController

在 ShowViewController 中的 editTODO() 加入:

(因為之前 showView 就已經有拿到 id 了，只是先前的欄位寫錯，加上沒有將 id pass 到 UpdateViewControler 才會發生這種事 XD)

1

editViewContronller.id = self.id

應該只有改這樣，最後執行看看

就發現可以編輯成功囉!

快結束啦!

[API-d27] - 實戰開發 - log 處理及 config (db, apikey)

Mon, 27 Oct 2014 00:00:00 +0800

Github 參考

log 處理

今天要來談談 log 的處理，

身為一台自走 (?) node.js API server

也應該要記錄一下 request 的 log 呀！

不然哪天出問題了都不知道是哪個 request 把 server 搞掛了!

因此我們就要加入 log 的 middleware

node.js 的 log 套件也蠻多的, 例如 winston

不過我們今天要用的是 log4js

會選擇他其實也只是因為之前寫 java 有用過 log4j

log4js 的設定感覺起來比較相似

所以就使用它了!

再來我們就安裝一下 log4js 吧

1

$ npm install log4js -save

並在 app.js 中 require 進去

1

var log4js = require('log4js');

接著在 app.js 的前面區段加入以下程式碼:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


log4js.configure({
 appenders: [
 { type: 'console' }, //控制台輸出
 {
 type: 'file', //文件輸出
 filename: 'logs/access.log',
 maxLogSize: 20000000, // 20 MB
 backups: 10,
 category: 'normal'
 }
 ],
 replaceConsole: true
});

var logger = log4js.getLogger('normal');
logger.setLevel('INFO');

app.use(log4js.connectLogger(logger, {level: 'auto', format:':method :url'}));

其實註解已經可以看出一些端倪了

使用 log4js 可以輸出 log 檔案，並且會按照設定的檔案大小來寫入

如果達到 20MB 就會換一個新的檔案寫入，原本的還保留著，不過最多只會保留 10 份

接著就設定 log level, 以及想要 log 的資訊

詳細資訊就可以再多查詢一下

此時我們將 server run 起來吧!

並且對 server 戳幾個 request, 就會發現 log 檔案被建立起來了!

(該程式碼加在 token 檢查前或檢查後是有差異的，加在 token 檢查後面，token error 的話則不會被記錄到 log 裡面)

打開 log 檔看看，就會發現有 log 被寫入囉!

config (db, apikey)

有些重要的設定檔其實我們並不希望寫在程式碼裡，這時候 config 的設定很有用

建立設定檔有很多種方式，比方說直接寫一個 json 檔案，或是 xml 檔案

今天我們就用最簡單的 js 檔案的方式來建立 config 檔

我們在 config 資料夾裡新增一個 config.js

我們以下面的程式碼當作例子:

1
2
3
4
5
6
7
8
9


module.exports = {
 "base_url": "http://localhost:3000",
 "test_token": "55665566",
 "db": {
 "production": "mongodb://192.168.33.10:27017/TODOs",
 "development": "mongodb://192.168.33.10:27017/DEV_TODOs",
 "test": "mongodb://192.168.33.10:27017/TEST_TODOs"
 }
};

要怎麼使用裡面的內容呢?

假設我們要將 db 的連結改成用 config 的方式連結的話:

1
2
3
4


var config = require('./config/config');

// Set DB
mongoose.connect(config.db.development);

只要先將 config require 進來，然後就直接使用它就好了!

這樣就可以幫助我們將一些重要的設定從程式碼中抽離出來了!

今天就這樣啦!

[Swift-d27] - 實戰開發 - TODOList - API 2 讀取清單資料

Mon, 27 Oct 2014 00:00:00 +0800

Github link

(某一天把兩天份的 commit 在一起了忘了開 branch 了…)

接下來就要來寫 api utility 了

我們先開一個 swift 檔案 RestApi.swift

1
2
3
4
5
6


import Foundation

class RestApi {
	var API_key = "55665566"
	var getListUrl = NSURL(string: "http://192.168.1.158:3000/user/kerkerj/todos")
}

先做好前置設定，因為 API 有上簡單的小鎖，因此要先寫起來

還有 request 的網址

以下是 get list 的範例:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25


func getTodoList(completionHandler: ((NSArray!, NSError!) -> Void)!) {
 var session = NSURLSession.sharedSession()
 
 var request = NSMutableURLRequest(URL: self.getListUrl!)
 request.HTTPMethod = "GET"
 request.addValue("application/json", forHTTPHeaderField: "Content-Type")
 request.addValue(self.API_key, forHTTPHeaderField: "API-Key")
 
 let task = session.dataTaskWithRequest(request, completionHandler: {data, response, error -> Void in
 if (error != nil) {
 return completionHandler(nil, error)
 }
 
 var error: NSError?
 let json = NSJSONSerialization.JSONObjectWithData(data, options: NSJSONReadingOptions.MutableContainers, error: &error) as NSArray
 
 if (error != nil) {
 return completionHandler(nil, error)
 } else {
 return completionHandler(json, nil)
 }
 })
 
 task.resume()
 }

我們使用內建的 NSURLSession.sharedSession 以及 NSMutableURLRequest 來建立 request

裡面就是設定一些 header 以及 API-Key

另外在資料回來後，return callback

在這邊有 async，寫隔壁棚的 api 回過頭來看這個感覺很熟悉 XD

設定好 API 後

回到顯示 todo 清單的主頁程式碼

由於我們希望能夠在 view 每次被呼叫時，都可以對 API server 做存取

因此必須要將 getTodoList 寫在該方法裏

該方法為 override func viewWillAppear(animated: Bool) {}

先建立一個 api 物件

1

var api: RestApi = RestApi()

將原本的假資料刪除或註解, 不過資料物件名稱就繼續用 fakeData XD

1
2
3
4
5


// fakeData = [
// ["id": "1", "content": "A"],
// ["id": "2", "content": "B"],
// ["id": "3", "content": "C"],
// ]

接著在 ViewController override 一個 viewWillAppear 的方法

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48


override func viewWillAppear(animated: Bool) {
 super.viewWillAppear(true)
 
 api.getTodoList({data, error -> Void in
 if error != nil {
 dispatch_async(dispatch_get_main_queue(), {
 let alert = UIAlertView()
 alert.title = "Yoooooooooooooooo"
 alert.message = "Get list faild, maybe check your network: \(error)"
 alert.addButtonWithTitle("ok")
 alert.delegate = self
 alert.show()
 println(error)
 })
 }
 
 if (data != nil) {
 
 var tmpArr = [[String: String]]()
 
 for item in data {
 var _id = item["_id"] as String
 var content = item["content"] as String
 var dic = [String: String]()
 
 dic["_id"] = _id
 dic["content"] = content
 
 tmpArr.append(dic)
 }

 self.arr = tmpArr
 
 println(self.arr)
 
 dispatch_async(dispatch_get_main_queue(), {
 // must be "tableView!" not "tableView?"
 self.tableView!.reloadData()
 })
 
 }
 })
 
 dispatch_async(dispatch_get_main_queue(), {
 // must be "tableView!" not "tableView?"
 self.tableView!.reloadData()
 })
 }

以上方法都是 async 的方式

只要網路錯誤，就會直接跳一個 alert

若有資料的話就 parse

一併轉換成原本定義的 [[String: String]] 中

執行看看吧!

很明顯每次切回主頁時 api console 都會跳一行 request~

如果使用 sync 的方式就會卡很久! 而且更新 UI 還會 crash XD

我覺得這部分是需要好好去做處理的，在這邊的程式碼只是簡單 demo

並沒有考慮到太多 :P

明天繼續!

[API-d26] - 實戰開發 - API-key

Sun, 26 Oct 2014 00:00:00 +0800

Github 參考

假設今天我們的 API 上線了，可能就會面臨到一些問題，

例如說，任何人都可以存取我們的 API

當然我們不希望任何人都可以存取，

因此我們必須加一點驗證機制在裡面，

其中一種做法是使用 Oauth token

在拿 API 資料前，先向 Oauth server 要一個 token

Oauth Server 認可身份後即會核發一個 token 給 client 端

該 token 具有時效性，6 mins ~ 30 min 不等，看怎麼實作

接著 client 端就拿該組 token 以及 API url 對 resources server 丟 request

其實我們現在在做的 API server 就是一個 resources server

因為我們提供資源

而 resources server 就會先認 token，

確保該 token 的時效性以及正確性，以及該 token 可存取的資源範圍

確認無誤後再回送正確的資料

不過在這邊我們並沒有要實作 Oauth Server

單純以一個 resources server 而言，只要認 token 是否正確

因此我們在這邊用 API-Key 實作即可，簡單的服務只要不被猜到就好

程式碼如下，記得加在 router 前面

app.js:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


// Set Header Check
app.use( function(req, res, next) {
 var api_key = req.get('API-Key');

 if (api_key != "55665566") {
 res.status(401).send({ error: "Unauthorized"});
 }
 else {
 next();
 }
});

一樣是 middleware 的概念

不過是會預先作處理

我們接收到 request 後，分析它的 header 中是否有 API-Key 這個欄位

若有的話，確認他的值是否為 55665566

若不是的話，回傳 401 Unauthorized

若正確則繼續走下一個 middleware

這樣就可以做一道簡單的防線了

若加了這道防線

在使用 POSTMAN 做 request 時，必須加入自定 header

沒加入的話:

有加入的話:

是不是很簡單呢!

[Swift-d26] - 實戰開發 - TODOList - API 前置資料準備

Sun, 26 Oct 2014 00:00:00 +0800

接下來是要串隔壁棚的 API XD

從前幾天的 APP 組成

我們所需要的資料大概會是以下幾種:

GET todo list

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


GET http://192.168.1.158:3000/user/kerkerj/todos

return:
[
 {
 "_id": "54441f64d84f1ea412db855c",
 "updated_at": "2014-10-19T20:30:28.797Z",
 "created_at": "2014-10-19T20:30:28.797Z",
 "content": "task11syy",
 "user_id": "kerkerj",
 "__v": 0
 },
 {
 "_id": "54441f6fd84f1ea412db855e",
 "updated_at": "2014-10-19T20:30:39.957Z",
 "created_at": "2014-10-19T20:30:39.957Z",
 "content": "task13",
 "user_id": "kerkerj",
 "__v": 0
 }
]

Get a todo task

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


GET http://192.168.1.158:3000/user/kerkerj/todos/54441f64d84f1ea412db855c

return:
{
 "_id": "54441f64d84f1ea412db855c",
 "updated_at": "2014-10-19T20:30:28.797Z",
 "created_at": "2014-10-19T20:30:28.797Z",
 "content": "task11syy",
 "user_id": "kerkerj",
 "__v": 0
}

Add a todo task

1
2
3
4


POST http://192.168.1.158:3000/user/kerkerj/todos/
data: {"content": "your data"}

return: the data you sent

Update a todo task

1
2
3
4


PUT http://192.168.1.158:3000/user/kerkerj/todos/
data: {"content": "your data"}

return: the data you sent

Delete a todo task

1
2
3
4


DELETE http://192.168.1.158:3000/user/kerkerj/todos/54441f64d84f1ea412db855c

return 
{"success": "true"}

從以上資料可以知道

最重要的欄位就是 _id, user_id, content

user_id 我們在 app 中就直接寫死了

所以最重要的就是 content 及 _id

今天先允許我偷懶一下，明天就要開始寫 api utility 給 swift 用

[API-day25] - 實戰開發 - 處理 404 & 500

Sat, 25 Oct 2014 00:00:00 +0800

Github 參考

不知道大家在用 POSTMAN 對前幾天寫的 API 丟 request 有沒有遇過類似下面的情況:

1

Cannot GET /user/kerkerj/todoss

通常是丟錯網址時會出現的，或是 code 沒寫好會出現 500 error

這些情況是有辦法接到的，今天我們希望能夠接到後，將 message 轉成 json 格式吐回給 client

因此程式碼如下

app.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


// catch 404 and forward to error handler
app.use(function(req, res, next) {
 var err = new Error('Not Found');
 err.status = 404;
 res.status(404).jsonp({error: "Not Found"});
 next();
});

// catch 500
app.use(function(err, req, res, next) {
 res.status(err.status || 500).json({error: err.message});
});

基本上這兩段 code 的意思就是加入了兩個 middleware

如果進來的 request 是屬於 404 or 500 就會回傳 json 格式

並且依錯誤碼不同而回傳不同的訊息

試著將 server 跑起來

亂丟 request 看看

原本應該會是

1

Cannot GET /user/kerkerj/todoss

就會變成了 json

1
2
3


{
 "error": "Not Found"
}

這樣一來, client 程式也就能夠統一接收 json 回傳，而不會因為莫名的字串導致解析錯誤而 crash 了!

[Swift-day25] - 實戰開發 - TODOList - Update View

Sat, 25 Oct 2014 00:00:00 +0800

Github link

(忘了是放在哪個 branch 了 Orz)

接下來就要進到最後一個 Update View 了!

什麼時候會進到 Update View 呢？

是在顯示單筆 TODO 的時候的右上方按鈕:

我們今天只會實作 view 的部分, fakeData 就不實作了

因為接下來就要直接接 API 啦

也不需要更新 fakeData 了 :P

要加入 Edit 這個按鈕

要到 ShowViewController, 加入 UIBarButtonItem

並且讓其吃到一個方法，可以讓 Navigation 往下一個 View 前進:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


var id: String!

override func viewDidLoad() {
 super.viewDidLoad()
 
 indexLabel.text = "\(index)"
 contentLabel.text = content
 
 self.navigationItem.rightBarButtonItem = UIBarButtonItem(title: "Edit", style: UIBarButtonItemStyle.Bordered, target: self, action: Selector("editTodo"))
 }

p.s. 先前忘記加了 id, 現在補回來 XD

先新增一個 Edit 按鈕後

並實作 editTodo

1
2
3
4
5
6
7
8


func editTodo() {
 var editViewContronller = UpdateViewController(nibName: "UpdateViewController", bundle: nil)
 editViewContronller.from = "edit"
 editViewContronller.content = content
 editViewContronller.index = index
 
 self.navigationController?.pushViewController(editViewContronller, animated: true)
 }

由於要先指定資料

因此再到 UpdateViewController 中再加入兩個參數

1
2


 var index: Int!
 var content: String!

最後在 UpdateController 的 viewDidLoad 中, 加入 add or edit 的判斷

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


override func viewDidLoad() {
 super.viewDidLoad()
 
 self.navigationItem.rightBarButtonItem = UIBarButtonItem(title: "Save", style: UIBarButtonItemStyle.Done, target: self, action: Selector("save"))
			
		 if self.from == "edit" {
 self.textField.text = content
 }
 
 }

這時候先前設定的 “from” 參數就很有用了~

就可以根據是從 add 的 view 來的或者是 edit 的 view 來的

以便判定要不要 append 舊資料上去

此外，也因為如此

所以 UpdateViewController 的 save 方法也要判斷

1
2
3
4
5
6


 if from == "add" {
 delegate.addData("g6", content: self.textField.text)
 self.navigationController?.popToRootViewControllerAnimated(true)
 } else if from == "edit" {
 println("Save edited data")
 }

不過因為今天我們不做資料更新

因此流程面大致上到此告一個段落

接下來就要串 API 了!

[API-d24] - 實戰開發 - 刪除 TODO task API with mongoose

Fri, 24 Oct 2014 00:00:00 +0800

Github 參考

還記得昨天說要偷懶一下嗎 XD

因為刪除真的很簡單!

我們前面走過了新增、修改、讀取了

刪除？哪有什麼困難的呢! XD

直接看 code 吧!

routes/users.js:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


// Delete a todo task
router.delete('/:user_id/todos/:todo_id', function(req, res) {
 var user_id = req.params.user_id;
 var todo_id = req.params.todo_id;

 TODO.remove(
 { _id: todo_id, user_id: user_id },
 function (err) {
 if (err) {
 res.status(400).json(
 { error: "delete data error"}
 );
 } else {
 res.status(201).json(
 { success: "true" }
 );
 }
 }
 );
});

非常的簡單!

先抓到 user_id, todo_id 後

使用 .remove 的方法，下 WHERE 條件，並在 callback 作處理

就完成了!

試試看吧!

是不是非常的簡單呢！

我們已經完成 CRUD API 操作了！

接下來幾天會稍作一些細節上的處理!

[Swift-d24] - 實戰開發 - TODOList - Create View

Fri, 24 Oct 2014 00:00:00 +0800

Github link

今天要來建立 “新增資料” 的頁面

不過這個頁面我們也會拿來給 “更新資料” 的頁面使用

原因其實很簡單

兩邊要建立或編輯的資料是一樣的

差別只在於，當今天是編輯資料的 view call 該頁面時，

該頁面除了顯示編輯框外，編輯框內的文字也會預先 load 好舊的資料了

除此之外兩個 view 的排版一模一樣

所以在這邊我們就只建立一個 UpdateViewController 就可以了

那我們一樣建立一組 UpdateViewController.swift + UpdateViewController.xib

也一樣為元件建立關聯

回到主頁

我們幫 Add 新增一個按鈕吧

在 viewDidLoad 中

1

self.navigationItem.rightBarButtonItem = UIBarButtonItem(title: "Add", style: UIBarButtonItemStyle.Done, target: self, action: Selector("pushToAddTODO"))

設定 Navigation 的右邊鍵的功能

並且根據 pushToAddTODO 的方法做事情

因此繼續下去將 pushToAddTODO 方法做一下

1
2
3
4
5
6


	func pushToAddTODO(){
 var addViewController = UpdateViewController(nibName: "UpdateViewController", bundle: nil)
 addViewController.from = "add"
 
 self.navigationController?.pushViewController(addViewController, animated: true)
 }

這樣寫完後就可以執行看看了!

剩下的任務就是將資料寫進 fakeData 不過考慮到之後我們是使用 API

因此就先不特別作 ShowViewController 的資料傳遞

再來就做 create view 裡面的 save 按鈕!

接著就要到 UpdateViewController

幫 NavigationController 再多加一個右邊按鈕 “Save”

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


import UIKit

class UpdateViewController: UIViewController {

 var from: String!
 @IBOutlet var textField: UITextField!
 
 override func viewDidLoad() {
 super.viewDidLoad()
 
 self.navigationItem.rightBarButtonItem = UIBarButtonItem(title: "Save", style: UIBarButtonItemStyle.Done, target: self, action: Selector("save"))
 }

 override func didReceiveMemoryWarning() {
 super.didReceiveMemoryWarning()
 }
 
 func save() {
 self.navigationController?.popToRootViewControllerAnimated(true)
 }
}

整個程式碼都不難, 只有簡單處理 push/pop 的問題而已!

如果我們要加上對 ViewController 的 fakeData 做存取的話，請看以下：

由於需要資料傳遞，因此就必須寫 protocol

protocol 可簡單可複雜，今天會寫非常簡單版!

首先先新建一個 swift 檔案, 名為 TodoProtocol.swift

內容如下:

1
2
3


protocol UpdateTODOlistDelegate {
 func addData(id: String, content: String)
}

接著到 UpdateViewController 中新建一個變數屬於 UpdateTODOlistDelegate protocol:

1

var delegate: UpdateTODOlistDelegate!

並且設定 save 後的行為，會呼叫 protocol 中的

addData(id: String, content: String)

將欲新增的 id, content 都丟給該方法

1
2
3
4
5


func save() {
		//	"id" 在這邊是直接給死的
 delegate.addData("67", content: self.textField.text!)
 self.navigationController?.popToRootViewControllerAnimated(true)
 }

接著只要在主頁的程式碼中時做 protocol, 設定接到參數後的動作

就可以在接到參數後，將資料寫入 fakeData 了!

回到主頁的程式碼，class 必須先繼承 protocol，再實作

設定繼承後, 實作 addData, 將接到的資料寫入 fakeData:

1
2
3
4
5
6
7
8


func addData(id: String, content: String) {
 self.fakeData.append(["id": id, "content": content])
 
 dispatch_async(dispatch_get_main_queue(), {
 // must be "tableView!" not "tableView?"
 self.tableView!.reloadData()
 })
 }

記得將 addViewController 的 delegate 設定成 self

1
2
3
4
5
6
7


func pushToAddTODO(){
 var addViewController = UpdateViewController(nibName: "UpdateViewController", bundle: nil)
 addViewController.from = "add"
 addViewController.delegate = self
 
 self.navigationController?.pushViewController(addViewController, animated: true)
 }

執行起來就可以增加資料到 fakeData 了!

[API-d23] - 實戰開發 - 修改 TODO task API with mongoose

Thu, 23 Oct 2014 00:00:00 +0800

Github 參考

接上篇，我們已經可以拿到 todo list 了

也可以拿到特定的 todo task

再來我們就可以編輯特定的 todo task 了對吧?

不囉唆直接進入程式碼

routes/users.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24


// Update a todo task
router.put('/:user_id/todos/:todo_id', function(req, res) {
 var user_id = req.params.user_id;
 var todo_id = req.params.todo_id;
 var data = req.body;

 TODO.update(
 { _id: todo_id, user_id: user_id },
 { $set: { content: data.content } },
 function (err, num, raw, results) {
 if (err) {
 res.status(400).json(
 { error: "update data error" }
 );
 } else {
 TODO.find({ _id: todo_id, user_id: user_id }, function (err, results) {
 res.status(201).json(
 results[0]
 );
 });
 }
 }
 );
});

這次拿資料要拿三組: user_id, todo_id, 以及 data from req.body

1
2
3


var user_id = req.params.user_id;
var todo_id = req.params.todo_id;
var data = req.body;

body 的資料很簡單，就是欲修改的 content 的資料:

1

{ "content": "想修改的資料" }

再來，除了是使用 .update 方法以及同樣要下 WHERE 參數外， .update 方法還多了一個參數:

1
2


{ _id: todo_id, user_id: user_id },
{ $set: { content: data.content } },

$set 的意思等同於 SQL 語法中的 SET

如果沒有加 $set 變成下面這樣:

1
2


{ _id: todo_id, user_id: user_id },
{ content: data.content } ,

整個資料就會被洗掉，變成只有 { content: data.content }

因此有沒有加 $set 差很多哦

後面一樣是 callback 的處理

都寫好後，實際開 POSTMAN 試試看吧!

記得要使用 PUT 來丟 request

例子如下，我把原本的 buy milk 改成 buy milk and banana

這樣離完成 API 就不遠啦!

明天就稍微休息一下吧 XD

[Swift-d23] - 實戰開發 - TODOList - Show View 2, Delete View

Thu, 23 Oct 2014 00:00:00 +0800

Github link

延續昨天，接下來要做換頁

因此我們必須先新建立一個 ShowViewController, 以及他的 xib

接著我們在 xib 拉幾個元件: 兩個 label, 一個用來顯示目前的 index, 另一個則是顯示內容

拉好後，將這兩個元件設定連結到 ShowViewController.swift

另外多在 ShowViewController 中放兩個變數

1
2


var index: Int!
var content: String!

回到 ViewController, 到 tableView didSelectRowAtIndexPath 中

因為 didSelectRowAtIndexPath 的意思就是當 cell 被選取時要做什麼事情

因此當 cell 被選取時，我們就要讓他跳到下一頁，並且是使用 ShowViewController 來顯示資料

因此修改此方法:

1
2
3
4
5
6
7
8
9


	func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
 var showViewController = ShowViewController(nibName: "ShowViewController", bundle: nil)
 showViewController.index = indexPath.row
 showViewController.content = fakeData[indexPath.row]["content"]
 
 // 回復非選取狀態
 tableView.deselectRowAtIndexPath(indexPath, animated: true)
 self.navigationController?.pushViewController(showViewController, animated: true)
 }

最後在 ShowViewController 中的 viewDidLoad 加入:

1
2


 indexLabel.text = "\(index)"
 contentLabel.text = content

這樣一來在 ShowViewController 被建立時，顯示的 label 就會將上一個 view 設定的 index, content 的值顯示出來了

執行看看!

這樣 Show 的部分就完成了!

接著我們回到主頁

要來建立將 cell 向左滑可以刪除的事件，這是 iOS 內建的事件，

因此建立方法也很簡單:

一樣是覆寫 tableView 的方法

要讓 tableView 可以編輯 row - canEditRowAtIndexPath

1
2
3


	func tableView(tableView: UITableView, canEditRowAtIndexPath indexPath: NSIndexPath) -> Bool {
 return true
 }

按下確認刪除後的行為 - 我們在這邊實際上是刪除 fakeData 的值

所以只要 App 重開後就又會回到三筆資料了

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


	func tableView(tableView: UITableView, commitEditingStyle editingStyle: UITableViewCellEditingStyle, forRowAtIndexPath indexPath: NSIndexPath) {

 self.fakeData.removeAtIndex(indexPath.row)
 
 dispatch_async(dispatch_get_main_queue(), {
 // must be "tableView!" not "tableView?"
 self.tableView!.reloadData()
 })

 let alert = UIAlertView()
 alert.title = "Alert"
 alert.message = "Deleted!"
 alert.addButtonWithTitle("Ok")
 alert.show()
 }

這樣我們就有顯示單筆以及顯示多筆還有刪除可以用了!

[API-d22] - 實戰開發 - 讀取 TODO task API with mongoose

Wed, 22 Oct 2014 00:00:00 +0800

Github 參考

如果有使用 MongoDB client 的話就可以搭配使用會比較有感覺

Mac 我是使用 Robomongo，算很好上手~

今天要來實作讀取的部分

讀取有分兩種，一種是讀取 list

另一種是讀取特定某個 todo task，今天兩種都會實作

首先我們先實作 get todo list

因為若要拿到特定的 todo task，需要 todo task 的 id

而我們現在還不曉得 todo task 的 id 是多少，我們只知道 user_id

因此就先從 list 下手

routes/users.js:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


// Get todo list
router.get('/:user_id/todos', function(req, res) {
	var user_id = req.params.user_id;

 TODO.find(
 {user_id: user_id},
 function (err, results) {
 if (err) {
 res.status(400).json(
 { error: "can not find data" }
 );
 } else {
 res.status(200).json(
 results
 );
 }
 }
 );
});

上面程式碼的意思是，先抓到 uri 的 user_id

再來就直接進 db 找，find() 的第一個參數為:

1

{user_id: user_id},

可以想像成是 SQL 語法中的 WHERE 條件

1

SELECT * WHERE user_id = 'user_id' FROM todos

而 callback 則是針對 error 或 results 作處理

試著將 server 跑起來，然後使用 POSTMAN 丟 GET request 試試看

如果沒有資料，就利用昨天實作的 POST API 新增幾個吧！

記得 url 中輸入的 user_id 要在 DB 中有該 user 的資料才找的到資料哦

如此一來就有 task id 了!

再來就來實作讀取特定 id 的 task API 吧!

程式碼如下

routes/user.js:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


// Get a todo task
router.get('/:user_id/todos/:todo_id', function(req, res) {
 var user_id = req.params.user_id;
 var todo_id = req.params.todo_id;

 TODO.find(
 { _id: todo_id, user_id: user_id},
 function (err, results) {
 if (err) {
 res.status(400).json(
 { error: "can not find data" }
 );
 } else {
 res.status(200).json(
 results[0]
 );
 }
 }
 );
});

這次更簡單了，user_id 及 todo_id 都是從 url 上取值

接著一樣使用 where 條件，將值帶入找資料

最後交給 callback 處理回傳值

將 server 跑起來，試著先從todo list 複製某一筆 _id 的值

丟到 url 中試試看

如此一來，讀取特定 task 的 API 也完成囉!

[Swift-d22] - 實戰開發 - TODOList - Show View 1

Wed, 22 Oct 2014 00:00:00 +0800

Github link

接著我們要讓主頁顯示一些假資料:

由於我們未來接的 api 的資料會是 todo_id + content

因此我們先產生一個 dictionary array 來存放我們的假資料

1
2
3
4
5
6


var fakeData = [[String:String]]()
fakeData = [
	["id": "1", "content": "A"],
	["id": "2", "content": "B"],
	["id": "3", "content": "C"],
]

再來對主頁的 controller 新增 tableView 上去

並且對 UITableView 加入 delegate 以及 datasource

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28


import UIKit

class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {
 
 var fakeData = [[String:String]]()
 var tableView: UITableView?
 
 override func viewDidLoad() {
 super.viewDidLoad()
 // Do any additional setup after loading the view, typically from a nib.
 
 fakeData = [["1": "A"], ["2": "B"], ["3": "C"]]
 self.view.backgroundColor = UIColor.yellowColor()
 
 self.tableView = UITableView(frame: self.view.frame)
 self.tableView?.delegate = self
 self.tableView?.dataSource = self
 
 self.view.addSubview(self.tableView!)
 }

 override func didReceiveMemoryWarning() {
 super.didReceiveMemoryWarning()
 // Dispose of any resources that can be recreated.
 }


}

此時編譯器就會要求實作 UITableViewDataSource, UITableViewDelegate 的 methods

實作完就可以讓 TableView 顯示資料, 這我們之前也都有提到過了~

在這邊我們也同時使用自訂的 CustomTableViewCell, 簡單對 cell 改個顏色，雖然沒什麼多大用處 XD

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


	func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
 return self.fakeData.count
 }
 
 func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
 var cell: CustomTableViewCell? = tableView.dequeueReusableCellWithIdentifier("CustomCell") as? CustomTableViewCell
 
 if cell == nil {
 var objects = NSBundle.mainBundle().loadNibNamed("CustomTableViewCell", owner: self, options: nil)
 cell = objects[0] as? CustomTableViewCell
 }
 
 cell!.textLabel?.text = (self.fakeData[indexPath.row])["content"]
 
 return cell!
 }

不過可以看到有小瑕疵，就是選取後他並不會回覆成原本的模樣

因此加入 tableView didSelectRowAtIndexPath:

1
2
3
4
5


	func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
 
 // 回復非選取狀態
 tableView.deselectRowAtIndexPath(indexPath, animated: true)
 }

明天就會提到換頁以及刪除的作法!

[API-d21] - 實戰開發 - 新增 TODO task API with mongoose

Tue, 21 Oct 2014 00:00:00 +0800

Github 參考

昨天我們了解了如何拿 url params 以及 request data

今天我們就來使用他，對資料庫做存取

由於使用到資料庫，因此我們要加入資料庫的 driver

我們用的是 mongoose 套件

app.js:

1
2
3
4
5
6


// 在最上方加入
var mongoose = require('mongoose');

// 在某個地方連接資料庫
var db_uri = "mongodb://192.168.33.10:27017/TODOs";
mongoose.connect(db_uri);

在這邊我是使用了虛擬機的 DB，因此是 mongodb://192.168.33.10:27017/TODOs

DB 的名稱為 TODOs

這樣在程式一跑起來時，就會連接資料庫了!

再來我們就要設定在對資料庫做 CRUD 時，所需要做的事情

首先我們先要定義 schema，

雖然 mongodb 是 schema-free，但是官方文件也有提到最好還是有固定的 schema 避免記憶體 allocate 時出現問題，而程式撰寫時邏輯也不會因此而過於複雜

這時候我們就需要 model 資料夾了，在 model 資料夾中新增一個 todos.js

裡面要放的就是 todo task 的 schema

內容如下:

models/todos.js:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


'use strict';

var mongoose = require('mongoose');

// Define our todo schema
var TODOschema = new mongoose.Schema({
 user_id: String,
 content: String,
 created_at: Date,
 updated_at: Date
});

// Export the Mongoose model
module.exports = mongoose.model('TODO', TODOschema);

我們定義了幾個東西 user_id, content, created_at, updated_at

其實 ObjectID 中已經有包含建立資訊了，其實 created_at 是可以省略掉的，不過在這邊還是加一下

注意下面這行:

1

module.exports = mongoose.model('TODO', TODOschema);

‘TODO’ 在這邊是 Collection (RDBMS 中的 table) 的名稱

在 mongoose 中，會自動複數化，所以在 Mongodb 中的 Collection name 會變成 ’todos’ ，

雖然只是小小的一行，但是蠻重要的

最後將這個 model exports 成一個 mongoose.model 物件

那我們什麼時候會用到這個 model 物件呢?

就是在 routes/user.js 中，

routes/users.js:

1

var TODO = require('../models/todos');

這樣在 users.js 中就可以使用 TODO 這個物件了!

我們先試著編輯 POST 的 route，拿到 POST 資料後，將資料轉成 TODO 的物件，存到 mongodb 裏

以下是 routes/users.js 中的 post 程式碼段

簡單來說就是先抓到 uri 的參數以及 post data

並且使用 models/todos.js 的 model 新建立一個 todo 物件

並將該物件用 post data 初始化，

初始化完後就執行寫入 DB 的行為, 若寫入成功則回傳 201 + data

失敗則回傳 400 bad request

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24


// Create a todo task
router.post('/:user_id/todos', function(req, res) {
 var user_id = req.params.user_id;
 var data = req.body;

 // insert to db
 var todo = new TODO();
 todo.user_id = user_id;
 todo.content = data.content;
 todo.created_at = Date.now();
 todo.updated_at = Date.now();

 todo.save(function (err) {
 if (err) {
 res.status(400).json(
 { error: "insert db error" }
 );
 } else {
 res.status(201).json(
 todo
 );
 }
 });
});

試著執行伺服器看看，並且使用 POSTMAN 丟 request 如下:

POST 的 raw data

1

{ "content": "buy milk" }

於是就完成了一個 POST 新增 TODO 的 API 了！

[Swift-d21] - 實戰開發 - TODOList - 前置設定

Tue, 21 Oct 2014 00:00:00 +0800

Github link

首先在開始寫這隻 app 前，

我們要先定義好程式大致上的流程

基本上接下來的程式碼都不會用到 storyboard

只會用到程式 + xib

程式的流程大致上是使用 Navigation controller 來控制 view 的轉換

第一頁 - tableView 顯示 todo items list

點進子項目可以觀看內容，進到子頁後可以編輯，

編輯後就即可存檔

新增項目則在主頁的右上角 “Add” 可以新增

我們會先從建立假的資料開始，也就是我會先刻出程式的流程

先不接 API

實際寫出運作流程後，再加上 API 操作的部分

因此今天的進度就先開一個新專案，將基本的 Navigation + tableView 建立起來吧:

首先建立一個新專案

再來到 project settings

將 Main Interface 及 Launch Screen file 拿掉

並將 deploy target 設成 7.1 (反正用到的程式碼都一樣~ 沒有特別使用 8.0 的 lib)

設定 device orientation - 只限定直的

接著就來編輯 AppDelegate.swift

建立一個 NavigationController + ViewController

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {

 var window: UIWindow?
 var navigationController: UINavigationController?
 var viewController: ViewController?

 func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {
 // Override point for customization after application launch.
 
 self.window = UIWindow(frame: UIScreen.mainScreen().bounds)
 self.window?.backgroundColor = UIColor.whiteColor()
 
 self.viewController = ViewController()
 self.viewController?.title = "TODO List"
 
 self.navigationController = UINavigationController(rootViewController: self.viewController!)
 
 self.window?.makeKeyAndVisible()
 self.window?.rootViewController = navigationController
 
 return true
 }

就是之前有用到的程式碼，稍作改寫

再來到 ViewController 中, 將背景色稍改一些

1
2
3
4
5
6


override func viewDidLoad() {
 super.viewDidLoad()
 // Do any additional setup after loading the view, typically from a nib.
 
 self.view.backgroundColor = UIColor.yellowColor()
 }

最後將 storyboard 以及 launchScreen.xib 刪掉

執行程式，就 OK 囉！

[API-d20] - 實戰開發 - Routes 2, get params and request data

Mon, 20 Oct 2014 00:00:00 +0800

Github 參考

接著我們要根據我們開之前寫好的文件來開發:

要有下列 routes

1
2
3
4
5
6


TODOs
GET /user/{user_id}/todos/
POST /user/{user_id}/todos/
GET /user/{user_id}/todos/{id}
PUT /user/{user_id}/todos/{id}
DELETE /user/{user_id}/todos/{id}

這樣的需求其實可以用 namespace 實作，不過我們偷懶一點，直接指向 /user 就好

所以在 app.js 加入

1
2


var users = require('./routes/users');
app.use('/user', users);

所以會變這樣:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


var express = require('express');
var app = express();

// Set routers
var index = require('./routes/index');
var users = require('./routes/users');

app.use('/', index);
app.use('/user', users);

module.exports = app;

不過看起來我們缺少 routes/users.js，所以我們也來新增一個

routes/users.js 內容如下

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26


'use strict';

var express = require('express');
var router = express.Router();

router.get('/', function(req, res) {

});

router.post('/', function(req, res) {

});

router.get('/', function(req, res) {

});

router.put('/', function(req, res) {

});

router.delete('/', function(req, res) {

});

module.exports = router;

好像有那麼一點符合我們要的 routes 了

我們在把每個詳細的 uri 加入

在這邊要注意

因為我們在 app.js 中把 uers.js 加入了 (’/users’, users)

這個 route

因此在 users.js 中設定的所有 route 都是接在 /users/ 後面的

要注意哦

修改後的檔案:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31


'use strict';

var express = require('express');
var router = express.Router();

// Get todo list
router.get('/:user_id/todos', function(req, res) {
 res.status(200).json( {success: "GET lists"} );
});

// Create a todo task
router.post('/:user_id/todos', function(req, res) {
 res.status(200).json( {success: "POST"} );
});

// Get a todo task
router.get('/:user_id/todos/:todo_id', function(req, res) {
 res.status(200).json( {success: "GET 1 task"} );
});

// Update a todo task
router.put('/:user_id/todos/:todo_id', function(req, res) {
 res.status(200).json( {success: "PUT"} );
});

// Delete a todo task
router.delete('/:user_id/todos/:todo_id', function(req, res) {
 res.status(200).json( {success: "DELETE"} );
});

module.exports = router;```

將 server 重啟，試著對這些網址丟丟看

這時候使用瀏覽器應該就沒辦法丟 GET 以外的要求了對吧?

此時 chrome extension - POSTMAN 就該上場啦！

打開 POSTMAN 就可以送以下的 request 囉!

1
2
3
4
5


GET http://localhost:3000/user/kerkerj/todos 
POST http://localhost:3000/user/kerkerj/todos 
GET http://localhost:3000/user/kerkerj/todos/1 
PUT http://localhost:3000/user/kerkerj/todos/1 
DELETE http://localhost:3000/user/kerkerj/todos/1 

因為剛剛程式裡面都只讓他回傳 success，因此還沒有太大的作用，

不過已經有感覺了對吧!! XD

Get params from url

我們現在先針對以下這段程式碼作進一步的改寫:

1
2
3
4
5
6
7
8
9


// Get a todo task
router.get('/:user_id/todos/:todo_id', function(req, res) {
 res.status(200).json( 
 	{ 
 		success: "GET 1 task", 
 	 	user: req.params.user_id,
 	 	todo_id: req.params.todo_id
 	} );
});

存檔並打開 server，存取 http://localhost:3000/user/test/todos/1

就可以看到回傳值是:

1
2
3
4
5


{
 "success": "GET 1 task",
 "user": "kerkerj",
 "todo_id": "1"
}

所以又學到一招了!

先設定想要抓哪一段網址，例如:

/:user_id/todos/:todo_id

前面有加冒號的就是這段網址是要被抓成一個參數

而冒號後面接的就是之後在下面要使用到的名字

要接網址的參數的拿法 - req.params.{???}

例如:

req.params.user_id

req.params.todo_id

拿到了網址的參數，就可以對資料庫做進一步的查詢

Get request data

那要怎麼拿到 request 的 data 呢?

他並不存在于網址列上啊?

這時候就要加入 body-parser 了!

他會在接收到 request 時，幫我們做過處理後，再傳到每個 request 該去的 router 裏

在 app.js 中加入

1
2
3
4
5
6
7
8
9


// 最上面
var bodyParser = require('body-parser');

// 加在 router 前面，切記!!
app.use( bodyParser.json() );
app.use( bodyParser.urlencoded({ extended: true }) );

app.use('/', index);
app.use('/user', users);

接著在 users.js 中的 POST 區塊中加入兩行:

1
2
3
4
5
6


// Create a todo task
router.post('/:user_id/todos', function(req, res) {
 var data = req.body;

 res.status(200).json( {success: data } );
});

開啓 server, 用下圖的方式對 server 做 request:

記得要加入 header -

Content-Type - application/json

Data 要選擇 raw data - 使用自己寫的 json 格式

就可以看到下面的回傳格式了!

透過拿到 url params 以及 request data

我們就可以使用這些資料來對資料庫做存取了!

[Swift-d20] - Basic - 捨棄 Storyboard 使用純程式碼的方式撰寫 ViewController

Mon, 20 Oct 2014 00:00:00 +0800

今天專案的 Github link

其實哦

寫 Swift 也有幾個禮拜了

我一直覺得使用 Interface Builder 的確很方便

但是在程式面與視覺面之間的溝通常常會漏東漏西的

比方說如果要設定 reusable identifier 時

除了程式裡面的字串要設定以外，還要再到 storyboard 裡設定同樣的字串

一個簡單的小程式可能不超過 20 個 View 的情況下

還可以這樣做，當程式長得非常大的時候，好像就很難注意到這件事，

而且 View 太多 storyboard 就會開始變慢….

因此今天要來試著在 Swift 中

如何不用 Storyboard，來打造我們的程式

(當然 xib/nib 還是會用到，只是我們單純捨棄 storyboard，用程式來控制流程)

首先，一樣先建立一個測試專案

接著我們要動到的程式碼是 AppDelegate.swift:

編輯它:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {

 var window: UIWindow?
 var viewController: ViewController?

 func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {
 // Override point for customization after application launch.

 self.viewController = ViewController()
 self.viewController?.view.backgroundColor = UIColor.redColor()
 
 self.window = UIWindow(frame: UIScreen.mainScreen().bounds)
 self.window?.backgroundColor = UIColor.whiteColor()
 
 self.window?.rootViewController = viewController
 self.window?.makeKeyAndVisible()
 
 return true
 }

其實這段程式碼，就是在做 storyboard 的 “進入點” 這件事

1

var viewController: ViewController?

我們用專案建立時產生的 ViewController 建立了一個物件

並在 application launch 的時候，將該 ViewController 建立起來，設定他的背景顏色為紅色

1
2


self.viewController = ViewController()
self.viewController?.view.backgroundColor = UIColor.redColor()

另外對 window 做一些設定

1
2


self.window = UIWindow(frame: UIScreen.mainScreen().bounds)
 self.window?.backgroundColor = UIColor.whiteColor()

設定他 Screen 大小 (根據手機解析度而定)
並設定 window 的背景顏色為白色

接著是最重要的設定:

1
2


self.window?.rootViewController = viewController
self.window?.makeKeyAndVisible()

我們要讓 viewController 指定為是這個 window 的 rootViewController

並且 makeKeyAndVisible

這樣就完成手動設定進入點的程式了

再來我們就可以大膽一點，把 Storyboard 砍掉啦!

接著執行程式，就可以看到一片紅色了!!!

是不是很簡單!

如果要 NavigationController 也可以直接設定!

接下來的實戰開發專案就會以不使用 Storyboard 的方式開發

增加程式碼可讀性 :P

老是貼圖也很累 XDDDD

接下來就要用 Swift 寫一個 TODOList APP 囉!

並且實際接上隔壁棚的 Restful API XD

[API-d19] - 實戰開發 - index & route & http status code

Sun, 19 Oct 2014 00:00:00 +0800

Github 參考

昨天先把專案目錄初始化，裝完該裝的套件後

在 routes 中加入一個 index.js 檔案

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


'use strict';

var express = require('express');
var router = express.Router();

router.get('/', function(req, res) {
 res.status(200).json({ greetings: "hello world!"});
});

module.exports = router;

建立一個 app.js 在專案根目錄中:

app.js

1
2
3
4
5
6
7
8


var express = require('express');
var app = express();
var index = require('./routes/index');

// Set routers
app.use('/', index);

module.exports = app;

然後在 bin 資料夾建立一個 server.js:

bin/server.js:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


'use strict';

var debug = require('debug')('TODOAPI');
var app = require('../app');

app.set('port', process.env.PORT || 3000);

var server = app.listen(app.get('port'), function() {
 debug('Express server listening on port ' + server.address().port);
});

並且在 package.json 中修改並加入:

加入 start : "start": "node ./bin/server.js",

1
2
3
4


"scripts": {
 "start": "node ./bin/server.js",
 "test": "echo \"Error: no test specified\" && exit 1"
 },

這樣我們就可以透過 npm start 來啟動 server 了!

試著啟動看看 npm start

到網址列輸入 http://localhost:3000/

就可以看到 {"greetings":"hello world!"} 了!

我們從本文的後面往回看：其實就是一個 request 會經過的地方:

當我們下了 npm start，npm 會搜尋 package.json 中有沒有 start 指令

若有的話就會執行他所設定的指令 node ./bin/server.js

這樣就會執行 server.js 了

我們再看一下 server.js，講解在底下的註解:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


// 使用嚴格模式
'use strict';

// 加入 debugger
var debug = require('debug')('TODOAPI');

// 將我們寫的 app.js 引入，建立一個 app instance
var app = require('../app');

// 設定 app instance 的 port, 若環境變數有設定的話就使用環境變數的值
// 沒有設定環境變數的話則是 3000
app.set('port', process.env.PORT || 3000);

// 啟動 server，讓 server 監聽剛剛上一行所設定的 port，
// 並且使用 debugger
var server = app.listen(app.get('port'), function() {
 debug('Express server listening on port ' + server.address().port);
});

既然 server.js 啟動了一個 app.js 的 instance

那我們就要來看一下 app.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


// 引入 express 模組
var express = require('express');

// 初始化一個 express instance
var app = express();

// 將 route 引入
var index = require('./routes/index');

// 設定若有 request 進到 http://localhost:3000/ 時，
// 交給 routes/index.js 來作後續處理
app.use('/', index);

最後這一行是這個檔案 export 成一個模組
module.exports = app;

那現在我們了解到了，如果有一個要求打進了 http://localhost:3000/

它會將該要求轉發給 routes/index.js 來作處理

因此我們再進到 index.js 看看內容

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25


// 使用嚴格模式
'use strict';

// 引入 express 模組
var express = require('express');

// 在這邊我們要使用 express 模組中的 Router
// 因為在 app.js 中，若是使用 app.use('/', index)
// 該 index 物件必須是一個 Router 物件，
// 因此在這邊我們才會這樣寫
// 於是 router 就是一個 express 的 router 物件了
var router = express.Router();

// 設定該 router 有哪些路徑要來聽
// 在這邊我們設定當有 request 進到 根目錄，
// 且是使用 GET 方法時，我們的回覆是:
// HTTP status code 爲 200
// 回傳的資料為 json 格式，傳入的內容是一個 javascript 物件
// .json 方法會幫我們轉成 json 格式回傳給使用者
router.get('/', function(req, res) {
 res.status(200).json({ greetings: "hello world!"});
});

// 最後將這個檔案 export 成一個 router 模組
module.exports = router;

所以透過這樣的方式我們就了解到了一個 request 是如何在模組化後的程式奔跑遊走

另外要特別提到的是 http status code

http status code 其實是一個非常好讓 client 知道這次 API request 發生什麼事的資料，充分利用 HTTP 協議所定義的狀態碼

我們有時候瀏覽網頁會看到: 404 Not found! 或是 500 Internal Server Error

這就是 HTTP status code

那我們可以透過定義好回傳的 http status code 來代表此次 request 的狀態

例如：

client 端輸入的 API 網址錯誤了

我們就回傳 status code: 404

如果是不小心 server 的 code 寫錯了，導致該次 request 完全讓 server 死掉了，

那就可以回傳 500 interanl server error

因此在做 error handling 時，請定義好 status code，他一定會有幫助的!

常用的 status code:

1
2
3
4
5
6
7


200 - Success
201 - Created
400 - Bad request
401 - Unauthorized
403 - Forbidden
404 - Not found
500 - Internal Server Error

詳細還可以參考: HTTP status code

其他教學

[Swift-d19] - Basic - 橋接第三方 Objc library - Reachability and Bridge.h

Sun, 19 Oct 2014 00:00:00 +0800

本日專案的 Github link

由於 Swift 剛推出不到一年

有許多的 third-party library 一定還沒轉換成 Swift

或者是作者沒心力轉會成 Swift

但是有些套件非常方便，那在 Swift 要怎麼使用 Objective-C 的套件呢?

Xcode 有提供橋接的方式，非常好用

接下來就介紹一下如何使用吧!

以下的例子是一個叫做 Reachability 的套件

它可以簡單地幫我們判斷是否有網路連線 3g or wifi 之類的

所以我們先下載這個套件吧!

https://github.com/tonymillion/Reachability

下載解壓縮後

將 .h 和 .m 檔拖曳進 Xcode 專案中

接下來 Xcode 就會問一個非常重要的問題!:

是否要建立橋接的 .h 檔案!

當然是選擇建立囉~

此時的專案結構就會變成這樣:

再來編輯 bridge-header.h 檔

將想要橋接的 objc 套件 import 進去

1

#import "Reachability.h"

這樣我們就可以在 Swift 中直接使用該套件的類別與方法了!

接下來就讓我們試試看!

在 ViewController 中加入以下程式碼:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57


//
// ViewController.swift
// BridgeObjcDemo
//
// Created by Jerry Huang on 2014/10/18.
// Copyright (c) 2014年 kerkerj. All rights reserved.
//

import UIKit

class ViewController: UIViewController {

 override func viewDidLoad() {
 super.viewDidLoad()
 // Do any additional setup after loading the view, typically from a nib.
 
 
 var isConnected = checkNetworkConnection()
 
 let alert = UIAlertView()
 alert.title = "Network Connection"
 
 if isConnected {
 alert.message = "You're online!"
 } else {
 alert.message = "You're offline!"
 }
 
 alert.addButtonWithTitle("OK")
 alert.show()
 }

 override func didReceiveMemoryWarning() {
 super.didReceiveMemoryWarning()
 // Dispose of any resources that can be recreated.
 }
 
 func checkNetworkConnection() -> Bool {
 let reachability: Reachability = Reachability.reachabilityForInternetConnection()
 let networkStatus: NetworkStatus = reachability.currentReachabilityStatus()
 
 println(networkStatus.toRaw())
 
 switch (networkStatus.toRaw()) {
 case 0:
 println("[Network Status]: NotReachable")
 case 1:
 println("[Network Status]: ReachableViaWWAN")
 case 2:
 println("[Network Status]: ReachableViaWiFi")
 default:
 break
 }
 
 return networkStatus.toRaw() != 0
 }
}

簡單的說，我們寫了一個方法，使用 Reachability 偵測網路連線

在 ViewDidLoad 時，偵測是否有網路連線

跳一個 Alert 會告訴你是有連線還是沒有連線

不過在這邊，我不曉得如何讓模擬器關掉連線，

所以沒辦法提供 offline 的圖

但是我實際安裝到手機後，將 wifi 功能關掉後的確是有跳出 offline 的

哈哈雖然說沒圖沒真相但是…XD

橋接第三方套件就是那麼簡單! :D

Swift - Push/Pop Views delay

Sun, 19 Oct 2014 00:00:00 +0800

請大家先看看下面的小短片，注意一下過場動畫的流暢度

一開始是沒有加過場動畫，後來改程式碼變成有過場動畫

後來發現給一個預設的 backgroundColor 後就不會發生殘影的問題了

是因為 push 的 view 沒有 backgroundColor

和同事討論後發現:

Apple Developer Reference

UIView 的 backgroundColor 的 default 值是 null!

Discussion
Changes to this property can be animated. The default value is nil, which results in a transparent background color.

所以是這個原因導致在轉場的時候有殘影

不過切換 View 時 target view 沒有 backgroundColor 的情況應該比較少吧…(?)

剛好在寫鐵人賽的 app 想先把流程弄出來時遇到了這個雷 XD

[API-d18] - 實戰開發 - 套件模組

Sat, 18 Oct 2014 00:00:00 +0800

會使用到的套件:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


主體:
express - web framework
body-parser - parse request body

測試相關:
mocha - test framework
mocha-mongoose - 用來和 mocha 和 mongoose 中間做介接的套件
superagent - 拿它來丟 http request
validator - 用來驗證某個物件是否為某個型別
expect.js - 類似 BDD 的語法，用來寫測試的
debug - debug package

DB 相關:
mongoose - mongodb orm
mongodb - mongodb native driver

開發相關:
nodemon - detect file change and restart server

生產環境相關:
log4js - 記錄 request log

這是我的 package.json, 可以複製到專案目錄，然後下 npm install

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27


{
 "name": "TODOAPI",
 "version": "1.0.0",
 "description": "",
 "main": "app.js",
 "scripts": {
 "start": "node ./bin/server.js env=development",
 "test": "./node_modules/mocha/bin/mocha",
 "test-detail": "./node_modules/mocha/bin/mocha --reporter list",
 "stop": "pkill -lf server.js"
 },
 "author": "kerkerj",
 "license": "ISC",
 "dependencies": {
 "body-parser": "^1.9.0",
 "debug": "^2.0.0",
 "expect.js": "^0.3.1",
 "express": "^4.9.5",
 "log4js": "^0.6.21",
 "mocha": "^1.21.4",
 "mocha-mongoose": "^1.0.1",
 "mongodb": "^1.4.19",
 "mongoose": "^3.8.17",
 "superagent": "^0.20.0",
 "validator": "^3.19.1"
 }
}

安裝套件，及全域套件 mocha

1
2
3


// in project folder
$ npm install express body-parser mocha mocha-mongoose superagent validator expect.js debug mongoose mongodb log4js -save 
$ npm install -g nodemon

各個套件簡單設定

接下來會針對一些套件作說明，但是由於可能有些人不懂整個專案的運作，因此下面看看就好，之後實作上有問題可以再回來看。

Nodemon 的作用

範例:

1
2


$ nodemon ./bin/server.js
...

就可以放著不管它了~ 只要檔案有變動，就會自動重開 server

使用 logger - log4js

設定 logger - log4js, 並將 log 寫入到 logs/access.log 裏

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


// Set logger
var log4js = require('log4js');
log4js.configure({
 appenders: [
 { type: 'console' }, //控制台輸出
 {
 type: 'file', //文件輸出
 filename: 'logs/access.log',
 maxLogSize: 20000000, // 20 MB
 backups: 10,
 category: 'normal'
 }
 ],
 replaceConsole: true
});

var logger = log4js.getLogger('normal');
logger.setLevel('INFO');

app.use(log4js.connectLogger(logger, {level: 'auto', format:':method :url'}));

node log4s

使用 body-parser 處理 request 的資料

加入 middleware

1
2


app.use( bodyParser.json() );
app.use( bodyParser.urlencoded({ extended: true }) );

需要加入 { extended: true/false }, 否則會 warning:

body-parser deprecated undefined extended: provide extended

如果要接收 json request

client 端在 Header 中必須先設定 “Content-type: applciation/json”

才能夠在 router 中使用 req.body 拿到 json 值

測試套件

1
2
3


mocha - 專案
expect.js - 專案
superagent - 專案

測試流程 -

先跑 server 起來，透過自動化程式自動丟 request 給 server，測試結束

1
2
3


$ npm start
$ mocha
$ npm stop

所以必須先在 package.json 中設定好 script

1
2
3
4
5
6
7
8
9


{
	(...)
	"scripts": {
 "start": "node ./bin/server.js",
 "test": "mocha",
 "stop": "pkill -lf server.js"
 },
 (...)
}

由於我將啟動 server 的 script 放在 bin 資料夾裡，因此

npm start 的 script 就會執行:

1

node ./bin/server.js

npm stop 的話，用到了 *nix 的指令，會先到 process list 中找到和 server.js 有關的 process，然後 kill process (pkill)

1

pkill -lf server.js

跑測試的話，直接下 mocha，在這邊我們也丟一個 script 指定給 npm test

下 npm test 就是等同於下 mocha

上面只是大致上講解一下每個套件如何用，接下來我們會以實際的例子來說明

[Swift-d18] - Basic - Customize TableViewCell

Sat, 18 Oct 2014 00:00:00 +0800

今天的主題延續昨天的 Navigation + TableView

我們要來客製化 TableViewCell

通常 TableView 可以被拿來做很多事情，不僅只是像是 ListView 而已

而 TableViewCell 可以做更深度的切版，排列元素

因此自定 TableViewCell 是一件算是還蠻重要的事情

下面的 Code 是延續昨天的專案

我先把已更改過的程式碼貼上來:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45


import UIKit

class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {
 
 @IBOutlet var tableView: UITableView!
 
 var arr = ["A", "B", "C"]
 
 override func viewDidLoad() {
 super.viewDidLoad()
 // Do any additional setup after loading the view, typically from a nib.
 }

 override func didReceiveMemoryWarning() {
 super.didReceiveMemoryWarning()
 // Dispose of any resources that can be recreated.
 }
 
 func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
 return arr.count;
 }
 
 func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
 var cell: CustomTableViewCell? = tableView.dequeueReusableCellWithIdentifier("cell") as CustomTableViewCell?
 
 if cell == nil {
 var objects = NSBundle.mainBundle().loadNibNamed("CustomTableViewCell", owner: self, options: nil)
 cell = objects[0] as? CustomTableViewCell
 }
 
 cell!.textLabel?.text = arr[indexPath.row]
 
 return cell!
 }
 
 func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
 var detailViewController = DetailViewController()
 detailViewController.title = arr[indexPath.row]
 self.navigationController?.pushViewController(detailViewController, animated: true)
 }
 
 func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
 return 165.0
 }
}

今天要新增一個檔案, 我們就稱之為 CustomTableViewCell

就會出現一份 .swift 檔案以及 .xib 檔案了

接下來我們簡單編輯 .xib 檔案，將背景顏色換成其他顏色，以及將它的長度拉高

這樣其實就很簡單地完成了一個小客製化的 TableViewCell 了

那我們要怎麼讓原本的 TableView 吃到這個 TableViewCell 呢?

看以下的 function:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
	var cell: CustomTableViewCell? = tableView.dequeueReusableCellWithIdentifier("cell") as CustomTableViewCell?
 
	if cell == nil {
		var objects = NSBundle.mainBundle().loadNibNamed("CustomTableViewCell", owner: self, options: nil)
		cell = objects[0] as? CustomTableViewCell
	}
 
	cell!.textLabel?.text = arr[indexPath.row]
 
	return cell!
}

我們將 cell 的類別更改成了 CustomTableViewCell

直接使用剛剛產生的 .swift 類別來產生新的 TableViewCell

並且如果 cell == nil ，則會將 Nib 載入

最後設定該 textLabel ，返回 cell

若使用最一開始的程式碼 apply changes

執行！

應該就可以看到成果了!

p.s. 這篇可能實作上會有 bug (我寫的), 就先跳過吧 XD

[API-d17] - 實戰開發 - 專案結構

Fri, 17 Oct 2014 00:00:00 +0800

首先我們就在虛擬機的資料夾底下，建立一個專案資料夾吧!

今天會來簡單切割一下我們的專案目錄

建立新專案目錄:

1
2
3
4
5
6


$ cd /vagrant/
$ mkdir TODOAPI
$ cd TODOAPI
$ npm init
// 輸入專案資訊
$ 

建立專案結構

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


/
| - bin/
| - routes/
| - model/
| - node_modules/
| - logs/
| - config/
| - test/
| - app.js
| - package.json

分別講解一下各個 folder 的工作:

`bin`

筆者會在 bin 資料夾底下放一個 server.js

這個 server.js 就是會專門用來啟動一個 app.js instance

`routes`

基本上如果了解 MVC 架構的話，routes 就是 controller 的意思，其實如果讀者本身夠了解的話，這個資料夾也可以改成 controller 也 ok，應該說，其實資料夾怎麼放都是看個人隨意即可，只是若是要模組化的話，筆者會這樣來處理一個專案結構。

`model`

拿來放資料庫 schema 以及相關的資料庫操作的資料夾

`node_modules`

這其實是之後安裝的模組會放在這個資料夾裡，在這邊可以先不用建立沒關係

`logs`

由於我們是建立一個 restful service，因此 log 的記錄也是很重要的，我們把 log 放在這個資料夾裡

`configs`

我們在這個資料夾裡放置一些專案設定，例如 db 設定或者是 log 的設定等等

`test`

撰寫測試程式的資料夾~

`app.js`

程式的進入點，可以想像成 index.php~

`package.json`

專案的資訊以及相關模組的資訊都會被放在這裡!

其實關於專案結構有許多不同的討論，express 也有一個專案自動產生器，不過如果對結構內容不了解而使用產生器的話，很容易變成只知表面不知內部運作，因此我們還是一步一步來，先定義好我們專案的需求結構

另外，因為我們是建立 restful API service，在此並沒有用到 html 頁面，也因此就沒有 view 或 public 這兩個資料夾囉~

[Swift-d17] - Basic - Navigation View + TableView

Fri, 17 Oct 2014 00:00:00 +0800

今天要把 Navigation View 和 Table View 結合起來!

把 NavigationController 拉進 Storyboard

將程式進入點指向 NavigationController

把原本程式自動產生的 UIViewController 刪除

把自動產生的 TableViewController 刪除!

拉一個新的 UIViewController

將 NavigationController 的 RootViewController 指向新的 ViewController

把 TableView 拉進 ViewController

再將 TableViewCell 拉進 TableView

再點選 ViewController, 到右上角中找尋 Custom Class

將 ViewController.swift 指定給該 ViewController

接著把 UITableView 引進程式碼裡做關聯

再來就是實作 Table 的 data 了

1

class ViewController: UIViewController, UITableViewDataSource {

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32


class ViewController: UIViewController, UITableViewDataSource {
 
 @IBOutlet var tableView: UITableView!
 
 var arr = ["A", "B", "C"]
 
 override func viewDidLoad() {
 super.viewDidLoad()
 // Do any additional setup after loading the view, typically from a nib.
 }

 override func didReceiveMemoryWarning() {
 super.didReceiveMemoryWarning()
 // Dispose of any resources that can be recreated.
 }
 
 func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
 return arr.count;
 }
 
 func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
 
 var cell: UITableViewCell? = tableView.dequeueReusableCellWithIdentifier("cell") as? UITableViewCell
 
 if cell == nil {
 cell = UITableViewCell(style: UITableViewCellStyle.Default , reuseIdentifier: "cell")
 }
 cell!.textLabel?.text = arr[indexPath.row]
 
 return cell!
 }
}

code 實作完後，記得拉 dataSource 及 delegate

執行後就是 TableView + NavigationController 了

接下來就要加入換頁:

到 storyboard 再加入一個 ViewController，並從 tableView 的 cell 中建立連結到新的 ViewController

再來新增一個 DetailViewController, 用來顯示下一頁的資料

記得先去做 class 關聯

再來加入這個 function:

1
2
3
4
5
6


override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) {
 if segue.identifier == "showDetail" {
 let index = self.tableView.indexPathForSelectedRow()?.row
 ((segue.destinationViewController) as DetailViewController).title = arr[index!]
 }
 }

回到 storyboard, 點選 UITableView 和 UIView 中間的連線，設定 storyboard 的 identifier

設定為 showDetail 以便和程式一樣

另外回到 Storyboard 中的 TableView, 設定 cell 的 identifier 和程式一樣

以便 reuse

接著都設定完畢後，就可以執行了!

這樣就完成啦!

[API-d16] - 實戰開發 - 設定主題及規劃

Thu, 16 Oct 2014 00:00:00 +0800

接下來我們想要做到的是一個 TODO list 的 RESTful API

並且會先使用 apiary.io 做規劃

實際看看感覺如何

進入網站後，註冊登入後

左上角的 dropdown list 選擇 create new API

產生後下方就會跑出範例文擋

這個網站會透過特定格式的編排自己希望的 API endpoint 及範例回傳值後，產生出一份漂亮的文件

網站中間是模式的選擇

Documentation 是實際讓其他人看的，Editor 則是編輯模式

我們就稍微簡單規劃一下 TODO List 的 RESTful API 吧!

這是我自己規劃的文件

基本上 route 會長這個樣子:

1
2
3
4
5
6


TODOs
GET /user/{user_id}/todos/
POST /user/{user_id}/todos/
GET /user/{user_id}/todos/{id}
PUT /user/{user_id}/todos/{id}
DELETE /user/{user_id}/todos/{id}

資料格式也都在該文件整理好了

/user/{user_id}/ 只是用來辨識是哪個 user 的 todo task data

在這個小 API 不會琢磨在使用者系統的建立，只會專注在操作 todo task data

我們可以直接透過 PostMan 來丟丟看

我們設定必須要使用 API-key 才能存取 API，比較進階的做法就是使用 Oauth 的方式取得 token 來存取 API

不過在這個小 API 也不會建立一個 Oauth Server，我們簡單使用 API-key 來認證即可

接下來的時間我們就會開始依據規劃好的文件，使用 Node.js + express + mongodb 來實作囉!

[Swift-d16] - Basic - Table View 2 換頁 (delegate)

Thu, 16 Oct 2014 00:00:00 +0800

昨天我們實際操作了 tableView 的實作，今天要加入換頁

意思就是假設我點了名為 “99” 的 cell，點擊後會跳轉到另外一頁，同樣顯示 “99”

所以除了跳頁外，還要加入值的傳遞

首先打開昨天的專案，我們要繼續下去

回到 storyboard 中，昨天我們加入了 dataSource，今天要加入 delegate:

回到程式碼中 ViewController.swift

在 class 的宣告再加上 UITableViewDataSource

1

class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {

再來就要設計換頁的流程了

回到 storyboard

拉一個新的 ViewController 到空白處

接著點擊左邊的 TableViewCell, 按住 ctrl + 拖曳，拉到剛剛建立的 ViewController 上

選擇 show detail

就會長這樣:

再來新增一個 ViewController

接著讓新的 storyboard viewcontroller 連接到剛剛新增的 DetailViewController 程式碼

記得先點選 ViewController

在 storyboard 的 DetailViewController 中拉一個 label

並且將該 label 連接到 DetailViewController 的程式碼中

因此 DetailViewController 就會變這樣:

1
2


class DetailViewController: UIViewController {
 @IBOutlet var label: UILabel!

接著再來把 DetailViewController 加入兩行 code:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


class DetailViewController: UIViewController {
 @IBOutlet var label: UILabel!
 
 var index: Int = 0
 
 override func viewDidLoad() {
 super.viewDidLoad()

 // Do any additional setup after loading the view.
 
 label.text = "\(index)"
 }

新增一個 index 變數，再來就是在 viewDidLoad 時，將該 label 的文字改成 index

這個 index 的值會在 TableView 中傳遞給 DetailViewController

接下來就要改變 index 的值了，回到 ViewController.swift 中

加入以下程式碼:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


func tableView(tableView: UITableView!, didSelectRowAtIndexPath indexPath: NSIndexPath!) {
 
	let cell = tableView.cellForRowAtIndexPath(indexPath)
	self.performSegueWithIdentifier("showDetail", sender: cell)
 
}
 
override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) {
 if segue.identifier == "showDetail" {
		let indexPath = self.tableSample.indexPathForSelectedRow()?.row
	((segue.destinationViewController) as DetailViewController).index=indexPath!
	}
}

大家可能會覺得好奇裡頭有個 identifier 叫做 ‘showDetail’，這個東西是自己自定的，一定要定，不然在傳遞時會不知道要抓哪個 segue

再來確認一下是否 dataSource 與 delegate 是否都有 reference 到

執行，就可以發現可以點進去了!

不過因為我們還沒有和 NavigationView 做結合，因此要自己做按鈕點回去 XD

在這邊就先不做了，因為明天就可以兩個結合起來了!

[API-d15] - [Javascript 番外篇] Javascript callback, event

Wed, 15 Oct 2014 00:00:00 +0800

這幾天會探討 javascript 的特性，由於比較少在寫 js ，因此有錯請指正

javascript 有個特性：event

意思就是說，javascript 中，所有的事情都是由事件驅動的

如果說有寫過 web 前端的話，

其實呼叫 button.click function 時

並不會馬上執行 click 裡面的動作

而是加了一個 click 的 listener

等到 button 被 click 後，才會執行 click 裡面的程式碼

所以寫習慣一般 procedure 的程式會有點不太習慣

舉個 procedure 的例子，下面有五件事想要做：

1
2
3
4
5
6
7


煮飯(); // 10 分鐘

接電話(); // 1 分鐘

吃麵(); // 5 分鐘

丟垃圾(); // 7 分鐘

一般的程式會是照順序執行

也就是煮飯完 -> 接電話 -> 吃麵 -> 丟垃圾

總執行時間 = 23 分鐘

但是如果把這段 code 丟給 javascript 執行的話

1
2
3
4
5
6
7


煮飯(); // 10 分鐘

接電話(); // 1 分鐘

吃麵(); // 5 分鐘

丟垃圾(); // 7 分鐘

就變成同時做煮飯，接電話，吃麵，丟垃圾了！

為了要預防這件事，有些事情還是有順序性的，

因此就要使用到 javascript callback 的特性

1
2
3
4
5
6
7


煮飯(function() {
	吃飯(function() {
		接電話(function() {
			丟垃圾();
		});
	});
});

意思就是煮飯完吃飯，吃完飯接電話，接完電話丟垃圾

以下有一個範例：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25


function wash() {
 setTimeout(function() {
 console.log("wash");
 }, 1000);
}

function eat() {
 setTimeout(function() {
 console.log("eat");
 }, 5000);
}

function running() {
 setTimeout(function() {
 console.log("running");
 }, 3000);
}

function doHouseWork() {
 wash();
 eat();
 running();
}

doHouseWork();

做家事執行了三件事，wash, eat, 和 running

其中每件事都設定不同的完成時間

以 procedure 的程式執行方式來看，在這邊用 ruby 舉例:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


def wash
 sleep 1
 puts "wash"
end 

def eat
 sleep 5
 puts "eat"
end 

def running 
 sleep 3
 puts "running"
end 

def doHouseWork 
 wash
 eat
 running
end 

doHouseWork

是會 wash 1 秒後，接著 eat 5 秒，再 running 3 秒

所以總共是 9 秒

output 的順序會是:

1
2
3


wash // 1 秒
eat // 5 秒
running // 3 秒

但是在 javascript 中，output 的順序卻是:

1
2
3


wash // 1 秒
running // 3 秒
eat // 5 秒

所以總長度是 5 秒

那今天假設想要讓 javascript 有順序性時該怎麼辦?

拿上面的例子作修改的話:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32


function wash(callback) {
 setTimeout(function() {
 console.log("wash");
 callback.call();
 }, 1000);
}

function eat(callback) {
 setTimeout(function() {
 console.log("eat");
 callback.call();
 }, 5000);
}

function running() {
 setTimeout(function() {
 console.log("running");
 }, 3000);
}

function doHouseWork(callback) {
 console.log("doing house work");
 callback.call();
}

doHouseWork(function(){
 wash(function() {
 eat(function() {
 running();
 });
 });
});

很不錯的特性，但是也要特別對於這種特性作處理

有個 lib 很好用，async.js 來源

下回待續!

[Swift-d15] - Basic - Table View 1 直接給值 datasource, (table view scroll)

Wed, 15 Oct 2014 00:00:00 +0800

今天要來練習新的東西 - TableView

據同事說明，TableView 是最常用到的 View 之一

在我們的實戰開發中也會用到 TableView

因此今天就先簡單的來建立出單頁純顯示資料的 TableView

TableView 的概念大概是如下圖:

長得有點像 ListView 但是每一行又可以多切開，放一些東西

每一行都稱之為一個 TableViewCell

今天就來要簡單寫一個資料已經預先定義好，並且會顯示在 view 上面的 TableView

要進行下去之前當然就先開一個新的練習專案囉

開啟完專案後，首先第一件事情就是進 storyboard

選擇 TableView 拉進 storyboard 裏

接著再選擇 TableViewCell 拉進 TableView 中

透過此圖，我們了解到可以打開 storyboard 的 tree 來看看它們之間的關係

下面此步驟很重要，資料的連接就靠這條線:

先選取 TableView (可以使用階層樹或是點擊 storyboard)，然後選擇右方的 connection inspector (右上角的最右邊的那一個按鈕)

裡頭有個 dataSource 以及 delegate

我們先按住 dataSource 右邊的空心圓按鈕，拖曳拉到 storyboard 中的 ViewController，如上圖所示

這樣子等等在程式碼中產生的資料才會有和 storyboard 的 UI 做連結

最後一個和 storyboard 相關的操作是將 storyboard 的 TableView 和程式碼做連結，好方便我們在程式碼中對 storyborad 的 TableView 做操作

之前就有做過類似的事情了，就是按著 ctrl + 拖曳拉進程式碼中：

給他個名稱：

這時候的程式應該會長這樣:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


import UIKit

class ViewController: UIViewController {

 @IBOutlet var tableSample: UITableView!
 
 override func viewDidLoad() {
 super.viewDidLoad()
 // Do any additional setup after loading the view, typically from a nib.
 }

 override func didReceiveMemoryWarning() {
 super.didReceiveMemoryWarning()
 // Dispose of any resources that can be recreated.
 }
}

再來就是程式的部分了

先直接貼出 ViewController 的程式碼:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36


import UIKit

class ViewController: UIViewController, UITableViewDataSource {

 @IBOutlet var tableSample: UITableView!
 
 var items: [String] = []
 
 override func viewDidLoad() {
 super.viewDidLoad()
 // Do any additional setup after loading the view, typically from a nib.
 
 for var i = 0 ; i <= 100 ; i++ {
 items.append("\(i)")
 }
 
 self.tableSample.registerClass(UITableViewCell.self, forCellReuseIdentifier: "cell")
 }

 override func didReceiveMemoryWarning() {
 super.didReceiveMemoryWarning()
 // Dispose of any resources that can be recreated.
 }
 
 func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
 return self.items.count
 }
 
 func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell{
 
 var cell: UITableViewCell = self.tableSample.dequeueReusableCellWithIdentifier("cell") as UITableViewCell
 cell.textLabel?.text = self.items[indexPath.row]
 
 return cell
 }
}

這中間了幾件事:

viewDidload 產生一個 0 ~ 100 的陣列，並且向 tableSample 註冊了一個 cell 物件，並且設定該物件的 identifier 為 “cell”

接著下面兩個 function 是實作顯示資料以及資料行數的部分:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
	return self.items.count
}
 
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell{
 
	var cell: UITableViewCell = self.tableSample.dequeueReusableCellWithIdentifier("cell") as UITableViewCell
	cell.textLabel?.text = self.items[indexPath.row]
 
	return cell
}

第一個 tableView 的方法是回傳這個 tableView 的資料有多少筆

第二個 tableView 則是根據每一行的值，產生一個 cell，將陣列值丟進該 cell 的文字，並且回傳

這樣理論上就會顯示 0 ~ 100 個 cell，裡面的值分別是依據順序而顯示號碼

注意在程式的 class 那一行

1

class ViewController: UIViewController, UITableViewDataSource {

有多一個 UITableViewDataSource, 因為我們要將資料丟到 UITableView 中，因此需要使用繼承該類別

等明天我們要做換頁功能時，就要加入其他的類別了

程式撰寫好後，執行看看吧!

應該就會長這樣子喲:

[API-d14] - [Javascript 番外篇] Javascript function scopes 和 closures

Tue, 14 Oct 2014 00:00:00 +0800

這幾天會探討 javascript 的特性，由於比較少在寫 js ，因此有錯請指正

Scope

例子:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


function hi() {
 var greetings = "hi";

 console.log("Say: " + greetings);

 function sayYa(newInput) {
 greetings = newInput;
 console.log("Say: " + greetings);
 }

 function sayCool(newInput) {
 var cool = newInput;
 console.log("Say: " + cool);
 }

 sayYa("Yo");
 sayCool("Cool");

 console.log("Say: " + greetings);
}

hi();

很簡單的概念

greetins 在 sayYa 方法中被覆寫掉了

如果要定義 local 變數必須在 function 裏用 var 定義

例如 sayCool function

Closure

例子:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


function person(){
 var name = 'default';

 return {
 greetings: function() {
 console.log( name );
 },
 changeName: function(newInput) {
 name = newInput;
 }
 };
}

var me = new person();
me.greetings();
me.changeName("kerkerj");
me.greetings();

Self-Executing Anonymous Functions

使用這種方式通常是避免和其他 js 檔案造成變數混淆

或是初始化

裡面的變數和 function 只被限制在這個範圍內

例子:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


(function(){
 var hi = 'Hello';

 function sayHi(name){
 return hi + ' ' + name;
 }

 global.greetings = sayHi
})(global);

console.log(global.greetings("kerkerj"));
console.log(hi); // <- 這會失敗

必須將 sayHi 指給 global 的某一個變數, 才有辦法使用它

在 node.js 中 global 是全域變數，在瀏覽器中是 window~

[Swift-d14] - Basic - Navigation View 2 + ViewController

Tue, 14 Oct 2014 00:00:00 +0800

延續昨天的主題，今天我們要做的事情是：

爲新的 ViewController 實際加入程式碼 (ViewController2.swift)
加入一個 button 來控制是否前進下一頁或後退

我們先新增一個檔案:

接著選擇 CocoaTouch Class:

回到 storyboard, 選擇第二個 ViewController

並按照下圖，將 Class 指定給 View2Controller

這樣子 storyboard 的 View2 就會指定到 View2Controller 了

我們在 View2Controller 的 viewDidLoad 方法中加入一行程式碼

來驗證他是否有吃到 View2Controller

1

self.title = "View2 by me"

Run 起來看的話就會是這樣:

的確是有吃到程式碼的

再來就是要加入按鈕了:

我們先拉一個 Button 進 View2Controller

並且將該 Button 拉進 View2Controller 的 code

設定該 button 爲 Action, 並且名稱是 ‘backToView’

意即我們要讓點下 View2Controller 的 Button 行為為回到上一個 View

另外對 View2 為他加入一個 storyboard ID, View2，等等會用到:

View1 同樣也加入一個 Button, 並且也是拉到 View1 的 code 中，

同樣是設定 Action ，action name 定義為 ‘goView2’

就是按下 button 後會到 View2

接著我們分別在 ViewController 及 View2Controller 的程式碼中加入以下程式碼:

View1 -

1
2
3


@IBAction func goView2(sender: AnyObject){
self.navigationController?.pushViewController(self.storyboard?.instantiateViewControllerWithIdentifier("View2") as View2Controller, animated: true)
}

View2 -

1
2
3


@IBAction func backToView(sender: AnyObject) {
	self.navigationController?.popViewControllerAnimated(true)
}

在這邊 Navigation 用到的是 Push, Pop 的概念，使用 View stack

進到下一個 View 時，就 push 欲前往的 View

回到上一個 View 時，就 pop 出上一個 View

在 goView2 中，我們使用到了 storyboard 的 identifier

先讓 storyboard 抓有沒有 identifier 名為 “View2” 的物件

有的話就抓起來，並且使用 as 轉型成 View2Controller, push 進 stack

做完上述事情後，執行程式碼就可以看到結果囉!

[API-d13] - [Javascript 番外篇] Javascript require/ module/ Module Pattern

Mon, 13 Oct 2014 00:00:00 +0800

接下來幾天會探討 node.js 的特性，由於比較少在寫 js ，因此有錯請指正

在 node.js 裏，要讀取外部模組都是透過 require 和 exports 來做溝通

以下列出這次最簡單 module 的例子

1
2


//hello.js
console.log('Hello World');

1
2


// app.js
require('./hello.js');

Module 也是有 Pattern 的

第一種: Global (Not so good)

1
2
3
4
5
6
7
8


// foo.js
foo = function() {
	console.log("foo!");
}

// app.js
require('./foo.js');
foo();

第二種: export an anonymous function

1
2
3
4
5
6
7
8


// foo.js
module.exports = function() {
	console.log("foo! YA");
};

// app.js
var test = require("./foo.js");
test();

第三種： export a named function

1
2
3
4
5
6
7
8


// bar.js
exports.bar = function() {
	console.log("bar");
}

// app.js
var bar = require('./bar.js').bar;
bar();

第四種: exports an anoymous object

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


// bar4.js
var Bar4 = function() {};

Bar4.prototype.say = function() {
 console.log('bar4');
};

module.exports = new Bar4();

// app.js 
var b = require('./bar4.js');
b.say();

第五種: export a named object

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


// bar5.js
var Bar5 = function() {};

Bar5.prototype.say = function() {
 console.log("bar5");
};

exports.Bar5 = new Bar5();

// app.js
var b = require('./bar5.js').Bar5;
b.say();

第六種: export an anonymous prototype

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


// cool.js
var Cool = function() {};

Cool.prototype.say = function() {
 console.log('Cool!');
};

module.exports = Cool;

// app.js
var Cool = require('./cool.js');
var coo = new Cool();
coo.say();

第七種: export a named prototype

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


// ang.js
var Ang = function () {};

Ang.prototype.say = function () {
 console.log('Ang!');
};

exports.Ang = Ang;

// app.js
var Ang = require('./ang.js').Ang;
var wer = new Ang();
wer.say();

exports v.s. module.exports

exports 是 module.exports 的輔助方法

以下有個例子會執行錯誤:

1
2
3
4
5
6
7
8
9


// ya.js
module.exports = "YA";
exports.name = function() {
 console.log('My name is kerkerj');
};

// app.js
var ya = require('./ya.js');
ya.name(); TypeError: Cannot call method 'name' of undefined

在 ya.js 中 module.exports 有屬性了

因此下面的 export.name 就沒有被加入了

如果 module.exports 沒有任何屬性被加入的話，

exports 若有屬性了，則會交給 module.exports

反之就是剛剛的情況，moduel.exports 已經有屬性了，因此 export.name 就沒有作用了

Module as class

直接看例子吧 XD

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


// user.js
module.exports = function(name, age) {
 this.name = name;
 this.age = age;
 this.about = function() {
 console.log(this.name +' is '+ this.age +' years old');
 };
};

// app.js
var User = require('./user.js');
var kerkerj = new User('kerkerj', 18);
kerkerj.about(); 

[Swift-d13] - Basic - Navigation View 1 + ViewController

Mon, 13 Oct 2014 00:00:00 +0800

今天來試著拉拉看 Navigation View

什麼是 Navigation View?

就是類似下圖的東西:

用來控制 View 之間的流程

今天我們繼續使用 storyboard 來簡單拉拉 Navigation View

首先先開一個新 project 吧!

接著我們到 storyboard，選擇 ViewController

再來我們要嵌入 Navigation View

所以要選擇: Edit -> Embed in -> Navigation View

選擇後，就會發現 storyboard 的 layout 改變了

Navigation View 實際上是透過 NavigationController 來控制

原本程式的進入點是 ViewController

由於我們要使用 Navigation View

因此透過 Xcode 將 NavigationController 嵌進去

讓程式進入點變成 NavigationController

再透過 NavigationController 將程式導到 ViewController

接下來我們命名一下 ViewController:

然後我們從右下角的 Object library 選擇 Bar Button items 加入

並將該物件拉到 NavigationBar 的右方

接下來我們希望點下 item 按鈕，可以到另外一個 ViewController

因此一樣從右下角的 Object library 拉一個 ViewController 到 storyboard 的空白處

直接拉一個過去就好

所以會長這樣:

接著就從 ViewController 的 item 上，按著 ctrl + 拖曳，

往右邊剛剛新增的 ViewController 拉，放開後就會選擇要做的動作，我們選擇 ‘show’

為了辨識起見，我們點選第二個 ViewController ，加入 Title:

都設定好後，按下執行，應該就可以看到 Navigation View 正常運作了!

按下 item 會到 View2, View2 會自動產生 back 鍵，回到 View1

是不是很方便呢!

[API-d12] - MongoDB - Hello World! (Client-side)

Sun, 12 Oct 2014 00:00:00 +0800

今天要使用 Node.js 的 mongodb driver 來操作 DB

一樣先開啟虛擬機並且登入吧

會使用到的套件是:

1

mongodb -> mongodb native driver

或許有人有看過 mongoose -> 官網

算是 MongoDB 的 ORM，我們在這邊如果有時間的話再簡單了解一下，

現在先使用 native driver 來操作

我們在這邊就不裝全域套件了，裝在 API 專案裡面

並且使用 -save 來將相依性寫入 package.json 裏

1
2


$ cd /vagrant/API/
$ npm install mongodb -save

從虛擬機回到電腦的資料夾中，在虛擬機資料夾的 API 資料夾中，

今天我們先不和 express 搭配，因此就是純操作 node.js + mongodb module

新增一個 mongoTest.js

我們先來連線到 MongoDB，連線的方式有很多，下面是其中一種方式，

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


// 先宣告用的到的東西
var MongoClient = require('mongodb').MongoClient
 , Server = require('mongodb').Server
 , options = { auto_reconnection: true, poolSize: 10 };

// Server 設定
var mongoClient = new MongoClient(new Server('localhost', 27017, options));

// 開啟連線
mongoClient.open(function(err, mongoClient) {
 var db1 = mongoClient.db("testDB");

 if (!err) {
 console.log("Connected!");
 }

 mongoClient.close();
 console.log("Closed!");
});

回到虛擬機執行

1
2
3


$ node mongoTest.js
Connected!
Closed!

接著用另外一種連接方式，介紹 CRUD 的操作:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46


var mongoClient = require('mongodb').MongoClient;

mongoClient.connect('mongodb://localhost:27017/testDB', function(err, db) {
 if(err) throw err;

 // Data
 var todo1 = {todo: "Buy books", time: "2014/10/11", who: "myself"};
 var todo2 = {todo: "Buy milk", time: "2014/10/15", who: "brother"};
 var todo3 = {todo: "Wash cats", time: "2014/11/21", who: "myself"};

 var collection = db.collection('todoTest');
 var where = {todo: "Buy milk"};

 // 新增資料
 collection.insert(todo1, function(err, docs) {
 console.log(docs);
 });

 collection.insert(todo2, function(err, docs) {
 console.log(docs);
 });

 collection.insert(todo3, function(err, docs) {
 console.log(docs);
 });

 // 更新資料
 collection.update(where, { $set: { time: "2014/12/25"} }, function(err) {
 console.log(err);
 });

 // 刪除某筆資料
 collection.remove(where, function(err) {
 console.log(err);
 });

 // 查詢某筆資料
 collection.find(where).toArray(function(err, results) {
 console.dir(results);
 });

 // 查詢所有資料
 collection.find().toArray(function(err, results) {
 console.dir(results);
 });
});

請注意，以上操作由於 javascript async 特性的關係，

每個操作是會同時間送出，不同時間回送，看操作的運算時間而定

因此若要依順序性的話，一是使用 callback，二是使用 async.js

後面應該會提到 XD

將這些程式碼存到 js file 裏，將某些行先註解掉，執行看看就可以略知一二了，

可以同時搭配終端機直接到 DB 查看

p.s. 大家可能會覺得這樣的方式很麻煩，MongoDB 有沒有好用的 client 來管理 DB 呢

我推薦 RoboMongo，多平台，且可以直接輸入指令，蠻方便的，

那如果是用我們現在的虛擬機的方式，要如何使用 RoboMongo ？

首先，虛擬機的 DB 必須先開啟外部網路可以連線，

注意! 我們目前並沒有創立使用者帳號密碼，不需要驗證即可進入 DB，這樣的做法只限於 demo, 與虛擬機中使用

正式環境還是必須建立使用者帳號密碼

先進到虛擬機更改 db 設定:

1

$ sudo nano /etc/mongod.conf

將 bind_ip = 0.0.0.0

按下 ctrl+x 選擇 Y 存檔

重開 mongodb

1

$ sudo service mongod restart

若已經下載過 RoboMongo，開啟並輸入欲連線的 DB 設定：

就可以連進去管理了!

再次提醒，這樣的做法只限於虛擬機及 demo 中測試

正式環境要嘛建立使用者帳號密碼

要嘛就是讓 DB 只限本機存取，請記住這件事情哦~

[Swift-d12] - Basic - 基本元件 (Label, Button, UIColor, 文字輸入框)

Sun, 12 Oct 2014 00:00:00 +0800

今天來放一些基本的元件:

放入一個文字輸入框、文字標簽、按鈕，

在文字框輸入一些字後，按下按鈕後，會在文字標簽顯示剛剛輸入的內容：

首先使用右下角的 Object library 中將上述三種元件拉到 storyborad 中

圖中依順序是文字標簽、文字輸入框、按鈕

接著我們要使用到的文件是文字標簽以及文字輸入框，另外要將按鈕加入事件

因此程式的流程是:

按下按鈕後-> 執行按鈕事件
-> 抓到文字輸入框的輸入內容
-> 將文字標簽的內容改變成文字輸入框的內容

因此先使用昨天的方式，將文字標簽及文字輸入框拉到 ViewController 中以便使用它們，在圖中的程式碼 12, 13 行：

這樣我們就可以控制文字標簽的文字以及拿到輸入框的文字了

再來就是最重要的按鈕事件了!

一樣使用 ctrl + 拖曳的方式將按鈕拉到程式碼中，但是這次是要選擇「IBAction」，是事件的意思:

接著就會產生出一段 function:

名為 titleButton, 我們在方法中輸入一行程式碼:

1

titleLabel.text = titleField.text

意思就是將文字標簽的字改成文字輸入框的文字

接著我們就把程式跑起來吧!

在文字框中輸入文字，按下按鈕，標簽就可以變文字了!

[API-d11] - MongoDB - Hello World!

Sat, 11 Oct 2014 00:00:00 +0800

今天先講在 Server 中如何操作 MongoDB

一樣開啟虛擬機，

我們在先前已經有先安裝過 MongoDB 了，因此，在 Ubuntu Server 中預設是開機啟動的

登入虛擬機吧~

登入虛擬機後，我們要進入 MongoDB，必須使用 mongo 這個 MongoDB Shell

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


$ mongo
MongoDB shell version: 2.6.4
connecting to: test
Welcome to the MongoDB shell.
For interactive help, type "help".
For more comprehensive documentation, see
	http://docs.mongodb.org/
Questions? Try the support group
	http://groups.google.com/group/mongodb-user
> 

此時會發現輸入指令的地方變成了 > 表示我們已經在 mongodb 裡面了

為什麼不需要帳號密碼即可進入 MongoDB 呢，因為 MongoDB 預設是不需要做登入的

並且加上預設只能由本機存取，也就是說，外部連入的 IP 是進不了 MongoDB 的

這部分後面會再作說明。

傳統的 Table 在 MongoDB 中，稱之為 Collection

一筆 record 在 MongoDB 中，稱之為 document

進入 MongoDB 後，

就可以簡單操作一些指令：

查詢所有的 DB:

1
2
3


> show databases;
admin (empty)
local 0.078GB

切換 DB

1

> use test;

use DBNAME 若 DBNAME 不存在於 MongoDB 中的話，

等同於建立一個新的 DB，意思就是我們不需要下 ‘建立 DB’ 這個指令，

直接 use 就是一個新的 DB 了，不過這個 DB 會直到有 Collection 被新增才算真正的被建立

意即如果我們 use 了一個新的 DB，但是並沒有做任何新增 Collection 的動作就離開，

這個 DB 也不會被建立起來

當我們使用 use DBNAME 進入 DB 後：

新增 Collection

1
2


> db.createCollection("TestCollection")
{ "ok" : 1 }

CRUD 操作

此時 Collection “TestCollection” 就被建立了，
可以使用:

新增資料:

example: db.TestCollection.insert(DATA);

DATA 就是 javascript 的 array map

1

> db.TestCollection.insert({data: "test_data", num: 2, arr: ["arr1", "arr2", "arr3"]});

查詢資料

example: db.TestCollection.find(WHERE_CONDITION);

1
2


> db.TestCollection.find({data: "test_data"});
{ "_id" : ObjectId("5430497db94bb4afe2f8b387"), "data" : "test_data", "num" : 2, "arr" : [ "arr1", "arr2", "arr3" ] }

p.s. 每插入一筆資料，MongoDB 預設都會給訂一組 ObjectId

查詢所有資料

1
2


> db.TestCollection.find();
{ "_id" : ObjectId("5430497db94bb4afe2f8b387"), "data" : "test_data", "num" : 2, "arr" : [ "arr1", "arr2", "arr3" ] }

修改資料

example: db.TestCollection.update(WHERE_CONDITION, SET);

1
2
3
4
5
6


> db.TestCollection.update({data: "test_data"}, { $set: {num: 3} });
WriteResult({ "nMatched" : 1, "nUpserted" : 0, "nModified" : 1 })

// 查看 num 是否從 2 變 3 了
> db.TestCollection.find({data: "test_data"});
{ "_id" : ObjectId("5430497db94bb4afe2f8b387"), "data" : "test_data", "num" : 3, "arr" : [ "arr1", "arr2", "arr3" ] }

刪除資料

exmaple: db.TestCollection.remove(WHERE_CONDITION);

1

> db.TestCollection.remove({data: "test_data"});

刪除 Collection

1

> db.TestCollection.drop();

查詢有哪些 Collection

1

> show collections;

砍掉目前所在的整個 DB:

1
2
3


> use test;
> db.dropDatabase();
{ "dropped" : "test", "ok" : 1 }

tips: 在 mongo shell 裡有自動補完的功能，可以按下 tab 來查看有什麼方法可以用

ctrl-D 離開 Mongo Shell

MongoDB 官網文件非常詳細，可以多看看

明天會用 Node.js 的 MongoDB driver 來操作 MongoDB!

[Swift-d11] - Basic - Hello World! ViewController

Sat, 11 Oct 2014 00:00:00 +0800

今天就要來建立一個 Hello World swift app 啦 XD

首先就是開 Xcode 然後開專案囉~~

就看你要存去哪裡啦～

再來就會進到專案本身:

我們就看右下角有個地方可以找到 Label 這個選項:

把他拉到 Storyboard 的任意位置就可以了~

然後更改 label 的屬性:

先點一下 label 選取後，看右上角

有個地方可以更改它的顯示文字，我們將它改成 HelloWorld!

改完之後，按左上角的 Run! ，我們也可以選擇後面的 target 看是要跑在 i6 或是 i5 上，

按下 Run 後程式就會 deploy 到模擬器上面了！

這就是第一個 Hello World 啦!

完全不用寫程式哦 XDDDDD

不過還是要稍微了解一下運作原理啦~

如果剛剛在編輯 storyboard 的時候，有發現那個 View 的左邊有一個奇怪的箭頭指向 View，那個箭頭的意思其實就是程式進入點的意思，

storyboard 就是在描述程式的走向，像在說故事一樣，從某一頁按了什麼東西跳到哪一頁

其實我一直都沒有很習慣 storyboard 的拉法，還是比較習慣用程式建立物件，將想要的物件用程式擺(憑空想像 XD)，但是前面幾個比較屬於練習的小東西都還是會用拉的，比較好懂~

我們剛剛建立的那一頁 Hello world

基本上就是在左邊的 ViewController

那我們試著使用程式來改變 HelloWorld 這個 label 的值吧!

我們首先使用分割視窗的模式

選擇左邊數來第二個按鈕

然後選擇 storyboard 及 ViewController

讓他是照下面那樣排列的

接著在左邊的 label 上按著 ctrl ，拖曳到右邊的程式碼 class 中，

他就會自動幫你產生一個 storyboard 物件與程式碼的連結，

輸入 label 的變數，我們取名叫 titleLabel

就可以在 viewDidload 中，更改該 label 的值:

1
2
3
4
5


override func viewDidLoad() {
 super.viewDidLoad()
 // Do any additional setup after loading the view, typically from a nib.
 titleLabel.text = "hi"
 }

在 viewDidload 中，雖然 label 在 storyboard 時已經有初始值 “Hello World” 了

但是當 app 被 init 起來後，ViewController 也被初始化了，因此就會執行 ViewDidload 的方法，這個時候就會執行到剛剛的 titleLabel.text = "hi"

於是就會更改掉 label 的值了

以上就是簡單的 Hello World

明天來拉幾個常用的元件！

p.s. 截圖感謝同事菲力克濕協助幫忙 :D

[API-d10] - Express - Hello World!

Fri, 10 Oct 2014 00:00:00 +0800

Express - Hello World!

今天就要來安裝主角之一的 Express 了!

一樣開啟虛擬機器我應該是可以不用多說了 XD

先確認自己的 node 是不是 NVM 的 node 喲

建立專案

1
2
3
4


$ cd /vagrant/
$ mkdir API
$ cd API/
$ npm init

自己輸入專案的相關內容吧，不知道的就直接按 enter 空白丟給他~

就會產生 package.json 了!

安裝 Express

1
2
3


// 在專案目錄底下 (/vagrant/API/)

$ npm install express -save

下 -save 的原因是要將 express 加入 package.json 中

離開虛擬機，其實我們也可以在虛擬機資料夾看到剛剛建立的專案了，

現在開始就可以使用自己喜歡的編輯器來開啟這個專案資料夾，我個人偏好使用 Sublime Text

要執行專案時再回終端機即可

Express Hello World!

在 API 資料夾中建立一個 app.js

內容是:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


javascript
var express = require('express');
var app = express();

app.get('/', function(req, res){
 res.send('Hello World');
});

app.listen(3000, function() {
 console.log('Listening on port %d', server.address().port);
});

儲存後，回到終端機，將 express 跑起來:

1
2


vagrant@vagrant-ubuntu-trusty-64:/vagrant/API$ node app.js
Listening on port 3000

開啟瀏覽器，瀏覽 http://192.168.33.10:3000 (url 視個人環境而定)

出現 Hello World! Express! 啦～～又一個 Hello World 啦~~

是不是有比 Node.js 的範例更簡潔一點呢?

簡單分析一下這段 code :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


// 引入 express module
var express = require('express');

// 產生一個 express instance - app
var app = express();

// Express 的重點所在! 稍後解釋
app.get('/', function(req, res){
 res.send('Hello World');
});

// 讓 express server 跑在 port 3000
app.listen(3000, function() {
 console.log('Listening on port %d', server.address().port);
});

以上概念基本上都和 Node.js 概念差不多

值得一提的是 Express 的 Routing:

1
2
3


app.get('/', function(req, res){
 res.send('Hello World');
});

最前面有提到 HTTP 的動詞 GET, POST, PUT, DELETE …

在這邊就必須用上了！

我們可以看一下 express 的 API reference

app.get 的 .get 就是代表 HTTP GET

如果後面接 .post 就是 HTTP POST, 等等都同樣概念

API reference 中提到，

1

router.VERB(path, [callback...], callback)

path 的意思就是要開放給 client 的路由, 透過不同的路由導向不同的動作

中間的 [callback...] 是 middleware 這個之後會再解釋

最後一個 callback 是用來處理 request 及 response

在這個例子中，client 並沒有丟參數，因此不需要對 request 作處理，

而 server 要回應 response

所以使用了 res.send('Hello World'); 來回傳資料

是不是很簡單勒!

專案產生器

或許有人會使用 express-generator 來產生 expresss 專案目錄

雖然它很方便，一次建立好專案結構，並且安裝一些常用搭配的套件，

但是由於在尚未了解 express 的運作原理，

一開始一次建立完整我認為過快，因此先不建議這樣用，

當然，如果已經很熟練很了解 express 中可以使用的東西了，使用產生器當然是節省時間囉~

1
2


$ npm install -g express-generator
$ express /tmp/foo && cd /tmp/foo

下一篇會講解如何簡單操作 MongoDB!

[Swift-d10] 延伸閱讀

Fri, 10 Oct 2014 00:00:00 +0800

今天算一算也來到第十天了，

前面講了 8 天的語法，其實會有些枯燥

不過有些語法又很有趣

我不懂 Objective-C，

如果想從 Objectiv-C 轉換到 Swift 的話，最好查查一些比較的文章

最好的文件就是官方文件了

以 UILabel 為例

官方網站會列出兩種不同寫法:

1
2
3
4
5


// SWIFT
var text: String?

// OBJECTIVE-C
@property(nonatomic, copy) NSString *text

如果要從 Swift 基本概念開始，當然是首推官方的 The Swift Programming Language

是英文苦手的話，強國人有翻譯文件

這群人非常厲害，發表後沒幾天就翻譯完成了

不過因為技術用語還是以中國為主，因此建議英文優先，或是對照著看

前面幾天都基本介紹前半部而已，屬於一般學習程式語言的基本練習而已

後半部是更詳細的部分，有空的話還是可以多看看~

另外，官方還出了一本 Using Swift with Cocoa ad Objective-C

就是在介紹如何使用 Swift 加上 Cocoa framework 開發 App

不過書的內容不多，算入門級，有興趣也可看看這本~

接下來會開始用 Swift 寫簡單的界面

由於筆者從沒寫過 iOS app，因此也是會用大約十天的時間來簡單練習一些常用的 Cocoa Touch framework 的元件

順帶一提前面沒講到的，Objective-C 有個東西叫作 Catagory，在 Swift 裏是 extension

不需要破壞原本的結構，加上一些外掛，讓原本的結構更好用

(好像是個很重要的順帶一提 XD)

[API-d9] - NVM 與 NPM 使用

Thu, 09 Oct 2014 00:00:00 +0800

NVM 與 NPM 使用

NVM - Node.js Version Manager

安裝

如果是 Ubuntu 的話必須先要有 build-essential 和 libssl-dev 套件

不過這個我們之前就裝過了，所以直接安裝 NVM 吧~

1
2


$ curl https://raw.githubusercontent.com/creationix/nvm/v0.17.2/install.sh | bash
$ source ~/.bashrc

使用 NVM 安裝 node.js

先前我們有使用 Ubuntu 本身的 apt-get 安裝 Node.js

不過那是被安裝到 /usr/bin/node

有時候要安裝套件需要 sudo 提供管理者權限

非常麻煩，因此我們使用 NVM 來安裝另一個 Node.js

這個 Node.js 的執行檔就任我們使用，不需要提供管理者權限了

1

$ nvm install 0.10

nvm 就會安裝 0.10 版本，安裝完後就要使用它：

1

$ nvm use 0.10

再來我們把 nvm 的 node.js 設定成預設的 node

否則重開機後，node 指令會變回原本系統的 node

1

$ nvm alias default 0.10

我們觀察一下現在使用的 node 指令是哪裡來的:

1
2


$ which node
/home/vagrant/.nvm/v0.10.32/bin/node

Good! 他已經被安裝到我們使用者目錄底下了

原本的系統 Node.js 是在 /usr/bin/node

如果要切換回系統的 Node.js:

1
2
3
4
5
6


$ nvm use system
Now using system version of node: v0.10.32.

// 看一下現在使用 node 的路徑
$ which node
/usr/bin/node

NPM - Node.js Package Manager

NPM 顧名思義就是 node.js 的套件管理系統，

世界上有許許多多的開發者為 Node.js 開發了許許多多的套件，

我們受惠于此，也不用再自己造輪子，拿這些佛心的大大的套件來使用，打造出我們想要的服務，

像我們接下來會使用的 Express 和 Mongodb 的 driver 都是別人寫好開放出來給大家用的！

下面簡單介紹 NPM 的使用方式

初始化專案資料夾

1

$ npm init

終端機會詢問各種問題來幫忙建立 package.json 的檔案

是在資料夾中建立專案前必下的指令

並且，使用 package.json 有個好處

只要將 package.json 給其他人

其他人只需要將 package.json 放到某個資料夾

並下:

1

$ npm install

就會在該資料夾安裝 package.json 中列出的所有套件

就不需要一個一個尋找及安裝，非常方便！

安裝套件

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


// 安裝全域套件
$ npm install [套件名稱] -g

// 安裝套件在專案資料夾 
// 會安裝在目前所在的資料夾，所以要下此指令必須先確認自己是否在專案根目錄
$ npm install [套件名稱]

// 通常專案資料夾底下都會有一個 package.json 來管理套件相依性
// 如果在專案資料夾底下下此指令，會將你所安裝的套件加入 package.json 中
// 一樣也是要先確認自己是否在專案目錄底下
$ npm install [套件名稱] -save

移除套件

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


// 移除全域套件
$ npm uninstall [套件名稱] -g

// 移除在專案資料夾的某個套件 
// 會移除在目前所在的資料夾某個套件，所以要下此指令必須先確認自己是否在專案根目錄
$ npm uninstall [套件名稱]

// 通常專案資料夾底下都會有一個 package.json 來管理套件相依性
// 如果在專案資料夾底下下此指令，會將你所移除的套件從 package.json 中刪除
// 一樣也是要先確認自己是否在專案目錄底下
$ npm uninstall [套件名稱] -save

列出套件

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


// 列出全域套件
$ npm ls -g

// 列出全域套件詳細資訊
$ npm ls -gl

// 在專案資料夾底下：

// 列出專案資料夾的套件
$ npm ls 

// 列出專案資料夾的詳細套件資訊
$ npm ls -l

更新套件

1
2
3
4
5
6
7


// 更新全域套件
$ npm update -g

// 在專案資料夾底下：

// 更新專案套件
$ npm update 

搜尋套件

1

$ npm search [套件名稱]

注意!!

請注意，使用系統 Node.js 的 npm 所安裝的套件，是屬於系統 Node.js 的

切換到使用者目錄底下的 Node.js 時，是不會共用系統 npm 的套件的

請注意這一點，接下來我們都會使用 nvm 的 node.js

我們可以透過以下例子來驗證:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32


// 使用系統 node.js
$ nvm use system
Now using system version of node: v0.10.32.

// 查看 npm 全域套件
$ npm list -g 
/usr/lib
├─┬ express@4.9.5
│ ├─┬ accepts@1.1.1
│ │ ├─┬ mime-types@2.0.2
│ │ │ └── mime-db@1.1.0
│ │ └── negotiator@0.4.8
....

// 使用 nvm node.js
$ nvm use 0.10
Now using node v0.10.32

// 查看 npm 全域套件
$ npm list -g 
/home/vagrant/.nvm/v0.10.32/lib
└─┬ npm@1.4.28
 ├── abbrev@1.0.5
 ├── ansi@0.3.0
 ├── ansicolors@0.3.2
 ├── ansistyles@0.1.3
 ├── archy@0.0.2
 ├── block-stream@0.0.7
 ├── char-spinner@1.0.1
 ├── child-process-close@0.1.1
 ├── chmodr@0.1.0
...

主要差別就在於列出全域套件時，還會提醒你這些套件裝在哪裡，如果不是裝在使用者目錄底下，

表示現在用的是系統的 Node.js

因此發現自己不對了就快換回來吧，如果系統裝爛了，也可以利用先前打包的 box 還原哦!

怎麼找套件?

套件那麼多，我要到哪裡找？

除了根據自己的需求 Google 外，

下面是 Node.js module 的官方網站: https://nodejsmodules.org/

有做最受歡迎的套件排名，進去瀏覽一下，有時候會發現一些好用的套件哦!

[Swift-d9] - Playground - Class, Struct

Thu, 09 Oct 2014 00:00:00 +0800

Playground - Class, Struct

再來就是要提重點的東西了!

class 和 struct 是用來建構整個程式重要的東西

兩者的差異在於：class 可以繼承其他 class，但是 struct 無法繼承

以下是宣告方式

1
2
3
4
5
6
7


class SomeClass {
	//...
}

struct SomeStruct {
	//...
}

注意，Swift 的 class 和 struct 命名慣例是大寫命名風格 UpperCamelCase

而屬性和方法則是 lowerCamelCase

例如 increaseCount, addTwoInts

舉個例子:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


struct Resolution {
	var width = 0
	var height = 0
}

class CustomLabel {
	var resolution = Resolution()
	var isLabel = true
	var name: String?
}

實體化，就可以改變其中的值了

1
2
3
4
5


var someResolution = Resolution()
var someLabel = CustomLabel()

someResolution.width = 100
someLabel.resolution.height = 200

就是一直 點 下去就對了!

Struct 我們也可以直接給定初始值，class 就不能這樣做了~

1

var someResolution = Resolution(width: 200, height: 300)

sttuct 的 Getter 和 Setter 只存在於 computed properties

亦即是必須要被計算過的才能使用 Getter, Setter

以下就直接看別人的例子吧:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26


struct Point {
 var x = 0.0, y = 0.0
}
struct Size {
 var width = 0.0, height = 0.0
}
struct Rect {
 var origin = Point()
 var size = Size()
 var center: Point {
 get {
 let centerX = origin.x + (size.width / 2)
 let centerY = origin.y + (size.height / 2)
 return Point(x: centerX, y: centerY)
 }
 set(newCenter) {
 origin.x = newCenter.x - (size.width / 2)
 origin.y = newCenter.y - (size.height / 2)
 }
 }
}
var square = Rect(origin: Point(x: 0.0, y: 0.0),
 size: Size(width: 10.0, height: 10.0))
let initialSquareCenter = square.center
square.center = Point(x: 15.0, y: 15.0)
println("square.origin is now at (\(square.origin.x), \(square.origin.y))")

Struct 和 enum 是一種值型別

值型別的的例子像是 Int, String ….

那 struct 和 enum 也是，都是以值來操作的

Class 是參考型別

使用時機

struct:

用來封裝少量相關的資料
不需要繼承
是 copy value 而不是 reference

例如：Label 的長寬, 三角形的三個點

Class 二三事

礙于篇幅關係，這邊簡單講解一些 class 比較重要的點

通常一個 class 裡面會有一些 variable 與 methods

通常還會有靜態的 variables, methods 或是建構子 (constructor)

甚至是延遲載入一個變數

下面就簡單寫了一個 class 來說明這幾個部分

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40


class Person {
 
 var name: String
 var height: Int!
 
 // 型別屬性 (靜態變數)
 class var isAnimal: Bool {
 return true
 }
 
 // 初始化時必定輸入 name, 必須知道初始化時變數所代表的意義
 init(name: String) {
 self.name = name
 }
 
 // 型別方法 (靜態方法)
 class func sayHi() -> String {
 return "Hi!"
 }
 
 func sayYa() -> String {
 return "Ya"
 }
 
 final func car(#title: String) -> String{
 return title
 }
 
 lazy var personalizedGreeting: String = {
 [unowned self] in
 return "Hello, \(self.name)!"
 }()
}

let person = Person(name: "Kerkerj")
println(person.personalizedGreeting)
println(person.car(title: "Toyota"))
println(person.sayYa())
println(Person.sayHi())
println(Person.isAnimal)

self 的意思就代表 class 自己，就字面上來看應該蠻好懂的

通常 lazy 的使用時機在於，

有個值需要被複雜或大量計算時，或是初始化時可能需要大量計算時，

我們可以加入 lazy，使該變數在需要操作時再計算

下面再簡單講一點繼承的東西

直接看例子，我設定了一個 class 稱為 Man，繼承自 Person

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


class Man: Person {
 class var sex: String {
 return "Male"
 }
 
 override init(name: String) {
 super.init(name: name)
 }
 
 override func sayYa() -> String {
 return "YAYA"
 }
 
 func sayYo() -> String {
 return "YO"
 }
}

let kerkerj = Man(name: "kerkerj")
println(kerkerj.name)
println(kerkerj.sayYa())
println(kerkerj.sayYo())
println(Man.sex)

可以觀察一下自動補完的選項，當輸入 kerkerj. 時

後面會出現除了 Man 這個 class 本身提供的變數與方法外，

還有 Person 的變數與方法，這就是因為 Man 繼承自 Person 的關係

Man 裡面覆寫了 init, sayYa 的方法，

原本 sayYa 只會出現一次 “YA”, 覆寫過後會出現兩次變成 “YAYA”

另外 Man 再多加了一個 sayYo 的方法

如果父類別的某些方法不想被覆寫，在關鍵字前加上 final

就可以防止被覆寫

以上是一些 class 和 struct 的特性

[API-d8] - Node.js - Hello World!

Wed, 08 Oct 2014 00:00:00 +0800

Node.js - Hello World!

一樣先開虛擬機哦~

並且開啟終端機連進 server 裡面~

以下是 Node.js 官方網站的 web server 程式範例，我稍作小修改：

1
2
3
4
5
6
7
8


var http = require('http');

http.createServer(function (req, res) {
 res.writeHead(200, {'Content-Type': 'text/plain'});
 res.end('Hello World\n');
}).listen(1337, '0.0.0.0');

console.log('Server running at http://0.0.0.0:1337/');

我們先在虛擬機的資料夾建立一個子資料夾 ‘HelloWorld’

在 HelloWorld 資料夾裡面建立一個 app.js

內容如上，存檔。

使用終端機進入 server :

1
2
3


$ vagrant ssh
$ cd /vagrant/HelloWorld
$ node app.js

到瀏覽器輸入 http://192.168.33.10:1337/

(或者是你的 Vagrantfile 裡面設定的 private IP)

即可看到 Hello World 了！

要關掉 Server 也非常簡單，回到下指令的地方，按下 ctrl + c 即可中斷程式

分析

簡單分析一下此段程式：

1

var http = require('http');

將 http 這個模組引入，並指定給物件 http

1
2
3


http.createServer(
	...
).listen(1337, '0.0.0.0');

先略過中間的 function 不看，
這段 code 的用意即是讓呼叫 http 物件中的 createServer 的方法，
.listen() 則是設定該 server 要跑在哪個 port、hostname

1
2
3
4


function (req, res) {
 res.writeHead(200, {'Content-Type': 'text/plain'});
 res.end('Hello World\n');
}

上面的 code 則是原本在 .createServer() 裡的，
我們可以看一下 Node.js 的 API doc 關於此方法的部分

.createServer() 要帶入的東西其實是一個 requestListener，
也就是當 Server 跑起來時，我們開啟瀏覽器，輸入 127.0.0.1:1337 時，
Node.js Server 要回丟的東西，因此觀察一下此 listener:

1
2
3


function (req, res) {
	...
}

function 中帶入參數的是 req, res，意即 request, response，
request 即是 server 接收到 client 端的訊息，
response 則是 server 要回丟給 client 的訊息，
由於在此範例中，我們只是要回丟給 client 端一個 hello world 的訊息，
因此，我們不處理 client 送給 server 的 request，
我們只需處理要回丟給 client 的訊息，

1
2


res.writeHead(200, {'Content-Type': 'text/plain'});
res.end('Hello World\n');

寫網頁的開發者應該對一些關鍵字例如 Content-type, text/plain 不陌生，
第一行代表回傳給使用者的訊息中，HTTP HEAD 的設定是 http status code 200,
並且 Content-type 設定為 text/plain

1

res.writeHead(200, {'Content-Type': 'text/plain'});

那麼，以下這行 code 的意思即是，此次要回送給使用者的訊息到這裡結束，以 “Hello World” 作結尾

1

res.end('Hello World\n');

因此整段 code 看下來，就是一個非常簡單的 http server，

http://192.168.33.10:1337/ 總是會回傳 Hello World

今天就完成了我們的 Hello World 了!

[Swift-d8] - Playground - Enumerations

Wed, 08 Oct 2014 00:00:00 +0800

Playground - Enumerations

通常會使用來定義一組相關的值

也是很方便的東西

列舉語法

1
2
3


enum SomeEnumeration {
 // enumeration definition goes here
}

比方說，車子

1
2
3
4
5


enum Car {
	case toyota
	case benz
	case BMW
}

也可以這樣寫

1
2
3


enum Car {
	case toyota, benz, BMW
}

使用:

1

var car = Car.benz

和 Switch 的搭配

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


enum Car {
 case Toyota, Benz, BMW
}

var car = Car.Benz

switch car {
case .Toyota:
 println("Toyota")
case .Benz:
 println("Benz")
case .BMW:
 println("BMW")
}

Associated Values

以 Barcode 來舉例子

1
2
3
4
5
6


enum Barcode {
 case UPCA(Int, Int, Int)
 case QRCode(String)
}

var productBarcode = Barcode.UPCA(12, 8948, 333)

我們可以借此來定義一些結構

Raw Values

我們可以先給定預設值：

1
2
3
4
5
6
7


enum Barcode: String {
 case UPCA = "upca"
 case QRCode = "qrcode"
}

var productBarcode = Barcode.UPCA
println(productBarcode.toRaw())

可以透過 raw value 來找尋

1

println(Barcode.fromRaw("qrcode"))

這個部分雖然不多，但是很實用

[API-d7] - [Server 番外篇] 建立自己的本機虛擬伺服器 3 - 打包環境

Tue, 07 Oct 2014 00:00:00 +0800

昨天我們已經把一個全新乾淨的環境架起來了

這時候我們不希望因為日後的操作導致 Server 環境髒掉，又要重灌

因此我們今天就來練習一下如何使用 vagrant 打包環境!

Vagrant 打包

一樣先進入虛擬機資料夾，先確保虛擬機沒有在運作:

1
2
3
4
5
6


$ vagrant status
Current machine states:

default poweroff (virtualbox)

The VM is powered off. To restart the VM, simply run `vagrant up`

如果是 poweroff 的話，就可以進行接下來的動作，如果是其他狀態的話，就先下關機指令囉

1
2
3
4


$ vagrant package
==> default: Clearing any previously set forwarded ports...
==> default: Exporting VM...
==> default: Compressing package to: /Users/.../ithome/package.box

vagrant 就會在虛擬機器資料夾底下建立一個 package.box

這個檔案就是整個伺服器環境的檔案了!

假設今天想要讓團隊成員使用，只要他們都有 VirtualBox + Vagrant 的話，

就可以依循下面的指令步驟將你所做的 box 匯入並使用：

首先我們可以先看看原本所使用的 box 清單:

1
2


$ vagrant box list
ubuntu/trusty64 (virtualbox, 14.04)

是 ubuntu/trusty64 沒錯！

那麼我們現在想要加入剛剛所製作的 box ，並重新命名：

1
2
3
4


$ vagrant box add my_box package.box
==> box: Adding box 'my_box' (v0) for provider:
 box: Downloading: file:///Users/.../ithome/package.box
==> box: Successfully added box 'my_box' (v0) for 'virtualbox'!

此時再看看 box 清單:

1
2
3


$ vagrant box list
ubuntu/trusty64 (virtualbox, 14.04)
my_box (virtualbox, 0)

就會多一個了!

vagrant box add my_box package.box

這個指令的意思是將 package.box 加入 box 清單，並以 my_box 命名

package.box 可以是本機路徑，也可以是網址，

如果要分享給團隊成員使用，就可以使用 url 分享，其他人就可以下指令來下載 box 並加入 box list

例如:

1

$ vagrant box add my_box http://my_dropbox.com/package.box

接著其他人就可以建立自己的虛擬機資料夾，並且到該資料夾中下指令就可以初始化虛擬機器了，例如：

1
2
3


$ mkdir ~/my_machine/
$ cd ~/my_machine/
$ vagrant init my_box 

超方便的啦～

如果想要從 box list 中刪除不需要的 box，下此指令即可：

1
2


$ vagrant box remove my_box
Are you sure you want to remove this box? [y/N] y

上面只會刪除 box 清單，

如果要刪除虛擬機器資料夾，以及虛擬機器的所有檔案的話，先到虛擬機器資料夾，然後下此指令：

1
2


$ vagrant destroy
 default: Are you sure you want to destroy the 'default' VM? [y/N] y

虛擬機就會被移除，再來只要將該資料夾砍掉即可～就恢復成乾乾淨淨的了~

是不是很方便勒~~

接下來我們就會開始先寫寫 Node.js 的 Hello World 囉~

[Swift-d7] - Playground - Closures

Tue, 07 Oct 2014 00:00:00 +0800

閉包表達式語法：

1
2
3


{ (parameters) -> returnType in
 statements
}

舉個例子:

1
2
3
4
5
6
7


func multiple(value: Int, multiple: Int -> Int) -> Int {
 return multiple(value)
}

multiple(3, { (value) -> Int in
 value * 3
})

在 multiple function 中需要傳入一個 function

在這邊我們並沒有另外定義，而是直接使用閉包的方式傳入一個 function

這個閉包就符合了上面的定義

根據上下文判斷型別 (Inferring type from context)

承上一個例子，我們可以寫得更簡潔一點

1
2
3


multiple(3, { value in
 value * 3
})

這是因為 Swift 會根據兩邊的定義來判斷型別，因此可以寫得更簡潔一些

參數名稱縮寫, 運算子函式

直接看例子

1
2
3
4
5
6
7


func biggerThan0(value: Int, isBigger: Int -> Bool) -> Bool {
 return isBigger(value)
}

biggerThan0(-1,
 { $0 > 0 }
)

尾隨閉包 (trailing closures)

通常如果閉包太長的話，可以把閉包接在括號後面：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


func someFunc(closure: () -> ()) {
	// main
}

someFunc({
	// closure main
})

somFunc() {
	// closure main
}

以上面的例子做例子:

1
2
3
4
5


func biggerThan0(value: Int, isBigger: Int -> Bool) -> Bool {
 return isBigger(value)
}

biggerThan0(-1) { $0 > 0 }

如果是不需要參數的話，甚至可以把 () 省略掉

這邊直接參考一下別人的例子，是使用 array map 方法

下面要做的事情是

將 [16,58,510] 轉成 [“OneSix”, “FiveEight”, “FiveOneZero”]

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


let digitNames = [
 0: "Zero", 1: "One", 2: "Two", 3: "Three", 4: "Four",
 5: "Five", 6: "Six", 7: "Seven", 8: "Eight", 9: "Nine"
]

let numbers = [16, 58, 510]

let strings = numbers.map {
 (var number) -> String in
 var output = ""
 while number > 0 {
 output = digitNames[number % 10]! + output
 number /= 10
 }
 return output
}

這個例子中，array 的 map 會用後面接的閉包，接連的處理陣列裡面的元素

所以最後 strings 的陣列就是處理過後的陣列

而處理的方法則是將 Int 的每個位數分別轉換成 String 連接起來再回傳

很方便的方法!

[API-d6] - [Server 番外篇] 建立自己的本機虛擬伺服器 2 - Ubuntu 基本設定與安裝 Node.js, MongoDB

Mon, 06 Oct 2014 00:00:00 +0800

[Server 番外篇] 建立自己的本機虛擬伺服器 2 - Ubuntu 基本設定與安裝 Node.js, MongoDB

嗨又到了 Server 時間了!

接下來我們都會做一些指令操作，

如果進一步有興趣的可以 Google 鳥哥的私房菜，

完整的 Linux 操作教學，淺顯易懂，想學習操作 linux OS 的話必看！

今天我們要稍稍整理一下昨天剛安裝完的 Ubuntu 作業系統，以及安裝一些我們需要用到的東西

首先我們的第一步就是先開啟終端機，到昨天放 Vagrantfile 的資料夾:

1

$ cd ~/ithome/

開啟 Ubuntu

1

$ vagrant up

順帶一提，有時候開機時可能會卡在一個地方：

1
2
3


default: Warning: Connection timeout. Retrying...
default: Warning: Connection timeout. Retrying...
default: Warning: Connection timeout. Retrying...

這個就稍微等一下吧~ 如果電腦性能比較差的話可能會卡比較久，不過應該不至於會卡超過 10 分鐘

如果卡超過十分鐘可能要強制中斷，並且尋找解決辦法了～

開機完成後就登入吧!

1
2
3


$ vagrant ssh
...
vagrant@vagrant-ubuntu-trusty-64:~$

Ubuntu 套件, 設定時區

今天就要來幫 Ubuntu 安裝一些東西，

首先先產生 locale file for zh_TW

1

$ sudo locale-gen zh_TW.UTF-8

更新檔案清單並安裝更新, 移除更新後不需要的套件:

1
2


$ sudo apt-get update && sudo apt-get -y upgrade
$ sudo apt-get -y autoremove

再來是安裝一些常用的套件如 git, curl, vim 等等:

1

$ sudo apt-get -y install build-essential vim git-core curl autoconf libssl-dev

設定時區, 照著指令選就好了~

1
2
3
4
5
6


$ sudo dpkg-reconfigure tzdata
...

// 選擇完畢後, 輸入 date 指令來查詢伺服器時間
$ date
Sat Oct 6 20:47:03 CST 2014

Node.js 安裝

我們使用了 ppa 以安裝最新的 Node.js 版本:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


// 加入 ppa
$ sudo add-apt-repository ppa:chris-lea/node.js
 Evented I/O for V8 javascript. Node's goal is to provide an easy way to build scalable network programs
 More info: https://launchpad.net/~chris-lea/+archive/ubuntu/node.js
Press [ENTER] to continue or ctrl-c to cancel adding it
(要再按一下 enter)

// 因為加入新的檔案清單來源了，所以重新更新 ubuntu 的檔案清單
$ sudo apt-get update

// 安裝 nodejs
$ sudo apt-get -y install nodejs

這樣就完成安裝了!

確認一下版本是否安裝成功:

1
2
3
4
5


$ node -v 
v0.10.32 

$ npm -v 
1.4.28

ya! 這樣 Ubuntu 就有 node.js 了!

MongoDB

再來就是要安裝 MongoDB 了!

我們參考 MongoDB 官方網站的文件

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


//加入 apt-key
$ sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv 7F0CEB10


// 新增一個來源清單，並將 mongodb 的來源寫進該來源清單
$ echo 'deb http://downloads-distro.mongodb.org/repo/ubuntu-upstart dist 10gen' | sudo tee /etc/apt/sources.list.d/mongodb.list

// 重新更新來源清單
$ sudo apt-get update

// 安裝 mongodb
$ sudo apt-get install -y mongodb-org

安裝完成後 Mongo db 就會跑起來了，從以下指令可以得知

1

$ ps aux | grep mongo

順便確認一下版本:

1
2
3
4
5
6


$ mongod --version
db version v2.6.4
2014-10-04T06:31:01.553+0000 git version: 3a830be0eb92d772aa855ebb711ac91d658ee910

$ mongo --version
MongoDB shell version: 2.6.4

MongoDB 除了安裝了 DB 本身，還提供了指令提供操作，稱之為 MongoDB Shell，

方便我們使用 Shell 進去 DB 裡面做 DB 操作

以下是 mongodb service 的指令:

1
2
3
4
5
6
7
8


// 開啟 mongodb
$ sudo service mongod start

// 關閉 mongodb
$ sudo service mongod stop

// 重啟 mongodb
$ sudo service mongod restart

好啦~ 今天就先到這，記得把虛擬機器關起來~

[Swift-d6] - Playground - function

Mon, 06 Oct 2014 00:00:00 +0800

Playground - function

來看看 Swift 各種 function 的寫法吧!

Swift 使用 func 當作宣告的保留字

GOLANG 的 fu…. XD

寫 Swift 的 function 會很開心

基本的

1
2
3


func say() {
	println("Hello!")
}

有一個回傳值的

1
2
3


func say() -> String {
	return "Hello!"
}

有多個回傳值的!!! (就是回傳 Tuple)

1
2
3
4
5
6
7


func say() -> (String, Int) {
	let greeting = "hello"
	let times = 5
	return (greeting, times)
}

say()

有參數的

1
2
3
4
5


func say(g: String) {
	println(g)
}

say("Hello")

多個參數

1
2
3
4
5
6
7


func say(g: String, times: Int) {
	for index in 1...times {
		println(g)
	}
}

say("Hello", 3)

有參數的進階版

1
2
3
4
5


func say(greetings g: String) {
	println(g)
}

say("Hello", 3)

此時如果同樣使用 say("hello") 會出錯

因為我們剛剛宣告了外部參數名稱

因此需要:

1

say(greetings: "hello")

這種寫法在必須代入許多參數時，非常好用，會讓程式可讀性變高

另外，方便起見，也可以加上 #，表示外部參數名稱與 func 內部名稱是一樣的

1
2
3
4
5
6


func say(greetings g: String, #times: Int) {
 for index in 1...times {
 println(g)
 }
}
say(greetings: "Hello", times: 3)

可以看到第一種寫法和第二種寫法是一樣的功用~

給參數預設值

1
2
3
4
5


func say(greetings g: String = "hello") {
	println(g)
}

say()

如果呼叫 say() 而沒有給定參數時，會直接使用預設值

常數參數與變數參數

簡單看一下以下的程式碼

1
2
3
4
5
6
7


func say(greetings: String = "hello") {
 greetings = "\(greetings), welcome!"
 println(greetings)
}

let greetings = "Hello!"
say(greetings: greetings)

我們定義了一個常數，代入 say() 裡面，

但是 say function 裡面必須改變代入的值，於是這個時候 Xcode 就會該了

那要怎麼辦呢?

修改成:

1
2
3
4
5
6
7


func say(var greetings: String = "hello") {
 greetings = "\(greetings), welcome!"
 println(greetings)
}

let greetings = "Hello!"
say(greetings: greetings)

多加一個 var 宣告，就會 copy 一份傳入，就可以更改值了!

一樣是非常有用的語法!

輸入輸出函數

直接看例子

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


func swapInt(inout a: Int, inout b: Int) {
 let tmpA = a
 a = b
 b = tmpA
}

var a = 1
var b = 2

swap(&a, &b)

println(a)
println(b)

酷吧

function types 函式型別

直接看例子

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


func addTwoInt(a: Int, b: Int) -> Int {
 return a + b
}

func mTwoInt(a: Int, b: Int) -> Int {
 return a * b
}

func printHello() {
 println("Hello World")
}

var mathFunction: (Int, Int) -> Int = addTwoInt

println("result: \(mathFunction(2, 3))")

前面宣告了三個 function ，

而

1

var mathFunction: (Int, Int) -> Int = addTwoInt

後面的這句的意思是:

我們定義了一個變數叫做 mathFunction，

他的型別是「一個 (Int, Int) 的參數，並且回傳 Int」的 function，

簡單說就是 mathFunction 的型別是一個 Function

並指向 addTwoInt 這個 function

所以上面的例子中，mathFunction 代入的 (2, 3) 會丟給 addTwoInt，

並且最後回傳 Int

有 javascript 的味道:

1
2
3
4
5
6
7


var test = function(a, b) {
 return a + b;
};

var add = test;

console.log("result = " + add(2, 3));

function as parameter types

函式也可以拿來當做參數傳入函式中，

接續上面的例子，加入：

1
2
3
4


func printResult(mathFunction: (Int, Int) -> Int, a: Int, b: Int ) {
 println("Result: \(mathFunction(a, b))")
}
printResult(mathFunction, 2, 3)

function as return type

函式也可以拿來當做回傳值

就是在原本的回傳符號 -> 後面代入函式型別

這邊直接借別人的例子來參考吧

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26


// 定義兩個 function 
func stepForward(input: Int) -> Int {
 return input + 1
}
func stepBackward(input: Int) -> Int {
 return input - 1
}

// 再定義一個 function ，透過布林值導往上面不同的 function
func chooseStepFunction(backwards: Bool) -> (Int) -> Int {
 return backwards ? stepBackward : stepForward
}

var currentValue = 3

// 將 chooseStepFunction 指給 moveNearerToZero
// 所以 moveNearerToZero 現在是一個 function 了!
let moveNearerToZero = chooseStepFunction(currentValue > 0)

println("Counting to zero:")
// Counting to zero:
while currentValue != 0 {
 println("\(currentValue)... ")
 currentValue = moveNearerToZero(currentValue)
}
println("zero!")

Nested Function

就是 funciton 中的 function，變數有分 global、local 變數，function 也有

以上面的例子來改寫:

1
2
3
4
5


func chooseStepFunction(backwards: Bool) -> (Int) -> Int {
 func stepForward(input: Int) -> Int { return input + 1 }
 func stepBackward(input: Int) -> Int { return input - 1 }
 return backwards ? stepBackward : stepForward
}

[API-d5] - [Server 番外篇] 建立自己的本機虛擬伺服器 1 - Vagrant & VirtualBox 安裝

Sun, 05 Oct 2014 00:00:00 +0800

VirtualBox 是一套虛擬軟體，可以方便幫助我們在現有的作業系統上

模擬另一個作業系統 (如 linux, Ubuntu, CentOS…)

在虛擬機器裡面所以的一切變動，都不會影響到現有的作業系統，

非常適合拿來做測試使用

由於現在大部份的 Service 除了架設在 Windows Server 外，最大宗的就是 *nix distribution 了

因此這在這個系列文中，也是一定要教大家如何建立起虛擬測試機器，

來模擬真實 Server 環境中，如何架設自己撰寫的 API Service

VirtualBox

到 VirtualBox 官方網站下載合適的安裝檔案吧!

安裝完成就可以了!

因為我們接下來會使用 Vagrant 這套 commaond line tool 來對 VirtualBox 進行操作

因此只要安裝完 VirtualBox 後就可以不用管他了 XD

Vagrant

它可以幫助我們快速的建立一個輕量、可重複使用、並且可以打包起來帶著走的環境

透過編輯一個設定檔，就可以簡單設定該虛擬系統的 *nix 基本設定，如共享資料夾、網路存取等等，

不需要透過 VirtualBox

通常這套軟體可以應用在團隊開發上：

以網頁開發來說，如果大家的測試環境與版本都不太一樣，例如 apache 或 php 版本不同

有時候會造成團隊溝通的負擔，因此透過 Vagrant 將 server 環境重新建立一套虛擬機器，

並且透過 Vagrant 打包，就可以丟給其他人使用，這樣一來大家的環境都一樣，

就可以避免這個問題，

而且還有一點，Server 的安裝是很累人的，同樣的事情基本上都不會想做第二遍，

因此打包一個乾淨的環境後備份，弄髒了可以隨時快速再把備份拿出來用，非常方便！

安裝:

到下載頁面尋找適合自己的下載並且安裝

安裝完後應該就可以在終端機中使用 vagrant 這個指令了!

1
2


$ vagrant -v
Vagrant 1.6.5

目前最新的版本應該是 1.6.5

建立自己的虛擬機器

首先在自己想要建立虛擬機器的地方先開一個資料夾

1

$ mkdir ~/ithome/

切換到該資料夾

1

$ cd ~/ithome

使用 vagrant 初始化這個資料夾，並且指定我們要使用 Ubuntu 14.04 版本

1
2
3
4
5


$ vagrant init ubuntu/trusty64
A `Vagrantfile` has been placed in this directory. You are now
ready to `vagrant up` your first virtual environment! Please read
the comments in the Vagrantfile as well as documentation on
`vagrantup.com` for more information on using Vagrant.

如果想要使用別種 *nix 版本可以到這裡找 - VagrantCloud

下完 vagrant init ubuntu/trusty64 指令後，指令告訴你有一個檔案叫做 Vagrantfile 被建立在這個資料夾裡了，

可以使用 vagrant up 來開啟虛擬機器

不過我們先不要下開機指令，我們先來看看 Vagrantfile 的內容，我直接把比較重要的設定說明寫在註解裡面了：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27


 ...
 
 // 此行是說明要使用哪一個 box ，會到自己的系統裡面尋找，如果沒有的話就會下載一個
 // 由於我們剛剛是使用 VagrantCloud 找的版本，因此 vagrant 會去找 
 config.vm.box = "ubuntu/trusty64"

 // 這個是設定網路
 // 預設是 NAT，也就是如果我們在虛擬機器裝了網頁伺服器，
 // 必須使用 port forwarding 的方式來讀到虛擬機器裡面的網頁 
 #config.vm.network "forwarded_port", guest: 80, host: 8080

 // Important! 
 // 承上，或者我們可以使用一個 private network ip，我們把它開啟註解吧~
 // 這樣我們開啟虛擬機器時，他的 IP 就會是 192.168.33.10
 config.vm.network "private_network", ip: "192.168.33.10"

 // 開啟註解的話，就是直接使用 bridge 的方式，如果是使用分享器的話
 // 虛擬機會到分享器要一個 IP 
 # config.vm.network "public_network"
 
 // 這個是設定共享資料夾
 // 預設是放 Vagrantfile 的那個資料夾
 // 在這個資料夾放檔案的話，在虛擬機器裡的 '/vagrant/' 資料夾是可以看到的!!
 // 如果有想要指定到特殊的資料夾，再編輯此行並開啟註解即可
 # config.vm.synced_folder "../data", "/vagrant_data"

end

再來就讓它開機吧!

1

$ vagrant up

如果沒有下載過 ubuntu 系統的話，會先幫你下載，所以需要等待一些時間

若看到終端機說系統已經建立完成，

就可以連線進去了!

1
2
3


$ vagrant ssh
.....
vagrant@vagrant-ubuntu-trusty-64:~$ 

就會發現終端機的 prompt 已經不一樣了，變成 ubuntu-trusty-64 ，表示我們已經進入虛擬機器裡面了

由於今天的內容只會先到這，關於 Ubuntu 的設定是明天，所以記得離開虛擬機器並且幫他關機 XDD

1
2


// 如果剛剛有進入虛擬機器的話，輸入 exit 離開
$ exit

再下關機指令:

1

$ vagrant halt

虛擬機器就被關起來了!

順帶一提

如果在虛擬機器開機時，需要更改 Vagrantfile 的設定，

改完後虛擬機器必須要重新開啟才會讀到新的設定

1

$ vagrant reload

下回待續!!

[Swift-d5] - Playground - Array, Dictionary, Controll Flow

Sun, 05 Oct 2014 00:00:00 +0800

Array

宣告

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


// var VARIABLE_NAME: [TYPE] = .....

var fruits: [String] = ["apple", "banana"]
var nums: [Int] = [1, 2]

// 或是讓 Swift 自行判斷類型:
var fruits = ["apple", "banana"]
var nums = [1, 2]

// 初始化:
var cars = [String]()

ps. Beta 版時的寫法是 var fruits: String[]

現在已經變成了 var fruits: [String]

操作

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


// 判斷該陣列是否有值，回傳 true 或 false
fruits.isEmpty 

// 增加元素
fruits.append("watermelon")
fruits += ["lemon"]

// 取值 
fruits[0]
fruits[0...2]

// 刪除值 - 將 apple 移除，banana 會自動補上
fruits.removeAtIndex(0)
fruits[0]

// 兩個陣列合併 (必須相同類別 e.g. String)
fruits + cars

// 陣列元素數量
fruits.count

Dictionary

宣告

由於 Dictionary 是 key/value 為一組 (pair)，

因此宣告時必須宣告 key 和 value 分別是哪種型別

1
2
3


var httpStatus: Dictionary<Int, String> = Dictionary<Int, String>()

var httpStatus: Dictionary<Int, String> = [200: "Success", 404: "Not found"]

操作

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


// 一樣有 isEmpty 方法
httpStatus.isEmpty

// 取值
httpStatus[200] // = "Success"

// 加入值
httpStatus[500] = "Internal Server Error"

// 修改值
httpStatus[200] = "True"
httpStatus.updateValue("internal server error", forKey: 500)

// 刪除值
httpStatus.removeValueForKey(200)

// 字典元素數量
httpStatus.count

Controll Flow

For loop

1
2
3
4
5
6
7


for fruit in fruits {
	println(fruit)
}

for var index = 0; index < fruits.count; ++index {
	println(fruits[index])
}

While

1
2
3
4
5


var index = 0
while index < fruits.count {
 println(fruits[index])
 index++
}

Do-while

1
2
3
4
5


var index = 0
do {
	println(fruits[index])
	index++ 
} while (index < fruits.count)

If

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


var index = 5566

if index = 5566 {
	println("5566 不能亡")
}

if index = 5566 {
	println("5566 不能亡")
} else {
	println("You are not 5566")
}

if index = 5566 {
	println("5566 不能亡")
} else if index < 5566 {
	println("You are less than 5566")
} else {
	println("You are bigger than 5566")
}

Switch

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


var index = 0

switch index {
case 0, 1, 2
	println("small")
case 8, 9, 11 
	println("big")
default:
	println("others")
}

引入 Tuple

1
2
3
4
5
6
7
8


let httpStatus = (200, "Success")

switch httpStatus {
case (let statusCode, "Error"):
 println("(\(statusCode)) is Error")
case (200, let msg):
 println("(\(msg))'s statusCode is 200")
}

Switch - break, continue, fallthrough

Continue

continue 會使該次的 loop 停止，並繼續執行下一個 loop

continue 不存在於單一的 switch, 只會在 loop 裡的 switch 語句時才能使用

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


var fruits = ["apple", "banana", "lemon", "waterlemon", "orange"]
for fruit in fruits {
 println("Start")

 switch fruit {
 case "banana":
 continue
 default:
 println(fruit)
 }
 
 println("End")
}

Start 和 End 理論上都要被印五次，

但是加入了 continue 後，banana case 當次 loop 的 End 就沒有被執行了

Break

通常是用在不想處理某個 case 或，特別想要處理時 (?) 反之嘛 XD

當使用了 break，會立即中斷 switch 程式碼的執行，並且跳到 switch 區塊程式碼結束的大括號後 (}) 的第一行程式

暫時想不到什麼好例子….

先借別人的例子來用吧:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


let numberSymbol: Character = "三" // 簡體中文裡的數字 3
var possibleIntegerValue: Int?
switch numberSymbol {
case "1", "١", "一", "๑":
 possibleIntegerValue = 1
case "2", "٢", "二", "๒":
 possibleIntegerValue = 2
case "3", "٣", "三", "๓":
 possibleIntegerValue = 3
case "4", "٤", "四", "๔":
 possibleIntegerValue = 4
default:
 break
}
if let integerValue = possibleIntegerValue {
 println("The integer value of \(numberSymbol) is \(integerValue).")
} else {
 println("An integer value could not be found for \(numberSymbol).")
}
// 輸出 "The integer value of 三 is 3.

Fallthrough

在 Swift 中，掃到第一個符合的 case 後，就會中斷 switch 的執行了，避免掉入一些 case 處理的錯誤

而 fallthrough, 很有趣, 宣告後，會讓 switch 繼續掃下一個 case

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


let num = 5
var description = "\(num) is"
switch num {
case 2, 3, 5, 7, 11, 13, 17, 19:
 description += " a prime, also"
 fallthrough
case 5: 
 println("I'm here")
default:
 description += " an integer."
}
println(description)
// I'm here
// 5 is a prime, also an integer.

[API-d4] - 使用技術與工具介紹及原因

Sat, 04 Oct 2014 00:00:00 +0800

使用技術與工具介紹及原因

終於要開始進入正題了！

在了解 REST/RESTful 後，

就要從無到有 - 從 Server 到 API endpoint 都由自己打造

今天會先來說明接下來會使用到哪些工具及技術

由於筆者使用 Mac ，因此若是有其他平台的使用者可能需要自行找教學

Server - Ubuntu with Vagrant + VitrualBox

接下來幾天會先從這個部分開始提起

我們會使用 VirtualBox + Vagrant 的方式來建立自己的虛擬環境

避免一些讀者可能對 Server command line 不熟

這個部分是大家可以跳過的部分，但是我還是會從無到有架起來

Backend Language - Node.js

後端語言使用了 Node.js，其實本來有考慮使用 Golang，

但顧及自己的時間… 還是使用 Node.js，方便快速

這幾年是 Javascript 的時代，

優勝美地似乎也可以支援使用 Javascript 撰寫 Automation Tool

從前端打到後端甚至到 DB 都可以使用到 Javascript ，

是該來看看 Javascript 的語法特性了 :D

而且 Node.js Event-driven 的特性，可以利用少少的資源提供高效能的服務

同時搭配易用性及社群活躍度，這是我選擇 Node.js 而非選擇 Golang 的原因

Framework - Express

我使用了 Node.js 的 web framework - Express

Node.js 之於 Express 可以把它想像成是 Ruby 之於 Sinatra

我使用 Express 方便處理 Route

並且這套 framework 算是 Node.js 裡最具代表性的 framework

學起來也還不錯

Database - MongoDB

DB 為了追求簡單快速，我使用了 MongoDB

從 API 到 DB 無縫接軌，簡單的操作模式以及 Schema-free 的特性

應該會讓這整件事情變得更簡單

Test client - PostMan (chrome extension)

由於 API 是純粹後端 service，我們使用 Express 並不會使用到樣板語言，

也就是我們並不會撰寫 View (HTML, CSS 等等的語法)

因此除了寫測試外，我們就可以使用這套 Chrome Extension 來對 API 做存取!

結束! 接下來幾天會教大家建立自己的虛擬機哦~~

[Swift-d4] - Playground - Optional, ! and ?

Sat, 04 Oct 2014 00:00:00 +0800

Playground - Optional, ! and ?

今天要來探討 Optional 型別，我認為這塊是初學 Swift 常遇到的問題
大家搞不懂 “!” “?” 到底在幹什麼，所以今天就來了解一下

在 Swift 中，所有的資料型別都不能賦予 nil
也就是以下這件事是不成立的：

1
2


var x: String = "test"
x = nil

所以在 Swift 底下，就要使用 Optional 來處理值可能不存在的情況
當一個變數 x 被宣告成 Optional 型別時，該變數就會有兩個情況：

1
2


1. 有值，等於 x
2. 沒有值

要宣告一個變數可能為 nil 時的方式是使用問號 ‘?’：

1
2
3
4
5


// 此時 x = "yaya"
var x: String? = "yaya"

// 此時 x 沒有值
x = nil

拿以下程式在 Playground 執行看看：

1
2
3
4
5
6
7
8
9


var str: String = ""
println(str)
str = "yaya"
println(str)

var str2: String?
println(str2)
str2 = "yaya"
println(str2)

可以看一下 Playground 右邊的輸出框，觀察兩個 string 的差異
當 str2 被賦予 Optional 型別後，
str2 已經不是單純的 String 型別了，

那如何強制以 String 型別拿到 str2 的資料呢?
試著在 str2 後面加上驚嘆號，並觀察右方輸出結果:

1

println(str2!)

請注意！若要強制取值，一定要確保此 Optional 型別中一定有值，
否則將會導致執行錯誤，以下是錯誤範例：

1
2
3
4


var str2: String? = "yaya"
println(str2)
str2 = nil
println(str2!)

程式將會在第四行返回錯誤，因此使用驚嘆號強制取值前請先確保 Optional 裡有值。

在 Objective-C 中，nil 是指向一個不存在物件的指標；
而 Swift 中，nil 是一種非常明確地值－他就是代表「不存在」。

在 Playground 中多試試看囉~~

ps. Swift 的 ? 和 Ruby 的 ? 是完全不同意思的XD

[API-d3] - 使用時機與實際 API 參考

Fri, 03 Oct 2014 00:00:00 +0800

使用時機與實際 API 參考

什麼時候需要打造 RESTful API?
看看別人的 RESTful API (Instagram/Twitter)

什麼時候需要打造 RESTful API?
我認為當有數組資源要被多種不同平台使用時，就需要打造 RESTful API
例如，有 Android/ iOS / Web 要對同一 table 做存取時，
假設有個 MySQL DB，各個平台都使用各自的 mysql-driver 來直接操作 DB
假設有個 A 專案建立了一套書籍管理系統，資料庫裡記錄了大大小小的書籍，
而有個新的 B 專案需要使用到書籍的資料，此時 DB 操作的程式碼只能再寫一遍，
且各個平台重新撰寫，似乎是不大靠譜。

撰寫 RESTful API 的好處之一即是 RESTful 使用 HTTP 協定，
各個平台皆支援，不需要太複雜的程式，只需要使用各個平台的 http-client，
各個平台也不需要了解 DB 操作語法，只需要知道 json, xml 習慣的資料格式，
且開發 API 還能夠對各個資源輕易地上 cache 增進反應速度，
開發 RESTful API 好處多多，哪天想 Open API 也就不需要再多作處理了～

接著讓我們來看看兩個有名網站的 API 吧！

Instagram: http://instagram.com/developer/api-console/
Twitter: https://dev.twitter.com/rest/tools/console

很顯然的，我比較喜歡 Instagram 的 API 資源定義與命名方式 :P

下一篇會介紹我接下來會用到的工具箱，暖身結束，要正式開始了!
(不好意思前面嘴炮一點 XD)

[Swift-d3] - Playground - 變數與常數, 註解, 基本資料型別

Fri, 03 Oct 2014 00:00:00 +0800

變數與常數

定義一個變數:

1

var obj: String = ""

var 是保留字，宣告 obj 是一個變數名稱，冒號後面接資料形態
以此例子來說，宣告了一個字串變數叫做 obj，並且初始化為 "" 空字串

1

let obj: String = ""

let 同樣是用來宣告一個變數，但是宣告此變數後，該變數的值無法被改變，
無法被改變的數值其實正正的名字就叫做常數
以上面的例子來說，若我們多做一件事:

1
2


let obj: String = ""
obj = "test"

若我們試圖去更改 obj，讓 obj 從空字串變成 “test” 時，
Xcode 就會報錯，不能更改該值

再來是宣告的變型，其實宣告時不一定要給資料形態，
Swift 會自動從後面的值來判斷 x 可能是什麼資料形態，
只是由於筆者的習慣，會儘量在後面加上該變數的資料型別

1

var x = "test"

一行內宣告多值：

1

var x = 0.0, y = 0.0, z = 0.0

我們就可以在 Playground 裡面試著宣告一些變數看看，並且使用昨天的輸出函式來輸出變數:

1
2
3
4
5
6
7
8
9


var str: String = "測試"
let fixString: String = "fixed"

var x = 0, y = 1, z = 2

println(str)
println(x)
println(y)
println(z)

註解

1
2
3
4
5
6
7


// 單行註解

/*
多行註解
多行註解
多行註解
*/

基本資料型別

Swift 是一個強型別語言，意即若是以下的程式碼是會出錯的:

1
2


var x = "test"
x = 2

由於 x 已經被先 Swift 判定是 String 了，後面想指定 Int 資料給 x 就會出錯

Int 整數:
Swift 提供了 Int 還另外提供了 8, 16, 32, 64 位元的有號和無號整數型別
若在 32 位元平台，宣告 Int 的話， Int 的長度和 Int32 是一樣的
若在 64 位元平台，宣告 Int 的話， Int 的長度和 Int64 是一樣的

浮點數：
3.2, 0.0 之類的數字，可以用
Double - 64 位元浮點數 (至少 15 位數)
Float - 32 位元浮點數 (至少 6 位數)

布林值：
true/false

Tuples:
Tuple 可以將多個值組合成一個值，例如：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


//賦值
let httpSucess = (200, "Success")

// 反過來接值
let (statusCode, statusMessage) = httpSucess

// 若只需要其中一個值，另一個值可以用 _ 代替，但是不能沒有 _ 
let (statusCode, _) = httpSucess

// 也可以用索引的方式拿值
println(httpSucess.0)

// 宣告 tuples 時也可以直接給予參數一個名稱
let httpSucess = (statusCode: 200, statusMessage: "Success")

// 拿值時就可以:
println(httpSucess.statusCode)

同時結合 function 這樣就可以多值回傳了！

下一篇會接續今天變數相關的主題~

[API-d1] - 定義 1 - 什麼是 REST/RESTful?

Thu, 02 Oct 2014 00:00:00 +0800

Representational State Transfer，簡稱 REST，
它是一種網路架構風格，他並不是一種標準。

而 RESTful 可以這樣子想像:
美麗 (Beauty) 的事物可以稱為 Beautiful
設計為 REST 的系統就可以稱為 RESTful

以 API 而言，假設我們正在撰寫一組待辦事項的 API，
可能會有以下方式來作為 API 的 interface:

1
2
3
4
5


獲取使用者資料 /getAllUsers
獲取使用者資料 /getUser/1
新增使用者資料 /createUser
更新使用者資料 /updateUser/1
刪除使用者資料 /deleteUser/1

若是以 REST 風格來開發 RESTful API 的話:

1
2
3
4
5


獲取使用者資料 /GET /users
獲取使用者資料 /GET /user/1
新增使用者資料 /POST /user
更新使用者資料 /PUT /user/1
刪除使用者資料 /DELETE /user/1

兩者差異是在於 RESTful API 充分地使用了 HTTP protocol (GET/POST/PUT/DELETE)，
達到

以直觀簡潔的資源 URI
並且善用 HTTP Verb
達到對資源的操作
並使用 Web 所接受的資料類型: JSON, XML, YAML 等，最常見的是 JSON

通常是使用 HTTP, URI, JSON, HTML 這些現有廣泛流行的協議和標準，
且使用 HTTP status code 來代表該資源的狀態。

框架中強制使用 REST 風格的最有名的應該就是 Ruby on Rails 了!
(不過我們並不會使用 Rails 來開發 API service :P)

p.s. 因為 REST 並非是一種標準，因此有時候也不一定非得要照著 REST 來做，
只是在資源的操作面上，可以設計成這類的風格，以達到簡潔易懂，並且可重用。

下一篇會來聊聊 REST 的要求與優點

[API-d2] - 定義 2 - RESTful 的優點與要求

Thu, 02 Oct 2014 00:00:00 +0800

承上篇，

RESTful 的優點如下所列:

 1. 瀏覽器即可以作為 client 端
 2. 可以更高效地利用 cache 來達到更快的回應速度
 3. 界面與資料分離
 4. 節省伺服器的計算資源
 5. 可重用! web/android/ios 都可以用, 無痛轉換!

RESTful 的要求:

 1. client - server 架構 
 2. 分層系統 
 3. 利用快取機制增加效能 
 server-side: 在 GET 資源時，若該資源並沒有被變更，就可以利用 cache 機制減少 query，並且加快回應速度 
 client-side: 透過 client 端 cache 記錄 cache 版本， 
 若向 server 要求資源時發現 server 最新版與 cache 相同， 
 則 client 端直接取用本地資源即可，不需要再做一次查詢 
 省機器運算及流量 = 省錢 
 4. 通訊協定具有無狀態性 
 不能讓兩隻 API 做同一個動作! 
 假設完成轉賬手續必須先 call A 再 call B 的話， 
 若做完 A 後斷線導致 B 無法執行，後續要處理 A -> B 的方式會很麻煩 
 且不應該假設伺服器知道目前的狀態! 
 因此設計出來的 API 不能有狀態性 
 5. 統一界面 
 使用 HTTP Verb: GET/POST/PUT/DELETE

下一篇會討論什麼時候該打造 RESTful API? 以及看看別人寫的 RESTful API

[Swift-d1] - 介紹

Thu, 02 Oct 2014 00:00:00 +0800

Swift 是 2014 年由蘋果公司在其開發者大會 WWDC 上所發佈的程式語言

The Swift Programming Language 一書中提到：

Swift 用來撰寫 iOS 及 Mac OSX 的程式。
Swift 吸收了 C 和 Objective-C 的優點，使其在設計更具彈性、容易，且撰寫時有更多樂趣。
Swift 是基於成熟而且倍受喜愛的 Cocoa 和 Cocoa Touch framework，意即 Swift 可以直接使用這些現有的框架
Swift 兼具編譯語言的性能，以及直譯式語言的特性。

** 什麼是 Cocoa/Cocoa Touch framework:
Cocoa framework 是 Apple 爲 Mac OSX 所建立的環境，用來開發 OSX 的程式，
而 Cocoa Touch framework 則是建立於 Cocoa framework 之上，用來開發 iOS 作業系統程式，
此兩種 framework 皆遵循 MVC 軟體架構，開發時必須遵循此架構。

若之前從未接觸過 Objective-C 但又想嘗試開發 iOS app 的話，
現在是個入門的好時機，Swift 去除了 Objective-C 的繁瑣語法，
且相較於 Objective-C 是個更好入門的程式語言。

對於非 Objective-C 開發者而言，若先前有過程式語言開發經驗的話，語法上手不會太難，
只是需要花時間學習 Cocoa/Cocoa Touch framework，但是，都要學習撰寫 iOS app 了，
不學 Cocoa/Cocoa Touch framework 應該也說不過去 :D

而對於 Objective-C 開發者而言，由於已經非常熟悉 Cocoa/Cocoa Touch framework 了，
在 Swift 使用 Cocoa/Cocoa Touch framework 是幾乎無痛轉換的，因為函式、變數名稱完全一樣，
只需要熟悉 Swift 語法，不出一天即可快速上手，也因此 Objectiv-C 開發者也不需過於擔心飯碗被搶走 XD
接觸過 Cocoa/Cocoa Touch framework 的開發者來說還是有相當大的優勢的。

由於筆者之前從未接觸過 Objective-C/ Cocoa/ Cocoa Touch framework，
只有些許 java/php/ruby 撰寫經驗，
選擇 Swift 的原因之一即是語法上手容易，並且有 playground 可以馬上執行撰寫的程式，
也因此希望能夠透過學習 Swift ，了解 iOS app 開發架構，實際打造出一款 app！

[Swift-d2] - 安裝及 Hello World!

Thu, 02 Oct 2014 00:00:00 +0800

首先，你必須要有一台 Mac。
我也不知道要如何用虛擬機 build 一台 Mac VM 出來，
所以就是，先買一台 Mac XD

若已經有了 Mac，只要到 Appstore 下載 Xcode 即可，
注意是要 Xcode 6.0 以上， Xcode 6 才有支援 Swift ，舊版的 Xcode 5 是無法開發 Swift 的

安裝完 Xcode 後

首先開啓 Xcode
選擇 “Create a playground”

輸入 Playground 名稱並選擇儲存位置

就進入了 Playground 了！

可以看到 Xcode 已經預先載入了幾行程式碼了
來稍微看一下:

1
2
3
4
5


// Playground - noun: a place where people can play

import UIKit

var str = "Hello, playground"

第一行，使用了 //，有寫過程式的話一定都知道這是註解
在 Swift 裡面使用 // 及 /* .... */ 來註解程式碼

第二行意思則是將 UIKit 引入到 playground 中，
借此使用 UIKit 的函示物件等等，目前還都不會用到

第三行的意思則是宣告了一個變數，該變數為一個字串，內容為 “Hello World!”

在 Playground 中，很有意思的是右邊的灰色區塊，
Xcode 會即時顯示該變數的值、型別、以及輸出結果，
對於剛入門 Swift 的開發者來說是一個非常好的功能來練習語法，
也因此未來幾天都會使用 Playground 來練習 Swift 基本語法!

最後當然要不免俗的撰寫最經典的程式 - Hello World!

加入:

1

println(str)

馬上就可以在右邊看到結果囉!

println(args) 是 Swift 標準輸出的函示，算是使用率蠻高的一個 method，只要將參數代入即可顯示該參數的內容，
有興趣也可以透過 Xcode 的 autocomplete 來看看和 print 有關的 method，
例如 print()，可以試試看，有些許不一樣哦!

未來一個禮拜都會來練習一些基本語法!

Codeigniter on nginx

Thu, 25 Sep 2014 00:00:00 +0800

I use Ubuntu 14.04, Nginx 1.4.6, php5-fpm, Codeigniter 2.2.0

It will remove index.php, and access Codeigniter site normally.

Clean configuration “/etc/nginx/site-enabled/default”:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74


server {

#>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> START
 listen 80;
 listen [::]:80 default_server ipv6only=on;

 root /YOUR/PROJECT/ROOT;
 index index.html index.htm index.php;

 # Make site accessible from http://localhost/
 server_name localhost;
 
 #location ~* .(ico|css|js|gif|jpe?g|png)(?[0-9]+)?$ {
 # expires max;
 # log_not_found off;
 #}
 
 location / {
 # First attempt to serve request as file, then
 # as directory, then fall back to displaying a 404.
 try_files $uri $uri/ /index.php;
 # Uncomment to enable naxsi on this location
 # include /etc/nginx/naxsi.rules
 }

 location ~ .php$ {
 root /YOUR/PROJECT/ROOT;
 try_files $uri =404;
 fastcgi_pass unix:/var/run/php5-fpm.sock;
 fastcgi_index index.php;
 fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
 include fastcgi_params;
 fastcgi_buffer_size 128k;
 fastcgi_buffers 256 4k;
 fastcgi_busy_buffers_size 256k;
 fastcgi_temp_file_write_size 256k;
 }

#<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< END

 # Only for nginx-naxsi used with nginx-naxsi-ui : process denied requests
 #location /RequestDenied {
 # proxy_pass http://127.0.0.1:8080;

 #error_page 404 /404.html;

 # redirect server error pages to the static page /50x.html
 #
 #error_page 500 502 503 504 /50x.html;
 #location = /50x.html {
 # root /usr/share/nginx/html;
 #}

 # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
 #
 #location ~ \.php$ {
 # fastcgi_split_path_info ^(.+\.php)(/.+)$;
 # # NOTE: You should have "cgi.fix_pathinfo = 0;" in php.ini
 #
 # # With php5-cgi alone:
 # fastcgi_pass 127.0.0.1:9000;
 # # With php5-fpm:
 # fastcgi_pass unix:/var/run/php5-fpm.sock;
 # fastcgi_index index.php;
 # include fastcgi_params;
 #}

 # deny access to .htaccess files, if Apache's document root
 # concurs with nginx's one
 #
 #location ~ /\.ht {
 # deny all;
 #}
}

Codeigniter config - config.php:

1
2


$config['index_page'] = '';
$config['uri_protocol'] = 'REQUEST_URI';

Event-driven I/O models and Coroutine Notes

Mon, 18 Aug 2014 00:00:00 +0800

Event-driven I/O model

首先，聽到 Event-driven 是從 Node.js 得知，

Node.js® is a platform built on Chrome’s JavaScript runtime for easily building fast, scalable network applications.

Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.

其實剛聽到這詞會有點陌生，我們可以先從 Victor 所寫的文章開始讀起:
淺談 coroutine 與 gevent

裡面提到了幾種網路模型：

阻塞式單一行程
阻塞式多行程
阻塞式多行程多執行序
非阻塞式事件驅動
非阻塞式 coroutine

以下是各語言 event-driven 的 model
(Node.js 就不列出了，本身就是 event-driven 設計)

1
2
3
4
5
6
7
8


Event-driven model:
* Ruby 	-> [Eventmachine](http://rubyeventmachine.com/) 
			-> [Celluloid::IO](https://github.com/celluloid/celluloid-io) 
			-> [Thin Server](http://code.macournoyer.com/thin) 
* Python 	-> [Twisted](https://twistedmatrix.com/trac/) 
			-> [Tornado](http://www.tornadoweb.org/en/stable) 
* Perl	 -> [Perl Object Environment (POE)](http://poe.perl.org) 
* PHP	 	-> [REACT](http://reactphp.org) 

以 Ruby 建構 API Service 的話，可以使用 Sinatra + Eventmachine + thin proxy + Nginx 的 Solution:
Embedding Sinatra within EventMachine

延伸閱讀:
2008 - Eventmachine and Reactor pattern
2012 - Lessons Learnt From Building a REST API
年份未知 - 針對各 framework 進行評測 Event Driven I/O Web Application Server Analysis
Twisted 教程

Reactor 模型

Node.js 處理 concurrency 是 Reactor mode
Ruby 的 Goliath framework 也是 Reactor mode
Golang, Erlang 是 CSP (communicating sequential process)

現在比較流行的是 event-driven 的 Reactor mode, e.g. Node.js, Goliath
但是 Node.js 比較令人詬病的是 code 難維護，太多層層的 callback 會擾亂邏輯
畢竟線性處理比較符合人類思維
而 Ruby 使用 Fiber 以避免寫出過多的 callback
Python 的 Twisted 也已經存在好一陣子，穩定發展中

不過以 Node.js 典型的應用的確是 proxy, API server
因此我們可以參考 Node.js 的特性，使用其他語言來達到同樣的效果
那就是 event-driven

Coroutine Programming

1
2
3
4


* Golang - goroutine (native) 
* Python - [gevent](http://www.gevent.org/) 
* Ruby - Fiber (native) 
* Lua 

延伸閱讀:
Ruby 的 eventmachine 相關討論
 Ruby Fiber 指南
 2012 - Lua - Coroutine introduction
2009 - Fibers & Cooperative Scheduling in Ruby
2010 - Lua、LuaJIT Coroutine和Ruby Fiber的切換效率對比

建構 API Service 考慮到的除了 Server 以外，
語言的特性通常也必須考慮進去，例如
sync v.s. async
coroutine v.s. non-coroutine
但通常以當前需求而言，其實也不需要 over-design
只要選擇拿手的，能夠快速方便的開發出雛形，
我想等到真的快要 10000 per/second request 時，再來煩惱更進一步的架構吧

Add tracked file to .gitignore

Fri, 15 Aug 2014 00:00:00 +0800

1

git update-index --assume-unchanged <file>

If there’s a remote server, also do:

1

git rm --cached <file>

Emoji data in MySQL

Wed, 06 Aug 2014 00:00:00 +0800

Supported MySQL 5.5, 5.6.

First, MySQL should set DB and table to utf8mb4.

utf8 - 3 byte characters

utf8mb4 - 4 byte characters

1
2
3
4
5


ALTER DATABASE my_database DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;

ALTER TABLE my_table DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

ALTER TABLE my_column CHANGE my_column my_column TEXT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci NOT NULL;

Then, when inserting data or selecting data, execute this statement first:

1
2
3
4
5


--Execute this statement first
SET NAMES utf8mb4;

--then insert or select
SELECT * FROM my_table

Writing Lua on Mac

Wed, 06 Aug 2014 00:00:00 +0800

Install lua on mac

I’m not sure that whether Lua is built on mac originally.

(Ok, tested on Mac OSX 10.9, there is Lua in it.)

So I installed Lua via Homebrew.

Install homebrew (optional)

1

ruby -e "$(curl -fsSL https://raw.github.com/Homebrew/homebrew/go/install)"

Install Lua by homebrew

1

brew install lua

Writing Lua

You can use command: lua to interact with lua. (just like php -a or irb)

1

print("Hello World")

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


function fact(n)
	if n == 0 then
		return 1
	else
		return n * fact(n-1)
	end
end

print("enter a number:")
num = io.read("*number") 
print(fact(num))
		

Capistrano with rails - basic notes

Tue, 05 Aug 2014 00:00:00 +0800

詳細的東西還是看 project’s github page 比較快 - Capistrano@github

Capistrano 剛開始寫 deploy script 時真的會有點搞不太懂 XD
記錄一下使用 ‘capistrano’ 把特定的 github repo 抓到 remote server

安裝

先在 Gemfile 加入:

1

gem 'capistrano', '~> 3.2.0'

然後安裝~

1

bundle install

步驟大概會是：

假設已經寫完 capistrano 了，執行 script 時，
capistrano 會先利用 script 裡提供的 server ip 以及 public key，
先連線到 remote server，接著再到 github 上拉 code 到指定的目錄裡，
再重開 server。

產生相關檔案

1

bundle exec cap install

會產生以下檔案: (copy from Capistrano@github)

1
2
3
4
5
6
7
8
9


├── Capfile
├── config
│ ├── deploy
│ │ ├── production.rb
│ │ └── staging.rb
│ └── deploy.rb
└── lib
 └── capistrano
 └── tasks

deploy.rb 通常是設定 source control 的類型 (可以設定 git, hg, svn)，
project repo 的路徑，要 deploy 到 server 的哪個目錄等等，
config/deploy/* 底下的檔案則是根據不同的 stage 分別設定，
以下是 deploy.rb, production.rb 的一些簡單設定

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61


# config valid only for Capistrano 3.1
lock '3.2.1'

set :application, 'application_name'
set :repo_url, 'github_repo_url'

set :deploy_via, :copy

# Default branch is :master
# ask :branch, proc { `git rev-parse --abbrev-ref HEAD`.chomp }.call

# Default deploy_to directory is /var/www/my_app
set :deploy_to, '/server/www/path/'

# Default value for :scm is :git
set :scm, :git

# Default value for :format is :pretty
set :format, :pretty

# Default value for :log_level is :debug
set :log_level, :debug

# Default value for :pty is false
# set :pty, true

# Default value for :linked_files is []
# set :linked_files, %w{config/database.yml}

# Default value for linked_dirs is []
# set :linked_dirs, %w{bin log tmp/pids tmp/cache tmp/sockets vendor/bundle public/system}

# Default value for default_env is {}
# set :default_env, { path: "/opt/ruby/bin:$PATH" }

# Default value for keep_releases is 5
# set :keep_releases, 5

namespace :deploy do

 desc 'Restart application'
 task :restart do
 on roles(:app), in: :sequence, wait: 5 do
 # Your restart mechanism here, for example:
 execute :mkdir, '-p', "#{ release_path }/tmp"
 execute :touch, release_path.join('tmp/restart.txt')
 end
 end

 after :publishing, :restart

 after :restart, :clear_cache do
 on roles(:web), in: :groups, limit: 3, wait: 10 do
 # Here we can do anything such as:
 # within release_path do
 # execute :rake, 'cache:clear'
 # end
 end
 end

end

production.rb:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42


# Simple Role Syntax
# ==================
# Supports bulk-adding hosts to roles, the primary server in each group
# is considered to be the first unless any hosts have the primary
# property set. Don't declare `role :all`, it's a meta role.

role :app, %w{app@server}
role :web, %w{web@server}
role :db, %w{db@server}


# Extended Server Syntax
# ======================
# This can be used to drop a more detailed server definition into the
# server list. The second argument is a, or duck-types, Hash and is
# used to set extended properties on the server.

server 'server_ip', user: 'server_user', roles: %w{app}, my_property: :my_value


# Custom SSH Options
# ==================
# You may pass any option but keep in mind that net/ssh understands a
# limited set of options, consult[net/ssh documentation](http://net-ssh.github.io/net-ssh/classes/Net/SSH.html#method-c-start).
#
# Global options
# --------------
# set :ssh_options, {
# keys: %w(/home/rlisowski/.ssh/id_rsa),
# forward_agent: true
# auth_methods: %w(password)
# }
#
# And/or per server (overrides global)
# ------------------------------------
 server 'server_ip',
 user: 'server_user',
 ssh_options: {
 keys: %w(/user/.ssh/id_rsa),
 forward_agent: false,
 auth_methods: %w(publickey password)
 }

設定完後，因為這邊是設定 production.rb
因此執行以下指令 deploy 到 production server

1

$ bundle exec cap production deploy

如果 exit status 0 (successful).
那就是成功啦~

Openresty on Ubuntu 14.04

Tue, 05 Aug 2014 00:00:00 +0800

Install

choose the latest version of Openresty
I used ngx_openresty-1.7.2.1.tar.gz

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


# install packages
sudo apt-get install libreadline-dev libpcre3-dev libssl-dev perl 

# get openresty package
wget http://openresty.org/download/ngx_openresty-1.7.2.1.tar.gz 

# unzip
tar xzvf ngx_openresty-1.7.2.1.tar.gz

# install
cd ngx_openresty-1.7.2.1/

# You can setup with ./configure --prefix="the folder you want to install", default is '/usr/local/openresty'
./configure 
make
sudo make install # need permission to copy file to target folder

Default folder: /usr/local/openresty

Setup

create work folder in ~

1
2
3


mkdir ~/work
cd ~/work
mkdir logs/ conf/

create a new file in ~/work/conf/nginx.conf

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


worker_processes 1;
error_log logs/error.log;
events {
 worker_connections 1024;
}
http {
 server {
 listen 8080;
 location / {
 default_type text/html;
 content_by_lua '
 ngx.say("<p>hello, world</p>")
 ';
 }
 }
}

because Openresty is installed in /usr/local/openresty,
we need to add the directory to PATH variable

1
2


PATH=/usr/local/openresty/nginx/sbin:$PATH
export PATH

Then use the way below to start nginx server

1

nginx -p `pwd`/ -c conf/nginx.conf

Assume that you have a nginx server originally, and then you installed Openresty, it can be set up at the same time if the port is not confilcted to the origin nginx.

Use external lua file to keep conf clean

Edit ~/work/conf/nginx.conf

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


worker_processes 1;
error_log logs/error.log;
events {
 worker_connections 1024;
}
http {
 server {
 listen 8080;
 location /hello {
 content_by_lua_file conf/hello.lua;
 }
 }
}

1
2


-- hello.lua
ngx.say("Hello World")

Install rails server env with rbenv on Ubuntu 14.04

Wed, 30 Jul 2014 00:00:00 +0800

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


nodejs v0.10.25 (for rails javascript engine)

rbenv 0.4.0-98-g13a474c

ruby 2.1.2p95 (2014-05-08 revision 45877) [x86_64-linux]

Rails 4.1.4

nginx version: nginx/1.6.0

Phusion Passenger version 4.0.48

mysql Ver 14.14 Distrib 5.5.38, for debian-linux-gnu (x86_64) using readline 6.3

Installing Ruby & Rails

1
2


sudo apt-get update && sudo apt-get upgrade
sudo apt-get install git-core curl zlib1g-dev build-essential libssl-dev libreadline-dev libyaml-dev libsqlite3-dev sqlite3 libxml2-dev libxslt1-dev libcurl4-openssl-dev python-software-properties nodejs npm

Use rbenv

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


cd
git clone git://github.com/sstephenson/rbenv.git .rbenv
echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bashrc
echo 'eval "$(rbenv init -)"' >> ~/.bashrc
exec $SHELL

git clone git://github.com/sstephenson/ruby-build.git ~/.rbenv/plugins/ruby-build
echo 'export PATH="$HOME/.rbenv/plugins/ruby-build/bin:$PATH"' >> ~/.bashrc
exec $SHELL

rbenv install 2.1.2
exec $SHELL

rbenv global 2.1.2
ruby -v

Don’t install rdoc when installing gems

1

echo "gem: --no-ri --no-rdoc" > ~/.gemrc

Install rails

1
2
3


gem install rails
exec $SHELL
rails -v

Installing Nginx with passenger

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


# Install Phusion's PGP key to verify packages
gpg --keyserver keyserver.ubuntu.com --recv-keys 561F9B9CAC40B2F7
gpg --armor --export 561F9B9CAC40B2F7 | sudo apt-key add -

# Add HTTPS support to APT
sudo apt-get install apt-transport-https

# Add the passenger repository
sudo sh -c "echo 'deb https://oss-binaries.phusionpassenger.com/apt/passenger trusty main' >> /etc/apt/sources.list.d/passenger.list"
sudo chown root: /etc/apt/sources.list.d/passenger.list
sudo chmod 600 /etc/apt/sources.list.d/passenger.list
sudo apt-get update

# Install nginx and passenger
sudo apt-get install nginx-full passenger

Edit passenger configuration in /etc/nginx/nginx.conf

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


##
# Phusion Passenger
##
# Uncomment it if you installed ruby-passenger or ruby-passenger-enterprise
##

passenger_root /usr/lib/ruby/vendor_ruby/phusion_passenger/locations.ini;

passenger_ruby /usr/bin/ruby; #change this line

# passenger_ruby /home/yourpath/.rbenv/shims/ruby; # If you use rbenv
# Use `which ruby`

Installing MySQL

1

sudo apt-get install mysql-server mysql-client libmysqlclient-dev

Done!

[Rails] ActionController::InvalidAuthenticityToken when useing Rails4 as API

Thu, 03 Jul 2014 00:00:00 +0800

change
protect_from_forgery with: :exception
to
protect_from_forgery with: :null_session
in ApplicationController

[Apache] SSL (self-signed & purchased version)

Thu, 19 Jun 2014 00:00:00 +0800

[Self-signed]

Generate a host key:

1

sudo ssh-keygen -f host.key

Generate a certificate request file

1

sudo openssl req -new -key host.key -out request.csr

Type what you want:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


 Country Name (2 letter code) [AU]:TW
 State or Province Name (full name) [Some-State]:Taiwan
 Locality Name (eg, city) []:Taipei
 Organization Name (eg, company) [Internet Widgits Pty Ltd]:
 Organizational Unit Name (eg, section) []:
 Common Name (e.g. server FQDN or YOUR name) []:
 Email Address []:
 
 Please enter the following 'extra' attributes
 to be sent with your certificate request
 A challenge password []:
 An optional company name []:

Create the SSL certificate
sudo openssl x509 -req -days 365 -in request.csr -signkey host.key -out server.crt

Create a nopass’ key (optional)
openssl rsa -in host.key -out host.nopass.key
Configure Apache
LoadModule ssl_module libexec/apache2/mod_ssl.so

1
2
3


SSLEngine on 
SSLCertificateFile "/etc/apache2/ssl/server.crt"
SSLCertificateKeyFile "/etc/apache2/ssl/host.nopass.key"

1
2


sudo apachectl configtest 
sudo apachectl restart 

p.s. enable mods: sudo a2enmod ssl
enable sites: sudo a2ensite default-ssl

[Purchased (Symantec)]

[http://www.symantec.com/tv/products/details.jsp?vid=1452855338001]

[Mac] update openssl on mac

Mon, 16 Jun 2014 00:00:00 +0800

First of all, you need ‘brew’ (http://brew.sh/)

1
2
3
4
5


$ brew update
$ brew install openssl
$ brew link --force openssl
 
$openssl version -a

If it’s still the old version, you shoud:

1
2
3


$ sudo rm /usr/bin/openssl 	#remove the old binary 
$ sudo ln -s /usr/local/Cellar/openssl/1.0.1h/bin/openssl /usr/local/bin
(1.0.1h -> the latest version)

ref: http://apple.stackexchange.com/questions/126830/how-to-upgrade-openssl-in-os-x

[MySQL] add a unique index by 2 columns

Wed, 11 Jun 2014 00:00:00 +0800

ALTER TABLE table_name ADD UNIQUE INDEX(column1, column2);

[Ubuntu] enable/disable services on start-up

Fri, 30 May 2014 00:00:00 +0800

Take apache for example:

Disable - update-rc.d -f apache2 remove

Enable - update-rc.d apache2 defaults

[Codeigniter] Tips deploy to Amazon Web Services

Wed, 28 May 2014 00:00:00 +0800

If you use Amazon RDS, especially micro plan,
remember to set $config['pconnect'] = FALSE in application/config/database.php.
Because RDS has Max_connection limits.
If you use RDS, remeber that the system timezone in RDS is +0 timezone.
In your application, you should care about this thing.
If you will use loadbalancer, remember to ….(???)

[MySQL] Several useful statements (GROUP_CONCAT, ifnull, DATE_FORMAT)

Tue, 06 May 2014 00:00:00 +0800

將 query 出來的多筆記錄結合成一個欄位
例如原本的 query 結果為：
SELECT 'fruits' FROM 'fruits_table'
apple
banana
kiwi
SELECT group_concat('fruits' separator ',') FROM 'fruits_table'
result: apple,banana,kiwi
改變 datetime 欄位的顯示結果
SELECT DATE_FORMAT( 'created_at', '%Y/%m/%d %H:%i') AS 'created_at' FROM 'message_table'
result: 2014/05/06 18:20
若某個欄位的值為空，則給予預設值
SELECT ifnull('is_success', 0) AS 'is_success' FROM ....

[Ubuntu] update OpenSSL

Wed, 16 Apr 2014 00:00:00 +0800

Easy way:

Below the single command line to compiling and install the last openssl version.

1

$ curl https://www.openssl.org/source/openssl-1.0.1h.tar.gz | tar xz && cd openssl-1.0.1h && sudo ./config && sudo make && sudo make install

Replace old openssl binary file by the new one via a symlink.

1

$ sudo ln -sf /usr/local/ssl/bin/openssl `which openssl`

how to check version:

1
2
3
4
5
6
7
8
9


$ openssl version -b
built on: Mon Apr 7 20:33:29 UTC 2014
$ openssl version -a
OpenSSL 1.0.1 14 Mar 2012
built on: Mon Apr 7 20:33:29 UTC 2014
platform: debian-amd64
options: bn(64,64) rc4(16x,int) des(idx,cisc,16,int) blowfish(idx)
compiler: ..........
OPENSSLDIR: "/usr/lib/ssl"

from: http://superuser.com/questions/740930/apt-get-upgrade-openssl-wont-bring-ubuntu-12-04-to-latest-version

Hard way:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35


#!/bin/bash

###
# Need to upgrade an Ubuntu 13.04 server to use OpenSSL 1.0.1g?
# Read and execute this script :D
###
# License: WTFPL, GPLv3, MIT, whatever; just patch your shit
# http://askubuntu.com/questions/444702/how-to-patch-cve-2014-0160-in-openssl
###

if [[ $EUID -ne 0 ]]; then
	echo "This script must be run as root" 1>&2
	exit 1
fi
wget https://www.openssl.org/source/openssl-1.0.1g.tar.gz
wget https://www.openssl.org/source/openssl-1.0.1g.tar.gz.asc

gpg --recv-key 0xD3577507FA40E9E2
# Dr Stephen Henson
# IMPORTANT! Manually verify that this is the correct key ID:
# http://pgp.mit.edu:11371/pks/lookup?op=vindex&search=0xD3577507FA40E9E2
# https://www.openssl.org/about/

gpg --verify openssl-1.0.1g.tar.gz.asc openssl-1.0.1g.tar.gz

if [[ $? -eq 0 ]]; then
	tar xzvf openssl-1.0.1g.tar.gz
	cd openssl-1.0.1g && sudo ./config && sudo make && sudo make install
	# To link the old openssl library to a new version
	sudo ln -sf /usr/local/ssl/bin/openssl `which openssl`
	echo
	echo "DONE!"
fi

# eof

[PHP] json_decode error by wrong json string with quotes

Tue, 28 Jan 2014 00:00:00 +0800

Normal json string:

1

{"Hey":"There"}

Error json string got from $_POST variable:

1

{\"Hey\":\"There\"}

This may causes by magic_quotes in php.ini
Magic is never good in development.

[Sublime Text 2] Integration With RVM and Rspec

Thu, 09 Jan 2014 00:00:00 +0800

Ruby:

~/Library/Application\ Support/Sublime\ Text\ 2/Packages/Ruby/Ruby.sublime-build

1
2
3
4
5
6
7
8


{
 "env":{
 "PATH":"${HOME}/.rvm/bin:${PATH}"
 },
 "cmd": ["rvm-auto-ruby", "$file"],
 "file_regex": "^(...*?):([0-9]*):?([0-9]*)",
 "selector": "source.ruby"
}

http://rubenlaguna.com/wp/2012/12/07/sublime-text-2-rvm-rspec-take-2/

[Rails] List of Rails Model Type (MySQL)

Thu, 02 Jan 2014 00:00:00 +0800

:binary
:boolean
:date
:datetime
:decimal
:float
:integer
:primary_key
:string
:text
:time
:timestamp

http://api.rubyonrails.org/classes/ActiveRecord/ConnectionAdapters/TableDefinition.html#method-i-column

[Rails] PUT v.s. PATCH

Thu, 02 Jan 2014 00:00:00 +0800

According to rails convention,

PUT is used for updating an existing resource

POST is used for creating a new resource

In rails 4, PUT has been changed to PATCH to avoid confusion.

1
2
3
4
5
6
7


 posts GET /posts(.:format) {:action=>"index", :controller=>"posts"}
 POST /posts(.:format) {:action=>"create", :controller=>"posts"}
 new_post GET /posts/new(.:format) {:action=>"new", :controller=>"posts"}
edit_post GET /posts/:id/edit(.:format) {:action=>"edit", :controller=>"posts"}
 post GET /posts/:id(.:format) {:action=>"show", :controller=>"posts"}
 PUT /posts/:id(.:format) {:action=>"update", :controller=>"posts"}
 DELETE /posts/:id(.:format) {:action=>"destroy", :controller=>"posts"}

延伸閱讀：ihower - HTTP Verbs: 談 POST, PUT 和 PATCH 的應用

[AWS] ubuntu swap

Thu, 26 Dec 2013 00:00:00 +0800

Add swap for an instance

1
2
3
4


$ sudo /bin/dd if=/dev/zero of=/var/swap.1 bs=1M count=1024
$ sudo /sbin/mkswap /var/swap.1
$ sudo /sbin/swapon /var/swap.1
$ echo "/var/swap.1 swap swap defaults 0 0" >> /etc/fstab #將 swap 加入 開機啟動

在 Amazon EC2 micro plan，加入 swap 很容易 I/O 過量，
因此最好是需要時才開啟 swap，不用時關閉 swap 以免被收錢~

swap usage

1
2
3
4
5


$ swapon -s 
$ free -k 
---
$ swapoff -a 
$ swapon -a 

[SublimeText2] use command to call sublime text2

Tue, 24 Dec 2013 00:00:00 +0800

1

ln -s /Applications/Sublime\ Text\ 2.app/Contents/SharedSupport/bin/subl /usr/local/bin/sublime

in terminal:

1
2


$ sublime filename
$ sublime . (open the directory)

[Gem] How to make --no-ri --no-rdoc the default for gem install?

Sun, 22 Dec 2013 00:00:00 +0800

In home dir, create a file: .gemrc (on linux, maybe on mac)

1

echo "gem: --no-ri --no-rdoc" >> ~/.gemrc

[Ubuntu] RoR environment

Fri, 20 Dec 2013 00:00:00 +0800

RVM with Ruby2.0.0-p353 + Rails4.0.2 + Ubuntu12.04(precise64) + php-fpm by Vagrant(clean install)

p.s.
If you don’t use RVM, you can just follow the instruction from Passenger offcial website. It will be easier.
Plus, I installed all these things by Vagrant.

First thing to do

1
2


$ sudo apt-get update
$ sudo apt-get upgrade

Pre-setup: install necessary packages

1
2


$ sudo apt-get update
$ sudo apt-get install build-essential libssl-dev libpcre3-dev libncurses5-dev libreadline6-dev git vim curl libcurl4-openssl-dev libreadline6 autoconf openssl git-core zlib1g zlib1g-dev libyaml-dev libsqlite3-dev sqlite3 libxml2-dev libxslt1-dev autoconf libc6-dev libgdbm-dev libncurses5-dev automake libtool bison subversion pkg-config libffi-dev

Get .bashrc from my repo (Optional)

1
2
3
4
5
6
7
8


$ cd
$ git clone https://github.com/jerry54010/bash-it.git
$ mv bash-it .bash_it
$ cd .bash_it
$ git checkout ubuntu
$ ln -s ~/.bash_it/.bash_profile ~/.bash_profile
$ cd
$ source ~/.bash_profile

Get .vimrc from my repo (Optional)

1

$ wget https://gist.github.com/jerry54010/8049575/raw/42ced22651fedf06174457e311d22d17f6591b65/.vimrc

RVM and Ruby 2.0 (RVM: Ruby version management)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


$ \curl -sSL https://get.rvm.io | bash -s stable
$ source ~/.bash_profile //if you installed my bash_profile. 
//If not, source ~/.profile
$ rvm requirements
$ echo 'gem: --no-ri --no-rdoc' >> ~/.gemrc
$ rvm install 2.0.0
$ source ~/.bash_profile //if you installed my bash_profile. 
//If not, source ~/.profile

add this line to .bash_rc or .bash_profile (if you don't use my .bash_profile)
[[ -s "$HOME/.rvm/scripts/rvm" ]] && . "$HOME/.rvm/scripts/rvm" # Load RVM function

$ rvm use 2.0.0 --default

Now we should be using ruby2.0.0 by RVM, let’s check:

1
2
3
4
5


$ rvm list
=* ruby-2.0.0-p353 [ x86_64 ] 
// => - current
// =* - current && default
// * - default

Nodejs, libv8-dev(for javascript) and SQLite3 (sqlite3 libsqlite3-dev)

1

$ sudo apt-get -y install nodejs libv8-dev sqlite3 libsqlite3-dev

Passenger with NGINX

1
2
3
4
5
6


$ gem install passenger 
$ rvmsudo passenger-install-nginx-module
choose 2: customize
	a. src dir: /home/vagrant/nginx-1.4.4/ (where the nginx you download)
	b. I installed nginx with passenger in `/etc/nginx` (default is /opt/nginx)
	c. default

Get nginx script

If you use /opt/nginx as root dir, you don’t need to modify this script.
If you use /etc/nginx or else dir as root dir like me, you should modify the script.
(from linode)

1
2
3
4


$ wget -O init-deb.sh http://library.linode.com/assets/1139-init-deb.sh
$ sudo mv init-deb.sh /etc/init.d/nginx
$ chmod +x /etc/init.d/nginx
$ sudo /usr/sbin/update-rc.d -f nginx defaults

The nginx default public folder will be in /etc/nginx/html
check nginx version:

1
2


$ /etc/nginx/sbin/nginx -v
nginx version: nginx/1.4.4

Install php5-fpm

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


$ sudo apt-get -y install php5-cli php5-common php5-fpm
$ sudo vim /etc/php5/fpm/php.ini 
//(find and change to `cgi.fix_pathinfo = 0` )
$ sudo vim /etc/php5/fpm/pool.d/www.conf 
//change: listen = 127.0.0.1:9000 to listen = /var/run/php5-fpm.sock
$ sudo vim /etc/nginx/conf/nginx.conf or /opt/nginx/conf/nginx.conf //find and modify 
location ~ \.php$ {
 fastcgi_split_path_info ^(.+\.php)(/.+)$;
 # NOTE: You should have "cgi.fix_pathinfo = 0;" in php.ini
 # With php5-cgi alone:
 #fastcgi_pass 127.0.0.1:9000;
 # With php5-fpm:
 fastcgi_pass unix:/var/run/php5-fpm.sock;
 fastcgi_index index.php;
 fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
 include fastcgi_params;
}
$ echo "<?php phpinfo(); ?>" | sudo tee -a /etc/nginx/html/phpinfo.php

Restart all:

1
2


$ sudo service php5-fpm restart
$ sudo service nginx restart

Install rails

1

$ gem install rails

RoR environment check

1
2
3
4
5
6


$ ruby -v 
ruby 2.0.0p353 (2013-11-22 revision 43784) [x86_64-linux]
$ rails -v
Rails 4.0.2
$ rake -V
rake, version 10.1.0

If you passed, you are good to go!

Deploy Rails application by nginx:

Assume your rails application path is: /home/vagrant/projects/subapp/
(by rails new subapp)
then, the /etc/nginx/conf/nginx.conf will be:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


http {
 ...
 server {
 listen 80;
 server_name localhost;
 root /etc/nginx/html;

 # This block has been added.
 location ~ ^/subapp(/.*|$) {
 passenger_base_uri /subapp;
 alias /home/vagrant/projects/subapp/public$1; # <-- be sure to point to 'public'!
 passenger_app_root /home/vagrant/projects/subapp;
 passenger_enabled on;
 rails_env development; # or production
 }
 }
 ...
}

restart nginx, you can access the url: http://localhost/subapp/

Install MySQL and Mysql adapter

1
2


$ sudo apt-get -y install mysql-server mysql-common mysql-client libmysqlclient-dev 
$ gem install mysql2 //gem mysql2 is faster than gem mysql 

The gem you installed is placed in RVM’s ruby, if you are using RVM’s ruby.

If you use MySQL in your rails application, remember to change the database.yml.

p.s. If you want to use phpmyadmin, you can do:

1

$ sudo apt-get install php5-mysql

download phpmyadmin, then extract to /etc/nginx/html/phpmyadmin
then start the server, access: http://localhost/phpmyadmin/

[Vagrant] use knife-solo to deploy a new VM

Thu, 19 Dec 2013 00:00:00 +0800

My own computer: host side
My VM: guest side

knife-solo is a tool for Chef.
host side: you need ruby environment!

1

$ gem install knife-solo

The only thing you need to install is just knife-solo by ruby!

1
2
3


$ knife configure -r . --defaults (產生預設設定檔，內容為空)
$ knife cookbook create "package"
$ knife solo bootstrap vagrant@ip.address (bootstrap = prepare + cook, only for the first time)

加入菜單：

1

$ knife cookbook create nginx

在 cookbooks/nginx/recipes/default.rb 裡最少要加入
package 'nginx' 也就是套件名稱
其他內容可以自己加
例如：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


package 'nginx'

service 'nginx' do
 supports [:status, :restart, :reload]
 action :start
end

directory "/vagrant/demo" do
end

file "/vagrant/index.php" do
 content "<?php phpinfo(); ?>"
end

template "/etc/nginx/sites-enabled/default" do
 source 'default.erb'
 notifies :restart, 'service[nginx]', :immediately
end

[Ruby] PP to Ruby as Var_dump to PHP

Wed, 18 Dec 2013 00:00:00 +0800

1
2


require 'pp'
pp(ENV)

Usage:
pp(any_variable)

just like var_dump in php

[Ubuntu] -bash: warning: setlocale: LC_CTYPE: cannot change locale

Wed, 18 Dec 2013 00:00:00 +0800

1
2


$ sudo locale-gen zh_TW.UTF-8
$ sudo update-locale LANG=zh_TW.UTF-8

reload your bash profile

[Codeigniter] use markdown as library

Mon, 16 Dec 2013 00:00:00 +0800

https://github.com/erusev/parsedown

download the Parsedown.php
and put it into Library folder
then edit autoload.php

1

$autoload['libraries'] = array('Parsedown');

then in the view php for tests:

1
2
3


$text = 'Hello **Parsedown**!';
$result = Parsedown::instance()->parse($text);
echo $result;

No need to require or include the file.
If you want to load a file with path, you can use the function called file_get_contents:

1

file_get_contents('./markdown/test.md',true); (true: enable path)

[Ubuntu] 12.04 install oracle java

Tue, 26 Nov 2013 00:00:00 +0800

1
2
3
4
5
6
7


sudo rm /var/lib/dpkg/info/oracle-java7-installer*
sudo apt-get purge oracle-java7-installer*
sudo rm /etc/apt/sources.list.d/*java*
sudo apt-get update
sudo add-apt-repository ppa:webupd8team/java
sudo apt-get update
sudo apt-get install oracle-java7-installer

[Xcode] 模擬器的 home 鍵不見了?!

Tue, 19 Nov 2013 00:00:00 +0800

其實有點有趣

今天由於某些因素在測試 iOS app

於是開了許久沒動的 xcode

更新了一下發現多了一些 retina 的模擬器

也沒想那麼多就把它 run 到模擬器上

但模擬器一開出來我還以為是模擬器壞掉 XDDDD

它的 home 鍵勒～～～～～

其實是因為 iOS 5 以後的 simulater 沒有 home 鍵

叫出 home 鍵 command+shift+h

調整大小 command+ 1 or 2 or 3

[Mac OSX] bash-it

Wed, 13 Nov 2013 00:00:00 +0800

bash-it:

1
2


$git clone http://github.com/revans/bash-it.git ~/.bash_it
$~/.bash_it/install.sh

他會幫你自動備份原來的 .bash_profile 為 .bash_profile.bak 所以別擔心

當他在問你要使用什麼 completion 或 script 之類的東西時，

選擇 ‘some’ 就可以自己選擇~

有許多的 theme 及 package , completion 等等可以用，很方便！

http://www.scholarslab.org/research-and-development/customizing-bash/

[Mac OSX] homebrew update error

Wed, 13 Nov 2013 00:00:00 +0800

failed log:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


$sudo brew update
error: Your local changes to the following files would be overwritten by merge:
 Library/Aliases/gperftools
 Library/Aliases/hashdeep
 Library/Aliases/htop
 Library/Aliases/nodejs
 Library/Aliases/ocio
 Library/Aliases/oiio
		....
error: The following untracked working tree files would be overwritten by merge:
	Library/Aliases/gperftools
 Library/Aliases/hashdeep
 Library/Aliases/htop
 Library/Aliases/nodejs
 Library/Aliases/ocio
 Library/Aliases/oiio
		....
Aborting
Error: Failure while executing: git pull -q origin refs/heads/master:refs/remotes/origin/master

Solution:

1
2
3


$ cd /usr/local
$ git fetch origin
$ git reset --hard origin/master

reference
[read]

[Mac OSX] Slow-Opening Terminal Windows

Wed, 13 Nov 2013 00:00:00 +0800

最近在開 mac 的 iTerm.app 或者是內建的終端機都覺得卡卡的，

之前以為是 .bashrc 載入太多東西導致的，所以把一些掛載的 bin 目錄都註解掉，

但是還是沒解決，心想不對勁，就順手 google 了一下…

我執行了下列語法：

1
2
3
4
5
6


$ time /usr/libexec/path_helper
PATH="/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin:/Users/ABC/android-sdks/platform-tools:/Users/ABC/android-sdks/tools:/Application/Vagrant/bin"; export PATH;

real	0m0.043s
user	0m0.001s
sys	0m0.002s

接著我把 PATH 的內容寫進 .bash_profile，問題竟然就解決了…

速度飛快～～

後來看到一篇 .bash_profile vs.bashrc

雖然大家都知道 .bash_profile 是在登入時執行（即是輸入帳號密碼時），

而 .bashrc 是在系統內非登入狀態時開啟 prompt 時執行，

但是！！ Mac OSX 是個例外～是個例外～是個例外～…….=.=

Mac OS X — an exception

An exception to the terminal window guidelines is Mac OS X’s Terminal.app, which runs a login shell by default for each new terminal window, calling .bash_profile instead of .bashrc. Other GUI terminal emulators may do the same, but most tend not to.

所以通常解決方法是在 .bash_profile 寫入以下 script:

1
2
3


if [ -f ~/.bashrc ]; then
	source ~/.bashrc
fi

不過我之前就這樣做了，這次成功的方式是直接在 .bash_profile 寫入 PATH 路徑…

猜想應該是在 .bash_profile 預先讀取而加快速度的

如果把原本的 .bashrc 的 PATH 註解掉都移到 .bash_profile 會再稍快一些

[Vagrant] 使用 Vagrant 安裝 Nginx, php5-fpm, MySQL

Tue, 22 Oct 2013 00:00:00 +0800

Vagrant - Development environments made easy.

就是這個軟體的宗旨，把它想做是 ghost 吧！我們開發網站或是測試一些多機器架構時，常不小心就把自己的電腦或是測試主機搞到爛掉，租機器又慢又花錢，搞到爛重灌更麻煩。因此這個軟體基於 VirtualBox 做出了令人方便設定的功能，讓我們可以快速架設安裝環境並測試，尤其是以多機器架構而言更是方便！例如從最簡單的 Web server + DB server，或是 Web Load Balancer + Application Server * 5 等等的架構，一台電腦就能達成囉！
今天主要是以安裝 Vagrant 及架設出 Nginx + php5-fpm 的架構，下一篇打算另外建構一台 mongodb server，達到 Vagrant 最主要的多機器設定功能~

Vagrant 基本設定

先下載 VirtualBox 吧！
下載 Vagarnt 套件 http://downloads.vagrantup.com/
安裝好後，可能會需要加 path，至少 1.3.0 當時我是自己加的，現在 1.3.5 就不清楚了~
接下來就可以開始加入 box (可以把它想為 ghost 檔)，並開始設定 Vagrant。

1

vagrant box add {你想要的Box名稱} {下載網址}

輸入後就會開始下載該 box 了！範例：

1
2
3
4


$vagrant box add devbox http://ﬁles.vagrantup.com/precise64.box 
$mkdir my_box 
$cd my_box 
$vagrant init devbox (將 my_box 這個專案資料夾以 devbox 這個 box 檔案初始化) 

box 官方有提供 Ubuntu 的，在 vagrantbox.es 很多，可以自己找～當然自己做應該也是可以的！

Vagrant 基本指令

1
2
3
4
5


vagrant up 開機 
vagrant ssh 登⼊ 
vagrant suspend 暫停 
vagrant halt 關機 
vagrant destroy 刪除 

進入新裝好的機器吧！

1
2


$vagrant up //開機 
$vagrant ssh //登入 

Vagrantfile 設定

Vagrantfile 這個設定檔可以用很多很強大的設定，在官方網頁裡有教學

不過首先要先做的是： config.vm.forward_port 80, 8088

把虛擬機器裡從 80 port 傳送的東西丟到本機的 8088 port

如此一來在本機瀏覽器輸入 localhost:8088 ，就可以看到網頁了！

另外就是： config.vm.synced_folder "/vagrant", "本機目錄"

如此一來，Ubuntu 底下就有一個 /vargrant 目錄，和自己主機裡的某個目錄是同步的！

也就是在自己主機上寫好程式後，就可以直接讓虛擬機器抓到 code 去執行，超方便的！

只要把 nginx 的網頁目錄設定在 /vagrant 上就可以了！ (後面會說)

Ubuntu 基本安裝

進去後是乾淨的 Ubuntu 12.04 64位元版，因此需先做點安裝:

1
2


$sudo apt-get -y update 
$sudo apt-get --no-install-recommends -y install build-essential openssl libreadline6 libreadline6-dev curl git-core zlib1g zlib1g-dev libssl-dev libyaml-dev libsqlite3-dev sqlite3 libxml2-dev libxslt-dev autoconf libc6-dev libgdbm-dev ncurses-dev automake libtool bison subversion pkg-config libffi-dev vim 

有些東西其實可以不用裝，就看個人的需求，必裝應該是 build-essential, openssl, curl, git-core, vim XD

Nginx & php5-fpm 安裝

安裝 Nginx

1

$sudo apt-get install nginx

若要更改 Nginx 的網頁目錄，設定檔在 /etc/nginx/ 裡，

通常應該是更改 /etc/nginx/sites-enable/default 裡的 root /usr/share/nginx/www/

還要將這段 code 解除註解：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


location ~ \.php$ {
	fastcgi_split_path_info ^(.+\.php)(/.+)$;
	# NOTE: You should have "cgi.fix_pathinfo = 0;" in php.ini

	# With php5-cgi alone:
	#fastcgi_pass 127.0.0.1:9000;
	# With php5-fpm:
	fastcgi_pass unix:/var/run/php5-fpm.sock;
	fastcgi_index index.php;
	include fastcgi_params;
}

更改後確認一下 /etc/nginx/nginx.conf 是否有 inculde /etc/nginx/sites-enable/*

1

$sudo service nginx start (開始服務)

安裝 php5-fpm

1
2
3


$sudo apt-get install php5-fpm 
$sudo vim /etc/php5/fpm/php.ini (找到並更改 cgi.fix_pathinfo = 0 ) 
$sudo vim /etc/php5/fpm/pool.d/www.conf 

找到 listen = 127.0.0.1:9000, 換成 /var/run/php5-fpm.sock
寫個 phpinfo(); 的 php 檔放入資料夾

1

$sudo service php5-fpm restart (開啟服務)

在瀏覽器輸入 localhost:8088 就可以看到 nginx 的頁面，再讀取剛剛寫的 php 應該就成功囉！

安裝 MySQL:

1

$ sudo apt-get install mysql-server

過程中會問 root 的密碼，裝完後就可以登入：

1

$ mysql -u root -p

下回就是多機器的設定囉～

reference:
http://gogojimmy.net/2013/05/26/vagrant-tutorial/

http://www.slideshare.net/ihower/vagrant-osdc

https://www.digitalocean.com/community/articles/how-to-install-linux-nginx-mysql-php-lemp-stack-on-ubuntu-12-04

p.s. Vagrantfile 產生器：Puphpet.com/#vagrantfile

這網站有很多值得玩的地方，可以直接幫你產生出這些設定檔真的是太方便了！

p.s.s.有亂入用到的指令記一下：dpkg –get-selections 列出已安裝的 package

另外提供一下我在研究 Vagrant 的筆記，很亂超級亂，但是有些東西沒有寫在 blog 裡~
Evernote by kerkerj

[Android] thread 處理 UI update (2)

Tue, 12 Jun 2012 00:00:00 +0800

這是第一篇: [[Android] thread 處理 UI update]

在那之後自己在寫一些東西時也用到 runOnUiThread

不過有別的方法可以不用像 runOnUiThread 寫的比較雜亂

那就是用 AsyncTask , 剛剛自己也順手寫了一個 Test 放在 Github 上

我覺得使用 AsyncTask 可以不用處理 thread, 而且寫法上比較清楚~

[PHP] checkbox check/uncheck all

Tue, 12 Jun 2012 00:00:00 +0800

今天在做 checkbox 時, 想做全選/取消全選

多使用一個 checkbox, 若勾選則是全選, 再點一次則全不選

於是就產生了這段 code…

[Ubuntu] [RoR] install with rvm

Fri, 27 Apr 2012 00:00:00 +0800

以下都是以 Ubuntu 11.10 為操作環境

主要目標為使用 rvm (Ruby Version Manager)來管理 ruby 版本並安裝 ruby 和 rails

先安裝一些必要套件 ( ex. openssl, zlib1g-dev ….etc. )

1

$sudo apt-get install build-essential bison openssl libreadline6 libreadline6-dev curl git-core zlib1g zlib1g-dev libssl-dev libyaml-dev libsqlite3-0 libsqlite3-dev sqlite3 libxml2-dev libxslt-dev autoconf libc6-dev nodejs

安裝完基本套件後, 有兩種選擇:

直接在系統上安裝 ruby ( sudo apt-get install ruby )
使用 rvm 來管理 ruby 版本

基本上有 rvm 來管理 ruby 版本是比較方便的, 可以隨時切換不同的 ruby 版本

(不過在使用一些套件上會有一些問題需要排解, 本篇最底下有 trouble shooting)

RVM

安裝:

1
2


$bash < <(curl -s https://raw.github.com/wayneeseguin/rvm/master/binscripts/rvm-installer) 
$echo '[[ -s "$HOME/.rvm/scripts/rvm" ]] && . "$HOME/.rvm/scripts/rvm"

Load RVM function: ~/.bash_profile

指令:

rvm info -> 查看 rvm 做的設定

rvm list known -> 列出所有可安裝的套件

rvm list -> 列出目前已安裝的套件

rvm install “package_name” -> 安裝套件

rvm remove “package_name” -> 移除套件

rvm 1.9.2 –default -> 設定預設的 ruby 版本

假設系統上的 ruby 版本是 1.9.1, 而我用 rvm 安裝了 ruby1.9.3

那麼目前系統上的預設 ruby 版本是 1.9.3, 用 ruby -v 測試看看

如果要切換回系統的 ruby 版本, 則使用 rvm system

要切換回來的話,則:

rvm 1.9.3 (直接輸入有安裝過的 ruby 版號即可)

rvm use 1.9.3

以上是 rvm 的一些簡單指令, 因為今天是要安裝 ruby on rails

所以先安裝 ruby 吧:

1
2


$rvm pkg install openssl (詳見最後的 trouble shooting)
$rvm install 1.9.3 --with-openssl-dir=$rvm_path/usr

Gem

指令:

gem list -> 列出目前已安裝的套件

gem install “package_name” -> 安裝套件不同的 ruby 版本有不同的 gem

如果 rvm 裡有 1.9.1 和 1.9.3 兩個乾淨的 ruby 版本

目前使用的 ruby 版本是 1.9.3

則在 gem install rails 後

使用 gem list 則會看到一大堆的套件

接著切換到 1.9.1 執行 gem list 後則會發現沒有任何東西

在安裝 gem 套件時可以加上一些參數

如: 不想要有說明文件 (通常這些東西都蠻肥大的) 就可以加上

gem install "gem_name" --no-ri --no-rdoc

以上是 gem 在 rvm 裡的一些概念, 因為今天是要安裝 ruby on rails

所以來安裝 rails 吧:

gem install rails --no-ri --no-rdoc (不要安裝文件, 速度會比較快)

如果發現用 gem 安裝套件時需要 root 權限, 表示目前使用的 ruby 版本是系統的版本

Gemset

rvm 提供了方便的功能 gemset, 就把它看作 gem 的分類資料夾

如果說我想要在 ruby 1.9.2 底下安裝兩種 rails 版本, 又怕會衝突該怎麼辦?

就可以用 gemset 了

樹狀架構大概如下:

1
2
3
4


		rvm -> 1.9.1 -> gemset: rails-2.3.9
		                        rails-3.1.1*
		    -> 1.9.3 -> gemset: rails-2.3.9
		                        rails-3.1.1

可以解釋為: 在 rvm 的 ruby 1.9.1 底下有兩個 gemset, 分別是 rails-2.3.9 和 rails-3.1.1

指令:

rvm gemset list -> 查看目前建立的 gemset

rvm 1.9.2@rails-3.1.1 -> 在 ruby 1.9.2 版本底下使用 rails-3.1.1 這個 gemset

rvm gemset create “gemset_name” -> 建立 gemset

rvm gemset use “gemset_name” -> 使用某個 gemset

rvm gemset empty “gemset_name” -> 清空某個 gemset (只是清空)

rvm gemset delete “gemset_name” -> 刪除某個 gemset以上就是關於 rvm 的二三事, 做到這邊, ruby 和 rails 套件應該就安裝完了

最後安裝資料庫的 adapter , 這裡是用 sqlite

gem install sqlite3 --no-ri --no-rdoc

接著就可以建立第一個 rails 專案:

mkdir project

cd project

rails new demo

rails server連上 localhost:3000 就是起始畫面了

Trouble shooting:

Error message1: openssl LoadError

SSL_connect returned=1 errno=0 state=SSLv3 read server certificate B: certificate verify failed (OpenSSL::SSL::SSLError)

or

Gem::RemoteFetcher::FetchError: SSL_connect returned=1 errno=0 state=SSLv3 read server certificate B

Solution:

rvm pkg install openssl

rvm remove 1.9.3

rvm install 1.9.3 –with-openssl-dir=$rvm_path/usr

然後將 rvm 裡的 ssl certs 資料夾移除, 改成直接讀系統的 ssl certs

rmdir $rvm_path/usr/ssl/certs

ln -s /etc/ssl/certs $rvm_path/usr/ssl

Error message2:

when excuting the command “gem install rails”

ERROR: Loading command: install (LoadError)

cannot load such file – zlib

ERROR: While executing gem … (NameError)

uninitialized constant Gem::Commands::InstallCommand

Solution:

rvm remove 1.9.3 (depends on your ruby version, if your system also has ruby, remove it, too.)

sudo apt-get install zlib1g-dev先將 rvm 的 ruby 和 system 的 ruby 移除

然後安裝 zlib1g-dev

安裝 system 和 rvm 的 ruby 就可以了

Remove system’s ruby, and all ruby versions in rvm

Install zlib1g-dev, then install ruby in system and rvm.

Error message3:

ExecJS::RuntimeUnavailable

Solution:

sudo apt-get install nodejs

Reference:

RVM - Ruby enVironment (Version) Manager

[Ubuntu] 安裝設定 ssh

Fri, 20 Apr 2012 00:00:00 +0800

Ubuntu 裝完是沒辦法透過別台機器 ssh 進這台機器

只能夠 ssh 出去, 所以來安裝一下

1
2


$sudo apt-get update 
$sudo apt-get install ssh 

裝完後修改一下設定檔 : $sudo vi /etc/ssh/sshd_config

預設 port 為 22 可以改成別的 ( 可以到 /etc/services 看有沒有沒再用的 port 並指給它 ) (optional)

Port 22 找到這行, 意思為允許 root 登入 (optional)

PermitRootLogin yes 將 yes 改成 no, 不允許 root 登入.

另外可以設定 /etc/hosts.allow 和 /etc/hosts.deny 更精準的限制連線 (optional)

例如: 我只要 192.168.11.11 登入我這台機器

則編輯 /etc/hosts.allow , 加入: sshd:192.168.11.11 :allow

編輯 /etc/hosts.deny , 讓其他人都無法連入, 加入這行: sshd:all:deny

全數編輯完畢後, 重新啟動 ssh 服務 $sudo /etc/init.d/ssh restart

[Android] thread 處理 UI update

Wed, 18 Apr 2012 00:00:00 +0800

不知道大家在寫 Android 用 thread 處理 UI 更新時，有沒有遇過這樣的錯誤：

Only the original thread that created a view hierarchy can touch its views.

通常這是因為自己產生的 thread 不能去更動到原本 main thread 的 view

只有 main thread 可以去動 UI，因此我們必須透過 runOnUiThread 這個方法來對 UI 做操作

這裡以下面這個 ProgressDialog 做例子：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52


package org.twgg.kerkerj;

import android.app.Activity;
import android.app.ProgressDialog;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.TextView;

public class PDExample extends Activity implements Runnable {
	private String pi="null";
 private Button btn;
 private TextView text;
 private ProgressDialog pd;
 
 public void onCreate(Bundle icicle) {
 	super.onCreate(icicle);
 setContentView(R.layout.main);
 
 text = (TextView) this.findViewById(R.id.text);
 btn = (Button) this.findViewById(R.id.btn);
 
 //按下 Button 則會開始運算，運算的東西放在 thread 裡
 btn.setOnClickListener(new OnClickListener(){
 	public void onClick(View v) {
 	// Progress Dialog 開始跑
 pd = ProgressDialog.show(PDExample.this, "運算中", "機哩咕嚕機哩咕嚕...", true, false);
 Thread thread = new Thread(PDExample.this);
 
 //進入 thread
 thread.start();
 }
 });
	}
 
 public void run() {
 	try {
 	//要運算的東西放這裡
 Thread.sleep(10000); //在這裡只是讓 thread停久一點感覺一下
 pi = "ya, we're done!";
 
 //Wrong!! 以下兩行會出錯, 因為這是在新的 thread 裡要求更改 UI view
 pd.dismiss();
 text.setText(pi);
 } catch (InterruptedException e) {
 	e.printStackTrace();
 }
 } 
} 

正確的 run() 必須這樣:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


public void run() {
	try {
 	//要運算的東西放這裡
 Thread.sleep(10000); //在這裡只是讓 thread停久一點感覺一下
 pi = "ya, we're done!";
 
 runOnUiThread(new Runnable() { // Correct!! 
 	public void run() {
 		//modify View object
 	pd.dismiss();
 	text.setText(pi);
 	}
 	});
	} catch (InterruptedException e) {
 	e.printStackTrace();
	} 
}

p.s. 之前 Google 有另外一種解法是用 handler 去處理 UI update，

不過既然都有 runOnUiThread 這個好用的方法就用它吧 :)

2012/06/13續: [Android] thread 處理 UI update (2)

[Android] 安裝開發環境

Wed, 18 Apr 2012 00:00:00 +0800

最近電腦重裝的關係，順便把 Android 開發環境整理一下，

不得不說 Android 在 Eclipse 上的外掛開發的越來越不錯了！

Step1. 到 Oracle Java SE downloads 點擊 Java Platform (JDK) 並選擇作業系統

Step2. 安裝 Eclipse IDE for Java EE Developers

Step3. 到 Android Developers 下載 Android SDK 並安裝

Step4. 安裝 ADT Plugin for Eclipse ( 官方文件 )

a. 開啟 Eclipse， [Help] -> [Install New Software….]

b. 點選 [Add] 輸入名稱及網址 ( APT / https://dl-ssl.google.com/android/eclipse/ )

c. 等待 pending 結束後會看到可以勾選的 Developer Tools ，選擇 next 並 accept 開始安裝

Step5. 安裝 packages (Platforms and Other Packages)

a. 從 Eclipse : [Window] -> [Android SDK Manager]

b. 從 Windows : 到 Android SDK 資料夾中點擊 SDK Manager.exe

c. 從 Linux/Mac : 到 Android SDK 的 tools 資料夾，並執行 android 指令

選擇要開發的版本或 package 並安裝

沒記錯的話安裝完 Eclpise 的外掛後，Eclipse 會自動跳出問你的 Android SDK 裝在哪，

若這時候已經安裝好 SDK 的話就可以選擇第二個選項，並指定資料夾位址

接著就可以寫程式了

開啟模擬器的話就到下圖所示新增即可

[Hardware] Asus 1215N 拆解

Mon, 16 Apr 2012 00:00:00 +0800

某天筆電的鍵盤卡卡的，所以找了資料並拆解了一下

大致的步驟是這樣：

拆觸控板的板子，這塊板子其實是用卡榫卡住的，我是用一字螺絲起子慢慢從邊邊打開的。因為是卡榫，所以要小心不要把它弄斷，弄斷裝回去時卡不住會鬆鬆的。
另外要注意的是，觸控板有一條排線連接著主機板，不要扯下來，扯下來觸控板也和你說掰掰了。
拆觸控板的目的是要將鍵盤的螺絲轉開，若你已經將觸控板大致扳開後，就會看到鎖鍵盤的螺絲了。這時候一樣是用一字起子慢慢將鍵盤扳開，它也是卡榫，所以還是要注意～
這時候鍵盤應該就被拔下來了 XD

這是只有拆鍵盤的部分，我有找到換硬碟的說明，不過我沒有試過，所以沒辦法提供注意事項，不過仍然附註在下面。

拆硬碟的步驟同上述 1,2,3 點，不過在這 1,2,3 點前，需要先做第 0 點：

0.將筆電翻到背面，有個可以用螺絲起子打開的記憶體插槽，將它打開後，裡面可以看到 4,5 顆螺絲，除了四個角落外，有一塊記憶體的下方還藏有一個，所以要先把記憶體拔掉，再將該螺絲轉開。

1,2,3. 接著就重複上面的 1,2,3 點。

4.鍵盤拆了以後就可以看見鍵盤下面有一大塊不鏽鋼板，一樣有螺絲固定，將螺絲拆了以後拿下不鏽鋼板就可以看見硬碟了。

5.硬碟也有螺絲固定，螺絲拆了後就可以換硬碟。

[Ubuntu] 磁碟分配

Mon, 16 Apr 2012 00:00:00 +0800

我的筆電分割大概是這樣：

HD: 250G

/boot : 200MB
/ : 5GB
/usr :10GB
/var : 5GB
/usr/local : 10GB
/tmp : 5GB
swap : 5GB
/home : 40GB

no use: 170G ( 可以拿來灌 Win7 )

[Blogger] 隱藏上方的導覽列

Thu, 12 Apr 2012 00:00:00 +0800

新版的 Blogger 佈景沒有導覽列，

不過應該大部分的人都還是使用舊版的佈景，

如果不是使用自訂佈景的話，內建佈景中上方總是有條導覽列，

我個人是覺得醜醜的想把它拿掉，所以就找了一下資料，

先到這邊：

改的方法有幾種：

1.直接使用 css 的 display:none; 語法把導覽列隱藏，在 <head> 標籤下加入

.Navbar {visibility:hidden;display:none;}

有個缺點，雖然導覽列不見了，但是導覽列的區塊還是會留著。

2.改變整個 body 的位置，將 body 往上移約 40px，產生導覽列看不見的錯覺 XD (我個人使用這種)

body {margin: -40px 0 0 0;}

最後，導覽列不見了很棒，但是沒辦法方便的登入，怎麼辦？

加入個 POWER BY BLOGGER 吧，按下去就可以登入了 XD

[Android] 開機啟動與解鎖啟動

Wed, 11 Apr 2012 00:00:00 +0800

BroadcastReceiver 開機啟動與解鎖啟動

主要是這兩個 intent:

Intent.ACTION_BOOT_COMPLETED //開機

Intent.ACTION_USER_PRESENT //解鎖

只要建立下面的 Receiver

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


public class MyReceiver extends BroadcastReceiver {
	@Override
	public void onReceive(final Context context, final Intent intent) {
		final String action = intent.getAction();
		if (Intent.ACTION_BOOT_COMPLETED.equals(action)) {
 // TODO 開機啟動
		} else if (Intent.ACTION_USER_PRESENT.equals(action)) {
			// TODO 解鎖啟動
		}
	} 
}

並且在 AndroidManifest.xml 裡宣告就可以了

[Android] 遠端主機已強制關閉一個現存的連線

Wed, 11 Apr 2012 00:00:00 +0800

不知道大家在寫 Android 程式時使用實體機接 PC 時會不會很常出現這個錯誤

我個人還蠻常出現的，在測試時是非常緩慢的

Google 了一下，找到了強者自己寫的 adb.exe

檔案在討論串裡：http://code.google.com/p/android/issues/detail?id=12141

Nov 28, 2011 
New patched version of adb (1.0.29) 
Patch (diff) the same as early 
adb.exe 
478 KB Download

Download: adb.exe

下載後，到 Android 的 SDK 資料夾，進 platform-tool 資料夾，

將原本的 adb.exe 做備份，再將新的複製到原本的 exe 檔所在的地方，

重新啟動 adb 就可以了 (進 DDMS 重新啟動，或者重新啟動 Eclipse 也行)

[Codeigniter] Disallowed Key Characters

Tue, 31 Jan 2012 00:00:00 +0800

Codeigniter 顯示 Disallowed Key Characters

我的情況是：

表單(form)名稱型態不符合格式。

不得使用中文。

＜input name="姓名" type="checkbox" value="1" /＞

改掉就好了

ref: Codeigniter 顯示 Disallowed Key Characters

[PHP] 上傳檔案的限制

Tue, 31 Jan 2012 00:00:00 +0800

php.ini

max_execution_time - Script 執行時間上限(單位：秒)
max_input_time - Script 處理資料時間上限(單位：秒)
memory_limit - 系統記憶體 (要比 4,5 大
post_max_size - 表單的 POST 發送量
upload_max_filesize - 單次上傳檔案容量
default_socket_timeout - Socket 無回應斷線時間(單位：秒)
mysql.connect_timeout - 無回應斷線時間(單位：秒；-1 代表不斷線一直等)

[PHP] 取得目前時間

Tue, 31 Jan 2012 00:00:00 +0800

很簡單，也很常忘，所以記下來 Orz

$now =date("Y-m-d H:i:s",time());

[Codeigniter] remove index.php & 圖片無法讀取問題

Tue, 20 Dec 2011 00:00:00 +0800

首先，是先簡單說明使用 Codeigniter framework 時移除 URL 中的 index.php
在 Codeigniter 的根目錄新增一 .htaccess 檔案
並放入以下內容

1
2
3


RewriteEngine on 
RewriteCond $1 !^(index\.php|js|robots\.txt|css) 
RewriteRule ^(.*)$ index.php/$1 [L] 

另外還要修改 Codeigniter 的 config.php 設定

$config['index_page'] = ''";

不過上面的 rewrite rule 有些問題，
情境是這樣的：
我在 Codeigniter 根目錄新增一資料夾為 uploads ，
放置上傳的圖片與影片，
但是因為 rewrite rule routing 的關係沒辦法讀取到圖片，
因此我將 .htaccess 檔修改如下：

1
2
3
4
5


RewriteEngine on 
RewriteCond $1 !^(index\.php|images|css|js|robots\.txt|favicon\.ico) 
RewriteCond %{REQUEST_FILENAME} !-f 
RewriteCond %{REQUEST_FILENAME} !-d 
RewriteRule ^(.*)$ ./index.php?/$1 [L,QSA] 

主要是在三四行的 %{REQUEST_FILENAME}
這樣修改完就解決問題了!

ref: CodeIgniter 如何去掉 URL 中的 index.php

[Android] AlertDialog with Edittext

Tue, 30 Aug 2011 00:00:00 +0800

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


 AlertDialog.Builder alert = new AlertDialog.Builder(this); 
	 
	alert.setTitle("Title"); 
	alert.setMessage("Message"); 
	// Set an EditText view to get user input 
	final EditText input = new EditText(this); 
	alert.setView(input); 
	 
	alert.setPositiveButton("Ok", new DialogInterface.OnClickListener() { 
	 public void onClick(DialogInterface dialog, int whichButton) { 
	 String value = input.getText(); 
	 Do something with value! 
	 } 
	}); 
	 
	alert.setNegativeButton("Cancel", new DialogInterface.OnClickListener() { 
	 public void onClick(DialogInterface dialog, int whichButton) { 
	 // Canceled. 
	 } 
	}); 
	 
	alert.show(); 

就這樣XD

ref: http://www.androidsnippets.com/prompt-user-input-with-an-alertdialog

[Ubuntu] 將 Big5 文字檔轉成 UTF-8

Mon, 15 Aug 2011 00:00:00 +0800

1
2


$ iconv -f big5 -t utf-8 "要轉的big5檔案路徑" -o  "轉好後要輸出的檔案名" 
$ iconv -f big5 -t utf-8 /home/test/bigtext.txt -o  /home/test/utf8text.txt 

也可以輸入和輸出是同一個檔案

1

$ iconv -f big5 -t utf-8 /home/test/text.txt -o  /home/test/text.txt

[Eclipse] 將 eclipse 改成 utf-8 編碼

Mon, 04 Jul 2011 00:00:00 +0800

直接附圖囉~~XD

[Arch linux] 安裝雜記

Thu, 30 Jun 2011 00:00:00 +0800

Arch linux 安裝雜記
本來要研究如何弄到 USB 上安裝的, 但發現教室有光碟, 所以就沒去研究了
以下是安裝 Arch linux 的一點簡單紀錄

首先不得不說Arch linux 的維基
用關鍵字查詢會有許多結果, 包含中文翻譯
雖然目前還是簡體字較多, 但總比直接看英文還來的快些
若安裝上有問題或是對某個套件的詳細內容有興趣可以到這查

我這次安裝主要是先參考此篇文章: ArchLinux 推廣教學起跑！(09.7.5 更新)
寫得很詳細, 雖然是 2009 年的文章, 但仍非常有參考價值

前半段的步驟會和此篇文章有點類似

使用光碟開機後
進入 arch linux 安裝介面, 輸入 arch 或是 root 登入,
再輸入 /arch/setup 進入安裝程式
印象中流程和此篇文章不太一樣, 但是就是照螢幕上所提示的, 你的狀況是什麼就選擇什麼
例如若是用光碟安裝就選擇用光碟安裝, 一步一步由上而下照著主選單目錄作：
- Prepare Hard Drive: 我是使用整顆硬碟所以不需要太繁複的步驟
- Select Package: 我使用預設值, 也不需要什麼步驟
- Install package: 不能跳著作,一定要選擇 package 後才能安裝,沒選擇 package 也不會繼續往下作
- Configure System: 照網頁作, 他問什麼就回答自己的情況就好
- 文字編輯器我選擇 vi (其實之後裝了 vim,我比較熟悉 vim,不會用 vi 的話要選 nano)
- 必須先編輯兩個檔案: /etc/rc.conf /etc/locale.gen
- rc.conf 是開機時會讀取的檔案
- 因此要開機啟動的服務, 網路設定等等設定都會寫在這裡面, 很重要的檔案
- 若是固定 IP 的話照著後面的設定 ( rc.conf 裡應該會有 example, 先找看看有沒有相關的字再編輯)

接下來編輯 /etc/locale.gen
把中文相關的 zh_TW 取消註解(去掉最前面的#)
還要設定 root 密碼

Install Bootloader
- 就照預設安裝吧, 會要你選擇要裝在哪, 我是裝在第一個 0.0
Exit Install
- 完成後就離開囉, 然後輸入 reboot 重開機

進入新系統, 建立新使用者 #adduser
安裝 sudo, screen, ssh
#pacman -S sudo openssh screen
ssh 的設定可以參考 Arch linux 的 wiki:SSH (簡體中文)
若要安裝桌面環境的話就自行 google 吧
個人有安裝最小安裝的 KDE
#pacman -S kdebase-workspace kdebase-konsole
另外加裝了 firefox, 主要是因為專題同學不習慣使用命令列
因此還是裝了個環境讓有急用時可以上網搜尋之類的
Arch linux wiki 上關於 KDE 的頁面是正體中文
因此可以參考看看 KDE (正體中文)

下篇將會紀錄在 arch linux 上運作 Git 的服務

固定 IP 設定

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


	(IP亂打的XD)
	#Static IP example
 eth0="eth0 266.100.200.3 netmask 255.255.255.0 broadcast 266.100.200.255"
 #eth0="dhcp"
 INTERFACES=(eth0)
 
 # Routes to start at boot-up (in this order)
 # Declare each route then list in ROUTES
 # - prefix an entry in ROUTES with a ! to disable it
 # 
 gateway="default gw 266.100.200.254"
 ROUTES=(gateway)

[Java] ByteArray 的 toString 函式

Wed, 15 Jun 2011 00:00:00 +0800

byte[] 的 toString() 是回傳記憶體位置。

[Java] String split 字串分割

Wed, 15 Jun 2011 00:00:00 +0800

1
2
3
4
5
6
7


	String temp = "data1, data2, data3, data4"; //欲分割的字串
 String data[] = temp.split(","); //分割後存進字串陣列
 
 //印出每一個陣列元素
 for(String result:data){
 	System.out.println(result);
 }

[Android] 移除 Activity 的 Title bar

Mon, 06 Jun 2011 00:00:00 +0800

1
2
3
4


<activity android:name=".MyMainClass"
	          android:label="@string/app_name"
	          android:theme="@android:style/Theme.NoTitleBar">
</activity>

style/Theme.NoTitleBar

[Java] Hex String & Byte Array 轉換

Wed, 01 Jun 2011 00:00:00 +0800

1
2
3
4
5
6
7
8
9


public String toHexString(byte[] in){
	BigInteger temp = new BigInteger(in);
 return temp.toString(16);
}

public byte[] fromHexString(String in){
	BigInteger temp = new BigInteger(in, 16);
 return temp.toByteArray();
} 

文章參考自此

[Anrdroid] 中華電信 APN

Tue, 31 May 2011 00:00:00 +0800

若不小心把 APN 砍掉了可以新增回來(不過通常會有"回復預設值"的選項)

CHT emome

1
2


1. 名稱：CHT emome
2. APN：emome

CHT internet

1
2


1. 名稱：CHT internet
2. APN：internet

CHT mms

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


1. 名稱：CHT mms
2. APN：emome
3. Proxy：10.1.1.1
4. 連線埠：8080
5. MMSC：http://mms.emome.net:8002
6. MMS proxy：10.1.1.1
7. MMSN連線埠：8080
8. MCC：466
9. MNC：92
10. APN類型：mms

[CS] IEEE 754 表示式

Tue, 31 May 2011 00:00:00 +0800

2 的補數複習一下 http://entry.hit.edu.tw/~bd92043/1.htm

另一篇 IEEE 754 http://tw.myblog.yahoo.com/nicholas-kang/article?mid=39&l=f&fid=5

PTT 轉錄 https://www.ptt.cc/bbs/CYCU-IM/M.1233932341.A.13C.html

以下是我的筆記：

IEEE 754 結構 (以下皆只討論 Single Precision)
==== S(1) + Exponent(8) + Fraction(23) 共 32 bits ====
S 判斷正負
作業例子： (-13.625)ten 使用 IEEE 754 表示
p.s. IEEE 754 表示式是在第一個 bit 來判斷正負
1. 先轉二進位
(-13)ten = (-1101)two
(0.625)ten = (5/8)ten = (101/1000)two
=> (-13.625)ten = (-1101.101)two
2. 正規化表示 (就像科學記號表示法一樣)
=> (-1101.101)two = -1.101101 x 2^3
3. 因此可以得到
=> 1 ________ 10110100000000000000000
4. E = 指數加上 bias 即可不用二的補數 (IEEE 754 的偏差設為 127)
=> 剛剛算出來的指數是 3，所以
=> 3 + 127 = 130
=> 130 轉二進位為：1000 0010
因此 (-13.625)ten = 1 1000 0010 10110100000000000000000 (空白只是觀看容易)
驗證一下ㄎㄎ
http://www.h-schmidt.net/FloatApplet/IEEE754.html

[Java] GridBagLayout

Tue, 31 May 2011 00:00:00 +0800

只有連結，因為看連結就好了，圖解很累ＸＤ

(圖片來源：http://blog.csdn.net/dmgactive/archive/2009/06/28/4304567.aspx )
http://download.oracle.com/javase/tutorial/uiswing/layout/gridbag.html
http://felixcic.blogspot.com/2010/11/gridbaglayout.html
http://home.so-net.net.tw/idealist/Java/AWT/GridBagLayout.html

大致上是設定以下參數

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


public int anchor 
public int fill 
public gridheight 
Public gridweight 
public girdx 
public gridy 
public Insets insets 
public int ipadx 
public int ipady 
public double weightx 
public double weighty

大概是這樣

[Android] 樣式,主題開發雜記

Sat, 28 May 2011 00:00:00 +0800

就是改變 Android 預設的介面,主題樣式，例如按鈕的樣子

(以下殘體文)

style 属性在某个空间中起作用，而 theme 属性则会在整个 activity 和 application 中起作用。可以用 theme 统一整个程序的风格，再用 style 微调其中的某些风格。andorid 中的某些 widget 并不遵守 theme 所定义的风格，比如 button 上的字。如果你在 activity 甚至在 application 范围内使用 theme，button 的字还是白色的！估计是这个空间没有引用 android:textColor 风格，此时只能用 button 的 style 属性来改变它了。 (引用自此)
2. Android Styles & Themes（上）——Style
Android Styles & Themes（下）——Theme
去掉默认 ACTIVITY 背景图
Button 的应用(for android)
{ Android 学习指南 }

(以下為英,中文)
7. custom-button-style-and-theme
(好站!! http://blog.androgames.net/category/android-tutorials/)
8. 使用 Android SDK 提供的 Draw9Patch Tool
9. 在 Android 中使用客製化按鈕

[Git] 一小時搞懂 Git

Thu, 26 May 2011 00:00:00 +0800

這次只貼 Reference, 因為我也還沒看ＸＤ

http://people.debian.org.tw/~chihchun/2009/01/05/understand-git-in-one-hour/
文中所說的影片：
http://gitcasts.com/

[Java] Bouncy Castle Cryptography

Thu, 26 May 2011 00:00:00 +0800

這是為了 ECT 作業所作的筆記
Bouncy Castle Cryptography

這次作業用到了密碼學的技術，助教給了這個網站的 library 讓大家方便實作

作業內容是：可讀取文字, 圖片, 聲音
先初始化轉成 byte 後，利用 SHA512 進行訊息摘要，
再對檔案做 RSA 加密, 解密,接著是 AES 加密, 解密,
最後使用解密後的內容作還原的動作,
若 input 的檔案與 output 的檔案內容一樣表示成功。

以下是這次作業會用到的 class

1
2
3
4
5
6


* SHA512Digest 產生訊息摘要MD 
* AESEngine (對稱式加密) 
* RSAEngine (非對稱式加密) 
* RSAKeyParameters ，用來產生RSA的公鑰、私鑰 
* KeyParameter 
* BigInteger 

p.s. 以下是在寫作業時遇到的問題解決網址
其實用到了什麼class也是google後從學長的部落格看來的XD

SHA512: SHA512 ouput 問題
發現除了 SHA 的 out 外
其他的加解密產生 output 值要印出時都可以用到：
用： String.format("%0128x", new BigInteger(1, byteData));
來取代 Hex.encode(byteData);

RSA:
JavaWorld - 在RSA 解密時的問題
 使用Java進行RSA加解密
 RSA using BouncyCastle (有問題不過解決了 –> JavaClassCastException)

AES:
用Bouncy Castle实现AES-128-CBC加密解密 (殘體字不喜勿入)
How to encrypt / decrypt with AES from Bouncy Castle API in J2ME applications

最後的檔案輸出：
良葛格的學習筆記 (最後寫輸出時才想到有這個網站，因此也修改了輸入檔案時的做法，一氣呵成~~ )

若有一直google的話，會發現有許多做法
我認為以下做法最省事：(省略了很多作法，自行google)

1
2
3


Cipher out = Cipher.getInstance("演算法的名字 (ex. AES)", "BC");
out.init(Cipher.DECRYPT_MODE (或是ENCRYPT_MODE), key, new IvParameterSpec(AESiv));
outputByteArray = out.doFinal( inputByteArray);   (通常因為長度很長所以會用迴圈去做分段讀取的動作)

2011/06/02 Updated:
單純加解密：
RSA - http://www.javamex.com/tutorials/cryptography/rsa_encryption.shtml
AES - http://java.sun.com/developer/technicalArticles/Security/AES/AES_v1.html
超級有用 - http://introcs.cs.princeton.edu/java/78crypto/RSA.java.html

[Android] 程式開發雜記

Fri, 06 May 2011 00:00:00 +0800

最近在寫和 Android 程式，因此把一些重點筆記下來：

Android 中各種 JAVA 包的功能描述

(ref: http://huenlil.pixnet.net/blog/post/24346240)

在 Android 的應用程序開發中，通常使用的是 JAVA 語言，除了需要熟悉 JAVA 語言的基礎知識之外，還需要瞭解 Android 提供的擴展的 JAVA 功能。
在 Android 中，各種包寫成 android.*的方式，重要包的描述如下所示：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


* android.app        ：提供高層的程序模型、提供基本的運行環境
* android.content    ：包含各種的對設備上的數據進行訪問和發佈的類
* android.database   ：通過內容提供者瀏覽和操作數據庫
* android.graphics   ：底層的圖形庫，包含畫布，顏色過濾，點，矩形，可以將他們直接繪製到屏幕上
* android.location   ：定位和相關服務的類
* android.media      ：提供一些類管理多種音頻、視頻的媒體接口
* android.net        ：提供幫助網絡訪問的類，超過通常的java.net.* 接口
* android.os         ：提供了系統服務、消息傳輸、IPC機制
* android.opengl     ：提供OpenGL的工具
* android.provider   ：提供類訪問Android的內容提供者
* android.telephony  ：提供與撥打電話相關的API交互
* android.view       ：提供基礎的用戶界面接口框架
* android.util       ：涉及工具性的方法，例如時間日期的操作
* android.webkit     ：默認瀏覽器操作接口
* android.widget     ：包含各種UI元素（大部分是可見的）在應用程序的屏幕中使用

Empty Process, Background Process, Service Process, Visible Process, Foreground Process 初探

(ref: [Android 教學課程] Empty Process , Background Process , Service Process , Visible Process , Foreground Process 初探 )

1
2
3
4
5
6
7


* 關於 Android 的應用程式組件 ( Application Components ) 的補充
* 處理程序 ( Process ) 與執行緒 ( Thread )
* 空白處理程序 ( Empty Process )
* 背景處理程序 ( Background Process )
* Service 處理程序 ( Service process )
* 可視處理程序 ( Visible Process )
* 前景處理程序 ( Foreground process ) 

Activity , Fragment , Service , Broadcast receiver , Content provider 與 Intent 初探

( ref: [Android 教學課程] Activity , Fragment , Service , Broadcast receiver , Content provider 與 Intent 初探 )

1
2
3
4
5


* 什麼是 Activity？	Activity ：它負責前端使用者介面處理。
* 什麼是 Fragment？	Fragment ：它在一個具分割畫面( Multi-Pane )的 Activity 應用程式組件之中，負責分割畫面的部份區段或部份行為。
* 什麼是 Service?	Service ：它負責後端程式運算。
* 什麼是 Content provider？	Content provider ：它負責應用程式之間資料共享的任務。
* 什麼是 Broadcast receivers？	Broadcast receivers ：此應用程式組件的中文譯名，多半會翻成廣播接收者或者廣播接收器。

手機截圖：

(ref:【教學】Android 手機截圖：一點都不難)

若有裝Android SDK 的話 (一般開發者應該都會裝吧XD)，直接開 Android SDK 的目錄 /tools/ddms.bat，執行此批次檔就可以囉 (使用時不要將該dos畫面關閉), 此時手機必須連接上網路，並設定USB偵錯，
要截圖時只要到 device/capture screen 即可

[Ubuntu] 11.04 Dropbox 啟動問題

Mon, 02 May 2011 00:00:00 +0800

我從 Dropbox 上下載 for Ubuntu 的套件，安裝完後，設定的頁面卻遲遲不出來，這真是非常的詭異，所以就查了解決方法。
http://www.webupd8.org/2011/03/get-dropbox-appindicator-to-work-in.html#more

一樣也是先去下載
然後執行以下指令（一行一行)

1
2
3
4


$cd 
$wget http://webupd8.googlecode.com/files/fixdropbox 
$chmod +x fixdropbox 
$./fixdropbox 

應該就可以了，如果要多作設定再：gedit ~/.dropbox.sh

好像有什麼秒數的東西設定吧~~

[PHP] 簡單的資料庫連結

Wed, 26 Jan 2011 00:00:00 +0800

我是 PHP 新手，超級嫩，所以就寫寫簡單的東西，今天來寫關於資料庫的連結。
環境同之前寫的，就是 FreeBSD、MySQL、phpMyadmin 啦~

我將他分成兩個檔案來寫：
一個是負責連結資料庫：connectDB.inc.php
另一個則是測試的 php ：test.php

在 connectDB.inc.php 中設定好 SQL 主機的 IP、使用者名稱密碼等等資料，
然後由 test.php 來呈現資料，直接看 code 最快：

connectDB.inc.php

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


<?php 
	$cfgDB_HOST = "localhost";		//主機名稱或ip位址
 $cfgDB_PORT = "80";						//主機開放連線的port
	$cfgDB_USERNAME = "account";	//登入主機帳號
	$cfgDB_PASSWORD = "password";	//登入主機密碼
	$cfgDB_NAME = "db_name";			//資料庫名稱
 
 //建立資料庫連線
 $link = mysql_connect($cfgDB_HOST . ":" . $cfgDB_PORT, $cfgDB_USERNAME, $cfgDB_PASSWORD) or die("Could not connect MySQL");
 //選擇資料庫
 mysql_select_db($cfgDB_NAME, $link) or die("Could not select database");
 //讓中文正常顯示
 mysql_query("SET NAMES 'utf8'");
 
?>

test.php

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


<?php 
 	include ("connectDB.inc.php");
 try{
 	$sql="SELECT * from test";	//給予SQL指令
 $result=mysql_query($sql) or die("invalid query");//傳給MySQL指令
 //將所有資料顯示出來
 while($record=mysql_fetch_array($result)){
 	echo "id: $record[0]<br>";						//第一種讀取資料庫欄位的方法，使用欄位序號
 echo "name: ".$record["test_string"]."<br>";	//第二種讀取資料庫欄位方法，使用欄位名稱
 	}
 mysql_close($link);
 } catch(Exception $e){
 	echo $e;
 }
?>

若資料庫有資料就可以正確顯示溜

[Win7] 使用 Win7 DVD 修復開機選單

Tue, 26 Oct 2010 00:00:00 +0800

灌雙系統 (Win7 / Ubuntu) 後, 刪除 Ubuntu 不當的話,
重開機可能會出現： (連 Win7 都進不去)

1
2


error : no such partition
grub secure>

此時只要將 Win7 光碟放入, 進入修復，選擇命令提示字元, 並輸入：

1
2


bootrec.exe /fixboot
bootrec.exe /fixmbr

重開機後 Win7 就回來囉

kerkerj

Again, and again

How to Setup Slack and Drone Slack Blame

Use Zap Observer

Google Cloud - ML Study Jam

Predict Taxi Fare with a BigQuery ML Forecasting Model

Google Cloud Speech API: Qwik Start

Speech to Text Transcription with the Cloud Speech API

Translate Text with the Cloud Translation API

kubectx

Go pprof

Prepare

Profiling

Memory profiling - heap profile

CPU profiling - 30-second CPU profile

Collect a 5-second execution trace

go-torch

go execution tracer

ProxySQL + Percona XtraDB Cluster Using Docker

Adding Galera Support

PMM (Percona Monitoring and Management)

Grafana dashboard

Mysql status

centos 開機順序

default proxysql.cnf

Apache Flink 學習筆記

Install flink on mac

Test flink installation

Develop flink tasks in Scala with Intellij

Intellij

sbt - scala build tool

Project template

Build quickstart project and send to flink web UI

Use Intellij

Use sbt

Run jar file in flink

Goland Hotkey Map Memo

Again

[讀書] 工作大解放：這樣做事反而更成功

goroutine 執行相關討論

tld_length 在 Rails session_store 與 HTTP URL 的設定

Rails initializer 的載入順序

Use goconvey in projects maganged by gb

docker HA proxy

[tool] diff-so-fancy

New theme

Migrating to Hugo from Octopress

hugo

為什麼要用 hugo？

基本 hugo 安裝與操作

Migrating from octopress

Meta-data 的 Date

permallink 的問題

設定檔 (config.toml, config.yml, config.json)

主題佈景 Theme

Syntax highlight

支援 (disqus, ga, pagination, SEO, robot.txt, favcon)

Deploy

Project page: e.g. http://your_github_account.github.io/hugo_gh_blog/

Personal page: e.g. http://kerkerj.github.io/

Raspberry Pi2 remote webcam

Setup wifi on raspberry pi2

ithome 鐵人賽 - 規劃

[API-d30] - 總結

[Swift-d30] - 總結

[API-d29] - 實戰開發 - 發佈 - nginx

[Swift-d29] - 實戰開發 - TODOList - API 4 刪除

[API-d28] - 實戰開發 - 發佈 - forever

[Swift-d28] - 實戰開發 - TODOList - API 3 新增與更新

[API-d27] - 實戰開發 - log 處理 及 config (db, apikey)

log 處理

config (db, apikey)

[Swift-d27] - 實戰開發 - TODOList - API 2 讀取清單資料

[API-d26] - 實戰開發 - API-key

[Swift-d26] - 實戰開發 - TODOList - API 前置資料準備

[API-day25] - 實戰開發 - 處理 404 & 500

[Swift-day25] - 實戰開發 - TODOList - Update View

[API-d24] - 實戰開發 - 刪除 TODO task API with mongoose

[Swift-d24] - 實戰開發 - TODOList - Create View

[API-d23] - 實戰開發 - 修改 TODO task API with mongoose

[API-d27] - 實戰開發 - log 處理及 config (db, apikey)

[Swift-d20] - Basic - 捨棄 Storyboard 使用純程式碼的方式撰寫 ViewController

`bin`

`routes`

`model`

`node_modules`

`logs`

`configs`

`test`

`app.js`

`package.json`