728x90
반응형

1. Google Cloud 프로젝트 생성

 

링크로 접속합니다.

https://console.cloud.google.com/freetrial/signup/tos?hl=ko

 

Google 클라우드 플랫폼

로그인 Google 클라우드 플랫폼으로 이동

accounts.google.com

 

 

약관 동의 화면

서비스 약관에 동의합니다.

 

 

 

주소 입력 화면

계좌 유형 및 주소를 입력합니다.

 

 

 

전화번호 인증 화면

본인 실명 및 주민번호 전화번호 등을 입력합니다.

 

 

 

카드 번호를 입력합니다.

마스터카드 및 visa 카드가 아니여도 등록 가능합니다.

 

 

 

인증을 마치면 프로젝트가 생성되며 크레딧이 들어옵니다.

  • 대략 40만원 정도 들어오고 3개월동안 사용할 수 있는 크레딧입니다.
  • 무료체험 기간이 종료되어도 계정을 활성화 시키지 않으면 비용이 발생하지 않습니다.

 

 

2. 라이브러리 설정

 

API 및 서비스 > 라이브러리 로 이동합니다.

 

 

 

 

 

검색창에 vision을 입력하고 Cloud Vision API를 클릭하고 사용 버튼을 클릭합니다.

 

 

 

 

3. API 키 생성

 

사용자 인증 정보 > 사용자 인증 정보 만들기 > API 키 를 클릭하여 새로운 API 키를 생성합니다.

 

 

 

 

4. 이미지 속성 감지 API 실행

import dotenv from 'dotenv';
import fetch from 'node-fetch';

dotenv.config();

export async function googleImageDetection(imgURI) {
  const apiKey = process.env.GOOGLE_CLOUD_API_KEY;

  try {
    const response = await fetch(`https://vision.googleapis.com/v1/images:annotate?key=${apiKey}`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        requests: [
          {
            image: {
              source: {
                imageUri: imgURI,
              },
            },
            features: [
              {
                type: 'IMAGE_PROPERTIES',
                maxResults: 10,
              },
            ],
          },
        ],
      }),
    });

    const data = await response.json();
    if (response.ok) {
      const colors = data.responses[0].imagePropertiesAnnotation.dominantColors.colors;
      console.log(colors);
      return colors;
    } else {
      throw new Error(data.error.message);
    }
  } catch (error) {
    console.error('Error detecting image properties:', error);
  }
}

 

간단한 테스트를 위해 이미지 속성 감지 API를 실행해보았습니다.

클라이언트 측에서는 보안상의 이유로 실행할 수 없기 때문에 서버측에서 실행되도록 세팅하셔야 합니다.

 

  • GOOGLE_CLOUD_API_KEY : 발급받았던 API 키를 환경변수로 설정하고 불러옵니다.
  • imageUri : 속성을 분석하고싶은 이미지 링크를 전달합니다.
  • IMAGE_PROPERTIES : 이미지 관련 API 기능 중에서 이미지 속성 감지가 실행될 수 있도록 해당 타입을 지정합니다.
  • maxResults : 속성 결과물을 최대 몇개까지 추출할지 설정합니다. (10개로 설정해도 그 이하로 추출될 수 있습니다)

 

 

결과 데이터

 

이미지 속성 감지 결과가 콘솔에 잘 출력되었습니다.

속성 결과물을 최대 10개 이하로 설정하였는데, 색상이 많지 않은 이미지라 그런지 4개만 추출되었습니다.

 

 

 

https://cloud.google.com/vision/docs/detecting-properties?hl=ko#vision_image_property_detection-nodejs

 

이미지 속성 감지  |  Cloud Vision API  |  Google Cloud

Vertex AI의 최신 멀티모달 모델인 Gemini 1.5 모델을 사용해 보고 100만 개의 토큰 컨텍스트 윈도우로 빌드할 수 있는 항목을 확인해 보세요. Vertex AI의 최신 멀티모달 모델인 Gemini 1.5 모델을 사용해

cloud.google.com

https://developers.google.com/explorer-help/code-samples?hl=ko#node.js

 

코드 샘플 실행  |  Google APIs Explorer  |  Google for Developers

