2Naver Open Android API Translation At DCamp

Naver 오픈 API를 활용한 통역앱 개발
네이버랩스
옥상훈
2016-05-31

음성인식API
기계번역API
음성합성API
통역앱 개요
네이버 오픈 API : https://developers.naver.com

한국어에 대해 3개 국어(영어, 일어, 중국어)로 translate & speak 가능
주요 화면

네이버 개발자센터 리뉴얼
(2016.1.26)
https://developers.naver.com

(기존) 네이버 개발자센터
http://developer.naver.com/
(기존) 네이버 로그인 개발자센터
https://nid.naver.com/devcenter/main.nhn
개발자센터통합
[기존]
(변경) 네이버 개발자 센터
https://developers.naver.com/
[변경]

새로운API추가(beta)
[음성합성]
텍스트를 아나운서 음성으로들
으실수있습니다. 현재4개언어
(한국어,영어,일본어,중국어)를
지원합니다.
[음성인식]
음성 데이터를 텍스트로 변
환해 줍니다. 현재 2개 언어
(한국어, 영어)를 지원합니
다.
[기계번역]
영어<->한국어, 중국어<->
한국어, 일본어<->한국어 번
역을 지원합니다.
[캡차]
자동 입력 방지를 위해 보안
문자가 포함된 이미지를 전
송하고 입력 값을 검증합니
다.

