공공 API 사용하여 웹페이지 만들기

 

아침에 어무니께서 마스크 사는날이라고 재고가 있는지 확인해달라고 해서 확인해주고

평소 공공API를 사용해보고싶었는데 약국 마스크 재고 공공 API를 사용하여 간단한 재고확인웹페이지를 만들면

이 시국에 좋은 포트폴리오 일 것 같아 나두 한번 만들어 보기로 해땅

실습의 의미를 두고 스프링부트가 아닌 스프링 레거시로 작업해보아야 겠당.

 

 

1. 공공데이터 테스트

* 사용할 공공데이터API

https://www.data.go.kr/dataset/15043025/openapi.do

공공데이터 포털

 

	$('#test').on('click',function(){
		var myurl = 'https://8oi9s0nnth.apigw.ntruss.com/corona19-masks/v1/stores/json'; 
		  $.ajax({
				url : myurl,
				type : 'GET'
				})
		.done(function(r) {
			console.log(r);
			alert('성공');
			}).fail(function(r) {
			alert('실패');
		});
	});

 

사진 삭제

사진 설명을 입력하세요.

잘 불러와진다.

위도와 경도를 받아와 지도에 마커를 찍고 약국정보를 로드하면 된다.

 

 

 

2. 카카오지도 API테스트

https://developers.kakao.com/features/platform

 

 

카카오API는 활용도가 많이 높고 샘플 등이 너무 많다!

지도를 생성하는 예제이다.

    mapOption = { 
        center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
        level: 3 // 지도의 확대 레벨
    };

// 지도를 표시할 div와  지도 옵션으로  지도를 생성합니다
var map = new kakao.maps.Map(mapContainer, mapOption); 

 

 

3. 웹 페이지 커스터마이징

 

 

 

 

 

띄어진 지도와, 출력할 정보 틀을 만들어놓고 공공api에서 위도와 경도를 받아와 작업하면 된다.

 

 

 

4. 주소API사용하기

 

 

http://postcode.map.daum.net/guide

Daum 우편번호 서비스

 

사용법이 엄청 잘 나와있다.

이 웹페이지에서는 상세주소는 필요가없기때문에 ex)부산광역시 진구 부전동 이런식으로만 동까지의 주소만 가져와서 주소창에 입력되도록 커스터마이징하였다.

	function findAddr() {
        new daum.Postcode({
            oncomplete: function(data) {
            	var roadAddr = data.roadAddress;
               	document.getElementById("findAddr").value = roadAddr;
            	close();
               }
        }).open();
    }

 

 

5. 지도API사용하기

내가 사용한 기술은 지도생성하기, 마커에 인포윈도우 표시하기, 마커에클릭이벤트 등록하기,여러개 마크 표시하기이다.

var mapContainer = document.getElementById('map'), // 지도를 표시할 div  
    mapOption = { 
        center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
        level: 3 // 지도의 확대 레벨
    };

var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
 
// 마커를 표시할 위치와 title 객체 배열입니다 
var positions = [
    {
        title: '카카오', 
        latlng: new kakao.maps.LatLng(33.450705, 126.570677)
    },
    {
        title: '생태연못', 
        latlng: new kakao.maps.LatLng(33.450936, 126.569477)
    },
    {
        title: '텃밭', 
        latlng: new kakao.maps.LatLng(33.450879, 126.569940)
    },
    {
        title: '근린공원',
        latlng: new kakao.maps.LatLng(33.451393, 126.570738)
    }
];

// 마커 이미지의 이미지 주소입니다
var imageSrc = "http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png"; 
    
for (var i = 0; i < positions.length; i ++) {
    
    // 마커 이미지의 이미지 크기 입니다
    var imageSize = new kakao.maps.Size(24, 35); 
    
    // 마커 이미지를 생성합니다    
    var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize); 
    
    // 마커를 생성합니다
    var marker = new kakao.maps.Marker({
        map: map, // 마커를 표시할 지도
        position: positions[i].latlng, // 마커를 표시할 위치
        title : positions[i].title, // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다
        image : markerImage // 마커 이미지 
    });
}

처음엔 헷갈리지만 여러가지 샘플을 보다보면 기능과 함수들이 엄청 잘 정리되어있다.

