教學

Line ChatBot 聊天機器人教學 Day3 -第一份程式碼

發佈於

準備工作

還記得上次教學幫我們機器人準備的”家”吧
接下來我們需要準備幾樣東西上傳到上面
1. app.py (主程式 這裡我使用的名稱為app,可依照需求更改)
2. Procfile (用來跟 heroku 解釋現在放在這個家上面的程式是什麼樣的,他才知道如何執行)
3. requirements.txt (跟heroku說我們所需要用到的python套件)
這邊先提供上述檔案範例的載點,基本上先用教學提供的再去做修改即可
載點: 點我下載
三個檔案都要下載喔
1. Procfile
2. requirement.txt
3. app.py (主程式)

設定 Line developer

use webhooks 設定為 enabled
Webhook URL 填上 : https://[heroku的app名稱].herokuapp.com/callback
以此教學範例為 : https://linebottutorial.herokuapp.com/callback

App.py 基礎配置

打開我們的主程式 app.py 接著我們需要修改一些內容
1. channel access token 設定
2. channel secret 設定

可以在Line developer下的 channel settings 找到以下兩列:

Channel access token

Channel Secret

將兩個內容分別貼到我們app.py的以下兩個區域
line_bot_api = LineBotApi(‘Channel access token’)
handler = WebhookHandler(‘Chennel secret’)

上傳程式碼

依照上次的教學 將我們的程式碼推到機器人的”家”
檔案需位於同個資料夾目錄下:
app.py
Procfile
requirements
1. cd 檔案目錄 (前一篇教學文git初始化過的資料夾)
2. git add . (將程式與其他檔案加入版控)
3. git commit -m “first push” (提交版本)
4. git push -f heroku master (將版本推上heroku 大功告成)

加入好友 測試

在Line developers 下可以找到自己line機器人的QR Code
拿起手機 將他加入好友 然後傳一個訊息給他試試看吧!

下一次教學我們將會開始修改我們的機器人,讓他會一些有趣的應答喔!

教學

Kotlin Android Gson

發佈於

Gson

序列化Java物件變JSON字串,或反序列化JSON字串成Java物件

Gson與RecyclerView與Glide與Anko的搭配
解析出來的需要自訂List存起來Gson裡需要加入TypeToken
{"account":"jack","date":"20160501","amount":1500,"type":0},
{"account":"jack","date":"20160501","amount":6000,"type":0},
{"account":"jack","date":"20160502","amount":3000,"type":1},
{"account":"jack","date":"20160501","amount":2000,"type":0},
{"account":"jack","date":"20160501","amount":1000,"type":1}

1.Gradle導入函示庫

implementation 'com.google.code.gson:gson:2.8.5'
implementation "org.jetbrains.anko:anko:0.10.8"
implementation 'com.github.bumptech.glide:glide:4.9.0'
implementation 'androidx.recyclerview:recyclerview:1.0.0'

2.先創建JSON抓下來的JavaBean

可以去載外掛
file>Settings>Plugins>JSON To Kotlin Class>重啟Android Studio
使用
Alt + Insert
 
data class NewsApi(
    val articles: List<Article>,
    val status: String,
    val totalResults: Int
)

data class Article(
    val author: String,
    val content: Any,
    val description: String,
    val publishedAt: String,
    val source: Source,
    val title: String,
    val url: String,
    val urlToImage: String
)

data class Source(
    val id: Any,
    val name: String
)

3.利用Gson解析JSON

val myURL = "https://newsapi.org/v2/top-headlines?country=tw&apiKey=a43a0c3447c448b795632938f18f13f6"
doAsync {
            val json = URL(myURL).readText()
            val newsApi = Gson().fromJson<NewsApi>(json, NewsApi::class.java)
            uiThread {
                recycler.adapter = ArticleAdapter(newsApi.articles)
            }
        }

4.配合RecyclerView 創建ViewHolder

recycler.apply {
            setHasFixedSize(true)
            layoutManager = LinearLayoutManager(this@MainActivity)
        }
		
class ArticleHolder(view: View) : RecyclerView.ViewHolder(view) {
        val image = view.article_image
        val title = view.article_title
    }

5.創建Adapter

