---
title: Bottender
tags: 107-2 Ric's Web Programming
slideOptions:
theme: beige
transition: 'fade'
slidenumber: true
# parallaxBackgroundImage: 'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg'
---


Spring 2019 。 Ric Huang

---

### Objectives

1. 在開源的世界，取之於社會、就要用之於社會，希望大家未來都能參與開源社群的貢獻！
* 今天除了教一個開源的專案 Bottender 之外，也會邀請到 Bottender 的兩位原作者現身說法，跟大家分享他們打造這個開源專案的心得！
2. 當今的許多 web applications 都會使用到一些大平台的 APIs, 以提供更多元的服務，或者是取其社群的資源，像是 Google Map, Facebook Messenger, etc. 今天另外一個目的就是要教大家如何善加利用第三方的服務，讓你的 web app 有更寬廣的應用場域！

---

### Introduction to Bottender

* Bottender is an open-source chatbot building framewok that facilitates you to easily build a chatbot on top of various instant messaging platforms, such as Messenger, Line, Telegram, Slack, and Viber.
* Official Website: https://bottender.js.org/
* Github: https://github.com/Yoctol/bottender
* Contributors: https://www.yoctol.com/

---

## What is a "chatbot"?

---

### Your Very First Chatbot

npm install -g bottender
bottender init

* cd to your bot project directory, and type "npm run dev"
* Talk to your bot!!
* Modify the code in index.js

---

## Building a Messenger Chatbot with Bottender [[link](https://hackmd.io/x77Z3IusQO2CLZEKg4OrsA?view)]

----

### Create more bot responses

* Change the code in "src/index.js"

* Understand "regular expression"

* Learn/Use "Natural Language Understanding (NLU)" APIs

----

### Regular Expression ([wiki](https://en.wikipedia.org/wiki/Regular_expression))

* *A regular expression, regex or regexp (sometimes called a rational expression) is a sequence of characters that define a search pattern. Usually such patterns are used by string searching algorithms for "find" or "find and replace" operations on strings, or for input validation. It is a technique developed in theoretical computer science and formal language theory.*

----

### Regular Expression Basics

.   : matches any single character except \n

*   : matches 0 or more instances of the preceding reg
exp

+   : matches 1 or more instances of the preceding reg exp

?   : matches 0 or 1 of the preceding regular expression

|   : matches the preceding or following reg exp

[ ] : defines a character class  (e.g. [a-zA-Z])

( ) : groups enclosed regular expression into a new reg exp

"…" : matches everything within the " " literally

----

### Regular Expression Examples

* a natural number: e.g. 12345
==> [1-9][0-9]*

* a word: e.g. cat
==> [a-zA-Z]+

* a C/C++ variable: e.g. _name38
==> [_a-zA-Z][_0-9a-zA-Z]*

* a (possibly) signed integer: 12345 or -12345
==> [-+]?[1-9][0-9]*

* a floating point number: 1.2345
==> [0-9]*"."[0-9]+

----

### More on Regular Expression

x|y	   x or y

x/y	   x, only if followed by y (y not removed from input)

x{m,n}     m to n occurrences of x

^x	   x, but only at beginning of line

x$	   x, but only at end of line

----

### Meta Characters

* meta-characters (do not match themselves, because they are used in the preceding reg exps):

* to match a meta-character, prefix with ```\```

* to match a backslash, tab or newline, use ```\\, \t,  or \n```

----

### Regular Expression in Javascript

let re = /pattern/flags;

// or

let re = new RegExp('pattern', 'flags');

----

### Regular Expression Flags 

![](https://i.imgur.com/pQfFrET.png)

----

### Regular Expression Methods

![](https://i.imgur.com/B7sScBK.png)

---

### Appendix: YOCTOL.AI

* Apply a freemium account at: https://app.yoctol.ai

* Help docs at: https://docs.yoctol.ai

---

## That's it!