개발자의상식이통하는API
( * 일부 API 들은 추후 개선 예정입니다. )
RESTful 하게동작
JSON으로결과리턴
ErrorCode는httpstatus코드에맞게
if (errorCode == 200) {
// success
} else if (errorCode >= 400) {
// error
}
{"message":{"@type":"response","@service":"naverservice.labs.api","@v
ersion":"1.0.0","result":{"translatedText":"I love you."}}}
https://openapi.naver.com/v1/language/translate

(기존) 14개의 사항 입력 (변경) 4개의 필수 사항 입력
제휴신청간소화
기존에 제휴 신청을 하려면 회사명부터 담당자 연락처 까지 14개의 항목을 입력해야 했지만, API 사용 목적과 예상
사용량, 활용화면만 올려 주시면 됩니다. 또한 제휴 진행 상황을 확인하는 화면도 함께 추가하였습니다.
[기존] [변경]

(기존) 각 API 별로 API키를 발급 받아 사용 (변경) API 이용신청 또는 애플리케이션 등록 후
API 권한 설정화면에서 사용할 API 체크
API키대신API이용신청
기존에는 각 API별로 API 키를 발급받아 사용하였지만, 이제는 API 이용 신청 또는 애플리케이션을 등록한 다음, API 권
한 설정화면에서 사용하려는 API를 체크해 주시면 됩니다. API를 호출할 때는 API 키 대신 애플리케이션 등록 시 발급 받
은 클라이언트아이디와 시크릿 값을 HTTP헤더에 전송하는 것으로 변경되었습니다.
[기존] [변경]

API호출방법
[비로그인 오픈API] [로그인오픈API]
• 방법
– REST API 호출
– HTTP 헤더에 클라이언트 아이디와
시크릿값 포함해서 호출
• 대상
– 지도, 검색, 좌표변환, 단축 URL
– 음성인식, 기계번역, 음성합성, 캡차
• 주의 사항
– 클라이언트 아이디와 시크릿은 반드시
헤더값에 포함해야 함
– http method 일치 여부 확인 (예: 검색
은 GET, 기계번역은 POST)
– 텍스트는 대부분 UTF-8로 인코딩 필요
(예: 검색 쿼리, 기계번역 텍스트 값)
• 방법
– REST API 호출
– 로그인 인증 후 발급 받은 접근 토큰
값을 Authorization 헤더에 포함해서
호출
• 대상
– 회원 프로필 조회, 블로그 글쓰기, 카페
가입 및 글쓰기, 캘린더 일정 담기
• 주의 사항
– 단체아이디는 네이버 로그인이 지원되
지 않으므로 개인아이디로 호출해야함
– 카페 글쓰기 API에서 텍스트는 UTF-8
-> MS949로 이중 인코딩을 해야 한글
이 깨지지 않음

검색API호출데모–1단계:애플리케이션등록
(경로1) Application – 애플리케이션 등록
(경로2) 검색 API 개발 가이드 – 오픈API이용 버튼 클릭

검색API호출데모–2단계:서비스환경설정
• 주의: 서비스 URL은 실제 환경과 일치해야 인증오류가 발생하지 않음
• 로컬에서 개발 중일 때는 127.0.0.1:포트번호로 설정

검색API호출데모–3단계:클라이언트아이디/시크릿확인
• 주의: 클라이언트 시크릿 값은 ‘보기’버튼 클릭하면 재발급 가능

검색API호출데모–4단계:API호출
// 클라이언트 아이디 및 시크릿 그리고 요청 URL 선언
String clientId = "클라이언트아이디";
String clientSecret = "클라이언트시크릿";
try {
String text = URLEncoder.encode("설현", "UTF-8");
String apiURL = "https://openapi.naver.com/v1/search/news.xml?query="+ text
+"&start=1&display=100";
URL url = new URL(apiURL);
HttpURLConnection con = (HttpURLConnection)url.openConnection();
con.setRequestMethod("GET");
con.setRequestProperty("X-Naver-Client-Id", clientId);
con.setRequestProperty("X-Naver-Client-Secret", clientSecret);
// response 수신
int responseCode = con.getResponseCode();
if (responseCode==200) {
BufferedReader in = new BufferedReader(
new InputStreamReader(con.getInputStream()));
String inputLine;
StringBuffer response = new StringBuffer();
while ((inputLine = in.readLine()) != null) {
response.append(inputLine);
}
in.close();
System.out.println(response.toString());
} else {
System.out.println("API 호출 에러 발생 : 에러코드=" + responseCode);
}
} catch (Exception e) {
System.out.println(e);
}

검색API호출데모–httpclient사용한api호출
String text = URLEncoder.encode("설현", "UTF-8");
String apiURL = "https://openapi.naver.com/v1/search/news.xml?query="+ text
+"&start=1&display=100";
try {
// HTTP 헤더에 클라이언트 아이디와 시크릿을 추가하기 위한 과정
CloseableHttpClient client = HttpClientBuilder.create().build();
HttpGet request = new HttpGet(apiURL);
request.addHeader("X-Naver-Client-Id", clientId);
request.addHeader("X-Naver-Client-Secret", clientSecret);
HttpResponse response = client.execute(request);
int responseCode = response.getStatusLine().getStatusCode();
if(responseCode==200) {
String results = null;
HttpEntity responseEntity = response.getEntity();
if(responseEntity!=null) results = EntityUtils.toString(responseEntity);
System.out.println("results: " + results);
} else {
}
}

번역API호출데모–POST방식
try {
String text = URLEncoder.encode("사랑합니다", "UTF-8");
String apiURL = "https://openapi.naver.com/v1/language/translate";
URL url = new URL(apiURL);
HttpURLConnection con = (HttpURLConnection)url.openConnection();
con.setRequestMethod("POST");
con.setRequestProperty("X-Naver-Client-Id", clientId);
con.setRequestProperty("X-Naver-Client-Secret", clientSecret);
// post request 전송
String postParams = "source=ko&target=en&text=" + text;
con.setDoOutput(true);
DataOutputStream wr = new DataOutputStream(con.getOutputStream());
wr.writeBytes(postParams);
wr.flush();
wr.close();
// response 수신
System.out.println("responseCode="+ responseCode);
BufferedReader in = new BufferedReader(new InputStreamReader(con.getInputStream()));
String inputLine;
StringBuffer response = new StringBuffer();
while ((inputLine = in.readLine()) != null) {
response.append(inputLine);
}
in.close();
System.out.println(response.toString());
} else {
}
}

통역앱 개발-음성인식 API

음성인식
가이드: http://developers.naver.com/docs/labs/vrecog
SDK 및 예제: https://github.com/naver/naverspeech-sdk-android
- Android 2.3.3 (API10)
- Android SDK Build-Tools 22

애플리케이션 등록(오픈API 이용신청)

애플리케이션 등록- ClientID확인

애플리케이션 권한 확인

음성인식 예제 – AndroidStudio
https://github.com/naver/naverspeech-sdk-
android/tree/master/sample/NaverspeechClient-android-studio

<uses-permission android:name="android.permission.INTERNET" />

<uses-permission android:name="android.permission.RECORD_AUDIO"/>

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"
/>

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"
/>

권한 설정

클라이언트 아이디 설정

실행시 권한 세팅 에러
안드로이드 6.0 이상에서는 설치할때 권한허용 여부를 묻지 않기
때문

권한 체크 – 주의 사항

음성인식 서버 연결 확인

음성인식 클라이언트 주요 클래스
• MainActivity extends Activity
– onCreate : 음성인식 서버 연결(NaverRecognizer는 쓰레드로 작동하며, 여기에 대한 핸들러 선언 )
– onResume: 음성인식 서버 다시 연결 naverRecognizer.getSpeechRecognizer().initialize();
– onPause: 음성인식 서버 접속 종료 naverRecognizer.getSpeechRecognizer().release();
– handleMessage: 음성인식 서버 이벤트에 따른 처리
• NaverRecognizer implements SpeechRecognitionListener
– 개발자센터에서 발급받은 클라이언트 아이디값을 이용해 음성인식 서버에 소켓 연결
– 네이버 음성인식 SDK의 SpeechRecognitionListener 인터페이스를 구현한 클래스
– 인터페이스의 필수 구현 함수들은 서버 동작에 따라 호출
• utils.AudioWriterPCM
– 지정된 경로에 음성 녹음 파일을 생성, 저장하는 util 클래스
– 음성 녹음 파일은 음성인식 서버 소켓으로 전송하기 위한 용도

통역앱 UI 구성-ImageButton
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="false" android:drawable="@drawable/mic"/>
<item android:state_pressed="true" android:drawable="@drawable/mic_click"/>
</selector>
* 파일명: res/drawable/mic_btn.xml
* 파일명: res/drawable/mic.png * 파일명: res/drawable/mic_click.png

통역앱 UI 구성 - RelativeLayout
<ImageButton
android:background="@drawable/mic_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/btn_start"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true" />
<TextView
android:id="@+id/txt_result"
android:textSize="13dp"
android:layout_width="match_parent"
android:layout_below="@id/btn_start"
android:layout_centerHorizontal="true"
android:singleLine="false" />
<TextView
android:textSize="13dp"
android:id="@+id/trsView"
android:layout_below="@+id/txt_result"/>
* 파일명: res/layout/activity_main.xml

통역앱 MainActivity 수정
private ImageButton btnStart;
//private Button btnStart;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// … … … … … …
btnStart = (ImageButton) findViewById(R.id.btn_start);
//btnStart.setText(R.string.str_listening);
Button  ImageButton

기계번역 API 호출 & Thread

기계번역 API
가이드: http://developers.naver.com/docs/labs/translator
API URL: https://openapi.naver.com/v1/language/translate

기계번역 API 호출은 Thread에서
• Thread를 생성해서 API를 호출
– API 호출 처리를 하는 동안에도 UI는 조작 가능
– Thread에서 호출한 결과값을 화면으로 업데이트 하려면 runOnUiThread() 이용
new Thread(new Runnable() {
@Override
public void run() {
//TO-DO 기계번역 API 호출
runOnUiThread(new Runnable() {
@Override
public void run() {
//TO-DO UI업데이트
}
});
}
}).start();

기계번역 API – Request전송
private static final String CLIENT_ID = "개발자센터-내애플리케이션-클라이언트아이디";
private static final String CLIENT_SECRET = "개발자센터-내애플리케이션-클라이언트시크릿";
private String callTranslateAPI(String src) {
String result = null;
try {
String param = "source=ko&target=en&text=" + URLEncoder.encode(src, "UTF-8");
URL url = new URL("https://openapi.naver.com/v1/language/translate");
HttpsURLConnection con = (HttpsURLConnection)url.openConnection();
con.setRequestProperty("X-Naver-Client-Id", CLIENT_ID);
con.setRequestProperty("X-Naver-Client-Secret", CLIENT_SECRET);
con.setDoInput(true);
// API 호출
OutputStreamWriter wr = new OutputStreamWriter(con.getOutputStream());
wr.write(param);
wr.flush();
//TO-DO API 서버 응답 처리 구현 필요
con.disconnect();
e.printStackTrace();
}
return result;
}

기계번역 API - Response처리
String trsData = "";
InputStream is = con.getInputStream();
BufferedReader br = new BufferedReader(new InputStreamReader(is));
String line = "";
trsData = "";
while ((line = br.readLine()) != null) {
trsData += line;
}
br.close();
is.close();
result = trsData;
} else {
Log.d("callTranslateAPI", "###### responseCode:" + responseCode);
}

