SushiWen's Blog

Ionic Framework 教學 - 11. App 上架

2015-11-25T13:12:00.000+08:00

Android 和 iOS 分開上架，上架前要先修改參數，以 Android 為例，我們先移除 console log （注意如果你之後要繼續開發的話要把這個 plugin 加回來）。

cordova plugin rm cordova-plugin-console

然後可以修改 mysidemenu/platforms/android/AndroidManifest.xml 裡面的 android:versionName="0.0.1"
之後跑 release build 然後產生 my-release-key.keystore 來簽署我們的 apk ，再用 zipalign 打包好，就可以到 Google Play 上架了

cordova build --release android
keytool
cd platforms/android/build/outputs/apk/
keytool -genkey -v -keystore my-release-key.keystore -alias alias_name -keyalg RSA -keysize 2048 -validity 10000
ls
jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.keystore android-release-unsigned.apk alias_name
~/android/android-sdk-macosx/build-tools/22.0.1/zipalign -v 4 android-release-unsigned.apk myapp.apk

上架填寫表單的時候要注意不要使用網路上抓來的圖片。

Ionic Framework 教學 - 10. 使用 Cordova Plugin

2015-11-25T13:11:00.000+08:00

承上一章

我們來試著製作一個會用到相機的 App 來練習 Plugin 的使用，相機的功能是藉由 Cordova Plugin 來連接的。

首先 Shell 指令進入我們的 project，然後增加手機目標平台系統，ios 或是 android

cd mysidemenu
ionic platform add android
ionic platform add ios

然後安裝 Camera Plugin 和 Canvas2Image Plugin

npm update -g cordova
cordova platform update android@5.0.0
cordova plugin add cordova-plugin-camera
cordova plugin add https://github.com/devgeeks/Canvas2ImagePlugin.git
cordova plugin add cordova-plugin-whitelist

在 www/templates/menu.html 增加一個選單

<ion-item menu-close href="#/app/photo">
  Wanted
</ion-item>

然後增加 www/templates/photo.html

<ion-view>
  
  <!-- add a camera button to take a photo -->
  <ion-nav-buttons side="secondary">
    <button
      ng-click="capturePhoto()"
      class="button button-icon icon icon-small ion-camera">
    </button>
  </ion-nav-buttons>

  <ion-content>

    <div
      style="
        width:320px;
        height:453px;
        overflow: hidden;
        margin: 0 auto;
      ">
      <div
        style="
          width:320px;
          height: 1000px;
          background-image:url('{{photo.url}}');
          background-repeat: no-repeat;
          background-size: contain;
        ">
        <img ng-src="{{framePhoto}}"
          style="
            width:320px;
          ">
      </div>
    </div>
    <button class="button button-full" ng-click="save()">Save</button>
  </ion-content>

</ion-view>

這裡可以看到我們使用一個 background image ，圖片位置是一個變數 photo.url ，然後前面放一個圖片 img ，還有兩個按鈕對影兩個函式， capturePhoto 用來拍照， save() 用來儲存照片。
接下來我們定義一個 Controller 來處理這些邏輯。

.controller('PhotoCtrl', function($scope) {
  
  $scope.framePhoto = 'http://i.imgur.com/5WkxqFC.png?1';
  //photo to show in view page
  $scope.photo = {};
  
  //options to take a photo
  var photoOptions = {};
  if( typeof Camera !== 'undefined'){

    //https://github.com/apache/cordova-plugin-camera
    photoOptions = {
      quality: 100,
      destinationType: Camera.DestinationType.FILE_URL,
      sourceType: Camera.PictureSourceType.CAMERA, //[PHOTOLIBRARY, CAMERA, SAVEDPHOTOALBUM]
      encodingType: 1, //jpeg:0 png:1
      targetWidth: 320,
      targetHeight: 453
    };

  }

  /**
   * Capture a photo, when user click the camera icon
   */
  $scope.capturePhoto = function() {
    if(navigator.camera){
      navigator.camera.getPicture(
        onGetPictureSuccess, onGetPictureError, photoOptions);
    }
  };

  /**
   * Called when the photo is taken
   * @param  {string} result photo local url
   */
  function onGetPictureSuccess (result) {
    console.log('onGetPictureSuccess', result);
    $scope.photo.url = result;
    $scope.$apply();
  }

  /**
   * Called when the capture photo runs into an error
   * @param  {object} err [description]
   */
  function onGetPictureError (err) {
    console.error('error', err);
  }



  /**
   * Load an image from a file path, call 'onload' function when loaded.
   * @param  {string} src    image file path
   * @param  {function} onload callback function
   * @return {image}        
   */
  function loadImage(src, onload) {
    console.log('loadImage');
    var img = new Image();

    img.onload = onload;
    img.src = src;
    return img;
  }

  
  /**
   * Combines two images in a canvas, use the size of image 1.
   * @param  {string}   src1     file path of image 1
   * @param  {string}   src2     file path of image 2
   * @param  {Function} callback function when 2 images combined
   */
  function combineImages (src1, src2, callback) {
    console.log('combineImages', [src1, src2]);
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d'), dataURL;
    var img1 = loadImage(src1, onload);
    var img2 = loadImage(src2, onload);
    var i = 0, base64Photo;
    function onload() {
      i += 1;
      if(i == 2){ //when 2 images are both loaded
        i = 0;
        canvas.width = img1.width;
        canvas.height = img1.height;
        //draw img2 according to img1's ratio
        ctx.drawImage(img2, 0, 0, img2.width, img2.height, 0, 0, img1.width, img1.width*img2.height/img2.width);
        ctx.drawImage(img1, 0, 0);
        callback(canvas);
      }
    }
  }

  /**
   * save image from canvas to gallery
   * @param  {canvas} canvas
   */
  function saveImageFromCanvas(canvas){
    window.canvas2ImagePlugin.saveImageDataToLibrary(
      function(msg){
          console.log('canvas2ImagePlugin', msg);
      },
      function(err){
          console.log('canvas2ImagePlugin', err);
      },
      canvas
    );
  }

  $scope.save = function() {
    //combine 2 images 
    combineImages($scope.framePhoto, $scope.photo.url, saveImageFromCanvas);
  };

})

理解程式內容請一邊閱讀程式註解。最後我們在 www/js/app.js 增加一組 routes

.state('app.photo', {
  url: '/photo',
  views: {
    'menuContent': {
      templateUrl: 'templates/photo.html',
      controller: 'PhotoCtrl'
    }
  }
})

試著執行這個頁面，發現不能執行，因為電腦上面沒有這些 Plugin 對應的手機程式，我們要到手機上去測試執行。
有別於之前上傳的測試方式，這次我們用到 Plugin 裡面因為包含原生的程式，我們必須要直接編譯這個 App。
請到 App Store 安裝 Xcode 或是到 Android 官網下載 Android SDK，然後安裝好並且把 Android SDK 環境變數加到系統內。
接著到命令列 Shell 編譯你需要的對應的手機系統。

ionic build ios
ionic build android

編譯沒有問題之後，如果你是使用 Android 系統，你可以接上你的手機測試，請打開你手機的 developer mode ，ios 的使用者可以跑 simulator。

ionic run ios
ionic run android

遺憾的是，ios simulator 只能檢查你編譯成功，沒有支援相機功能。
iOS 的話我們進到 Xcode 打開 mysidemenu project ， File > Open... > mysidemenu/platforms/ios/mysidemenu.xcodeproj
連接手機平板裝置後開始編譯。

Ionic Framework 教學 - 9. 簡易聊天室設定

2015-11-19T13:07:00.000+08:00

承第八章

我們來做一個設定頁面，讓我們在聊天室講話的時候可以有一個暱稱。

請大家建立一個設定頁面 www/templates/settings.html

<ion-view view-title="設定">
  <ion-content>
    <ion-list>

      <ion-item class="item item-input-inset">
        <label class="item-input-wrapper">
          <input type="text" placeholder="Nickname" ng-model="currentUser.displayName">
        </label>
        <button class="button button-small" ng-click="saveName()">
          Save
        </button>
      </ion-item>

      <label class="item item-input item-select">
        <div class="input-label">
          Color
        </div>
        <select class="" 
          ng-model="settings.color" 
          ng-options="c.value as c.name for c in colors" 
          ng-change="showColor()">
      </label>

    </ion-list>
  </ion-content>
</ion-view>

這裡使用了 currentUser.displayName 來當做顯示名稱，saveName()函式來儲存名稱，使用 select 來選擇顏色，當顏色被選擇之後會觸發 ng-change ，就可以用 showColor()來看看顏色變數被改變了嗎。
然後我們來定義這些功能，請增加一個 SettingsCtrl

.controller('SettingsCtrl', function($scope, $rootScope) {

  //gloabl variable, local storage
  $scope.currentUser = JSON.parse(window.localStorage.currentUser) || {};

  //global variable, temporary
  $rootScope.settings = $rootScope.settings || {};

  //https://en.wikipedia.org/wiki/Web_colors
  $scope.colors = [
    {
      name: 'Navy',
      value: '#000080',
    },
    {
      name: 'Crimson',
      value: '#DC143C'
    },
    {
      name: 'DimGray',
      value: '#696969'
    }
  ];

  $scope.showColor = function() {
    console.log($rootScope.settings);
  };

  $scope.saveName = function() {
    alert($scope.currentUser.displayName + ' saved!');
    window.localStorage.currentUser = JSON.stringify($scope.currentUser);
  };

})

這裡我們有兩種全域變數的寫法，一種是存在 local storage 一種是存在 $rootScope 裡面，等下我們來看看這兩種用法的差別。
注意這裡，在 window.localStorage 中必須要用字串的形式儲存，所以我們用 JSON.stringify 來把物件轉換成字串。讀取的時候則用 JSON.parse 來把字串轉換成物件。
然後我們在 www/js/app.js 增加一個 route state 來處理 settings

.state('app.settings', {
  url: '/settings',
  views: {
    'menuContent': {
      templateUrl: 'templates/settings.html',
      controller: 'SettingsCtrl'
    }
  }
})

然後我們在 www/templates/messages.html 增加一個按鈕可以連到設定頁面，把這個按鈕增加到 ion-view 的裡面，ion-content的上面。

  <ion-nav-buttons side="secondary">
    <button ui-sref="app.settings"
      class="button button-icon icon ion-gear-a">
    </button>
  </ion-nav-buttons>

這是一個 header button ， secondary 代表他在次要位置。
然後我們修改 www/templates/messages.html 的內容，增加了顯示名稱和顏色，完成後大概成為這樣。