inner class ArticleAdapter(val articles: List<Article>) : RecyclerView.Adapter<ArticleHolder>() {
        override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ArticleHolder {
            return ArticleHolder(layoutInflater.inflate(R.layout.row_article, parent, false))
        }

        override fun getItemCount(): Int {
            return articles.size
        }

        override fun onBindViewHolder(holder: ArticleHolder, position: Int) {
            val article = articles.get(position)
            holder.title.text = article.title

            if (article.urlToImage != null) {
                Glide.with(holder.itemView.context)
                    .load(article.urlToImage)
                    .override(150, 120)
                    .into(holder.image)
            } else {
                Glide.with(holder.itemView.context)
                    .load("https://www.bomb01.com/upload/news/original/c95e0d21eda50ebc16d5f8ef568f60a7.png")
                    .override(150, 500)
                    .into(holder.image)
            }

            holder.itemView.setOnClickListener {
                val intent = Intent(this@MainActivity, WebActivity::class.java)
                intent.putExtra("URL", article.url)
                startActivity(intent)
            }
        }
    }
教學

Line ChatBot 聊天機器人教學 Day2 -Heroku 部署

發佈於

讓我們的機器人有一個"家"

聊天機器人就像是一個24小時待命的工人一樣,當收到使用者傳送的訊息後會馬上做出相對應的回應.

我們的第一個工作就是讓我們的機器人邏輯部署在Server上,讓他24小時待命 當我們對機器人傳送訊息後,Line的伺服器便會去機器人的”家”通知有新的使用者訊息要處理

當我們的機器人處理完後會把資料 咻~ 的丟給Line伺服器 再轉傳回我們手中 而今天要做的就是把我們機器人的”家”建立起來喔!

登入Heroku帳號 並創建App

在右上角點選 “New” 並點選 Creat new app

輸入完App名字後即可完成創建

安裝 Heroku CLI

Heroku CLI 安裝網址

這個工具是heroku 的 command line interface 以後我們要上傳我們的機器人邏輯就要透過他
安裝完後 只要開啟command line(小黑窗) 即可使用 指令的部分會在後面做介紹

本地端創建專案目錄

以mac系統為例 在想要的根目錄創造你的專案資料夾 這邊我創立了一個空資料夾叫做linebottutorial 以後我的程式碼就會放在這個資料夾裡面
之後開啟cmd (終端機) 進行下列步驟

$ heroku login
$ cd linebottutorial $ git init $ heroku git:remote -a linebottutorial

上述步驟分別為:
1.將heroku cli登入heroku帳號
2.將工作環境切換到你的專案位置
3.初始化git (這邊不詳細說明git的使用方式 簡單來說heroku是透過git部署)
4.將本地工作環境與遠端連接 (linebottutorial的部分替換為你們的heroku app名稱)

上述步驟只需在第一次創建專案時進行,以後只要在此目錄下進行程式碼的推送就會自動推送到我們機器人的”家”了

總結:

這樣我們機器人的家就已經完成部署囉,是不是很簡單 
下一次的教學就會開始撰寫程式碼(python) 並讓我們的機器人開始回應我們的訊息囉!

教學

Line ChatBot 聊天機器人教學 Day1

發佈於

此篇教學系列終將會帶領你做出最基礎的Line聊天機器人,主要透過python撰寫程式碼,並發布於Heroku上

python : 機器人的程式邏輯 收到訊息做的動作…等

Heroku : 類似Server的概念 你需要將你的程式佈署在上面,他會24小時待命(當然免費帳號有休眠機制,不過已很足夠使用) 當收到訊息時 Line 將會以Webhook的方式去調用我們部署在這上面的程式碼

事前準備

1. LineDeveloper 帳號 可透過個人line帳號登入 

2. Heroku 帳號 可免費申請,免費帳戶有一些基本限制 不過對基本的聊天機器人已經很夠用

註冊帳號

註冊完後即可,後面佈署時才會用到

1. 創建Line Developer Provider

創建聊天機器人前我們會需要一個提供者,有點像是開發者的意思,在Line Developer中最左邊的選單選擇 Providers 並點選 creat new provider 並輸入你想創建的開發者名稱

2. 創建 Messaging Api

創建完提供者後我們選擇 Messaging Api

接著輸入聊天機器人的一些基礎資訊 圖像(App icon),名稱(App name)….類別等
圖像可以隨時更改所以這邊可以先不設定
名字的話7天才能更改一次 所以請想好在設定~
類別(Category)的部分可依照自身需求選擇

都設定好之後就確認下去即可 設定完後就會看到我們有一個 Chat bot 能用啦 (chatbotTutorial 為我的Provider名稱)

3. 完成準備工作

點選我們的頻道即可進入我們機器人的設定啦 下一篇教學文我們將會開始介紹如何設定我們的頻道並且讓我們的機器人可以開始回應使用者囉!