곽윤철 / youtube-comment-seperator

Go to a project
Toggle navigation Toggle navigation pinning
곽교린
feebe8f7 2 parents b1366c10 868bd526

Merge branch 'develop' of http://khuhub.khu.ac.kr/2019102147/youtube-comment-seperator into develop

Inline Side-by-side
Showing 8 changed files with 86 additions and 98 deletions
{
"youtubeAPI" : "",//insert your youtube API key.
"papagoClientID" : "", //insert your papago client ID.
"papagoClientSecret":"" //insert your papago client secret.
"youtubeAPI" : "ENTER YOUR GOOGLE API KEY",
"papagoClientID" : "ENTER YOUR NAVER CLIENT ID",
"papagoClientSecret":"ENTER YOUR NAVER CLIENT SECRET"
}
\ No newline at end of file
......
......@@ -14,14 +14,25 @@ var videoLang = 'all'; //설정 언어
const serverIP = "http://localhost:3000" //서버의 주소
var commentList = new Array();
var commentNum = 0;
var savednpt = ''
var korNum = 0;
var savednpt = '';
const URLreg1 = new RegExp(/https?:\/\/youtu.be\//);//유튜브에서 제공하는 동영상 공유 기능을 사용하여 얻은 URL 형식
const URLreg2 = new RegExp(/https?:\/\/www.youtube.com\//);//유튜브 주소를 그대로 넣었을 때 URL형식
function showcomment(response, VideoNum){
let commentDisplay = '';
let commentDisplay = '';
for(let iterArr = 0; iterArr < commentNum; iterArr++){
commentDisplay += `<br>${commentList[iterArr].name}<br>${commentList[iterArr].text}<br><br>`;
commentDisplay += `
<div style="margin-top:15px; display:flex">
<div style="margin-right:10px">
<img class="rounded-circle" src="${commentList[iterArr].image}">
</div>
<div>
<b>${commentList[iterArr].name}</b>
<p>${commentList[iterArr].text}</p>
</div>
</div>
`;
}
let body = `
<!doctype html>
......@@ -58,11 +69,13 @@ function showcomment(response, VideoNum){
</form>
<br>
<br>
<div class="embed-responsive embed-responsive-16by9" style="text-align:center;">
<div class="embed-responsive embed-responsive-16by9" style="text-align:center">
<iframe class="embed-responsive-item" width="560" height="315" src="https://www.youtube.com/embed/${VideoNum}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<br>
<div id="liveAlertPlaceholder"></div>
<a class="btn btn-dark" href="${serverIP}/search?videourl=${VideoNum}&nextpage=${savednpt}&languages=${videoLang}" role="button">Show more comments</a>
<button type="button" class="btn btn-danger" onclick="alert('Korean Percent: ${Math.floor((korNum/commentNum)*10000)/100}%')">Get Kor Percent</button>
<br>
${commentDisplay}
</body>
......@@ -105,6 +118,7 @@ function loadcomment(ApiKey, VideoNum, npt, n, res){
templang = await langPromise;
if(videoLang == 'all' || videoLang == templang){
commentList.push(tempcommentList[iter]);
if(templang=="ko"){korNum++;}
commentNum++;
}
}
......@@ -179,6 +193,7 @@ var app = http.createServer(function(request,response){ // request는 브라우
else if(pathname === '/search'){
commentList.splice(0);
commentNum = 0; //코멘트 리스트 초기화
korNum = 0;
videoNum = queryData.videourl;
videoLang = queryData.languages;
......@@ -190,7 +205,7 @@ var app = http.createServer(function(request,response){ // request는 브라우
//유튜브 URL공유 기능을 사용하여 얻은 주소를 넣었을 때 videoNum 추출
videoNum = videoNum.replace(URLreg1,"");
console.log(videoNum);
let npt = ""
let npt = "";
if(queryData.nextpage != null) npt = queryData.nextpage
loadcomment(apiKey,videoNum,npt,5, response);
}
......
MIT License
Copyright (c) 2022 Yuncheol Kwak
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.
\ No newline at end of file
<div id="top"></div>
<!-- PROJECT SHIELDS -->
[![Contributors][contributors-shield]][contributors-url]
[![Forks][forks-shield]][forks-url]
[![Stargazers][stars-shield]][stars-url]
[![Issues][issues-shield]][issues-url]
[![MIT License][license-shield]][license-url]
[![LinkedIn][linkedin-shield]][linkedin-url]
<!-- PROJECT LOGO -->
<br />
<div align="center">
<a href="https://github.com/github_username/repo_name">
<a href="http://khuhub.khu.ac.kr/2019102147/youtube-comment-seperator">
<img src="images/logo.png" alt="Logo" width="80" height="80">
</a>
<h3 align="center">Youtub-Comment-Seperator</h3>
<p align="center">
Find korean comments between english comments!
Find someone from your country among foreigners!
<br />
<a href="http://khuhub.khu.ac.kr/2019102147/youtube-comment-seperator"><strong>Explore the docs »</strong></a>
<br />
......@@ -43,6 +32,7 @@
<li>
<a href="#about-the-project">About The Project</a>
<ul>
<li><a href="#project-architecture">Project Architecture</a></li>
<li><a href="#built-with">Built With</a></li>
</ul>
</li>
......@@ -54,11 +44,9 @@
</ul>
</li>
<li><a href="#usage">Usage</a></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>
<li><a href="#acknowledgments">Acknowledgments</a></li>
</ol>
</details>
......@@ -66,10 +54,19 @@
<!-- ABOUT THE PROJECT -->
## About The Project
***
<div align="center">
<img src="images/screen.png" alt="screenshot">
</div>
[![Product Name Screen Shot][product-screenshot]](https://example.com)
* Select the language for comments you want to find
* Show comments only the language you choosen
### Project Architecture
<div align="center">
<img src="images/project-architecture.png" alt="screenshot">
</div>
Here's a blank template to get started: To avoid retyping too much info. Do a search and replace with your text editor for the following: `github_username`, `repo_name`, `twitter_handle`, `linkedin_username`, `email_client`, `email`, `project_title`, `project_description`
<p align="right">(<a href="#top">back to top</a>)</p>
......@@ -80,6 +77,9 @@ Here's a blank template to get started: To avoid retyping too much info. Do a se
<img src="https://img.shields.io/badge/JavaScript-F7DF1E?style=flat-square&logo=javascript&logoColor=white"/>
<img src="https://img.shields.io/badge/Node.js-339933?style=flat-square&logo=node.js&logoColor=white&"/>
<img src="https://img.shields.io/badge/npm-CB3837?style=flat-square&logo=npm&logoColor=white&"/>
<img src="https://img.shields.io/badge/Bootstrap-7952B3?style=flat-square&logo=bootstrap&logoColor=white&"/>
<img src="https://img.shields.io/badge/Express-000000?style=flat-square&logo=express&logoColor=white&"/>
<p align="right">(<a href="#top">back to top</a>)</p>
......@@ -87,32 +87,30 @@ Here's a blank template to get started: To avoid retyping too much info. Do a se
<!-- GETTING STARTED -->
## Getting Started
This is an example of how you may give instructions on setting up your project locally.
To get a local copy up and running follow these simple example steps.
***
### Prerequisites
This is an example of how to list things you need to use the software and how to install them.
* npm
```sh
npm install npm@latest -g
```
Need to get free API Key
* [Google](https://console.cloud.google.com/apis/dashboard) - *Activate YouTube Data API v3*
* [Naver](https://developers.naver.com/apps)
### Installation
1. Get a free API Key at [https://console.cloud.google.com](https://console.cloud.google.com/marketplace/product/google/youtube.googleapis.com?q=search&referrer=search&project=eighth-keyword-349614&supportedpurview=project)
2. Clone the repo
```sh
1. Clone the repo
```
git clone http://khuhub.khu.ac.kr/2019102147/youtube-comment-seperator.git
```
3. Install NPM packages
```sh
2. Install NPM packages
```
npm install
```
4. Enter your API in `config.js`
```js
const API_KEY = 'ENTER YOUR API';
3. Need to Enter your API Keys in `APIs.json`
```
"youtubeAPI" : "ENTER YOUR GOOGLE API",
"papagoClientID" : "ENTER YOUR NAVER ClientID"
"papagoClientSecret":"ENTER YOUR NAVER ClientSecret"
```
<p align="right">(<a href="#top">back to top</a>)</p>
......@@ -121,41 +119,23 @@ This is an example of how to list things you need to use the software and how to
<!-- USAGE EXAMPLES -->
## Usage
Use this space to show useful examples of how a project can be used. Additional screenshots, code examples and demos work well in this space. You may also link to more resources.
_For more examples, please refer to the [Documentation](https://example.com)_
<p align="right">(<a href="#top">back to top</a>)</p>
<!-- ROADMAP -->
## Roadmap
- [ ] Feature 1
- [ ] Feature 2
- [ ] Feature 3
- [ ] Nested Feature
See the [open issues](https://github.com/github_username/repo_name/issues) for a full list of proposed features (and known issues).
***
* Get percentage of __Korean__ comments
<div align="center">
<img src="images/korpercent.png" alt="screenshot">
</div>
<p align="right">(<a href="#top">back to top</a>)</p>
<!-- CONTRIBUTING -->
## Contributing
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".
Don't forget to give the project a star! Thanks again!
***
If you have a suggestion that would make this better, please fork the repo and create a pull request.
1. Fork the Project
2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
2. Create your Feature Branch (`git checkout -b feature/feature_name`)
3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the Branch (`git push origin feature/AmazingFeature`)
4. Push to the Branch (`git push origin feature/feature_name`)
5. Open a Pull Request
<p align="right">(<a href="#top">back to top</a>)</p>
......@@ -174,37 +154,9 @@ Distributed under the MIT License. See `LICENSE.txt` for more information.
<!-- CONTACT -->
## Contact
Your Name - [@twitter_handle](https://twitter.com/twitter_handle) - email@email_client.com
Yuncheol Kwak - <lvbhkwak@khu.ac.kr>
Kyoleen Kwak - <2007kkl@khu.ac.kr>
Project Link: [http://khuhub.khu.ac.kr/2019102147/youtube-comment-seperator](http://khuhub.khu.ac.kr/2019102147/youtube-comment-seperator)
<p align="right">(<a href="#top">back to top</a>)</p>
<!-- ACKNOWLEDGMENTS -->
## Acknowledgments
* []()
* []()
* []()
<p align="right">(<a href="#top">back to top</a>)</p>
<!-- MARKDOWN LINKS & IMAGES -->
<!-- https://www.markdownguide.org/basic-syntax/#reference-style-links -->
[contributors-shield]: https://img.shields.io/github/contributors/github_username/repo_name.svg?style=for-the-badge
[contributors-url]: https://github.com/github_username/repo_name/graphs/contributors
[forks-shield]: https://img.shields.io/github/forks/github_username/repo_name.svg?style=for-the-badge
[forks-url]: https://github.com/github_username/repo_name/network/members
[stars-shield]: https://img.shields.io/github/stars/github_username/repo_name.svg?style=for-the-badge
[stars-url]: https://github.com/github_username/repo_name/stargazers
[issues-shield]: https://img.shields.io/github/issues/github_username/repo_name.svg?style=for-the-badge
[issues-url]: https://github.com/github_username/repo_name/issues
[license-shield]: https://img.shields.io/github/license/github_username/repo_name.svg?style=for-the-badge
[license-url]: https://github.com/github_username/repo_name/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/linkedin_username
[product-screenshot]: images/screenshot.png
......