2017年7月22日 星期六

[Cordova] ngCordova Barcode Scanner plugin 掃描Qrcode bug 解決方式


狀況: 此套件在 Android 4.X 會出現 執行掃描時,直接回傳
{
    cancelled: true,
    text: "",
    format: ""
}


解決辦法:

config.xml內 加入
<preference name="AndroidLaunchMode" value="standard"/>



如果喜歡此文章 麻煩幫我點最上面的廣告 謝謝^^
你的支持 會讓我努力寫更多文章
有任何疑問歡迎留言

By 艾摩杰~

2017年7月19日 星期三

[Hybrid APP] Cordova + Firebase 簡單實現 ios APNS推播 以及 android FCM(GCM) 推播


在以前,當專案同時有 ios &amp; android 兩派系統用戶,後台就必須實作兩套推送方式 (APNS以及GCM),直到2016年5月的Google IO大會上推出Firebase,並推出多項新功能供大家使用,包含這次介紹的推播功能。

Google後來也將原本android推播平台 Google Cloud Messaging (GCM)全面改為 Firebase Cloud Messaging (FCM),FCM為跨平台服務,可推送ios、android、web applications,FCM推播ios其實還是使用Apple Push Notification service (APNS),只是對於開發者來說,不用去區分client平台為何,FCM自動幫你分辨並推播。

官方 FCM 展示影片:



PS.此範例使用 Cordova框架 搭配 ionic框架為實例


在cordova專案加入 cordova-plugin-fcm 套件

#cordova plugin add cordova-plugin-fcm


程式碼:


取得FCM Token:
FCMPlugin.getToken(function(token){
    alert(token);

});

收到推播訊息event
FCMPlugin.onNotification(function(data){
      alert(JSON.stringify(data));
});

範例圖:



至firebase平台上註冊APP
https://console.firebase.google.com

先建立專案

加入 ios以及android 應用程式 

iOS 連結ID 為 APP ID (bundle ID)


將檔案下載至 cordova專案跟目錄


此項目略過 直接按繼續




Android 套件名稱 一樣為 APP ID


一樣下載至cordova專案跟目錄



到這裡,android推播部分其實已經完成,ios還必須加入APNS憑證才可以推播。
ios要有推播功能必須要有 Apple 開發者帳戶,才可以有推播功能。
至於如何申請就不再此教學,請另google

至開發者帳戶新增App ID










申請推播憑證前,需要先產生CSR憑證需求檔(此需求檔只能使用一次)


必須使用MAC OS 鑰匙圈存取產生




輸入email完後 下面選擇 儲存到硬碟即可產生CSR需求檔


上傳剛剛產生的需求檔


下載cer憑證

由於FCM需要的是.p12憑證,所以必須再使用 鑰匙圈存取,將cer轉p12
將剛剛下載的cer檔案點兩下即可匯入鑰匙圈。
至左邊 我的憑證 即可看到剛剛匯入的憑證,展開憑證,會出現本機用戶名稱,再點右鍵輸出,檔案格式必須選擇 .p12


至Firebase 匯入 APNS憑證

此伺服器金鑰須記下,之後推播需要用到




到這邊,ios也設定完畢了!

再build APP 之前要先確認 cordova APP id 是否設定正確

確定無誤後 即可build APP
#cordova build ios
#cordova build android


PS.注意 ios部分,用Xcode編譯前,要先確認推播功能有沒有打開



APP開啟時會顯示需要授權推播功能,點授權後須重開起APP才可以取得到FCM Token








推播測試

左邊功能選單 Notifications 可以測試推播功能
推送目標可以是應用程式也可以是主題或是單一裝置
此範例先使用應用程式為範例




ios收到推播畫面:



android 收到推播畫面:



FCM 另外還可以推送 web application ,有興趣的朋友可以自己實作看看~


如果喜歡此文章 麻煩幫我點最上面的廣告 謝謝^^
你的支持 會讓我努力寫更多文章
有任何疑問歡迎留言

By 艾摩杰~

2017年5月13日 星期六

[Javascript] base64 encode & base64 decode with UTF-8


由於 Javascript 內建函示庫的 atob()  btoa() 不支援UTF8
所以只好用以下的function解決