이 페이지는 Cloud Translation API를 통해 번역되었습니다. 코드 샘플 실행 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. Google API 탐색기는 코드 샘플을 동적으

developers.google.com

 

728x90
반응형
728x90
반응형

1. 결제정보 추가 (포인트 충전)

결제 정보를 추가합니다.

 

 

 

 

visa 또는 master 카드 등 해외 결제가 가능한 카드만 등록 가능합니다. (일반 체크카드 등록시 오류)

 

 

 

 

최소 충전금액이 5$로 설정되어있어서 최소 금액으로 충전 후 카드 등록을 완료할 수 있었습니다.

 

 

 

 

 

크레딧이 일정 금액 미만으로 떨어질 경우 자동 충전도 가능하도록 설정할 수 있습니다.

 

 

 

 

 

2. API 키 발급

‘+ Create new secret key’를 클릭합니다.

 

 

 

 

이름 및 권한 설정 후 키를 생성합니다.

 

 

 

 

발급받은 키는 이 팝업 이후로는 확인할 수 없기 때문에 복사후 안전한 곳에 저장해두시길 권장드립니다.

 

 

 

 

 

3. 라이브러리 설치

npm install --save openai
# or
yarn add openai

OpenAI 라이브러리를 설치합니다.

 

 

 

 

 

4. 텍스트 생성 API 사용해보기

import OpenAI from "openai";

const openai = new OpenAI({
  apiKey: process.env.CHATGPT_API_KEY
});

async function main() {
  const completion = await openai.chat.completions.create({
    messages: [
      {
        role: "system",
        content: "You are a helpful assistant designed to output JSON.",
      },
      { role: "user", content: "Who won the world series in 2020?" },
    ],
    model: "gpt-3.5-turbo-0125",
    response_format: { type: "json_object" },
  });
  console.log(completion.choices[0].message.content);
}

main();

 

간단한 테스트를 위해 json 형식으로 답변해주는 모드를 사용해보았습니다.

  • CHATGPT_API_KEY : 환경변수로 ChatGPT API 키를 설정해줍니다. (.env 파일에 세팅)
  • role(system) : 모델에게 역할을 지정하거나 대화 맥락을 지정해줄 수 있습니다.
  • role(user) : 모델에게 질문할 내용을 입력할 수 있습니다.
  • response_format : { type: "json_object" }으로 설정하여 답변을 json 형식으로 제한합니다.
  • model : 모델은 여러가지가 있으니 프로젝트에 맞는 조건의 모델을 선택하시길 바랍니다.

GPT 주력 모델

 

 

 

 

 

예제 실행 결과를 출력해보았더니 json 형식으로 잘 들어오는것을 확인할 수 있었습니다.

 

 

728x90
반응형
728x90
반응형

[카카오지도 API] spring / 주소로 장소 표시하기 (tistory.com)

 

[카카오지도 API] spring / 주소로 장소 표시하기

주소로 장소 표시하기 - Kakao 지도 Web API 📝카카오지도 API를 활용하여 주소로 장소 표시하기 위 링크로 접속하고 [Javascript + HTML]을 누르면 카카오지도 API 활용 코드를 확인할 수 있습니다. AddressC

fjdkslvn.tistory.com

 

[카카오지도 API] 좌표로 주소 추출 (tistory.com)

 

[카카오지도 API] 좌표로 주소 추출

 

fjdkslvn.tistory.com

: 해당 글을 참조하면 지번 주소로 변환하는 방법을 알 수 있습니다.

 

