API와 모바일 앱 통합

항상 이동 중인 사용자들은 편리하고 효율적인 앱을 선호합니다. MobileTogether는 개발자들이 API와 모바일 앱을 원활하게 통합하여 모바일 기기의 기능을 최신 외부 정보와 결합할 수 있도록 다양한 기능을 제공합니다. 이를 통해 개발자들은 풍부하고 즐거운 사용자 경험을 제공하는 맞춤형 크로스 플랫폼 네이티브 앱을 개발할 수 있습니다.

공개 API는 거의 모든 맞춤형 모바일 앱의 기능을 향상시키는 데 유용한 외부 데이터 소스입니다. 개발자들은 여러 API에서 제공하는 정보를 결합하여 사용자에게 더 나은 정보를 더 빠르고, 세련되고 통합된 방식으로 제공할 수 있습니다.

모바일 앱에서 필요로 할 수 있는 거의 모든 종류의 정보에 대한 API가 제공됩니다. 예를 들어, 항공편 추적, 상품 또는 주식 가격 정보, 열대성 폭풍 추적 등 다양한 정보를 얻을 수 있습니다.

이번 글에서는 GPS 앱을 살펴보겠습니다. 이 앱은 모바일 기기의 위치 정보 기능을 활용하여 기본적인 질문, "지금 어디에 있나요?"에 대한 답을 제공하며, Google 및 MapQuest의 API와 연동하여 다양한 추가 정보를 제공합니다. 또한, 이 앱은 주변의 관심 지점을 검색하는 기능을 제공하며, 반 마일 반경 내의 가까운 곳부터 시작하여, 위성 사진을 통해 사용자의 위치를 정확하게 표시하고, 대륙 전체 또는 그 이상의 넓은 영역을 한눈에 보여주는 기능을 제공합니다.

저희 앱이 실행되면, 사용자는 먼저 GPS 제어 기능을 위한 버튼들을 보게 됩니다. 아래는 MobileTogether 시뮬레이터 창에서 보이는 화면 예시입니다

처음 좌표 한 쌍이 입력되면, 다양한 색상의 도구 모음 아이콘들이 나타나면서 새로운 기능을 사용할 수 있게 됩니다

왼쪽에서 오른쪽으로, 각 버튼은 다음과 같은 기능을 수행합니다

녹색 대화 버튼을 누르면 모바일 기기의 문자 메시지 앱이 열리고, 기본 메시지 "저는 여기 있습니다: "와 함께 위도 및 경도 좌표, 그리고 도로 주소가 함께 표시됩니다. 이 버튼 동작은 MobileTogether의 SMS 기능과 지리 위치 데이터 소스의 텍스트를 결합한 것으로, 아래의 액션 트리 정의에서 확인할 수 있습니다. 동일한 기능은 Android, iPhone, Windows Phone 등 다양한 모바일 기기에서 작동하며, 개발자는 각 모바일 운영체제의 특정 작동 방식에 대해 걱정할 필요가 없습니다. MobileTogether는 각 기기에 대한 세부 사항을 자동으로 처리합니다.
접힌 지도 아이콘을 누르면 모바일 기기의 기본 지도 애플리케이션이 열리고, 화면에 표시된 좌표를 중심으로 지도가 표시됩니다. 이는 MobileTogether 액션이며, 각 모바일 기기 유형과의 연동은 자동으로 처리됩니다.
세 개의 점 아이콘은 "자세한 정보" 버튼입니다. 이 버튼을 클릭하면 일련의 작업이 수행됩니다. 먼저 위도와 경도 좌표를 MapQuest 역지리 코딩 API에 전송하여 도로 주소를 얻습니다. 이 주소는 일반적으로 원본 위치 정보 주소보다 더 상세한 정보를 제공합니다. 그런 다음, MobileTogether 액션을 사용하여 모바일 기기의 웹 브라우저를 열고, 해당 주소를 기반으로 검색 엔진에 쿼리를 보냅니다.
위성 사진 도구 아이콘은 Google 지도 API와 연동되어, 사용자가 지정한 확대 수준에 따라 해당 위치의 위성 사진 이미지를 생성합니다. 생성된 이미지는 모바일 기기의 사진첩에 저장하거나, SMS 메시지 또는 이메일을 통해 전송할 수 있습니다. 아래는 위에서 수집된 좌표를 사용하여 생성된 위성 사진의 예시입니다.

