API NASA #1: Immagine astronomica del giorno

Oggi vedremo come poter sfruttare le API NASA.

Offrono diverse possibilità, ma partiamo da una semplice applicazione in grado di mostrarci giorno per giorno un’immagine diversa, chiamata Immagine Astronomica del giorno, oppure un video. La Nasa la chiama APOD (Astronomy Picture of the Day).

La prima cosa che bisogna sapere è che per poter lavorare con le API NASA bisogna usare una chiave da richiedere sul sito. In alternativa, si può usare la DEMO_KEY, valida solo per 30 chiamate/ora dallo stesso IP, e massimo 50 chiamate/giorno per IP.

Il link con la chiamata JSON è https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY, la cui risposta è la seguente:

{
    "copyright": "Regina Kelly",
    "date": "2016-06-27",
    "explanation": "What's happening over the horizon?  Although [...]. Deja vu: Anticrepuscular Rays over Colorado (I)",
    "hdurl": "http://apod.nasa.gov/apod/image/1606/Anticrep02_Kelly_3264.jpg",
    "media_type": "image",
    "service_version": "v1",
    "title": "Anticrepuscular Rays over Colorado (II)",
    "url": "http://apod.nasa.gov/apod/image/1606/Anticrep02_Kelly_960.jpg"
}

Possiamo quindi scegliere quali info mostrare in base alle chiavi che otteniamo.
Vediamo subito che oltre al link dell’immagine troviamo anche un link della stessa immagine in HD, il titolo dell’immagine, il Copyright, la data di acquisizione e un commento.

 

HTML

Per prima cosa creiamo un container che possa ospitare il titolo, un div per l’eventuale immagine e un iframe che possa contenere un video. Creiamo anche, a titolo di esempio, uno spazio in cui fa rapparire la risposta alla nostra chiamata JSON.

<div id="container">
<h3 id="apod_title"></h3>
<pre id="reqObject"></pre>



<div id="img-vd">
    <img id="apod_img_id" />
    <iframe id="apod_vid_id" type="text/html" frameborder="0"></iframe>
</div>


  



<div id="hd-img"></div>

  


  

  <b>Return Object:</b>

<div id="ret-obj">

<pre id="returnObject"></pre>
</div>
</div>

CSS3

Qualche riga di CSS3 per definire meglio i dettagli:

#reqObject,
#img-vd,
#copyright,
#hd-img {
  text-align: center;
  margin: 30px;
}

#apod_title {
  text-align: center;
  font-size: 30px;
  margin: 30px;
}

#apod_img_id {
  width: 1024px;
  border: 3px solid;
}

#apod_vid_id {
  width: 640px;
  height: 385px;
}

#returnObject {
  max-width: 1200px;
  display: block;
  overflow-x: scroll;
  border: 2px solid black;
}

Javascript/jQuery

Iniziamo col definire alcune variabili, come per esempio URL della chiamata e API_KEY obbligatoria. Facciamo partire la chiamata JSON e sfruttiamo jQuery per compilare la nostra pagina.

var api_k = "?api_key=DEMO_KEY";
var url = "https://api.nasa.gov/planetary/apod" + api_k;

$.getJSON(url, function(set) {

if ("hdurl" in set) {
var hd = set.hdurl;
$("#hd-img").append('For HD Image <a href="' + hd + '" target="_blank">Click Here</a>

');
}

if ("copyright" in set) {
$("#copyright").text("Image Credits: " + set.copyright);
} else {
$("#copyright").text("Image Credits: Public Domain");
}

if (set.media_type == "video") {
$("#apod_img_id").css("display", "none");
$("#apod_vid_id").attr("src", set.url);
} else {
$("#apod_vid_id").css("display", "none");
$("#apod_img_id").attr("src", set.url);
}
$("#reqObject").text(url);
$("#returnObject").text(JSON.stringify(set, null, 4));
$("#apod_explaination").text(set.explanation);
$("#apod_title").text("Astronomy Picture of the Day: " + set.title);
})

Il primo ciclo if controlla che ci sia un link per l’immagine in HD, determinando la presenza di un valore legato alla chiave “hdurl”. Se presente, mostra un collegamento all’immagine che si aprirà su nuovo tab del browser.

if ("hdurl" in set) {
var hd = set.hdurl;
$("#hd-img").append('For HD Image <a href="' + hd + '" target="_blank">Click Here</a>

');
}

Il secondo ciclo if controlla che ci sia un valore legato alla chiave “copyright”, se presente fa apparire il nome dell’autore/detentore del copyright, al contrario assegna il valore “Public Domain”.

if ("copyright" in set) {
$("#copyright").text("Image Credits: " + set.copyright);
} else {
$("#copyright").text("Image Credits: Public Domain");
}

Attiviamo un controllo sul tipo di media da far apparire (video/foto): se si tratta di video, nascondiamo il div che conterrebbe la foto, se si tratta di foto, nascodiamo il div che conterrebbe il video.

if (set.media_type == "video") {
$("#apod_img_id").css("display", "none");
$("#apod_vid_id").attr("src", set.url);
} else {
$("#apod_vid_id").css("display", "none");
$("#apod_img_id").attr("src", set.url);
}

Raccogliamo le informazioni rimanti nei rispettivi div:

$("#reqObject").text(url);
$("#returnObject").text(JSON.stringify(set, null, 4));
$("#apod_explaination").text(set.explanation);
$("#apod_title").text("Astronomy Picture of the Day: " + set.title);

Per convertire l’oggetto Javascript recuperato in precedenza in un formato leggibile, come una stringa, si usa la funzione JSON.stringify(value [, replacer] [, space])

$("#returnObject").text(JSON.stringify(set, null, 4));

Qui si trova un esempio su Codepen.

Un pensiero su “API NASA #1: Immagine astronomica del giorno

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo di WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione /  Modifica )

Google photo

Stai commentando usando il tuo account Google. Chiudi sessione /  Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione /  Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione /  Modifica )

Connessione a %s...

Questo sito utilizza Akismet per ridurre lo spam. Scopri come vengono elaborati i dati derivati dai commenti.