우선, 예제마다 변수는 다르지만 띄울mapContainer를 선언해주는데 내가 가장 처음 받아온 지도의 변수를 잘 기억해서 활용하면된다.

마커를 활용하는 예제에는 공통적으로 var marker = new kakao.maps.Marker({}) 부분을 보면 되는데 여러가지 변수가 있는데 이는 샘플 부분이 아닌 아래의 Docs의 마커의 메소드를 살펴보면 된다.

 

 

 

 

 

 

 

6. 스프링레거시 AWS 배포하기

https://blog.naver.com/mooo4030/221835311940

전에는 스프링부트 aws배포를 해보았는데

 

이번 웹은 스프링레거시를 배포할 예정이다.

인스턴트를 생성, 우분투에 접속하여 필요한 설치파일을 설치한다.

*필요한 파일 설치

apt-get update

apt-get install maven

apt-get install openjdk-8-jdk

apt-get install tomcat8

스프링부트는 내장톰캣을 사용하여 따로 install하지않았지만 스프링레거시는 tomcat이 필요하다.

또한 WinSCP등으로 우분투운영체제로 바로 war파일을 보낼수도 있지만 웹페이지를 업데이트할때 git으로 업로드하고 내려받는게 좀 더 효율성이있어 git으로 바로 내리고 mavan을 통해 war로 압축할 예정이다.

 

 

pom.xml이 있는곳에서 mvn compile, mvn package를 하면 target폴더에 war파일이 생성된다.

 

 

war파일을 /var/lib/tomcat8/webapps 경로로 이동해주고

service tomcat8 restart를 하면 잘 먹는다.

이때 server.xml을 수정해주어야지 나의 웹프로젝트로 바로 접근이 가능하다.

나의 작업환경의 docBase와 git에서 내려받은 docBase의 이름이 다른 경우가 있으니 꼭 잘 확인하여 설정해주어여한다

 

 

 

톰캣을 재시작 해주면 완료 :-)

 

 

 

 

7. 기능소개

 

 

 

 

* 코드 그대로 복붙해서 지가햇다고 포폴올리는 양심없는 사람때문에 주소는 비공개:-)

 

 

 

1. 주소입력창을 클릭하면 주소팝업창이 뜬다.

- 다음카카오 주소API활용하여 도로명주소를 받아온다.

2. 찾기버튼 클릭 시 지도가 변경, 주변의 약국 정보를 읽어온다.

- 주소입력창에 적어두었던 주소를 XX광역시 XX구 XX동을 기준으로 지도를 로드시킨다.

- 입력주소를 기준으로 주변의 5키로미터 내의 약국 정보를 갖고온다.

- 약국정보 중 재고정보를 확인하여 따로 배열을 만든다.

- 받아온 재고정보는 총 5가지(100개이상, 30~100개, 1~30개, 없음)인데 각각 다른 아이콘으로 마커를 찍는다.

3. 마커를 클릭하면 판매처의 정보등을 로드할 수 있다.

 

 

 

 

 

이상 공공 API를 활용한 웹페이지를 만들어보았다.

코로나가 얼른 지나갔으면 좋겠다.

 

 

 

공공api 활용하기글을 다시한번 자세히 작성해보았다.

 

https://selena30.tistory.com/177

공공 API 사용하여 웹페이지 만들기 -2

 

 

==========================================================23.11.30 추가

 

어느덧 4년차 개발자가 되어가고있다.

아무것도 안했는데 시간이 참 잘 간다.

블로그를 관리 안하는데 꾸준히 보는 사람은 있는 것 같다.

 

혹시 이런 부족한 나라도 도움이 된다면 하는 마음으로 개발관련하여 질문할 수 있는 오픈채팅방 링크를 남겨봅니다.

 

 

멍멍이 발 사람

https://open.kakao.com/o/sc15dfVf

 

참여코드 push

 

 

======================================================== 참고할수있는 다른 공공 api를 사용한 nodejs 프로젝트 github

 

 

https://github.com/devseoha/20932820sjcu

이미지 썸네일 삭제

GitHub - devseoha/20932820sjcu

Contribute to devseoha/20932820sjcu development by creating an account on GitHub.

github.com