Merge branch 'master' into 'master'

README.md 초안 작성

교수님께서 작성해주신 목차를 바탕으로 초안을 작성했습니다.
추가로 필요한 내용이 있으면 말씀해주시기바랍니다.

See merge request !3

+The MIT License (MIT)
+
+Copyright (c) 2020 Jinsu Park(2016101168)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

-## Polly
+# Khuwitch
 
 
-> Polly는 text를 음성으로 변환해주는 AWS의 한 서비스이다.
+khuwitch는 다국어 번역 지원하며, 이를 음성으로도 들을 수 있도록해주는 twitch bot 입니다.
 
 
-### 권한 (Cognito service)
+khuwitch를 이용하면 채널 관리자는 자신의 채널의 외국어 채팅을 한국어로 바로 번역해 볼 수 있고, 필요한 경우 이를 음성파일로 변환하여 재생한 뒤 시청자들에게 송출할 수도 있습니다.
 
 
-모든 AWS는 이용하려면 그를 위한 자격 증명이 필요하다. 
-브라우저에서 이용자가 바로 AWS 서비스를 이용하려면 AWS 서비스를 이용하기위한 자격증명이 필요하지만, IAM User의 Credential을
-웹페이지 코드에 공개하는 것은 바람직하지않다.
-`Cognito` 는 이런 경우에 웹페이지에서의 인증, 인가 상태와 AWS 서비스를 위한 인증, 인가를 연동할 수 있도록 해주는 AWS의 한 서비스이다.
+## 아키텍쳐
 
 
-우리는 인증되지않은 사용자도 Polly를 통해 TTS(text to speech) 기능을 이용할 수 있도록 Cognito의 자격 증명 풀을 생성했고, 그들은 Polly full access 권한을 갖는다.
+> 추후 추가 예정
 
 
-### 사용 방법
+## 사용되는 API
 
 
-```html
-<script src="https://sdk.amazonaws.com/js/aws-sdk-2.796.0.min.js"></script>
+* [Papago 언어 감지 API](https://developers.naver.com/docs/papago/papago-detectlangs-overview.md)
+* [Papago 번역 API](https://developers.naver.com/docs/papago/papago-nmt-overview.md)
+* [Twitch Authentication API](https://dev.twitch.tv/docs/authentication)
+* [Twitch Chatbot API](https://dev.twitch.tv/docs/irc)
+
+## 사용된 기술 및 동작 방법
+
+khuwitch는 크게 아래의 항목들로 동작한다고 볼 수 있습니다.
+
+* `websocket` 을 기반으로 Twtich api를 편리하게 이용할 수 있게해주는 `tmi client`
+* `Papago API` 를 통한 번역
+* `Socket io` 를 이용한 frontend, backend의 통신
+* `AWS Polly` 를 이용한 TTS(Text To Speech)
+
+위의 기술들을 바탕으로 khuwitch는 아래와 같이 동작합니다.
+
+1. `websocket` 을 기반으로 를 통해 메시지를 받아보거나 작성할 수 있습니다.
+2. Papago의 언어감지 API를 이용해 해당 채팅 메시지가 어떤 언어인지 판별합니다.
+3. 채팅 메시지가 외국어인 경우 Papago의 번역 API를 이용해 내용을 번역한 뒤 채팅으로 번역 내용을 전송하고, socket io를 통해 현재 khuwith 서비스에 접속 중인 사용자에게도 번역 내용을 전송합니다.
+4. frontend에서는 수신한 text를 `AWS Polly` 를 이용해 음성 파일로 변환한 뒤, 접속자의 브라우저에서 재생합니다.
+
+## 빌드 및 실행 방법
+
+> 추후 보완 예정
+
+### local에서 실행하기
+
+**frontend**
+
+```bash
+$ KHUWITCH_PORT=8000 npm start
 ```
 ```
 
 
-브라우저에서 javascript AWS SDK를 설치한다(불러온다).
-
-```html
-<script>
-// Polly를 사용하기 위한 자격증명을 설정한다.
-AWS.config.region = 'ap-northeast-2'; 
-AWS.config.credentials = new AWS.CognitoIdentityCredentials({IdentityPoolId: 'ap-northeast-2:03db97c9-a857-45f3-be6e-3cf84d6f619b'});
-const polly = new AWS.Polly({
-    signatureVersion: 'v4',
-    region: 'ap-northeast-2',
-});
-
-let params = {
-    'Text': '반가워 친구야~',
-    'OutputFormat': 'mp3',
-    'VoiceId': 'Seoyeon'
-};
-let tts = new AWS.Polly.Presigner(params, polly)
-        
-
-// tts로 변환한 음성 파일을 얻는다.
-tts.getSynthesizeSpeechUrl(params, function(error, url) {
-    if (error) {
-    } else {
-        setTimeout(()=>{
-            console.log("실행")
-            let audio = new Audio(url)
-            audio.play()
-                .then(delete audio);
-        }, 3000)
-    }
-})
-</script>
+**backend**
+```bash
+$ KHUWITCH_PORT=3000 npm start
 ```
 ```
