Ninjastic
PostEdited versionsQuotes to this post
Post
Topic
Board Bahasa Indonesia (Indonesian)
Re: Tutorial Menggunakan API Indodax untuk melihat Harga
by
Kuingsudaqila
on 05/05/2018, 02:58:05 UTC
Quote from: fahbil on May 02, 2018, 12:59:51 AM
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

Code:

Update data dalam: 0 Detik



 
   
   
   
   
   
   
 
PairsHargaBelijualTertinggi 24hTerendah 24h


5. 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"

Code:
var reloadData = 30; // dalam detik

var timer;

function updateDataAPI() {

  $.ajax({
    url: 'https://indodax.com/api/summaries',
    success: function(data) {
      var row;

      $('#coins').html('PairsHarga Beli jual Tertinggi 24hTerendah 24h')
      for (var key in data.tickers) {
        row = `
              ` + key.toUpperCase() + `
              ` + formatNumber(data.tickers[key].last) + `
              ` + formatNumber(data.tickers[key].buy) + `
              ` + formatNumber(data.tickers[key].sell) + `
              ` + formatNumber(data.tickers[key].high) + `
              ` + formatNumber(data.tickers[key].low) + `
            `
        $('#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()

5. di kolom CSS tambahkan kode berikut untuk mempercantik tampilan tabel

Code:
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
Code:
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.



klau cuma lihat harga tanpa login sih mudah dan ga perlu repot seperti itu
tinggal instal aplikasi indodax di android selesai tanpa login sudah bisa lihat update harga