var Base64 = {



    _keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",



    encode: function(input) {

        var output = "";

        var chr1, chr2, chr3, enc1, enc2, enc3, enc4;

        var i = 0;

        input = Base64._utf8_encode(input);



        while (i < input.length) {

            chr1 = input.charCodeAt(i++);

            chr2 = input.charCodeAt(i++);

            chr3 = input.charCodeAt(i++);



            enc1 = chr1 >> 2;

            enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);

            enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);

            enc4 = chr3 & 63;



            if (isNaN(chr2)) {

                enc3 = enc4 = 64;

            } else if (isNaN(chr3)) {

                enc4 = 64;

            }

            output = output + this._keyStr.charAt(enc1) + this._keyStr.charAt(enc2) + this._keyStr.charAt(enc3) + this._keyStr.charAt(enc4);

        }

        return output;

    },



    decode: function(input) {

        var output = "";

        var chr1, chr2, chr3;

        var enc1, enc2, enc3, enc4;

        var i = 0;

        input = input.toString();

        input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");



        while (i < input.length) {

            enc1 = this._keyStr.indexOf(input.charAt(i++));

            enc2 = this._keyStr.indexOf(input.charAt(i++));

            enc3 = this._keyStr.indexOf(input.charAt(i++));

            enc4 = this._keyStr.indexOf(input.charAt(i++));

          

            chr1 = (enc1 << 2) | (enc2 >> 4);

            chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);

            chr3 = ((enc3 & 3) << 6) | enc4;

            output = output + String.fromCharCode(chr1);

            if (enc3 != 64) {

                output = output + String.fromCharCode(chr2);

            }

            if (enc4 != 64) {

                output = output + String.fromCharCode(chr3);

            }

        }

        output = Base64._utf8_decode(output);

        return output;

    },



    _utf8_encode: function(string) {

        string = string.replace(/\r\n/g, "\n");

        var utftext = "";



        for (var n = 0; n < string.length; n++) {

            var c = string.charCodeAt(n);

            if (c < 128) {

                utftext += String.fromCharCode(c);

            }

            else if ((c > 127) && (c < 2048)) {

                utftext += String.fromCharCode((c >> 6) | 192);

                utftext += String.fromCharCode((c & 63) | 128);

            }

            else {

                utftext += String.fromCharCode((c >> 12) | 224);

                utftext += String.fromCharCode(((c >> 6) & 63) | 128);

                utftext += String.fromCharCode((c & 63) | 128);

            }

        }

        return utftext;

    },



    _utf8_decode: function(utftext) {

        var string = "";

        var i = 0;

        var c = c1 = c2 = 0;



        while (i < utftext.length) {

            c = utftext.charCodeAt(i);

            if (c < 128) {

                string += String.fromCharCode(c);

                i++;

            }

            else if ((c > 191) && (c < 224)) {

                c2 = utftext.charCodeAt(i + 1);

                string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));

                i += 2;

            }

            else {

                c2 = utftext.charCodeAt(i + 1);

                c3 = utftext.charCodeAt(i + 2);

                string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));

                i += 3;

            }

        }

        return string;

    }

}




example:

Base64.decode(data);
Base64.encode(data);


如果喜歡此文章 麻煩幫我點最上面的廣告 謝謝^^
你的支持 會讓我努力寫更多文章
有任何疑問歡迎留言

By 艾摩杰~

2017年5月5日 星期五

[jQuery] 解決 jQuery DataTables 匯出CSV亂碼問題 UTF-8 with BOM


官方範例在匯出CSV時,預設是 UTF-8 without BOM,
導致部分電腦開啟時會產生亂碼
需要改設定值 bom : true 才能解決

官方Docoument連結 : https://datatables.net/reference/button/csv


範例:

$('.js-exportable').DataTable({
        dom: 'Bfrtip',
        responsive: true,
        buttons: [
        'copy', {
                extend: 'csv',
                text: 'CSV',
                bom : true}, 'excel', 'pdf', 'print'
            ]
});




如果喜歡此文章 麻煩幫我點最上面的廣告 謝謝^^
你的支持 會讓我努力寫更多文章
有任何疑問歡迎留言

By 艾摩杰~

2017年4月20日 星期四

[NodeJS] Synology NAS 架設 NodeJS Server , 並用 forever 背景執行程式


先至 Synology 套件中心 安裝Node JS 套件



打開 Synology NAS SSH連線功能,記得設定完要按套用!



接下來就可以用Putty連線進去了~
PS. 沒有Putty的朋友可以至這裡下載   32bit載點  64bit載點   來源網站




登入時 帳號記得是root  密碼是當初設定NAS時 admin的密碼



這時候可以查看一下 NodeJS 是否可用
就用 node -v 指令看一下版本


Synology內建是沒有安裝 forever套件的


這時候可以用npm安裝 forever套件

#npm install forever -g



forever 常用指令
--------------------------------------------------
新增背景執行程式: forever start xxxxx.js
查看目前執行程式清單: forever list
刪除背景執行程式: forever stop UID
PS.程式UID 要從 清單內查詢




如果喜歡此文章 麻煩幫我點最上面的廣告 謝謝^^
你的支持 會讓我努力寫更多文章
有任何疑問歡迎留言

By 艾摩杰~

2016年2月18日 星期四

