ThomasWhen it comes to desktop app, electron is a powerful tool. You can build cross-platform applications in one shot.
As I like vue, i've triyed created an application with 'electron-vue' and this is how simple it is !
Let's make a weather app using OpenWeatherMap API
🛠️ Installation
I was using Ubuntu 18.04 and Webstorm IDE. I also like vuetify components so I installed the vuetify/electron repository
Looks like the GitHub repo doesn't exist anymore..
To install the project run
vue init vuetifyjs/electron my-project
cd my-project
npm install
npm run dev
Now you are ready to go !
Then to display the weather, i will need :
-Highest temperature
-Lowest temperature
-Humidity
So let's change that page into what we need ! I'm using two Card component, one to search the city and the other one will then display the weather
<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>
💻Requesting the API
I now need to code my getWeather function
I'm using axios to make API requests, I then store the data i want into my app
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)
})
}
}
}
🌟 And that's it !
Simple as a classique Vue js application, I just made a simple cross-plateform application.
this was my first electron app, and also my first blog post
I really loved it because i'm able to use the same app on Windows, MacOs and Ubuntu (has i work on ubuntu)
feel free to tell me about stuff i made wrong ore i could have done better, and to share some cool stuff to work on !