📘 주소 입력시 지도에 출력

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>
<head>
<!-- jquery 사용 -->
<script src="http://code.jquery.com/jquery-latest.js"></script> 
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
		<table>
			<tr>
				<td>주소</td>
				<td><input type="text" id="address"></td>
				<td><button type="button" id="searchBtn">검색</button></td>
			</tr>
			<tr>
				<td>상세 주소</td>
				<td><input type="text" name="detailAddress2"></td>
				<td></td>
			</tr>
		</table>
		<div id="map" style="width:100%;height:350px;"></div>
   
	<!-- kakao API -->
	<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=자바스크립트 키&libraries=services"></script>
	<script>
	var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
	    mapOption = {
	        center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
	        level: 3 // 지도의 확대 레벨
	    };  
	
	
	$('#searchBtn').click(function(){
		// 버튼을 click했을때
		
		// 지도를 생성합니다    
		var map = new kakao.maps.Map(mapContainer, mapOption); 
		
		// 주소-좌표 변환 객체를 생성합니다
		var geocoder = new kakao.maps.services.Geocoder();
		
		// 주소로 좌표를 검색합니다
		geocoder.addressSearch($('#address').val(), function(result, status) {
	
		    // 정상적으로 검색이 완료됐으면 
		     if (status === kakao.maps.services.Status.OK) {
		        var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
		        
		        // 결과값으로 받은 위치를 마커로 표시합니다
		        var marker = new kakao.maps.Marker({
		            map: map,
		            position: coords
		        });
	
		        // 인포윈도우로 장소에 대한 설명을 표시합니다
		        var infowindow = new kakao.maps.InfoWindow({
		            content: '<div style="width:150px;text-align:center;padding:6px 0;">장소</div>'
		        });
		        infowindow.open(map, marker);
	
		        // 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
		        map.setCenter(coords);
		    } 
		});  
	});
	  
	</script>
</body>
</html>

검색이 실질적으로 되는 부분은 id가 address인 input입니다.

 

해당 부분에 지번 주소, 도로명 주소, 해당 주소 포함 상세주소 등 어떠한 형식으로 입력해도 버튼을 누르면, kakao API를 통해 좌표를 검색하여 지도에 위치를 찍어줍니다.

 

문제점 : 어떠한 방식으로 입력해도 주소에 찍히기 때문에 원하는 형식으로 input의 value값을 바꿔줘야 주소값을 저장하고 활용할 때, 문제가 생기지 않습니다.

 

ex) 서울 마포구 러아니푸로 8길 79-5 순돌아파트 101동 809호

     : 서울특별시로 저장해야하는데 서울로 되어있음

     : 러아니푸로 8길이 띄어쓰기 적용이 되어있음

     : 건물 부번까지(79-5)만 저장해야 하는데 상세 주소가 포함되어있음

     : 도로명 주소를 받아야하는데 지번주소로 되어있음

 

 

 

 

📘 주소 입력시 지도에 출력

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>
<head>
<!-- jquery 사용 -->
<script src="http://code.jquery.com/jquery-latest.js"></script> 
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
		<table>
			<tr>
				<td>주소</td>
				<td><input type="text" name="detailAddress" id="address"></td>
				<td><button type="button" id="searchBtn">검색</button></td>
			</tr>
			<tr>
				<td>상세 주소</td>
				<td><input type="text" name="detailAddress2"></td>
				<td></td>
			</tr>
		</table>
		<div id="map" style="width:100%;height:350px;"></div>
   
	<!-- kakao API -->
	<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=자바스크립트 키&libraries=services"></script>
	<script>
	var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
	    mapOption = {
	        center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
	        level: 3 // 지도의 확대 레벨
	    };  
	
	
	$('#searchBtn').click(function(){
		// 버튼을 click했을때
		
		// 지도를 생성합니다    
		var map = new kakao.maps.Map(mapContainer, mapOption); 
		
		// 주소-좌표 변환 객체를 생성합니다
		var geocoder = new kakao.maps.services.Geocoder();
		
		// 주소로 좌표를 검색합니다
		geocoder.addressSearch($('#address').val(), function(result, status) {
	
		    // 정상적으로 검색이 완료됐으면 
		     if (status === kakao.maps.services.Status.OK) {
		        var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
		        
		        // 추출한 좌표를 통해 도로명 주소 추출
		        let lat = result[0].y;
		        let lng = result[0].x;
		        getAddr(lat,lng);
		        function getAddr(lat,lng){
		            let geocoder = new kakao.maps.services.Geocoder();
	
		            let coord = new kakao.maps.LatLng(lat, lng);
		            let callback = function(result, status) {
		                if (status === kakao.maps.services.Status.OK) {
		                	// 추출한 도로명 주소를 해당 input의 value값으로 적용
		                    $('#address').val(result[0].road_address.address_name);
		                }
		            }
		            geocoder.coord2Address(coord.getLng(), coord.getLat(), callback);
		        }
		        
		        // 결과값으로 받은 위치를 마커로 표시합니다
		        var marker = new kakao.maps.Marker({
		            map: map,
		            position: coords
		        });
	
		        // 인포윈도우로 장소에 대한 설명을 표시합니다
		        var infowindow = new kakao.maps.InfoWindow({
		            content: '<div style="width:150px;text-align:center;padding:6px 0;">장소</div>'
		        });
		        infowindow.open(map, marker);
	
		        // 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
		        map.setCenter(coords);
		    } 
		});  
	});
	  
	</script>