<ion-view view-title="{{chatroom.name}}">
  <ion-nav-buttons side="secondary">
    <button ui-sref="app.settings"
      class="button button-icon icon ion-gear-a">
    </button>
  </ion-nav-buttons>
  <ion-content>
    <ion-list>
      <ion-item class="item-input-inset">
        <label class="item-input-wrapper">
          <input type="text" placeholder="New Message" ng-model="newMessage.content">
        </label>
        <button class="button button-small" ng-click="sendMessage()">
          Send
        </button>
      </ion-item>
      <ion-item class="item-text-wrap" ng-repeat="message in messages.slice().reverse()">
        <strong class="" ng-show="message.displayName">{{message.displayName}}:</strong>
        <span style="color:{{message.color || '#000'}}">
          {{message.content}}
        </span>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

然後我們回頭修改 MessagesCtrl 來讓送出的 message 夾帶 displayName 和 color 的資訊。

.controller('MessagesCtrl', function($scope, $state, $rootScope, ChatroomService, MessageService) {

  console.log('Chatroom Id: ', $state.params.roomId);

  //get current chatroom from roomId
  $scope.chatroom = ChatroomService.get($state.params.roomId) || {};
  console.log('This is chatroom: ', $scope.chatroom.name);

  //get messages in this chatroom
  $scope.messages = MessageService.all($state.params.roomId);

  //global variable, localStorage
  var currentUser = JSON.parse(window.localStorage.currentUser) || {};
  $rootScope.settings = $rootScope.settings || {};
  console.log($rootScope.settings);

  $scope.newMessage = {};

  $scope.sendMessage = function () {
    $scope.newMessage.color = $rootScope.settings.color || '#000';
    $scope.newMessage.displayName = currentUser.displayName;
    console.log('New message: ', $scope.newMessage);

    //send message
    MessageService.send($scope.newMessage).then(function() {
      $scope.newMessage.content = '';
    });
  };

})

如果你重新載入程式，你會發現 color 的設定不見了，但是你的暱稱還保留著。

藉由這個練習，我們可以知道 localStorage 和 $rootScope 的身為全域變數的方便強大和危險，強大是在任何地方修改這個變數都有效，危險也是因為你無法確定這個變數會被什麼函式在任何什麼地方修改了，造成不是你預期的效果。

練習題：使用者設定顏色之後，要去聊天室打字才能知道是什麼顏色，這不是一個好的使用者體驗，如何在選擇完顏色的時候讓使用者知道是什麼顏色呢？

Ionic Framework 教學 - 8. 簡易聊天室

2015-11-19T13:06:00.001+08:00

承第六章和第七章

設定好 Firebase 後，我們可以來做簡易聊天室，了解資料怎麼和後台連結，為了方便教學，這裡的聊天室我們只做匿名聊天室。

首先我們要做一個聊天室列表，我們增加一個 ChatroomsCtrl Controller，注意這裡 Chatrooms 是複數。

.controller('ChatroomsCtrl', function($scope) {

  $scope.chatrooms = [];
  
  $scope.newChatroom = {};

  $scope.createChatroom = function () {
    console.log($scope.newChatroom);
  };
})

記得 $scope 代表是 View 要使用的變數，這裡我們定義了 chatrooms 陣列， newChatroom 物件和 createChatroom 函式。
console.log 代表在瀏覽器 console 把變數內容印出來看看的意思。
然後建立 www/templates/chatrooms.html

<ion-view view-title="Chatrooms">
  <ion-content>
    <ion-list>
      <ion-item class="item-input-inset">
        <label class="item-input-wrapper">
          <input type="text" placeholder="New Chatroom Name" ng-model="newChatroom.name">
        </label>
        <button class="button button-small" ng-click="createChatroom()">
          Create
        </button>
      </ion-item>
      <ion-item ng-repeat="chatroom in chatrooms" href="#/app/chatrooms/{{chatroom.$id}}">
        {{chatroom.name}}
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

其中 ng-model 代表使用變數，ng-repeat 代表使用陣列中的變數。
然後在 www/js/app.js 增加一個 route

  .state('app.chatrooms', {
    url: '/chatrooms',
    views: {
      'menuContent': {
        templateUrl: 'templates/chatrooms.html',
        controller: 'ChatroomsCtrl'
      }
    }
  })

我們順便把 www/js/app.js 最下面的 $urlRouterProvider.otherwise('/app/playlists'); 改掉，這是預設的顯示頁面，如果連到任何未定義的 url 就會改連到這裡，我們改成 /app/chatrooms。

$urlRouterProvider.otherwise('/app/chatrooms');

最後在 www/templates/menu.html 增加一個 Chatrooms 選項

<ion-item menu-close href="#/app/chatrooms">
  Chatrooms
</ion-item>

現在可以按按看按鈕，理解一下程式內容。
然後我們增加一個 www/js/services.js

var firebaseUrl = "https://your-project-id.firebaseio.com/";
angular.module('starter.services', [])
//Firebase datastore reference
.factory("FirebaseRef", function($firebaseAuth) {
  return new Firebase(firebaseUrl);
})
//for log in and sign up
.factory("Auth", function($firebaseAuth) {
  var usersRef = new Firebase(firebaseUrl+"users");
  return $firebaseAuth(usersRef);
})
.factory("ChatroomService", function($firebaseArray) {
  var roomsRef = new Firebase(firebaseUrl+"chatrooms");
  var rooms = $firebaseArray(roomsRef);
  return {
    all: function() {
      console.log(rooms);
      return rooms;
    },
    get: function(roomId) {
      return rooms.$getRecord(roomId);
    },
    create: function(chatroom) {
      console.log('Adding chatroom: ', chatroom.name);
      return rooms.$add(chatroom);
    }
  }
});

其中 your-project-id 請填入你在 Firebase 申請的 Project ID ，這裡我們在做一個和 Firebase 溝通的 Chatroom service 。
這裡我們定義了 ChatroomService 服務，他主要有三個功能 all 來取得所有的聊天室， get 來取得特定 ID 的聊天室， create 來創造一個聊天室。
我們在第六章有說到，在 www/index.html 中，需要引用 services.js 來讓這個服務可以載入到頁面中。

...
<script src="js/app.js"></script>
<script src="js/services.js"></script>
...

在第六章也有提到，在 app.js 最上面要加上 starter app 對 'firebase' 和 'starter.services' 的依賴關係，這樣 angular 才知道要引用這些程式和服務。

angular.module('starter', ['ionic', 'firebase', 'starter.services', 'starter.controllers'])

然後讓我們的 ChatroomsCtrl 來使用這個 service 。

.controller('ChatroomsCtrl', function($scope, ChatroomService) {

  $scope.chatrooms = ChatroomService.all();
  
  $scope.newChatroom = {};

  $scope.createChatroom = function () {
    console.log($scope.newChatroom);
    ChatroomService.create($scope.newChatroom);
  };
})

這樣就可以順利增加 Chatroom 了，如果你到 Firebase project console 也可以看到對應的資料被增加上去了，比如說我增加了三個聊天室，下面圖片亂數的部分就是 Firebase 給這三個聊天室的特殊 ID。

目前Chatroom bar 點下去是沒有用的，因為對應的路徑 #/app/chatrooms/{{chatroom.$id}} 還沒有定義。

現在我們來製作可以發話的聊天室。
首先我們增加這個聊天室訊息的 Service 。
在 www/js/services.js 下面增加 MessageService 。

.factory("MessageService", function($firebaseArray) {
  var messagesRef = new Firebase(firebaseUrl+"messages");
  var messages;
  return {
    all: function(roomId) {
      console.log('get messages from: ', roomId);
      var roomRef = new Firebase(firebaseUrl + "chatrooms/" + roomId + "/messages");
      messages = $firebaseArray(roomRef);
      return messages;
    },
    send: function(message) {
      console.log('Adding message: ', message);
      return messages.$add(message);
    }
  };
})

這裡我們定義了 MessageService 有兩個功能， all 是根據某個 chatroom 的 ID 找出所有的對話訊息的 messages ，send 是用來發送訊息，就是把新的訊息加入 Firebase 中，這個 chatroom 的 messages 陣列。

然後我們就可以在 Controller 中使用這個 Services 了，我們建立一個 MessagesCtrl

.controller('MessagesCtrl', function($scope, $state, ChatroomService, MessageService) {

  console.log('Chatroom Id: ', $state.params.roomId);

  //get current chatroom from roomId
  $scope.chatroom = ChatroomService.get($state.params.roomId) || {};
  console.log('This is chatroom: ', $scope.chatroom.name);

  //get messages in this chatroom
  $scope.messages = MessageService.all($state.params.roomId);

  $scope.newMessage = {};

  $scope.sendMessage = function () {
    console.log('New message: ', $scope.newMessage);

    //send message
    MessageService.send($scope.newMessage);
  };

})

然後我們來建立這個聊天室的訊息頁面，建立 www/templates/messages.html

<ion-view view-title="{{chatroom.name}}">
  <ion-content>
    <ion-list>
      <ion-item class="item-input-inset">
        <label class="item-input-wrapper">
          <input type="text" placeholder="New Message" ng-model="newMessage.content">
        </label>
        <button class="button button-small" ng-click="sendMessage()">
          Send
        </button>
      </ion-item>
      <ion-item class="item-text-wrap" ng-repeat="message in messages.slice().reverse()">
        {{message.content}}
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

這裡可以看到 chatroom 代表當前這個聊天室，newMessage 代表 input 輸入框中新增的訊息， sendMessage 代表按鈕按下去後送出訊息，ng-repeat="message in messages" 代表列出所有在 messages 中的訊息。
然後我們來增加一個 route ，修改 www/js/app.js

.state('app.messages', {
  url: '/chatrooms/:roomId',
  views: {
    'menuContent': {
      templateUrl: 'templates/messages.html',
      controller: 'MessagesCtrl'
    }
  }
})

因為我們可以有很多個聊天室，每個聊天室的 url 不同，所以注意這裡的 :roomId ，代表這個 url 願意接受變數 roomId，並且把變數 roomId 傳給 MessageCtrl Controller 使用，請對照 chatrooms.html 的 href="#/app/chatrooms/{{chatroom.$id}}" 觀察，我們把 url 中的 chatroom.$id 對應到 state route 的 roomId ，使用者進到訊息頁面的時候 route 把 roomId 接受到的值給了新的 controller 中的 $state.params.roomId，我們是用這個介面來達成動態頁面的變數傳遞。

