Leestijd: 19 minuten

Overzicht

In an era where digital currencies are reshaping financial transactions, the ability to track and analyze Bitcoin transactions has become essential. This comprehensive guide is tailored for developers and enthusiasts who frequently ask how to check the Bitcoin balance history or find the balance of a Bitcoin address. It provides a detailed walkthrough for building a real-time Bitcoin Wallet Analytics App using the Blockbook for Bitcoin.

Onze applicatie speelt in op een veelvoorkomende behoefte binnen de cryptovaluta-gemeenschap: de mogelijkheid om niet alleen het huidige saldo van een Bitcoin te bekijken, maar ook de transactiegeschiedenis en saldoveranderingen te doorgronden. Deze realtime analysetool is van onschatbare waarde voor gebruikers en ontwikkelaars die inzicht willen krijgen in de activiteit van een portemonnee in de loop van de tijd, en biedt inzicht in trends, transactiepatronen en het algehele financiële verloop van een Bitcoin .

Of je nu je persoonlijke project wilt verbeteren, meer waarde wilt toevoegen aan professionele toepassingen of gewoon nieuwsgierig bent naar de fijne kneepjes van Bitcoin : deze gids is je startpunt. Laten we aan deze reis beginnen om het potentieel van realtime analyses Bitcoin te ontdekken.

Wat je gaat doen

• Learn about the BTC Blockbook JSON-RPC and how to use it
• Maak eenendpoint aanendpoint Quicknode
• Maak een React-app om transactiegegevens voor een Bitcoin op te halen, inclusief realtime- en historische saldi

Wat je nodig hebt

• Een Quicknode (meld je hier gratis aan)
• Node.js is geïnstalleerd
• Ervaring met JavaScript en React
• Een code-editor (bijvoorbeeld VScode)

Afhankelijkheid	Versie
node.js	nieuwste

Overzicht van de mogelijkheden van Blockbook

BTC Blockbook JSON-RPC serves as a powerful backend tool designed to index blockchain transactions and provide a comprehensive RPC interface to interact with UTXO chains like Bitcoin. It stands out for its:

• Hoge prestaties: Verwerkt snel grote hoeveelheden gegevens om in realtime nauwkeurige informatie te leveren.
• Uitgebreide datasets: Biedt gedetailleerde informatie over transacties, adressen en saldi.
• Gebruiksgemak: Vereenvoudigt het integratieproces dankzij duidelijke documentatie en ondersteuning door de community.

Door gebruik te maken van de mogelijkheden van Blockbook kunnen ontwikkelaars veelvoorkomende uitdagingen op het gebied van gegevensopvraging overwinnen en applicaties ontwikkelen die gebruikers voorzien van actuele walletinformatie en marktgegevens.

De waarde van Blockbook voor ontwikkelaars

Zonder Blockbook zouden ontwikkelaars rechtstreeks met de Bitcoin moeten werken om deze informatie te verkrijgen. Dit proces omvat het opzetten en onderhouden van een volledige node, het analyseren van onbewerkte blockchain-gegevens en het continu synchroniseren met de meest recente transacties op het netwerk. Dergelijke taken zijn niet alleen zeer resource-intensief, maar vereisen ook een grondige kennis van blockchain-protocollen en gegevensstructuren.

Blockbook vereenvoudigt deze uitdagingen door een gebruiksvriendelijke API aan te bieden die de complexiteit van directe interacties met de blockchain wegneemt. Hiermee kunnen ontwikkelaars de saldi van wallets, transactiegeschiedenissen en wisselkoersen opvragen zonder dat ze de blockchain-gegevens rechtstreeks hoeven te beheren. Dankzij deze gestroomlijnde aanpak kunnen ontwikkelaars zich meer richten op het bouwen van veelzijdige applicaties en minder op de fijne kneepjes van het beheer van blockchain-gegevens, waardoor ontwikkelingscycli aanzienlijk worden versneld en de technische overhead wordt verminderd.

Blockbook includes 10 powerful RPC methods as of the time of this writing. We will be leveraging three of them in this guide:

• bb_getAddress: Geeft de saldi en transacties van een adres weer.
• bb_getTickers: Geeft de wisselkoers weer voor de opgegeven valuta en datum. Als de wisselkoers voor die specifieke tijdstempel niet beschikbaar is, wordt de koers weergegeven die daar het dichtst bij ligt.
• bb_getBalanceHistory Geeft een overzicht van de saldoverloopgeschiedenis voor het adres weer.

