[FCM] firebase常見q&a

1. Do I have to unsubscribe the old token and subscribe the new token to topics?

AFAIK, you don't have to unsubscribe the old token, since it will be discarded by FCM itself. For the new token, yes, you'll have to subscribe it to the topic you need. The usual thing is done (in Android) by having subscribeToTopic() in onTokenRefreshed().

---

2. Do I have to remove the old token and add the new token to device groups?

Yes. You have to handle the mapping/relationships for Device Group Messaging. See my answer here. This is different from topics. The token will be invalidated, but will be kept as part of the list of registration tokens for the corresponding registration key.

It's why there's a possibility to receive a NotRegistred error on one of the tokens if you send to Device Group. :)

---

3. Is it possible to get information about device groups/topics for a token?

For Device Group Messaging (same with #2), the developer (you) have to manage these details yourself. For topics, you can use the InstanceID API. Specifically, set details parameter to true:

[optional] boolean details: set this query parameter to true to get available IID token details, including connection information and FCM or GCM topic subscription information (if any) for the device associated with this token. When not specified, defaults to false.

---

4. Can I add a token to a device group more than once?

Ahmm. Yes. Do you mean the same token? If so, I haven't tried it yet. Might as well do some checking on the client side before adding.

---

5. Can I subscribe a token to a topic more than once?

If you mean re-subscribing, then yes. If you mean duplicate request to subscribe, I think the result would still be a success. No changes in behavior though.

---

6. Will multiple subscriptions/additions of the same token result in receiving duplicate messages?

Tested it out. You won't receive duplicate messages for both duplicate topic subscriptions and adding the same token to a device group. It seems that FCM ignores the request to subscribe/add a Registration token if it's already subscribed/added to a device group.

[NPM] 更新套件或單一套件版本

#更新所有套件(這樣跑很可怕XD)

npm update 

#更新單一套件

npm install express-validator@5.3.1 --save-dev

解決無法bitbucket.org連線的問題

記錄無法bitbucket連線的問題

Q: Could not resolve hostname bitbucket.org: Temporary failure in name resolution
A:
sudo vim /etc/resolv.conf
nameserver 8.8.8.8
search bitbucket.org
測試連線
nslookup bitbucket.org

Server: 10.211.55.1

Address: 10.211.55.1#53

Non-authoritative answer:

Name: bitbucket.org

Address: 18.205.93.2

Name: bitbucket.org

Address: 18.205.93.1

Name: bitbucket.org

Address: 18.205.93.0

[AWS] NODEJS SES (Simple Email Services)寄信

第一次設定ses的流程，有需要的朋友可以試試。
寄送信件有發信跟寄信需要設定。SES的操作介面都有

開始設定

1.進入SES設定
https://console.aws.amazon.com/ses/home

2. 設定domain發信


接續上步之後，就可以看到一堆ｄｎｓ相關資訊，這裡我是設定到cloudflare上。填完設定後就會通過ｄｏｍａｉｎ認證


有通過認證後，就可以看到verified的綠字了


2. 測試發信

新增一個測試的信件，再去這個信箱發信，點擊驗證link。之後email才能測試寄件


接著你可以用Domain/Email Address來寄信。

Domain寄信
則可以自定要發信的email名稱，這樣就可以依不同服務寄送信件給用戶。EX:註冊信



Email Address寄信
可以用驗證過的信箱寄信給指定信箱


3.設定S3收信

可以寄信就要設定收信了，大多都會將信件存到s3上，

請至Email Receiving做規則設定

4.設定IM

沒有開就不能跟SES API整合，參考錯誤處理2

5.移出沙盒模式

沒有開就不能寄沒驗證過的信箱，參考錯誤處理3

之後就要填寫一些相關的資訊，之後就等support team回覆開通就可以串接了。

查看進度可以點以下連結

https://console.aws.amazon.com/support/home

nodejs aws-sdk錯誤處理

1. Signature時間逾期
{"message":"Signature expired: 20190129T112038Z is now earlier than 20190129T131757Z

要校正機器的時間設定，因為是裝ubuntu可參考下面的
sudo apt-get install ntp ntpdate
sudo ntpdate ntp.ubuntu.com

2. 權限不足

{"message":"User `arn:aws:iam::161004446739:user/<你的帳號>' is not authorized to perform `ses:SendEmail' on resource `arn:aws:ses:us-east-1:<你的awsid>:identity/tester1@gmail.com'"

要去im設定ses的群組，才能使用

3.信箱沒有驗證

{"message":"Email address is not verified. The following identities failed the check in region US-EAST-1: bigdstut@gmail.com","stack":"MessageRejected: Email address is not verified. 

寄信的對像沒有通過驗證，預設是在沙盒模式中
https://docs.aws.amazon.com/zh_tw/ses/latest/DeveloperGuide/request-production-access.html?icmpid=docs_ses_console

參考

https://docs.aws.amazon.com/zh_tw/ses/latest/DeveloperGuide/verify-domain-procedure.html

https://docs.aws.amazon.com/zh_tw/ses/latest/DeveloperGuide/dns-txt-records.html?icmpid=docs_ses_console

https://docs.aws.amazon.com/zh_tw/ses/latest/DeveloperGuide/dkim.html

網域dkim
https://docs.aws.amazon.com/zh_tw/ses/latest/DeveloperGuide/easy-dkim-setup-domain.html

如何設定寫入s3權限
https://docs.aws.amazon.com/zh_tw/ses/latest/DeveloperGuide/receiving-email-permissions.html

寫code
https://github.com/nodemailer/nodemailer-ses-transport
https://medium.com/@yashoda.charith10/sending-emails-using-aws-ses-nodejs-460b8cc6d0d5

http://jsnwork.kiiuo.com/archives/2539/amazon-ses-%E8%A8%AD%E5%AE%9A-email%EF%BC%8C%E8%AE%93%E4%BD%BF%E7%94%A8%E8%80%85%E5%AF%84%E4%BF%A1%E4%BC%BA%E6%9C%8D%E5%99%A8%E6%94%B6%E4%BF%A1%E8%BD%89%E5%AF%84%E7%B5%A6%E7%AE%A1%E7%90%86/

[nodejs] 好用的nodejs 驗證middleware :express-validator

api一定要驗證欄位格式，可以參考此express-validator插件。
可以自定驗證規則，也可以在路由就hook欄位的驗證項目。
非常好使用。

https://express-validator.github.io/docs/index.html

[AngularJS] 1.x 動態產生表單ng-form的筆記

常常需要寫到在一個ｆｏｒｍ裡面再透過ng-repeat產生多個ng-form，
可以參考以下範例
http://embed.plnkr.co/Zu8CPGymfHVKt83S4SzA/preview

簡單記錄一下完成的做法，不然每次用都會忘記...

ng-form的name不需要額外透過ng-repeat的$index動態產生不一樣的流水號也可以做，
先前還有故意產生ticket.formId但其實也不需要！！

React.js 異常錯誤大小事

1. 確認Ref的寫法是不是沒有更新，更新就會正常了
uikit.min.js?r=0.2995152529685583:51 Uncaught Error: Minified React error #119; visit http://facebook.github.io/react/docs/error-decoder.html?invariant=119 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at r (uikit.min.js?r=0.2995152529685583:51)
 Object.addComponentAsRefTo 

[three.js] 南北極模糊問題

一行指令解決南北極模糊

var maxAnisotropy = this.renderer.getMaxAnisotropy();

texture.anisotropy = maxAnisotropy;


https://www.jianshu.com/p/9b2702987dd2

[FCM] firebase admin 初探筆記: 從backend丟訊息

記錄一下nodejs使用FCM Admin的相關筆記，
主要要透過自已的backend與fcm做溝通，
跟web notification無關。

1. 安裝

npm install firebase-admin --save

2. Firebase開專案

3. 設定金鑰

專案設定頁->點擊服務帳戶的Tab->產生新的私密金鑰

4. 初始化SDK

var admin = require('firebase-admin');
var serviceAccount = require('path/to/serviceAccountKey.json');

admin.initializeApp({
  credential: admin.credential.cert(serviceAccount),
  databaseURL: 'https://.firebaseio.com'
});

當然如果不要透過下載.json，也是可以用變數的方式做初始化。

5. 發送訊息 send()

接著就可以透過admin.messaging()內的send方法發送訊息

// The topic name can be optionally prefixed with "/topics/".
var topic = 'highScores';
// See documentation on defining a message payload.
var message = {
  data: {
    score: '850',
    time: '2:45'
  },
  topic: topic};
// Send a message to devices subscribed to the provided topic.
admin.messaging().send(message)
  .then((response) => {
    // Response is a message ID string.
    console.log('Successfully sent message:', response);
  })
  .catch((error) => {
    console.log('Error sending message:', error);
  });

也可以在send方法內使用測試模式

admin.messaging().send(message, dryRun)

指定條件的訊息

在message也可以加condition

// Define a condition which will send to devices which are subscribed
// to either the Google stock or the tech industry topics.
var condition = "'stock-GOOG' in topics || 'industry-tech' in topics";
// See documentation on defining a message payload.
var message = {
  notification: {
    title: '$GOOG up 1.43% on the day',
    body: '$GOOG gained 11.80 points to close at 835.67, up 1.43% on the day.'
  },
  condition: condition};
// Send a message to devices subscribed to the combination of topics
// specified by the provided condition.
admin.messaging().send(message)
  .then((response) => {
    // Response is a message ID string.
    console.log('Successfully sent message:', response);
  })
  .catch((error) => {
    console.log('Error sending message:', error);
  });

定義訊息

透過fcm可以推播包含webpush/apns(iOS)/android等消息。

一個封裝訊息的欄位參數

参数	说明
data	键值对映射，其中所有键和值都是字符串。
notification	一个包含 title 和 body 字段的对象。
android	一个由 Android 消息专用字段组成的对象。要了解详情，请参阅 Android 专用字段。
apns	一个由 Apple 推送通知服务 (APNS) 专用字段组成的对象。要了解详情，请参阅 APNS 专用字段。
webpush	一个由 WebPush 协议专用字段组成的对象。要了解详情，请参阅 WebPush 专用字段。
token	一个用于标识消息的收件人设备的注册令牌。
topic	要将消息发送至的主题名称。该主题名称不能包含 /topics/ 前缀。
condition	发送消息时所依据的条件，例如 "foo" in topics && "bar" in topics

綜合的訊息

以下是一個主題的推播，並推發到andriod/apns

var message = {
  notification: {
    title: '$GOOG up 1.43% on the day',
    body: '$GOOG gained 11.80 points to close at 835.67, up 1.43% on the day.',
  },
  android: {
    ttl: 3600 * 1000,
    notification: {
      icon: 'stock_ticker_update',
      color: '#f45342',
    },
  },
  apns: {
    payload: {
      aps: {
        badge: 42,
      },
    },
  },
  topic: 'industry-tech'
};




常見授權錯誤

如果你在send訊息出現以下錯誤，

Credential implementation provided to initializeApp() via the \"credential\" property failed to fetch a valid Google OAuth2 access token with the following error

通常都是你目前環境的時間跟FCM的不一致，

只要同步時間就好了，

$>sudo service ntp restart

官方文件

https://firebase.google.com/docs/admin/setup?authuser=2
https://firebase.google.com/docs/cloud-messaging/admin/send-messages?authuser=1

[Bootstrap3] Bs3各種垂置置中

記錄每次寫一次忘一次的bs3垂直置中

http://jasonlung.logdown.com/posts/2016/07/23/how-to-bootstrap-content
https://codepen.io/hashem/pen/zwJaE
https://blog.iphpo.com/bootstrap-3-%E8%AE%93%E7%89%A9%E4%BB%B6%E5%9E%82%E7%9B%B4%E7%BD%AE%E4%B8%AD%E7%9A%84%E6%96%B0%E6%96%B9%E6%B3%95/

[react.js] react-redux 使用流程

實作大多採用react-redux來整合原本的redux，
對於第一次入手的人感覺就是要懂一堆第三方套件後才能好好寫。
自已久久寫一下也會忘記大部份的邏輯，所以記錄一下。

目錄結構

actions =>放觸發的action定義
   -index.js =>負責匯出各redux的動作

constants => app state，
  -models 把各別的state 分類
      -index.js 匯出每個個別的app state
  -ActionTypes.js 匯出action要用的變數

reducers =>定義所有reducers
  -ui
    -UIReducer.js => Layout的reducer
  -index.js =>匯出所有reducers並combine所有reducer

store
  - index.js => 匯入所有app reducers與產生一個app store

產生一個新的redux動作

1. 到constants/models定義新的redux state
2. 到constants/index.js 匯出剛剛定義的 reduxstate
3. 到ActionType.js加新的redux事件
4. 到actions新增一個對應的 <你的新redux命名>Actions.js 檔案
5. 到reducers新增一個對應的reducer，<你的新redux命名>Reducer.js 檔案
6. 到reducers/index.js 匯入剛剛新加的reducer
7. 到containers下找對應的container元件呼叫要使用的actions並匯入


1. 登入元件範例    
2. 
   

[CSS] css置中大法大全

找到一篇講述各種方法滿足你元素各種置中需求
https://css-tricks.com/centering-css-complete-guide/

[Git] 讓merge不用再輸入訊息

最近在處理shell使用git merge都會跳出上圖所示的的訊息互動視窗，

會讓整個想透過sh自動化無法完成，還好可以加上--no-edit參數就可以避過啦。

以下是最完整的語法：

git merge --no-ff develop --no-edit

[Git] 從https 的clone變更為ssh

由於先前使用https來clone repo，如果要變動的可以透過以下指令變更回ssh

git remote set-url origin git@github.com:username/your-repository.git

[Bootstrap 3] 在行動裝置重新排序Column

剛好做客戶有遇到，要在手機layout的改變column的位置，
簡單來說就左右調換，其實bootstrap裡面就有支援行 re-ordering了。
可以參考以下範例

https://codepen.io/Schmalzy/pen/iJdgD

[Git] 移除已經commit的資料

由於目前專案有需要移除先前commit的資料夾，
查到了以下指令，有用到就筆記一下。

git rm -r -n --cached "bin/" //-n：加上这个参数，执行命令时，是不会删除任何文件，而是展示此命令要删除的文件列表预览。 git rm -r --cached "bin/" //最终执行命令. git commit -m" remove bin folder all file out of control" //提交 git push origin master //提交到远程服务器

http://blog.csdn.net/chenxu6/article/details/50542295

[bootstrap 3] 如何簡單快速覆寫bootstrap的樣式

如果懶的用less來重build bootstrap的樣式的話，
通常你會在link下面多引用一個你要覆寫bootstrap.min.css的客製化樣式。
但你會發現有可能覆寫失敗，
有些人會建議使用大絕招!important 屬性，
找到stackoverflow另一篇建議:
https://stackoverflow.com/questions/8084964/how-to-overwrite-styling-in-twitter-bootstrap/20542297#20542297
因為css選擇器有權重的特性，
可以加上id的名稱去覆寫，這樣就不失彈性啦!

例如自訂一個nav-customer來覆寫nav的相關設定
header #nav-customer{
background-color: rgba(0, 0, 0, 0.6);
}

參考
https://stackoverflow.com/questions/8084964/how-to-overwrite-styling-in-twitter-bootstrap/20542297#20542297

[AngularJS] 如何覆寫舊的路由狀態state

由於有客戶客製化的需求，
需要改寫原本路由的介面，
但為了共用核心不變，
找到了可以在run的時候覆寫舊的路由的方法:D

angular.module('module2', ['ui.router'])
.run(['$state', function($state){
  var state = $state.get('先前的路由命名');
  state.templateUrl = '新的樣版';

}]);

[react.js] 初學筆記

記錄一下react.js學習上要懂的ecosystem，
做一下自已要速查的note

npm套件管理工具

node.js用來裝需求的套件的工具，安裝完的套件可以給node.js後端用或透過webpack ES6方法來載入套件

webpack build tool (可以用Gulp+browserify)

因為早期都用gulp，但webpack出到v3了，這次就換試webpack這個工具

[react.js] 雷雷小伙伴之坑

記錄一下菜B巴react.js之旅的error

Warning: Invalid DOM property `class`. Did you mean `className`?

就是JSX裡面用了html的保留字class啦，要用className

Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object

//死亡的原因是import加了{}

// import { App}  from './components/App';

import  App  from './components/App';

[node.js] 如何切換development與production模式

有關node.js處理NODE_ENV來切換developer/production的方法種類

export NODE_ENV=production

Or if you are in windows you could try this:

SET NODE_ENV=production

or you can run your app like this:

NODE_ENV=production node app.js

You can also set it in your js file:

process.env.NODE_ENV = 'production';

https://stackoverflow.com/questions/9198310/how-to-set-node-env-to-production-development-in-os-x

[node.js] 如何在node.js做好logger的監控

剛開始寫node.js，還是習慣先找一個logger的套件來trace系統。
這篇文章:node-js-logging-tutorial(也完整說明各種log的使用方法)介紹了winston這個套件，有興趣的新手可以試一下。

https://github.com/winstonjs/winston

[node.js] 快快樂樂學node.js (五) 開始連接mysql

現在要來說明如何連結mysql，
這裡使用node.js的mysql套件(https://github.com/mysqljs/mysql#introduction)，可以簡單進行與mysql進行連線。

[node.js] 快快樂樂學node.js (四) REST API 模組化-使用控制器

在上一篇
[node.js] 快快樂樂學node.js (三) 實作第一個REST API (沒有採用資料庫)

的範例中，並沒有將程式碼考慮到如果有愈多不到資源的REST要處理的話(例如:用戶/Blog等等)，

程式碼就會顯示的不好管理，因此我們要將messages拆分到另一個js檔案裡

[node.js] 快快樂樂學node.js (三) 實作第一個REST API (沒有採用資料庫)

由於大家開始習慣所謂的SPA 單一頁面應用程式架構，
前端可以搭任何喜歡的前端框架，例如vue.js/angular/react.js，
因此後端就只要負責與前端透過REST API溝通，
REST API的理論就不多說明了，直接記錄在node.js express如何實作

[node.js] 快快樂樂學node.js (二) 如何設定自動重啟

先前有說到如果你沒有用任何套件的話，
基本上修改程式過程是很麻煩的，
因此要裝一些套件來達到這件事，
而且一個完整的範例，要包含前後端，
早期有一些grunt套件，目前個人則偏愛用gulp相關套件:D

[node.js] 快快樂樂學node.js (一) 啟動第一個express環境

閱讀jollen大大的node.js express的學習筆記，
方便自已速查，有興趣的朋友可以參閱。
github: https://github.com/jollen/nodejs-fullstack-book
我只從express章節開始記錄!!

[GA] 如何報考GA

如果你想要取得GA認證(免費的)
可以透過成為Google Partners即可免費參與考試 :D

https://www.google.com.tw/partners/about/join.html

選擇加入的tab


之後填了一些資訊後，可以到達以下頁面
https://www.google.com.tw/partners/#p_analyticscertification
就會看到右下的側欄有參加考試的資訊了!!




參考
https://support.google.com/analytics/answer/4553001?hl=zh-Hant

[Gulp] 快快樂樂學gulp- 起手式

記錄一下簡單的gulp筆記

gulp可以試用於window/linux開發環境，
這裡只介紹我在mac使用過程。

前置作業- 安裝npm

安裝gulp

npm install --global gulp

or

#g就是global的意思，通常都用這個

npm install gulp -g 

gulp設定檔

使用gulp的專案內部需安裝以下二個檔案

package.json: 記錄安裝的npm套件

gulpfile.js: 撰寫你的任務流程

有了此二個設定檔，未來clone此專案就能快速建置開發環境

常用指令介紹

gulp.task

gulp.watch

gulp.src

gulp.desc

初始化你的gulpfile.js  (一個最簡單的範例)

var gulp = require('gulp');
// 我們可以建立一個預設任務，當只輸入 $>gulp 指令時執行的任務
gulp.task('default',['build'],function(){
console.log('run default');
});
gulp.task('build',['build'],function(){
console.log('run build');
});

執行

$>gulp

其他壓縮打包js/css套件

gulp-concat：合併檔案
gulp-minify-css：壓縮 CSS
gulp-uglify：混淆並壓縮 JS
gulp-rename：重新命名檔案

npm install gulp-concat --save-dev
npm install gulp-minify-css --save-dev
npm install gulp-uglify --save-dev
npm install gulp-rename --save-dev

參考

https://www.gitbook.com/book/powerbear0083/gulp-install-record

http://www.oxxostudio.tw/articles/201503/gulp-2-compress-js-css.html

https://987.tw/2014/07/09/gulpru-men-zhi-nan/
https://www.slideshare.net/sfismy/gulpjs
https://www.slideshare.net/appleboy/automating-your-workflow-with-gulp

[iOS] webview操作

記錄一下webview的使用

清空

[self.webView loadHTMLString:@"" baseURL:nil];

[Youtube] 360直播的一些設定

如果想要在youtube直播360影像，可以參考以下官方說明

https://support.google.com/youtube/answer/6396222?hl=tw

設定編碼器

如要直播 360 度影片，您必須變更編碼規格。

1. 選取 YouTube 直播平台上的 [活動]。提醒您，如果選取 [立即串流]，您就無法直播 360 度影片。
2. 前往「進階設定」，然後勾選「這是 360° 的現場直播影片」旁的方塊。如果您的裝置已整合 YouTube 直播的 360 度影片功能，您也可以透過我們的 API 進行直播。  
   
3. 設定編碼器：
1. 從系統支援的解析度和位元率中，選擇您可以提供的最高直播設定。
2. 直播 360 度影片時，建議採用 2160p 或 1440p 解析度。
3. 為了提供最佳影片品質，建議您採用 16:9 長寬比。進一步瞭解長寬比。

位元率參考

詳細可以參考

https://support.google.com/youtube/answer/2853702?hl=zh-Hant

位元率的計算 bitrate (bps = bit/s = bit per second)

找到一個人的參考

http://lotoria.pixnet.net/blog/post/25789773

檔案大小就看你的 bitrate 設多少, 

假設你設目標是(或稱平均) 1000kb/s, 那半小時是 30(分鐘)x60(每分60秒)=1800秒
那 1000kb/s x 1800s = 1800Mb, 1800Mb/8=225MB (1 byte = 8 bits) -> 

所以檔案大約 225MB (byte) 硬碟容量計算單為用 byte.

根據上述公式速算：
檔案大小 (MB) = (秒 * bit rate) / 8000
Bit rate  = 影片大小 * 8

在網路上抓了一個影片為 128.8MB檔案大小，長度為2.49分鐘的影片，

如何計算bitrate:

由於位元率是以bit 為單位，1 Bytes = 8 bits

依據公式 bitrate = 影片大小 * 8 

128.8M*8/169 (sec) = 6.09Mbps = 6090kbps 

(差不多就是1080p HD的bitrate)

如何處理360影片的中繼資料遺失(metadata)

如果你的360影片上傳至facebook或youtube沒辦法使用360的播放視窗，
有可能是檔案的metadata屬性已失效，建議使用以下工具復原

https://support.google.com/jump/answer/7044297?hl=en

使用方法就是點擊Inject metedata就好了，會產生你的檔名_injected.mp4

REF
https://support.google.com/youtube/answer/7278886?hl=zh-Hant

[jQuery] 特殊字元跳脫的錯誤解決方法: Syntax error, unrecognized expression: a[href*=#]:not([href=#])

今天在移轉舊專案程式碼，遇到jquery一些錯誤，
查了一下原來是用的2.x版有特殊字元要跳脫的問題，記錄一下。

Syntax error, unrecognized expression:

your selector is not valid. # is a special char and needs to be escaped like 'a[href*=\\#]:not([href=\\#])'

see https://api.jquery.com/category/selectors/

https://github.com/jquery/jquery/issues/2885