這裡編輯好之後就可以告一段落了。

發送訊息之後，各位也可以到 Firebase console 去看你的資料結構。

下一章，簡易聊天室設定

Ionic Framework 教學 - 7. 簡易登入和登出

2015-11-19T13:05:00.002+08:00

繼續上一章的教學，我們來做 Firebase 的使用者登入。
這篇也會提到 LocalStorage 的基本用法。
首先我們建立一個使用者資訊頁面 www/templates/profile.html

<ion-view view-title="使用者資訊">
  <ion-content>
    <div class="list">
      <div class="item">
        Name: {{currentUser.displayName}}
      </div>
    </div>
  </ion-content>
</ion-view>

定義一個 Controller ProfileCtrl

...
.controller('ProfileCtrl', function() {
})
...

然後加入 app.js route

...
.state('app.profile', {
  url: '/profile',
  views: {
    'menuContent': {
      templateUrl: 'templates/profile.html',
      controller: 'ProfileCtrl'
    }
  }
})
...

修改 menu.html 增加 Profile 項目

<ion-item menu-close href="#/app/profile">
  Profile
</ion-item>

連到 http://localhost:8100/#/app/profile 會發現這個頁面目前沒有正確的內容，因為 currentUser 還沒有定義。
現在我們來實作登入功能。
第一步我們直接修改 www/templates/login.html

<ion-modal-view>
  <ion-header-bar>
    <h1 class="title">登入</h1>
    <div class="buttons">
      <button class="button button-clear" ng-click="closeLogin()">關閉</button>
    </div>
  </ion-header-bar>
  <ion-content>
    <form ng-submit="doLogin()">
      <div class="list">
        <label class="item item-input">
          <span class="input-label">Email</span>
          <input type="text" ng-model="loginData.email">
        </label>
        <label class="item item-input">
          <span class="input-label">Password</span>
          <input type="password" ng-model="loginData.password">
        </label>
        <label class="item">
          <button class="button button-block button-positive" type="submit">登入</button>
        </label>
      </div>
    </form>
  </ion-content>
</ion-modal-view>

注意這裡我們改用了 loginData 方便使用上了解。
然後我們在 controllers.js 定義 loginData 和 doLogin()

...
.controller('AppCtrl', function($scope, $ionicModal, $timeout, $rootScope, $state, $ionicLoading, 
  FirebaseRef, Auth) {

  // With the new view caching in Ionic, Controllers are only called
  // when they are recreated or on app start, instead of every page change.
  // To listen for when this page is active (for example, to refresh data),
  // listen for the $ionicView.enter event:
  //$scope.$on('$ionicView.enter', function(e) {
  //});

  // Form data for the login modal
  $scope.loginData = {};

  // Create the login modal that we will use later
  $ionicModal.fromTemplateUrl('templates/login.html', {
    scope: $scope
  }).then(function(modal) {
    $scope.modal = modal;
  });

  // Triggered in the login modal to close it
  $scope.closeLogin = function() {
    $scope.modal.hide();
  };

  // Open the login modal
  $scope.login = function() {
    $scope.modal.show();
  };

  $scope.loginData = {};

  // Perform the login action when the user submits the login form
  $scope.doLogin = function() {
    console.log($scope.loginData);
    var loginData = $scope.loginData;

    if (loginData && loginData.email && loginData.password) {
      $ionicLoading.show({
        template: '登入中...'
      });
      Auth.$authWithPassword({
        email: loginData.email,
        password: loginData.password
      }).then(function (authData) {
        console.log(authData);
        FirebaseRef.child("users").child(authData.uid).once('value', function (snapshot) {
          var val = snapshot.val();
          console.log(val);
          window.localStorage.currentUser = JSON.stringify(val);
          $scope.$apply(function () {
            $rootScope.currentUser = val;
          });
        }, function(err) {
          console.error(err);
        });
        $ionicLoading.hide();
        $scope.closeLogin();
        $state.go('app.profile');
      }).catch(function (error) {
        alert("登入失敗 " + error.message);
        $ionicLoading.hide();
      });
    } else {
      alert("輸入 Email 和 Password")
    }
  };
})
...

這裡可以看到使用者登入後，我們把使用者名稱儲存到 window.localStorage.currentUser 中，這個 window.localStorage 儲存內容必須要使用字串，所以我們把用 JSON.stringify 把使用者資訊從 object 轉換成字串。
window.localStorage 的內容可能被同樣機器上的其他程序看到和使用，所以不建議儲存使用者的秘密資訊，使用者資訊建議儲存在 server 。

我們修改 app.js 的起始執行內容，把 currentUser 的內容代入到 currentUser ，這樣各個 View 都可以使用了。

...
.run(function($ionicPlatform, $rootScope) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if (window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);

    }
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
    }
    
    console.log(JSON.parse(window.localStorage.currentUser));
    $rootScope.currentUser = JSON.parse(window.localStorage.currentUser) || null;

  });
})
...

接下來實作登出功能。
修改 profile.html ，增加登出按鈕。

<ion-view view-title="使用者資訊">
  <ion-content>
    <div class="list">
      <div class="item">
        Name: {{currentUser.displayName}}
      </div>
    </div>
    <button class="button button-full button-positive" ng-click="logout()">登出</button>
  </ion-content>
</ion-view>

然後修改 ProfileCtrl

...
.controller('ProfileCtrl', function($scope, $rootScope, Auth) {
  $scope.logout = function () {
    $rootScope.currentUser = null;
    window.localStorage.currentUser = null;
    Auth.$unauth();
  };
})
...

現在可以試試看登入和登出了。

下一章，簡易聊天室

Ionic Framework 教學 - 6. 簡易註冊

2015-11-19T13:05:00.001+08:00

承續上一章的應用，我們想來試做一個簡易聊天室，在做聊天室之前我們要先做使用者登入，對於使用者註冊和登入沒興趣的朋友可以跳至第八章。
要做 instant messaging 的話，我們必須要有一個即時同步訊息的後台，因為我們這個教學主要是做手機端的開發，所以我們就選用一些現有的即時通訊後台服務吧，比如說：

1. Layer: https://layer.com/
2. Quickblox: http://quickblox.com/
3. Firebase: https://www.firebase.com/
...

就決定是你了，Firebase，因為我印象中有 Angular-Fire 這種已經成熟的轉接器，可以讓 Firebase 跟 Ionic 中的 AngularJS 做良好的溝通，比較方便我們這次的教學。

Firebase 提供的登入方式基本上有一種簡是易登入，就是用帳號密碼，和另一種是社群登入，像是用 Facebook 的方式來登入，由於 Firebase 官網已經有一篇 Ionic + Facebook 登入的教學，所以這個部分就留給同學朋友們自己練習，我們來實作一個簡易的帳號密碼登入。

首先，我們要安裝 bower ，這是目前 Ionic 還在用的 web package management tool 。

$ npm install -g bower

然後安裝 firebase & angular-fire

$ bower install firebase angularfire

我們要在 www/index.html 中引用 app.js 之前的地方引入這個兩個 javascript library

...
<!-- Firebase -->
<script src="lib/firebase/firebase.js"></script>

<!-- OR Firebase from CDN -->
<script src="https://cdn.firebase.com/js/client/2.3.0/firebase.js"></script>

<!-- AngularFire -->
<script src="lib/angularfire/dist/angularfire.min.js"></script>

<!-- OR AngularFire from CDN -->
<script src="https://cdn.firebase.com/libs/angularfire/1.1.3/angularfire.min.js"></script>

<!-- your app's js -->
<script src="js/app.js"></script>
...

接下來到 Firebase 申請一個帳號，並且建立一個 Project，下面會用到你的 Project ID。
申請完之後請到進入你的 Project 管理頁面的 Login & Auth ，並且勾選 Enable Email & Password Authentication 。

然後我們新增一個 www/js/services.js

var firebaseUrl = "https://your-project-id.firebaseio.com/";
angular.module('starter.services', [])
.factory("FirebaseRef", function($firebaseAuth) {
  return new Firebase(firebaseUrl);
})
.factory("Auth", function($firebaseAuth) {
  var usersRef = new Firebase(firebaseUrl+"users");
  return $firebaseAuth(usersRef);
});

your-project-id 請使用你申請的 Project ID
這裡我們定義了 FirebaseRef 和 Auth 兩個工廠，他們分別指向 Firebase 的資料庫和使用者工具，等下會用到。
回到 www/index.html 引用 services.js

...
<script src="js/app.js"></script>
<script src="js/services.js"></script>
...

然後修改 app.js 中 starter app 的依賴關係，增加 firebase 和 starter.services

angular.module('starter', ['ionic', 'firebase', 'starter.services', 'starter.controllers'])

接下來我們做一個註冊頁面 www/templates/signup.html

<ion-view view-title="註冊">
  <ion-content class="padding">
    <div class="list">
      <label class="item item-input">
        <span class="input-label">Email</span>
        <input ng-model="signupData.email" type="text">
      </label>
      <label class="item item-input">
        <span class="input-label">密碼</span>
        <input ng-model="signupData.password" type="password">
      </label>
      <label class="item item-input">
        <span class="input-label">顯示名稱</span>
        <input ng-model="signupData.displayName" type="text">
      </label>
      <button class="button button-full button-positive" ng-click="createUser()">建立</button>
    </div>
  </ion-content>
</ion-view>

這裡看到我們使用了 signupData 和 createUser ，接下來我們來定義這兩個東西。
我們增加一個 Controller

...
.controller('SignupCtrl', function($scope, $ionicLoading, FirebaseRef, Auth) {

  $scope.signupData = {};

  $scope.createUser = function () {
    var signupData = $scope.signupData;

    if (signupData && signupData.email && signupData.password && signupData.displayName) {
      $ionicLoading.show({
        template: '註冊中...'
      });

      Auth.$createUser({
        email: signupData.email,
        password: signupData.password
      }).then(function (userData) {
        console.log(userData);
        alert("註冊成功!");
        // add user info
        FirebaseRef.child("users").child(userData.uid).set({
          displayName: signupData.displayName
        });
        $ionicLoading.hide();
      }).catch(function (error) {
        alert("Error: " + error);
        $ionicLoading.hide();
      });
    } else {
      alert("請填寫所有資料");
    }
  }
})
...

接著定義路徑，修改 app.js

...
.state('app.signup', {
  url: '/signup',
  views: {
    'menuContent': {
      templateUrl: 'templates/signup.html',
      controller: 'SignupCtrl'
    }
  }
})
...

然後加入 menu.html