EenEndpoint instellen

Het instellen van jeendpoint de Blockbook RPC is heel eenvoudig. Als je je nog niet hebt aangemeld, kun je hier een account aanmaken.

Zodra je bent ingelogd, ga je naar de pagina quicknode.com/endpoints en klik je op ‘Een endpoint aanmaken’. Selecteer Bitcoin mainneten klik vervolgens op 'Volgende'. Vervolgens wordt u gevraagd om de add-on te configureren. Schakel 'Blockbook RPC' in. Klik daarna gewoon op Endpoint aanmaken'.

Als je al eenendpoint hebtendpoint de add-on, ga dan naar de pagina ‘Add-ons’ binnen jeendpoint, selecteer de Blockbook RPC en activeer deze.

Zodra je endpoint klaar endpoint , kopieer je de link van de HTTP-provider en houd je deze bij de hand, want je hebt deze nodig in het volgende gedeelte.

De applicatie bouwen

Om te beginnen met het bouwen van onze analyse-app Bitcoin , moet je eerst je ontwikkelomgeving instellen. Installeer Node.js en npm op je computer, als je dat nog niet hebt gedaan. Node.js zorgt ervoor dat je ontwikkelingsserver draait, en npm beheert de afhankelijkheden van je project.

Het project opzetten

Stap 1: De React-applicatie instellen

Gebruik de npx create-react-app om een nieuw React-project op te zetten:

npx create-react-app bitcoin-analytics
cd bitcoin-analytics

Stap 2: Installeer de benodigde afhankelijkheden

Installeer Axios voor het uitvoeren van HTTP-verzoeken, Chart.js met een React-wrapper voor grafieken, Tailwind CSS voor de opmaak en DatePicker voor de kalender waarmee datums voor historische saldi kunnen worden geselecteerd.

npm install axios react-chartjs-2 chart.js tailwindcss chartjs-adapter-moment
npm install react-datepicker --save

Stap 3: Tailwind CSS configureren

Voer de volgende opdracht uit om Tailwind CSS te installeren en te configureren, waarmee we onze app kunnen opmaken:

npm install -D tailwindcss
npx tailwindcss init

Configureer de sjabloonbestanden in je tailwind.config.js- bestand.

/** @type {import('tailwindcss').Config} */
module.exports = {
	content: ['./src/**/*.{js,jsx,ts,tsx}'],
	theme: {
		extend: {},
	},
	plugins: [],
}

Voeg de @tailwind-richtlijnen toe aan het begin van je .src/index.css -bestand.

@tailwind base;
@tailwind components;
@tailwind utilities;

Het project opzetten

Het ontwerpen van de applicatiestructuur

Voordat je begint met programmeren, is het altijd een goed idee om de structuur van de applicatie van tevoren uit te stippelen. Voor de analyse-app Bitcoin die we in deze handleiding gaan bouwen, heb je onder andere de volgende componenten nodig: Adresinvoer, Balansgrafiek, en WalletStats.

Zoals je op de onderstaande afbeelding kunt zien, gebruik je bb_getAddress, bb_getTickers, en bb_getBalanceHistory methoden in deze app.

De mogelijke flow de applicatie ziet er als volgt uit:

• De gebruiker voert een Bitcoin in en drukt op Enter/Return op het toetsenbord.
• De gegevens over de saldi en transacties van het adres worden opgehaald met de methode bb_getAddress. De realtime koers van Bitcoin verschillende fiatvaluta’s wordt opgehaald met de methode bb_getTickers.
• Adresgegevens en realtime Bitcoin worden doorgegeven aan de WalletStats onderdeel.
• De gebruiker selecteert de startdatum, de einddatum en het tijdsinterval om de historische verandering in het BTC-saldo van het adres te bekijken.
• Historische gegevens over het BTC-saldo worden opgehaald met de methode bb_getBalanceHistory.
• De gegevens worden doorgegeven aan de Balansgrafiek onderdeel.

Laten we nu maar eens beginnen met programmeren.

Stap 0: De benodigde bestanden en mappen aanmaken

Maak de mappen `components ` en `api` aan in de map `src`. Maak vervolgens het bestand `fetchData.js` aan in de map `api`, en maak de bestanden `AddressInput.js`, `BalanceChart.js` en `WalletStats.js ` aan in de map `components`. Je kunt dit allemaal in één keer doen door de onderstaande opdrachten uit te voeren in de terminal vanuit de map van je project.

