Angular+Openweathermap+Leafret.js+MongoDB로 일기예보 WEB 앱 만들기 ③Openweathermap의 API를 두드린다

이 기사에서 할 일

전회(제2회)에서 도시의 등록/표시를 할 수 있게 되었으므로, 다음은 Openstreetmap과 제휴해 날씨를 취득한다
　Http 통신용의 서비스를 실장해, 등록 처리(도시 서비스)가 달릴 때에 기상 정보 API를 두드린다
※과거 기사
　　 ①Angular 환경 구축과 편지지의 생성
　　 ②컴포넌트와 서비스 추가(등록화면)


※오렌지의 부분

참고한 기사

　・ Angular 4.3에서 추가된 HttpClientModule에 대한 메모
　

HTTP 통신용 모듈 추가

app.module.ts 편집 및 HttpModule 로드
다음에 작성하는 Http 용 서비스 HttpClientService도 추가해 둔다

src/app/app.module.ts

 :
 :
/* 追加 */
import { HttpClientModule } from '@angular/common/http';
import { HttpClientService } from './common/http-client.service';


@NgModule({
 :
 :
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    /* 追加 */
    HttpClientModule
  ],
  providers: [
    CityService,
    /* 追加 */
    HttpClientService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

HTTP 통신 전용 서비스 만들기

공통이므로 src/app/common 만들기ng g service에서 자동 생성

PowerShell

 >ng g service common/http-client

생성된 서비스 수정@angular/common/http 가져오기
URL을 받고 get요청을 보낸다(Openweathermap의 URL+도시명+APIkey)

src/app/common/http-clietnt.service.ts

import { Injectable } from '@angular/core';
/* 追加 */
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class HttpClientService {
    /* 修正 */
    constructor(private http: HttpClient) { };

    /* 受け取ったURLにリクエストを発行 */
        this.service.sendHttpRequest(apiEndPoint)
(apiEndPoint: string): Observable<any> {
        return this.http.get(apiEndPoint);
    };

}

도시 서비스 수정

city.service.ts 수정
Openweathermap의 리퀘스트처 URL과 API키(메일 주소를 등록해 취득)를 정의
등록시 Http 서비스를 호출하여 날씨를 얻습니다.

src/app/city/city.service.ts

import { Injectable } from '@angular/core';
import { City } from './city';

/* 追加*/
import { HttpClientService } from '../common/http-client.service';



@Injectable({
  providedIn: 'root'
})
export class CityService {
  /* 追加 */
  environment = {
    production: false,
    appId: '<OpenweathermapのAPIキー>',
    baseUrl: 'http://api.openweathermap.org/data/2.5/'
  };

  cities: City[];

  constructor(
    /* 追加 */
    private service: HttpClientService
   ) {
    this.cities = [];
   }

  addCity(city: City): void {
    var id: number;
    id = this.cities.length + 1;

    /* idを設定 */
    city.id = id;

    /* OpenweathermapのAPIを呼び出す処理を追加 */
    //var result: any;
    var apiEndPoint: string = this.environment.baseUrl
    + 'weather?q=' + city.name
    + '&appid=' + this.environment.appId;

    this.service.getWeatheritemsbyCity(apiEndPoint)
    .subscribe(res => {
      var weather = res.weather[0].description;
      // 天気を設定して配列に追加
      city.weather = weather;
      this.cities.push(city);
    }, err => {
      console.log(err);
    }, () => {

    });
  }

  getCities(): City[]{
    return this.cities;
  }
}

이것으로 바로 완성

동작 확인

대시보드 화면에서 등록 화면으로 전환하여 적절한 도시의 이름을 등록
→대시보드에 날씨가 표시됨

홈 화면(대시보드)

메뉴에서 city-add를 눌러 등록 화면으로 이동합니다.

도시명 등록 화면

도시의 이름을 영문자로 입력하고 OK를 누르십시오.

홈 화면으로 돌아가기

등록 처리가 실행되어 홈 화면으로 천이한다.
Openstreetmap의 API로 취득한 날씨가 표시되고 있다

몇 건 등록해 보기

후쿠오카:맑음
도쿄:흐림(천절 구름)
다카마쓰 : 흐림(어두운 구름)


※해외의 서비스이므로 도시명은 영어밖에 받아들이지 않는다
※일단 현재 날씨를 취득하는 API를 두드리고 있다. 5일간 예보도 있다

다음 예정

Angular에 leafret 라이브러리를 추가하여 대시 보드에지도를 표시하고 싶습니다.

※관련 기사
　　 ①Angular 환경 구축과 편지지의 생성
　　 ②컴포넌트와 서비스 추가(등록화면)
　③ Openweathermap의 API를 두드리는
　　 ④Leaflet으로 지도 표시
　　 ⑤ 서비스가 가지는 프로퍼티의 갱신을 검지한다