React Native Redux 學習筆記

其實朋友們可以跳過這篇文章，我寫得很碎片式，只是寫給我自己看的。(如果有寫錯的地方 也麻煩留個言給我 導正我一下，目前，我還沒試出一個簡單架構出來...，也許 最近會開始嘗試吧，資料太多，暫時無法一次到位)
[粗人見解] 學習 redux 我建議去上網找一個簡單的 sample，跟著做。

Vue 用 porps 把父層的資料傳給 child component

just an example，

HTML:

<!--準備 CardComponent 的 Template-->
<script type="x-template" id="cards-tmp">
  <div id="cards-tmp">
    <div class="card" v-for="card in cards">
      <h2>{{ card.title }}</h2>
      <p>{{ card.description }}</p>
      <a href="#" v-on:click.prevent="openModal(card.id)">read more</a>
  </div>
</script>
  
<div id="app">
  <h1>Vue App Example</h1>
  <div>
    <card-comp :cards="cardOriginal"></card-comp>  
  </div>
</div> 

JS

// make an component
var cardComponent = Vue.extend({
  // 指定是哪個 Element
  template: '#cards-tmp',
  // what props you want to accept.
  props: ['cards'],
  methods: {
    openModal: function(id){
      alert(id);
    }
  }
});

new Vue({
    el: '#app',
    components: {
      // register name is card-comp
      'card-comp': cardComponent
    },
    data: {
      cardOriginal: [
        {
          id: 123,
          title: 'Hello Vue',
          description: 'Good Morning!'
        },
        {
          id: 123,
          title: 'Hello Vue',
          description: 'Good Morning!'
        }
      ]
    }
  
});

jsbin:
JS Bin on jsbin.com

參考:
https://github.com/vuejs/vue/issues/1987

Vue Avatar 解決了我覺得大頭照那個位置一直很空洞的問題

Avatar 是大頭照的意思。其實之前在用 PHP 就發現有類似的 package (以 Laravel 來說，就有像是 laravolt/avatar)，可以爬出一段使用者的名稱，回傳文字的簡寫。然後隨意找找還真的讓我找到 vue 也有好心的開發者作出產出 avatar 的 component。

Git Repo Demo 連結: https://eliep.github.io/vue-avatar/
Git Repo: https://github.com/eliep/vue-avatar

不過我還是用 ES5 的方式在使用，步驟如同官方說明。

載入 vue 以及 vue avater 的 js 檔案

<script src="/assets/js/vue.min.js"></script>
<script src="/assets/js/vue-avatar.min.js"></script>

除了基本的載入 vue-avatar.min.js 之外，還要在 vue 初始化一個 instance 的地方加上 components 的設定，例如:

