---
# System prepended metadata

title: CJJS前端報告05/29

---

<p class="text-center">
<br><br>-CJJS-<br><Made by Team><br>
</p>

CJJS前端報告05/29
===
# 預計本週目標
    
*   - [ ] 確認共用變數名稱
*   - [ ] 互動介面的回傳參數
*   - [x] 把教授基本介面做出來
*   - [x] 把教授初始化介面出來
*   - [x] 把學生基本介面做出來
*   - [ ] 把學生初始化介面出來

# 分工
```mermaid
    graph TD;
前端-->學生
前端-->教授
學生-->鄭翔遠
教授-->李品澤
```

    
# 一句話概括兩週狀況
>[name=Jerry]

### ==挫折、挫折還是挫折==

<br>

# 研究目標

    
*   - [x] Google-Workspace-API :x:
*   - [x] line_liff :x:
*   - [x] line_bot介面初始化 :O:

---
## :x:  Google-Workspace-API
*     1.監聽表單回應需要付費
*     2.牽扯到太多外部API的協作（未來優化考慮）
*     3.短期做不出來

---
## :x:  line_liff
*     1.每個表單需要花心力學習HTML,JAVASCRIPT,CSS
*     2.需要在購買網域Domain
>唯一優點就是可以客製化
[網頁點我](https://kjstudio.fly.dev)
![](https://hackmd.io/_uploads/BJY2Q5bL2.png)
<br>
![](https://hackmd.io/_uploads/rkXJ45ZLn.png)

<br>
    
## :o:  line_bot介面初始化
*     1.資料庫大量存取
*     2.大量迴圈
>優點：最直觀最方便，省錢，初步產品目標

![](https://hackmd.io/_uploads/SkUtL5bUh.jpg)
<br>
---
![](https://hackmd.io/_uploads/rkatI9bLh.jpg)
<br>
---
![](https://hackmd.io/_uploads/HygAtLc-83.png)
<br>
---
![](https://hackmd.io/_uploads/HkaY89-Ln.jpg)
<br>
---
![](https://hackmd.io/_uploads/BJTFI5-Ln.jpg)
<br>
---
![](https://hackmd.io/_uploads/S1AFIqbU3.png)
<br>
---
![](https://hackmd.io/_uploads/By0tI5WLn.png)
<br>
---
![](https://hackmd.io/_uploads/HyAt8qZ83.png)
<br>
---
![](https://hackmd.io/_uploads/ByRtI5ZL3.jpg)
<br>
---
![](https://hackmd.io/_uploads/ryAKLqW83.jpg)
<br>
---
![](https://hackmd.io/_uploads/B1CK8qb8n.jpg)
<br>
---
![](https://hackmd.io/_uploads/Sy0KI5bI3.jpg)
<br>
---
![](https://hackmd.io/_uploads/SykcL9bL3.png)
<br>
---
![](https://hackmd.io/_uploads/rkk5U5WI2.jpg)

---

 [測試影片](https://gcdn.2mdn.net/videoplayback?expire=1685359458&ei=4Rp0ZPmAPe3Gs8IPr-WG4Ao&ip=0.0.0.0&id=e85464e193299b9f&itag=309&source=web_video_ads&requiressl=yes&susc=aal&mime=video/mp4&vprv=1&gir=yes&clen=21636887&dur=34.901&lmt=1685330638538301&txp=0000224&sparams=expire,ei,ip,id,itag,source,requiressl,susc,mime,vprv,gir,clen,dur,lmt&sig=AOq0QJ8wRgIhALh9KYAwHacsrm6Y6GfD8dvUW0dGdyYC8EvzK7VhkSjTAiEAtNGOyldiG8X5V2nzLK_hWB1ku0H0Drg6JINhEuzyxEw=)  
  
    


    
    
    
    
# 使用者介面實作
>這個是表單程式碼，說明可變性很高，可以設計的讓使用者用起來簡單
``` python=
    def create_rich_menu1():
    # 創建 Rich Menu 1 的內容
    rich_menu1 = RichMenu(
        size=RichMenuSize(width=2500, height=1686),
        selected=True,
        name="學生第一頁",
        chat_bar_text="打開/關閉選單",
        areas=[
                RichMenuArea(
                    bounds=RichMenuBounds(x=313, y=0, width=700, height=313),
                    action=PostbackAction(label='Switch Menu1', data='switch1')
                ),
                RichMenuArea(
                    bounds=RichMenuBounds(x=700, y=0, width=900, height=313),
                    action=PostbackAction(label='Switch Menu2', data='switch2')
                ),
                RichMenuArea(
                    bounds=RichMenuBounds(x=900, y=0, width=1300, height=313),
                    action=PostbackAction(label='Switch Menu3', data='switch3')
                ),
                RichMenuArea(
                    bounds=RichMenuBounds(x=0, y=0, width=313, height=313),
                    action=MessageAction(label="Hello", text="上一頁")
                ),
                RichMenuArea(
                    bounds=RichMenuBounds(x=1300, y=0, width=2500, height=313),
                    action=MessageAction(label="Hello", text="下一頁")
                ),
                RichMenuArea(
                    bounds=RichMenuBounds(x=0, y=313, width=1250, height=700),
                    action=MessageAction(label="1", text="1")
                ),
                RichMenuArea(
                    bounds=RichMenuBounds(x=1250, y=313, width=2500, height=700),
                    action=MessageAction(label="2", text="2")
                ),
                RichMenuArea(
                    bounds=RichMenuBounds(x=0, y=700, width=1250, height=1684),
                    action=MessageAction(label="3", text="3")
                ),
                RichMenuArea(
                    bounds=RichMenuBounds(x=1250, y=700, width=2500, height=1684),
                    action=MessageAction(label="4", text="4")
                )
        ]
    )
    rich_menu_id1 = line_bot_api.create_rich_menu(rich_menu=rich_menu1)
    # 上傳 Rich Menu 1 的圖片
    with open('C:/Users/USER/Desktop/python/學生第一頁.png', 'rb') as f:
        line_bot_api.set_rich_menu_image(rich_menu_id1, 'image/png', f)
    # 將 Rich Menu 1 設定給頻道
    line_bot_api.set_default_rich_menu(rich_menu_id1)
    #刪除menu1
    #line_bot_api.delete_rich_menu(rich_menu_id1)

```

    
# 圖片是用canva設計 此圖為richmenu1
![](https://hackmd.io/_uploads/rJ2g0FWLh.png)
#    richmenu2
![](https://hackmd.io/_uploads/rJP3W5ZUn.png)
#    richmenu3
![](https://hackmd.io/_uploads/S1h3Zc-U2.png)
 
    
    
    
>處理postback的函式
```python=
    @handler.add(PostbackEvent)
def handle_postback(event):
    postback_data = event.postback.data
    if postback_data == 'switch1':
        reply_text = '第一頁'
    # 刪除當前的RichMenu並且更新
        current_rich_menu_id = line_bot_api.get_default_rich_menu()
        if current_rich_menu_id is not None:
            line_bot_api.delete_rich_menu(current_rich_menu_id)
        MYrichmenu.create_rich_menu1()
    elif postback_data == 'switch2':
        reply_text = '第二頁'
        current_rich_menu_id = line_bot_api.get_default_rich_menu()
        if current_rich_menu_id is not None:
            line_bot_api.delete_rich_menu(current_rich_menu_id)
        MYrichmenu.create_rich_menu2()
    elif postback_data == 'switch3':
        reply_text = '第三頁'
        current_rich_menu_id = line_bot_api.get_default_rich_menu()
        if current_rich_menu_id is not None:
            line_bot_api.delete_rich_menu(current_rich_menu_id)
        MYrichmenu.create_rich_menu3()
    line_bot_api.reply_message(event.reply_token, TextSendMessage(text=reply_text))
    
``` 
* 目前的做法與問題
    三個函式richmenu1、richmenu2、richmenu3
    我給定固定的位置的區域按了能夠postback一個特定的字元，能夠讓我的postback函式去執行不一樣的指令。
    首先，這樣做的問題有兩點。
    第一個是透過這種方式切換頁面不夠順暢，使得使用者操作不適
    第二點是我沒有考慮到要根據不同使用者(不同userID)去做調整，這樣會使得我只要收到postback特定'data'所有使用者的會變動，這不是我希望發生的
* 目前想到的解決方法
    richmenu裡面有個用法是
>這個用法似乎能解決切換時的lag感
```python=
action": {
            "type": "richmenuswitch",
            "richMenuAliasId": "richmenu-alias-b",
            "data": "richmenu-changed-to-b"
}
```
關於根據個別userID去做變化，有個unlink rich menu from user用法我還要再研究
    
-----

#  :star:下周目標
*     1.模擬介面與功能的連結
*     2.互動介面的回傳參數
*     3.把學生初始化介面出來  
*     4.確認共用變數名稱



    
    

<p class="text-center">
<br><br>-CJJS-<br><Made by Team><br>
</p