Click here to share this article on LinkedIn »

In this tutorial, we are going to create a Bitcoin desktop client. It won’t be the most sophisticated client; in fact, it’ll be quite simple. Its big selling point though is that you can use it in all Windows, Linux or MacOS thanks to Electron’s cross-platform architecture. With this Application, you will be able to buy and sell Bitcoins using Coinbase and keep an eye on your accounts balances.

Please keep in mind that that the primary purpose of this tutorial is both to teach you how to build an App with Electron and how to use the Coinbase Node.js SDK. Therefore, the Bitcoin Client won’t be “Production-ready” even if it’s able to perform transactions with real money. If you trade with it, it’s always at your own risk

This is how our Application will look like after this tutorial:

You can find the latest version of the Bitcoin Client’s source-code in Github

Pre-requisites

Knowledge of JS, HTML, and CSS

Some basic understanding of trading “buzzwords” (e.g., fiat, buy, sell…)

Motivation to learn how to develop Desktop Applications with Electron!

What’s Electron?

According to the official documentation:

“Electron enables you to create desktop applications with pure JavaScript by providing a runtime with rich native (operating system) APIs. You could see it as a variant of the Node.js runtime that is focused on desktop applications instead of web servers.”

That’s it. If you have ever used Javascript/node.js in the past, it will feel like home. The only part that it’s a bit “unique” is the two different processes types that compose every Electron App: The “main” and “renderer” processes.

The official documentation is pretty good explaining the differences:

“In Electron, the process that runs package.json 's main script is called the main process. The script that runs in the main process can display a GUI by creating web pages. An Electron app always has one main process, but never more.

Since Electron uses Chromium for displaying web pages, Chromium’s multi-process architecture is also used. Each web page in Electron runs in its own process, which is called the renderer process.”

In a few words, each “Screen” in your App will be a different “renderer” process. Those processes will rely on the “main” process (which will be unique) to create GUI elements like Dialogs or new Screens.

For example, this might be the structure of a typical Electron App:

It’s not essential that you understand everything right now. Just remember that depending on whether you are in a “main” or “renderer” process, you might either have direct access to certain Electron functions or you will need to call them through other processes instead (by using “ipc” or the “remote” function).

If you are curious, you can find further information here

Implementation

Step 0: Create an API token in Coinbase

If you still don’t have a Coinbase account, you can create one here

Go to “Settings” → “API Access” → “+ New API Key.”

Fill in the modal dialog and click “Create.” Please keep in mind that we won’t be using all those rights, this is just to avoid permission issues while developing our application. For Production Apps, please DON’T use this approach. Only select what you need.

Copy both the “ApiKey” and “ApiSecret.” We will need them later on. Please keep these credentials safe and don’t post them anywhere!

That’s it. Unfortunately, for security reasons, Coinbase keep the ApiKey disabled the first 48 hours. But don’t worry, that’s not a blocker to develop our App.

Step 1: Clone the “electron-quick-start” repository and install electron



cd electron-quick-start

npm install git clone https://github.com/electron/electron-quick-start cd electron-quick-startnpm install

Step 2: Rename the project to “bitcoin-client”

mv electron-quick-start bitcoin-client

Step 3: Prepare the project’s structure

# Create the assets folder

mkdir bitcoin-client/assets # Create the css folder

mkdir bitcoin-client/assets/css # Create the "utils.js" file, where we'll store utilities

touch bitcoin-client/utils.js

Now you should have something like this:

Step 4: Add Html code

Open the file “index.html” and add the following code:

As you can see, it’s a pretty standard HTML file. There’s nothing here that it’s specific to Electron.

Step 5: Adding some Styles

Our App has now a skeleton, but it’s also extremely ugly. Fortunately, this is easy to fix. Create a “index.css” file inside “assets/css” and add the following code:

Step 6: Changing browser window size

It’s far better, but the screen also doesn’t look good either. It’s too big for our content. Go now to the “main.js” file and replace:

// Create the browser window.

mainWindow = new BrowserWindow({width: 800, height: 600})

By:

// Create the browser window.

mainWindow = new BrowserWindow({ width: 450, height: 460 })

Step 7: Install “coinbase” node.js library

Go to our App’s folder root level and run:

npm install coinbase --save

This will not only install the library, but also add it to our list of dependencies in the “package.json” file.

Step 8: Add the “coinbase” library to “renderer.js” file

Now, go to the “renderer.js” file and add this code at the top:

You can put here both the “apiKey” and “apiSecret” that you copied from Coinbase. If you are within the first 48 hours of creation and the key is still disabled, no worries, you can add it later.

Step 9: Add references to HTML elements and some variables

Also in “renderer.js”, add this code after the lines we added in the previous step:

Here we create references for our HTML elements so we can attach events and use them later on. Also, we define the variable “useSandboxMode,” so we can still use the App with fake data if we wish (or if we are still waiting for our ApiKey to be activated).

It is important to mention the “fiatCurrency” variable. Here you need to set the currency of your Coinbase Wallet. As I’m in Europe, I’m using “EUR.” If you are in “USA,” you probably want to use “USD.” Setting up the right currency here is crucial for the Application to work, so if you are not sure, go to your Coinbase account and double-check.

