정민혁 / TermProject_KakaoBot

Go to a project
Toggle navigation Toggle navigation pinning
정민혁
72252082 1 parent 54182df6

앱 사용설명을 담은 간단한 웹페이지를 express-generator로 생성된 템플릿을 이용하여 작성- index.js,index.ejs,sty… 

…le.css 수정,favicon추가, message.js마이너 수정
Inline Side-by-side
Showing 30 changed files with 58 additions and 6 deletions
No preview for this file type
No preview for this file type
No preview for this file type
1 body { 1 body {
2 padding: 50px; 2 padding: 50px;
3 font: 14px "Lucida Grande", Helvetica, Arial, sans-serif; 3 font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
4 + color: black;
5 + background-color: lightyellow;
4 } 6 }
5 7
6 a { 8 a {
7 color: #00B7FF; 9 color: #00B7FF;
8 } 10 }
11 +h1 {
12 + text-align: center;
13 +}
14 +h2 {
15 + text-align: center;
16 +}
17 +p {
18 + text-align: center;
19 + font-size: medium;
20 +}
......
...@@ -3,7 +3,16 @@ var router = express.Router(); ...@@ -3,7 +3,16 @@ var router = express.Router();
3 3
4 /* GET home page. */ 4 /* GET home page. */
5 router.get('/', function(req, res, next) { 5 router.get('/', function(req, res, next) {
6 - res.render('index', { title: 'Kakao Bot!' }); 6 + res.render('index', {
7 + title: 'Kakao Bot',
8 + subtitle: "카카오봇 사용법",
9 + image1: "/images/instruction1.png",
10 + image2: "/images/instruction2.png",
11 + image3: "/images/instruction3.png",
12 + instruction1: "1. 친구 탭에서 동그라미 표시된 돋보기모양의 검색 버튼을 누르세요.",
13 + instruction2: "2. '정민혁_번역,트랜드검색수치_봇' 을 검색합니다",
14 + instruction3: "3. 친구 추가를 한 뒤 채팅하기를 눌러 채팅방을 열고 이용을 시작합니다!"
15 + });
7 }); 16 });
8 17
9 module.exports = router; 18 module.exports = router;
......
...@@ -88,6 +88,9 @@ app.post('/', function(req, res) { ...@@ -88,6 +88,9 @@ app.post('/', function(req, res) {
88 "message": { 88 "message": {
89 // Naver API Translate 결과를 Kakao Message 89 // Naver API Translate 결과를 Kakao Message
90 "text": objBody.message.result.translatedText 90 "text": objBody.message.result.translatedText
91 + },"keyboard": {
92 + "type": "buttons",
93 + "buttons":["설정", "번역","트랜드 검색"]
91 } 94 }
92 }; 95 };
93 // Kakao Message API 전송 96 // Kakao Message API 전송
...@@ -104,6 +107,10 @@ app.post('/', function(req, res) { ...@@ -104,6 +107,10 @@ app.post('/', function(req, res) {
104 "message": { 107 "message": {
105 "text": response.statusCode 108 "text": response.statusCode
106 }, 109 },
110 + "keyboard": {
111 + "type": "buttons",
112 + "buttons":["설정", "번역","트랜드 검색"]
113 + }
107 }; 114 };
108 115
109 // Kakao에 Error Message 116 // Kakao에 Error Message
...@@ -152,6 +159,9 @@ app.post('/', function(req, res) { ...@@ -152,6 +159,9 @@ app.post('/', function(req, res) {
152 let message = { 159 let message = {
153 "message": { 160 "message": {
154 "text": response.body 161 "text": response.body
162 + },"keyboard": {
163 + "type": "buttons",
164 + "buttons":["설정", "번역","트랜드 검색"]
155 } 165 }
156 }; 166 };
157 167
...@@ -165,6 +175,9 @@ app.post('/', function(req, res) { ...@@ -165,6 +175,9 @@ app.post('/', function(req, res) {
165 let message = { 175 let message = {
166 "message": { 176 "message": {
167 "text": response.statusCode 177 "text": response.statusCode
178 + },"keyboard": {
179 + "type": "buttons",
180 + "buttons":["설정", "번역","트랜드 검색"]
168 } 181 }
169 }; 182 };
170 res.set({ 183 res.set({
...@@ -263,7 +276,7 @@ app.post('/', function(req, res) { ...@@ -263,7 +276,7 @@ app.post('/', function(req, res) {
263 }, 276 },
264 "keyboard": { 277 "keyboard": {
265 "type": "buttons", 278 "type": "buttons",
266 - "buttons":["설정", "번역","사전"] 279 + "buttons":["설정", "번역","트랜드 검색"]
267 } 280 }
268 }); 281 });
269 } 282 }
......
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html> 2 <html>
3 <head> 3 <head>
4 - <title><%= title %></title> 4 + <title><%= title %>!</title>
5 - <link rel='stylesheet' href='/stylesheets/style.css' /> 5 + <link rel='stylesheet' href='/stylesheets/style.css'>
6 + <link rel="shortcut icon" type="image/x-icon" href="/images/favicon.ico">
7 + <style> div{text-align: center;}</style>
6 </head> 8 </head>
7 <body> 9 <body>
8 - <h1><%= title %></h1> 10 + <h1 style="border: 1px solid black"><span style="color:yellow"><%= title %></span> 에 오신걸 환영합니다!</h1>
9 - <p>Welcome to <%= title %></p> 11 + <h2><%= subtitle %></h2>
12 +
13 + <p><img src=<%= image1 %> width="250" /></p>
14 + <p><%=instruction1%></p>
15 + <p><img src=<%= image2%> width="250" /></p>
16 + <p><%=instruction2%></p>
17 + <p><img src=<%= image3%> width="250" /></p>
18 + <p><%=instruction3%></p>
19 +
20 + <a href="http://developers.naver.com" target="_blank">
21 + </br>
22 + </br>
23 + <p><img src="/images/2-1. NAVER OpenAPI_c_hor.png" alt="NAVER 오픈 API" width=400 /></p>
24 + </a>
25 + <a href="https://developers.kakao.com/" target="_blank">
26 + <p><img src="/images/kakaolink_btn_medium.png" alt="카카오 Developers" width=100 /></p>
27 + </a>
10 </body> 28 </body>
11 </html> 29 </html>
......