Webdatenbanken

Aus ProgrammingWiki

Inhaltsverzeichnis

1 Bildersuche mit Pixabay.com
2 Videosuche mit Pixabay.com
3 Videosuche mit YouTube
4 Wetterdaten mit OpenWeatherMap.org

Bildersuche mit Pixabay.com

Dieses Beispiel verwendet die Pixabay.com API, um nach Bildern zu suchen. Du kannst beliebige Suchbegriffe statt "Ente" eingeben. Die Funktion liefert ein JavaScript-Objekt mit einer Liste von "hits" zurück. In der Dokumentation von Pixabay kannst du mehr erfahren.

function bilderAnzeigen (bilder){
  for(var i=0; i < bilder.hits.length; i++){
    var bild = $('<img style="height:100px" src="'+bilder.hits[i].previewURL+'">');
    $('#bilderAusgabe').append(bild);
  }
}

$('#bilderAusgabe').html(""); // Anzeigefeld leeren

pixabayAPI("images","Ente",bilderAnzeigen);

#bilderAusgabe

Im vorherigen Beispiel wurden einfach alle gefundenen Bilder nebeneinander als img Elemente gelegt. Diesmal sollen detaillierte Informationen zu jedem Bild angezeigt werden:

function bilderDetailsAnzeigen(bilder){
  for(var i=0; i < bilder.hits.length && i < 3; i++){
    var bild = $('<div style="margin:1em;border:1px solid blue;padding:8px">'+
                 '  <img style="height:200px" src="'+bilder.hits[i].webformatURL +'">'+
                 '  <table></table>'+
                 '</div>');

    // alle Eigenschaften auflisten, die Pixbay liefert
    for(var p in bilder.hits[i]){
      $("table",bild).append($('<tr><td><b>'+p+':</b></td><td>'+bilder.hits[i][p]+'</td></tr>'));
    }
    $('#bilderAusgabeDetail').append(bild);
  }
}

$('#bilderAusgabeDetail').html(""); // Anzeigefeld leeren

pixabayAPI("images","Ente",bilderDetailsAnzeigen);

#bilderAusgabeDetail

Videosuche mit Pixabay.com

function videosAnzeigen (videos){
  for(var i=0; i < videos.hits.length; i++){
    var url = videos.hits[i].videos["tiny"].url;
    var video = $('<video style="height:100px" src="'+url+'" controls></video>');
    $('#videosAusgabe').append(video);
  }
}

$('#videosAusgabe').html(""); // Anzeigefeld leeren

pixabayAPI("videos","Enten",videosAnzeigen);

#videosAusgabe

Videosuche mit YouTube

Die YouTube-Datenbank mit Millionen von Videos lässt sich ebenfalls durchsuchen. Mehr Informationen zum Rückgabeformat finden sich in der Dokumentation von Google. Im Beispiel werden maximal 6 Videos geladen. Es kann wieder nach einem beliebigen Begriff gesucht werden.

function youtubeAnzeigen (videos){
  for(var i=0; i < videos.items.length && i < 6; i++){
    var url = 'https://www.youtube.com/embed/'+videos.items[i].id.videoId;
    var video = $('<div><b>'+videos.items[i].snippet.title+'</b><br>'+
            '<iframe src="'+url+'" width="320" height="240" src="" frameborder="1" allowfullscreen></iframe></div>');
    $('#youtubeAusgabe').append(video);
  }
}

$('#youtubeAusgabe').html(""); // Anzeigefeld leeren

youtubeAPI("search","Enten",youtubeAnzeigen);

#youtubeAusgabe

Wetterdaten mit OpenWeatherMap.org

Dieses Beispiel verwendet die OpenWeatherMap.org API, um das aktuelle Wetter von einem Ort zu bestimmen. Du kannst beliebige Suchbegriffe statt "Bern" eingeben. In der Dokumentation von OpenWeatherMap kannst du mehr erfahren.

function temeraturAnzeigen(wetter){
  var tabelle = $('<table></table>');

  // alle Eigenschaften auflisten, die OpenWeatherMap liefert
  for(var p in wetter.main){
    tabelle.append($('<tr><td><b>'+p+':</b></td><td>'+wetter.main[p]+'</td></tr>'));
  }
  var sonnenuntergang = new Date(wetter.sys.sunset*1000);
  tabelle.append('<tr><td><b>Sonnenuntergang</b><td><td>'+sonnenuntergang+'</td></tr>')

  $('#temperaturAusgabe').append(tabelle);
}

$('#temperaturAusgabe').html(""); // Anzeigefeld leeren

openweathermapAPI ("weather","Bern, CH", temeraturAnzeigen);

#temperaturAusgabe

function vorhersageAnzeigen(wetter){
console.log(wetter)

  // alle Eigenschaften auflisten, die OpenWeatherMap liefert
  for(var i=0; i < wetter.list.length; i++){
    var datum = new Date(wetter.list[i].dt*1000);
    var tag = $('<div><b>'+datum+':</b> '+wetter.list[i].main.temp+' °C </div>');
    $('#vorhersageAusgabe').append(tag);
  }
}

$('#vorhersageAusgabe').html(""); // Anzeigefeld leeren

openweathermapAPI ("forecast","Bern, CH", vorhersageAnzeigen);

#vorhersageAusgabe