서민정 / SEARCH-AND-CHAT

Go to a project
Toggle navigation Toggle navigation pinning
서민정
e287d559 1 parent 2d1bae03

update crawling news and add style

Inline Side-by-side
Showing 6 changed files with 40 additions and 68 deletions
......@@ -2,15 +2,4 @@
## CHATBOT WITH CRAWLING
front
- [x] Modify card component
- [x] Remove card message on dialogflow
- [ ] Modify Intent on dialogflow
- [ ] Add additional functions on dialogflow
- [x] Show video list on front (card compo)
back
- [ ] Modify crawling.js to deal with null data
- [ ] Dealing with Event queries
- [ ] 가수와 관련되지 않은 영상이 포함될 땐?
- [ ] 배포 어떻게 할것인가
- [ ] 전반적인 내용 완전히 이해하기 (구조 등)
\ No newline at end of file
- 뉴스 크롤링 후 이미지 사이자 80*80 인 것을 원본으로 변환할 수 있는 방법은..?
\ No newline at end of file
......
......@@ -15,7 +15,7 @@ function Chatbot() {
useEffect(() => {
eventQuery('001_Welcome')
eventQuery('002_Intro')
.then(eventQuery('002_Intro'))
}, [])
......@@ -54,6 +54,7 @@ function Chatbot() {
response = await Axios.post('/api/related/textQuery', textQueryVariables)
}
else if(inputString === '소식'){ //@가수명_소식
console.log("뉴스들어옴")
response = await Axios.post('/api/news/textQuery', textQueryVariables)
}
......@@ -182,12 +183,6 @@ function Chatbot() {
</div>
}
// template for card message
}
const renderMessage = (returnedMessages) => {
......@@ -207,7 +202,7 @@ function Chatbot() {
height: 650, width: 700,
border: '3px solid black', borderRadius: '7px'
}}>
<div style={{ height: 594, width: '100%', overflow: 'auto' }}>
<div style={{ height: 594, width: '100%', overflow: 'auto'}}>
{renderMessage(messagesFromRedux)}
......@@ -217,7 +212,7 @@ function Chatbot() {
<input
style={{
margin: 0, width: '100%', height: 50,
borderRadius: '4px', padding: '5px', fontSize: '1rem'
borderRadius: '4px', padding: '5px', fontSize: '1rem', fontFamily: 'KyoboHand'
}}
placeholder="Send a message..."
onKeyPress={keyPressHanlder}
......
......@@ -8,11 +8,12 @@ function CardComponent(props) {
console.log("props" ,props)
return (
<Card
style={{ width: 200 }}
style={{ width: 180}}
cover={
<img
alt={props.cardInfo.description}
src={props.cardInfo.image} />
src={props.cardInfo.image}
/>
}
actions={[
<a target="_blank" rel="noopener noreferrer" href={props.cardInfo.link}>
......@@ -29,32 +30,4 @@ function CardComponent(props) {
)
}
/*
function CardComponent(props) {
return (
<Card
style={{ width: 300 }}
cover={
<img
alt={props.cardInfo.fields.description.stringValue}
src={props.cardInfo.fields.image.stringValue} />
}
actions={[
<a target="_blank" rel="noopener noreferrer" href={props.cardInfo.fields.link.stringValue}>
<Icon type="ellipsis" key="ellipsis" />
</a>
]}
>
<Meta
title={props.cardInfo.fields.title.stringValue}
description={props.cardInfo.fields.description.stringValue}
/>
</Card>
)
}
*/
export default CardComponent
......
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap');
@font-face {
font-family: 'KyoboHand';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@1.0/KyoboHand.woff') format('woff');
font-weight: normal;
font-style: normal;
}
* {
word-break: keep-all;
overflow-wrap: break-word;
......@@ -8,26 +14,30 @@
html,
body {
max-height: 800px;
font-family: 'KyoboHand';
}
body {
margin: 0;
padding: 0;
font-family: Nanum Gothic,Lato, Helvetica Neue, Arial, Helvetica, sans-serif;
font-family: 'KyoboHand','Nanum Gothic',Lato, Helvetica Neue, Arial, Helvetica, sans-serif;
-webkit-font-smoothing: antialiased;
}
.ant-list-item-meta-content {
max-width: 500px;
overflow-x: scroll;
font-family: 'KyoboHand';
}
.ant-list-item-meta-title {
font-size: 20px !important;
font-family: 'KyoboHand';
}
.ant-list-item-meta-description {
display: flex;
color: black !important;
font-family: 'KyoboHand';
}
......
......@@ -9,16 +9,20 @@ const cheerio = require('cheerio');
router.post('/textQuery', async(req,res)=>{
const result = req.body.text;
var name = result.substring(1)
var url = 'https://tv.naver.com/search/clip?query=' //naverTV의 링크
var sort = '&sort=date'
url = url + name + sort
var i = 0;
for(i; i < result.length; i++){
if(result[i] === '_') break;
}
var name = result.substr(1,i-1);
var url = 'https://search.naver.com/search.naver?query=' //naverTV의 링크
var where = '&where=news'
url = url + name + where
url = encodeURI(url)
console.log("url is ",url)
const getHtml = async() => {
try{
return await axios.get(url); //axios.get 함수를 이용해서 비동기로 네이버티비의 해당 가수의 최신 영상 html 파일을 가져온다.
return await axios.get(url); //axios.get 함수를 이용해서 비동기로 네이버 뉴스 중 해당 가수의 이름이 들어간 최신 뉴스 html 파일을 가져온다.
} catch(error){
console.log("error! check your code");
}
......@@ -26,20 +30,21 @@ router.post('/textQuery', async(req,res)=>{
getHtml()
.then(html => {
let videoList = [];
let newsList = [];
const $ = cheerio.load(html.data);
const $bodyList = $("div.src_wrap div.thl ").children("div.thl_a");
const $bodyList = $("div.news").children("ul.type01").children("li");
$bodyList.each(function(i, elem){
videoList[i] = {
description : "naverTV",
image : $(this).find('a.cds_thm').children('img').attr('src'),
title : $(this).find('a.cds_thm').attr('title'),
link : "https://tv.naver.com/" + $(this).find('a.cds_thm').attr('href')
newsList[i] = {
description : "네이버 검색 기사",
title : $(this).find('a._sp_each_title').attr('title'),
link : $(this).find('a._sp_each_title').attr('href'),
image : $(this).find('a.sp_thmb').children('img').attr('src')
}
})
data = videoList.filter(n => n.title);
data = newsList.filter(n => n.title);
data = JSON.stringify(data.slice(0,3))
res.send(data);
......
......@@ -24,7 +24,7 @@ router.post('/textQuery', async(req,res)=>{
console.log("url is ",url)
const getHtml = async() => {
try{
return await axios.get(url); //axios.get 함수를 이용해서 비동기로 네이버티비의 해당 가수의 최신 영상 html 파일을 가져온다.
return await axios.get(url); //axios.get 함수를 이용해서 비동기로 네이버티비의 해당 가수의 이름과 정확도가 높은 html 파일을 가져온다.
} catch(error){
console.log("error! check your code");
}
......