new Vue({
  el: '#app',
  components: {
    'avatar': Avatar.Avatar
  },
  // 來一點示範的資料
  data: {
    username1: 'Win.Wu 吳穎穎',
    username2: 'YIYING WU',
    username: "hello world",
  },
  ....

在 HTML 的地方:

<avatar :username="username1" :size="40"></avatar>
<avatar :username="username2" :size="40"></avatar>
<avatar :username="username" :size="40"></avatar>

結果:

<avatar> 這個 component 還有很多 attr/props 可以用，設定方式都在 git pages 上，如果你有想要客製化什麼部分，請從文件上找找吧。

只是做一般需要 member 登入的 website，就算是透過臉書也有可能是使用者沒有大頭照的情況，為了不讓那個位置空著，或是放個什麼奇怪的 icon，也許這是一種方式 :P

(我純粹是自己很喜歡而已 :))

看眼科記

最近一直覺得看東西容易失焦，會酸，用力瞇一下還會流眼淚。
今天就去東區諾貝爾眼科診所掛號，給醫生檢查一下，還好只是乾眼症，眼睛疲勞 (這對工程師來說，很難避免吧 Orz) 再加上我最近又很常看書，可能真的有用眼過勞。

Anyway 檢查一下比較心安，希望大家用心工作之後，也要多注意自己的健康，我最近是很走養生路線，下班盡量不看程式，而且我還刷了一年的健身房...

最後還是要撈叨一下，
公司不是自己的，但身體是自己的。
Scrum 是假的，但瀑布是真的。
不能改變別人是困難的，但改變自己的是可能的。
(硬要來一段這種詭異的結尾 XD)

Vue Instance Lifecycle Hooks 實例生命週期

一個簡單的 sample，主要我是在看整個 vue  的生命週期，對 vue 有些瞭解了。

var vm = new Vue({
  el: '#app',
  data: {
    name: 'winwu',
    width: 900,
    height: 500,
    barColor: 'red',
    barHeight: 30,
    barXOffset: 10,
    dataset: [30, 20, 45, 12, 21]
  },
  // https://vuejs.org/api/#Options-Lifecycle-Hooks
  init: function() {
    // init 這時候還沒有觀察到 data observation, event, watcher...
    console.log('init: my name is ' + this.name);
  },
  created: function() {
    /* data observation,
     * computed properties,
     * methods,
     * watch/event callbacks.
     * 在這個階段完成
     * 但，$el 這時候還沒有好，(DOM 的解析還沒開始)
     */
    console.log('creadted: my name is ' + this.name);
  },
  beforeCompile: function() {
    // 我也不曉得什麼時候會呼叫到這裡
    console.log('beforeCompile: my name is ' + this.name);
  },
  compiled: function() {
    console.log('compiled: my name is ' + this.name);
  },
  ready: function() {
    // 在 vm.$el 插入 DOM 時呼叫。
    console.log('ready: my name is ' + this.name);
  },
  attached: function() {
    console.log('attached');
  },
  beforeDestroy: function() {
    // 我也不曉得什麼時候會呼叫到這裡
    console.log('beforeDestroy');
  },
  destroyed : function() {
    console.log('destroyed: my name is ' + this.name);
  }
});

// call destroy, 才會觸發 destroyed func. 這時候長條圖已經不會隨著 data 連動
vm.$destroy();

// 第一個參數為是否 remove，若為 true，所有 DOM 的關聯會刪掉。
// vm.$destroy(true);

這是 log 結果:

init: my name is undefined
01.js:29 creadted: my name is winwu
01.js:33 beforeCompile: my name is winwu
01.js:36 compiled: my name is winwu
01.js:43 attached
01.js:40 ready: my name is winwu
01.js:46 beforeDestroy
01.js:49 destroyed: my name is winwu// vm.$destroy(true);

我放在 jsbin 上面，可能比較好讀:

JS Bin on jsbin.com
jsbin: http://jsbin.com/mibiya/1/edit?html,js,console,output
參考官方文件: https://vuejs.org/api/#Options-Lifecycle-Hooks

使用 Vue-cli 快速建立 Vue 專案樣板

Vue 官方提供了一個 vue-cli 工具可以快速建立 vue 的專案，首先你需要以下:

• Node.js 環境
• Npm

Vue.js 改變分隔符的符號 Change Custom Delimiters

在使用 vue.js 重構舊有的專案時，發現 {{ variable }} 這樣的 expression 竟然怎麼樣都不顯示在畫面上，原來是因為我的 view 是 hbs (handlebarsjs) (因為是 express 的專案...)，所以這 {{ }} 這個分隔符號會先被 handlebarsjs 吃掉，以至於我的變數反而沒被 vue 辨識。

Vue.js 學習資源

我堅持今天一定要寫點什麼東西 (別問我在堅持什麼 XD)，所以先來談談 vue.js 這個 Library (暫時我還不知道，該定義它是 Library 還是 Framework，就目前的感覺，我覺得較像 Library )。

React Native: CameraRoll.getPhotos(tag, success, error) is deprecated. Use the returned Promise instead

在實作 <React Native 學習手冊> 第六章時，有個 cameraRoll 的功能，cameraRoll 很白話了吧?! 就跟相片有關係的 component，其中用 getPhotos 可以取得相簿的照片。

React Native 取得地理位置 navigator.geolocation 得到 location request timed out

我的測試手機是 samsung edge plus 6.
使用 react native 版本為: ^0.26.1
在抓取 location 一直拿不到，反而一直出現 error "location request timed out".

Vue.js select 下拉選單示範

這裡是示範一個下拉選單，其中的關係包含被選擇的項目，以及關聯的下一層選單。簡單練習而已，一定還是有更好的寫法。

Vue.js v-on:click get target Example ( click 事件取得自己 )

在重構工作上的一段小程式，轉而使用 Vue 寫一點小功能。

讀《使用者故事對照》與生活閒聊

其實我要講的有一半是來自於使用者故事對照這本書的讀書心得。上週，有次小主管帶我去聽演講 (Epoch-MIT ILP 專題演講)，其中一場是 PicCollage founder John Fan 為主講人，他就問台下觀眾，什麼是 MVP，當時還聽的不是很清楚，回家也有忘了。接著週末，我就拿起這本書開始讀，結果我發現 User Story Mapping 提到 MVP 還有一些 Lean Startup，與我那天聽到演講的內容很有相關性。

MVP 也就是 "Minimum Viable Product" 最小可行產品。

為什麼需要 MVP 呢?! 我在猜想某部分原因是因為當我們在策劃一個解決問題的產品的時候，大部分情況是我們在“猜想”使用者會遇到什麼問題，所以當我們想出了一個 solution 時，(也許我們要想非常多個 solution)，我們要做出一個 MVP 跟使用者互動，驗證我們是不是在對的方向，也用來驗證我們的猜測是不是越來越接近需求。所以會一直維持一種循環『build->measure->learn』 (看圖片)  不斷的試驗，不斷的學習，這樣的 iteration (循環)，能夠越快越好，能夠越接近使用者的想要的產品，iteration 也不要太久，差不多一次的 sprint 衝刺時間約兩周，這樣一個月可以 iteration 兩次（sprint 的週期主要還是看公司的步調是什麼狀況...）。

實現想法不急著產出設計稿
其實 wireframe 我研究不多，但那天聽演講覺得要點就幾個:

• 討論快速
• 修改也快速
• 去除任何顏色，單純線稿，單色色塊表現 (因為顏色會影響判斷能力，也會增加很多考慮易用性的變因)

User Story Mapping
這些列的是我看書的學習心得 :P, 也許對看文章的你沒什麼很直接的幫助，我建議你可以直接買書，會比較好理解，因為有些細節要搭配照片看比較了解。或是看 YouTube，這裡有這本書的作者的演講: User Story Mapping with Jeff Patton

• Story Mapping 幫助開發時聚焦在 user 跟使用經驗上，促成更好的流程(討論出來的)。
• 故事對照 Mapping 是很容易的一件事情，基本上我們只需要準備便利貼(如果你不嫌貴的話，公司又願意花錢買便利貼...)，由左而右的排序，寫下整個使用者在使用產品的故事。而細節是沿著每個步驟的下面，往下貼，也就是水平排序為故事的流程，而垂直的便利貼，表示該流程的一些細節。(看 slides) ，一個人也可以練習如何 User Story  Mapping，基本上你可以把你某一天的早上所做的所有的事情透過便利貼描述出來，這是一種練習方式，書本某一章節有提到如何練習~
• 『分享文件不是分享共識. p.XXX』 這句話還慢令人有所感觸的 XD，為什麼呢？！因為寫 spec 的人跟看 spec 的人可能認知不同，如果沒有確認大家對於這份文件所講的某件事情有相同的認知，那麼 spec 跟實際做出的東西可能會有很大的落差。即便大家都在 spec 上面簽了名... 也不代表大家想的是同一種預期的結果。
• 呈上點，個人結論是: spec 別寫得太完美... XD (其實我以前是開發完才補文件.... )
• 當在敘述故事的時候，所有的對話記錄，寫在白板上，貼在牆壁上的便利貼所有討論，過程照片，都可以任何形式記錄下來，如拍照等等，因為重要的不是被寫下來的文字，而是你看這些記錄可以讓你想起什麼討論的細節。
• 千萬要記住，User Story 絕對不能代表需求，而是利用文字, 圖像，透過大家共同討論, 述說故事，建立大家對 User Story 的共識。
• 大故事可拆解成好幾個小故事。(我覺得這樣做的好處也適合拿來拆成要製作的功能，但感覺又不能這麼工程師一面的想法... )
• 『在探索深度之前，先聚焦於使用者故事的寬度』 p.12，這句話的意思是，討論得很 high 的時候不要一直往細節討論，要拉回來照顧一下整體的 story 以及繼續往後面的 story 前進，書上的說法叫做"整體圖像"，討論細節之前請先以達到故事尾端為重，『思考寬度一英里，思考深度一英寸』 (我好喜歡這句話 :P)
• Ron Jeffries 的三個 C: Card, Conversation, Confirmation
  http://ronjeffries.com/xprog/articles/expcardconversationconfirmation/
• 魚缸協同合作模式 (人多未必好辦事)，這模式挺有趣的，意思就是，有興趣的人就加入對話，沒興趣的就離開魚缸的範圍 (其實是類似在一個房間界定魚缸的範圍)，如果你的團隊有人開會時表現的興趣缺缺，滑手機之類的症頭....==。類似的文章: https://blog.itcilo.org/2009/02/16/facilitate-a-fishbowl-discussion/
• 基本上想做的事情，跟擁有的時間，有很大的落差。但 User Story 會談到很多細節，可以拉出一條線，在線以上叫做 in，線下叫做 out，in 表示在某個階段之內可以先完成的，也許是一些必要的功能，out 則是暫時先不做，不代表捨棄那個流程的 detail. 可能在這個流程上會有一些便利貼會被移動 XD (感覺很像在走 scrum)
• 我也好想玩玩看但我公司應該沒有這種 project 可以玩這種流程 QQ

有興趣的話建議買書來看看吧! 要不是這本書，我真的沒聽過 User Story Mapping.


關於 User Story Mapping 你也可以參考:

• gotop 使用者故事對照｜User Story Mapping
• (博客來) 使用者故事對照：User Story Mapping
• http://jpattonassociates.com/user-story-mapping/
• http://jpattonassociates.com/storymappingslides/ 書籍作者的投影片
• Ruddy 老師的 slide http://www.slideshare.net/ruddylee/user-story-mapping-43373448
• User Story Mapping 使用者故事對照
• vividadada的技術筆記 使用者故事對照/地圖演講摘要 (User Story Mapping)

如果有寫錯什麼內容，還麻煩留言指正指正，謝謝!
若有問題，或是有任何不妥的文字，歡迎來信 yiyingwu.1990小老鼠gmail[.]com