기계번역 API – JSON파싱
JSONObject json = new JSONObject(trsData);
try {
JSONObject json1 = json.getJSONObject("message");
JSONObject json2 = json1.getJSONObject("result");
result = json2.getString("translatedText");
}

기계번역 API 메소드 – 호출 UI 처리
private TextView trsView;
@Override
// … … … … … …
trsView = (TextView) findViewById(R.id.trsView);

기계번역 API 메소드 –호출은 음성인식 완료 시점
case R.id.finalResult:
// Extract obj property typed with String array.
// The first element is recognition result for speech.
String[] results = (String[]) msg.obj;
mResult = results[0];
txtResult.setText(mResult);
//TO-DO 음성인식이 완료된 시점에 기계번역 API 호출

기계번역 API 메소드 –호출처리 - Thread
@Override
public void run() {
trsRes = callTranslateAPI(mResult);
if(trsRes == null ) trsRes = "";
if(!trsRes.equals("")) {
@Override
public void run() {
trsView.setText("* 통역된 결과::" + trsRes);
}
});
}
}
}).start();

음성합성 API 호출 & MediaPlayer

음성합성 API
가이드: http://developers.naver.com/docs/labs/tts
API URL: https://openapi.naver.com/v1/voice/tts.bin
핵심기능: Text  MP3

