2017年7月4日星期二

Line Bot 實戰教學

環境
Windows + python

Line Bot 概念 & 實作

說明

官方網站

可透過Line 官方推出的API 可以自行開發Line Bot，可以主動進行推撥，或是根據訊息進行相對應的回應

Line API

實作

1.申請帳號

參考下列網址申請 & 設定

http://white5168.blogspot.tw/2017/02/line-1-line-messaging-api-v2-php.html#.WVj9T4SGNhF

http://m.2cto.com/os/201704/622284.html

2.設定ngrok

ngrok會給一組隨機的httpxxxxx & https xxxxxx 對應到本機localhost:xxxx 啟的server

讓外部的網站能夠直接連接到localhost，節省掉開發的時間

主要也是因為在line bot 的設定上，需要給一組webhook url 所以可以透過該方式拿到一組https

入(下圖勾選的地方)

透過linux將下載下來的ngrok最新版本移到/usr/bin，之後在bash輸入ngrok就可使用

$ sudo mv <檔案目前的位置> /usr/bin/

此時使用

$ ngrok

成功進行運作

可透過下列方式指定要運行的port

$ ngrok http 5000

下圖為運行成功後，即可看到ngrok給予的http網址，將網址貼在webhook url即可

3.執行Line API

官方提供的code

from flask import Flask, request, abort

from linebot import (

LineBotApi, WebhookHandler

)

from linebot.exceptions import (

InvalidSignatureError

)

from linebot.models import (

MessageEvent, TextMessage, TextSendMessage,

)

app = Flask(__name__)

line_bot_api = LineBotApi('YOUR_CHANNEL_ACCESS_TOKEN')

handler = WebhookHandler('YOUR_CHANNEL_SECRET')

@app.route("/callback", methods=['POST'])

def callback():

# get X-Line-Signature header value

signature = request.headers['X-Line-Signature']

# get request body as text

body = request.get_data(as_text=True)

app.logger.info("Request body: " + body)

# handle webhook body

try:

handler.handle(body, signature)

except InvalidSignatureError:

abort(400)

return 'OK'

@handler.add(MessageEvent, message=TextMessage)

def handle_message(event):

line_bot_api.reply_message(

event.reply_token,

TextSendMessage(text=event.message.text))

if __name__ == "__main__":

app.run()

4.使用Flake 作為Line bot 的server

該範例會使用flask啟用一個server，當作line bot 的後端server 預設開啟為127.0.0.1:5000

可透過下方設定調整

if __name__ == "__main__":

app.run(host='0.0.0.0',port=9000, debug=True)

原文網址：https://read01.com/BO0Kdz.html

5.碰到的問題，不斷的502 Bad Gateway

當執行官方code後，出現systemExit:1

而連結到網址，會發現ngrok出現該提示

本以為是在jupyter開啟server會出問題，後來轉換成py，透過bash開啟，還是一樣，雖然似乎flask已與ngrok產生連結，但問題依舊存在，導致後面的line bot後續測試無法進行

可能解決狀況

把server架在vm中的docker上面，網路的設定可能有未知的問題
或許可以嘗試在本機的jupyter上操作line bot 看看

6.自創的Line Bot帳號

7.嘗試在本機Jupyter使用falsk

from flask import Flask

app = Flask(__name__)

@app.route("/")

def hello():

return "Hello World!"

if __name__ == "__main__":

app.run()

結果成功了→斷定果然是因為跑在VM上面的關係

8.在本機操作Lint Bot

按照上方的步驟，結果在驗證時出現下面錯誤，至少錯誤跟之前不一樣QQ

[2017-07-04 14:48:33,233] ERROR in app: Exception on /callback [POST]

Traceback (most recent call last):

File "C:\Anaconda2\lib\site-packages\flask\app.py", line 1988, in wsgi_app

response = self.full_dispatch_request()

File "C:\Anaconda2\lib\site-packages\flask\app.py", line 1641, in full_dispatch_request

rv = self.handle_user_exception(e)

