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

곽교린
Commit feebe8f7bc4006796841dddc1a04d26e8eb7e9b6 feebe8f7 2 parents b1366c10 868bd526
Showing 8 changed files with 86 additions and 98 deletions
APIs.json
CommentLoadingTest.js
LICENSE.txt
README.md
images/korpercent.png
images/logo.png
images/project-architecture.png
images/screen.png
--- a/APIs.json
View file @feebe8f
+++ b/APIs.json
View file @feebe8f
 {
-    "youtubeAPI" : "",//insert your youtube API key.
+    "youtubeAPI" : "ENTER YOUR GOOGLE API KEY",
-    "papagoClientID" : "", //insert your papago client ID.
+    "papagoClientID" : "ENTER YOUR NAVER CLIENT ID", 
-    "papagoClientSecret":"" //insert your papago client secret.
+    "papagoClientSecret":"ENTER YOUR NAVER CLIENT SECRET" 
 }
\ No newline at end of file
--- a/CommentLoadingTest.js
View file @feebe8f
+++ b/CommentLoadingTest.js
View file @feebe8f
@@ -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);
     }
--- a/LICENSE.txt 0 → 100644
View file @feebe8f
+++ b/LICENSE.txt 0 → 100644
View file @feebe8f
+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
--- a/README.md
View file @feebe8f
+++ b/README.md
View file @feebe8f
 <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.
+Need to get free API Key
-* npm
+* [Google](https://console.cloud.google.com/apis/dashboard) - *Activate YouTube Data API v3*
-  ```sh
+* [Naver](https://developers.naver.com/apps)
-  npm install npm@latest -g
+
-  ```
 ### 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)
+1. Clone the repo
-2. Clone the repo
+   ```
-   ```sh
    git clone http://khuhub.khu.ac.kr/2019102147/youtube-comment-seperator.git
    ```
-3. Install NPM packages
+2. Install NPM packages
-   ```sh
+   ```
    npm install
    ```
-4. Enter your API in `config.js`
+3. Need to Enter your API Keys in `APIs.json`
-   ```js
+   ```
-   const API_KEY = 'ENTER YOUR API';
+   "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.
+* Get percentage of __Korean__ comments
-
+<div align="center">
-_For more examples, please refer to the [Documentation](https://example.com)_
+  <img src="images/korpercent.png" alt="screenshot">
-
+</div>
-<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).
 <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. 
-
-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!
 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
--- a/images/korpercent.png 0 → 100644
View file @feebe8f
+++ b/images/korpercent.png 0 → 100644
View file @feebe8f
--- a/images/logo.png 0 → 100644
View file @feebe8f
+++ b/images/logo.png 0 → 100644
View file @feebe8f
--- a/images/project-architecture.png 0 → 100644
View file @feebe8f
+++ b/images/project-architecture.png 0 → 100644
View file @feebe8f
--- a/images/screen.png 0 → 100644
View file @feebe8f
+++ b/images/screen.png 0 → 100644
View file @feebe8f