+
+### docker image 빌드 후 docker-compose로 실행
+
+**frontend 빌드**
+
+```bash
+$ docker build -f Dockerfile-frontend -t khuwitch/frontend
+```
+
+**backend 빌드**
+```bash
+$ docker build -f Dockerfile-backend -t khuwitch/backend
+```
+
+**docker-compose로 실행**
+
+```bash
+$ docker-compose -f docker-compose.yml -f docker-compose-dev.yml up
+```
+
+기본적 설정으로 존재하는 `docker-compose.yml` 에 추가적인 내용을 담은 `docker-compose-{{NAME}}.yml` 을 전달함으로써 설정을 Override할 수 있습니다.
+
+## 사용 방법
+
+_로그인 화면 추후 추가.png_
+_봇 입장 화면 추후 추가.png_
+
+채널관리자는 twitch login을 통해 khuwitch bot을 자신의 Twitch 채널에 입장시킬 수 있습니다.
+
+_번역 화면 추가.png_
+
+khuwitch bot이 채널에 입장하면 모든 message에 대해 언어감지를 한 뒤 한국어가 아닌 경우는 해당 text를 한국어로 번역하여 누가 어떤 말을 했는지 알려줍니다.
+
+_tts 선택화면 추가.png_
+
+단순한 번역 챗봇을 넘어 TTS 번역 봇으로 이용하고 싶다면, TTS를 청취하고싶은 채널을 선택할 수 있습니다. 이후 변환된 음성 파일이 자동으로 재생되므로 내 채널로도 해당 음성이 송출되어 시청자들도 들을 수 있게 됩니다.
+
+## License
+
+누구나 편리하게 khuwitch를 개발하고 사용할 수 있도록 해당 프로젝트의 License를 MIT License로 선정하였습니다.

+## Polly
+
+> Polly는 text를 음성으로 변환해주는 AWS의 한 서비스이다.
+
+### 권한 (Cognito service)
+
+모든 AWS는 이용하려면 그를 위한 자격 증명이 필요하다. 
+브라우저에서 이용자가 바로 AWS 서비스를 이용하려면 AWS 서비스를 이용하기위한 자격증명이 필요하지만, IAM User의 Credential을
+웹페이지 코드에 공개하는 것은 바람직하지않다.
+`Cognito` 는 이런 경우에 웹페이지에서의 인증, 인가 상태와 AWS 서비스를 위한 인증, 인가를 연동할 수 있도록 해주는 AWS의 한 서비스이다.
+
+우리는 인증되지않은 사용자도 Polly를 통해 TTS(text to speech) 기능을 이용할 수 있도록 Cognito의 자격 증명 풀을 생성했고, 그들은 Polly full access 권한을 갖는다.
+
+### 사용 방법
+
+```html
+<script src="https://sdk.amazonaws.com/js/aws-sdk-2.796.0.min.js"></script>
+```
+
+브라우저에서 javascript AWS SDK를 설치한다(불러온다).
+
+```html
+<script>
+// Polly를 사용하기 위한 자격증명을 설정한다.
+AWS.config.region = 'ap-northeast-2'; 
+AWS.config.credentials = new AWS.CognitoIdentityCredentials({IdentityPoolId: 'ap-northeast-2:03db97c9-a857-45f3-be6e-3cf84d6f619b'});
+const polly = new AWS.Polly({
+    signatureVersion: 'v4',
+    region: 'ap-northeast-2',
+});
+
+let params = {
+    'Text': '반가워 친구야~',
+    'OutputFormat': 'mp3',
+    'VoiceId': 'Seoyeon'
+};
+let tts = new AWS.Polly.Presigner(params, polly)
+        
+
+// tts로 변환한 음성 파일을 얻는다.
+tts.getSynthesizeSpeechUrl(params, function(error, url) {
+    if (error) {
+    } else {
+        setTimeout(()=>{
+            console.log("실행")
+            let audio = new Audio(url)
+            audio.play()
+                .then(delete audio);
+        }, 3000)
+    }
+})
+</script>
+```
\ No newline at end of file