[Project] 공공데이터API를 이용한 버스정보조회 웹 만들기 <#1 기본 틀 구현과 버스노선 경유 정류소 목록 받아오기>

 

개발환경

vscode, windows10

기술 스택

HTML, CSS, JavaScript, Node Express

디렉터리 구조

 

구현한 기능

API url과 인증키를 통해 접근한 웹페이지의 xml문서를 json으로 변환 후 원하는 요소 값 가져오기

버스노선 검색 시 해당 버스가 경유하는 정류소 목록 출력

 

 

구현할 기능

정류소 검색 시 해당 정류소에 곧 도착할 버스정보, 도착시간 출력

실시간 버스 위치 검색 시 지도 API를 이용해서 지도 위에 해당 버스들 위치 출력

 

 

[프로젝트 파일 내부]

 

<app.js>

var request = require('request');
var convert = require('xml-js');
var fs = require('fs');
var template = require('./module/template.js'); // html 중복되는 부분 리팩토링
var module_id = require('./module/busID.js'); // 노선명을 파라미터로 보낼 시 노선 id 반환
var module_key = require('./module/AuthenticationKey.js'); // 공공데이터포털 인증키
const serviceKey = module_key.KEY; // 공공데이터 API 인증키

var express = require('express');
var app = express();

// express에서 body라는 요소를 사용할 수 있도록 만들어줌
const bodyParser = require('body-parser')
app.use(bodyParser.urlencoded({extended:false}))

// static 파일 추가 (css파일 적욜하기위해....)
app.use('/', express.static(__dirname )); 


// 이미지 페이지 라우팅
app.get('/img', function(req, res){
    fs.readFile('./img/image1.JPG', function (error, data){
        res.writeHead(200, {'Content-Type': 'text/html'})
        res.end(data);
    })
})

// 페이지들
app.get('/', function(req, res) {
    var html = template.html(`
    <footer>
        <h3>모두의 버스 : UNIBUS</h3>
        <p>copyright by Cocoon</p>
    </footer>`);
    res.send(html);
});
app.get('/index.html', function(req, res) {
    var html = template.html(`
    <footer>
        <h3>모두의 버스 : UNIBUS</h3>
        <p>copyright by Cocoon</p>
    </footer>`);
    res.send(html);
});
app.get('/1.html', function(req, res) {
    var html = template.html(`
    <section>
        <h2>버스노선 검색</h2>
        <form method="get" action="searchRoute">
            <input type="text" name='busNum' placeholder="버스 번호를 입력하세요.">
            <input type="submit" value="검색">
        </form>
    </section>`);
    res.send(html);
});
app.get('/2.html', function(req, res) {
    var html = template.html(`
    <section>
        <h2>정류소 버스도착예정정보</h2>
        <form method="get" action="searchArrival">
            <input type="text" name='station' placeholder="버스 번호를 입력하세요.">
            <input type="submit" value="검색">
        </form>
    </section>`);
    res.send(html);
});
app.get('/3.html', function(req, res) {
    var html = template.html(`
    <section>
        <h2>실시간 버스위치</h2>
        <form method="get" action="searchPos">
            <input type="text" name='busNum' placeholder="버스 번호를 입력하세요.">
            <input type="submit" value="검색">
        </form>
    </section>`);
    res.send(html);
});

// 버스노선 검색
app.get('/searchRoute', function(req, res) {
    var busNum = req.query.busNum;
    var busId = module_id.findBusID(busNum) // '721번 버스' => '100100112'
    
    if(busId == -1){ // 해당 버스가 존재하지 않을 때
        res.redirect('/1.html');
    }
    else{
        var APIurl = 'http://ws.bus.go.kr/api/rest/busRouteInfo/getStaionByRoute';
    
        var queryParams = '?' + encodeURIComponent('ServiceKey') + '=' + serviceKey;
        queryParams += '&' + encodeURIComponent('busRouteId') + '=' + encodeURIComponent(busId);

        request({
            url: APIurl + queryParams,
            method: 'GET'
        }, function (error, response, body) {
            var xmlToJson = convert.xml2json(body, { compact: true, spaces: 4 });
            var jsonObj = JSON.parse(xmlToJson);
            var item = jsonObj.ServiceResult.msgBody.itemList;

            var stationList = "";
            for(var i = 0; i < item.length; i++){
                stationList += item[i].stationNm._text + `<br>`;
            }
            res.send(stationList)
        });
    }
});

