안녕하세요. 이지이지입니다.
이번 포스팅에서는 각종 API 사용방법과
API를 통해 데이터를 받았을 때 가장 흔히 쓰이는 데이터 형식인 JSON 다루기,
그리고 앱인벤터에서 JSON과 잘 어울리는 Dictionary 컴포넌트의 활용방법에 대해 설명드리겠습니다.
다룰 순서와 세부적인 내용은 다음과 같습니다.
1. Postman으로 API 테스트 하기
2. Daum 검색 API를 Postman으로 테스트 하기
3. JSON Viewer Pro(크롬 확장프로그램)로 키(key)의 경로 알아내기
4. 앱인벤터 Dictionary 컴포넌트로 원하는 데이터 가져오기
5. OpenWeatherMap API를 통한 날씨 정보 앱 만들기(별도 포스팅)
| Postman으로 API 테스트 하기 |
Postman은 API를 만들고 사용해보기 위한 플랫폼으로 직접 코딩해 보기 전에 테스트해 볼 수 있는 좋은 툴입니다.
1. 먼저 다음 링크를 통해 Postman 홈페이지로 이동합니다.
Postman API Platform | Sign Up for Free
Postman is an API platform for building and using APIs. Postman simplifies each step of the API lifecycle and streamlines collaboration so you can create better APIs—faster.
www.postman.com
2. 메인 화면에서 회원 가입 및 프로그램을 설치합니다.
3. 로그인 후 메인메뉴에서 [Workspaces]를 선택 후, 기존에 있던 Workspace(ex. My Workspace)를 열거나 새로 Workspace를 만들기 위해서는 [New Workspace]를 선택합니다.
저는 "API Test"로 새로운 Workspace를 하나 만들도록 하겠습니다.
cf.) Workspace는 사용자 마음대로 만들면 됩니다. 그냥 작업할 폴더 정도로 생각하면 되겠습니다.
4. (선택사항) 자동으로 생성되어 있는 [new collection]에 마우스를 올리면 나타나는 점 세개 아이콘을 클릭해
[Rename]을 누르고 collection 이름을 알아보기 쉽게 수정합니다.
저는 보여드릴 예에서 카카오 API를 사용할 것이라 "카카오 API"로 수정했습니다.
cf.) collection은 어렵게 생각하지 마시고, Workspace의 하위 폴더 이름 정도로 생각하면 됩니다.
5. collection 이름 옆의 화살표를 클릭하면 나타나는 [Add a request]를 클릭합니다.
6. (선택사항) request의 이름을 변경합니다. 보여드릴 예에서는 카카오 검색 API를 사용할 것이어서
저는 "검색 request"로 이름을 변경했습니다.
7. 요청할 때 사용할 항목에 대한 설명입니다.
- GET: API 서버에 요청하는 방식으로 GET 또는 POST가 많이 사용됩니다.
사용하고자 하는 API 문서를 보면 어떤 방식으로 요청해야 하는지 나와 있습니다.
- Params: API 서버에 정보를 요청할 때, 사용자 측에서 보내야 하는 정보입니다.
예를 들어 사용하려는 API가 날씨 정보라면 사용자는 서버에 사용자의 위치 정보를 전송해야 합니다.
이 때, 사용자의 위치 정보가 Params(Parameters)가 됩니다.
필요한 Parameter는 사용하려는 API 문서에 나와 있으며,
필수적인(required) Parameter와 선택적인(optional) Parameter이 있습니다.
- Authorization: 인증 정보입니다. 어떤 인증을 사용할지 선택하며 API 문서에 나와 있습니다.
cf.) 인증 정보는 옆의 항목인 Headers에 보내는 경우가 많습니다.
- Headers: API 문서를 보면 Header에 담아 요청하라, 또는 "-H" 이런 식으로 나오는 경우가 있습니다.
이러한 정보를 Headers에 입력합니다. 보통 API Key나, 콘텐츠 유형 같은 것을 많이 요구합니다.
나머지 항목들은 초보자에게는 크게 사용되는 일이 없는 것 같습니다.
API 서버에서 요청하는 것이 있다면 그 때 검색해서 알아보는 것이 좋겠습니다.
| Daum 검색 API를 Postman으로 테스트 하기 |
1. 먼저 API를 사용하기 위해 다음 검색 API 문서로 이동합니다.
Kakao Developers
카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.
developers.kakao.com
2. 목차 중 웹문서 검색을 찾아 필요한 Parameter를 확인합니다.
- GET: 서버에 요청방식을 GET으로 설정하도록 되어 있습니다.
- Parameters 중에 Required가 "O"로 되어 있는 부분은 필수적으로 입력하여 요청하여야 합니다.
- Required 부분이 "X"로 되어 있는 부분은 선택사항으로 필요하다면 입력하여 요청합니다.
3. 좀 더 상세히 요청을 어떻게 하는지 확인하기 위해 API 문서의 Sample - Request 부분을 확인합니다.
- GET : 서버에 요청방식은 GET입니다.
- --data-urlencode "query=이효리"
=> query는 Parameter이고 검색어를 "이효리"로 넣었습니다.
-H "Authorization: KakaoAK {REST_API_KEY}"
=> -H: Header에 담아 요청하라는 의미입니다.
=> {REST_API_KEY}에는 여러분의 API KEY를 입력합니다.
API KEY를 얻는 방법은 저의 예전 포스팅을 참고하시기 바랍니다.
앱인벤터 카카오 계정으로 로그인 기능 구현하기
안녕하세요. 이지이지입니다. 요즘 대다수의 앱이나 사이트에서는 네이버 아이디로 로그인(네아로), 카카오 로그인, 구글 계정으로 로그인 등 OAuth2.0 기반 인증으로 이용할 수 있는 경우가 많습
egeasy.tistory.com
4. Postman에서 이전에 만들어 두었던 검색 request를 선택하고 테스트 해보기 위해 다음과 같이 요청 정보를 입력합니다. Params 부분과 Header부분에 내용을 입력할 것입니다.
- GET: 서버에 요청 방식을 선택합니다.
- https://dapi.kakao.com/v2/search/web: 요청할 서버의 URL 주소입니다.
cf.) ?query=이효리 부분은 아래쪽의 Parameter의 key와 value를 입력하면 저절로 더해집니다.
- query: Parameter의 항목을 입력합니다. Parameter가 여러개일 경우 아래에 추가하여 입력합니다.
-이효리: query Parameter에 실제 요청할 정보를 입력하는 것으로, 이효리를 검색 요청합니다.
- Authorization: Key 부분에는 헤더에 담을 항목의 이름을 입력합니다.
- KakaoAK 9c~: KakaoAK는 그대로 쓰고, 그 뒤에 여러분의 카카오에서 받은 API KEY를 입력합니다.
다음 검색 API 문서에서 보이던 { } 부분은 삭제합니다.
cf.) 많은 문서에서 { } (ex. {REST_API_KEY}) 부분은 여러분의 것을 입력하라는 표시로 { }은 입력할 때 삭제합니다.
5. 위의 정보를 모두 입력 후 [Send] 버튼을 클릭하면 다음과 같이 다음 검색 API로부터 받은 정보가 JSON 형식식으로 표시됩니다.
| JSON Viewer Pro(크롬 확장프로그램)로 키(key)의 경로 알아내기 |
API로부터 받아오는 정보에서 원하는 데이터(값)를 가져오려면 값에 해당하는 key를 알아야하고, 그 key의 경로를 알아야 합니다.
위의 요청 결과에서 보듯이 원하는 값에 해당하는 key의 경로를 한 눈에 알기는 힘이 든데요...
JSON Viewer Pro는 Json 형식의 데이터를 트리구조로 좀 더 쉽게 알아볼 수 있게 해주며,
key의 경로를 클릭 한번으로 쉽게 알아볼 수 있게 해주는 크롬 확장프로그램입니다.
Pro라는 이름이 붙어 있어 유료일까 걱정이 되었지만 완전히 무료이며 광고도 없습니다.
1. 다음 링크를 통해 웹스토어에서 JSON Viewer Pro를 설치하여 크롬 확장프로그램에 추가합니다.
JSON Viewer Pro
A completely free extension to visualise JSON response in awesome Tree and Chart view with great user experience and options. ✅…
chrome.google.com
2. JSON Viewer Pro를 설치하고 [확장 프로그램 아이콘]-[JSON Viewer Pro]를 선택하면 다음과 같은 초기화면이 나타납니다.
cf.) Postman을 이용하지 않고, 인터넷 주소창에서 바로 서버 API에 요청하고 Json 형식으로 데이터를 받을 경우에는 자동으로 JSON Viewer Pro가 실행되어 결과를 트리구조로 나타내줍니다.
3. [JSON Input]을 선택하고, Postman에서 결과로 받은 데이터를 붙여 넣습니다. 그리고 [Parse JSON]을 클릭합니다.
4. 다음과 같이 알아보기 쉬운 트리구조로 데이터가 표시됩니다.
5. JSON Viewer Pro는 위의 이미지처럼 JSON 데이터를 깔끔하게 트리구조로 보여주는 것만으로도 대단한데, 우리가 원하는 데이터를 쉽게 가져올 수 있도록 key의 경로를 알려주는 기능이 있습니다.
다음 이미지를 참고해주세요.
위 이미지에서 "효리네 민박, <b>이효리</b>가 아이유에게 ~ 이 값을 가져오고자 한다면,
이 값에 해당하는 key("contents")의 경로를 알아내야 합니다.
그래서 가져오기를 원하는 값의 키에 해당하는 contents위에 마우스를 두고 왼쪽 버튼을 클릭하면,
위의 이미지에서처럼 Copy path, Copy Value의 팝업메뉴가 나타나는데,
여기에서 Copy path를 클릭합니다.
그리고 나서 Ctrl+v를 눌러 붙여넣기 해보면, documents[1].contents 과 같은 결과를 얻게 될 것입니다.
이 경로를 앱인벤터에서 사용하게 될 것입니다.
| 앱인벤터 Dictionary 컴포넌트로 원하는 데이터 가져오기 |
이제 위의 데이터를 바탕으로 앱인벤터에서 다음 검색 API를 사용하는 방법에 대해 설명드리겠습니다.
여기에서는 Web 컴포넌트와, Dictionary 컴포넌트가 핵심입니다.
앱인벤터에서 Dictionary 컴포넌트는 Json 데이터 형식과 마찬가지로, {키 : 값}으로 이루어져 있습니다.
키를 찾으면 키에 저장되어 있는 값을 가져오게 되는 형태입니다.
Dictionary 컴포넌트에 대해 더 알고 싶은 분은 저의 이전 포스팅을 참고하시기 바랍니다.
앱인벤터 강좌 #2 딕셔너리(Dictionary) 블록
안녕하세요. 이지이지입니다. 이번 포스팅에서는 딕셔너리(Dictionary) 블록에 대해 알아보도록 하겠습니다. 딕셔너리(Dictionary)란? 딕셔너리는 키(key)와 값(value)으로 이루어진 데이터 구조를 말하
egeasy.tistory.com
다시 오늘 주제로 돌아와서 먼저 다음 aia 소스파일을 내려받아 참고하시기 바랍니다.
앱인벤터의 화면구성은 매우 간단합니다.
텍스트박스에 검색어를 입력하고 [검색]을 클릭하면 "결과값" 레이블에 검색 결과가 나타납니다.
다음 검색 API와 데이터를 주고받기 위해 Web1컴포넌트를 사용합니다.
각 컴포넌트의 속성은 모두 기본값으로 두어도 상관없습니다.
제 소스 파일에는 크기나 이런 색상 부분이 살짝 수정되어 있습니다.
블록코딩 역시 간단한 편입니다. 다음 검색 API 문서를 함께 보며 이해하도록 하세요.
① 여러분의 카카오 REST API KEY를 입력합니다.
② 다음 검색 API 문서에 나와 있는 Sample request 부분의 url 주소를 입력합니다.
주의!) 맨 끝에 반드시 물음표(?)를 추가해주세요.
③ Web1 컴포넌트의 requestHeaders를 설정합니다.
다음 검색 API 문서에 나와 있는 Sample request 부분의 -H에 해당합니다.
앱인벤터에서 requestHeaders를 구성할 때에는 반드시 리스트 안의 리스트 형식으로 구성해야 하며,
하위 리스트의 첫 번째 항목은 Header의 항목이름, 두 번째 항목은 항목에 해당하는 값으로 구성됩니다.
예를 들어, API에서 Header로 이름과 나이를 요구하고, [ ](대괄호)가 리스트를 나타낸다면,
[ [이름: 홍길동], [나이: 30] ] 처럼 Header를 구성합니다.
④ Web1 컴포넌트의 url 주소에 다음 검색 API에 요청할 정보를 입력합니다.
보통 앱인벤터에서 Text - join 블록을 사용하며,
- 맨 위에는 API url주소: 마지막에 물음표(?) 추가
- 그 아래로는 Parameters의 항목 이름과 항목에 해당하는 값을 차례로 입력합니다.
- 만약 Parameters가 두 개 이상이라면 두 번째 부터는 Parameter 항목 이름 앞에 &를 붙여주어야 합니다.
- 예를 들어, Parameters의 항목이 나라, 도시 2개이라면 다음 이미지처럼 입력하도록 합니다.
⑤ Web1 컴포넌트의 url 주소로 GET 형식으로 정보를 요청합니다.
⑥ Web1 컴포넌트가 검색 API로 부터 데이터를 받았을 때, responseCode가 200이라면,
- 200은 성공했다는 의미입니다. responseCode에 대해서는 검색창에 http 상태코드로 검색해보세요.
⑦ 지역변수 getData에 검색 API로부터 받은 정보(responseContent)를 Dictionary 형태로 변형하여 저장합니다.
⑧ 결과값을 보여줄 레이블의 텍스트를 Dictionary형태의 변수 getData에서 찾아 나타냅니다.
- get value at key path는 지정된 경로에 있는 값을 가져오는 블록입니다.
- get value at key path는 반드시 리스트로 입력합니다.
- 위에서 JSON Viewer Pro를 통해 알아낸 경로를 여기에 입력합니다.
- 위에서 복사해 둔 경로는 documents[1].contents 이었습니다.
- 숫자를 입력할 때는 반드시 1을 더해주어야 합니다. 다른 보통의 프로그래밍 언어는 리스트(배열)의 첫 번째 항목이 0부터 시작하지만, 앱인벤터에서 리스트는 1부터 시작하기 때문입니다.
⑨ 만약 responseCode가 200이 아니라면, 보통 오류가 난 경우이므로 어떤 오류가 발생한지 알아내기 위해 결과값 레이블의 텍스트를 responseCode로 나타내게 합니다.
이상 앱인벤터에서 API, JSON, Dictionary를 사용하는 법에 대해 알아보았습니다.
약 3일간 틈틈이 시간날 때 마다 포스팅을 작성했는데요. 작은 도움이라도 되었으면 좋겠습니다.
질문 있으시면 언제든 댓글 남겨주세요~~~
댓글