...
<ion-item menu-close href="#/app/signup">
  Signup
</ion-item>
...

完成了，然後就可以測試看看註冊功能了，在 Firebase console 也可以看到註冊的使用者資料。

Ionic Framework 教學 - 5. 下載到手機上測試

2015-11-18T10:24:00.000+08:00

承上一章

1. 在網站上註冊一個帳號 https://apps.ionic.io/signup
2. 在手機上下載 Ionic View App
3. 下指令上傳 project

$ ionic upload

然後填入剛剛註冊的帳號，密碼在打的時候不會顯示是正常的。

4. 上傳後進入你在手機上下載下來就可以看到了，試試看。

下一章簡易註冊

Ionic Framework 教學 - 4. 修改樣式

2015-11-18T10:23:00.003+08:00

承上一章

我們之前都是用 Ionic 預設的樣式，但是這樣大家做出來的 App 豈不是都長得一樣？
我們要怎麼修改樣式呢？我們來修改剛剛做好的大師兄頁面 baseball.html 。
那個按鈕我們不喜歡，修改一下按鈕顏色和邊框，順便修改裡面的文字，我們把它做好做滿。

首先我們先啟用 sass

$ ionic setup sass

然後修改 baseball.html 增加 button-full 和 homerun 類

...
<button ui-sref="app.surprise"
    class="button button-positive button-full homerun icon-left ion-ios-baseball-outline">
    打擊
</button>
...

我們想要把這個按鈕的文字做的又粗又大
首先編輯 scss/ionic.app.scss

...

// Include all of Ionic
@import "www/lib/ionic/scss/ionic";

.homerun {
  font-size: 30px;
  font-weight: 900;
}

然後我們想要把所有按鈕的邊框加的很厚，是所有的按鈕喔，不是只有畫面中這一個，還包含了以後我們建立的按鈕，所以我們直接修改 Ionic 預設的 css
修改 www/lib/ionic/scss/_variables.scss

...
$button-border-width:             5px !default;
...

lib裡面的東西理論上很少修改，所以沒有自動更新，修改完 lib 裡面的東西我們要手動重新啟動 ionic

# ctrl + c to stop ionic server
$ ionic serve

重新整理頁面後就可以看到修改的東西都實現了。

下一章手機測試

Ionic Framework 教學 - 3. 製作一個簡單的頁面

2015-11-18T10:23:00.002+08:00

http://pic.ctitv.com/

承上一章
我們來做一個林智勝的打擊頁面。
首先在 www/templates/menu.html 頁面增加一個Baseball選項

<ion-side-menus enable-menu-with-back-views="false">
    <ion-side-menu-content>
      <ion-nav-bar class="bar-stable">
        <ion-nav-back-button>
        </ion-nav-back-button>

        <ion-nav-buttons side="left">
          <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
          </button>
        </ion-nav-buttons>
      </ion-nav-bar>
      <ion-nav-view name="menuContent"></ion-nav-view>
    </ion-side-menu-content>

    <ion-side-menu side="left">
      <ion-header-bar class="bar-stable">
        <h1 class="title">Left</h1>
      </ion-header-bar>
      <ion-content>
        <ion-list>
          <ion-item menu-close ng-click="login()">
            Login
          </ion-item>
          <ion-item menu-close href="#/app/search">
            Search
          </ion-item>
          <ion-item menu-close href="#/app/browse">
            Browse
          </ion-item>
          <ion-item menu-close href="#/app/playlists">
            Playlists
          </ion-item>
          <ion-item menu-close href="#/app/baseball">
            Baseball
          </ion-item>
        </ion-list>
      </ion-content>
    </ion-side-menu>
  </ion-side-menus>

這個時候 Baseball 點下去是沒有用的，我們要增加對應的頁面。
首先在 www/templates 資料夾中增加一個 baseball.html ，這個我們等下會用到。
然後編輯 www/js/controllers.js ，增加一個 Controller

...

.controller('PlaylistCtrl', function($scope, $stateParams) {
})
.controller('BaseballCtrl', function() {
})
;

注意 "..." 是代表省略的意思，不是真的程式碼，因為我盡量只寫有變動的部份，有些同學直接照抄是不行的。
分號要放在最後面，這個 BaseballCtrl 是用來處理有關 Baseball 的事件處理的，目前內容是空白，我們等下會用到。
然後編輯 www/js/app.js ，在 routing 路線圖裡面，增加一組 route ，他是告訴 App 遇到什麼狀態 state ，或是什麼 url 的情況，要交給哪個 Controller 來處理，並且指定顯示什麼 template 頁面。

...

.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider

  ...

  .state('app.single', {
    url: '/playlists/:playlistId',
    views: {
      'menuContent': {
        templateUrl: 'templates/playlist.html',
        controller: 'PlaylistCtrl'
      }
    }
  })
  .state('app.baseball', {
    url: '/baseball',
    views: {
      'menuContent': {
        templateUrl: 'templates/baseball.html',
        controller: 'BaseballCtrl'
      }
    }
  })
  ;
  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/app/playlists');
});

到這裡我們再試試看點擊 Baseball 頁籤，就會出現空白頁面，而且 header 的 title 是錯誤的，我們來修改他。
編輯 www/templates/baseball.html

  
<ion-view view-title="請大師兄翻譯翻譯">
  <ion-content>
    <img alt="" class="full-image" src="http://i.imgur.com/fnU7FHf.jpg?1" />
    <button class="button button-positive icon-left ion-ios-baseball-outline">
      打擊
    </button>
  </ion-content>
</ion-view>

我們修改了 header title, 增加了一張大師兄曼妙的身影，和一個打擊按鈕。
打擊下去會發生什麼事呢？
我們來增加下一個 View
首先增加 www/templates/surprise.html

<ion-view view-title="什麼叫驚喜">
  <ion-content>
    <img class="full-image" src="http://i.imgur.com/JpsC5xC.jpg?1" alt="">
  </ion-content>
</ion-view>

同樣的這個頁面也需要一個 Controller 和 route ，我們分別在 controllers.js 和 app.js 加上

  ...
  
  .controller('SurpriseCtrl', function() {
  })
  ;

  ...

  .state('app.surprise', {
    url: '/surprise',
    views: {
      'menuContent': {
        templateUrl: 'templates/surprise.html',
        controller: 'SurpriseCtrl'
      }
    }
  })
  ;

這樣完成之後，我們要怎麼讓打擊按鈕連到這個頁面呢？
第一種方法，我們剛剛已經知道了，在 menu.html 裡面，用 href 的方式連到對應的 url 。
我們來試試看第二種方式，用 ui-sref 連到對應的 state 。
我們修改 baseball.html

<ion-view view-title="請大師兄翻譯翻譯">
  <ion-content>
    <img class="full-image" src="http://i.imgur.com/fnU7FHf.jpg?1" alt="">
    <button ui-sref="app.surprise"
      class="button button-positive icon-left ion-ios-baseball-outline">
      打擊
    </button>
  </ion-content>
</ion-view>

現在試試看打擊按鈕了。
除了用 ur-sref 我們也可以在 Controller 中控制轉場，我們修改打擊按鈕

<button ng-click="hitTheBall()"
  class="homerun button button-positive button-full icon-left ion-ios-baseball-outline">
  打擊
</button>

讓他被點擊的時候呼叫 hitTheBall ，然後我們修改 Controller

.controller('BaseballCtrl', function($scope, $state) {
  $scope.hitTheBall = function() {
    $state.go('app.surprise');
  }
})

$scope 就是連接 View 中使用的變數，$state 就是用來使用 routing 的
可是這樣有什麼好處呢？有時候按鈕按下去有很多事情需要處理，處理完才能到下一個 state ，假設我們加一個 loading 的畫面
增加 templates/loading.html

<img class="full-image" src="http://i.imgur.com/AkbN5f0.jpg?1" alt="">

然後我們修改 BaseballCtrl

.controller('BaseballCtrl', function($scope, $state, $ionicLoading, $timeout) {
  $scope.hitTheBall = function() {
    $ionicLoading.show({
      templateUrl: 'templates/loading.html'
    });

    //wait for 2 seconds
    $timeout(function() {
      $state.go('app.surprise');
      $ionicLoading.hide();
    }, 2000);
    
  };
})

這樣你就大概知道一個頁面要怎麼做了，更多 Ionic 預設的元件你可以參考
http://ionicframework.com/docs/components/
現在發揮你的創意，換你來練習一下，比如說古巴教練說了一句話，然後發生了什麼事？
熟悉靜態頁面對於後面的課程很重要！

下一章樣式修改

Ionic Framework 教學 - 2. 建立一個測試App

2015-11-18T09:44:00.000+08:00

承上一章

接著我們來試著建立一個測試 App

  ## create mysidemenu based on sidemenu project

  $ ionic start mysidemenu sidemenu

  ## go to mysidemenu folder

  $ cd mysidemenu

  ## list files

  $ ls  # on mac
  $ dir  # on windows

  ## open mysidemenu folder, take a look at the folder structure

  $ open .  # on mac
  $ explorer .  # on windows

  ## start running my app
  ## run this command in mysidemenu folder

  $ ionic serve

  ## (and choose 'localhost')

  ## Then, navigate your browser to http://localhost:8100
  ## At this moment, you may want to install Chrome if you don't have one.
  ## https://www.google.com/chrome/browser/desktop/index.html

這樣，我們就從 sidemenu 這個樣板建立了一個 mysidemenu 的 App，接著你就可以打開瀏覽器來測試看看，在 Chrome 裡面，你可以使用 Command + Option + i 來開啟開發人員工具（Windows 則使用 F12），在 Network 頁籤你可以看到載入訊息，在 Console 頁籤裡你可以看到錯誤訊息（如果有的話），並且你可以用 Command + Shift + m 來模擬手機螢幕，在這裡你可能會需要重新整理頁面來套用適當的版面。

如果你還沒有一個很好的程式編輯器，我們可以推薦幾個適合入門又強大的編輯器給你

1. Sublime Text
http://www.sublimetext.com/2
2. Atom
https://atom.io/
3. Visual Code
https://www.visualstudio.com/zh-tw/products/code-vs.aspx

前往下一章- 製作一個靜態頁面

Ionic Framework 製作 Hybrid App - 1.準備環境

2015-11-15T07:58:00.000+08:00

blog.ionic.io

因為一些大學課程需要的關係製作了這一系列的教學，在你深入的看這個教學之前，我們希望你可以先上網了解 Native App, Web App, Hybrid App 等等開發方法的優點和缺點，選擇最適合你的 App 開發方式。

