2016-09-02

HelloJS Week8

課程大綱

Jenkins
Docker

課程心得

~~消失的 6,7 week 心得？一個不注意就漏掉了兩週心得啊，姆…直接跳結局？~~

一定要附上這次大家辛苦編輯的共筆啊！傳送門

難免講一下前面幾週，如果共筆大家能夠多投入一些些力量一定會更好，~~不然大部分我這個ㄈㄓ在編輯會有「酸味」（疑？~~

主要是一個人的觀點有限制，作筆記也能加強自己記憶，一種對自己好也對別人好的概念啊

最後一周同學們共筆比較熱心，ㄈㄓ我感受到溫暖拉！

Jenkins ＆ Docker

全自動化片片下載機器人（誤)，利用自動化排程將日常作業省去重複執行的步驟，節省時間讓我們能有更多時間可運用

這次課程練習使用 youtube-dl 這支程式，真是太方便拉，一定會找時間研究一下，這樣歌單就不用一首一首點了

上課都能發現新世界呢！不過還是要拿來做正經事拉

事件驅動 : 每當有pull request, push code 就執行測試，確保新的程式運作正常
每日排程 : 雖然每次自己的程式更新都能看到測試結果，但？第三方API更新的時候呢？當老師這樣一講的時候
就凸顯了每日排程測試的重要性了~~避免被別人陰了（誤~~

再搭配強大的 Docker 將環境image包裝好，確保測試環境一致，撰寫 dockerfile 統一測試環境

因為是檔案當然能「板控」，搭配 docker-compose.yml 板控指令…etc，真的好處多多！！

太強大，放遠未來，無限美好啊～

當然docker還有其他應用，像是上次pokemon開農場（可惜沒聽到…），期待日後開的課程

期許自己會多摸摸一下docker。

DevOps（筆記一下）

最後發表

這首先要道歉一下的，自己沒將作品完成很可惜啊。

意外的是有同學也選擇了相同的「開放資料」流浪動物作品

看到他們所做的FB認養機器人，真心覺得很棒啊，絕對超過87分！

雖然本身不會「吉他」但吉他App作品也很完整

今天五組發表，神奇寶貝圖鑒發表充滿血淚啊，竟然做到怒刪自己的code XD
（還好有git，體會到人生不能重來，但git可以！）

文學組報告更加充滿血淚，但卻帶來了很多歡笑（？）簡報者的口腔彈道學造詣之高啊，佩服服服

最後我們自己的報告ＱＱ，對只能ＱＱ，但會做完它的，不能再留下遺憾

如果ＦＢ、ＷＥＢ、ＡＰＰ三個合體就無敵拉（疑？

HelloJS 8週心得

師父領進門，修行在個人。

每週的課程都有待到重點、觀念，但實際上一定要自己實作練習、在練習才能真正學會，這是不變的道理

不可能上完課就飛天拉，別傻了孩子

認識了許多人、結交了朋友，既實用又充滿樂趣的8周時光，而且有時還能貢獻自己的能力

真的令人開心，資訊圈不大，或許不久後你我會在某個社群、活動相遇，期待。

-KenYA

2016-08-17

Hello-JS-Week5

課程大綱

React-Route
Redux

課程心得

React-Route 與 Redux 都是第一次接觸的技術，感謝講師用心準備的較單純的練習

能夠較容易直接感受到作用，單由於開發經驗很少，所以還無法直接感到強大的「威力」

Redux 的 One-Way dataflow

將所有 state 存入一個 store，能夠避免一直傳遞 props 到子component，而直接取用

感覺減少了很多步驟，或許從 React 直接學習開發，感受到傳遞props 的地獄就能親身體會到

Redux的美好了吧。

作業心得

這次作業算滿單純，利用 React-Route 將一個完整的網頁加入現有的Route之中

加入Route規則，import component ，並component 寫入Route之中

利用按鈕直接觸發Route，切換至加入的網頁之中，不用重新寫component

用寫都嘛比較簡單，實際上還是花了時間在思考如何正確導入component，看到成果真是開心啊

