Swit Store App 가이드

스윗 스토어 앱을 만들어보고 테스트해볼수 있는 환경을 설명합니다.

테스트를 위한 간편 환경 설정

개요

개발과 테스트에 필요한 간단한 설정을 합니다.

무료 온라인 서비스를 사용

1. replit 사이트

1.1. 리플 생성

2. swit.io 사이트

2.1. Swit Standard Workspace 생성 및 하나 더 가입하기

3. Swit Developers 사이트

3.1. 해당 워크스페이스에 App 한개 생성하기

초기 설정을 완료하였습니다.
다음으로 Swit OpenAPI를 사용해 채팅을 보내는 예제를 해보도록 하겠습니다.

SwitAPI 토큰 발급

SwitAPI 사용을 위한 토큰 발급

1. Swit.io 사이트 Free/Standard 로그인
2. developers.swit.io 사이트에서 My app 클릭 > 앱 선택
3. Authentication 메뉴 진입
4. replit 사이트에서, main.py (Python리플) 에 기존 내용 모두 지우고 아래 내용 복사 붙여넣기
import requests, json
from urllib import parse
api = 'https://openapi.swit.io'
redirect = 'http://127.0.0.1:5000/callback'

clientid = 'STEP1. 클라이언트아이디'
secret = 'STEP1. 클라이언트시크릿'

scope = 'message:write'

get_ep = '/oauth/authorize'
get_params = {
  'client_id': clientid,
  'redirect_uri': redirect,
  'response_type': 'code',
  'scope': scope
}

code = 'STEP2. 코드값'
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,
        'code': code}
    )

if r.ok:
  print(r)
  print(json.dumps(json.loads(r.text), indent=2))
else:
  print(f"{api}{get_ep}?{parse.urlencode(get_params)}")
5. 붙여놓은 코드중 6,7번째 라인의 clientid 와 secret 에 3. Authentication 페이지의 Client ID 와 secret 각각 복사 붙여넣기

6. replit 사이트의 Run 버튼 클릭
7. Console 탭에 나타난 복잡한 형태의 링크 클릭

8. Swit App 액세스 권한 요청 탭에서 맨 아래 오른쪽 "동의" 버튼 클릭

9. 오류 화면의 URL에서 127.0.0.1:5000/callback?code=” 뒷 부분만 선택하여 복사 (코드 복사)

오류페이지 나오는것이 정상입니다!

10. replit 사이트 에서 19번째 code 값에 복사한 값 붙여넣기

11. replit 사이트의 Run 버튼 클릭
12. 성공시 Console 탭 내용중 access_token 값 복사하여 메모장 등

토큰발급이 끝났습니다.
다음으로는 API를 활용하여 SWIT에 채팅 메세지를 보내보도록 하겠습니다.

SwitAPI를 이용하여 메세지 보내기

OpenAPI 문서를 사용하여 메세지 보내기

1. Developers 사이트의 Create a message 들어가기
2. 생성한 토큰값을 message.create 문서의 Token 영역에 붙여넣기

( 주의! "Bearer" + 띄워쓰기 + 토큰값 형태로 작성해야합니다 )

3. 필수 파라미터 정보를 입력 후 Send API Request 클릭
3.1 channel_id 는 Free/Standard 에 만들어 두었던 워크스페이스에 진입하여 General 채널 id 확인
3.2 content 에는 올리고 싶은 테스트 메세지 입력 ( ex. 이 메세지는 API로 테스트 해보는 메세지 입니다 )
4. 요청 후 응답 성공 확인 ( 200 OK , 채팅에 메세지 확인 ) 및 message_id 값 복사

OpenAPI 문서를 사용하여 메세지 댓글 보내기

1. Developers 사이트의 Comment a message 들어가기
2. 토큰값 잘 입력되어 있는지 확인 (자동입력 되어 있음) 없으면 토큰값 복사 붙여넣기
3. 필수 파라미터 정보를 입력 후 Send API Request 클릭
3.1 message_id 는 위 메세지 요청후 복사해 놓은 message_id 붙여넣기
3.2 content 에는 올리고 싶은 테스트 메세지 입력 ( ex. 이 댓글은 API로 테스트 해보는 댓글 입니다 )
4. 요청후 응답 성공 확인 ( 200 OK , 채팅 메세지에 댓글 확인 )

다음으로는 생생해놓은 App 을 이용하여 Swit 에서 모달 팝업을 띄워보도록 하겠습니다.

Swit App 을 이용한 모달팝업 띄우기

App을 활용하여 Swit에서 모달팝업 실습해보기

1. Swit 워크스페이스에 앱 설치 하기
1.1 replit사이트 에서 main.py 파일에 지난 실습내용 확인 ( 없다면 토큰생성 참조 )
1.2 9번째 라인의 scope 를 app:install 로 수정후 Run

1.3 Console 창의 링크 클릭
1.4 허용하고 설치하기 클릭

1.5 오류 창 URL 에서 맨뒤 code값만 복사 ( 오류가 아닙니다! )

1.6 replit사이트 에서 code 값에 붙여넣고 Run

1.7 Swit 에서 Store 아이콘 클릭 후 파란색 설치 버튼이 사라지고 "관리" 가 생기면 설치 성공
2. replit사이트 에서 서버 구동하기 (개발자 서버 역할)
2.1 Flask 리플 실행
2.2 Webview 창에서 주소 복사 (Stop 상태라면 Run 후 주소복사)

2.3 새 인터넷 창을 오픈후 주소로 접속하여 서버가 잘 실행되는지 확인 (시간이 조금 오래걸릴수 있음)

3. Developers사이트 에서 User action API 요청이 가능하도록 활성화
3.1 My apps > Feature > user actions 탭 에서 활성화 클릭
3.2 Callback URL 에 위에서 복사한 서버주소 + /switlearning 입력

