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

CJJS前端報告05/29
===
# 預計本週目標

* - [ ] 確認共用變數名稱
* - [ ] 互動介面的回傳參數
* - [x] 把教授基本介面做出來
* - [x] 把教授初始化介面出來
* - [x] 把學生基本介面做出來
* - [ ] 把學生初始化介面出來

# 分工

    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)
<br>

<br>

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

<br>
---
<br>
---
<br>
---
<br>
---
<br>
---
<br>
---
<br>
---
<br>
---
<br>
---
<br>
---
<br>
---
<br>
---
<br>
---

---

[測試影片](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=)

# 使用者介面實作
>這個是表單程式碼，說明可變性很高，可以設計的讓使用者用起來簡單

    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
# richmenu2
# richmenu3

>處理postback的函式

    @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感

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