你至少需要具備一些基礎的 HTML 和 Javascript 的知識來跟著我們實作這一系列的教學。

準備環境

我們需要 Node.js, npm, Cordova, and Ionic

什麼是 Node.js 和 npm?

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. Node.js' package ecosystem, npm, is the largest ecosystem of open source libraries in the world.

more: https://nodejs.org/en/

什麼是 Cordova？

Mobile apps with HTML, CSS & JS. Target multiple platforms with one code base. Free and open source.

more: https://cordova.apache.org/

https://blog.codecentric.de/en/2014/11/ionic-angularjs-framework-on-the-rise/

什麼是 Ionic Framework?

Create mobile apps with the web technologies you love. Free and open source, Ionic offers a library of mobile-optimized HTML, CSS and JS components, gestures, and tools for building highly interactive apps. Built with Sass and optimized for AngularJS.

more: http://ionicframework.com/

前往第二章建立一個測試 App

docekr 基本指令

2015-06-01T21:58:00.001+08:00

boot2docker init|start|stop|upgrade 初始｜啟動｜停止｜更新 boot2docker 服務

docker search redis 搜尋 redis 相關映像

docker pull redis 下載 redis 映像

docker ps 列出容器

docker ps -l 列出最後一個執行的容器 (l stands for last)

docker run -d --name web centos ping 從 centos 映像跑一個名為 web 的容器，在背景執行

docker run -p 8000:5000 --name web centos python app.py 跑一個容器，映射一個主機的 2000 port 到容器的 5000 port

docker run -P --name web centos python app.py 跑一個容器，隨機映射一個主機的 49000~49900 port 到容器的 5000/tcp port

docker run -it centos bash 跑一個容器並且互動

docker exec -it web bash 進入方才建立的 web 容器互動

docker run -v /host/src/app:/container/src/app centos node app.js 跑一個容器並且對應主機的資料夾

docker run --rm ubuntu cname -a 跑一個容器執行完就刪掉

docker commit -m "comment" web my/web-image 提交一個映像

docker rm $(docker ps -a -q) 刪掉所有開啟的容器

順便推薦入門 gitbook http://philipzheng.gitbooks.io/docker_practice/content/

Convertible Note for Startup （新創公司可轉換債）

2015-04-25T13:52:00.000+08:00

雖然 Convertible Note（Bond）在台灣只有上市上櫃公司可以發行，但是我們還是來了解一下在國外新創公司如何使用它來融資。

相對於在公司早期階段，讓創辦人和天使投資人憑著想像力達成一個公司估值的共識來說，讓我們把公司估值交給下一輪投資（比如A輪投資）來決定吧，在下一輪投資的時候再依照估值把這些資金轉換成公司股票，只要保證早期投資人能拿到比下一輪投資人更好的 deal 就好了，不是很棒的想法嗎。

如何能夠保證使用 Convertible Note 的投資人比後進投資人拿到好的 deal 呢？其中一個方法是購買股份時候給的 discount ，這是一個類似早鳥票的概念，早買的風險高，所以附帶一個 discount ，假設A輪一股20元，給早期投資人打八折，變成只要16元就買到一股了。

所以投資人拿出資金投資，當下會買到多少股份不知道，要等到下一輪投資確定公司估值之後才知道，如果下一輪公司估值很低，早期投資人就會拿到很多股份，反之很少。

Convertible Note 原本大概是在這種想法下引入 Startup 的，這背後隱含幾個意義。

對創辦人來說：

你不用現在就說服投資人你的公司多有價值，他多沒眼光，用你之後的努力和市場反應來決勝負吧。
你一定要很努力，不然早期投資人的資金會轉換成一份很龐大的股權，其他投資人可能會望而卻步。
Convertible Note 的投資人在下一輪投資之前對你來說不是股東，當然也不是董事，而是債權人，你暫時還不用聽他的，不錯吧，當然你也不能反著刷投資人的毛，因為他很快就會變成你的股東，到時候你會知道誰才是格雷。
最重要的一點，快速，你最重要的就是你的產品和市場，你根本沒有時間搞其他事情，相比一般種子投資動輒幾十幾百頁的文件和請律師會計師的費用，Convertible Note 可能只要兩三頁就搞定了，因為他是債權關係，還不是股權關係。
如果不是用債務關係模式，而且下一輪投資買的是種子投資裡的舊股份，而不是純粹發行的新股份，你可能馬上面臨股票交易的稅務問題。

對投資人來說：

不用現在就說服創辦人你的 idea 和價值有多低，下一輪見真章。
希望創辦人能夠因此更努力，雖然希望花同樣的資金可以買到比較多的股份，但是買到一小部分的獨角獸還是遠比買到整隻雞好吧。
在公司清算的時候債權人是優先於其他股東的。
一樣的優點，快速。
Convertible Note 是債務，所以一樣是有利息的，但是不是很重要，沒有人投資新創公司是為了賺利息的。

對於大部分投資人來說，他們會希望能夠跟其他投資人炫耀說，『你知道嗎，關於某某千里馬公司，我八百年前就伯樂了。』但是如果這個千里馬在A輪就現形，而且投資人使用的是上述的 Convertible Note 你沒有辦法這麼說，因為你只會買到的千里馬公司很小一部分股份。

對此投資人發明了一個概念，叫做 Cap ，就是我最少最少也會保證買到多少股份，如果公司用我的資金一日千里，那就算公司估值超過某個『 Cap 價值』，我們也用那個先講好的那個 Cap 價值來計算我能買到的股份，除了少數像 Ron Conway 這種超級天使，YC 這種超級孵化器，一般投資人幾乎都要求要有 Cap。投資人真的都很狡猾聰明吧。（這個 Cap 通常使用 pre-money 來表示。）

這個 Cap 要如何設定呢，這就非常有趣了，因為通常就是根據你的估值的某個倍數來設定，再說一次，Cap 通常是根據你公司現有估值的某個倍數來設定的，聰明的讀者看到這裡有突破盲腸了嗎？ Convertible Note 加上了 Cap 的設計根本沒有解決一開始我們最想解決的創辦人和投資人要達成公司估值共識非常困難的問題。

不過也有投資人不會這樣想，與其錯過投資時機，他們會把 Cap 當做一種保護策略，只要談好 Discount ，Caluation Cap 的存在是避免損失太大。

另外要注意的就是很少見的 Early Exit ，這是指下一輪投資還沒發生，公司就被買走了，通常這種情況要給早期投資人更好的回報，在文件上要詳細寫明。

總結來說，我覺得光就 Convertible Note 的快速特性，就非常值得使用了，因為對新創公司來說最重要的資源就是時間。

C# async 和 await 控制基本教學

2015-03-28T18:04:00.001+08:00

.net 4.5 中 async 和 await 的語法已經有很大的進步，用以下範例說明

1. 一個UI event handler 呼叫並且等待 AccessTheWebAsync 方法
2. AccessTheWebAsync 建立 HttpClient 實例 client，呼叫 client 的 GetStringAsync 方法，並立即回傳一個 Task ，其中 TResult 在這裡是一個 string 。
3. GetStringAsync 可能要等一個網站回應並且下載內容，但是因為 GetStringAsync 立即回傳一個 Task 並且把控制權交還給 GetStringAsync 的呼叫者，就是 AccessTheWebAsync 。
4. AccessTheWebAsync 繼續同步執行 DoIndependentWork 。
5. DoIndependentWork 執行完後控制權交還給 AccessTheWebAsync。
6. AccessTheWebAsync 想要接著做下面的工作，必須取得 GetStringAsync 的 Task 的結果，所以這裡使用 await 來等待結果，這樣執行權會交還給 AccessTheWebAsync 的呼叫者，就是一開始的 UI event handler，這個時候會把 AccessTheWebAsync 的狀態儲存起來以便之後使用。（這裡我的理解是，只要在一個 code block 碰到 await 就會等待，即使有不需要結果也能執行的程序，也不會先執行，都會等）
7. 當 GetStringAsync 完成了工作， await 會從 getStringTask 裡面取得 Task 的結果，並傳給 urlContents 。
8. 回傳結果，並讓處於等待狀態的 UI event handler 繼續執行。

理解要點：

1. await 不會阻止該 async 的 thread 的執行，await 是把剩下的程式變成後續程式（continuation）並且把控制權交給 async 的 caller 。
2. async 和 await 不會產生新的 thread ，async 方法不需要 multithreading ，因為 async 方法不是跑在他自創的 thread ，而是跑在當前同步的情境中（ context ），只有在一個方法是執行狀態的時候才會花 CPU 時間。
3. 這種實作方法相對於 BackgroundWorker 的好處是語法簡單而且不用擔心 race condition。

Good video
http://channel9.msdn.com/Events/TechEd/NorthAmerica/2013/DEV-B319#fbid=

小重點：
async 可以搭配 void, Task, Task 來使用，如果方法沒有回傳值應該使用 async Task 而不是 async void ，async void 一般使用在最頂層的 event handler ，async void 相當於射後不理，讓其他的 UI 介面可以繼續回應使用者，其他情況應該避免使用 async void ，以免造成結果沒有產生就回傳了，或是 race condition等情況。
使用 async void 的時候，例外狀況要在呼叫的方法的內部處理，因為外部立即返回所以會離開外部try...catch的範圍。
另外 async 方法應該一路使用到底，比較好除錯。

SaaS Subscription business 的衡量指標

2015-03-25T17:36:00.000+08:00

SaaS Subscription business 遇到的問題

我的 business 能生存嗎？財務上是可行的嗎？
怎麼分辨什麼部分是好的？什麼部分是要改進的？
什麼財務槓桿或指標更應該被關注？
採取一些加速行動會造成什麼現金流影響？

SaaS 不同之處，商業目標是

獲得客戶
留住客戶
讓客戶付費

SaaS 的 P&L 和現金流

SaaS business 在一開始需要的付出比較大，從之後長期的關係慢慢回收投資。
當決定要加速的時候現金流反而會呈現負成長。
加速會造成公司短期的負債擴大，但是負債期縮短，損益兩平之後更快佔領市場。

所以假設一個 SaaS business 可以在早期降低風險，就可以增加投資擴大短期負債，因為 SaaS 類型的服務在充分競爭之後往往是贏者全拿的情況。

Unit Economics 我賺到客戶的錢會大於我拿到客戶所需的成本嗎？

LTV: Lifetime Value of a typical customer

CAC: Cost to Acquire a typical Customer

Unit Economics: LTV:CAC ratio

