[Appgyver] 휴대폰 GPS값을 이용한 날씨 정보 조회 (1편)

Appgyver가 어렵긴 하지만 지원하는 옵션들이 많아 이것저것 만들어 볼 수 있습니다.

이번에는 GPS 좌표를 이용한 현재 위치의 날씨 정보를 조회하여 보여주는 앱을 만들어 보겠습니다.

날씨 정보를 가져올 API를 살펴보겠습니다.

날씨 정보하면 기상청 API를 생각할 수 있겠지만 격자정보 기준으로 요청해야해서 GPS 좌표를 격자 정보로 변환해야하는 번거로움이 있고 Appgyver에서는 이 또한 쉽지 않기 때문에 GPS 좌표값으로 기상정보를 제공하는 OpenWeather를 이용하도록 하겠습니다.

https://openweathermap.org/

Сurrent weather and forecast - OpenWeatherMap

 

API 사용을 위해 singup하시면 API가 발급됩니다. 다음 상단 메뉴 중 API를 선택하고 여러 정보 중 Current Weather Data 이용을 위해 API doc를 클릭합니다.

 

여러 종류의 파라미터로 지역 날씨를 조회할 수 있는데 이 중 좌표값을 통한 조회 내용을 보겠습니다.

 

여기서 필요한 파라미터는 GPS 좌표값, app id, units, lang입니다. 좌표값은 휴대폰 GPS 모듈에서 나오는 좌표값을 넣고 나머지는 static 변수로 특히 units는 섭씨 온도 표시를 위해 metic값을 넣고 lang는 kr로 하겠습니다.

(참고 : lang=kr을 이용해서 한글로 설정하면 현재 날씨에 대한 설명 단 하나만 한글로 넘어오는데 한국사람인 제가 봐도 무슨 뜻 인지 모를 때가 많습니다. 그냥 lang를 생략해서 영어도 받아도 무방합니다.)

https://api.openweathermap.org/data/2.5/weather?lat=35&lon=139&appid={API key}&units=metric&lang=kr

 

 

이제 Appgyver로 돌아와 새로운 프로젝트를 생성하고 API 설정을 위해 상단 DATA를 선택합니다. 그리고 우측 상단 ADD DATA RESOURCE를 클릭하고 REST API direct intergration을 선택합니다.

