Electron+React+Typescript 개발 환경 만들기의 속편으로 OpenWeatherMap을 사용하여 간단한 날씨 앱을 만들려고합니다.

API Key 취득까지

API Key 취득까지는 무료 일기 예보 API의 OpenWeatherMap을 사용해보십시오. 를 참고해 주세요.

날씨 앱 만들기

이번 만드는 앱은 아래의 웹 앱입니다.


코드는 htps : // 기주 b. 코 m / 부타인 / 우에 아테 r r p에 쓰여져 있습니다.

Component 만들기

이번에는 위에서 보여준 것처럼 하나 하나의 데이터에 대해 카드(WeatherCard)를 작성해, 그것을 리스트(WeatherCardList)로서 표시하는 앱을 작성합니다. redux 은 사용하지 않으므로 손을 잡기 쉽다고 생각합니다.

WeatherCard

Postman 에서 API를 두드리면 아래와 같은 화면이 나타나므로, 여기서 기본을 h tp // 아피. 오우우 아테아 r마 p. rg//다타/2.5 로 조사하고 싶은 시와 자신의 APIKey를 설정한다. 그러면 데이터가 돌아오므로 그것을 이번 모델로 반영한다.

src/components/WeatharCard/WeatherCardProps.ts

export interface IWeatherCard {
    dt: number;
    main: {
      temp: number;
      temp_min: number;
      temp_max: number;
      pressure: number;
      sea_level: number;
      grnd_level: number;
      humidity: number;
      temp_kf: number;
    };
    weather: [
      {
        id: number;
        main: string;
        description: string;
        icon: string;
      }
    ];
    clouds: {
      all: number;
    };
    wind: {
      speed: number;
      deg: number;
    };
    sys?: {
      pod: string;
    };
    dt_txt: string;
  }

interface로서 모델을 정의한다.

src/components/WeatherCard/WeatherCard.tsx

import * as React from "react";
import { Card, Avatar } from "antd";
import { IWeatherCard } from './WeatherCardProps';

const { Meta } = Card;

class WeatherCard extends React.Component<IWeatherCard, any> {
  constructor(props: any) {
    super(props);
  }

  private kelvinToCelsius = (temp: number): number => Math.round(temp - 273.15);

  public render() {
    return (
      <div>
        <Card className="Card">
          <Meta
            avatar={<Avatar src={`http://openweathermap.org/img/w/${this.props.weather[0].icon}.png`}size="large"/>}
            title={
              <div>
                <p>{this.props.weather[0].main}</p>
                <h3>{this.kelvinToCelsius(this.props.main.temp) + "°C"}</h3>
              </div>
            }
            description={this.props.dt_txt}
          />
        </Card>
      </div>
    );
  }
}

export default WeatherCard;

antd 이라는 Design Component를 사용해 받은 데이터를 Card로서 배치한다.

src/components/WeatherCardList/WeatherCardList.tsx

import * as React from "react";
import * as request from "superagent";
import { IWeatherCard } from '../WeatherCard/WeatherCardProps';
import WeatherCard from '../WeatherCard/WeatherCard';

interface IWeatherCardList {
  weatherCards: IWeatherCard[];
}

class WeatherCardList extends React.Component<any, IWeatherCardList> {
  constructor(props: any) {
    super(props);
    this.state = {
      weatherCards: []
    };
  }

  public componentWillMount() {
    request
      .get("http://api.openweathermap.org/data/2.5/forecast")
      .query({
        q: "Hakodate",
        appid: "APIKey"
      })
      .then(response => response.body.list)
      .then(body => {
        console.log(body);
        this.setState({
          weatherCards: body
        });
        console.log(JSON.stringify(this.state.weatherCards));
      })
      .catch(error => {
        console.log(error);
        throw error;
      });
  }
  public render() {
    const resultNodes = this.state.weatherCards.map(weatherCard => {
      return <WeatherCard key={weatherCard.dt} {...weatherCard} />;
    });

    return (
    <div>
        <h1>函館お天気情報</h1>
        <p>Hakodate Weather Information</p>
        <ul>{resultNodes}</ul>
    </div>
    )};
}

export default WeatherCardList;

componentWillMount()를 사용하여 OpenWeatherMapAPI를 두드린다. 그 때, superagent 라고 하는 라이브러리를 사용한다. query로서 q에는 자신의 날씨를 알고 싶은 도시를, appid에는 자신의 APIKey를 넣는다.
그리고는, render로 WeatherCard의 개수분 돌려 resultNodes에 대입하면, 그것을 표시하면 됩니다.

마지막으로

이번에는 css에 대해서는 거의 언급하지 않았습니다. 일단 htps : // 기주 b. 코 m / 부탄 / 우에 아테 r r p 에는 써 있으므로 관심이 있으면 봐 주세요. 이해하기 어렵다고 생각합니다만, 이런 느낌으로 간단하게 Web 앱을 만들 수 있습니다. 원한다면 참고하십시오.