SaaS business 要存活的經驗法則:

LTV > 3 x CAC
Months to recover CAC < 12 months

一般大型公司如電信業者或是信用卡公司可以承受比較長的CAC，比較優良的公司最好能夠把 CAC 控制在 5-7 months。

客戶保留率

MRR: Monthly Recurring Revenue

ARR: Annual Recurring Revenue

Cohort: A group of customers joined in a particular month, e.g. January cohort, to see how they decline or grow as a group.
Customer Churn Rate: Number of customers lost last month(quarter)/starting customers last month(quarter)

Net MRR = New MRR + Expansion MRR(customers expand their subscription) - Churned MRR(customers cancelled their subscription)

在客戶規模很小的時候 churn rate 不會是一個重要指標，有點類似複利的概念，只是 churn rate 指的是流失率，在客戶規模大的時候是重要指標。根據各種客戶付款商品的不同，Revenue Churn 和 Customer Churn 要分開追蹤。

ARPA: Average Revenue per Account per month

為何產生 Churn ？

未達到客戶的預期。
產品黏著度低，客戶不需要長期使用。
客戶使用方式不完全、不同預期，或沒有使用到產品有黏著度的地方。
產品可能賣給非典型客戶。（所以資料分析的時候不同客戶要分群分析。）
客戶陣亡了。
沒有使用 pricing scheme 來使客戶續訂。

還有一堆內容... 來自
http://www.forentrepreneurs.com/saas-metrics-2/

創業家的用語解釋，教你聽懂創業家在說什麼。

2015-03-06T03:17:00.000+08:00

在 TechCrunch 看到一篇有趣的文章，教你聽懂創業家的用語，翻譯幾個有趣的。

Failure（創業失敗）

一個最近在失業圈搞的好像很冠冕堂皇值得慶祝的事情。

Pivot（創業轉型）

同上。

SAAS （軟體服務）

燒錢。

Pre-Money Valuation （投資前估值）

一個你憑空捏造的數字。

Post-Money Valuation （投資後估值）

一個你和投資人一起憑空捏造的數字，含一些你瞬間就會燒完的現金。

雇用目的收購（Acqui-hire）

你們團隊的成員一流，但是你們在做的點子實在爛透了，好了別做了，來大公司吧。

我的工作是負責公共關係。（"I work in PR"）

我知道一兩個記者的Email。

我是負責商業的部分。（"I'm a business guy."）

我來搭其他創業夥伴的便車。

我是企業關鍵成長駭客。（Growth Hacker）

我是做行銷或銷售方面的，但是我希望我的職稱有電腦高手的感覺。

我是一個連續創業家。（"I'm a serial entrepreneur." ）

我曾經有過兩個創業想法，全都失敗了。

我們做的很棒。（"We're doing great."）

我們做的很鳥。

我們的現金流是正的（Cashflow positive）

有個使用者給了我們一元。

我們每週成長五百個百分點。（"We're growing 500 percent week-over-week" ）

上週我們有一個使用者，這週我們有六個。

我們現在沒有在募資。（"We're not currently raising"）

我們現在非常需要募資。

我們是一個以設計為核心的團隊。（"We're a design-centric organization"）

我們不會寫程式。

我們看到了很棒的毛利成長，所以我們正在加碼投資我們強健的軟體服務事業。（"We're seeing great gross margins, and so are investing in growth given our strong, SaaS unit-economics."）

我們入不敷出。

... 不僅如此，我們還積極的尋找額外的資本來加大我們成長領先的幅度。（"... and we are actively seeking additional capital to power our sector-leading growth."）

我們快把錢燒光了，請給我們錢。

我們正在大開殺戒！（"We're Crushing It!"）

我們的夢想和投資人的錢都被我們殺死的很徹底！

以上內容有少數加上個人的想法方便翻譯，比如"失業圈"是我自己硬湊的，原文是把 Silicon Valley 改寫為 Silly Valley ，比較有意思。原文： http://techcrunch.com/2014/12/15/how-to-speak-startup/

Subscription / Recurring Payment Gateway 筆記

2015-02-28T00:36:00.000+08:00

What is a Recurring Billing service?

Charging someone’s credit card and making sure that the money ends up in your account is what Payment Gateways and Merchant Accounts are all about, but what about handling a subscription that needs to get charged every month? That’s where the subscription and recurring billing systems come in. These services have a credit card vault, and a list of recurring charges, and it’s their job to make sure that every month the right people get charged the right amount.

Some services, like Recurly, focus entirely on this problem, and were built on top of other payment gateways and merchant accounts. Meanwhile, payment gateways have evolved and launched simple recurring billing modules on top of their payment gateways.

While some payment gateways have existed for decades, the recurring billing space is not nearly as old. The companies that focus on recurring billing as their core have developed a bunch of features to make your life as a software developer easier, such as sending emails to your customers with their invoices, pro-rating upgrades and downgrades, and managing dunning (i.e. handling when a credit card has expired or rejected a charge).

What is a Payment Gateway?

Payment Gateways are the backbone of online payments and e-commerce of all kinds. If someone is taking your credit card online, they are probably using a payment gateway. It is these guys that connect to all the credit card companies like VISA, Mastercard and AMEX to make it easy to collect any kind of credit card you want without having to submit to Payment Card Industry (PCI) compliance.

What is a Merchant Account?

Once a credit card is charged, the money needs to go somewhere. That’s where a merchant account comes in. A merchant account is a type of bank account that allows businesses to accept money from payment cards. If you want to accept credit cards online, you will need a merchant account. You might not realize this because some payment gateways will provide you with a merchant account behind the scenes, but there will always be a merchant account in the mix.

So, How do I pick?

Here are three questions that will help you narrow down your search.

Question 1 – What do your payments look like?

Are you doing simple plan-based billing, or are you going to be charging for variable usage? If you’re building something complicated, then you probably want to look at a company that focuses on SaaS as their primary business instead of a “Hybrid” payment gateway. If you’re doing simple plan-based billing, then you’ll be pleasantly surprised at how quick and easy it can be to configure some of the Hybrid gateways to do just that.

Question 2 – Where are you?

Some providers are only available in a select few countries. For example, Stripe is only available in the USA and Canada, while others, such as Paymill, focus on the European market. Payment processing law is a complicated, region-dependent beast, so you want to make sure that you have the right mix of payment gateway and management layer to help you navigate the legal maze for where your company is headquartered.

Question 3 – How much can you spend?

Most hybrid gateways don’t charge extra for their subscription layer. That’s great news if you’re doing something simple, but if you need the power of the subscription-focused services, you’re going to have to pay extra. Most companies have a mix of monthly fee plus transaction fee, and don’t charge anything to get started. That said, there are some companies, like Zuora, that charge a five-figure price tag to get set up and don’t work with companies under $1M in yearly revenue.

Read more: http://www.referralsaasquatch.com/how-to-pick-a-recurring-billing-and-payment-provider/

Keys to consider

Payment Gateway Support: Does the provider offer payment gateway support in your country? Do you have a current account with one of their gateway providers? Do they offer their own payment gateway? Some providers offer their recurring billing, gateway services, and merchant account all in one. Others offer combinations of the two, and still others offer just the recurring billing service.
Payment Methods: Depending on your business type, you may want to accept different types of payment methods. This could be credit card payments, EFT, ACH, PayPal, checks, purchase orders, wire transfers, etc.
Credit Card Data Portability: A good recurring billing provider won't hold your customer credit card data hostage. Look for a provider that will transfer your credit card data to another PCI compliant vendor, should you ever leave their services. Bonus points if they don't charge you for it.
Physical Goods: Most recurring billing providers have core functionality around electronic subscriptions. If you're shipping physical goods, make sure your recurring billing provider can handle the collection of and reporting on shipping information
Reporting: Does the billing provider share reports necessary for your business?
Customer Communication: Does the billing provider handle automated communication to your customer, or will you need another provider for this functionality?
Dunning Management: Does the billing provider follow up automatically on failing transactions? How often? Is it configurable?
Taxes: Based on your location, you may want a billing provider that handles sales tax for your purchases
Multi-currency: Based on your customer pool, you may want to offer your product in multiple currencies. Does you billing provider support each currency you'd like to list?
Support: What sort of support model does the billing provider have for your company? Do you need a dedicated account representative? Phone support? 24x7 support?
Integration: Billing providers can vary their integrations from the very simple (A checkout form hosted on their site) to full API integrations on your site. Does the billing provider host the type of integration you're looking for? Do they offer integration assistance (Typically at a professional services fee)
Billing Model: This is a big one. Does the billing provider have billing periods (daily, monthly, quarterly, yearly) to fit your billing needs? Do you have any unusual billing requirements like billing on the 3rd Tuesday of every other month? Does the product support free trials, setup fees, multiple subscriptions, additional products, gift subscriptions, pausing subscriptions, upgrading/downgrading plans... etc.

http://www.quora.com/Which-is-better-Chargify-Recurly-ChargeBee-or-Spreedly

1. PayPal has partnered with Aria Systems to provide subscription/recurring billing services (see PayPal Subscription+). You can use your own merchant account or PayPal
2. Recurly: very nice subscription billing platform, but fairly expensive ($29/mo + $0.20/transaction on top of your merchant fees) - requires your own merchant account
3. Chargify: good features and pricing (they bill by customer, not transaction) - requires your own merchant account
4. Cheddar Getter: offers a free plan, bills by customer - requires your own merchant account
5. Spreedly: $19/mo + $0.20/transaction - supports LOTS of different gateways including international
6. Zuora: If you have lots of money to invest, they could be a good fit - seem to be catering more to enterprise payment processing not SMB
(Jason Read)

Read more: http://www.quora.com/What-is-the-best-checkout-tool-for-recurring-payments

My personal recommendation for scalable recurring payments is to get a merchant account through FeeFighters.com, use the (usually free/included) default gateway of the account provider (usually Authorize.net), and use the (rather elegant) Recurly.com APIs to handle all the recurring stuff. Just make sure that you're using Recurly's vault and not using Auth.net's CIM so you have full data portability if/when the time comes ( http://blog.recurly.com/2010/05/... ) .

Paypal

If you're building a side project or something less ambitious, PayPal's recurring payments solution is certainly good enough.
(Sachin Agarwal)
Also: http://sachinagarwal.com/introduction-to-online-payments-tldr-its-a-to
Read more: http://www.quora.com/What-is-the-best-checkout-tool-for-recurring-payments

