Beginner Bitcoin Web Tutorials

by coinables

I have created some introductory bitcoin web tutorials for beginners mainly focusing on JavaScript.

If you're looking for my book: Building Bitcoin Websites

If you're looking for the segwit address generator: /segwit

How to Get the Current Bitcoin Price

Have you ever wondered how some websites display the live bitcoin exchange rate? If so, that is what this tutorial is going to show you how to do.
Have you ever wondered how some websites display the live bitcoin exchange rate? If so, that is what this tutorial is going to show you how to do.

The secret is API. Bitcoin exchanges provide APIs which are open feeds that pump out information to the internet. Some exchanges even offer trading API so that users can buy and sell bitcoins with programs they write, commonly referred to as trading bots.

Cool bro, so how do I API?
Like this:

Find the API feed: Here's a good one: https://www.bitstamp.net/api/ticker/


Review the JSON: What you are seeing is the live rate on the Bitstamp exchange in JSON format. The current price is under the "last" category, meaning the last price bitcoin was traded at.

Pull the JSON with Javascript: Create a new file and use javascript to get the last price from the URL.

Output:

Lesson Source Code: https://github.com/coinables/Get-Bitcoin-Price-with-JavaScript

Create a Bitcoin USD Converter

Now that you know how to get the latest price we can create a bitcoin to USD conversion tool.
Now that you know how to get the latest price we can create a bitcoin to USD conversion tool.

Create the inputs: Start by making two input boxes that launch a javascript funtion when someone types or makes a change.


Write the functions: First adjust the existing javascript from our last lesson to make the variable "price" global by removing the var.
Line 6: var price = ticker.last;

Create a function that fetches the users input from the bitcoin input and multiply it by the current price. Limit the result to 2 decimal places and output it to the USD input box.


Now do the opposite to fetch the user input from the USD box, and then divide it by the price. Limit the result to 8 decimal palces and output it to the BTC input box.


Output:
BTC:
USD:

Lesson Source Code: https://github.com/coinables/Bitcoin-USD-Price-Conversion-Tool

Stream Live Transactions with WebSocket

Learn to use the websocket protocol. Transmit lots of data while using little bandwidth.
Websockets allow lots a data throughput while using very littl bandwidth. In this lesson we will use blockchain.info websocket to stream live bitcoin transactions.

First of all let's put in our script tags <script></script> and then we'll establish a connection to our websocket using new WebSocket().

var btcs = new WebSocket('wss://ws.blockchain.info/inv');


So we started by creating the variable var btcs and then we had that be equal to the new websocket connection. Now that we have a connection to the websocket we need to send it a message and tell blockchain.info which information we are interested in receiving. We are going to use the onopen and send API commands to do this. Let's call the previous variable var btcs and create a function that subscribes us to {"op":"unconfirmed_sub"} which is new transactions to the bitcoin network.
btcs.onopen = function(){
	btcs.send(JSON.stringify({"op":"unconfirmed_sub"}));
	};

JSON.stringify will send a JSON request to the websocket server telling it that we want to receive updates on new transactions to the network. At this point the server will start sending "messages" to the client everytime there is a new transaction. We need to tell javascript what to do everytime a message is received using the onmessage command. Create a new function using onmessage and I'm going to name the function onmsg. Within that function we will parse the JSON using the data command.
btcs.onmessage = function(onmsg){
	var response = JSON.parse(onmsg.data);
	console.log(response);
	}


At this point you could stick this script into an HTML document and when you run it, it will start shooting out all the new transactions as objects in JSON format into your browsers debug/console. If you look at it you'll notice they all start with utx and then all the transaction data is under x. The data within the x array includes input and out or sender and receiver. If we want info form the input area we would call the response variable and then add in .x.input. However there can be multiple inputs and outs so we have to clarify which one. If we add in stright brackets and put a zero [0]that will get us information on the first item in the array. Here's an example that will get the BTC amount that was received by the first output.
btcs.onmessage = function(onmsg){
	var response = JSON.parse(onmsg.data);
	var amount = response.x.out[0].value;
	var calAmount = amount / 100000000;
	console.log(calAmount);
	}

You'll notice I also added in a calculation to divide the result by 100 million to get the value in bitcoins since the data is provided in satohis. Since it's still just going to the debug/console that's not very helpful to the user, let's add in some jquery to have this info output on the page. You can either install jquery to your server or just use a link to grab the min.js from jquery.com http://code.jquery.com/jquery-1.11.0.min.js.

Within the onmessage function I'm going to start with $('#messages') which tells jquery to look for the element in the HTML that has the ID of "messages". Since I don't have one yet I'll add some HTML and create a div with the ID "messages". Now I'll tell jquery to prepend (add to the top) each new amount within a p tag. The completed code will look like this
<html>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

<script>
var btcs = new WebSocket('wss://ws.blockchain.info/inv');

btcs.onopen = function()
	{
	btcs.send( JSON.stringify( {"op":"unconfirmed_sub"} ) );
	};

btcs.onmessage = function(onmsg)
	{
	var response = JSON.parse(onmsg.data);
	var amount = response.x.out[0].value;
	var calAmount = amount / 100000000;
	$('#messages').prepend("<p>" + calAmount + "</p>");
	}

</script>
<body>
<div id="messages"></div>
</body>
</html>

Output:


Want more tutorials?
These are created in my free time. Everyone's time should be valuable, please consider donating.
Donate: 1NPrfWgJfkANmd1jt88A141PjhiarT8d9U