</body>
</html>

이슈를 해결하는 코드입니다.

 

주소를 통해 좌표값을 추출하면, 해당 좌표값으로 다시 원하는 형태의 주소(도로명 주소)를 추출합니다.

 

원하는 형태의 주소값은 처음 주소를 입력받은 id가 address인 input의 value값으로 다시 넣어줍니다.

 

해당 input에 원하는 형태의 주소 형태로 값이 적용된 것을 확인할 수 있습니다.

728x90
반응형
728x90
반응형

📗 좌표로 주소 데이터 확인

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=자바스크립트 키&libraries=services"></script>
<script>
let lat = 37.5566803113882;
let lng = 126.904501286522;
getAddr(lat,lng);
function getAddr(lat,lng){
    let geocoder = new kakao.maps.services.Geocoder();

    let coord = new kakao.maps.LatLng(lat, lng);
    let callback = function(result, status) {
        if (status === kakao.maps.services.Status.OK) {
            console.log(result);
        }
    }
    geocoder.coord2Address(coord.getLng(), coord.getLat(), callback);
}
</script>

원하는 위치의 좌표를 lat, lng변수에 넣어 실행하면 kakao API를 통해 지번주소와 도로명 주소를 추출 할 수 있습니다.

 

(위치는 제가 좋아하는 맛집입니다..)

 

 

 

 

 

 

📗 좌표로 지번 주소 추출

해당 주소 데이터에서 address_name을 추출하는 방법을 알려드리겠습니다.

 

 

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=자바스크립트 키&libraries=services"></script>
<script>
let lat = 37.5566803113882;
let lng = 126.904501286522;
getAddr(lat,lng);
function getAddr(lat,lng){
    let geocoder = new kakao.maps.services.Geocoder();

    let coord = new kakao.maps.LatLng(lat, lng);
    let callback = function(result, status) {
        if (status === kakao.maps.services.Status.OK) {
            console.log(result[0].address.address_name);
        }
    }
    geocoder.coord2Address(coord.getLng(), coord.getLat(), callback);
}
</script>

이전에는 주소데이터의 결과값인 result만을 출력하여 데이터 집합을 출력하였습니다.

 

현재는 result[0].address.address_name을 통해 지번 주소에 직접 접근하여 데이터를 추출하였습니다.

 

 

 

📗 좌표로 도로명 주소 추출

해당 주소 데이터에서 address_name을 추출하는 방법을 알려드리겠습니다.

 

 

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=자바스크립트 키&libraries=services"></script>
<script>
let lat = 37.5566803113882;
let lng = 126.904501286522;
getAddr(lat,lng);
function getAddr(lat,lng){
    let geocoder = new kakao.maps.services.Geocoder();

    let coord = new kakao.maps.LatLng(lat, lng);
    let callback = function(result, status) {
        if (status === kakao.maps.services.Status.OK) {
            console.log(result[0].road_address.address_name);
        }
    }
    geocoder.coord2Address(coord.getLng(), coord.getLat(), callback);
}
</script>

지번 주소의 경우와 마찬가지 입니다.

 

result[0].address.address_name을 통해 도로명 주소에 직접 접근하여 데이터를 추출하였습니다.

 

같은 방식으로 원하는 데이터에 자유롭게 접근할 수 있습니다.

 

728x90
반응형
728x90
반응형

 

🎃 카카오지도 API 오류

[오류명]

- Failed to load resource : the server responded with a status of 401 (Unauthorized)

- Uncought ReferenceError : kakao is not defined

- Failed to load resource : the server responded with a status of 404 ( )

 

 

 

 

 

 

 

💊 오류 해결 방법

 