File "C:\Anaconda2\lib\site-packages\flask\app.py", line 1544, in handle_user_exception

reraise(exc_type, exc_value, tb)

File "C:\Anaconda2\lib\site-packages\flask\app.py", line 1639, in full_dispatch_request

rv = self.dispatch_request()

File "C:\Anaconda2\lib\site-packages\flask\app.py", line 1625, in dispatch_request

return self.view_functions[rule.endpoint](**req.view_args)

File "<ipython-input-1-c3bc0381a4f5>", line 33, in callback

handler.handle(body, signature)

File "C:\Anaconda2\lib\site-packages\linebot\webhook.py", line 227, in handle

func(event)

File "<ipython-input-1-c3bc0381a4f5>", line 44, in handle_message

TextSendMessage(text=event.message.text))

File "C:\Anaconda2\lib\site-packages\linebot\api.py", line 94, in reply_message

'/v2/bot/message/reply', data=json.dumps(data), timeout=timeout

File "C:\Anaconda2\lib\site-packages\linebot\api.py", line 262, in _post

self.__check_error(response)

File "C:\Anaconda2\lib\site-packages\linebot\api.py", line 271, in __check_error

raise LineBotApiError(response.status_code, error)

LineBotApiError: <LineBotApiError [Invalid reply token]>

9.成功運作(雖然出現上面那些錯誤)

但Line Bot卻可以正常運作了

10.設計回應的狀況

@handler.add(MessageEvent, message=TextMessage)

def handle_message(event):

msg = event.message.text

print(msg)

msg = msg.encode('utf-8')

if msg=="DOG":

line_bot_api.reply_message(event.reply_token,TextSendMessage(text="汪汪叫"))

if msg=="ian":

line_bot_api.reply_message(event.reply_token,TextSendMessage(text="甚麼"))

if msg=="lillian_hong":

line_bot_api.reply_message(event.reply_token,TextSendMessage(text="So cute"))

else:

line_bot_api.reply_message(event.reply_token,TextSendMessage(text=event.message.text))

小技巧

移除packeage

$ sudo apt-get --purge remove ngrok-client

利用docker 直接創建line bot

https://blog.wu-boy.com/2016/11/send-line-notification-using-docker-written-in-golang/

Python & Line Bot 實作參考

https://becoder.org/python-flask-requests-line-bot-api/

https://github.com/fuyuanli/PythonLineBot/blob/master/echo.py

2017年3月16日星期四

Why 『Map<> = new HashMap()』 not 『HashMap<> = new HashMap()』

Reason

1.less typing

2.more flexible.

For example:

You can see the image below, use Map<> = new HashMap() can easily change HashMap to TreeMap

2017年3月15日星期三

調派請求 servlet forward include sendRedirect

Reference
https://openhome.cc/Gossip/ServletJSP/DispatchRequest.html
https://www.javaworld.com.tw/jute/post/view?bid=6&id=50491&sty=1&tpg=1&age=1
https://read01.com/R3dy.html
http://fecbob.pixnet.net/blog/post/43270957-%5Bjsp%5D-servlet%E7%9A%84%E5%B9%BE%E7%A8%AE%E9%A0%81%E9%9D%A2%E8%B7%B3%E8%BD%89%E6%96%B9%E5%BC%8F

Sevlet 請求轉發主要的三種方式

redirect：
1.重定向,包含兩次瀏覽器請求，瀏覽器根據url請求一個新的頁面，所有的業務處理都轉到下一個頁面，url發生改變。
2.可以將頁面跳轉到任何頁面，不一定局限於本『web內部應用中』，如：
response.sendRedirect("HTTP://www.ycul.com");
3.跳轉後瀏覽器網址列變化。
這種方式要傳值出去的話，只能在url中帶parameter或者放在session中，無法使用request.setAttribute來傳遞。

response.sendRedirect("other.view");