확대 도구를 사용하면 새로운 페이지가 열리며, 이 페이지는 MapQuest 검색 및 장소 검색 API와 연동되어 사용자에게 두 가지 다른 검색 옵션을 제공합니다.

API와 모바일 앱 간의 연결 관계 구축하기

이 위성 이미지 도구는 XPath 표현식을 사용하여 Google Maps API를 통해 이미지를 생성하고, 생성된 이미지를 URL을 통해 열어 보여줍니다. API에서 요구하는 파라미터들은 URL에 포함되어 다양한 옵션을 설정하며, 각 파라미터의 값은 실시간으로 생성됩니다. 다음은 XPath/XQuery 표현식 편집기에서 보이는 XPath 표현식입니다

색상 코드를 사용하면 표현을 더 명확하게 이해할 수 있습니다. 첫 번째 줄에서 녹색으로 표시된 부분은 문자열 연산자이고, 작은 따옴표 안에 있는 주황색 부분은 상수이며, 보라색은 데이터 트리 또는 함수 결과에 해당하는 요소입니다.

다음은 최종 URL의 예시이며, XPath 표현식과 일치하도록 줄 바꿈이 적용되어 있습니다

생성되는 이미지의 크기는 자동으로 각 사용자 기기의 창 너비와 높이에 맞춰지는데, 이는 해당 값들이 MobileTogether의 전역 변수로 지정되어 있기 때문입니다.

위성 버튼에 할당된 기능은 모바일 기기의 기본 웹 브라우저에서 해당 URL을 열어줍니다.

MobileTogether는 HTTP, FTP, REST, 그리고 SOAP 요청을 지원하여 API와 모바일 앱을 통합할 수 있습니다

MapQuest 검색 API와 Place 검색 API는 모두 RESTful API의 GET 요청 방식을 사용하여 구조화된 데이터를 가져옵니다. 이 데이터는 MobileTogether 데이터 트리에서 페이지 소스로 사용되며, 추가적인 처리를 위해 활용할 수 있습니다.

"GET" 요청은 앱의 데이터 트리에 페이지 소스를 추가할 때 생성되는 대화 상자에서 정의됩니다. (아래 그림 참조)

요청을 구성하는 간단한 방법은 API 문서에서 예시 URL을 복사하여 위의 URL 입력란에 붙여넣은 다음, 중괄호 안에 있는 파라미터 정의를 원하는 값으로 바꾸고, 파라미터 섹션에서 각 파라미터 값의 출처를 지정하는 것입니다.

저희 앱의 카테고리 검색 기능은 사용자가 드롭다운 메뉴를 통해 검색 반경과 최대 검색 결과 수를 설정할 수 있도록 합니다. 또한, API 문서에 제공된 목록에서 검색 대상을 선택할 수 있는 추가적인 드롭다운 메뉴를 제공합니다. 사용자가 검색 버튼을 클릭하면, MobileTogether 액션이 GET 요청을 실행합니다

반환된 XML 데이터는 데이터 트리에 추가되며, 모바일투게더 시뮬레이터 창의 "페이지 소스" 섹션에서 확인할 수 있습니다

새로운 검색 결과 페이지가 열리며, 사용자는 스크롤 가능한 표 형태로 정보를 확인할 수 있습니다. 참고로, API는 검색 결과를 현재 위치로부터의 반경 순서로 자동으로 정렬합니다.

검색 결과 페이지에 있는 추가 도구 버튼을 클릭하면, 해당 위치로 가는 경로를 표시하는 지도가 열리거나, 해당 이름과 위치를 검색하는 웹 검색이 시작되거나, 해당 장소로 바로 전화 연결을 할 수 있습니다.

카테고리 검색은 좋은 결과를 제공하지만, 300개 이상의 다양한 항목 중에서 사용자가 선택해야 하는 과정이 다소 번거로울 수 있습니다. MapQuest의 장소 검색 API는 어떤 텍스트 표현도 검색 대상으로 허용하며, 유사한 결과를 제공합니다. 또한, 장소 검색 API는 RESTful 방식으로 GET 요청을 통해 접근 가능하며, 카테고리 검색과 유사한 방식으로 설정됩니다

