8. 앱인벤터 지역 검색하여 지도에 나타내기(액티비티 스타터 사용법)

 

 

 

 

앱 인벤터에서는 '지도' 기능을 활용하여 다양한 앱을 만들 수 있습니다.

이 때 필요한 정보들은 이미 구축된 

네이버 맵 또는 구글 맵의 API를 활용하면 되죠. 

 

지도 기능을 이용한 앱은 무엇이 있을까요?

맛집 검색, 길찾기, 분실물 찾기, 친구 찾기, 당근 마켓 등등!!

다양한 앱에서 지도 기능을 사용하고 있답니다. 

 

1. 앱인벤터에서 지도 이용하는 방법

 

 

앱 인벤터에서 지도를 이용하는 방법은 크게 3가지로 나누어 볼 수 있습니다. 

 

1) Activity를 이용하는 방법

2) 웹 뷰어를 이용하는 방법

3) 오픈스트리트맵 을 이용하는 방법

 

각각의 이용을 예시로 살펴보겠습니다. 

 

 

1-1. 액티비티 스타터(Activity Starter)를 사용하는 방법

 

activitystarter 액티비티스타터를 이용하기 위해서는 

액티비티 스타터의 속성 값을 미리 지정해주어야합니다.

 

속성 값 중 동작, 액티비티 클래스, 액티비티 패키지를 아래처럼 적고 

데이터 url은 블록 코딩을 하면서 적어주면 됩니다.

//동작
android.intent.action.VIEW
//액티비티 클래스
com.google.android.maps.MapsActivity
//액티비티패키지
com.google.android.apps.maps
//데이터url

 

그럼 액티비티스타터 기능을 이용해서 원하는 곳을 검색하는 앱을 만들어 보겠습니다. 

 

 

2. 앱 화면과 기능 구상하기

 

 

이번에 만들 앱의 기능을 먼저 보겠습니다. 

 

내가 원하는 곳을 입력하고 '검색' 버튼을 누르면

그곳의 구글 맵이 뜹니다.

또 자주 방문한 곳을 저장해둔 뒤

목록에서 선택하면 자동으로 그곳의 구글 맵이 뜹니다.

 

 

 

3. 앱 화면 만들기

 

 

기능을 바탕으로

아래처럼 화면을 만들어 보았습니다. 

 

 

디자이너 탭은  UI를 나타내는 탭이지만

목록뷰와 액티비티스타터가 추가될 때는

디자이너탭 자체에서 설정해주어야하는 것들이 있습니다. 

 

 

3-1. 목록뷰 속성

 

먼저 목록뷰를 살펴보겠습니다. 

속성에서 '요소 문자열' 은 쉼표( , ) 단위로 적어줍니다.

즉, 리스트를 만들어주는 것이죠. 

 

이 앱은 자주 방문한 곳이 자동으로 설정되는 것이 아니라

사용자가 입력한 곳이 자주 방문한 곳으로 설정됩니다.

 

아직 초보 수준이기 때문에 이 정도만 구현해봅니다...

 

요소 문자열을 다 적었다면

배경색, 선택한 항목 색상, 텍스트 색상, 텍스트 크기도 설정해줍니다.

 

 

 

3-2. 액티비티 스타터 속성

 

그 다음, 액티비티 스타터의 속성을 보겠습니다.

위에서 말한 대로

동작, 액티비티 클래스, 액티비티패키지를 적어주어야합니다.

오타가 나지 않도록 ctrl c, v를 이용해서 적어주는게 좋겠죠. 

 

 

 

 

4. 코딩하기

 

 

코딩을 시작해보겠습니다. 

activity_x라는 함수를 만들고 파라미터로 x 를 두었습니다.

x는 사용자가 검색창에 작성한 텍스트 또는 목록뷰에서 선택한 항목이 됩니다.

 

액티비티스타터 데이터 URL 값을

https://www.google.com/maps/search/검색어

이렇게 하면 구글 맵에서 검색어 장소를 보여줍니다. 

검색어

 

검색 버튼을 누르면 activity_x 함수를 호출하고

목록뷰를 선택했을 때에도 activity_x함수를 호출합니다.

함수 만들기만 성공하면 나머지는 크게 어렵지 않습니다.

 

 

 

5. 테스트하기

 

 

AI 컴페니언을 통해 핸드폰으로 확인해보겠습니다.

가고싶은 곳을 작성하고 검색 버튼을 눌렀더니

구글 지도가 나옵니다.

 

또, 목록 중에서 한 곳을 선택했더니

구글 지도가 나옵니다.

 

 

 

 

 

 

 

 

다음 글에서는 웹뷰어를 사용하는 방법을 정리해보겠습니다.