데스크톱 앱의 경우 전자는 강력한 도구입니다. 한 번에 크로스 플랫폼 애플리케이션을 구축할 수 있습니다.

저는 vue를 좋아하기 때문에 'electron-vue'로 어플리케이션을 만들어 보았는데 이렇게 간단합니다!

OpenWeatherMap API를 사용하여 날씨 앱을 만들어 봅시다.

🛠️ 설치

저는 Ubuntu 18.04와 Webstorm IDE를 사용하고 있었습니다. vuetify 구성 요소도 좋아해서 vuetify/electron 저장소를 설치했습니다.

Looks like the GitHub repo doesn't exist anymore..

프로젝트 실행을 설치하려면

vue init vuetifyjs/electron my-project

cd my-project
npm install
npm run dev

이제 갈 준비가 되었습니다!

그런 다음 날씨를 표시하려면 다음이 필요합니다.

- 최고 온도
- 최저 온도
-습기

이제 그 페이지를 우리가 필요로 하는 것으로 바꾸자! 두 개의 카드 구성 요소를 사용하고 있습니다. 하나는 도시를 검색하고 다른 하나는 날씨를 표시합니다.

      <v-card>
        <v-card-text>
          <p>Welcome to my météo app.</p>
          <p>Search for a city to display the weather</p>
          <v-text-field label="City" box v-model="city"></v-text-field>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn primary flat router @click="getWeather">Search</v-btn>
        </v-card-actions>
      </v-card>

      <v-card v-if="show">
        <v-card-text>
            <v-layout row>
                <v-layout xs6>
                    <v-card-text>
                        <v-spacer></v-spacer>
                        <h1>{{temp.toFixed(2)}}°C</h1>
                        <h1>{{weatherDescription}}</h1>
                    </v-card-text>
                </v-layout>
                <v-layout xs6>
                    <v-card-text>
                        <p><v-icon>fas fa-snowflake</v-icon>Min : {{ tempMin.toFixed(2) }}°C</p>
                        <p><v-icon>fas fa-sun</v-icon>Max : {{ tempMax.toFixed(2) }}°C</p>
                        <p><v-icon>fas fa-tint</v-icon>Humidity : {{ humidity }} %</p>
                    </v-card-text>
                </v-layout>
            </v-layout>
        </v-card-text>
      </v-card>

💻API 요청

이제 getWeather 함수를 코딩해야 합니다.

axios를 사용하여 API 요청을 한 다음 원하는 데이터를 내 앱에 저장합니다.

the API endpoint is '/data/2.5/weather'

  import SystemInformation from './WelcomeView/SystemInformation'
  import axios from 'axios'
  axios.defaults.baseURL = 'http://api.openweathermap.org/data/2.5'
  export default {
    name: 'welcome',
    components: { SystemInformation },
    data () {
      return {
        city: '',
        country: '',
        weatherDescription: '',
        temp: null,
        tempMin: null,
        tempMax: null,
        humidity: null,
        show: false,
        key: '863668499362fb4884ebd97229f3b26b',
        url: 'http://api.openweathermap.org/data/2.5/weather'
      }
    },
    methods: {
      open (link) {
        this.$electron.shell.openExternal(link)
      },
      getWeather () {
        axios.get(this.url, {
          params: {
            q: this.city,
            appid: this.key
          }
        }).then(response => {
          this.temp = response.data.main.temp - 274
          this.tempMax = response.data.main.temp_max - 274
          this.tempMin = response.data.main.temp_min - 274
          this.humidity = response.data.main.humidity
          this.weatherDescription = response.data.weather[0].description
          this.show = true
        }).catch(errors => {
          console.log(errors)
        })
      }
    }
  }

🌟 그리고 그게 다야!

고전적인 Vue js 애플리케이션처럼 간단하게 간단한 크로스 플랫폼 애플리케이션을 만들었습니다.



이것은 나의 첫 번째 전자 앱이자 첫 번째 블로그 게시물이었습니다.

Windows, MacO 및 Ubuntu에서 동일한 앱을 사용할 수 있기 때문에 정말 마음에 들었습니다(우분투에서 작업했습니까).

내가 잘못 만든 것, 더 잘할 수 있었던 것, 작업할 수 있는 멋진 것을 공유할 수 있는 것에 대해 자유롭게 말씀해 주세요!