[76일차]Geolocation API를 openweathermap에 활용해보기!

About Geolocation API for weatherAPI

날씨앱을 만들다가 문득 이런생각이 들었다.
현재 나와있는 기본 날씨앱들은 위치를 기반으로
날씨 정보를 전달해준다.
하지만 내가 만들었던 날씨앱은 그저 위치를 검색해고,
검색한 위치를 기반으로 날씨를 찾아주는데 그치치않았다.
그래서 위치를 전달해주는 API는 없을까 보다가
ECMA스크립트는 그걸 가능하게 해준다는걸 깨달았다.

---

Geolocation API활용법

사용자의 현위치는
navigator.geolocation 객체를 통해 알수있다.
놀랍지 않은가? 스크립트 언어가 내장객체를 통해 사용자의 위치도 알려준다.

위치를 받아오는지 확인하는 방법

navigator.geolocation.getCurrentPosition(function (위치) {
  console.log(위치);
},function (위치){console.log('위치 정보를 불러오는데 실패했습니다.')});

getCurrentPosition메소드에 함수를 넣어 실행하면,
사용자에게 위치정보를 허용하겠냐는 메세지가 뜨고,
허용을 받아 위치정보를 불러오는데 성공했을때는 첫번째 인자에 들어간함수
허용을 못아서 위치정보를 불러오는데 실패했을때는 두번째 인자에 들어간함수
를 실행하게 된다.

허용을 누르면 위치정보가 담긴 객체를 인자에 전달한다.

즉 위 내용을 본다면,
현재 나의 latitude는 위치.coords.latitude 이고
현재 나의 longitude는 위치.coords.longitude 이다
정말 기쁘지않은가? 단 몇줄의 한두줄의 코드로 정확하진 않지만,
대략적인 위치를 알 수 있다.
물론 정확한 위치를 전달해주는 API도 무수히 많을 수 있다.
그것은 차차 나중에 알아가보자.

---

받아온 위치정보를 이용해 날씨앱을 만들기

흔히 날씨정보를 받아올 때 openweathermap.org를 쓴다.
openweathermap API는 도시를 요청하는것 이외에도
현재 위도와 경도를 요청하는것도 가능한걸 알고있는가?
어떻게 요청하는지 알아보자.
https://openweathermap.org/current 사이트를 보면,

이렇게 요청url에 lat과 lon을 입력할 수 있는 정보가 뜬다.
이쯤되면 가슴이 웅장해지기 시작할거다.
머릿속에 코드가 구상된다면 당신은 난사람!
이제 어떤식으로 만들어 볼까?

getCurrentPosition 의 성공여부에 따른 인자 순서를 기억하자

첫번째인자엔 위치를 불러오는데 성공했을때의 함수,
두번째 인자에는 위치를 불러오는데 실패했을때의 함수이다.
그렇다면 날씨앱과 연결했을땐 어떻게 구상하면 좋을까?
첫번째 인자 에는 불러오는데 성공한 위치에 따른 날씨를 렌더링 시켜주는 함수를 만들면되고
두번째 인자 에는 위치정보를 불러오는데 실패했다는 메세지 를 표시하면된다.
위 구상으로 코드를 짜보자.
html과 css구조는 생략하겠다.

첫번째 인자로 들어갈 위치에 따른 날씨 출력 함수 수도코드

URL을 위도와 경도를 받을수있는 형태로 선언한다.
  받은위도와 경도정보를 URL에 넣는다
  정보를 넣은 URL을토대로 객체를 받아온다.
  객체를 날씨출력함수 인자로 넣어서 호출한다.

---

결과물

위치정보권한을 허용해달라고 요청한다.

허용안했을때

허용했을때

---

전체코드

const APIKEY = '자신의API'
 
const elInput = document.querySelector('input')
const elSearch = document.querySelector('#search')
const elCity = document.querySelector('#city')
const elIcon = document.querySelector('#icon')
const elStatus = document.querySelector('#status')
const elTemp = document.querySelector('#temp')
 
//전송받은 객체데이터를 토대로 화면에 날씨정보를 출력합니다.
function printWeatherData(data){
//도시이름을 제대로 입력안했을 때
  if(data.weather === undefined){
    elCity.textContent = 'Fail to load'
    elIcon.src = 'fail.png'
    elStatus.textContent = '도시 이름을 찾을 수 없습니다.'
    elTemp.textContent = '영어로 제대로 입력해주세요 :)'
  }
 
  elCity.textContent = data.name
  elIcon.src = `https://openweathermap.org/img/wn/${data.weather[0].icon}@2x.png`
  elStatus.textContent = data.weather[0].description
  elTemp.textContent = `${data.main.temp}ºC`
}
 
//위치정보를 기반으로 데이터를요청하는 함수
function getDataByLocating(la, lon){
  const URL = `https://api.openweathermap.org/data/2.5/weather?lat=${la}&lon=${lon}&units=metric&appid=47ae1f9397984156de1427b9ab3c9c06`
 
  fetch(URL).then(function(resp){
    return resp.json();
  })
  .then(function(json){
    printWeatherData(json);
  })
}
 
//위치정보를 불러오는데 실패했을때 실행되는 함수
function failLocating(){
  elCity.textContent = '위치 정보를 불러오는데 실패했습니다.'
  elIcon.src = 'fail.png'
  elStatus.textContent = 'Fail to load'
  elTemp.textContent = '정보공유가 싫으시면 검색을 이용해주세요 :)'
}
 
//검색을 기반으로 데이터를 요청하는 함수
function getDataBySearching(city){
  const URL = `https://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&appid=47ae1f9397984156de1427b9ab3c9c06`
 
  fetch(URL).then(function(resp){
    return resp.json();
  })
  .then(function(json){
    printWeatherData(json);
  })
}
 
//첫번째인자에는 getDataByLocating 함수가 , 두번째인자에는 failLocating 함수가 들어간다.
navigator.geolocation.getCurrentPosition(function (position){
  const latitude = String(position.coords.latitude)
  const longitude = String(position.coords.longitude)
  getDataByLocating(latitude, longitude);
}, failLocating);
 
//검색어를 입력하고 돋보기 버튼을 눌렀을 때 Input밸류값을 인자로 넣어 getDataBySearching함수를 호출한다.
elSearch.onclick = function(){
  getDataBySearching(elInput.value.toLowerCase())
  elInput.value = ''
}
 
//검색어를 입력하고 엔터키를 눌렀을 때 Input밸류값을 인자로 넣어 getDataBySearching함수를 호출한다.
elInput.addEventListener('keydown', function(){
  if(window.event.keyCode === 13){ 
    getDataBySearching(elInput.value.toLowerCase())
    elInput.value = ''
  }
});

---

아쉬운점

정확한 위치데이터가 안나와서 아쉽다.
getCurrentPosition의 정확도가 떨어지는지,
내가 정밀도 조정을 못하는건지는 아직 모르겠다..!
다른 좋은 API를 사용해야하는 것인가!
근소하게나마 위치가 어느정도 잘 맞긴한다!
검색위주로 날씨앱을 만들어보신 우리 동기님들은
위치정보를 받아서도 한번 만들어보길 강추한다!
무엇보다 짱재밌기 때문이다!