forward：
1.轉發，將當前request和response對象保存，交給指定的url處理。並沒有表示頁面的跳轉，所以url不會發生改變。
2.頁面的路徑是相對路徑。forward方式『只能跳轉到本web應用中的頁面上。』
3.跳轉後瀏覽器網址列不會變化。
使用這種方式跳轉，傳值可以使用三種方法：url中帶
白話：就這樣了，我不會再對請求和回應做任何處理了

parameter，session，request.setAttribute
req.getRequestDispatcher("hello.jsp").forward(req, resp);

include
(通常不會在servlet內使用，而是應用在jsp<jsp:include>)：
意為包含，將當前request和response對象保存，交給指定的url處理，沒有頁面的跳轉，所以url不會發生改變，但是會將include的Servlet回應包括至目前的回應之中。
例如：
1.servletA 若include→servletB
2.servletB forward→jsp
則jsp會含有servletA『轉向前&轉向後執行的所有資訊』+ servletB『轉向前的資訊』
白話：servletA請servletB幫忙，等他完成請求和回應後，我會再對最後的請求和回應進行處理

RequestDispatcher dispatcher = req.getRequestDispatcher("other.view");
dispatcher.include(req, resp);

小提示
1.如果路徑以斜線("/")開頭，Container會將他視為『從這個Web應用程式的根目錄算起』，如果該路徑不是斜線開頭，就會被視為『相對於原始的請求』，但不能誘騙Container至Web以外的路徑，這是行不通的
總結
1.redirect與include、forward的區別在於是不是同一個Request，redirect會有兩次交互。

2.include與forward的區別在於輸出的內容，include包含本身servlet與跳轉頁面內容的結果，而forward不包含本身servlet的內容。
---------------------------------------------------------------------------------
include 相關補充

Refrence
https://www.javaworld.com.tw/jute/post/view?bid=6&id=50491&sty=1&tpg=1&age=1

在JSP技術中，您可以選擇在
1.編譯時期include一個網頁 <%@include>
2.執行時期include一個網頁 <jsp:include>

include一個網頁表示暫時將response的權限交給被include的網頁，在include的網頁執行完畢或送出內容之後，response的權限會再度回到要求include的原網頁。

1.<%@include> 選擇在編譯時期(程式碼compile的時候)include網頁的好處是效能，JSP引擎不用再動態呼叫被include的網頁，被include的網頁被當作要求include的網頁的一部份，您可以使用指令元素include來於編譯時期include網頁
通常用來include『靜態的網頁』
(當進到該網頁的第一次時，沒有帶入任何動態參數時適用)
(但該include網頁中依然可以寫JSTL or EL 的語法，依據某些情況，接收參數)

例如：

2.<jsp:include>來於動態時期include網頁，並可搭配<jsp:param>動作元素來指定參數給被include的網頁，被include的網頁執行完後，response的權限會交回到要求include的網頁中，我們使用以下這個例子來說明：

user=Jstin 此參數，是動態時期給予的

2017年3月9日星期四

基本的 jQuery 插件 - How to Create a Basic Plugin

Reference:
https://learn.jquery.com/plugins/basic-plugin-creation/
http://maidot.blogspot.tw/2011/04/jquery-this-this-different-between-this.html

1.創建一個基礎的jQuery plugin

-把我們創造的plugin加入至$.fn之中
(擴展$.fn.abc(),即$.fn.abc()是對jquery擴展了一個abc方法,那麼後面你的每一個jquery實例都可以引用這個方法了)

$.fn.greenify = function() {
    this.css( "color", "green" );
};
 
$( "a" ).greenify(); // Makes all the links green.

-注意這邊是使用css()，所以我們也用this，而非$(this)，
因為在JQuery中this代表目前的DOM對象，$(this)代表我們用JQuery所選取的JQuery對象，
在上述方法中，this代表greenify()，而他與.css()都同屬同一個jQuery object的一部份

2.Chaining 讓自建jQuery plugin可與其他方法相連
新增一行『return this』把該jQuery Object 傳回

$.fn.greenify = function() {
    this.css( "color", "green" );
    return this;
}
 
