JSON a obrázky

Minule jsme si ukázali získávání dat z webu. Ukazovali jsme si to ale na datech ve velmi jednoduchém formátu, kdy jsme měli číslo a to bylo obsahem celé stránky. Většinou se ale na jedné stránce posílá více dat. Aby se od sebe dali odlišit, jsou v nějakém strojově čitelném formátu, ve většině případech v JSON.

Můžeme si to ukázat například zde: https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY, kde tato stránka nám ukazuje url adresu na dnešní Image of the Day od NASA a další informace. Pro lepší zobrazení doporučuji otevírat tuto stránku v prohlížeči Firefox, který ta data zobrazí v tabulce. Taková data jsou ve formátu následujícím:

{
  "copyright": "\nNASA, \nJuno, \nSwRI, \nMSSS;\n Processing &\nLicense:\nGerald Eichstädt & \nSeán Doran\n",
  "date": "2025-05-25",
  "explanation": "Jupiter is stranger than we knew. NASA's Juno spacecraft has now completed over 70 swoops past Jupiter as it moves around its highly elliptical orbit. Pictured from 2017, Jupiter is seen from below where, surprisingly, the horizontal bands that cover most of the planet disappear into swirls and complex patterns.  A line of white oval clouds is visible nearer to the equator.  Impressive results from Juno show that Jupiter's weather phenomena can extend deep below its cloud tops, that Jupiter's center has a core that is unexpectedly large and soft, and that Jupiter's magnetic field varies greatly with location.  Although Juno is scheduled to keep orbiting Jupiter further into 2025, at some time the robotic spacecraft will be maneuvered to plunge into the giant planet.    Jigsaw Jumble: Astronomy Puzzle of the Day",
  "hdurl": "https://apod.nasa.gov/apod/image/2505/BeneathJupiter_Juno_vertical960.jpg",
  "media_type": "image",
  "service_version": "v1",
  "title": "Beneath Jupiter",
  "url": "https://apod.nasa.gov/apod/image/2505/BeneathJupiter_Juno_960.jpg"
}

Můžete si všimnout, že je to v podstatě soubor, jenž nám dává různé "proměnné" a jejich hodnoty. Abychom tyto data mohli vytáhnout, budeme potřebovat knihovnu k tomu určenou.

Instalace knihovny pro zpracování JSON Newtonsoft.Json

Na pravé liště klikneme pravým tlačítkem na název náš projekt.

V zobrazeném menu klikneme na Spracovat balíčky NuGet....

V menu, co se nám otevřelo, klikneme na Procházet a do vyhledáváciho pole napíšeme Newtonsoft.Json. Po té až se nám najde, tak na něj klikneme levým tlačítem.

Po té klikneme na tlačítko Nainstalovat.

Získání API klíče

Některé API potřebují k funkčnosti API klíč. Jedná se o identifikátor, díky kterému API dokáže identifikovat uživatele. Většinou se používá kvůli tomu, aby jeden uživatel nemohl příliš vytěžovat API.

API klíč je možné získat zde: https://api.nasa.gov/#signUp
Můžete použít např. emailovou adresu, kterou jste dostali od DDM, nebo svoji osobní.

Zpracování dat z JSON

Následující kód nám získá popisek dnešní fotky dne od NASA a vloží nám ho do label1.

// Uložení api klíče do proměnné (sem vložte váš api klíč)
string APIKey = "dlouheheslocodostanuvyse";

// definování url, ze které stahujeme data
string APIUrl = $"https://api.nasa.gov/planetary/apod?api_key={APIKey}";

// získání dat z API
HttpClient client = new HttpClient();
string response = client.GetStringAsync(APIUrl).Result;

// rozložení JSON na proměnné
JObject jsonObj = JsonConvert.DeserializeObject<JObject>(response);

// vytvoření proměnné popisek a uložení do ní obsah jsonu pod heslem explanation
string popisek = jsonObj["explanation"].Value<string>();

// nastavení textu label1 na obsah proměnné popisek
label1.Text = popisek;
https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY

Zadání

Přidejte si do vašeho projektu kromě popisku (Label) také obrázek (PictureBox). Z JSON souboru výše získejte url adresu obrázku, jenž společně s popiskem ukažte uživateli.

Nezapomeňte odevzdat váš kód do Google Učebny: https://classroom.google.com/c/NzE5NDk1NjM2NDAw/a/Nzg0ODYxMzUxNzg2/details

Příliš snadné?

https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY&date=YYYY-MM-DD

Výše napsaná url adresa je doplněna o možnost výběru datumu, ze kterého chceme Image of the Day. Může vypadat například takto: https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY&date=2005-09-14

Přidejte do své aplikace DateTimePicker, díky kterému bude moct uživatel vybrat datum, ze kterého si chce obrázek zobrazit.