Pobieranie danych z giełdy kryptowalut [API]

Question

Witam, potrzebuję na stronę którą tworze w [html,css,js,bootstrap] umieścić dane odnośnie kryptowalut, czyli kursy, przeliczniki i różne kalkulatory, rozumiem że dane muszę pobrać za pomocą API i w sumie niewiele więcej.
Korzystam z giełdy bitbay, ze względu na prosty opis kluczy: https://bitbay.net/pl/api-publiczne
Wstawiam przykład danych które API zwraca pytając o podstawowe statystyki danej waluty:

{"max":4500,"min":1465,"last":1533,"bid":1513,"ask":1542,"vwap":1524.42,"average":1545.67,"volume":4.54042857}

 I w tym momencie, jako amator, potrzebuje pomocy. W jaki sposób przetransportować to na swoją stronę z możliwością odwoływania się do niektórych wartości i wyświetlenia ich na stronie, lub przeprowadzeniu działań? 
Powinienem to robić w php a nie js tak? 
Proszę o jakieś nakierunkowanie, przykład w jaki sposób mogę zacząć sobie działać na tym. Dziękuje i pozdrawiam!

 

Answer 1

Możesz to zrobić w php, ale JS też sobie z tym poradzi o ile nie potrzebujesz tego wrzucać na jakieś stare przeglądarki.

Tu masz fajny artykuł, po polsku, który opisuje jak pobierać dane z API.

Answer 2

Dziękuje za cenne wskazówki ale ciągle dla takiego laika jak ja który nie siedzi w tym zbyt długo, trudne do zastosowania na własnym przykładzie. Rozumiem że korzystać powinienem ze schematu poniżej, tylko jak go przerobić na moje zapytania odnośnie danych z giełdy? Postaram się w miedzyczasie nadrobić wiedzę, jednakże mój mózg teorie odbija jak od ściany, nadzieja w praktyce. 
Się już pogubiłem za bardzo, 15 zakładek otwartych, połowa githuby i tylko sobie więcej pokomplikowałem niż się nauczyłem  :D

 

const headers = new Headers({
    'Content-Type': 'text/plain'
});
 
const request = new Request({
    method: 'POST',
    mode: 'cors',
    headers: headers
});
 
fetch('https://blog.piotrnalepa.pl/api/content/all', request)
    .then(this._handleResponse)
    .catch(this._catchError);

 

Comments

Mogłbyś opisać dokładnie jaki element z API (https://blog.piotrnalepa.pl/api/content/all) chcesz pobrać?

---

z "https://blog.piotrnalepa.pl/api/content/all"  żadnego, po prostu znalazłem taki pobierania danych z api ale nie umiem go na swoje cele zmodyfikować, na dodatek dowiedziałem się że jeśli poprzez js pobieramy dane API z innej domeny niż tej na której jest strona to polityka bezpieczenstwa przeglądarek je blokuje, więc trzeba to zrobić za pomocą PHP. 

Jakieś wskazówki? Jeden przykład jak wstawić kurs jednej waluty na swoją stronę i z resztą już popłynę. Dziękuje bardzo

---

Przeglądarki czasami blokują zapytania do API, ale żeby to obejść wystarczy przesłać wraz z zapytaniem do api odpowiednie headersy i po sprawie. Nie trzeba do tego celu korzystać z PHP.

Ostatnio robiłem aplikacje wykorzystującą vue.js do wyświetlania prostych danych na Raspberry Pi, tam też pobierałem kursy walut ale używałem do tego axiosa. Kod jest banalnie prosty i możesz go podejrzeć tutaj. 

Miejscem, które obowiązkowo musisz prześledzić jest oficjalna dokumentacja :)

Jak będziesz miał jakieś konkretniejsze pytania to po prostu wstaw kod. Tak wiem mógłbym napisać Ci cały kod w czystym js tylko do pobierania danych z API ale specjalnie nie chcę tego robić, ponieważ tym Ci tylko mogę zaszkodzić :) 

---

Hejka, dziękuje bardzo za pomoc, udało się połączyć, ale nie mogę się z jednym uporać.Jak przypisać wyniki które zwraca 'data.x' do zmiennej z którą będę mógł wyjść poza funkcje i używać jej w innych? Wygodniej by się korzystało z tego gdybym miał powyciągane ceny z wielu kryptowalut przypisane do zmiennej, bo póki co to mogę działać tylko w tej funkcji no i np. gdybym teraz zrobił drugą z np. kalkulatorem, to nie mogę się tam odwołać, proszę o wskazówki i doceniam za pomoc.

Jeszcze jedno pytanie odnośnie headersów, bo póki co wyniki mogę wyświetlać tylko dzięki wtyczce do chroma która dodała do zaufanych adres do api, skomplikowane będzie później to przestawić na poprawne działanie na każdej przeglądarce? Nie chciałbym żeby się później okazało że wszystko wymaga przebudowy. Robię hobbistycznie, ale jednak, na dodatek strasznie mozolnie mi to idzie. 

 

const link = "https://bitbay.net/API/Public/BTCPLN/ticker.json";

async function btcpln() {

    
    const response = await fetch(link);
    const data = await response.json();
    console.log(JSON.stringify(data));
    console.log(data.max, data.min);     // w konsoli sobie wyswietla
    document.getElementById('btcprice').textContent = data.bid;  // html: <span id='btcprice'> </span>
    document.getElementById('btcprice2').textContent = data.max;  // -html: <span id='btcprice2'>  </span>
   
}
btcpln();