2014年12月30日 星期二

Ubuntu 架設 Jenkins 紀錄


一個多月前我有在 digitalOcean 買了最小號的雲端空間,有架了一下 Jenkins,不過也忘得差不多了,紀錄一下沿途遇到的重點,這不是一篇很有價值的文章... 只是我自己的雜記而已。

  • 裝 apache (https://wiki.jenkins-ci.org/display/JENKINS/Installing+Jenkins+on+Ubuntu)
  • 裝 Jenkins
    • sudo sh -c 'echo deb http://pkg.jenkins-ci.org/debian binary/ > /etc/apt/sources.list.d/jenkins.list'
    • sudo apt-get update
    • sudo apt-get install jenkins
  • 設定 apache proxy
    • sudo aptitude install apache2
    • sudo a2enmod proxy
    • sudo a2enmod proxy_http
    • 記得要 service apache2 restart  重啟 apache

  • 幫 Jenkins 換 Port,可以參考這篇,主要是要把 HTTP_PORT 改成你要的 port,修改 apache 的 virtualHost。
  • sudo a2ensite jenkins
  • Reloading web server apache2
    • service apache2 reload
  • Starting Jenkins Continuous Integration Server jenkins
    • /etc/init.d/jenkins start

2014年12月29日 星期一

[ PHP 也有 Day ] Laravel 開發小型專案經驗分享


12/18,我在 PHP 也有 Day 講了這場 Talk。大概的方向是使用 Laravel 的 Blade,跟過去開發小型專案的分享。一直很忙,本來想要好好記錄一下自己說了什麼,不過後來放棄了... 我的熱情已被工作磨的差不多了 T_T

Blade 比較沒有什麼特別的技巧,就是熟,把他弄熟...習慣它,不過因為我平常都是用 Jade Template,用法跟 Blade 很像,所以就是也挺上手的,那天忘記說,如果不習慣 Blade,可以改用 twig 也是不錯的選擇。

至於專案經驗,或許有點過於 case by case,但就是給大家參考參考摟...,我是盡量濃縮到大部分的人在開發上會做的功能有哪些,可能遇到的問題,大概點一下方向。

Model 跟 Controller 在這次分享比較少提及,也許是我也不是很熟拉,不知道能怎麼講,所以就著重在 View 的分享。

不過這次比較抱歉的是沒有提及前端的測試,不過前端的測試是另一門學問了,如果真的想要深入,也能要另闢新的講題來演講。


希望大家不嫌棄~
小的我 2015 會繼續努力的。

2014年12月28日 星期日

2014 年的我....

今年。

  • 跟 Matz 大神合照,跟 node.js 的櫻桃哥合照。
  • Expr 學習寫 IOS APP,雖然最後只幫上一點小忙..
  • 完成 Objective-C 學習筆記。
  • whoscall 面試,談到以『當時』的能力來說,人生最高的月薪 (別問我,我是不會說的 xdd),還可以飛國外跟日本,韓國人共事的好機會,雖然最後沒去...。
  • 台科資管所沒上,goodbye~
  • 精進後端語言,學習 Koa(node.ks),  Laravel(PHP)
  • 前端技能弱化... (相對於前一筆xd)
  • 開始上手 Node.js,跟同事共事後更比較熟悉 Node.js 了,在 Web 開發技能上學習到很多,學習 Node.js ,學習使用 Redis 做 Cache,學習 Logging,學習 API 怎麼寫。
  • 因為專案時程壓力而把 code 寫得很糟,覺得很羞恥...,但也不是故意的...
  • 剛接手一個 Project 時,判斷專案時程跟專案可行性的準確度好像有越來越準的趨勢 (希望我不是自我感覺良好)
  • 學習簡單的 Python (主要是爬資料)
  • 至今接觸過最多專案的一年,相對來說也是過的最辛苦的一年...。
  • 如果沒有人情因素的話,不要做不開心的案子,兩個心得: 1. 做賠錢生意不如在家睡覺 2. 如果案主屬於很難聯絡到的人,那也是放棄
  • 講了兩場小 Talk,分別是在前端社群跟 PHP 也有 Day。準備 talk 其實蠻辛苦的我覺得,也許是我太緊張 ;) 不過要學會習慣上台的感覺。
  • 本來很想退隱社群,不過好像很難,但是我有在努力,越來越少 follow 一些群組,我沒有要刻意做這件事情,而是我很不喜歡 Facebook 一直有推播跟通知,所以我寧可選擇想看在自己點過去看 xdd。
  • 人生第一次出國。
  • 最喜歡的活動是 Hitcon girl。
  • 最快登出的活動是資料科學年會。
  • 認識很多不是程式界的朋友,感覺很不錯。
  • 今年養成了一個習慣,我不知道是好還是不好,我覺得 facebook 跟 line 都不是應該要我立馬回你訊息的軟體,同樣的我也不覺得對方需要立刻回應我,如果真的有急事,我想大部份會直接 call 手機的。 (可能是我覺得打字聊天很花時間吧... 除非我閒下來了xd)
  • 愛到卡慘死