https://www.paypal.com/us/cgi-bin/webscr?cmd=xpt/Marketing/general/RecurringPaymentFAQs-outside
5. Can a customer without a PayPal account still pay for recurring payments with a credit card?
Yes, if you offer both PayPal Payments Pro and recurring payments.

But PayPal Payments Pro is only available in US, UK, Canada

Lack of dunning management

Google Trends

http://www.google.com.tw/trends/explore?q=aria%2C+chargebee%2C+chargify%2C+cheddargetter%2C+fusebill%2C+metanga%2C+monexa%2C+recurly%2C+sassy%2C+spreedly%2C+stripe%2C+subscriptionbridage%2C+tract%2C+vindicia%2C+wepay%2C+zuora#q=chargebee%2C%20chargify%2C%20recurly%2C%20%2Fm%2F0hrfb59&cmpt=q&tz=

Recurly

https://recurly.com/gateways/

Chargify

https://www.chargify.com/payment-gateways/

Chargebee

https://www.chargebee.com/partners.html

Spreedly

https://spreedly.com/gateways

Zuora

for Enterprise

Web Authentication in Chrome extension 外掛環境的網站授權筆記

2015-02-16T22:53:00.001+08:00

這篇筆記主要紀錄在 Google Chrome Extension 環境如何取得使用者 identity 以及使用Google Oauth2 授權。

chrome.identity

在 Google Chrome 想要拿到一個使用者身分最基本的情況只要使用 chrome.identity 就可以了，可以取得 access_token 後丟給 server 取得身分。

1. chrome.identity.getAuthToken 取得 access_token ，這個 token 會被 cache 在 Chrome identity API裡面一陣子，第二次之後取得會很快，相對需要手動 removeCachedAuthToken 來刪除。scope 則是在 plugin 的 manifest.json 中定義。

2. 取得 access_token 後可以在 server 或是 client 使用 'Authorization' header 向 Google API URI 要資料。

在 background page 呼叫 chrome.identity 可以指定 interactive 和登入身分，但是這個登入身分和類似API中的 login_hint 不同，chrome.identity 限制這個身分是當下 Chrome Browser 使用者的身分之一，而且使用者必須要在登入狀態，跟我們常看到的一個頁面給使用者選擇要登入不同身分登入的情況不同，開發者即使知道欲取得的 user email or user ID 也無法提示使用者這個已知，使用者也無法選擇。

Web Server Oauth Process

另一個方法使用 Google Oauth2 的 web process ，引導使用者跳轉或是開啟一個授權頁面，使用者授權後 Google 會把一組 code 丟給 redirect_uri (你的server)，然後再用這組 code 去取得 access_token and/or refresh_token ，這個方法使用者就可以選擇登入的帳號了，如果知道使用者的 email 還可以先提示 login_hint ，這樣使用者可以少一個選帳號的動作，使用者如果授權過同樣的 scope 這個 interactive 過程會直接帶過，而且一個 Chrome Browser 可以取得多組 Google Account 身分和授權，不受限制。

Server 知道身分之後要怎麼給 client 呢？可以透過 session 讓 client 知道使用者登入了等一些資訊，有點被動，還是要用 long polling / websocket 等牛刀，另外 background page 是沒有存 web cookie 的獨立環境，授權流程如果放進 web page 裡面，還要考慮 Content Security Policy ，我就把外掛裝在 business Gmail 的時候可以運作，但是一登入 @gmail.com 的 Gmail 頁面就噴 Content Security Policy Error 了，同樣是 Gmail 介面沒想到 Content Security Policy 官版的比較嚴格。

Mix JSONP Authentication Process

我的網站沒有提供 Google Account 登入，因為估計目標市場只有很少使用人使用 Google Account for work。我在網站提供一組 JSONP 讓，Chrome Extension 來抓，這個抓授權的 javascript 只能放在 content script 裡面，不能放在 web page 或 background page ， web page 可能有 http/https 限制、Content Security Policy。Google Oauth則在需要取得授權的時候才跑 Web Server Oauth Process.

manifest.json 裡面的 content_security_policy 是限制開發者自帶的 script 的環境，如果要配合 gmail.js 把 script 都丟進 web page ，那就要受到 web page 的環境的(web owner 決定) policy 管制。

Code Signing Certificate (from CA) Steps and trouble shooting

2014-11-21T14:36:00.000+08:00

Steps:

Apply certificate from comodo
From Firefox certificate manager, select the certificate and "export all".
Save the exported certificate as comodo.p12
The .p12 and .pfx have the same format, so just change the extension to .pfx, (comodo.pfx).
Import comodo.pfx with chaining info, this will be the certificate for signing ClickOnce manifest
Timestamp server, e.g. http://timestamp.verisign.com/scripts/timstamp.dll
Clean up related certificate in certmgr
Import certificate with "Mark this key as exportable"
From certmgr, personal certificate, select "All Tasks" > "Export.."
Select "Yes, export the private key"
In personal information exchange, un-check "Include all certificates in the certification if possible".
Export this key to be forAssemblies.pfx
This key may contain KeySpec=1, which is incorrect for code signing.
Open Visual Studio command prompt (VS2012 ARM Cross tools Command Prompt in VS2013), because we need to use certutil
In command prompt, navigate to the forAssemblies.pfx location
certutil -importPFX -user forAssemblies.pfx AT_SIGNATURE
This command will import the pfx with KeySpec=2
This key is ready for signing assemblies

Trouble shooting: "An attempt was made to reference a token that does not exist."

This means the key for signing assembly is incorrect.

Please read http://msdn.microsoft.com/en-us/library/aa730868%28v=vs.80%29.aspx

This is a general error message. There are many possible errors.

Possible solutions:

The key contains chaining information. Import it with private key and export it without chaining info again.
Change KeySpec of the key to 2
1. Read http://blogs.msdn.com/b/andrekl/archive/2008/01/08/strong-name-signing-in-visual-studio-2005-requires-keyspec-2-at-signature.aspx
2. Using the "Certifiates" MMC export the existing keyset (KeySpec=1) to a PFX file.
  Note:Please backup this file to a safe location and test if the file can be imported ok on another machine if you really want to play it safe!
3. Delete the existing certificate from the crypto store (stlll using the MMC).
4. Open a CMD prompt.
5. import the PFX file using this command:
6. certutil -importPFX -user AT_SIGNATURE
7. Enter the passphrase for the pfx when prompted.
8. You now should have a keyset/Cert with KeySpec=2. If needed you can now export this into another PFX file using the MMC again.

Trouble shooting: "Cannot import the following key file: my.pfx. The key file may be password protected. To correct this, try to import the certificate again or manually install the certificate to the Strong Name CSP with the following key container name: VS_KEY_605BB970F096DC5F"

Possible solutions:

sn this key to container
1. In command prompt, navigate to the AssemblyNoChaining.pfx location
2. "C:\Program Files (x86)\Microsoft SDKs\Windows\v8.0A\bin\N
  ETFX 4.0 Tools\x64\sn.exe" -d VS_KEY_605BB970F096DC5F
3. "C:\Program Files (x86)\Microsoft SDKs\Windows\v8.0A\bin\N
  ETFX 4.0 Tools\x64\sn.exe" -i forAssemblyNoChaining.pfx VS_KEY_605BB970F096DC5F
Change KeySpec of the key to 2 as above

reference: https://stackoverflow.com/questions/2815366/cannot-import-the-keyfile-blah-pfx-error-the-keyfile-may-be-password-protec/14644793#14644793

Office Outlook Customization 開發筆記(3) Signing & Publishing

2014-11-02T08:11:00.000+08:00

開發最後卡最久的地方是 Signing & Publishing

在 msdn 上說我們可以使用一個 test Certificate 來 sign 我們的 binary / assembly / manifest ，這裡講的 Certificate 是指 Code Signing Certificate 。

但是實際上，使用 test Certificate 是非常看情況的，在我所選擇使用的環境和狀況下( .net framework 4.0, VSTO, ClickOnce )，使用 test Certificate 在安裝 manifest (.vsto)時會引發 System.Security.SecurityException，並沒有讓使用者決定要不要安裝這個不受信任的 Publisher 的軟體。

這種情況研究之後可能有幾種解法，第一個是使用 Intranet 來安裝，Windows 基本上是相信區網的，但是這樣完全失去選用 ClickOnce 的意義，不考慮。第二種方法，乖乖去 CA 購買一個 Certificate，一個一年大約 100美金有找，也有特殊用途的到 500 美金。缺點是，這種第三方購買憑證的期限一定很短，期限到了 ClickOnce 就不會自動更新了，要用特別的方法來更新憑證，我們小戶也不可能一次花個幾百美金買個三四年期的憑證，對比 self-signed Certificate 的使用期限是自己打上去的，可以寫個五十年，五十年不用更換憑證。第三種方法是讓使用者先安裝我們的 test Certificate ，讓這個憑證變成已經信任的，甚至可以用 Group Policy 幫整個公司的電腦裝憑證，缺點是這種大客戶公司的 IT 大概不會讓我這樣搞。第四種方法是安裝前修改客戶電腦的 prompt level ，至少讓客戶有辦法選擇要不要安裝這個可疑的軟體，那至少要有管理員權限，這讓安裝步驟變得麻煩。

結果我研究了兩三天之後還是乖乖的去 CA 買了一個 Certificate ...

Office Outlook Customization 開發筆記(2)

2014-10-25T03:38:00.001+08:00

我是從 Windows 7 32bit Outlook 2010 .Net Framework 4.5 開始開發，使用 Visual Studio 2013。

接下來要選擇使用 VBA 或 VSTO ，兩個比較可以參考這裡，因為我會用到 .Net Framework 的一些程式庫，所以決定用 VSTO 來開發，語言使用 C#。

然後最好先去下載 Outlook 2010 範例來閱讀和修改，沒看過範例很難起手。

開發上要注意的是，Application, Explorer, Inspector 等的 instance 是可以有多個並存的，因為使用者可以開多個 Outlook、多個郵件視窗，所以各個 instance 要蒐集起來處理，可以自製類別和類別容器來把這些 instance 包起來。

特別要講的是 UI 的開發，我選 Custom Ribbon UI 來開發，比較簡單的方法是先用 Ribbon UI Designer 拉出大概想要的介面，再匯出成 XML 的格式來修改，兩種設計方式無法並存，最後決定用 Ribbon XML ，因為屬性要修改比較方便，缺點是要查 msdn 才知道屬性名稱。