좌측 메뉴 중 BASE에서 아래 화면과 같이 Resource ID를 정의하고 기본 URL (https://api.openweathermap.org/data/2.5/weather) 에 파라미터는 3개 (appid=API KEY, units=metric, lang=kr)를 추가합니다. 파라미터값은 변동 없는 고정값이므로 static입니다.

 

이제 좌측 메뉴에서 GET RECORD (GET)을 제외한 나머지 메뉴는 모두 Method enabled 체크하고 파라미터 변수로 lat, lon을 Number형으로 추가합니다. 이 변수에 GPS에서 받은 좌표값을 넣어 요청을 보내게 됩니다.

 

(항상 SAVE하는 거 잊지 마세요)

기본 설정은 끝났습니다. 상단 TEST 탭을 눌러 대충 좌표값을 넣고 RUN TEST를 클릭하여 테스트를 합니다.

 

다음으로 SET SCHEMA FROM RESPONSE를 선택하여 응답값에 대한 스키마를 저장합니다.

 

데이터 변수를 설정하겠습니다. 위 DATA 화면을 종료하고 상단 VARIABLES를 선택합니다. 다음으로 좌측 메뉴 중 DATA VARIABLE를 선택하고 우측 상단 ADD DATA VARIABLE을 선택한 다음 위에서 생성한 Data Resource를 선택합니다.

적당한 변수 이름을 정하고 Data variable type은 Single data record를 선택합니다.

 

하단 Show logic for~ 를 클릭합니다. 그러면 DATA VARIABLES에 대한 처리 로직이 표시됩니다. 이 로직은 이전 글에서도 설명했듯이 Fetch 작업 맞는 로직이라고 합니다. 따라서 변경이 필요한데 연결선을 모두 삭제하고 GET record, Set data variable만 남겨둡니다. 여기서는 GPS 좌표를 얻어 Get record를 통해 API 요청을 하고 응답값을 Set data variable를 통해 저장합니다. 연결선 삭제는 선을 선택하고 delete키를 누르면 됩니다.

 

이제 좌측 컴포넌트 메뉴에서 GPS location을 가져와 배치한 다음 Page focused와 연결합니다.

 

GPS location 출력에는 2개의 포트가 있습니다. GPS location을 선택한 다음 우측 상단 OUTPUTS를 선택해보면 PORT 1번이 성공 시 출력포트인 것을 알 수 있습니다. 참고로 해당 모듈을 통해 속도(speed), 방위(heading), 고도(altitude) 정보도 확인 할 수 있습니다.

 

이제 GPS location 1번 포트와 Get record를 연결합니다. 연결 후 Get record를 선택하고 우측 latitude를 선택하여 Output value of another node > GPS location > latitude를 선택한 다음 SAVE합니다.

 

longitude도 동일하게 설정합니다.

 

이제 Get record의 1번 포트와 Set data variable을 연결합니다.

 

데이터 및 변수 설정은 끝났습니다. 이제 화면에 해당 값들을 추가하여 보여주면 됩니다.

Logic창을 닫고 상단 VIEW를 선택하여 화면 디자인 창으로 이동합니다.

먼저 응답값 구조를 살펴보고 어떤 내용을 보여줄지 결정하겠습니다.

 

많은 값 중 제일 하단에 있는 name(도시 이름), weather에 있는 main(현재 날씨), description (날씨 설명), icon(날씨 이미지), 다음으로 main에서는 temp(현재 온도), feels_like (체감 온도), temp_min(최소 온도), temp_max(최대 온도)까지만 보여주겠습니다.

화면은 아래와 같이 구성하겠습니다.

 

디자인이 어렵습니다. 이 간단한 화면 만드는데도 30분 가까이 걸렸습니다. ㅎㅎ

이제 하나하나 값을 넣겠습니다. 먼저 상단 도시 이름입니다. 우측 content 아이콘을 클릭하고 Data and Variables > Data variable > getWeatherGPS (사정이 있어 getWeather에서 변수명을 변경하였습니다.) 를 선택하고 하단 name을 선택합니다. (개인적으로 기본값 지우는게 보기 편해서 전 삭제합니다.)

 

다음은 현재 온도입니다. 이 설명은 하단에 있는 체감온도, 최대온도, 최소온도는 동일합니다.

온도를 선택하고 우측 content 버튼을 클릭합니다. 온도값은 소수점 둘째짜리 값으로 오기 때문에 formula를 선택하여 소수점을 없애겠습니다.

수식은 다음과 같습니다.

ROUND(data.getWeatherGPS.main.temp) + " ℃"

현재 온도값을 정수값으로 반올림해서 표시하고 끝에 섭씨는 win + . 눌러 특수문자 넣었습니다.

 

현재 날씨의 경우 main값이 weather 리스트 내 값이므로 formula를 통해 가져와야 합니다. 수식은 아래와 같습니다.

 

다음으로 날씨 이미지입니다. 이미지에 정보는 아래 페이지에서 확인할 수 있습니다.

https://openweathermap.org/weather-conditions

Weather Conditions - OpenWeatherMap

 

API로 넘어온 값은 weather[0].icon이며 위 페이지를 참고하면 예제의 "http://openweathermap.org/img/wn/10d@2x.png" URL 중 icon에 해당하는 값은 10d입니다. 해당 값만 API로 넘겨받은 값으면 변경해주면 됩니다.

 

나머지 값인 체감온도, 최대온도, 최소온도를 위의 현재온도와 동일한 방법으로 설정합니다.

 

모두 끝났습니다.

휴대폰에서 실행하면 아래와 같습니다.

 

외국 서비스다보니 영어로 나오네요. 기상청 API를 받으면 한글로 나올텐데.. GPS 좌표값을 안 쓰고 X, Y 위치값이란 개념으로 써서 한번 더 변환해야 하더군요.

 

이걸 하다보니 한가지 문제점을 발견했습니다. 모바일 개발을 많이 하신분들이야 별거 아니겠지만.. 전 처음이라서..

집에서 실행했을 때 처음에는 잘 나왔는데 휴대폰 껐다가 켜니 null값이 나옵니다. 그래서 디버그 해보니 GPS 모듈에서 좌표값을 안주더군요. 혹시나 하는 마음에 밖에 나가서 한번 실행하고 잘 되는것을 확인하고 집에 다시 돌아와 해보니 마지막 값을 계속 저장해서 그 값을 리턴해 주는거 같습니다.

그래서 만약 GPS 좌표를 못가져왔을 경우 현재 네트워크의 GPS 좌표값을 얻어와 표시해줘야겠다 생각했습니다.

뭐 구지 고려 안해도 되겠지만 탐험의 의미로 2편에서 추가하겠습니다.

 

위 내용은 아래 영상을 참고하여 만들었습니다.

https://www.youtube.com/watch?v=mgFrlYRUQdc&t=4030s