update: lock sementara
Pada kali ini saya akan membahas dasar cara menggunakan API Indodax, penggunaannya untuk melihat harga dan info lainnya tanpa harus login. Yang diperlukan adalah pengetahuan tentang Javascript (JS), HTML dan CSS, baik mari kita mulai;
* hasilnya nanti seperti
https://jsfiddle.net/d6dbv0f7/embedded/result/* update 1: penambahan auto refresh data tiap 30 detik
1. Informasi tentang API indodax bisa di baca melalui
https://indodax.com/downloads/BITCOINCOID-API-DOCUMENTATION.pdf API-nya dibagi dalam 2 tipe, yang pertama adalah Public (ticker, trade, depth) yang memberikan informasi terkini untuk bermacam mata uang crypto. Dan yang kedua adalah Private yang digunakan untuk mengakses akun kita seperti cek saldo, trading dll. Untuk tutorial kali ini yg akan di bahas adalah API Publik.
2. buka online code editor
https://jsfiddle.net/ atau bisa juga menggunakan aplikasi yg sudah ada di PC. di dalam editor jsfiddle terdapat 4 kolom yakni; HTML, Javascript, CSS editor dan result untuk melihat hasil dari pemograman kita.
3. untuk mempermudah Pemrosesan javascript kita tambahkan jQuery framework, caranya di sebelah kiri klik "Resources URL cdnjs" dan ketik jQuery, tunggu sebentar dan klik jQuery 3.3.1 kemudian klik lagi ikon "
+"
4. di kolom HTML tambahkan kode berikut untuk membuat tabel informasi koin
<p><b>Update data dalam: <span id="timer">0</span> Detik</b></p>
<table id="coins">
<tr>
<th>Pairs</th>
<th>Harga</th>
<th>Beli</th>
<th>jual</th>
<th>Tertinggi 24h</th>
<th>Terendah 24h</th>
</tr>
</table>
. di kolom Javascript tambahkan kode berikut untuk mengambil data dari API indodax dan menampilkannya di dalam tabel html. secara default data akan di ambil setiap 30 detik jika waktu tersebut tidak sesuai silahkan edit "
reloadData"
var reloadData = 30; // dalam detik
var timer;
function updateDataAPI() {
$.ajax({
url: 'https://indodax.com/api/summaries',
success: function(data) {
var row;
$('#coins').html('<tr><th>Pairs</th><th>Harga</th> <th>Beli</th> <th>jual</th> <th>Tertinggi 24h</th><th>Terendah 24h</th></tr>')
for (var key in data.tickers) {
row = `<tr>
<td>` + key.toUpperCase() + `</td>
<td>` + formatNumber(data.tickers[key].last) + `</td>
<td>` + formatNumber(data.tickers[key].buy) + `</td>
<td>` + formatNumber(data.tickers[key].sell) + `</td>
<td>` + formatNumber(data.tickers[key].high) + `</td>
<td>` + formatNumber(data.tickers[key].low) + `</td>
</tr>`
$('#coins tr:last').after(row);
}
clearTimeout(timer)
$('#timer').html(reloadData)
setTimeout(updateDataAPI, reloadData * 1000)
updateTimer()
},
error: function(err) {
alert("Tidak bisa mengambil data API")
}
})
}
function formatNumber(n) {
if (n.indexOf('.') > -1)
return parseFloat(n).toFixed(8);
else
return parseInt(n).toLocaleString("id-ID")
}
function updateTimer() {
a = parseInt($('#timer').html())
$('#timer').html(a - 1)
if (a > 0)
timer = setTimeout(updateTimer, 1000)
}
updateDataAPI()
. di kolom CSS tambahkan kode berikut untuk mempercantik tampilan tabel
table {
border-collapse: collapse;
width: 100%;
}
table td,
table th {
border: 1px solid #ddd;
padding: 8px;
}
table tr:nth-child(even) {
background-color: #f2f2f2;
}
table tr:hover {
background-color: #ddd;
}
table th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #4CAF50;
color: white;
}
6. jika anda masih bingung menyimpan kode-kode diatas silahkan lihat gambar berikut
7. Selesai, di pojok kiri atas klik "Run" untuk mencoba hasilnya atau "Save" untuk menyimpannya secara online dan anda akan mendapat kode unik url seperti
https://jsfiddle.net/d6dbv0f7/
untuk melihat result atau hasilnya saja tambahkan "
embedded/result/" pada url-nya menjadi seperti
https://jsfiddle.net/d6dbv0f7/embedded/result/ bookmark halaman tersebut
dan reload/refresh untuk melihat data terbaru.
silahkan jika ada pertanyaan atau ingin menambahkan dan semoga bermanfaat.
