9. 앱인벤터 길찾기(경로 안내) 앱 만들기(액티비티스타터, 웹뷰어)

 

 

 

 

길 찾기 앱을 만드는 방법은 2가지가 있습니다. 

첫 번째는 액티비티 스타터를 이용하는 방법.

두 번째는 웹 뷰어를 이용하는 방법이죠. 

 

이번에는 두 가지 방법을 각각 이용하여 길 찾기 앱을 각각! 만들어 보려 합니다. 

 

 

 

1. 액티비티 스타터를 이용한 길 찾기 앱 만들기

 

첫 번째로 액티비티 스타터를 이용한 길 찾기 앱을 만들어 보겠습니다. 

 

1-1. 앱 화면과 기능 구상하기 

 

출발지를 입력하고, 도착지를 입력한 뒤,

길찾기 버튼을 누르면 지도에서 길을 찾을 수 있습니다. 

 

 

1-2. 앱 화면 만들기

 

앱 인벤터에서 앱 화면을 만들어보겠습니다. 

출발지, 도착지 레이블이 있고

텍스트를 입력하는 칸이 있습니다. 

검색 버튼도 만들고

액티비티스타터는 보이지 않는 컴포넌트에 있습니다. 

 

 

액티비티 스타터를 이용하기 때문에 속성 3개 값을 적어주어야합니다.

동작, 액티비티클래스, 액티비티 패키지를 아래 그림처럼 적어줍니다.

 

 

 

 

1-3. 코딩하기

 

 

구글 지도에서 길 찾기 링크는

http://maps.google.com/maps?saddr=출발지&daddr=도착지

입니다. 

출발지는 사용자가 입력한 텍스트박스1의 텍스트이고

도착지는 사용자가 입력한 텍스트박스2의 텍스트 입니다.

 

따라서 navigator(x,y) 함수를 만들어주고

함수를 호출할 때

파라미터 x와 y 자리에 텍스트박스1과 2의 값을 넣어줍니다. 

 

 

 

1-4. 테스트하기

 

이제 테스트를 해보겠습니다.

액티비티스타터를 사용했기 때문에

화면이 구글 맵으로 넘어가는 것을 볼 수 있습니다. 

 

 

작동 확인 완료!!!

 

UI를 좀 더 멋스럽게 꾸밀 필요가 있어보입니다....

 

---

 

 

2. 웹 뷰어를 이용한 길 찾기 앱 만들기 

 

 

이번에는 웹 뷰어를 이용해서 길 찾기 앱을 만들어 보겠습니다. 

 

 

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

 

앱의 기능은 액티비티 스타터를 이용한 길찾기 앱과 동일합니다.

출발지를 입력하고, 도착지를 입력한 뒤,

길찾기 버튼을 누르면 지도에서 길을 찾을 수 있습니다.

 

 

2-2. 앱 화면 만들기

 

앱의 화면은 출발지, 도착지 레이블

출발지와 도착지를 작성할 수 있는 텍스트창

검색 버튼

그리고 웹 뷰어로 이루어져 있습니다. 

 

웹뷰는 따로 속성 값을 써줄게 없습니다. 

그냥 기본 그대로 두면 됩니다. 

 

 

 

2-3. 코딩하기

 

이제 웹뷰어를 이용한 길찾기 앱 코딩을 시작하겠습니다. 

 

우선

web_view_navi(x, y) 라는 함수를 만들어주었고

파라미터 x와 y 값에는

텍스트박스1과 2를 넣어주었습니다.

 

액티비티스타터를 사용할 때랑 거의 비슷합니다.

함수를 만들고

버튼을 누르면 함수를 호출하기만 하면 됩니다. 

 

 

2-4. 테스트하기

 

테스트를 해볼까요?

 

웹뷰어이기 때문에

액티비티 스타터와는 달리

한 화면에서 지도가 보입니다.

 

 

이번에도 성공성공~!!

 

 

 

---

 

 

길 찾기  기능을 앱에 넣고 싶다면

위 처럼 액티비티 스타터 또는 웹뷰어를 사용할 수 있습니다.

 

개발자나 사용자의 편의성을 고려하여

둘 중 편한 방법을 선택하면 되는 것이죠. 

 

다음에는 지도에 내 위치를 나타내는 방법을 정리해보겠습니다.