// 정류소 버스도착예정정보
app.get('/searchArrival', function(req, res) {
    var station = req.query.station;
    res.send(`정류소명은 ${station}`);
});
// 실시간 버스위치
app.get('/searchPos', function(req, res) {
    var busNum = req.query.busNum;
    res.send(`버스명은 ${busNum}`);
});


app.listen(3000);
console.log('Listening on port 3000...');

코드상에 이해가 안 되시는 부분이 있으시다면 댓글 남겨주세요.

 

공공데이터 포털의 API 인증키와 url로 접근한 xml문서를 json으로 변환 후 원하는 요소를 가져옵니다.

 

<style.css>

body{
    text-align: center;
    width: 400px;
    margin: auto;
}
a {
    color: black;
    text-decoration: none;
  }

가운데 정렬, 링크 밑줄 제거, 색 변경

 

 

[module파일 내부]

 

<AuthenticationKey.js>

exports.KEY = '공공데이터 포털에서 받은 인증키 입력';

공공데이터 포털에서 발급해주는 인증키를 혹시 몰라 일부러 다른 파일에 빼놨습니다.
(깃헙에 업로드 시 이 파일은 제외하고 업로드할 예정)

 

<busID.js>

BUS_ID = [
    ['0017', '100100124'], ['2234', '100100205'], ['5524', '100100260'], ['6631', '100100308'], ['9709', '100100402'], ['도봉03', '109900007'], ['성북05', '107900011'],
    ['02', '100100001'], ['2235', '100100206'], ['5525', '100100261'], ['6632', '100100309'], ['9711A', '100100607'], ['도봉04', '109900008'], ['성북06', '107900012'],
    ['03', '100100002'], ['2311', '100100599'], ['5528', '100100263'], ['6635', '100100311'], ['9714', '100100406'], ['도봉05', '109900004'], ['성북07', '107900013'],
    ['05', '100100003'], ['2312', '100100611'], ['5530', '100100264'], ['6637', '100100312'], ['N13', '100100593'], ['도봉06', '109900003'], ['성북08', '107900007'],
    ['100', '100100549'], ['240', '100100407'], ['5531', '100100265'], ['6638', '100100313'], ['N15', '100100610'], ['도봉07', '109900002'], ['성북09', '107900006'],
    ['101', '100100006'], ['241', '100100595'], ['5534', '100100266'], ['6640A', '100100601'], ['N16', '100100592'], ['도봉08', '109900006'], ['성북10-1', '107900014'],
    ['1014', '100100129'], ['2412', '100100209'], ['5535', '100100267'], ['6640B', '100100602'], ['N26', '100100586'], ['도봉09', '109900005'], ['성북10-2', '107900017'],
    ['1017', '100100130'], ['2413', '100100210'], ['5536', '100100268'], ['6642', '100100316'], ['N30', '100100591'], ['동대문01', '105900003'], ['성북12', '107900004'],
    ['102', '100100007'], ['2415', '100100211'], ['5537', '100100269'], ['6645', '100100318'], ['N37', '100100585'], ['동대문02', '105900002'], ['성북13', '107900001'],
    ['1020', '100100131'], ['242', '104000006'], ['5615', '100100272'], ['6647', '100100320'], ['N6000', '124000016'], ['동대문03', '105900006'], ['성북14-1', '107900010'],
    ['103', '100100008'], ['260', '100100042'], ['5616', '100100273'], ['6648', '115000005'], ['N6001', '124000015'], ['동대문05', '105900001'], ['성북14-2', '107900016'],
    ['104', '100100009'], ['261', '100100043'], ['5617', '100100274'], ['6649', '114000001'], ['N6002', '115000009'], ['동작01', '119900007'], ['성북15', '107900015'],
    ['105', '100100010'], ['262', '100100044'], ['5618', '100100275'], ['6654', '100100322'], ['N61', '100100589'], ['동작02', '119900013'], ['성북20', '105900004'],
    ['106', '100100011'], ['270', '100100046'], ['5619', '100100276'], ['6657', '100100329'], ['N62', '100100588'], ['동작03', '119900020'], ['성북21', '105900005'],
    ['107', '100100012'], ['271', '100100047'], ['5620', '100100277'], ['670', '100100436'], ['N65', '115000008'], ['동작05', '119900022'], ['성북22', '107900009'],
    ['108', '100100013'], ['272', '100100048'], ['5621', '100100278'], ['6701', '100100567'], ['강남01', '122900003'], ['동작05-1', '119900023'], ['양천01', '114900001'],
    ['109', '100100014'], ['273', '100100049'], ['5623', '100100279'], ['6702', '100100573'], ['강남02', '122900006'], ['동작06', '119900014'], ['양천02', '114900002'],
    ['110A고려대', '100100016'], ['301', '100100051'], ['5624', '100100280'], ['6703', '100100572'], ['강남03', '122900004'], ['동작07', '119900018'], ['양천03', '114900003'],
    ['110B국민대', '100100015'], ['3011', '100100438'], ['5625', '100100281'], ['6705', '100100570'], ['강남05', '122900002'], ['동작08', '119900009'], ['양천04', '116900018'],
    ['1111', '100100132'], ['3012', '100100579'], ['5626', '100100282'], ['6706', '100100569'], ['강남06', '122900005'], ['동작09', '119900019'], ['영등포01', '116900008'],
    ['1113', '100100133'], ['302', '100100052'], ['5627', '100100283'], ['6707A', '100100568'], ['강남06-1', '122900007'], ['동작10', '119900006'], ['영등포02', '118900004'],
    ['1114', '100100134'], ['303', '100100053'], ['5630', '100100284'], ['6707B', '115000002'], ['강남06-2', '122900010'], ['동작11', '119900011'], ['영등포03', '118900005'],
    ['1115', '100100566'], ['320', '100100564'], ['5633', '100100285'], ['6712', '100100330'], ['강남07', '122900001'], ['동작12', '119900021'], ['영등포04', '118900001'],
    ['1116', '107000001'], ['3212', '100100212'], ['571', '100100084'], ['6714', '100100331'], ['강남08', '122900008'], ['동작13', '120900001'], ['영등포05', '118900006'],
    ['1119', '100100137'], ['3214', '100100213'], ['5712', '100100286'], ['6715', '100100332'], ['강남10', '122900009'], ['동작14', '119900012'], ['영등포06', '118900003'],
    ['1120', '100100138'], ['3216', '100100215'], ['5713', '100100287'], ['6716', '100100451'], ['강동01', '124900002'], ['동작15', '119900010'], ['영등포07', '118900002'],
    ['1122', '100100425'], ['3217', '100100216'], ['5714', '100100288'], ['672', '100100495'], ['강동02', '124900003'], ['동작16', '119900017'], ['영등포08', '118900007'],
    ['1124', '100100139'], ['3220', '100100218'], ['600', '100100085'], ['673', '100100551'], ['강동05', '124900001'], ['동작17', '119900016'], ['영등포09', '116900017'],
    ['1126', '100100142'], ['3313', '100100219'], ['6000', '100100411'], ['674', '111000008'], ['강북01', '108900006'], ['동작18', '119900015'], ['영등포10', '118900008'],
    ['1127', '100100143'], ['3314', '100100220'], ['6001', '100100412'], ['700', '100100440'], ['강북02', '108900002'], ['동작19', '119900008'], ['영등포11', '118900009'],
    ['1128', '100100144'], ['3315', '100100221'], ['6002', '100100413'], ['701', '100100103'], ['강북03', '108900003'], ['동작20', '119900001'], ['영등포12', '114900006'],
    ['1129', '100100145'], ['3316', '100100222'], ['6003', '100100414'], ['7011', '100100450'], ['강북04', '108900005'], ['동작21', '119900024'], ['영등포13', '114900005'],
    ['1130', '100100146'], ['3317', '100100478'], ['6004', '100100415'], ['7013A', '100100449'], ['강북05', '108900008'], ['마포01', '102900001'], ['용산01', '102900003'],
    ['1131', '100100147'], ['3318', '100100498'], ['6005', '100100416'], ['7013B', '100100448'], ['강북06', '108900007'], ['마포02', '113900005'], ['용산02', '102900002'],
    ['1132', '100100148'], ['3319', '100100501'], ['6006', '100100506'], ['7016', '100100447'], ['강북08', '108900013'], ['마포03', '113900002'], ['용산03', '102900004'],
    ['1133', '100100149'], ['3321', '100100578'], ['6006-1', '123000006'], ['7017', '100100337'], ['강북09', '108900004'], ['마포05', '113900011'], ['용산04', '101900002'],
    ['1135', '100100150'], ['3322', '100100613'], ['6008', '100100417'], ['7018', '100100338'], ['강북10', '108900009'], ['마포06', '113900012'], ['은평01', '111900002'],
    ['1136', '100100151'], ['333', '100100496'], ['6009', '100100507'], ['7019', '100100339'], ['강북11', '108900001'], ['마포07', '113900010'], ['은평02', '111900003'],
    ['1137', '100100152'], ['340', '100100055'], ['6009-1', '123000007'], ['7021', '100100340'], ['강북12', '108900012'], ['마포08', '113900013'], ['은평03', '111900001'],
    ['1138', '100100153'], ['341', '100100056'], ['601', '100100086'], ['7022', '100100341'], ['강서01', '115900006'], ['마포09', '113900015'], ['은평04', '111900004'],
    ['1139', '100100154'], ['3411', '100100223'], ['6010', '100100584'], ['7024', '100100342'], ['강서02', '115900003'], ['마포10', '113900008'], ['은평05', '111900005'],
    ['1140', '100100155'], ['3412', '100100224'], ['6011', '100100418'], ['7025', '100100446'], ['강서03', '115900004'], ['마포11', '113900004'], ['은평06', '111900007'],
    ['1141', '100100156'], ['3413', '100100225'], ['6012', '100100419'], ['702A서오릉', '100100104'], ['강서04', '115900001'], ['마포12', '113900003'], ['은평07', '111900006'],
    ['1142', '100100157'], ['3414', '100100226'], ['6013', '100100420'], ['702B용두초교', '100100105'], ['강서05', '115900005'], ['마포13', '113900007'], ['은평08-1', '111900011'],
    ['1143', '100100158'], ['3416', '100100228'], ['6014', '100100421'], ['704', '100100107'], ['강서05-1', '115900008'], ['마포14', '113900006'], ['은평08-2', '111900012'],
    ['1144', '100100159'], ['3417', '100100229'], ['6015', '100100422'], ['705', '100100587'], ['강서06', '115900002'], ['마포15', '113900014'], ['은평09', '111900009'],
    ['1154', '100100164'], ['342', '124000038'], ['6016', '100100423'], ['707', '100100511'], ['강서07', '115900007'], ['마포16', '113900009'], ['은평10', '111900010'],
    ['1155', '100100165'], ['3422', '100100232'], ['6017', '100100533'], ['708', '123000011'], ['관악01', '120900005'], ['마포17', '113900001'], ['종로01', '100900006'],
    ['1156', '100100166'], ['3425', '100100609'], ['6018', '100100538'], ['710', '100100110'], ['관악02', '120900008'], ['마포18', '113900016'], ['종로02', '100900008'],
    ['1162', '100100170'], ['3426', '100100612'], ['6019', '115000006'], ['720', '100100111'], ['관악03', '120900003'], ['서대문01', '112900010'], ['종로03', '100900010'],
    ['1164', '100100171'], ['343', '107000002'], ['602', '100100087'], ['721', '100100112'], ['관악04', '120900009'], ['서대문02대', '112900014'], ['종로05', '100900011'],
    ['1165', '100100172'], ['350', '100100553'], ['6020', '100100509'], ['7211', '100100344'], ['관악05', '120900010'], ['서대문02소', '112900015'], ['종로06', '100900001'],
    ['1167', '108000002'], ['360', '100100057'], ['6020-1', '123000008'], ['7212', '100100499'], ['관악06', '120900004'], ['서대문03', '112900004'], ['종로07', '100900004'],
    ['120', '100100017'], ['362', '124000036'], ['6021', '115000001'], ['740', '100100537'], ['관악07', '120900006'], ['서대문04', '112900011'], ['종로08', '100900005'],
    ['121', '100100583'], ['370', '100100061'], ['603', '100100088'], ['741', '123000010'], ['관악08', '120900007'], ['서대문05', '112900009'], ['종로09', '100900003'],
    ['1213', '100100175'], ['400', '100100596'], ['6030', '100100517'], ['750A', '100100114'], ['관악10', '120900002'], ['서대문06', '112900007'], ['종로11', '100900007'],
    ['1218', '100100177'], ['401', '100100062'], ['604', '100100089'], ['750B', '100100565'], ['관악11', '114900004'], ['서대문07', '112900003'], ['종로12', '100900009'],
    ['1221', '100100178'], ['402', '100100063'], ['605', '100100090'], ['751', '100100116'], ['광진01', '104900005'], ['서대문08', '100900012'], ['종로13', '100900002'],
    ['1222', '100100179'], ['405', '100100597'], ['606', '100100091'], ['752', '100100117'], ['광진02', '104900003'], ['서대문09대', '112900012'], ['중랑01', '106900001'],
    ['1224', '100100181'], ['406', '100100064'], ['6100', '100100513'], ['753', '100100118'], ['광진03', '104900002'], ['서대문09소', '112900013'], ['중랑02', '106900002'],
    ['1226', '100100183'], ['420', '100100068'], ['6101', '100100373'], ['761', '111000014'], ['광진04', '104900001'], ['서대문10', '112900001'],
    ['1227', '100100184'], ['421', '100100409'], ['6102', '122000002'], ['7611', '100100345'], ['광진05', '104900004'], ['서대문11', '112900006'],
    ['130', '100100018'], ['4211', '100100604'], ['6103', '124000013'], ['7612', '100100346'], ['구로01', '116900013'], ['서대문12', '112900002'],
    ['140', '100100019'], ['4212', '100100234'], ['6200', '124000006'], ['7613', '100100347'], ['구로02', '116900014'], ['서대문13', '112900005'],
    ['141', '100100020'], ['4318', '100100237'], ['6211', '100100289'], ['771', '100100437'], ['구로03', '116900010'], ['서대문14', '112900008'],
    ['142', '100100021'], ['4319', '100100427'], ['6300', '100100508'], ['7711', '100100348'], ['구로04', '116900011'], ['서초01', '121900009'],
    ['143', '100100022'], ['440', '100100459'], ['6300-1', '123000009'], ['7713', '100100349'], ['구로05', '116900009'], ['서초02', '121900008'],
    ['144', '100100023'], ['441', '100100070'], ['640', '100100093'], ['7715', '100100462'], ['구로06', '116900012'], ['서초03', '121900005'],
    ['145', '100100024'], ['4412', '100100500'], ['641', '100100094'], ['7719', '124000008'], ['구로07', '116900006'], ['서초05', '119900003'],
    ['146', '100100025'], ['4419', '100100454'], ['6411', '100100290'], ['7720', '100100352'], ['구로08', '116900015'], ['서초06', '119900002'],
    ['147', '100100026'], ['4432', '100100246'], ['643', '100100096'], ['7722', '100100353'], ['구로09', '116900007'], ['서초07', '121900011'],
    ['148', '100100027'], ['4433', '100100247'], ['650', '100100097'], ['7723', '100100354'], ['구로10', '116900003'], ['서초08', '121900002'],
    ['150', '100100029'], ['4435', '122000001'], ['6500', '124000009'], ['7726', '100100357'], ['구로11', '116900004'], ['서초09', '121900007'],
    ['151', '100100030'], ['452', '113000002'], ['651', '100100098'], ['7727', '100100358'], ['구로12', '116900002'], ['서초10', '121900003'],
    ['152', '100100031'], ['461', '100100071'], ['6511', '100100291'], ['7728', '100100359'], ['구로13', '116900001'], ['서초11', '121900006'],
    ['153', '100100032'], ['463', '100100605'], ['6512', '100100292'], ['773', '111000011'], ['구로14', '116900005'], ['서초13', '121900013'],
    ['160', '100100033'], ['470', '100100073'], ['6513', '100100293'], ['7730', '100100360'], ['구로15', '116900016'], ['서초14', '121900010'],
    ['162', '100100034'], ['472', '100100075'], ['6514', '100100294'], ['7734', '111000010'], ['금천01', '117900008'], ['서초15', '121900012'],
    ['171', '100100036'], ['500', '100100076'], ['6515', '100100521'], ['7737', '100100363'], ['금천01-1', '111900013'], ['서초16', '119900005'],
    ['1711', '100100185'], ['501', '100100077'], ['6516', '100100576'], ['7738', '100100364'], ['금천02', '117900006'], ['서초17', '119900004'],
    ['172', '100100037'], ['5012', '100100248'], ['652', '100100099'], ['7739', '100100552'], ['금천03', '117900003'], ['서초18', '121900016'],
    ['173', '110000002'], ['502', '100100410'], ['653', '100100497'], ['774', '111000012'], ['금천04', '117900002'], ['서초18-1', '121900015'],
    ['201', '100100038'], ['503', '100100078'], ['654', '115000007'], ['8221', '106000001'], ['금천05', '117900001'], ['서초20', '121900004'],
    ['2012', '100100186'], ['504', '100100079'], ['6600', '123000002'], ['8331', '124000010'], ['금천06', '117900004'], ['서초21', '121900001'],
    ['2013', '100100188'], ['505', '100100080'], ['661', '100100102'], ['8441', '103000001'], ['금천07', '117900007'], ['서초22', '121900014'],
    ['2014', '100100189'], ['506', '100100081'], ['6611', '100100295'], ['8541', '100100383'], ['금천08', '117900005'], ['성동01', '103900003'],
    ['2015', '100100190'], ['507', '100100082'], ['6613', '100100453'], ['8551', '108000001'], ['금천11', '117900010'], ['성동02', '103900004'],
    ['2016', '100100522'], ['540', '100100083'], ['6614', '100100297'], ['8552', '116000001'], ['노원01', '110900004'], ['성동03', '103900006'],
    ['202', '100100039'], ['541', '100100574'], ['6615', '116000002'], ['8761', '113000001'], ['노원02', '110900009'], ['성동05', '101900001'],
    ['2112', '100100191'], ['5413', '100100249'], ['6616', '100100298'], ['8771', '111000009'], ['노원03', '110900005'], ['성동06', '103900007'],
    ['2113', '100100192'], ['542', '100100603'], ['6617', '100100299'], ['8772', '100100525'], ['노원04', '110900001'], ['성동07', '103900005'],
    ['2114', '100100193'], ['5511', '100100250'], ['662', '100100550'], ['8774', '100100387'], ['노원05', '110900003'], ['성동08', '103900002'],
    ['2115', '100100598'], ['5513', '100100251'], ['6620', '100100300'], ['8777', '112000001'], ['노원08', '110900007'], ['성동09', '103900001'],
    ['2211', '100100194'], ['5515', '100100252'], ['6623', '100100301'], ['9401', '100100389'], ['노원09', '110900006'], ['성동10', '103900008'],
    ['2221', '100100198'], ['5516', '100100253'], ['6624', '100100302'], ['9403', '100100390'], ['노원11', '110900002'], ['성동12', '103900009'],
    ['2222', '100100199'], ['5517', '100100254'], ['6625', '100100303'], ['9404', '100100391'], ['노원13', '110900008'], ['성동13', '103900010'],
    ['2224', '100100201'], ['5519', '100100255'], ['6627', '100100304'], ['9408', '100100392'], ['노원14', '109900011'], ['성북01', '107900008'],
    ['2227', '100100202'], ['5522A난곡', '100100257'], ['6628', '100100305'], ['9701', '100100397'], ['노원15', '109900010'], ['성북02', '107900003'],
    ['2230', '100100203'], ['5522B호암', '100100258'], ['6629', '100100306'], ['9703', '100100398'], ['도봉01', '109900001'], ['성북03', '107900002'],
    ['2233', '100100204'], ['5523', '100100259'], ['6630', '100100307'], ['9707', '100100400'], ['도봉02', '108900010'], ['성북04', '107900005']]