明年目標我就不多說了,說了也不準,每次結果都跟之前想的不一樣 XD

2014年12月18日 星期四

Laravel-Excel 匯出 Excel (xls) 心得

最近在工作上一直處理匯出報表這件事情,整體來說, Laravel-Excel 已經能符合大部分的需求,安裝與使用上,也不是很複雜 (難的是撈資料啊....)。


不過,有個很懊惱的問題是,如同這位先生問的一樣:
exporting large files in separate sheets

我的問題不完全跟他一樣,但重點很像。如果資料量太大,要用 excel 匯出,會非常吃 memory,(PHPExcel是在 memory 中處理所有資料),一等就是遙遙無期 ( 我改用 fputcsv 超級快... 但是在mac會有亂碼問題 ),可能檔案還沒下載下來,畫面就先掛掉了,除此之外,你還可能會經歷兩種 fatal error:

(1) PHP Fatal error:  Allowed memory size of 16777216 bytes exhausted (tried to allocate 32 bytes)

(2) PHP Fatal error:  Maximum execution time of 60 seconds exceeded


第一個是,memory 不夠了,怎麼辦?! 你願意拿 memory 來換 xls 檔嗎? 可以的話,就不用吝嗇付出更多的 memory,設定一下 memory_limit (example: ini_set('memory_limit', '1G')) 。

第二個,時間不夠用。你可以等嗎? 那你可以把 max_execution_time 調高 ( ini_set('max_execution_time', 600);)。


以上兩種調整,可以讓 xls 成功匯出,但可能一等就是十分鐘,經測試,絕對不是 Query 慢,再慢也不會是這樣,而是 PHP 會等資料都 ready 好之後,再放到 xls 檔,所以佔用記憶體,你必須等...。

還有一種方法,就是把這樣的任務放到 background 去跑,礙於時程壓力,經驗不夠,我沒有走這種方式,我也不曉得測出來的結果如何,簡直悲劇一場。

結論: 我不想讓客戶久等,我暫時用 fputcsv 來擋一下當時專案匯出報表的需求...。至於 xls 我目前只會用在小量資料匯出。

(PS: fputcsv 要處理 select query 回來的 2 維陣列,又有一點麻煩之處,有空再紀錄 xdd)

2014年12月17日 星期三

Mac 電腦新增 ssh 用的 pem 檔

常常需要 ssh 到公司專案新開的 Amazon 機器。所以紀錄一下新增 pem 檔的過程,不然常常忘記。


1. 首先要到自己的家目錄下,進入到 .ssh

$ cd ~/.ssh

2. 新增一個 pem 檔

$ touch your_filename.pem


3. 然後,把你的 key 加到 .pem 檔

    -----BEGIN RSA PRIVATE KEY-----   
    MIIEowIBXXX......    .....    ....    ....    ....
    -----END RSA PRIVATE KEY-----


4. 很重要的步驟 (權限改 400),不然很有可能無法 ssh 成功哦

chmod 400 your_filename.pem

5. 然後就可以 ssh 了

 ssh -i your_filename.pem YOUR_SERVER@IP

2014年12月3日 星期三

MySQL 設定 group_concat_max_len 的最大長度

其實這篇的來由是延續昨天的 GROUP_CONCAT 用法,我沒想到 GROUP_CONCAT 出來的字串會有最大值的限制,以至於在某個頁面上,爬出來的 JSON 格式發現錯誤....。

查了一下 MySQL 的手冊才得知,GROUP_CONCAT 最大值預設是 1024 個字元。

因此,要改變這個最大值的設定,有兩種方法(恩...對我來說是兩種)

1. 修改 my.cnf 檔案,在 [mysqld] 的後面再加上 group_concat_max...

[mysqld]
socket=/tmp/mysql.sock
group_concat_max_len=6000
group_concat_max_len=val,再填入你要的最大值。
如果你是走這個方式,記得存檔後,重啟 MySQL。


2. 在程式端修改
因為我是用 node.js 在開發 web application,所以也就是搭配 co-mysql 的套件,反正各種 web 開發的程式語言大部份都有可以搭配的 mysql 連線跟使用方式,像我就是直接在程式寫下類似這樣的 query 就可以了:


yield $db.query("SET GLOBAL group_concat_max_len=6000");


完。
其實選擇 2. 的原因沒有其他的,只是覺得別人要 clone 這個專案時,我還要特地說明請他去修改 my.cnf ,我會覺得太煩雜而已。


這篇也寫得蠻清楚的:  mysql 环境变量之 group_concat_max_len


2014年12月2日 星期二

用 MySQL 的 GROUP_CONCAT 組成 Object 格式字串