載入客製化 UI 的方法是定義 GetCustomUI(string ribbonID) ，依照目前的情境（Explorer, Mail.Read, Mail.Compose, ....）來決定目前要載入哪個搭配的 Custom UI 的 XML 或 Designer UI 檔案。

互動原理是在 Ribbon XML 中指定 Callback 函式名稱，然後在程式中定義 Callback 函式的處理方式，參考這裡。

預設的 Ribbon UI template 會有完整的 customUI > ribbon > tabs > tab> group 的結構，可以讓一個外掛擁有很大的空間，也會自動做 responsive layout ，但是如果我們只是想要改造某個內建的功能，我們可以指定 ControlId / OfficeId 或是 XML 的 idMso 來指定修改某個內建的部份（參考這裡），至於內建 ID 的列表可以從這裡下載。

Ribbon UI 的優點是他是自適應的，在 Ribbon UI XML 中，如果要幫按鈕加上自定的 icon ，可以使用 getImage 方法，然後在 C# 檔案中回傳 BitMap ，路徑範例 MyAddin1.Properties.Resources.myIcon ，不加附檔名。圖片檔可以從 Project 的 Properties 加入。

Office Outlook Customization 開發筆記(3) Signing & Publishing

Office Outlook Customization 開發筆記(1)

2014-10-24T21:04:00.000+08:00

嘗試 Outlook 的開發，這次要做一個 Outlook 小工具，記錄一下開發過程。

首先要了解環境，建議最好對於客戶或使用者電腦的環境有一定的認知再開始比較好。

可能的變異數是：

1. 作業系統：不同的作業系統很有可能要跑不同的 build ，也要注意哪些系統微軟已經停止支援，還有雖然 Mac OS 也有 Office ，但是並沒有開發工具可以讓開發者客製化，最接近的情況就是用 AppleScript 做一些自動化的工作，但是可開發功能低很多，也不能改變使用者介面。

2. CPU位元：我只有一台 32bit 老電腦，無法開發 64bit CPU 的產品，反之 64bit 可以開發 64bit & 32bit 的。

3. .Net Framework 版本：基本上個版本無法向下相容之前的版本，除了 .Net Framework 3.5 包含 3.0 和 2.5 ，還有 4.5 和 4.0 可以相容。如果知道客戶用的版本可以針對該版本開發，或是安裝的時候幫他裝相應的版本，但此時也要考慮到，比較新的版本的 .Net Framework 是無法安裝在比較舊的作業系統上的。

4. Outlook：2013, 2010, 2007, 2003 不同版本我是分不同專案分開開發的，沒有看到好方法可以放在同一個專案開發。

5. 連線環境：跟部屬方式有關，要看客戶的使用環境是否可以連上網路，來選擇不同的方式打包讓客戶安裝。

由此可知，可能的排列組合太多了，非常痛苦，所以最好要對目標用戶的使用環境先了解一下，有些客戶不會看環境，可以丟個 whatsmyos.com 請客戶看一下，.Net Framework就要自己想辦法包了。

開發微軟的產品會需要很多 license ，自己全買下來會很貴，可以看看 express 版本，校友版本，或是申請 Microsoft BizSpark。

Office Outlook Customization 開發筆記(2)

Realtime Scalable Data Analysis with Redis

2014-06-20T10:38:00.000+08:00

Redis 一般用來做記憶體層的 key-value cache store，一般 data analysis 也不會使用 Redis 當儲存，因為 Redis 跑在單一主機上的情況記憶體容量有限，不方便橫向擴展，Redis cluster 有希望解決橫向擴展的問題，但是目前還在 Beta 階段，不適合放到我們目前這個穩定性優先的project 裡面。

選擇使用 Redis 的主要原因是，Redis 速度非常快，可以做非巨量資料的 realtime 分析，資料結構比 memcached 彈性，我們的專案不需要分析超過一個禮拜以上的資料，只是做重點分析，做沒有特定目的的儲存和分析我們使用其他的資料庫來做，還有我們的專案索需要儲存的資料結構 Redis 都有支援，資料可以自然揮發（expire），另外最最最重要的是 AWS ElastiCache 有直接支援，省掉了 server 架構的時間和維護成本。這樣最後只剩下一個問題，就是橫向擴展問題。

Consistent Hashing

Consistent Hashing 可以用來解決 key-value datastore 擴展的時候資料搬遷最小化的問題，避免因為使用傳統的 hash 方式造成伺服器擴展的時候，短時間極大量的資料都要往資料的源頭（底層）訪問造成系統失靈。Consistent Hashing 同時也是 DynamoDB 和 Riak 等資料庫重要的核心概念。

我們也可以用 Consistent Hash Ring 來做記憶體陣列來增加橫向擴展的能力，同時兼具擴展時資料最小搬遷的優點，但是有一個問題，使用 Consistent Hash 的資料必須是 key - value 對應，一定要有 key 才能做 hash 對吧，但是 Redis 中許多指令是不對應 key 的，比如說 keys 列出所有的 key ，必須要自己做 broadcast ，還有許多指令根本會失效的，像是 sort ，這種對全部資料演算的都不能用，所以部分索引資料還是要存在特定的 server 上，這樣又有一個問題，就是SPOF(single point of failure) ，對於這樣的情況，我們目前的解法仍然是廣播指令到一定數量的 server 上，也就是應用層的 replication server ，這些 replication server 其實也同樣位於 Consistent Hash Ring 中，這樣會產生另外一個問題，就是資料在 replication servers 中有可能不一致，我們目前的解決方式是 fail-retry-verify 的方式來使資料最終會一致，也因為有可能發生時間差的問題，所以我們仍然無法直接使用這個方法來把 Redis 建構成我們主要的 database，但是用來做重點資料分析，這樣已經綽綽有餘了。

DynamoDB python 支援現況

2014-02-15T17:20:00.003+08:00

用了幾天 DynamoDB （with python boto）下來實在是很不順，最主要原因是版本支援凌亂，現在 python boto v2.25 總共有兩個 module, boto.dynamodb, boto.dynamodb2 ，兩個版本的比較可以看這裡，然後每個版本又分兩個 layer, layer1, layer2，layer2 是 high level api 而且並不是只用最高層最新版的就好了，新版的很多細部功能還沒支援，用底層 api 又會增加很多負擔，比如說像 ACID 更新一個 entity，支援度比較好的是 layer1.update_item，用 layer2 反而要自己建立 request json 內容，另外像是批次抓資料，目前是 boto.dynamodb 的支援度比 boto.dynamodb2 來的好，可以限制抓取特定的 property ，但是要用不同 library 又相似的功能相似的功能名稱造成程式不好閱讀，有時候看到一個 table object 卻不知道是哪一個版本的哪一層的 table 。

Azure Table Development round 1

2014-02-07T14:40:00.000+08:00

在 Azure 開發相當的緩慢，除了趨近於零的 Community Support 和 python 相關的文件，許多錯誤標準回傳值也讓人摸不著頭緒，比如 Azure Table 很喜歡回傳類似這種 Error
不清楚的文件加上這種 One of the request inputs is not valid. 模糊的錯誤訊息，簡直垂頭喪氣

SushiWen's Blog

Ionic Framework 教學 - 11. App 上架

Ionic Framework 教學 - 10. 使用 Cordova Plugin

Ionic Framework 教學 - 9. 簡易聊天室設定

Ionic Framework 教學 - 8. 簡易聊天室

Ionic Framework 教學 - 7. 簡易登入和登出

Ionic Framework 教學 - 6. 簡易註冊

Ionic Framework 教學 - 5. 下載到手機上測試

Ionic Framework 教學 - 4. 修改樣式

Ionic Framework 教學 - 3. 製作一個簡單的頁面

Ionic Framework 教學 - 2. 建立一個測試App

Ionic Framework 製作 Hybrid App - 1.準備環境

準備環境

什麼是 Node.js 和 npm?

什麼是 Cordova？

docekr 基本指令

Convertible Note for Startup （新創公司可轉換債）

C# async 和 await 控制基本教學

理解要點：

SaaS Subscription business 的衡量指標

SaaS Subscription business 遇到的問題

SaaS 不同之處，商業目標是

SaaS 的 P&L 和現金流

Unit Economics 我賺到客戶的錢會大於我拿到客戶所需的成本嗎？

SaaS business 要存活的經驗法則:

客戶保留率

為何產生 Churn ？

創業家的用語解釋，教你聽懂創業家在說什麼。

Failure（創業失敗）

Pivot（創業轉型）

SAAS （軟體服務）

Pre-Money Valuation （投資前估值）

Post-Money Valuation （投資後估值）

雇用目的收購（Acqui-hire）

我的工作是負責公共關係。（"I work in PR"）

我是負責商業的部分。（"I'm a business guy."）

我是企業關鍵成長駭客。（Growth Hacker）

我是一個連續創業家。（"I'm a serial entrepreneur." ）

我們做的很棒。 （"We're doing great."）

我們的現金流是正的（Cashflow positive）

我們每週成長五百個百分點。（"We're growing 500 percent week-over-week" ）

我們現在沒有在募資。（"We're not currently raising"）

我們是一個以設計為核心的團隊。（"We're a design-centric organization"）

我們看到了很棒的毛利成長，所以我們正在加碼投資我們強健的軟體服務事業。（"We're seeing great gross margins, and so are investing in growth given our strong, SaaS unit-economics."）

... 不僅如此，我們還積極的尋找額外的資本來加大我們成長領先的幅度。 （"... and we are actively seeking additional capital to power our sector-leading growth."）

我們正在大開殺戒！（"We're Crushing It!"）

Subscription / Recurring Payment Gateway 筆記

What is a Recurring Billing service?

What is a Payment Gateway?

What is a Merchant Account?

So, How do I pick?

Question 1 – What do your payments look like?

Question 2 – Where are you?

Question 3 – How much can you spend?

Keys to consider

Paypal

Google Trends

Recurly

Chargify

Chargebee

Spreedly

Zuora

Web Authentication in Chrome extension 外掛環境的網站授權筆記

chrome.identity

Web Server Oauth Process

Mix JSONP Authentication Process

Code Signing Certificate (from CA) Steps and trouble shooting

Office Outlook Customization 開發筆記(3) Signing & Publishing

Office Outlook Customization 開發筆記(2)

Office Outlook Customization 開發筆記(1)

Realtime Scalable Data Analysis with Redis

DynamoDB python 支援現況

Azure Table Development round 1

我們做的很棒。（"We're doing great."）

... 不僅如此，我們還積極的尋找額外的資本來加大我們成長領先的幅度。（"... and we are actively seeking additional capital to power our sector-leading growth."）