---
# System prepended metadata

title: 智慧客服 3/22 上課內容
tags: [智慧客服]

---

# 智慧客服 3/22 上課內容 
###### tags: `智慧客服`

# 第五章的部分

####  dashboard.css
![](https://i.imgur.com/6E8Baf1.png)
```clike=
body {
    font-size: .875rem;
  }
  
  .feather {
    width: 16px;
    height: 16px;
    vertical-align: text-bottom;
  }
  
  /*
   * Sidebar
   */
  
  .sidebar {
    position: fixed;
    top: 0;
    /* rtl:raw:
    right: 0;
    */
    bottom: 0;
    /* rtl:remove */
    left: 0;
    z-index: 100; /* Behind the navbar */
    padding: 48px 0 0; /* Height of navbar */
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
  }
  
  @media (max-width: 767.98px) {
    .sidebar {
      top: 5rem;
    }
  }
  
  .sidebar-sticky {
    position: relative;
    top: 0;
    height: calc(100vh - 48px);
    padding-top: .5rem;
    overflow-x: hidden;
    overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
  }
  
  .sidebar .nav-link {
    font-weight: 500;
    color: #333;
  }
  
  .sidebar .nav-link .feather {
    margin-right: 4px;
    color: #727272;
  }
  
  .sidebar .nav-link.active {
    color: #007bff;
  }
  
  .sidebar .nav-link:hover .feather,
  .sidebar .nav-link.active .feather {
    color: inherit;
  }
  
  .sidebar-heading {
    font-size: .75rem;
    text-transform: uppercase;
  }
  
  /*
   * Navbar
   */
  
  .navbar-brand {
    padding-top: .75rem;
    padding-bottom: .75rem;
    font-size: 1rem;
    background-color: rgba(0, 0, 0, .25);
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
  }
  
  .navbar .navbar-toggler {
    top: .25rem;
    right: 1rem;
  }
  
  .navbar .form-control {
    padding: .75rem 1rem;
    border-width: 0;
    border-radius: 0;
  }
  
  .form-control-dark {
    color: #fff;
    background-color: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .1);
  }
  
  .form-control-dark:focus {
    border-color: transparent;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
  }
```
#### hello.html
```clike=
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Homepage</title>
    <link rel="stylesheet" href="/static/css/bootstrap.css">
    <link rel="stylesheet" href="/static/css/dashboard.css">
</head>
<body>
    {% include 'navbar.html' %}
    
    <div class="row">
        {% include 'sidemenu.html' %}
        <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
            <div class="container">Hello, {{useremail}}</div>
        </main>
      </div>

    <script src="/static/js/bootstrap.js"></script>
</body>
</html>
```

#### index.html
```clike=
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Homepage</title>
    <link rel="stylesheet" href="/static/css/bootstrap.css">
    <link rel="stylesheet" href="/static/css/dashboard.css">
</head>
<body>
    {% include 'navbar.html' %}
    <div class="row">
        {% include 'sidemenu.html' %}
        <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
            <div class="container">123</div>
        </main>
      </div>
    

    <script src="/static/js/bootstrap.js"></script>
</body>
</html>
```
#### login.html
```clike=
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>
    <link rel="stylesheet" href="/static/css/bootstrap.css">
    <link rel="stylesheet" href="/static/css/dashboard.css">
</head>

<body>
    {% include 'navbar.html' %}
    <div class="row">
        {% include 'sidemenu.html' %}
        <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
            <div class="container">
                <form action="/login" method="POST">
                    <div class="mb-3">
                        <label for="exampleInputEmail1" class="form-label">Email address</label>
                        <input name="email" type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
                        <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
                    </div>
                    <div class="mb-3">
                        <label for="exampleInputPassword1" class="form-label">Password</label>
                        <input name="password" type="password" class="form-control" id="exampleInputPassword1">
                    </div>
                    <button type="submit" class="btn btn-primary">Submit</button>
                </form>
            </div>
        </main>
      </div>
    
<script src="/static/js/bootstrap.js"></script>
</body>

</html>
```
#### navbar.html
```clike=
<header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
  <a class="navbar-brand col-md-3 col-lg-2 me-0 px-3" href="#">Company name</a>
  <button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">
  <ul class="navbar-nav px-3">
    <li class="nav-item text-nowrap">
      <a class="nav-link" href="#">Sign out</a>
    </li>
  </ul>
</header>
```
#### sidemenu.html
```clike=
<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
    <div class="position-sticky pt-3">
      <ul class="nav flex-column">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
            Dashboard
          </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="/login">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline></svg>
              登入
            </a>
          </li>
        <li class="nav-item">
            <a class="nav-link" href="/logout">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline></svg>
              登出
            </a>
          </li>
        <li class="nav-item">
          <a class="nav-link" href="#">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline></svg>
            Orders
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-shopping-cart"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg>
            Products
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-users"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
            Customers
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bar-chart-2"><line x1="18" y1="20" x2="18" y2="10"></line><line x1="12" y1="20" x2="12" y2="4"></line><line x1="6" y1="20" x2="6" y2="14"></line></svg>
            Reports
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-layers"><polygon points="12 2 2 7 12 12 22 7 12 2"></polygon><polyline points="2 17 12 22 22 17"></polyline><polyline points="2 12 12 17 22 12"></polyline></svg>
            Integrations
          </a>
        </li>
      </ul>

      <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
        <span>Saved reports</span>
        <a class="link-secondary" href="#" aria-label="Add a new report">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg>
        </a>
      </h6>
      <ul class="nav flex-column mb-2">
        <li class="nav-item">
          <a class="nav-link" href="#">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
            Current month
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
            Last quarter
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
            Social engagement
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
            Year-end sale
          </a>
        </li>
      </ul>
    </div>
  </nav>
```
#### success.html
```clike=
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Success</title>
    <link rel="stylesheet" href="/static/css/bootstrap.css">
    <link rel="stylesheet" href="/static/css/dashboard.css">
</head>
<body>
    {% include 'navbar.html' %}
    <div class="row">
        {% include 'sidemenu.html' %}
        <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
            <div class="container"><h1>
                {% if successcode==3000 %}登入成功
                {% elif successcode==3001 %}登出成功
                {% endif %}
        </h1>
            </div>
        </main>
      </div>
    

    <script src="/static/js/bootstrap.js"></script>
</body>
</html>
```
# Cookie
[EditThisCookie](https://chrome.google.com/webstore/detail/editthiscookie/fngmhnnpilhplaeedifhccceomclgfbg?utm_source=chrome-ntp-icon)

# g物件
![](https://i.imgur.com/AUMdIEi.png)

# 更新git
![](https://i.imgur.com/CnwBIgM.png)

# anaconda
![](https://i.imgur.com/DsC5xY5.png)
![](https://i.imgur.com/RTZZJRp.png)
![](https://i.imgur.com/0x8G4fD.png)
[PyAudio 0.2.11](https://pypi.org/project/PyAudio/)
[pipwin 0.5.1](https://pypi.org/project/pipwin/)

# vscode
ctrl+shift+n
![](https://i.imgur.com/DedCSLg.png)
![](https://i.imgur.com/ZahcKer.png)
![](https://i.imgur.com/5hn8hrF.png)


# Line Bot
[ngrok](https://ngrok.com/)
![](https://i.imgur.com/ECOulF3.png)
![](https://i.imgur.com/wA3JS8n.png)
路徑 金鑰
![](https://i.imgur.com/3Gdz65P.png)
完成授權以後 在這環境下執行就可以進入
![](https://i.imgur.com/pMptdOn.png)
成功畫面如下:快來連我的網站吧:)
![](https://i.imgur.com/e5AWRlv.png)
http://e3056b7d4f7a.ngrok.io

# sqlite
![](https://i.imgur.com/WRJIRo6.png)

[linebiz](https://tw.linebiz.com/login/)
![](https://i.imgur.com/BZ7xJdt.png)
![](https://i.imgur.com/pTJvIZh.png)
![](https://i.imgur.com/ZYbMTWD.png)
![](https://i.imgur.com/fatxP4a.png)

[line管理介面](https://developers.line.biz/en/)
[line github](https://github.com/line/line-bot-sdk-python)
pip install line-bot-sdk
![](https://i.imgur.com/wZmIktu.png)
![](https://i.imgur.com/J5c1Oyj.png)
![](https://i.imgur.com/T8liayV.png)
![](https://i.imgur.com/gNBSHU7.png)
pip install line-bot-sdk
pip install flask

https://lin.ee/vK9Q4Bt


#github LINE聊天機器人套件Python
https://github.com/line/line-bot-sdk-python

#### Demo_5-0.py
```clike=
# import flask related
from flask import Flask, request, abort
from urllib.parse import parse_qsl
# import linebot related
from linebot import (
    LineBotApi, WebhookHandler
)
from linebot.exceptions import (
    InvalidSignatureError
)
from linebot.models import (
    MessageEvent, TextMessage, TextSendMessage,
    LocationSendMessage, ImageSendMessage, StickerSendMessage,
    VideoSendMessage, TemplateSendMessage, ButtonsTemplate, PostbackAction, MessageAction, URIAction,
    PostbackEvent
)

# create flask server
app = Flask(__name__)
# your linebot message API - Channel access token (from LINE Developer)
line_bot_api = LineBotApi('tKr/X/pnkMZvq/LYZDj7eZH10dzO7MXYwMM0Z5WhBx3St59vagLriBgJCVauk8pQP/BCp7SuYdupXq8/nV6TeUqvDP/9dHEWDGk5VxZpttteNY+yrWLHMb+2wPyP1DdWDLsBI3fnIf9ngwwFDM5p4AdB04t89/1O/w1cDnyilFU= ')
# your linebot message API - Channel secret
handler = WebhookHandler('3167fe42b18fb609f0a99a31f97abc45')

@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:
        print('receive msg')
        handler.handle(body, signature)
    except InvalidSignatureError:
        print("Invalid signature. Please check your channel access token/channel secret.")
        abort(400)
    return 'OK'

# handle msg
@handler.add(MessageEvent, message=TextMessage)
def handle_message(event):
    # get user info & message
    user_id = event.source.user_id
    msg = event.message.text
    user_name = line_bot_api.get_profile(user_id).display_name
    
    # get msg details
    print('msg from [', user_name, '](', user_id, ') : ', msg)

    buttons_template_message = TemplateSendMessage(
        alt_text='Buttons template',
        template=ButtonsTemplate(
            thumbnail_image_url='https://i.imgur.com/w1JM4f5.jpg',
            title='問一下唷~',
            text='請問你想喝哪一種飲料',
            actions=[
                PostbackAction(
                    label='晚點喝',
                    display_text='我想晚點再喝',
                    data='action=buy&itemid=1'
                ),
                MessageAction(
                    label='我想喝茶',
                    text='給我一杯茶吧'
                ),
                MessageAction(
                    label='我想喝咖啡',
                    text='比較想喝咖啡'
                ),
                URIAction(
                    label='想查一下營養資訊',
                    uri='tel:+886933333252'
                )
            ]
        )
    )

    line_bot_api.reply_message(event.reply_token, 
                            #    [TextSendMessage(text = msg)
                            #    ,
                            #     StickerSendMessage(package_id='11537',sticker_id='52002734'),
                            #     ImageSendMessage(original_content_url='https://www.iii.org.tw/assets/images/nav-all/logo.png', 
                            #                      preview_image_url='https://www.iii.org.tw/assets/images/nav-all/logo.png'),
                            #     LocationSendMessage(
                            #          title='Store Location',
                            #          address='Taipei 101',
                            #          latitude=25.033981,
                            #          longitude=121.564506)
                                # ]
                                # VideoSendMessage(
                                #     original_content_url='https://d18def1b3f81.ngrok.io/static/dog.mp4',
                                #     preview_image_url='https://d18def1b3f81.ngrok.io/static/dog.png'
                                # )
                                buttons_template_message
                                )
    
    # push text_msg
    # line_bot_api.push_message(user_id,
    #                           TextSendMessage(text = '您好^^'))

@handler.add(PostbackEvent)
def handle_postback(event):
    print(event.postback.data)
    print(parse_qsl(event.postback.data))
    print(dict(parse_qsl(event.postback.data)))
    data=dict(parse_qsl(event.postback.data))
    print(data['action'])

# run app
if __name__ == "__main__":
    app.run(host='127.0.0.1', port=5000)
```

[github](https://github.com/benctw/labview360.com_line_chatbot_app)

[金鑰](https://dashboard.ngrok.com/get-started/your-authtoken)