mkdir src/api && mkdir src/components
echo > src/api/fetchData.js && echo > src/components/AddressInput.js && echo > src/components/BalanceChart.js && echo > src/components/WalletStats.js

Stap 1: Invoercomponent voor Bitcoin

De Adresinvoer Deze component bevat een formulier voor het invoeren van een Bitcoin . Wanneer het formulier wordt verzonden, wordt de onAddressSubmit functie die als prop wordt doorgegeven met de huidige adresstatus.

Dit onderdeel is een op zichzelf staand formulier waarmee gebruikers een Bitcoin kunnen invoeren, waarmee vervolgens saldo- en transactiegegevens kunnen worden opgevraagd.

Open het bestand src/components/AddressInput.js in je code-editor en pas het bestand als volgt aan.

// src/components/AddressInput.js

import React, { useState } from 'react'

// Component for inputting a Bitcoin address, which calls the onAddressSubmit prop on form submission.
const AddressInput = ({ onAddressSubmit }) => {
	// State hook to store and set the Bitcoin address
	const [address, setAddress] = useState('')

	// Function to handle form submission
	const handleSubmit = e => {
		e.preventDefault()
		onAddressSubmit(address)
	}

	return (
		// Form container with styling for center alignment and padding
		<div className="flex flex-col items-center justify-center p-4">
			<form onSubmit={handleSubmit} className="w-full max-w-md">
				<div className="mb-2">
					<label
						htmlFor="address"
						className="block text-gray-700 text-lg font-bold mb-2"
					>
						Balance and Chart of Bitcoin Addresses
					</label>
					<div className="mt-1">
						<input
							type="text"
							id="address"
							value={address}
							onChange={e => setAddress(e.target.value)}
							className="shadow appearance-none border rounded w-full py-3 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
							placeholder="Enter Bitcoin address"
						/>
					</div>
				</div>
				<div className="flex justify-center">
					<button
						type="submit"
						className="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-orange-400 hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary"
					>
						Submit
					</button>
				</div>
			</form>
		</div>
	)
}

export default AddressInput

Stap 2: De WalletStats-component

De WalletStats Dit onderdeel toont diverse statistieken Bitcoin , waaronder het saldo in de geselecteerde fiatvaluta, het totale ontvangen en verzonden BTC-bedrag, het totale transactiebedrag en het niet-bevestigde saldo. Daarnaast kun je hiermee de weergave van de laatste 10 transactie-ID’s in- of uitschakelen.

Open het bestand src/components/WalletStats.js in je code-editor en pas het bestand als volgt aan.

// src/components/WalletStats.js

import React, { useState } from 'react'

// Converts satoshi unit to Bitcoin, fixing to 8 decimal places
const satoshiToBitcoin = satoshi => (satoshi / 100000000).toFixed(8)

// WalletStats component takes walletData and fiatRate as props
const WalletStats = ({ walletData, fiatRate }) => {
	// State for toggling the display of transaction IDs
	const [showTxids, setShowTxids] = useState(false)
	// State for selecting the fiat currency for displaying Bitcoin's equivalent value
	const [fiatCurrency, setFiatCurrency] = useState('USD')

	if (!walletData) {
		return <p>No data available.</p>
	}

	// Calculate the fiat equivalent of the wallet's balance using the selected fiat currency rate
	const fiatBalance = (
		satoshiToBitcoin(walletData.balance) * fiatRate[fiatCurrency]
	).toLocaleString(undefined, {
		minimumFractionDigits: 2,
		maximumFractionDigits: 2,
	})

	// The return statement contains the JSX for rendering the wallet information
	return (
		<div className="p-4 rounded-md shadow-md bg-white my-4">
			<h2 className="text-xl font-bold mb-4">Wallet Information</h2>
			<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
				<div>
					<strong>Address:</strong> {walletData.address}
				</div>
				<div>
					<strong>Balance:</strong> {satoshiToBitcoin(walletData.balance)} BTC (
					{fiatCurrency} {fiatBalance})
				</div>
				<div>
					<strong>Total Received:</strong>{' '}
					{satoshiToBitcoin(walletData.totalReceived)} BTC
				</div>
				<div>
					<strong>Total Sent:</strong> {satoshiToBitcoin(walletData.totalSent)}{' '}
					BTC
				</div>
				<div>
					<strong>Total Transactions:</strong> {walletData.txs}
				</div>
				<div>
					<strong>Unconfirmed Balance:</strong>{' '}
					{satoshiToBitcoin(walletData.unconfirmedBalance)} BTC
				</div>
				<div>
					<strong>Unconfirmed Transactions:</strong> {walletData.unconfirmedTxs}
				</div>
				<div className="flex flex-col md:flex-row items-center mb-4">
					<label
						htmlFor="fiat-currency"
						className="block text-gray-700 font-bold mr-2"
					>
						Select Fiat Currency:
					</label>
					<select
						id="fiat-currency"
						value={fiatCurrency}
						onChange={e => setFiatCurrency(e.target.value)}
						className="block shadow border rounded py-2 px-3 leading-tight focus:outline-none focus:shadow-outline"
					>
						<option value="USD">USD</option>
						<option value="EUR">EUR</option>
						<option value="GBP">GBP</option>
					</select>
				</div>
				{walletData.txids && walletData.txids.length > 0 && (
					<div>
						<button
							onClick={() => setShowTxids(!showTxids)}
							className="text-blue-600 hover:underline"
						>
							{showTxids ? 'Hide' : 'Show'} Latest 10 Transactions
						</button>
						{showTxids && (
							<ul className="mt-4">
								{walletData.txids.slice(0, 10).map((txid, index) => (
									<li key={index} className="truncate">
										{txid}
									</li>
								))}
							</ul>
						)}
					</div>
				)}
			</div>
		</div>
	)
}