exports.findBusID = function (num) {
    var id = -1;
    for(var i = 0;i < BUS_ID.length; i++){
        if(BUS_ID[i][0] == num){
            id = BUS_ID[i][1];
            break;
        }
    }
    return id;
};

 

공공데이터 포털에서

• 노선정보조회 서비스
• 버스도착정보조회 서비스 
• 버스노선 조회 서비스
• 정류소 정보조회 서비스

이 4가지의 API를 이용할 것이며 API를 호출할 때 버스명이 아닌 버스 id값을 가지고 호출하기 때문에 사용자가 입력창에 버스명을 입력 시 버스 id로 리턴 시켜 주기 위해 만들었습니다. 해당 버스가 존재하지 않을 경우 -1을 리턴합니다.

 

<template.js>

module.exports = {
    html: function (add) {
        return `
        <!doctype html>
        <html>
        
        <head>
          <title>모두의 버스 - 환영합니다</title>
          <meta charset="utf-8">
          <link rel="stylesheet" href="style.css">
        </head>
        
        <body>
          <header>
            <h1>
              <a href="index.html"><img src="/img" width="300px" height="160px"></a>
            </h1>
          </header>
        
          <section>
            <p><a href="1.html">버스노선 검색</a></p>
            <p><a href="2.html">정류소 버스도착예정정보</a> </p>
            <p><a href="3.html">실시간 버스위치</a> </p>
          </section>
        
          ${add}
        
        </body>
        
        </html>`;
    }
}

