# 우측 패널 앱 만들기

#### 우측패널을 사용하는 APP 실습
> * 모달창을 띄우는 방식과 같습니다.
> * 백엔드 서버가 준비되어 있다는 가정하에 실습을 진행합니다. (본 예제는 fastAPI를 이용함 )
---
##### Swit Store App 생성 및 설정
> * Modal창 띄우기 실습시 사용한 앱을 사용하셔서 설정하셔도 무방합니다.
> * 새로 APP을 생성한다는 기준으로 설명을 진행합니다.
###### 1. **[Swit Developers](https://developers.swit.io/)** 사이트 에서 Swit apps 진입
[![](https://tech-support.swit.io/uploads/images/gallery/2024-01/scaled-1680-/bHni9tEngnun5704-image-1704687555725.png)](https://tech-support.swit.io/uploads/images/gallery/2024-01/bHni9tEngnun5704-image-1704687555725.png)
###### 2 New app 으로 App name 기입후 생성
[![](https://tech-support.swit.io/uploads/images/gallery/2024-01/scaled-1680-/1giKYjgRPyKzpFUo-image-1704687561048.png)](https://tech-support.swit.io/uploads/images/gallery/2024-01/1giKYjgRPyKzpFUo-image-1704687561048.png)
###### 3 우측 메뉴 App info -> Install URL 에 인증 받을 URL 입력
[![](https://tech-support.swit.io/uploads/images/gallery/2024-01/scaled-1680-/FnQE2c8WlTkQjKkU-image-1704687565052.png)](https://tech-support.swit.io/uploads/images/gallery/2024-01/FnQE2c8WlTkQjKkU-image-1704687565052.png)
###### 4 우측 메뉴 Authentication -> Allowed redirect URLs 에 oauth/callback URL 입력 (oauth 인증후 토큰 발급에 사용될 주소)
[![](https://tech-support.swit.io/uploads/images/gallery/2024-01/scaled-1680-/EMWcPhP87vqMeweG-image-1704687570031.png)](https://tech-support.swit.io/uploads/images/gallery/2024-01/EMWcPhP87vqMeweG-image-1704687570031.png)
###### 5 우측 메뉴 Scopes -> Active scopes 에 app:install 추가 (앱 내에서 필요한 scope 알맞게 추가선택)
[![](https://tech-support.swit.io/uploads/images/gallery/2024-01/scaled-1680-/hW0n3AFXwccqJ15q-image-1704687579947.png)](https://tech-support.swit.io/uploads/images/gallery/2024-01/hW0n3AFXwccqJ15q-image-1704687579947.png)
###### 6 우측 메뉴 User actions -> 활성화 체크 -> Callback URL 에 https://{host}/{app-server-path} 기입 -> Right panel launcher 활성화
> * 연관 문서 : **[https://devdocs.swit.io/docs/user-actions/ref%2Foperations%2Fcreate-a](https://devdocs.swit.io/docs/user-actions/ref%2Foperations%2Fcreate-a)**
> * 이 URL 로 Swit에서 모든 정보를 리턴. 필요한 데이터를 추출하여 사용 (연관 문서 에서 Request 에 해당)
> * 이 URL 에서 리턴하는것은 View (연관 문서에서 response 에 해당)

[![](https://tech-support.swit.io/uploads/images/gallery/2024-01/scaled-1680-/kn3edRXOaA3m3a3z-image-1704687592457.png)](https://tech-support.swit.io/uploads/images/gallery/2024-01/kn3edRXOaA3m3a3z-image-1704687592457.png)
###### 7 우측 메뉴 Status settings -> Activity status 활성화
[![](https://tech-support.swit.io/uploads/images/gallery/2024-01/scaled-1680-/NGBRAMyG7s6KxbgN-image-1704687619952.png)](https://tech-support.swit.io/uploads/images/gallery/2024-01/NGBRAMyG7s6KxbgN-image-1704687619952.png)

##### App install 및 관리자 토큰 (봇 토큰) 발급
```
관리자 토큰 (봇 토큰) - 최초 앱 설치 로직 시 발급되는 토큰 (app:install 스콥이 포함된 토큰)
사용자 토큰 - 앱 가입(로그인) 로직 시 사용자별로 발급되는 개별 토큰 (사용자 권한별 스콥이 부여된 토큰)
```
###### 1. Swit Store 에서 해당 앱 설치버튼 클릭
> * 앱 설정시 3 번에서 기입한 install URL 을 가지고 인증 요청 됨
> * 엑세스 요청 화면에서 허용하고 설치하기 누를시 설정 4번 내용에서 등록한 Allowed redirect URL 로 redirect 됨 (인증 요청 하는 메서드에서 redirect 파라미터를 동일한 URL 로 보내야 함)
> * callback URL 에서는 토큰 요청 및 수신 후 앱 설치 완료
```python
@app.get("/oauth")
async def oauth():
    get_ep = '/oauth/authorize'
    get_params = {
        'client_id': clientid,
        'redirect_uri': redirect_uri+'/callback',
        'response_type': 'code',
        'scope': install_scope
    }
    return RedirectResponse(
        url=f"{api}{get_ep}?{parse.urlencode(get_params)}"
    )


@app.get("/callback")
async def callback(code: str):
    post_ep = '/oauth/token'
    r = requests.post(
        url=f"{api}{post_ep}",
        headers={
            'Content-Type': 'application/x-www-form-urlencoded'},
        data={
            'grant_type': 'authorization_code',
            'client_id': clientid,
            'client_secret': secret,
            'redirect_uri': redirect_uri+'/callback',
            'code': code}
    )
```
[![](https://tech-support.swit.io/uploads/images/gallery/2024-01/scaled-1680-/C6H4hBX8mCSQWpqG-image-1704687740841.png)](https://tech-support.swit.io/uploads/images/gallery/2024-01/C6H4hBX8mCSQWpqG-image-1704687740841.png)
###### 2. Swit 에서 우측 APP List 에 등록한 앱이 있는지 확인
[![](https://tech-support.swit.io/uploads/images/gallery/2024-01/scaled-1680-/Y8sTZ3Ya5bVdrkQu-image-1704687651525.png)](https://tech-support.swit.io/uploads/images/gallery/2024-01/Y8sTZ3Ya5bVdrkQu-image-1704687651525.png)
##### 우측 패널 화면 만들기 및 띄우기
> * 연관 문서 : **[https://devdocs.swit.io/docs/user-actions/ref%2Fschemas%2Fcallback-views](https://devdocs.swit.io/docs/user-actions/ref%2Fschemas%2Fcallback-views)**
> * 해당 문서의 callback_type 에 따라 작동합니다.
> * new_view 는 **[UI Builder](https://builder.swit.io/)** 에서 제작후 Source 복사 붙여넣기
```python
@app.post('/switlearning')
async def rightPannel(item: Item):
    if item.user_action.type == "view_actions.submit":
        if item.user_action.id == "jade_collection_entry":
            return {"callback_type": "views.push", "new_view": viewPage.entryView("z")}

    return {"callback_type": "views.push", "new_view": viewPage.mainView}
```
##### 준비 후 Swit 에서 앱 실행해보기
[![](https://tech-support.swit.io/uploads/images/gallery/2024-01/scaled-1680-/UIOj2QcmhwKQvZO4-image-1704687752375.png)](https://tech-support.swit.io/uploads/images/gallery/2024-01/UIOj2QcmhwKQvZO4-image-1704687752375.png)