export default WalletStats

Stap 3: BalanceChart-component

De Balansgrafiek Deze component geeft een staafdiagram weer om de veranderingen in Bitcoin netto Bitcoin in de loop van de tijd te visualiseren op basis van een reeks historische gegevens.

Open het bestand src/components/BalanceChart.js in je code-editor en pas het bestand als volgt aan.

// src/components/BalanceChart.js

import React from 'react'
import { Bar } from 'react-chartjs-2'
// Chart.js and its components are imported to create the chart
import {
	Chart as ChartJS,
	CategoryScale,
	LinearScale,
	BarElement,
	PointElement,
	Title,
	Tooltip,
	Legend,
	TimeSeriesScale,
} from 'chart.js'
import 'chartjs-adapter-moment' // Needed for time scale

// Registration of Chart.js components necessary to create a bar chart with a time series
ChartJS.register(
	CategoryScale,
	LinearScale,
	BarElement,
	PointElement,
	Title,
	Tooltip,
	Legend,
	TimeSeriesScale
)

const BalanceChart = ({ historyData }) => {
	// Data processing to convert Satoshi values into Bitcoin and create data points
	const dataPoints = historyData.map(entry => ({
		t: new Date(entry.time * 1000),
		y:
			(parseInt(entry.received, 10) + // Parse the string for received Satoshis and convert to Bitcoin
				parseInt(entry.sentToSelf, 10) - // Parse and add Satoshis sent to self, as they don't change the balance
				parseInt(entry.sent, 10)) / // Parse and subtract Satoshis sent from the wallet
			100000000, // Satoshi to Bitcoin conversion factor
	}))

	// Sort the data points by timestamp
	dataPoints.sort((a, b) => a.t - b.t)

	// Creating labels and data arrays for the chart dataset
	const labels = dataPoints.map(dp => dp.t)
	const data = dataPoints.map(dp => dp.y)

	// Configuring the data and appearance of the bar chart
	const chartData = {
		labels: labels,
		datasets: [
			{
				label: 'Net BTC Balance Change Over Time',
				data: data,
				fill: false,
				backgroundColor: 'rgb(33, 150, 243)',
				borderColor: 'rgba(33, 150, 243, 0.2)',
			},
		],
	}

	const chartOptions = {
		scales: {
			x: {
				type: 'time',
				time: {
					unit: 'day',
				},
				title: {
					display: true,
					text: 'Date',
				},
			},
			y: {
				beginAtZero: false,
				title: {
					display: true,
					text: 'Net BTC Balance Change',
				},
			},
		},
		interaction: {
			intersect: false,
			mode: 'index',
		},
		responsive: true,
		maintainAspectRatio: true,
	}

	return <Bar data={chartData} options={chartOptions} />
}

export default BalanceChart

Stap 4: het bestand `fetchData`

De fetchData Dit bestand biedt een reeks functies om met behulp van Axios gegevens op te halen uit een Bitcoin voor verschillende doeleinden: het opvragen van adresgegevens, het ophalen van Bitcoin en het opvragen van de saldohistorie.