$( "a" ).greenify().addClass( "greenified" );

3.確保plugin不會與其他JavaScript libraries產生衝突
(Protecting the $ Alias and Adding Scope)
在最外層多加一層$()宣告

(function ( $ ) {
 
    $.fn.greenify = function() {
        this.css( "color", "green" );
        return this;
    };
 
}( jQuery ));

4.讓一個plugin根據參數，做出不同的動作

(function( $ ) {
 
    $.fn.popup = function( action ) {
 
        if ( action === "open") {
            // Open popup code.
        }
 
        if ( action === "close" ) {
            // Close popup code.
        }
 
    };
 
}( jQuery ));

5.透過each()，對多個指定的DOM elements進行處理

$.fn.myNewPlugin = function() {
 
    return this.each(function() {
        // Do something to each element here.
    });
 
};

Notice that we return the results of .each() instead of returning this. Since .each() is already chainable, it returns this, which we then return. This is a better way to maintain chainability than what we've been doing so far.

.each() 方法，會遍歷jQuery對象中的每一個DOM元素
然後透過$(this) 將每一個取到的DOM變成jQuery Object

 return this.each(function() {
    var link = $(this);
    link.css("color", setting.color)
});

6.讓一個plugin接受『一組設定』

(function ( $ ) {
 
    $.fn.greenify = function( options ) {
 
        // This is the easiest way to have default options.
        var settings = $.extend({
            // These are the defaults.
            color: "#556b2f",
            backgroundColor: "white"
        }, options );
 
        // Greenify the collection based on the settings variable.
        return this.css({
            color: settings.color,
            backgroundColor: settings.backgroundColor
        });
 
    };
 
}( jQuery ));

Example usage:

$( "div" ).greenify({
    color: "orange"
});

defaults 設定的顏色透過$.extend()把覆蓋成傳進來的值
The default value for color of #556b2f gets overridden by $.extend() to be orange.

7.完整範例
my_plugin.js

(function($) {

    $.fn.greenify = function(action, options) {
        var setting = $.extend({
            color: "green",
            backgroundColor: "white"
        }, options);

        if (action === 'div') {

            return this.css({
                color: setting.color,
                backgroundColor: setting.backgroundColor
            });
        };

        if (action === 'a') {
            return this.each(function() {
                var link = $(this);
                link.css("color", setting.color)
            });

        }

    };

}(jQuery));

template.html

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <script src="js/jquery-1.12.0.min.js"></script>
    <script src="js/my_plugin.js"></script>
    <script>
    $(document).ready(function() {
        $("a").greenify("a", {
            color: "red"
        });

        $("div").greenify("div", {
            color: "white",
            backgroundColor: "red"
        });
    });
    </script>
    <title>jQuery</title>

    <body>
        <a href="www.google.com.tw">GoogleGoog</a>
        <a href="www.yahoo.com.tw">YahooYahoo</a>
        <div>
            Hello
        </div>
    </body>

</html>

2017年2月5日星期日

用 cmd (命令列) 執行java程式

參考
https://caterpillar.gitbooks.io/javase6tutorial/content/c2_2.html

1.環境設定
設定 Path 變數是為了讓作業系統找到指定的工具程式（以 Windows 來說的話就是找到 .exe 檔案），則設定 Classpath 的目的就是為了讓Java執行環境找到指定的 Java 程式（也就是.class檔案）。

-設定path(jdk路徑)

-設定classpath(之後要去哪裡找class檔)

方法一

最簡單的方法是在系統變數中新增 Classpath 環境變數，在上圖中的「系統變數」按下「新增」鈕，在「變數名稱」欄位中輸入「Classpath」，在「變數值」欄位中輸入 Java 類別檔案的位置，例如可以輸入「.;C:\Program Files\Java\jdk1.6.0\ lib\tools.jar; C:\Program Files\Java\jre1.6.0\lib\rt.jar」（jar 檔是 zip 壓縮格式，當中就包括了 .class 檔案以及 jar 中的 Classpath 設定），每一筆資料中間必須以「;」作為分隔。