음성합성 API 호출 결과 처리 개요
• InputStream은 byte 단위로 읽어서 File로 저장
– InputStream is = con.getInputStream();
int read = 0;
byte[] bytes = new byte[1024];
– OutputStream outputStream = new FileOutputStream(f);
while ((read = is.read(bytes)) != -1) {
outputStream.write(bytes, 0, read);
}
• 호출 결과는 File() 객체로 저장
– 파일경로는 Environment.getExternalStorageDirectory().getAbsolutePath();
– File f = new File(”임시파일이름”);
– f.createNewFile();
• MediaPlayer를 이용한 mp3파일 재생
– 파일재생 준비 mp.setDataSource(f.getAbsolutePath()); mp.prepare();
– 파일은 즉시 재생하면 안되고, 준비 완료시 재생되도록, setOnPreparedListener에서 재생
– 파일재생이 완료되면 MediaPlayer 자원을 반환하도록 setOnCompletionListener에서 종

MediaPlayer 초기화
private MediaPlayer mp;
@Override
// … … … … … …
mp = new MediaPlayer();

음성합성 API 호출 메소드 구현
private void callTTSAPI(String src) {
try {
String param = "speaker=clara&speed=0&text=" + URLEncoder.encode(src, "UTF-8");
URL url = new URL("https://openapi.naver.com/v1/voice/tts.bin");
HttpsURLConnection con = (HttpsURLConnection) url.openConnection();
con.setRequestProperty("X-Naver-Client-Id", CLIENT_ID);
con.setRequestProperty("X-Naver-Client-Secret", CLIENT_SECRET);
con.setDoInput(true);
OutputStreamWriter wr = new OutputStreamWriter(con.getOutputStream());
wr.write(param);
wr.flush();
if (responseCode == 200) {
//TO-DO 음성합성 API 호출 성공시 파일 생성 처리
} else {
System.out.println("api error!! status code =" + responseCode);
}
con.disconnect();
}
}