3.3 입력후 Update URL 클릭
3.4 +New user command 버튼 클릭
3.5 Command name 및 Command ID 입력
3.6 아래로 스크롤 하여 Extension 에 Channel message 체크

필수는 아니지만 /Command alias 활성화 및 Alias name 입력

3.7 Save 클릭
4. User action API 응답을 위한 Callback 데이터를 서버에 입력 (Swit Server에 보낼 정보)
4.1 아래 코드를 복사
import json
from flask import Flask, request

app = Flask(__name__)

@app.route('/')
def hello_switty():
    return 'hello, switty!'

@app.route('/switlearning', methods=['POST'])
def switlearning():
  r = request.json
  print(json.dumps(r, indent=4))
  callback = {
    "callback_type": "views.open",
    "new_view": {
      "view_id": "builder_test",
      "header": {
        "title": "This is a view title",
        "subtitle": "Add a subtitle if needed",
        "context_menu": [
          {
            "label": "Menu item 1",
            "action_id": "2fc5573a-c439"
          },
          {
            "label": "Menu item 2",
            "action_id": "340d4ae1-0cb2"
          }
        ],
        "buttons": [
          {
            "type": "button",
            "icon": {
              "type": "image",
              "image_url": "https://swit.io/assets/images/lib/emoji/apple-64/1f609.png",
              "alt": "Header button icon"
            },
            "static_action": {
              "action_type": "open_link",
              "link_url": "https://swit.io"
            }
          }
        ]
      },
      "body": {
        "elements": [
          {
            "type": "select",
            "placeholder": "Select an item",
            "multiselect": False,
            "trigger_on_input": True,
            "options": [
              {
                "label": "Option 1",
                "action_id": "eb5c968b-f4fb"
              },
              {
                "label": "Option 2",
                "action_id": "8992c582-7b37",
                "static_action": {
                  "action_type": "open_link",
                  "link_url": "https://swit.io"
                }
              }
            ]
          },
          {
            "type": "button",
            "label": "Button 1",
            "action_id": "eb5c968b-f4fb",
           "style": "primary_filled"
          },
          {
           "type": "divider"
          },
          {
            "type": "text",
            "markdown": True,
            "content": "[Swit](https://swit.io) is *where the magic happens.* Where big, revolutionary ideas jump off the drawing board and into the real world."
          }
        ]
      }
    }
  }
  return callback

app.run(host='0.0.0.0', port=81)
4.2 main.py 에서 모든 내용을 삭제하고 붙여넣기
4.3 Stop 후 Run 하여 서버 재실행
5. Swit에서 User action command 실행하여 모달 팝업 띄우기
5.1 Swit 채팅창 왼쪽 아래에서 "+"버튼 클릭 > 앱이름 > command 선택

5.2 Modal 팝업 확인

5.3 replit사이트의 Console 화면 체크

6. 원하는 화면의 Modal 창을 만들어서 띄워보기
6.1 builder.swit.io 사이트 들어가기
6.2 왼쪽 위 메뉴에서 "모달" 선택
6.3 만들고 싶은 디자인 자유롭게 만들기
6.4 왼쪽의 Source 코드 복사
6.5 아래 내용에서 16번째 "new_view" 의 {} 중괄호 안에 복사한 Source 내용을 붙여넣고 main.py 에 복사 붙여넣기
import json
from flask import Flask, request

app = Flask(__name__)

@app.route('/')
def hello_switty():
    return 'hello, switty!'

@app.route('/switlearning', methods=['POST'])
def switlearning():
  r = request.json
  print(json.dumps(r, indent=4))
  callback = {
    "callback_type": "views.open",
    "new_view": {
      "여기에 Source 붙여넣기"
    }
  }
  return callback

app.run(host='0.0.0.0', port=81)
6.6 Python 문법오류 수정 (중요)
6.7 Stop 후 Run 하여 서버 재실행
6.8 [5번] 내용을 수행하여 디자인한 모달창이 생성되는지 확인

여기까지 따라하시느라 수고하셨습니다.
이상으로 Swit Store App 가이드를 마치도록 하겠습니다.

App User 인증 Sequence

연동 App 에서 User 로그인 인증

우측 패널 앱 만들기

우측패널을 사용하는 APP 실습

Swit Store App 생성 및 설정
1. Swit Developers 사이트 에서 Swit apps 진입

2 New app 으로 App name 기입후 생성

3 우측 메뉴 App info -> Install URL 에 인증 받을 URL 입력

4 우측 메뉴 Authentication -> Allowed redirect URLs 에 oauth/callback URL 입력 (oauth 인증후 토큰 발급에 사용될 주소)

5 우측 메뉴 Scopes -> Active scopes 에 app:install 추가 (앱 내에서 필요한 scope 알맞게 추가선택)

6 우측 메뉴 User actions -> 활성화 체크 -> Callback URL 에 https://{host}/{app-server-path} 기입 -> Right panel launcher 활성화

7 우측 메뉴 Status settings -> Activity status 활성화

App install 및 관리자 토큰 (봇 토큰) 발급
관리자 토큰 (봇 토큰) - 최초 앱 설치 로직 시 발급되는 토큰 (app:install 스콥이 포함된 토큰)
사용자 토큰 - 앱 가입(로그인) 로직 시 사용자별로 발급되는 개별 토큰 (사용자 권한별 스콥이 부여된 토큰)
1. Swit Store 에서 해당 앱 설치버튼 클릭
@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}
    )

2. Swit 에서 우측 APP List 에 등록한 앱이 있는지 확인

우측 패널 화면 만들기 및 띄우기
@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 에서 앱 실행해보기