2016-08-09

Hello-JS-Week4

課程大綱

SASS
React
課程簡報檔

課程心得

SASS

又是新的東西可以學了，將css加入「變數」可套用、做數值運算，還可以巢狀套用以及不太懂的 mixin

只是目前css樣式，我連bootstrap都套不漂亮啊哈哈…

當有興趣的時候再來摸索這個吧

React

React 真的全新體驗，完全前端作業，寫法也把原本html的寫法添加了很「程式」的做法

React生命週期跟觸發「重繪」目前還是沒有掌握得很好

生命週期可能要多寫幾次才會用身體體會到過程吧

雖然知道三種情況會「重繪」

若Props發生變動
呼叫setState
forceupdate (不建議)

這次作業部分是利用 setState觸發來重新繪製畫面

作業心得

作業 Repo
體會到肌肉學習法，先抄起來寫，多寫幾次就會漸漸體會到、理解（？）

講師提供了很重要的取得input「值」的方法

以及提示使用 props 傳 function 到其他 component內使用

userpage 內建立一個 getUsers function, 會觸發 setState 來重新賦予 userList所需要的值

並且重繪畫面，寫的時候一直無法觸法重繪，找了很久才發現

將要傳到其他 component 的 function getUsers, 寫成callback = {this.getUsers}

但我在component 呼叫 getUsers的方法卻寫成了 this.props.getUsers() 這…根本搞錯

應該要寫成 this.props.callback() 才對…明明知道 text={123} 取值的時候寫 this.props.text

真是傻傻的啊…Orz，總之修改過後，就可以順利重繪畫面了（撒花）

2016-08-01

Hello JS week3 作業筆記

作業筆記

Mocha 測試

Mocha 測試時，要利用 url 操作 CRUD

使用到 sails.hooks.http.app，分別使用 Get Post Put Delete Method

//get 取得網頁數據
let result = request(sails.hooks.http.app)
             .get(/friend);
//post 新增資料
let result = request(sails.hooks.http.app)
            .post(/friend/create)
            .send({id: 1, name: 'yoo', email:'hello@email.com'});
// put , delete 使用方式與 post 一樣

修改,新增 route, policies

參考網址
Blueprint API
參考預設的API行為
Destroy (Blueprint)
在操作Destroy時遇到問題，因此來查看原本預設的操作方式
req.param()
req.params()
在寫controller 行為時 request 所接收到的要求，req.params[] 能從中得到資料「參數」來進一步處理

route 寫法

1 2	// :id 這個寫法可以在 req.params['id'] 取得對應的資料 'Delete /friend/:id':'FriendController.destroy',

config/policies.js

恩…
將Controller所對應的method 寫入，並標明應該要接收到什麼參數回傳（應該是這樣沒錯…

// [] 表示允許傳回任何、或不回傳，無限制
'FriendController':{
  create: [],
  ...
}

2016-07-31

Hello Js Week3

課程大綱

Sails 介紹
Heroku
Angular.js Socket.io

上課心得

本週的收穫依然非常的多，真的用盡心力的在專心聽課

快結束時真的是燃燒殆盡，但沒堅持到最後一刻（倒)，後面的Angular已經無法吸收

好險課程有錄影，可以複習

課程中第一次「真正」使用 HackPad 共筆，之前都只有開啟來看而已

Sails上課共筆

這次拼命、努力將課程內容筆記下來，也是本週如此燃燒的原因

Sails

從最基礎入門帶起，真的收獲良多，知道了controller預設的 method 是什麼

如何使用 Restful 操作 models ＣＲＵＤ

示範使用 ejs 建立頁面表單來呈現、操作網頁流程

雖然看起來很基礎，但這對我來說獲得很多

像是 create 完成之後，redirect回原來網頁的「流程」…etc

ajax 的應用可以節省頻寬，因為接收的資料是只有變化的部分，不需要重新傳送整個頁面

Angular Socket.io

Realtime 的概念有接收到，client 與 server 端保持連線，有變化時server端會傳送資訊