InputStream-> FileOutputStream
InputStream is = con.getInputStream();
int read = 0;
byte[] bytes = new byte[1024];
String tempname = Long.valueOf(new Date().getTime()).toString();
File f = new File(Environment.getExternalStorageDirectory().getAbsolutePath() + "/" + tempname + ".mp3");
f.createNewFile();
OutputStream outputStream = new FileOutputStream(f);
while ((read = is.read(bytes)) != -1) {
outputStream.write(bytes, 0, read);
}
is.close();

생성된 파일을 MediaPlayer에서재생
if (f.exists()) {
mp.setDataSource(f.getAbsolutePath());
mp.prepare();
mp.setOnPreparedListener(new MediaPlayer.OnPreparedListener() {
@Override
public void onPrepared(MediaPlayer mp) {
mp.start();
mp.setVolume(1.0f, 1.0f);
}
});
mp.setOnCompletionListener(new MediaPlayer.OnCompletionListener() {
@Override
public void onCompletion(MediaPlayer mp) {
mp.stop();
mp.reset();
}
});
} else {
Log.d("TTS", "###### 파일 없다 ######");
}

음성합성 API 메소드 호출
@Override
public void run() {
trsRes = callTranslateAPI(mResult);
if(trsRes == null ) trsRes = "";
if(!trsRes.equals("")) {
callTTSAPI(trsRes);
@Override
public void run() {
trsView.setText("* 통역된 결과::" + trsRes);
}
});
}
}
}).start();

UX 개선을 하려면
• API가 호출 되는 동안은 ProgressBar 를 보여 주도록
• 버튼 click이 아니라 touch 이벤트를 이용해서 조작하도록
<ProgressBar
android:layout_height="match_parent"
android:id="@+id/progressBar"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true" />
btnVoice.setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
int key = event.getAction();
switch (key) {
case MotionEvent.ACTION_DOWN:
//TO-DO 음성인식 시작
naverRecognizer.recognize();
break;
case MotionEvent.ACTION_UP:
//TO-DO 음성인식 중지
naverRecognizer.getSpeechRecognizer().stop();
break;
}
return false;
}
});

정리하며
- Open API 호출
- HTTP 핸들링
- JSON 파싱
- File 처리
- Thread 활용
- MediaPlayer 컨트롤
- 앱은 각 요소 기술에 대한 섬세한 컨트롤이 중요
(MediaPlayer, 버튼 제어, 데이터 호출 후 화면 처리 등
등...)

API마이그레이션FAQ
• 마이그레이션 해야 하는 이유
– 2016년 1월 26일에 개편된 개발자센터를 오픈하면서 API 인증체계를 개선하였습니다.
– 이에 따라 API 호출하는 방식도 함께 변경하였습니다. .
• 누가 마이그레이션 대상인가요?
– 네이버와 별도의 제휴키를 발급받아 사용하는 개발사
– 구 개발자센터에서 API 키를 발급받아 사용하는 개발사
• 언제까지 마이그레이션 해야 하나요?
– 기존 API 호출 방식은 2016년 12월 말까지만 지원합니다.
– 따라서 2016년 12월 중순까지 마이그레이션 완료해야 하며, 이는 제휴신청 승인까지 포함이므로 2주 이
상 여유를 두시는 것이 좋습니다.
• 마이그레이션 작업은 어떻게 해야 하나요?
– 네이버 개발자센터에서 처리할 것들
• 애플리케이션 정보 등록 및 설정
• 제휴 신청
– 애플리케이션에서 해야할 것들
• API 호출 방법 변경
• 서비스 URL과 애플리케이션 등록 정보 확인

- 감사합니다 -
https://developers.naver.com

2Naver Open Android API Translation At DCamp

Recommended

Recommended

More Related Content

Similar to 2Naver Open Android API Translation At DCamp

Similar to 2Naver Open Android API Translation At DCamp (20)

2Naver Open Android API Translation At DCamp