1. API 키값 오류

kakao developers에서 발급받은 본인의 API key값을 확인합니다.

 

 

 

 

<!-- kakao API -->
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=본인의 키값&libraries=services"></script>

kakao 지도 API를 사용하기 위해 작성한 script코드 속 appkey값에 문제점이 없는지 확인합니다. 잘못된 키 값을 사용하면 오류가 생길 수 있습니다.

 

 

 

 

2. 플랫폼 -> Web -> 사이트 도메인 확인

해당 위치에 프로젝트 도메인을 입력하지 않으면, 오류가 발생합니다.

 

저는 기존에 사이트 도메인으로 http://localhost:8080 넣어두고 localhost 8080번 포트에서 프로젝트를 진행했습니다. 이후에 :8080을 붙이는 것이 너무 불편하여 80번 포트로 변경 후 프로그램을 실행했더니 해당 오류가 발생하였습니다. 찾아본 결과 도메인을 추가하지 않아서 발생한 문제인것을 알고 추가하여 오류를 해결하였습니다.

728x90
반응형
728x90
반응형

주소로 장소 표시하기 - Kakao 지도 Web API

 

 

 

 

📝카카오지도 API를 활용하여 주소로 장소 표시하기

 

위 링크로 접속하고 [Javascript + HTML]을 누르면 카카오지도 API 활용 코드를 확인할 수 있습니다.

 

 

 

 

 

 

AddressController.java

package com.practice.fjdkslvn.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class AddressController {
	
	@GetMapping("/address") 
	public String address() {
		System.out.println("카카오 API 테스트");
		
		return "address";
	}
}

address.jsp를 포워딩하는 코드를 작성합니다.

 

 

 

 

 

 

 

 

address.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>주소로 장소 표시하기</title>
    
</head>
<body>
<p style="margin-top:-12px">
    <em class="link">
        <a href="javascript:void(0);" onclick="window.open('http://fiy.daum.net/fiy/map/CsGeneral.daum', '_blank', 'width=981, height=650')">
            혹시 주소 결과가 잘못 나오는 경우에는 여기에 제보해주세요.
        </a>
    </em>
</p>
<div id="map" style="width:100%;height:350px;"></div>

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=당신의 키값을 넣어주세요&libraries=services"></script>
<script>
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); 

// 주소-좌표 변환 객체를 생성합니다
var geocoder = new kakao.maps.services.Geocoder();

// 주소로 좌표를 검색합니다
geocoder.addressSearch('서울 송파구 올림픽로 240', function(result, status) {

    // 정상적으로 검색이 완료됐으면 
     if (status === kakao.maps.services.Status.OK) {

        var coords = new kakao.maps.LatLng(result[0].y, result[0].x);

        // 결과값으로 받은 위치를 마커로 표시합니다
        var marker = new kakao.maps.Marker({
            map: map,
            position: coords
        });

        // 인포윈도우로 장소에 대한 설명을 표시합니다
        var infowindow = new kakao.maps.InfoWindow({
            content: '<div style="width:150px;text-align:center;padding:6px 0;">롯데월드</div>'
        });
        infowindow.open(map, marker);

        // 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
        map.setCenter(coords);
    } 
});    
</script>
</body>
</html>

포워딩 되는 jsp는 처음 걸려있던 링크의 코드를 복붙하고 자신의 javascript키값을 넣은 후, 원하는 주소를 입력하여 활용하면 됩니다.

 

저는 롯데월드를 넣어 실행해보았습니다.

 

 

 

 

 

 

저는 카카오지도 API를 활용하기 위한 플랫폼 설정을 localhost로 해두었습니다. 그래서 localhost 아래에 있는 주소는 모두 정상적으로 API가 적용되도록 되어있습니다. 좌표를 직접 구하지 않고 도로명주소와 지번주소를 통해 쉽게 좌표를 찍을 수 있었습니다.

 

 

 

 

 

[플랫폼 설정 포스팅]

카카오 지도 API 사용을 위한 키 발급 받기 (tistory.com)

 

카카오 지도 API 사용을 위한 키 발급 받기

Kakao Developers Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 🔑 카카오 API를..

fjdkslvn.tistory.com

 

728x90
반응형

+ Recent posts