[MAC] 刪除擾人的 .DS_Store


打開終端機

cd 到指定目錄

因為刪除指令對某些人來說可能有疑慮,所以先看一下整個結果再確定是否要刪除
$find . -name ".DS_Store" -depth -exec echo ----{} \;
結果
----./Library/.DS_Store
----./Library/Application Support/.DS_Store
----./Library/Application Support/com.trankynam.XtraFinder/.DS_Store
----./Library/Application Support/CoRD/.DS_Store
----./Library/Application Support/Developer/Shared/Xcode/.DS_Store
----./Library/Application Support/DEVONthink Pro 2/.DS_Store
----./Library/Application Support/Haroopad/Themes/.DS_Store


正式刪除
find . -name ".DS_Store" -depth -exec rm {} \;


如果喜歡此文章 麻煩幫我點最上面的廣告 謝謝^^
你的支持 會讓我努力寫更多文章
有任何疑問歡迎留言

By 艾摩杰~

2016年2月16日 星期二

[ionic] cordovaPush GCM 推播 範例



安裝 PushPlugin
cordova plugin add https://github.com/phonegap-build/PushPlugin.git


app.js

angular.module('app', ['ionic','ngCordova'])

.run(function($ionicPlatform,$cordovaPush,$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);
    }
    if(window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
    }
 
    var androidConfig = {
      "senderID": "XXXXXXXXXX",
    };

    $cordovaPush.register(androidConfig).then(function(result) {
      //alert(result);
    }, function(err) {
      alert(err);
    })    
  });

  $rootScope.$on('$cordovaPush:notificationReceived', function(event, notification) {
    switch(notification.event) {
      case 'registered':
        if (notification.regid.length > 0 ) {
          alert('registration ID = ' + notification.regid);
          console.log('registration ID = ' + notification.regid);
        }
        break;
      case 'message':
        alert(JSON.stringify(notification));

        break;
      default:
        alert('An unknown GCM event has occurred:'+notification.event);
        break;
    }
  });
})




如果喜歡此文章 麻煩幫我點最上面的廣告 謝謝^^
你的支持 會讓我努力寫更多文章
有任何疑問歡迎留言

By 艾摩杰~

2016年2月5日 星期五

[PHP] 透過php gd轉圖片以程式方式輸出並在程式中取得參數回傳


#php2img 輸出圖片程式
<?
   $pa = $_REQUEST['q'];


   $image = "1.jpg";
   $img=GetImageSize($image);

   switch($img[2]){
      case 1:
         $im=ImageCreateFromGIF($image);
         break;
      case 2:
         $im=ImageCreateFromJPEG($image);
         break;
      case 3:
         $im=ImageCreateFromPNG($image);
         break;
   }

   $logo = "1.jpg";
   $pic=GetImageSize($logo);
   switch($pic[2]){
      case 1:
         $im_pic=ImageCreateFromGIF($logo);
         break;
      case 2:
         $im_pic=ImageCreateFromJPEG($logo);
         break;
      case 3:
         $im_pic=ImageCreateFromPNG($logo);
         break;
   }
//圖片合成
   imagecopy($im,$im_pic,0,500,0,0,100,0);
//顏色設定
   $fc = imagecolorallocate($im,0,0,0);
//首先要文字轉utf-8
   $str = "文字串放這邊";
//加入浮水印
//imagettftext($image, 大小, 旋轉, 與左邊的距離, 與上面的距離, $black, $font, $text);
   imagettftext($im,23,0,35,870,$fc,"msyh.ttf",$str);
//建立真實圖片
   $new_img = imagecreatetruecolor(450,440);
//剪切圖片
   imagecopyresized($new_img,$im,0,0,0,0,450,440,$img[0],$img[1]);
//輸出圖片
   header("Content-type:image/jpeg");

   imagejpeg($new_img);
?>

遠端取得圖片程式
<?php
   $data = base64_encode( file_get_contents('http://1.1.1.1/php2img1.php?q=123456789') );
   echo '<img src="data:image/jpg;base64,' . $data . '" />';
?>

如果喜歡此文章 麻煩幫我點最上面的廣告 謝謝^^
你的支持 會讓我努力寫更多文章
有任何疑問歡迎留言

By 艾摩杰~

2014年10月22日 星期三

[Linux] 使用 XRDP 從 win7 遠端 Ubuntu 桌面


XRDP 可以讓 windows 不需要裝額外 client 就能遠端 Ubuntu

1. 終端機 安裝指令
# apt-get install xrdp


2. 設定 桌面分享


3. Windows 執行 遠端桌面 即可連線




如果喜歡此文章 麻煩幫我點最上面的廣告 謝謝^^
你的支持 會讓我努力寫更多文章
有任何疑問歡迎留言

By 艾摩杰~