앱 인벤터 - 지도검색 만들기
- 프로그래밍/앱 인벤터(App Invertor)
- 2017. 1. 15. 16:57
구글 지도 서비스를 이용하여 찾고자 하는 곳의 위치를 찾아보는 앱 인벤터 지도검색 앱을 만들어 보겠습니다.
지도 검색 서비스는 간단하게 만들 수 있는데요. 이번 시간에는 ActivityStarter 컴포넌트 활용하여 구글 맵과 연하는 하는 방법을 알아보도록 하겠습니다.
앱 인벤터 지도 검색 앱 만들기
화면디자인
필요한 것은 찾고자 하는 장소를 입력하는 텍스트 상자와 지도 검색을 할 수 있게 만드는 버튼 하나만 있으면 됩니다.
2. 컴퍼넌트에서 Button1을 선택하고 속성에서 텍스트를 [지도보기]로 변경시켜 줍니다.
3. 연결에서 액티비티 스타터를 스크린에 옮겨 놓으면 아래 보이지 않는 컴포넌트로 이동합니다.
4. 액티비티 스타터를 클릭하고 Ation과 ActivityClass, ActivityPackage 안에 속성값을 넣어 줍니다. 여기서 넣어줘도 되지만 코딩을 할 때 넣어 줘도 상관없습니다.
아래 각각 속성값을 붙여 넣기하시거나 입력을 하시면 됩니다. 이 값들은 구글 맵 서비스와 연결하는 데 사용하는 값입니다.
Acion
android.intent.action.VIEW
ActivityClass
com.google.android.maps.MapsActivity
ActivityPackage
com.google.android.apps.maps
※ ↑이 부분을 잘못 입력시키면 에러가 발생합니다.
아래그림 처럼 Error 601: No corresponding activity was found. 이 메세지를 계속 보실 것입니다. 저도 이 에러 때문에 정말 매우 힘들었답니다.
블록코딩하기
5. 버튼을 클릭할 때 이벤트가 발행해야 해야겠지요. 버튼을 클릭해서 버튼 클릭시 동작하는 블록을 가져와 옮겨 놓습니다.
6. 텍스트 박스에 입력된 값을 가져와야 하기 때문에 TextBox1을 클릭하고 TextBox1.Text 블록을 가져옵니다.
7. TextBox1에 값을 찾아야 하는 코드를 만들어야 합니다. Text를 클릭하고 join 블록과 빈 Text 박스를 가지고 옵니다. 여기에 "geo:0,0?q="라고 입력을 해줍니다. 여기서 사용된 "geo:0,0?q=" 는 뒤에 나오는 값을 바로 검색해 주라는 명령입니다. 2번처럼 합치게 되면 텍스트 박스 안에 있는 값을 검색하라는 뜻이 되는 것입니다.
8. 위에서 만든 값을 검색해 주는 URI 코드를 만들어 줍니다. ActivityStarter1을 클릭하고 1번 블록을 가지고 온 다음 2번처럼 블록을 결합해 줍니다.
9. URI 값을 만들어 줬으면 이제는 보여주는 화면이 있어야 합니다. ActivityStarter1을 클릭한 다음 ActivityStarter1을 활성화 시켜주는 블록을 가지고 옵니다. 이 부분이 없다면 위치를 찾더라도 보여줄 수 없게 됩니다.
10. 활성과 블록을 결합하여 최종 코드를 만들어 줍니다.
앱 프로그램 실행 화면
텍스트 박스에 청화대를 한번 입력해 보겠습니다. 그리고 [지도보기] 버튼을 클릭하겠습니다. 새로운 화면에 구글 맵 프로그램이 활성화되면서 청와대 위치를 나타냅니다.
앱 인벤터 지도검색을 만들면서
프로그램을 만들면서 모든 스마트폰이 그런 것인지 모르겠지만 위에 코드대로 분명이 입력을 했는데 지도는 활성화는 되지만 내가 원하는 위치를 찾기못하는 현상이 계속 발생했었습니다.
제가 못 찾는 것일 수 있겠지만 해당하는 자료가 없더라고요. 혹시나 하는 마음에 "구글 내 지도"를 받아 설치했더니 정상적으로 동작을 했습니다. 이렇게 활성화는 되지만 원하는 지역을 못 찾는 경우 구글 플레이에서 구글 내지도를 받아서 설치하면 됩니다.
그래서 조금 걱정하는 부분은 내 스마트폰에서는 지도앱이 있어서 정상적으로 동작을 하지만 만약 프로그램을 만들어서 배포할 경우 다른 스마트폰에서는 제대로 동작이 될지 걱정이 됩니다.
다른 방법으로 웹브라우저를 이용하여 위치를 검색하여 나타내는 방법을 사용해야 할지 고민이 됩니다. 혹시 다른 방법을 알고 계신분이 있으시면 댓글로 알려주시면 감사하겠습니다.
오늘도 모두 즐거운 프로그래밍하시기 바랍니다. ^^
'프로그래밍 > 앱 인벤터(App Invertor)' 카테고리의 다른 글
앱인벤터 데이터 저장 - TinyDB 사용하기 (16) | 2017.03.19 |
---|---|
앱인벤터 시간 표시 - 시계앱만들기 (6) | 2017.03.17 |
앱인벤터 - 위치센서 사용방법 (7) | 2017.01.14 |
앱인벤터 강좌 전화걸기 연결 예제 (2) | 2017.01.11 |
앱인벤터 그림그리기 앱만들기 (4) | 2016.11.19 |