Forecast Repository

2011년 2월 10일 - 수정 사항
 - json-taglib 수정(http://antop.tistory.com/99). 이에 따른 js에서 강제 파싱부분 제거
 - ExtJS 3.3.1 업그레이(아무 변화 없음 -_-) 및 필요한 라이브러리만 담음
 - IE에서 열라 느린거 해결 못함 ㅠ_ㅠ

forecast.part1.rar
forecast.part2.rar

해보시려면 sql(/WEB-INF/sql/*.sql)로 스키마 세팅하고, WEB-INF/applicationContext.xml 에서 DB 설정을 해줘야 합니다.

 

---

http://antop.nerv.kr/forecast

새로 개편하여 화면을 만들었습니다. 데이터베이스 구조만 빼고 완전 다 바뀌었군요....

1. Cron을 이용하여 돌리던 배치(스케쥴링)를 Quartz를 이용(Spring과 연동)하여 처리 하였습니다.
2. 화면은 ExtJS 3.2.1 + (Hightcharts 2.0.5 + jQuery 1.4.3)을 사용하였습니다
3. 서버단은 쓰던대로 Spring 2.5.6.SEC02를 사용하였습니다.

아래 그림은 전체 흐름 구상입니다.



그림의 서버단은 다 따로 돌아가게 그려졌는데 -_-.. 다 스프링과 연동되어 돌아갑니다.

클라이언트에서는 풀 AJAX를 사용하고 서버에서는 url로 요청을 받고 json으로 응답합니다.

클라이언트의 레이아웃 구성은 아래 그림과 같습니다.



center의 tab panel의 레이아웃 구성은 아래와 같습니다.

---

Parameter

URL 요청 파라미터와 응답 아래와 같습니다.

- 현재날씨 목록 : http://antop.nerv.kr/forecast/whole.do?action=list&stn_id=100&from_date=2010-07-01&to_date=2010-07-14

파라미터	필수	포맷	설명
stn_id	○	숫자	지역 코드
from_date	○	yyyy-MM-dd	시작 날짜
to_date	○	yyyy-MM-dd	마지막 날짜

- 현재날씨 상세 : http://antop.nerv.kr/forecast/whole.do?action=detail&stn_id=100&date=2010-07-08

파라미터	필수	포맷	설명
stn_id	○	숫자	지역 코드
to_date	○	yyyy-MM-dd	날짜

- 현재날씨 제한 날짜 : http://antop.nerv.kr/forecast/whole.do?action=limit

- 현재날씨 지역 목록 : http://antop.nerv.kr/forecast/whole.do?action=stn


- 동네예보 목록 : http://antop.nerv.kr/forecast/town.do?action=list&area=1100000000&from_date=2010-08-02&to_date=2010-08-10

파라미터	필수	포맷	설명
area	○	숫자(10자리)	지역 코드
from_date	○	yyyy-MM-dd	시작 날짜
to_date	○	yyyy-MM-dd	마지막 날짜

- 동네예보 상세 : http://antop.nerv.kr/forecast/town.do?action=detail&area=1100000000&date=2010-10-01

파라미터	필수	포맷	설명
area	○	숫자(10자리)	지역 코드
date	○	yyyy-MM-dd	날짜

- 동네예보 제한 날짜 : http://antop.nerv.kr/forecast/town.do?action=limit

- 동네예보 지역 목록 : http://antop.nerv.kr/forecast/api.do?action=area

파라미터	필수	포맷	설명
parent	×	숫자(10자리)	상위 지역 코드

- 주간예보 목록 : http://antop.nerv.kr/forecast/week.do?action=list

파라미터	필수	포맷	설명
location	○	문자(8자리)	도시 코드
from_date	○	yyyy-MM-dd	시작 날짜
to-date	○	yyyy-MM-dd	마지막 날짜

- 주간예보 제한 날짜 : http://antop.nerv.kr/forecast/week.do?action=limit

- 주간예보 지방 목록 : http://antop.nerv.kr/forecast/api.do?action=province

- 주간예보 도시 코드 : http://antop.nerv.kr/forecast/api.do?action=location

파라미터	필수	포맷	설명
province	×	문자(8자리)	지방 코드

---

Database Structure

테이블은 하이버네이트로 생성하였습니다.

동네예보



주간예보



전국예보



※ Toad Data Modeler 3.5 로 뽑아낸 데이터베이스 구조 입니다.

---

jQuery와 Ext JS를 공부(Ajax)하면서 사용할 데이터를 준비하기 위해 기상청에서 공개하고 있는 XML 정보를 바탕으로 데이터를 DB에 저장해놓고 JSON으로 출력하는 웹 어플리케이션을 만들게 되었습니다.

크게 동네예보(Town), 주간예보(Week), 전국예보(Whole), 코드조회(동네,지방,지역), 배치^[각주:1]가 있습니다.

spring 2.5, hibernate 3, json-taglib 등을 사용했습니다.

json 포멧은 아래와 같습니다.

{
  // 성공 여부
  success: [ true | false ]
  // success가 false시에만 나옴
  error: "에러 내용"
  // 헤더 정보(지역)가 있을시에만 나옴
  area(location): {

    데이터
  }
  // 실제 데이터(배열)
  data: [
    { 한개의 데이터 }
  ]
}

---

동네예보

- 컨트롤러: AbstractCommandController + Validator
- 파라미터: area(동네코드), date(날짜), hour(시간)

예] http://api.nerv-team.co.kr/forecast/town.do?area=4278036000&date=2010-06-24

// 동네:'강원도 철원군 원남면', 날짜:'2010-06-24'
{
  "success": "true",
  "area": {
    "code": "4278036000",
    "x": "71",
    "y": "143",
    "name": "원남면",
    "parent": {
      "code": "4278000000",
      "x": "66",
      "y": "139",
      "name": "철원군",
      "parent": {
        "code": "4200000000",
        "x": "73",
        "y": "134",
        "name": "강원도"
      }
    }
  },
  "data": [
    {
      "date": "2010-06-24",
      "hour": "3",
      "temp": "19.4",
      "tmx": "",
      "tmn": "18.9",
      "sky": "흐림",
      "pty": "없음",
      "pop": "30",
      "r12": "15.152693",
      "s12": "0.0",
      "ws": "0.7",
      "wd": "북동(NE)",
      "reh": "82",
      "lastTm": "2010-06-24 08:00:00.0",
      "writeDate": "2010-06-24 10:42:08.0"
    },
    {
      "date": "2010-06-24",
      "hour": "6",
      "temp": "18.5",
      "tmx": "",
      "tmn": "18.9",
      "sky": "흐림",
      "pty": "비",
      "pop": "60",
      "r12": "15.152693",
      "s12": "0.0",
      "ws": "1.8",
      "wd": "북(N)",
      "reh": "90",
      "lastTm": "2010-06-24 08:00:00.0",
      "writeDate": "2010-06-24 10:42:08.0"
    },
    ...n
  ]
} 

---

주간예보

- 컨트롤러: AbstractCommandController + Validator
- 파라미터: location(지역코드), date(날짜)

예] http://api.nerv-team.co.kr/forecast/week.do?location=11B10101

// 지역: '서울'
{
  "success": "true",
  "location": {
    "code": "11B10101",
    "name": "서울",
    "province": {
      "code": "11B00000",
      "name": "서울ㆍ인천ㆍ경기도"
    }
  },
  "data": [
    {
      "date": "2010-06-26",
      "wf": "흐리고 비",
      "tmn": "22.0",
      "tmx": "25.0",
      "reliability": "높음",
      "tm": "2010-06-24 06:00:00.0",
      "writeDate": "2010-06-24 10:27:23.0"
    },
    {
      "date": "2010-06-27",
      "wf": "구름많고 비",
      "tmn": "21.0",
      "tmx": "26.0",
      "reliability": "보통",
      "tm": "2010-06-24 06:00:00.0",
      "writeDate": "2010-06-24 10:27:23.0"
    },
    ...n
  ]
}

---

전국예보

- 컨트롤러: AbstractCommandController + Validator
- 파라미터: date(날짜), hour(시간), stnId(지역코드)

예] http://api.nerv-team.co.kr/forecast/whole.do?date=2010-06-24&hour=13&stnId=108

// 날짜: '2010-06-24', 시간: '오후 1시', 지역: '서울'
{
  "success": "true",
  "data": [{
    "date": "2010-06-24",
    "hour": "13",
    "stnId": "108",
    "stnNm": "서울",
    "icon": "01",
    "desc": "맑음",
    "ta": "28.2",
    "rnHr1": "",
    "sdDay": "",
    "writeDate": "2010-06-24 13:20:07.0"
  }]
}

---

코드조회

- 컨트롤러: MultiActionController + ParameterMethodNameResolver
- 필수파라미터: action

동네예보, 주간예보를 조회하기 위해서는 동네(지역)코드가 필요합니다. 이 코드는 기상청에서 제공되지 않아서 일일이 긁어왔습니다.

---

동네코드(action=area)

파라미터: parent(상위 동네코드)

예] http://api.nerv-team.co.kr/forecast/api.do?action=area

// 최상위 동네코드
{
  "success": "true",
  "data": [
    {
      "code": "1100000000",
      "name": "서울특별시",
      "x": "60",
      "y": "127"
    },
    {
      "code": "2600000000",
      "name": "부산광역시",
      "x": "98",
      "y": "76"
    },
    ...n
  ]
}

예] http://api.nerv-team.co.kr/forecast/api.do?action=area&parent=4200000000

// '강원도'에 속하는 동네코드
{
  "success": "true",
  "data": [
    {
      "code": "4211000000",
      "parent": "4200000000",
      "name": "춘천시",
      "x": "73",
      "y": "134"
    },
    ...n
    {
      "code": "4283000000",
      "parent": "4200000000",
      "name": "양양군",
      "x": "88",
      "y": "138"
    }
  ]
}

예] http://api.nerv-team.co.kr/forecast/api.do?action=area&parent=4283000000

// '강원도 양양군'에 속한 동네코드
{
  "success": "true",
  "data": [
    {
      "code": "4283025000",
      "parent": "4283000000",
      "name": "양양읍",
      "x": "88",
      "y": "138"
    },
    {
      "code": "4283031000",
      "parent": "4283000000",
      "name": "서면",
      "x": "87",
      "y": "138"
    },  ...n
  ]
}

동네코드는 3단까지 되어있습니다.

---

지방코드(action=province)

파라미터: 없음

예] http://api.nerv-team.co.kr/forecast/api.do?action=province

{
  "success": "true",
  "data": [
    {
      "code": "11B00000",
      "name": "서울ㆍ인천ㆍ경기도"
    },
    {
      "code": "11C10000",
      "name": "충청북도"
    },
    ...n
  ]
}

---

지역코드(area=location)

파라미터: province(지방코드)

예] http://api.nerv-team.co.kr/api.do?action=location&province=11B00000

// '서울ㆍ인천ㆍ경기도' 지방에 속한 지역코드
{
  "success": "true",
  "data": [
    {
      "code": "11B10101",
      "province": "11B00000",
      "name": "서울"
    },
    {
      "code": "11B20201",
      "province": "11B00000",
      "name": "인천"
    },
    {
      "code": "11B20305",
      "province": "11B00000",
      "name": "문산"
    },
    {
      "code": "11B20601",
      "province": "11B00000",
      "name": "수원"
    }
  ]
}

---

배치 프로세스

동네예보, 주간예보, 전국예보를 일정시간마다 조회해서 Database에 저장합니다. com.project.antop.batch 패키지에 있습니다.

SaverForecast 클래스입니다. 인자에 따라서 3가지 처리를 합니다.

"town" : 동네예보
"week" : 주간예보
"whole" : 전국예보

예]

#> java -cp /home/api/public_html/forecast/WEB-INF/classes:/home/api/public_html/forecast/WEB-INF/lib/*
 com.project.antop.batch.SaveForecast week // 주간 예보 데이터 저장

---

forecast.war

※ 전에 만들었던 Weather History API는 이제 사용하지 않습니다 ㅠ_ㅠ

---

hey30 님의 질문 답변

아래는 조금 더 자세하게 그린 그림입니다.



이 프로젝트를 이해 하려면 최소한 'ExtJS'와 'Spring MVC', 'JSON' 정도는 아셔야 합니다. ㅠ_ㅠ

클라이언트단과 서버단은 완전히 분리 되어 있습니다. 100% AJAX^[각주:2]로만 주고 받습니다.

클라이언트단은 꼭 ExtJS가 아니어도 되고, 서버단도 역시 뭘로 만들던지 JSON으로 응답만 하면 됩니다.

---

클라이언트에서 서버와 통신하는 객체는 JsonStore 밖에 없습니다. Store에서 알아서 서버에 요청 후 받아서 처리합니다.

store의 config properties를 autoLoad: true로 설정 하면 자동으로 요청 url을 만들어 서버단에 요청합니다.

그러면 서버단에서 contorller - (service - service impl) - (dao - dao impl) 을 거쳐서 controller에서 mav를 리턴하면 마지막에 해당 JSP 까지 가게 됩니다.

JSP에서는 jstl + json-taglib를 이용해서 JSON을 출력합니다.

그걸 다시 클라이언트단의 ExtJS Store에서 받아서 처리하게 됩니다.

---

vo(Value Object)는 뭐 자기가 정해서 쓰는거니.. 적당히.... ㅠ_ㅠ

1. 계속해서 발생되는 자료를 축적하여 두었다가 일정 시점 단위로 일괄해서 처리하는 자료처리 방식으로서 배치 데이터 처리라고도 한다. [본문으로]
2. 비동기 방식의 자바스크립트와 XML(Asynchronous JavaScript and XML). 웹상에서 JavaScript + CSS + DHTML + DOM + XMLHttpRequest + XML 등과 같은 현존하는 스크립트 언어를 통해서 서버와 통신을 하는 개발 방식 [본문으로]