엄민용

Update README.md

Showing 1 changed file with 238 additions and 73 deletions
<!--
*** Thanks for checking out the Best-README-Template. If you have a suggestion
*** that would make this better, please fork the repo and create a pull request
*** or simply open an issue with the tag "enhancement".
*** Thanks again! Now go create something AMAZING! :D
***
***
***
*** To avoid retyping too much info. Do a search and replace for the following:
*** github_username, repo_name, twitter_handle, email, project_title, project_description
-->
<img src="QR_Code.png" width="70" height="70" align="right">
# mother project : LINEBOT
라인봇 api를 활용하여 사용자에게 적절한 음악을 추천해 줍니다.<br>
## 설치하기
```bash
npm install
```
모든 모듈이 해당 프로젝트 디렉토리에 다운로드됩니다.<br>
## 주의사항 1
(작업을 시작하실 때 자신의 로컬 개발폴더를 pull 하여 최신화 시키는 걸 잊지 마세요.)<br>
개발하실 때 서버에 접속하여 각자의 폴더에 맞는 디렉토리에서 작업(풀, 커밋, 푸시 등..)하시길 바랍니다.
커밋하시고 작업이 끝났다면 상위 폴더로 올라가서 pull하여 메인 프로젝트의 최신화를 시켜주신 다음 상시 작동을 위하여 그 pull된 메인 프로젝트를 실행시킨다음 종료해주시길 바랍니다.<br>
## 주의사항 2
서버는 기본적으로 nodejs가 실행되고 있는 상태이기때문에, 개발을 하고자 실행시키려면 중복실행으로 인해 주소가 겹쳐 오류가 발생할 것입니다. <br>
따라서
```bash
killall node
```
명령어를 실행하여 실행중인 node를 종료시킨 후 개발작업에 들어가시면 됩니다.<br>
## 참고사항
node_modules가 push 되는 것을 막기 위해, gitignore에 node_modules을 추가하였으니 마음편히 커밋&푸시하시길 바랍니다.<br>
또한 각 DEVELOP 폴더에 개별적으로 각자의 user.name과 user.email을 입력해두었으니 Ubuntu가 commit했다는 기록은 안 나올 것 같습니다.(.git을 지우면 입력해둔게 사라져서 번거로워집니다. 되도록 삭제하지 말고 진행하세요.)
## 예제1 (현재 진행상황 반영)
봇 친구 추가가 되어있다는 가정하에 기술합니다.<br>
친구 추가를 위한 QR코드는 같이 업로드해두었습니다.<br>
<br>
```bash
노래 추천해줘
```
의 내용을 전송하면,
```bash
아이유의 음악을 추천드립니다.
```
의 내용으로 답장이 옵니다.
<br>
## 예제2
그 외에는 이해를 못했다는 답장이 옵니다.
```bash
안녕?
```
```bash
무슨 말인지 못알아먹겠습니다
```
## 해결사항
~~index.js에 channelAccessToken와 channelSecret의 값을 자신의 api에 대한 값으로 변경시킵니다.~~<br>
~~(계정 하나를 정해 통합 예정)~~<br>
<br>
계정을 결정하여 해결됨.
~~현재 무료 ngrok를 사용하여 부득이하게 IP주소가 계속 바뀝니다.~~<br>
~~DEBUG CONSOLE에서,~~
```bash
It seems that BASE_URL is not set. Connecting to ngrok...
listening on https://*************.ngrok.io/callback
```
~~이 출력될때 https://*************.ngrok.io/callback 을 복사하여 라인의 웹훅 URL로 변경하시기 바랍니다.~~<br>
~~(aws를 이용하여 웹훅 URL을 대체할 예정)~~<br>
<br>
aws로 실행시킬 챗봇에 webhook을 통합하여 실행시키는 식으로 웹훅 문제 해결됨.
\ No newline at end of file
<!-- PROJECT SHIELDS -->
<!--
*** I'm using markdown "reference style" links for readability.
*** Reference links are enclosed in brackets [ ] instead of parentheses ( ).
*** See the bottom of this document for the declaration of the reference variables
*** for contributors-url, forks-url, etc. This is an optional, concise syntax you may use.
*** https://www.markdownguide.org/basic-syntax/#reference-style-links
-->
<!-- PROJECT LOGO -->
<br />
<p align="center">
<h3 align="center">LineMusicChatbot</h3>
<p align="center">
재생 목록을 출력하거나 검색해주는 등 사용자가 입력한 노래 정보를 제공하는 챗봇
<br />
<br />
<a href="http://khuhub.khu.ac.kr/2016102927/LineMusicChatbot/raw/master/QR_Code.png">View Demo QR Code</a>
</p>
</p>
<!-- TABLE OF CONTENTS -->
<details open="open">
<summary><h2 style="display: inline-block">Table of Contents</h2></summary>
<ol>
<li>
<a href="#about-the-project">About The Project</a>
<ul>
<li><a href="#built-with">Built With</a></li>
</ul>
</li>
<li>
<a href="#getting-started">Getting Started</a>
<ul>
<li><a href="#prerequisites">Prerequisites</a></li>
<li><a href="#installation">Installation</a></li>
<li><a href="#create-info-file">Create Info file</a></li>
<li><a href="#chatbot-qr-code">Chatbot QR Code</a></li>
</ul>
</li>
<li><a href="#usage">Usage</a>
<ul>
<li><a href="#playlist">PlayList</a></li>
<li><a href="#search-in-youtube">Search in YouTube</a></li>
<li><a href="#search-setting">Search Setting</a></li>
</ul>
</li>
<li><a href="#roadmap">Roadmap</a></li>
<li><a href="#contributing">Contributing</a></li>
<li><a href="#license">License</a></li>
<li><a href="#contact">Contact</a></li>
</ol>
</details>
<!-- ABOUT THE PROJECT -->
## About The Project
![About1](/uploads/cc35689aa8317a34873594d3d9e927a0/About1.PNG)
음악과 관련한 프로젝트를 선정한 이유는 먼저 우리가 음악을 들을 때 느낄 수 있는 불편한 상황을 생각해 보았고 음악이 듣고는 싶은데 어떤 음악을 들어야할지 망설여지는 상황에서 가수와, 혹은 장르와 관련된 음악을 제공해주는 시스템을 구현하고자 했습니다.
유튜브로부터 공식적으로 재생목록 뿐만 아니라 음악에 관해 지원받기 위해서는 유튜브의 유료 음악 스트리밍 서비스 유튜브 뮤직을 이용해야 하고, 이 때문에 유튜브에서 검색만으로 공식 음원을 찾기 쉽지 않습니다.
뮤직비디오나 저작권자가 아닌 사람이 올린 영상의 경우 공식 음원에 비해 음질도 떨어지고, 인트로와 아웃트로 때문에 듣기 불편할 수도 있습니다.
이러한 문제점을 보완하고자 LineMusicChatbot 프로젝트를 시작하게 되었습니다.
LineMusicChatbot은 라인 챗봇 서비스와 YouTube API를 이용하여 만든 음악 추천 및 검색 챗봇입니다.
유튜브 API를 통해 재생목록의 정보와 재생목록 내 동영상의 제목, 썸네일, URL을 제공하도록 하여 특정 메시지를 사용자가 챗봇에서 입력하면 이를 분석하여 노래를 추천해주거나, 재생목록을 출력하는 방식으로 구현한 프로젝트입니다.
### Built With
* [Line Messaging API](https://developers.line.biz/en/services/messaging-api/)
* [YouTube Data](https://developers.google.com/youtube/v3/getting-started?hl=ko)
<!-- GETTING STARTED -->
## Getting Started
### Prerequisites
* Chatbot Application
* Create info.js
* npm googleapis
```
npm install
```
### Installation
1. Clone the repo
```
git clone http://khuhub.khu.ac.kr/2016102927/LineMusicChatbot.git
```
2. Install NPM packages / googleapis
```
npm install
npm install googleapis
```
### Create Info file
![Info_1](/uploads/c242c735636d44925f8e39f7a76708ee/Info_1.PNG)
보안을 위해 토큰 값과 API키를 빼놓았습니다.
새 파일 Info.js 을 생성하고
exports.TOKEN = 'Kb1/rQYz4MUhF8XyKQv7z9x0MxVQ5bX/XO8S/yt/1qQEJVAbsEFAaMvXKEOx9Umr7KhivfyDPfZHRRLFPngR0O4ZGWV2VFses8ufPE7uAdvYr4G6keBNAU69nBz5IC71HfbIrUHxXYqD7GfhVwXzpwdB04t89/1O/w1cDnyilFU='
exports.YoutubeKey = 'AIzaSyBInggOtXxPFYIRee0Xs3vb5iZ9YE9_518'
exports.domain='2020105631.oss2021.tk'
을 붙여넣기 해주시기 바랍니다.
### Chatbot QR Code
![QR_Code](/uploads/d00b60136d78cb8c790e7d59be1e09e9/QR_Code.png)
QR 코드를 이용해 챗봇을 등록해주시기 바랍니다.
<!-- USAGE EXAMPLES -->
## Usage
### PlayList
![Usage_1](/uploads/b7c0c6ca97acebf6c40f204017a1cb69/Usage_1.PNG) <img src = "/uploads/37ea1c6e7854d80e35c8095404efb8e4/Usage_2.PNG" width="700"/>
첫번째 기능은 플레이 리스트를 제공하는 것입니다. 사용자가 입력한 문자열이 플레이리스트에 관한 것일 때, 이것이 저희가 미리 준비해 놓은 플레이리스트라면 그 재생목록 속 노래 10곡의 제목과 URL을 출력하도록 하였습니다.
이때, 공식 음원을 찾기 힘들다는 단점을 보완하기 위해 URL을 통해 이동하면 공식 음원으로 이동하는 것을 볼 수 있습니다.
지원하는 플레이리스트는 크게 장르, 무드, 가수로 분류하여 제공하는데, 장르의 경우 힙합, 피아노 팝 플레이리스트가 있고, 무드의 경우 슬픈 노래와 신나는 노래에 관한 것이 있으며, 가수의 경우 블랙핑크, 아이유, 트와이스, 레드벨벳의 경우를 지원합니다.
장르 - 힙합, 피아노, 팝 ex) 힙합 플레이리스트
무드 - 슬픈, 신나는 ex) 슬픈 플레이리스트
가수 - 블랙핑크, 아이유, 트와이스 레드벨벳 ex) 블랙핑크 플레이리스트
### Search in YouTube
![Usage_3](/uploads/e6f48c92d47ac489b2bdac2d6f887aa5/Usage_3.PNG)
두번째 기능은 검색입니다. 사용자가 입력한 정보가 저희가 미처 생각하지 못한 정보라면 해당 문자열을 유튜브에 검색하여 그 검색결과를 출력합니다.
챗봇은 사용자가 입력한 문자열의 검색결과를 가장 상단에 있는 3개를 출력하고 최상단에 위치한 영상의 썸네일을 출력합니다.
이에 관하여 사용자가 챗봇이 제공하는 정보가 너무 많거나 너무 적은 등 마음에 들지 않을 경우 이에 대해 설정할 수 있는 기능을 추가하였습니다.
### Search Setting
<img src = "/uploads/346dec8dcafa1ed5c0cf568e07dc817e/Usage_4.jpg" width = "300"/>
검색에 대한 구현 설명은 차후 추가
<!-- ROADMAP -->
## Roadmap
![Roadmap_1](/uploads/4bd9416fabb06084c01720da48158591/Roadmap_1.png)
YouTube API를 이용하는 과정에서 문제가 있었습니다.
데이터를 list하는 것 이외에 insert, update, delete 하는 기능은 Oauth 2.0 인증을 필요로 하는데 이 과정이 SSH 챗봇 서버에서 구현이 불가능하다는 문제에 부딪혔습니다.
때문에 재생목록에 대해 사용자가 원하는 곡을 추가하거나 삭제하는 등의 작업이 구현되지 않아 재생목록에 대한 완전한 기능구현을 하지 못했다는 문제점이 있습니다.
이에 대한 앞으로의 로드맵은 추가적으로 다른 API를 이용하여 구현하지 못하는 부분을 구현하거나 사용자에게 재생목록 자체의 URL을 제공하여 사용자가 해당 링크를 방문하여 유튜브 내에서 동영상을 추가, 삭제 하도록 하는 방법을 생각하고 있습니다.
<!-- CONTRIBUTING -->
## Contributing
추가하거나 개선할 기능이 있다면 참고 바랍니다.
1. Project를 Fork 합니다.
2. 새로운 브랜치를 생성합니다. (`git checkout -b feature/AmazingFeature`)
3. 변경된 사항을 Commit 합니다. (`git commit -m 'Add some AmazingFeature'`)
4. 브랜치에 Push 합니다. (`git push origin feature/AmazingFeature`)
5. Pull Request 합니다.
<!-- LICENSE -->
## License
MIT License
<!-- CONTACT -->
## Contact
신지원 - Dev.jiwonshin@khu.ac.kr
엄민용 - dono222@khu.ac.kr
엄성진 - 7497aaaa@khu.ac.kr
Project Link: [http://khuhub.khu.ac.kr/2016102927/LineMusicChatbot.git](http://khuhub.khu.ac.kr/2016102927/LineMusicChatbot.git)
<!-- MARKDOWN LINKS & IMAGES -->
<!-- https://www.markdownguide.org/basic-syntax/#reference-style-links -->
[contributors-shield]: https://img.shields.io/github/contributors/github_username/repo.svg?style=for-the-badge
[contributors-url]: https://github.com/github_username/repo/graphs/contributors
[forks-shield]: https://img.shields.io/github/forks/github_username/repo.svg?style=for-the-badge
[forks-url]: https://github.com/github_username/repo/network/members
[stars-shield]: https://img.shields.io/github/stars/github_username/repo.svg?style=for-the-badge
[stars-url]: https://github.com/github_username/repo/stargazers
[issues-shield]: https://img.shields.io/github/issues/github_username/repo.svg?style=for-the-badge
[issues-url]: https://github.com/github_username/repo/issues
[license-shield]: https://img.shields.io/github/license/github_username/repo.svg?style=for-the-badge
[license-url]: https://github.com/github_username/repo/blob/master/LICENSE.txt
[linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge&logo=linkedin&colorB=555
[linkedin-url]: https://linkedin.com/in/github_username
......