플레이스 검색 API는 카테고리 검색과 비교했을 때 요구되는 매개변수와 반환되는 데이터에 몇 가지 차이점이 있습니다. 카테고리 검색은 XML 또는 JSON 형식의 결과를 제공하지만, 플레이스 검색 API는 JSON 형식의 결과만 반환합니다.

MobileTogether은 다양한 데이터 형식을 결합하는 데 어려움이 없습니다. 저희 앱에서 사용자 입력을 받기 위해 간단히 편집 필드 컨트롤을 만들었고, 다시 "새로고침" 액션을 사용하여 데이터를 가져오는 요청을 실행했습니다.

JSON 결과는 시뮬레이터 창의 "페이지 소스" 데이터 트리에서 확인할 수 있습니다

결과는 사용자가 스크롤할 수 있는 테이블 형태로 표시되며, 여기서는 일부만 보여드리고 있습니다. 다만, 이 API는 현재 위치로부터의 거리 정보나 전화번호를 반환하지 않습니다

API에서 JSON 형식의 데이터를 반환하더라도, 해당 결과를 MobileTogether의 지리 위치 기능과 연동하여 지도 버튼을 통해 모바일 기기의 기본 지도 애플리케이션을 실행하고, 해당 주소로 가는 경로를 표시할 수 있습니다

MobileTogether의 "Open URL" 기능을 글로브(Globe) 도구에 할당하여, 검색 결과 위치의 이름과 주소를 웹 브라우저 창에서 열 수 있습니다. 중첩된 "replace" 연산자를 사용하여 유효한 구문을 가진 URL이 생성되도록 합니다.

API 키에 대한 안내사항

여기 설명된 각 API는 고유한 API 키를 필요로 합니다. 이 API 키는 API 요청이 있을 때마다 사용자 식별 및 인증 역할을 합니다. 특정 기업 사용자 그룹에서 공유되는 앱의 경우, 모바일 투게더 데이터 트리 내에 영구적으로 저장된 단일 공유 키를 사용하는 것이 가장 적절할 수 있습니다. 모든 사용자의 요청은 통합되어 처리되며, 어떤 API의 사용량이 무료 사용량 제한을 초과하는 경우, 단일 청구서가 발행됩니다.

앱이 일반 사용자에게 배포될 경우, 개발자는 각 사용자가 고유한 API 키를 발급받도록 하고, 각 사용자가 해당 API 키를 사용하는 것에 대한 책임을 지도록 할 수 있습니다. 저희 앱에는 시작 페이지에 있는 톱니바퀴 아이콘을 클릭하여 접근할 수 있는 설정 페이지가 포함되어 있습니다. 이 설정 페이지를 통해 사용자는 검색 엔진 선택 등 다양한 사용자 설정을 변경할 수 있으며, 각 모바일 기기에 고유한 영구 데이터 트리에 각 API 키를 저장하는 기능도 제공합니다.

사용자 정의 기능 추가

지금까지 많은 모바일 앱에서 발견되는 비교적 일반적인 위치 정보 기능에 대해 설명했습니다. 위에 설명된 API 또는 다른 공개 API를 사용하여 특정 문제를 해결하는 앱에 기능을 추가할 수도 있습니다. 예를 들어, 저희 앱에는 "제가 어디에 있었나요"라는 페이지가 있습니다. 특정 경로를 따라 여행을 기록해야 하는 사용자는 이 페이지에서 봉투 모양의 도구를 클릭하여 이메일을 통해 여행 기록을 제출할 수 있습니다. 또한, 저희 앱에서는 어떤 도구 아이콘을 길게 누르면 도움말 메시지가 나타납니다

API와 모바일 앱을 결합하여 직접 개발하고, MobileTogether의 다양한 기능을 활용하여 세련된 크로스 플랫폼 모바일 앱을 개발해 보세요 무료로 사용할 수 있는 모바일투게더 디자이너를 다운로드하세요, 이 제품은 내장된 도움말, 튜토리얼, 그리고 다양한 예제들을 함께 제공합니다. 또한, 다양한 MobileTogether 관련 자료를 확인할 수 있습니다 영상 시연 자료 시작하는 데 도움이 되도록.