Create your account

Already have an account? Login here

Note: By joining, you will receive periodic emails from Coursetro. You can unsubscribe from these emails.

Create account

Integrating an HTTP Library with Electron

By Gary simon - Nov 29, 2017

This tutorial is based on our 100% free course: Creating Desktop Apps with Electron Tutorial

Throughout this course, we've learned how to install Electron, integrate Menus, and work with Windows. 

Now, we're going to install Axios, which is an HTTP client that will allow us to request information from a free cryptocurrency service. We will use it to retrieve the current price of Bitcoin, and display that price in our app.

Let's get started!

If you prefer watching a video..

Be sure to Subscribe to the Official Coursetro Youtube Channel for more videos.

..video coming soon..

Installing Axios

Let's visit the console and use npm to install Axios:

$ npm install axios --save

Next, in the our /src/index.js file, let's import it at the top:

const axios = require('axios');

Now, we're ready to use Axios to make a request.

Making a Request

In this /src/index.js file, let's create a function that will retrieve the price of BTC.

As you will see, it's very simple:

// Const's removed for brevity

var price = document.querySelector('h1')
var targetPrice = document.getElementById('targetPrice')

function getBTC() {
    axios.get('https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC&tsyms=USD')
    .then(res => {
        const cryptos = res.data.BTC.USD
        price.innerHTML = '$'+cryptos.toLocaleString('en')
    })
}

// Other code from the course removed for brevity

First, we're defining a variable to give us access to the h1 element, where the price of BTC will be displayed.

Next, we're wrapping the Axios code in a function because we're going to call it at a 30 second interval shortly.

Inside of getBTC(), we're using the axios .get() method to specify an address of a free public API for CryptoCurrency data called CryptoCompare.

Then, we set the price.innerHTML to the response. We're using .toLocaleString to display it in a properly formatted number.

Underneath the getBTC() function, add the following:

function getBTC() {
    ..
}
getBTC();
setInterval ( getBTC, 30000 );

This will call it initially, and then every 30 seconds!

If you want, you can now remove the fake price we set in the <h1> tags, within the /src/index.html file:

<h1 id="price">loading..</h1>

You could also put a loading graphic there if you wish. 

If you save the project and run npm start, you should see the current price of Bitcoin (BTC) displayed.

At the time of writing this tutorial, it happens to be:

Wow!

Going Forward

We've made some great progress so far, but we're not nearly done yet. Now, we have to focus on adding the functionality for allowing a user to specify an alert price in the add.html window, and we need to communicate that information to the index.html window.

To do this, we will cover IPC in Electron in the next lesson.

This tutorial is based on our 100% free course: Creating Desktop Apps with Electron Tutorial


Share this post




Say something about this awesome post!