Open het bestand src/api/fetchData.js in je code-editor en pas het bestand als volgt aan. Vergeet niet de plaatshouder YOUR_QUICKNODE_ENDPOINT te vervangen door je Quicknode endpoint.

// src/api/fetchData.js

import axios from 'axios'

// Base URL for the Quicknode endpoint, should be replaced with the actual endpoint URL.
const BASE_URL = 'YOUR_QUICKNODE_ENDPOINT'

// Function to get data for a specific Bitcoin address
export const getAddressData = async address => {
	const postData = {
		method: 'bb_getaddress', // The RPC method for getting address data
		params: [address], // The parameters for the method, in this case, the Bitcoin address
		id: 1,
		jsonrpc: '2.0',
	}

	try {
		const response = await axios.post(BASE_URL, postData, {
			headers: {
				'Content-Type': 'application/json',
			},
			maxBodyLength: Infinity,
		})
		return response.data.result
	} catch (error) {
		console.error(error)
	}
}

// Function to get Bitcoin fiat rates for a specific timestamp
export const getBitcoinFiatRates = async timestampUnix => {
	const postData = {
		method: 'bb_gettickers', // The RPC method for getting Bitcoin fiat rates
		params: [{ timestamp: timestampUnix }], // The parameters with the timestamp
		id: 1,
		jsonrpc: '2.0',
	}

	try {
		const response = await axios.post(BASE_URL, postData, {
			headers: {
				'Content-Type': 'application/json',
			},
			maxBodyLength: Infinity,
		})
		return response.data.result.rates
	} catch (error) {
		console.error(error)
	}
}

// Function to get the balance history for a Bitcoin address
export const getBalanceHistory = async (address, from, to, groupBy) => {
	const postData = {
		method: 'bb_getbalancehistory', // The RPC method for getting balance history
		params: [
			address, // The Bitcoin address
			{
				from: from.toString(), // Start of the time range as a string
				to: to.toString(), // End of the time range as a string
				fiatcurrency: 'usd', // The fiat currency to get the balance in
				groupBy: groupBy, // The grouping interval for balance history
			},
		],
		id: 1,
		jsonrpc: '2.0',
	}

	try {
		const response = await axios.post(BASE_URL, postData, {
			headers: {
				'Content-Type': 'application/json',
			},
			maxBodyLength: Infinity,
		})
		return response.data.result
	} catch (error) {
		console.error(error)
	}
}

Stap 5: Hoofdcomponent in React – App.js

Het bestand App.js is de hoofdcomponent (App) van een React-toepassing. Het importeert de benodigde subcomponenten en API-functies, beheert de status van adresgegevens, het saldoverloop, de datumselectie, het interval en de fiatkoersen, en biedt een gestructureerde lay-out met een koptekst en een hoofdinhoudsgebied voor gebruikersinteracties.

Open het bestand src/App.js in je code-editor en pas het bestand als volgt aan.

// src/App.js

import React, { useState, useEffect } from 'react'
// Importing sub-components and styles

import AddressInput from './components/AddressInput'
import WalletStats from './components/WalletStats'
import BalanceChart from './components/BalanceChart'
import DatePicker from 'react-datepicker'
import 'react-datepicker/dist/react-datepicker.css'
// API functions to fetch various data
import {
	getAddressData,
	getBalanceHistory,
	getBitcoinFiatRates,
} from './api/fetchData'

