星期二, 1月 29, 2019

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

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

開始設定

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

2. 設定domain發信


接續上步之後,就可以看到一堆dns相關資訊,這裡我是設定到cloudflare上。填完設定後就會通過domain認證


有通過認證後,就可以看到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回覆開通就可以串接了。
查看進度可以點以下連結

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/

星期二, 1月 15, 2019

星期六, 1月 12, 2019

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

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

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

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




星期五, 1月 11, 2019

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 


星期三, 10月 31, 2018

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

一行指令解決南北極模糊

var maxAnisotropy = this.renderer.getMaxAnisotropy();

texture.anisotropy = maxAnisotropy;


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

星期一, 10月 22, 2018

[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

星期一, 3月 26, 2018

[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月 20, 2018

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


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

會讓整個想透過sh自動化無法完成,還好可以加上--no-edit參數就可以避過啦。
以下是最完整的語法:

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



星期五, 1月 05, 2018

[Git] 從https 的clone變更為ssh

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

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

星期六, 11月 25, 2017

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

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

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

星期三, 11月 08, 2017

[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

星期日, 11月 05, 2017

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

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

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

}]);

星期日, 10月 22, 2017

[react.js] 初學筆記

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

npm套件管理工具

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

webpack build tool (可以用Gulp+browserify)

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

星期三, 10月 18, 2017

[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';

星期三, 10月 11, 2017

[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

星期一, 8月 28, 2017

[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進行連線。

星期三, 8月 16, 2017

[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如何實作

星期二, 8月 15, 2017

[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

星期三, 8月 09, 2017

[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

星期二, 7月 11, 2017

[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)

找到一個人的參考

檔案大小就看你的 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)


星期三, 6月 28, 2017

如何處理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


星期日, 6月 11, 2017

[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=\\#])'

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

星期日, 5月 21, 2017

[Lavarel] 使用View::exists 判斷view blade是否存在

記錄一下為了做樣版切換機制需要用到的View:exists方法 http://stackoverflow.com/questions/32102272/how-to-include-a-blade-template-only-if-it-exists You can use View::exists() to check if a view exists or not. @if(View::exists('path.to.view')) @include('path.to.view') @endif Or you can extend blade and add new directive Blade::directive('includeIfExists', function($view) { });

星期三, 5月 10, 2017

[iQIYI愛奇藝] Objective-C 愛奇藝api串流

我的視頻頁查看上傳影片管理

目前發現一般用戶上傳後無此開發者頁面,
只能去自已的空間(http://www.iqiyi.com/paopao/u/用戶UID/upload/)查看

http://open.iqiyi.com/developer/file/index




上傳常見錯誤

"A00012": system error
"A00018":超过应用的最大配额


線上客服


如何提升上傳限制

帳戶一天只可上傳25個視頻
http://www.iqiyi.com/common/rz-info.html

星期四, 5月 04, 2017

[Objective-C] 快快樂樂用Twitter REST: Upload Media

一般上傳超過15mb
 errors =     (
                {
            code = 130;
            message = "Over capacity";
        }
    );
}

Chunk upload上傳

errors =     (
                {
            code = 324;
            message = "Not valid video";
        }
    );


 {
    error = "Large file can not be finalized synchronously.";
    request = "/1.1/media/upload.json";
}


{
  "media_id": 845498780979908608,
  "media_id_string": "845498780979908608",
  "size": 16440765,
  "expires_after_secs": 86400,
  "processing_info": {
    "state": "pending",
    "check_after_secs": 5
  }

}


{
    error = "Invalid media_id: Some((null)).";
    request = "/1.1/media/upload.json";

}


{
    error = "Segments do not add up to provided total file size.";
    request = "/1.1/media/upload.json";

}

星期日, 3月 26, 2017

[AngularJS] hide select的空字串值

常常會需要把select選單預設指定一個預設值,
但又不需要秀空字串的選項,只要設定一個ng-hide="true"就可以搞定。
常忘了,記錄一下。

星期三, 3月 15, 2017

[Objective-C] 快快樂樂用Twitter SDK: Oauth1 驗證記錄

記錄一下整合twitter的方法,因為在編sinature一直亂爆一通,所以記錄一下。
官方講解的流程https://dev.twitter.com/web/sign-in/implementing (沒講signtrue怎麼做出來,要看別的文件即可)


前置動作

新增 app
https://apps.twitter.com/

Oauth 1.0 Flow



星期二, 3月 07, 2017

[AngularUI] 如何關閉uiboostrap的modal

常用到ui-bootstrap的modal,如果要將產生的dialog 實體關閉(關閉dialog),
可以使用下面的程式 。
use $rootScope
when initializing your modal use $rootScope.modalInstance
You can access it anywhere from the application then. Hope this helps

  1. Remove the $uibModalInstance references
  2. Instead of "var modalInstance = $uibModal.open({"
    Use "$rootScope.modalInstance = $uibModal.open({
  3. Instead of $uibModalInstance.close('a');"
    Use "$rootScope.modalInstance.close('a');"

星期日, 3月 05, 2017

[Objective-C] 快快樂樂使用 facebook SDK : 上傳影片

記錄一下使用facebook iOS sdk4.x上傳影片

格式

影片長寬比必須介於 9x16 和 16x9 之間。

我們支援的上傳影片格式如下:

3g2、3gp、3gpp、asf、avi、dat、divx、dv、f4v、flv、m2ts、m4v、mkv、mod、mov、mp4、mpe、mpeg、mpeg4、mpg、mts、nsv、ogm、ogv、qt、tod、ts、vob 和 wmv。

上傳大小限制

  1. 不可續傳的上傳可支援最高達 1GB 和 20 分鐘長度的影片上傳。
  2. 可續傳的上傳可支援最高達 1.75GB 和 45 分鐘長度的影片上傳。

流程


https://www.facebook.com/help/828417127257368

其他你感興趣的文章

Related Posts with Thumbnails