方法二

使用的 JDK 工具程式有 Classpath 指令選項，在執行工具程式時一併指定 Classpath：

javac -classpath classpath1;classpath2 …

方法三

在文字模式下執行以下的指令，以直接設定目前的環境變數包括 Classpath 變數（這個設定在下次重新開啟文字模式時就不再有效）：

set CLASSPATH=.;classpath1;classpath2

重點觀念：

少了 < .; > 會造成執行正確和錯誤的強烈差距

『.』這個小細節是有一些原因的.

在沒有做任何設定之下 , 預設的CLASSPATH就是一個『.』

這個『.』代表命令提示字元的當前目錄

沒設定比設定錯誤還好一點點(對新手而言) , 只要 .class 在當前目錄 , 你還是可以執行程式

但是你若下了設定

SET CLASSPATH=C:\j2sdk1.4.1_03\lib;C:\j2sdk1.4.1_03\lib\tools.jar;

少了這個. 若你當前的目錄卻不是 C:\j2sdk1.4.1_03\lib , 就會發生NoClassDefFoundError

正確的設定

SET CLASSPATH=.;C:\j2sdk1.4.1_03\lib;C:\j2sdk1.4.1_03\lib\tools.jar;

1.表示當前的目錄 ,

2.C:\j2sdk1.4.1_03\lib\ ,

3.以及 tools.jar 內的class都可以載入

2.範例

a.撰寫java程式(帶有package test; → 之後執行時，路徑要特別注意)

b.進行編譯javac (順便指定classpath)

javac -classpath C:\Users\ytchen\Desktop\test test6.java

c.執行class檔

路徑：C:\Users\ytchen\Desktop\test>

命令：java test6

若是在程式碼中，有設定package的情況下，路徑要修改，否則會找不到檔案

(程式會去找test\test\test6)

所以要往上一層

並且利用『.』的方式，設定目錄，告知檔案在哪

路徑：C:\Users\ytchen\Desktop>

命令：java test.test6

2017年1月19日星期四

RDB - 文字型態的資料要用什麼樣的格式儲存? char, varchar, nchar, nvarchar??

參考網址：
https://dotblogs.com.tw/topcat/archive/2008/03/04/1144.aspx

定義：

char與nchar『宣告的是固定的長度』，因此如果宣告char(5)，但是只放a這個字，那麼就會補另外4個空白，會補空白補滿是他的特性，而nchar(5)也是會放滿5個字，但是每個字無論中英數都會用2個Bytes來存放

varchar與nvarchar都是『不定長度』，因此如果宣告varchar(5)，但是只放a這個字，那麼就會放一個a，不會補空白。而如果宣告nvarhcar(5)那還是只放a這個字，但是會用2Bytes來存放。如果放了【中】這個中文字，在varchar會占用2個位子，但是nvarchar指占用1個位子。

結論：
在規畫上，只要存放的資料有可能有中文，就會加n。而除非確定資料固定會是幾位不變，不然資料長度不特定就會宣告加上var。

訂閱：文章 (Atom)

2017年7月4日 星期二

說明

實作

1.申請帳號

2.設定ngrok

3.執行Line API

4.使用Flake 作為Line bot 的server

5.碰到的問題，不斷的502 Bad Gateway

6.自創的Line Bot帳號

7.嘗試在本機Jupyter使用falsk

8.在本機操作Lint Bot

9.成功運作(雖然出現上面那些錯誤)

10.設計回應的狀況

小技巧

移除packeage

利用docker 直接創建line bot

Python & Line Bot 實作參考

2017年3月16日 星期四

2017年3月15日 星期三

2017年3月9日 星期四

2017年2月5日 星期日

2017年1月19日 星期四

2017年7月4日星期二

2017年3月16日星期四

2017年3月15日星期三

2017年3月9日星期四

2017年2月5日星期日

2017年1月19日星期四