const App = () => {
	// State hooks for various pieces of data and UI control
	const [addressData, setAddressData] = useState(null)
	const [balanceHistory, setBalanceHistory] = useState(null)
	const [startDate, setStartDate] = useState(new Date())
	const [endDate, setEndDate] = useState(new Date())
	// Default interval for balance history in seconds
	const [interval, setInterval] = useState('3600') // Default to 3600 seconds (1 hour)
	// Default fiat rates set to 0, will be updated via API call
	const [fiatRate, setFiatRate] = useState({ USD: 0, EUR: 0, GBP: 0 })

	// useEffect hook to fetch fiat rates on component mount
	useEffect(() => {
		fetchBitcoinFiatRates()
	}, [])

	// Function to handle address form submission
	const handleAddressSubmit = async address => {
		const data = await getAddressData(address)
		setAddressData(data)
	}

	// Function to fetch balance history based on selected dates and interval
	const fetchBalanceHistory = async () => {
		// Convert dates to timestamps
		const startTimestamp = Math.floor(startDate.getTime() / 1000)
		const endTimestamp = Math.floor(endDate.getTime() / 1000)

		const history = await getBalanceHistory(
			addressData.address,
			startTimestamp,
			endTimestamp,
			interval
		)
		setBalanceHistory(history)
	}

	// Function to fetch current Bitcoin fiat rates
	const fetchBitcoinFiatRates = async () => {
		// Assuming the API response structure matches what you provided
		const timestampNow = Math.floor(Date.now() / 1000)

		const fiatRates = await getBitcoinFiatRates(timestampNow)
		setFiatRate({ USD: fiatRates.usd, EUR: fiatRates.eur, GBP: fiatRates.gbp })
	}

	return (
		<div className="App bg-background min-h-screen flex flex-col items-center">
			<header className="bg-white shadow w-full">
				<div className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
					<h1 className="text-3xl font-bold text-gray-900">Bitcoin Explorer</h1>
				</div>
			</header>
			<main className="flex-grow">
				<AddressInput onAddressSubmit={handleAddressSubmit} />
				{addressData && (
					<div>
						<WalletStats walletData={addressData} fiatRate={fiatRate} />
						<div className="container mx-auto p-6">
							<h2 className="text-2xl font-bold text-center my-6">
								Bitcoin Balance Chart
							</h2>

							<div className="flex flex-wrap items-center justify-center gap-4 mb-6 shadow-lg p-6 rounded-lg bg-white">
								<div className="flex flex-col mb-3">
									<label htmlFor="start-date" className="font-semibold mb-2">
										Starting Date
									</label>
									<DatePicker
										id="start-date"
										selected={startDate}
										onChange={date => setStartDate(date)}
										className="w-full max-w-xs h-12 rounded-lg text-lg shadow-inner"
									/>
								</div>
								<div className="flex flex-col mb-3">
									<label htmlFor="end-date" className="font-semibold mb-2">
										Ending Date
									</label>
									<DatePicker
										id="end-date"
										selected={endDate}
										onChange={date => setEndDate(date)}
										className="w-full max-w-xs h-12 rounded-lg text-lg shadow-inner border"
									/>
								</div>
								<div className="flex flex-col mb-3">
									<label htmlFor="time-interval" className="font-semibold mb-2">
										Time Interval
									</label>
									<select
										id="time-interval"
										value={interval}
										onChange={e => setInterval(e.target.value)}
										className="w-full max-w-xs h-12 rounded-lg text-lg shadow-inner border"
									>
										<option value="3600">1 Hour</option>
										<option value="14400">4 Hours</option>
										<option value="86400">Daily</option>
										<option value="604800">Weekly</option>
									</select>
								</div>
							</div>
							<div className="flex justify-center">
								<button
									onClick={fetchBalanceHistory}
									className="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-orange-400 hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary"
								>
									Load History
								</button>
							</div>
						</div>
					</div>
				)}

				{/* Display address data and Chart in a styled manner */}
				{/* ... */}
				{balanceHistory && <BalanceChart historyData={balanceHistory} />}
			</main>
		</div>
	)
}

export default App

Stap 6: Start de app

Je kunt de app nu starten door de onderstaande opdracht uit te voeren.

npm start

De app zou nu moeten draaien op http://localhost:3000. Nu is het tijd om met de app aan de slag te gaan.

Je kunt elk gewenst Bitcoin gebruiken, of het Bitcoin dat in het voorbeeld wordt gebruikt (bc1qwfgdjyy95aay2686fn74h6a4nu9eev6np7q4fn204dkj3274frlqrskvx0) om de app te testen.

Conclusie

Kortom, het traject van het bouwen van een realtime analyse-app Bitcoin heeft je de kennis en hulpmiddelen gegeven om een krachtige applicatie te ontwikkelen die waardevolle inzichten biedt in Bitcoin en marktdynamiek. Het potentieel van je applicatie houdt hier echter niet op. Nu de basisstructuur klaar is, ben je goed gepositioneerd om de mogelijkheden ervan verder uit te breiden.

Consider leveraging other methods available in Blockbook to introduce additional features such as tracking multiple addresses, aggregating wallet data, supporting more fiat currencies, or even building a full blockchain explorer. The flexibility of Blockbook allows for the integration of more complex queries and the ability to present deeper analytical data.

Subscribe to our newsletter for more articles and guides on Web3 and blockchain. If you have any questions or need further assistance, feel free to join our Discord server or share feedback in the feedback section at the end of this page. Stay up to date with the latest by following us on Twitter (@Quicknode) and our Telegram announcement channel.