An intro to bitcoin-focused web development: build your first web app

Careers in bitcoin development are all the rage right now, but it’s an unfortunate misconception that the chance of landing these opportunities are a hundred-to-one unless you’re on a first-name basis with industry pioneers like Nick Szabo or Adam Back. Today’s guest blogger, Kyle Honeycutt, is here to debunk these myths of exclusivity. He’ll also show you step-by-step how to create your very first bitcoin web app, and leaves you with extra resources so you can hone your new skills. Take it away, Kyle.

What’s it take to become a bitcoin developer?

Some would say…

  • You must be an advanced coder with wizardly abilities to be a bitcoin developer.
  • You have to work on the bitcoin source code to be a bitcoin developer.
  • Being a bitcoin developer means you will become fabulously wealthy, and all your wildest dreams will come true

While #3 is still TBD, the reality is that bitcoin’s creator, Satoshi Nakamoto, wasn’t the best programmer. He had a vision that he was able to bring to life through passion, determination, plus some degree of knowledge in cryptography, comp-sci, and math. And though Satoshi did build the initial source code, bitcoin’s utility and accessibility wouldn’t be where it is today without help from specialty developers.

So of course we have developers at the protocol level like Pieter Wuille, Eric Lombrozo, and Jonas Schnelli – just to name a few. There are developers building different implementations of bitcoin as well, like Christopher Jeffrey‘s bcoin, and Bitpay’s Bitcore from devs Ryan Charles and Manuel Aráoz. You’ll also see projects to improve scalability, privacy, and transaction cost, like Blockchain’s Thunder, led by Mats Jerratsch

Next in the chain are more niche developers like Brian Armstrong of Coinbase (the company actually started from his Bitcoin Android project), and although it kills me to say it, the ill-famed Mark Karpeles of Mt Gox. His PHP skills took him and his website to the height of the 2013 bitcoin craze! But then Mt Gox was hacked, Karpeles went to jail, and the rest is history. Nonetheless, he still was a bitcoin developer!

If you couldn’t tell where I was going with this, it’s that the different types of bitcoin developers echo the importance for diversity when it comes to bitcoin’s overall success.

So, where do you start?

Your bitcoin development path starts right here. Don’t be intimidated! Even if you think you can’t code, just do your best to follow along. We’ll be leveraging Blockchain’s API to build your first bitcoin web app from scratch: a simple donation widget. This API is free, and it doesn’t require a key to use it.

Step 1: Find your favorite code-friendly text editor

For readers using Windows, all you need is Notepad. You know, that Windows app you never open? Yeah, that one! Open it up, and you’ll see a blank untitled text document (if you’re on a Mac, you can use TextEdit or Sublime Text).

Step 2: Adding text

Now let’s put some text into our new text document, shall we? Go ahead and type “All your Bitcoin are belong to me!” (or reference some other popular meme) in the box.

Step 3: Add your bitcoin address

Grab a fresh new bitcoin address from your Blockchain Wallet and copy and paste it below your witty meme.

Step 4: Generate a QR code

Now, we’re going to get a bit more technical. Don’t worry, it’s nothing you can’t handle. Google offers a free charts API that transforms URLs into QR codes, and that’s what we’re going to use to turn our bitcoin address into an easily scannable QR code. Copy the following URL and paste it in-front of your bitcoin address: http://chart.googleapis.com/chart?chs=125×125&cht=qr&chl=

Step 5: Add some HTML

We’re almost done! Can you feel your inner hacker emerging? I sure hope so, because now we’re getting to the coding part of the tutorial.

  • At the very top of your document, write: <html>
  • And at the very bottom, write: </html>

This tells your browser that our document includes some HTML code.

And now, let’s bring it all home and turn that gibberish Google API link into a QR code.

  • In front of the URL, write: <img src=”
  • At the end of your address, write: “>

Step 6: Saving your hard work

Time to save what we’ve been working on. We’ll be saving it as an HTML file.

  • Go to File -> Save As, and choose “All Files” for file type, and select your desktop for the location. Now, name your file, and include “.html” as the extension. For example, mine is called ilikepizza.html (which obviously stems from the epic deliciousness that is pizza)

Step 7: Run your HTML file!

Locate the HTML file you just saved to your desktop, and run it by double clicking on the file! It’s your bitcoin address in QR code form!

Step 8: Incorporating Blockchain’s Websocket API

Now let’s make things a little more dynamic. We’ll do this using Blockchain.info’s Websocket API. Head back into Notepad (or your text editor of choice), and open your HTML file.

  • Underneath your existing code, but above the closing HTML tag, </html>, we’ll add opening and closing div tags, like this: <div id=””></div>
  • Add a name for your div between the quotations. For example, <div id=”notifications”></div>

Note: If you name it something other than notifications you’ll need to make a change to the code we’re about to copy.

  • Now add opening and closing <script> tags, right below the div tags.

  • Copy the code shown below, and paste it in between the script tags.
  • Be sure to replace the value of the address on the first line with the bitcoin address you generated earlier.

var address = “your bitcoin address here“;
var btcs = new WebSocket(‘wss://ws.blockchain.info/inv’);
btcs.onopen = function(){
   btcs.send(JSON.stringify({“op”:”addr_sub”, “addr”:address}));
};
btcs.onmessage = function(onmsg)
{
 var response = JSON.parse(onmsg.data);
 var getOuts = response.x.out;
 var countOuts = getOuts.length;
 for(i = 0; i < countOuts; i++)
 {
   //check every output to see if it matches specified address
   var outAdd = response.x.out[i].addr;
   var specAdd = address;
      if (outAdd == specAdd)
      {
      var amount = response.x.out[i].value;
      var calAmount = amount / 100000000;
      document.getElementById(“notifications“).innerHTML = “Received: ” + calAmount + “BTC”;
      };
 };
}

  • Remember your div id? If you didn’t name it notifications like I did, you’ll need to partially change the line of code right near the bottom to match the name of your div. For example, document.getElementById(“WhateverYouNamedIt“).

Step 9: See your hard work in action!

  • Save your updated HTML file, and run it again
  • Scan your QR code and send it some BTC. Wait for it, wait for it!

Did you see it? Below the QR code, it will immediately display how much was just received.

Congrats! You just wrote your first bitcoin web application using Blockchain.info’s Websocket API! If something went wrong or you’d like to examine the source code, you can view it on GitHub. If you’d like to watch this tutorial in action first, check it out below:

Kyle Honeycutt runs a YouTube Channel where he regularly publishes bitcoin-related web development tutorials. His book, “Building Bitcoin Websites: A Beginner’s Guide to Bitcoin Focused Web Development”, is available on Amazon. In it he covers web development basics, the creative process, plus how to build bitcoin-related applications using HTML, JavaScript, PHP, MySQL, and CSS.