client接收到後呈現在網頁上面，就像是即時的呈現新資訊 Facebook就是這樣

可以開啟網頁開發者工具，來查看連線，有其中一項一直保持著連線狀態

socket.io的部分

需要自己重新看著影片做一次，最後上課的時候已經燃燒到無法思考了囧

2016-07-23

Hello Js Week2

課程大綱

Hello JS GitBook

npm : npm指令、package.json內容
Hexo : 安裝、設定、上傳
JavaScript : Es6(es2015)、callback、Promise、Async,Await(Es7)
TDD : sequelize、Facebook API

課程心得

先講最後心得，上課內容很充實，感謝老師們用心的準備、示範

雖然是坐在下面聽課，也是很耗體力、腦力的啊呵呵…

這次有幫助到幾位同學排除問題，算是有派上用場了QQ

npm

官方文件，可以看看他們 Youtube 頻道教學影片(是女『聲』喲)

package.json 內 dependencies, devDependencies 的作用

當初這兩個差別找了一段時間特別有印象

npm install --save ,npm install --save-dev

分別寫入 package.json 的 dependencies 跟 devDependencies

script 可以節省打一堆指令，很方便（前提是知道怎麼做）

nvm

使用 nvm 可安裝不同的 node, npm 版本，並且可以切換node版本，只是相同的module在不同版本

全域環境 npm install -g 需要個別安裝一次就是了

安裝參考

Hexo

全「靜態」Blog 網頁，可以放在 GitHub Page

來上課之後才知道有這樣方便的套件與功能，真的很棒可以免費取得自己的網頁伺服器

而不用申請網域、ＶＰＳ、架設伺服器…etc等方面，這樣的功能寫筆記、日記相當足夠

由於上課之前有先練習過，所以上課的時候能夠幫助到同學排除障礙，內心挺滿足的

特別要注意的部分就是在 deploy 之前建議執行 hexo clean 來清除之前所留下的檔案

避免上傳後樣式、內容不正確。

設定 _config.yml 須注意:後面接值都要空一格「空白」

1 2	// 若要上傳到 GitHub 需要安裝套件 npm install hexo-deployer-git --save

JavaScript

聽課大致上沒什麼大問題， scope 概念可以改善之前 var 導致存取變數非預期狀況

改用 let, cont定義變數

callback 會一時間看不出程式執行的方式，會一直傳入function

改用 promise 與 async, await 大大改善了可讀性，但ES6, 7 才支援

遇到舊版本JavaScript還是需要使用 callback

可以到這裡 babel 測試 es6, 7 語法以及 Arrow function

TDD (Test-Driven Development) 測試驅動開發

寫測試很重要，可以節省後面測試的時間，避免重複輸入、重開程式等等動作

但，還是不是很熟悉 Orz，畢竟之前習慣是邊寫邊console.log看輸出的內容

相信上手後一定能獲得改善。

利用這次課程作業再好好的熟悉一次

寫測試的語法

Mocha 測試架構
Chai should 語法的使用方式

可利用 only 來進行單一測試，或是skip來跳過特定測試

測試的beforeEach 與 afterEach

beforeEach(async function(done){
  //“每次”執行每一個測試的時候都會執行的動作
  //可以將需要使用的變數、物件在這邊生成
  try{
    done();
  }
  catch(e){
    done(e);
  }
});
afterEach(async function(done){
  //“每次”執行完測試後會做的動作，類似清除資料等動作
  try{
    done();
  }
  catch(e){
    done(e);
  }
});

sequelize

是一款 ORM 操作資料庫套件，也是需要多看看、熟悉，經由上課的練習，有稍稍抓到一些「感覺」

熟悉資料庫是後端必備技能，自我提醒。一定要多加熟悉

FB API

此次課程的回家作業，老師在上課時有示範過如何取得「朋友」清單，以及「發文」功能

當初自己在找 API token 時還真花了不少時間…

還需要瞭解 fb 這個 npm module 的 method有哪些可以使用