這邊文章寫得很詳細: MySQL 的 GROUP_CONCAT 函數

今天被 DISTINCT 整個很徹底,嚴格來說也不是整拉,因為我也沒用過,就求一個方便,希望把關聯的資料都 concat 進來,就不用一直撈其他的 table,哎,無力說明,很無奈 xdd。

不過我還是想留一下記錄,畢竟這個對我來說太常用了。

因為我不想在一個網頁上,一直額外的去 query 其他關聯的 table,所以我就想要把關聯的資料用同一隻 Query 就 Query 出來,但是關聯的表單,可能又是一對多,因此我就必須要 concat 那幾筆所有的資料為 Object 的格式(Object 格式只是為了方便我拆解資料而已.. ,也可以依照喜歡的字串去組合),然後就看到了 GROUP_CONCAT 這個功能。


這是我預期的結果:
{ id:"11", title:"第一次,維多利亞港", slogan:"浪漫夜景一日遊" },
{ id:"12", title:"山頂纜車", slogan:"鳥瞰香港" },
{ id:"13", title:"一點心美食", slogan:"便宜又好吃" }",


這是 Query :
SELECT
  .... 
  ...
  GROUP_CONCAT(
       DISTINCT CONCAT(
          '{id:"', titles.id, '", title:"',titles.title,'", slogan:"',titles.slogan,'"}'
       )
       ORDER BY titles.id ASC separator ', ' )  AS 
titles,
  .... 

  FROM XXX as XX
  LEFT JOIN ....
  WHERE ....  

如果不是跟這麼多 select  一起處理的話,簡單的寫法大概是參考這個: Export MySQL to Json 。

寫法類似這樣,也是能夠得到類似的結果,只是沒有跟其他 table 做 join 而已。

SELECT 
  CONCAT("[",
   GROUP_CONCAT(
       CONCAT("{ \"id\":  \" ",  id  , " \" "),
       CONCAT(", \"title\": \" ",  title), " \"}")
       ,"]")
AS json FROM `table_name` WHERE XXX = XXX;


結果是這樣 :  (因為我前後有加 "[", "]",因此 output 結果會直接變成一個 object 的 Array)
[
    { "id":  " 11 " , "title": " 第一次,維多利亞港 "},
    { "id":  " 12 " , "title": " 山頂纜車 "},
    { "id":  " 13 " , "title": " 一點心美食 "}
]

大概是這樣...
這樣的結果還算滿意,至少有達到我要的結果,至於付出多少時間也就值了 T_T 。

2014年12月1日 星期一

『FED Party 14』持續進展的專案 - Hubot 介紹



這次 11 月的前端社群聚會,剛好被宇庭問到要不要上去講一場 Hubot,老實說我並不是 Hubot 的重度使用者,而且在我任職的公司,也不是由我負責 devOps 的架設,不過想說是一場 lighting talk,也可以藉此機會,學習如何串起 chatOps。 我為了 lighting talk,而有動力去學習這件事情,認真說起來也算是發懶太久了。



Hubot 簡短介紹
原先由 github 發起的,後來變成了 open project,一個放在 chatroom 的 robot,主要用來幫助團隊開發過程中,進行一些自動化流程,通知等等功能,甚至是任何客製化的服務。

使用 Hubot 必須要有一個 adapter,這個 adapter 指的就是聊天室的管道是誰,像是紅了一陣子 slack, Hipchat,以及 IRC, skype 都是。

透過 hubot 架設,adapter 銜接起 hubot 跟團隊溝通的橋樑,再加上適用的 hubot script,跟一些 git  repo notification 的 hook 串接,可以讓團隊的人隨時知道其他人正在做些什麼事情, 剛剛 push 了那些 code,解決了哪些 issue,甚至是 jenkins, redmine,
nagios 等 service 串接起整個公司內部的通知系統。

你甚至可以透過 coffeescript 或是 livescript,撰寫自己公司內部使用的客製化 script。


結論
我認為 hubot 本身不是困難的 (都是一些零碎的小細節需要注意而已,安裝不困難),而是後面跟 adapter 銜接起來之後,你要如何整合公司的一些開發流程跟通知系統,任何的 service 都要被整合 (github, bitbucket, git lab, jenkins, redmine, jira 等等 )。 要整套都做起來,才會有成就感。

如果要我講個秘訣,那就是一步一步做吧。 還有真的蠻推薦 slack 的。
BTW,前端社群在尋找新血加入,有興趣請 fb 搜尋 Front-End Developer Taiwan ,你也可以跟小莊或是宇庭聯絡。

謝謝! 

Vue multiselect set autofocus and tinymce set autofocus

要在畫面一進來 focus multiselect 的方式: 參考: https://jsfiddle.net/shentao/mnphdt2g/ 主要就是在 multiselect 的 tag 加上 ref (例如: my_multiselect), 另外在 mounted...