html 파일을 작성하다 보니 중복되는 부분이 많아 비효율적이라 생각하여 template를 만들었습니다.  

 

 

버스노선 검색에서 '721'로 검색 시 아래와 같이 경유하는 정류소 목록이 출력됩니다.

 

 

마찬가지로 '강남01'로 입력 시 강남01번 버스가 경유하는 정류소 목록들이 잘 출력되고 있습니다.

 

 

 

<힘들었던 점>

공공데이터에서 받아온 인증키와 url로 접근한 웹페이지의 xml문서를 가져와서 콘솔 창에 원하는 정보를 출력하는 것 까지는 하였으나 그 정보들을 웹페이지 화면에 어떻게 보여줘야 할지 방법을 찾는데 시간이 많이 걸렸습니다. 해당 지식이 많이 부족하여 구글링 하면서 겨우 방법을 찾았습니다.

res.send(html)을 통해 웹페이지에 정보들이 출력될 때 얼마나 신나던지.... 
원하는 정보를 화면에 출력했으니 반 이상은 왔다고 생각합니다.

 

<다음 개발 계획>

버스노선검색과 마찬가지로 정류소 목록을 받아와 해당 정류소의 도착정보를 표시하고(버스정류장 안내 화면처럼) 실시간 버스들 위치의 좌표를 받아 지도 API를 이용해 지도 위에 표시를 할 예정입니다. 

디자인도 좀 투박하니 좀 더 보기 좋게 구상해보겠습니다. 

 

 

<GitHub Link>

github.com/K-Junyyy/UNIBUS-APP

K-Junyyy/UNIBUS-APP