Finally, we define “currentBalanceFiat” and “currentBalanceBtc”. They will contain fake data (5000 and 3) in the “SandboxMode,” or 0 if we fetch the values directly from Coinbase.

Step 10: Let’s create some utils functions

Now, before we create the events for the different buttons and inputs, we need to define some utils functions that will help us to interact with Coinbase.

getHowManyBtcCanIBuy : This function will return the number of Bitcoins that we would get based on the amount of money (dollars or euros) that we are willing to pay. If the “SandboxMode” is active, we are assuming 9000 Euros as the Bitcoin price.

: This function will return the number of Bitcoins that we would get based on the amount of money (dollars or euros) that we are willing to pay. If the “SandboxMode” is active, we are assuming 9000 Euros as the Bitcoin price. getTotalPriceOfBtcAmount : This function will return the price that we would get based on the number of Bitcoins that we are willing to sell. If the “SandboxMode” is active, we are assuming 9000 Euros as the Bitcoin price.

: This function will return the price that we would get based on the number of Bitcoins that we are willing to sell. If the “SandboxMode” is active, we are assuming 9000 Euros as the Bitcoin price. refreshRealData: This function will refresh the balance in the GUI with real data extracted directly from Coinbase, so we are always aware of the real status of our account. Of course, this will only work if “SandboxMode” is false.

Go to the “utils.js” file and add the following lines:

Step 11: Let’s add some events to buy and sell Bitcoins!

Cool, we are getting there. Unfortunately, our App still doesn’t do much. Nothing happens when we click our buttons. Let’s fix this. Add the following code to the top of the “renderer.js” file

This will allow us to both use some dialogs from Electron and call the functions we have just defined in the utils.js file. Please pay attention to how we use “require(‘electron’).remote.” That “.remote” at the end tells to Electron that we would like to run those functions in the “main” process instead than in current “renderer” process. The reason for that is that only the “main” process can create UI elements like dialogs or new screens.

Now, let’s add the event that will allow us to buy Bitcoins! Add the following code at the bottom of the “renderer.js” file:

Note (10–03–2018): As of today, I’m having some issues buying BTCs using the coinbase node.js library. I don’t discard that this is due to some bad configuration on my side, but other people are also having similar issues. I’ll update the tutorial once I find out the reason for this.

As you can see, it’s pretty straight-forward. Depending on whether we are using the “SandboxMode” or not, we call the method “buy” from the Coinbase library or we simply “fake” the Buy. We also “refresh” the balances after the process, so we prevent buying with money that we don’t have anymore.

Now, how would be the event to sell Bitcoins?. After the previous code, add the following lines:

As you can see, it’s almost identical to the previous one, so no mystery here :)

Step 12: Nice! But I’d love to be able to see how many Bitcoins I’m buying with my money

This feature is in almost every Bitcoin client I’ve seen, so I think it’d be a great addition to our App. Add the following code in the “renderer.js” file after the selling method:

As we see, we are just adding two new events that will be triggered every time the user types something in the respective inputs. In those events, we’ll be transforming the User’s input based on the current Bitcoin price, and showing the value. For example:

12 BTCs = 108000 Euros

9000 Euros = 1 BTC

This is how it looks like:

Step 13: Last touch to the “renderer.js” file

Finally, we would like that our GUI gets refreshed from time to time. This is important because if you do some transactions in Coinbase outside our App, our balances would be completely out-of-date!. At the bottom of the “renderer.js” file, add the following code:

As we see, we create an interval that it’s executed each 30 seconds.

Step 14: Use a custom Menu

Now the Application looks much nicer. Only one important thing left. The window’s Menu. Add this import to the top of the “main.js” file:

Now, also in the “main.js” file, after the variables, add the Custom Menu:

Step 15: That’s it!

Finally, if you run:

npm start

You should see a fully functional Bitcoin Client:

And what about the Menu we just created?

Simple, but now we know how to customize it!

Step 16: Let’s change the “package.json” file

It makes sense to change the “package.json” file so we specify the right “name,” “keywords” and so on. Don’t forget to change the “author” name, it’s now your Application!

Step 17: Creating the Executables

As for the last step, we need to generate the executables to distribute our Application in the desired Operating Systems. Fortunately, Electron makes this process really straight-forward.

Install npm install electron-packager -g

Add the required “scripts” commands to the package.json:

Create an “icons” folder in assets, and the following “sub-folders” for each OS:

Download these icons for each Operating system and save them into the right folder: Windows, Linux, MacOS

Now, depending on your Operating System, you can simply run:

npm run package-mac

npm run package-win

npm run package-linux

This will generate a folder called “release-builds” with your executables inside!

Step 18: Final words

That’s all!. When your API Key gets activated, you will be able to use Coinbase to Buy/Sell Bitcoins just by setting “useSandboxMode” to “true” and adding the credentials to the “renderer.js” file.

As we said in the beginning, the primary purpose of this tutorial is to teach how to develop desktop Applications with Electron. Therefore, I don’t recommend to use this client to trade real Bitcoins on a daily basis. The reason is that this Application needs severe testing and better input validation before becoming “Production-ready.”

Nevertheless, If you feel adventurous, you can, of course, try to tweak and test it to see if this suits you, but it’s always at your own risk :)

Thanks for following this guide! Have a nice day!