[Flask] Flask framework 미니프로젝트(project fan) 10 (Backend 서울시 현재 날씨 OpenAPI 보기 기능 구현)

서울의 실시간 날씨 정보 OpenAPI 데이터를 받아와서 HTML 헤더 부분에 표시해주려 한다.

 

1. 데이터 명세

• URL : http://spartacodingclub.shop/sparta_api/weather/seoul
• Contents :
  • 현재 온도 : 'temp': temp / from URL list
  • 현재 기후 : 'icon': icon / from URL list

2. 기능 구현을 위한 script.js 부분 수정 및 작성

• OpenAPI 기본 골격

// [Temp Read]
function set_temp() {
    fetch("<URL>").then((res) => res.json()).then((data) => {
        console.log(data)
    });
}

• OpenAPI URL = http://spartacodingclub.shop/sparta_api/weather/seoul
• URL에 위 OpenAPI URL을 입력(요청)하면 해당 URL 서버에서  jsonify()를 통해서 Json 형식으로 변환된 서울시 현재 날씨 데이터를 반환받게 된다.(응답 전송 단계는 해당 URL 서버가 한다.)
• 해당 데이터는 첫 번째 then() 절의 res 인자값으로 들어감
• JavaScript로 다시 돌아와서 첫 번째 then()으로 들어간 res는 *response.json()에 의해 Promise 객체로 변환
• 해당 객체 데이터는 data라는 변수에 담겨있다.
• 이미 list 형태로 들어와서 data로부터 바로 key값을 조회하면 value를 얻을 수 있다.
• 'temp', 'icon' key의 value들을 원하는 데이터인 temp, icon(url형태) 변수에 할당하고
• 각 변수들을 HTML에 각 id위치의 내용을 empty()로 비워준 뒤  append()로 대체시켜 넣어줌

// [Temp Read]
function set_temp() {
    fetch("http://spartacodingclub.shop/sparta_api/weather/seoul").then((res) => res.json()).then((data) => {
        console.log(data)
        // 변수에 데이터 담기
        let temp = data['temp']
        let icon = data['icon']
        // HTML태그(id)에 각 데이터 비우기 후 삽입
        $('#temp').empty().append(temp);
        $('#icon').empty().append("<img src='"+icon+"'>");
    });
}

 

3. 테스트

• Flask 서버가 실행 중인 상태
• 브라우저에서 localhost:5001 URL로 접속
• 웹 페이지 로드 직후( (document).ready() 즉시 실행 )
• document.ready에 포함된 show_temp()실행되어 위 과정 진행
• OpenAPI로 응답받은 데이터 가 그대로 대체되어 변경 View 페이지에 나타남
  • 현재기온: 26.66도
  • 날씨 아이콘
    

    

---

해당 프로젝트는 아래 깃을 통해 업데이트되고 있습니다.

https://github.com/yzpocket/Flask_project_fan

GitHub - yzpocket/Flask_project_fan