Esercizi AJAX

Servizi senza api key

In questa collezione di esercizi andiamo

Si ricordi di analizzare il JSON per capirne la struttura ed estrarre i valori.

Per ognuna di queste URL leggere il JSON di risposta per analizzare il tracciato (struttura) di risposta.

1. Scrivere una pagina web che contiene una form che richiede delle coordinate geografiche (latitudine-longitudine). Usare il servizio Meteo.
   
   Si otterrà un JSON come questo:

{
  "latitude": 45.58,
  "longitude": 9.58,
  "generationtime_ms": 0.0646114349365234,
  "utc_offset_seconds": 0,
  "timezone": "GMT",
  "timezone_abbreviation": "GMT",
  "elevation": 158,
  "current_weather_units": {
    "time": "iso8601",
    "interval": "seconds",
    "temperature": "°C",
    "windspeed": "km/h",
    "winddirection": "°",
    "is_day": "",
    "weathercode": "wmo code"
  },
  "current_weather": {
    "time": "2026-03-10T15:45",
    "interval": 900,
    "temperature": 12,
    "windspeed": 4.2,
    "winddirection": 250,
    "is_day": 1,
    "weathercode": 61
  }
}

Stampare la temperatura corrente nella località indicata.

2. Scrivere una webapp dove l’utente inserisce un luogo, e il sistema restituisce la sua posizione in termini di latitudine e longitudine (servizio GeoAPIfy).

3. Estendere la precedente pagina, dando anche informazioni sul meteo (servizio Meteo). Notare che in questo esercizio la callback esegue una nuova fetch.

4. Fare una webapp che richiede un nome di un Paese e restituisce di quel paese le seguenti informazioni:

• nome ufficiale e immagine bandiera (flags->png)
• capitale
• popolazione
• link google maps

5. Usando il servizio world dictionary (dizionario di inglese), scrivere una webapp che richiede una parola inglese e richiama il servizio. Dei risultati mostra la prima definizione.

6. Scrivere una webapp che richiede all’utente un certo numero di carte e le mostra.

7. Creare una pagina web con form, che richieda un luogo. Usando il servizio Nominatim, mostrare una scheda coi dettagli del luogo.

8. Creare una pagina web con form, che richieda un luogo. Usando il servizio Countries, mostrare una scheda coi dettagli del luogo.

9. creare una app web analoga agli esercizi precedenti, ma che usa entrambi i servizi.

10. Scrivere una applicazione che permette la ricerca di cocktail mediante una form, e restituisce l’elenco dei cocktail con descrizione, foto, ingredienti e ricetta (in italiano).

11. Scrivere una applicazione che richiede un nome cantante/gruppo e il nome di una canzone e mostra il testo della canzone, usando il servizio Lyrics

Cache remota

1. Modificare il progetto TODO presente nella sezione Javascript nel browser e:
   • dopo ogni aggiunta/modifica/eliminazione bisogna salvare tutte le todo con una unica chiave (es. “todo”) nella cache remota;
   • ad ogni caricamento della pagina bisogna caricare da remoto le todo e se presenti mostrarle all’utente.
2. Scrivere una applicazione che cerca di leggere la chiave myKey (variabile che contiene stringa chiave scelta a piacere) che dovrebbe contenere una stringa inserita dall’utente. Se la trova la stampa in un div apposito.
3. Estendere l’esercizio 18 della sezione JS nel browser con queste funzioni aggiuntive:
   • salvare i dati in cache remota ad ogni input
   • all’avvio caricare i dati da cache remota
   • utilizzare un componente apposito “service” che si occupa di upload-donwload
4. Scrivere una web app contenente due parti:

• la prima chiede all’utente un valore che viene poi salvato in cache remota alla chiave “esercizio-cache-remota”.
• una seconda che mostra il valore corrente di cache e viene aggiornata dopo ogni salvataggio remoto.

Servizi API con chiave

1. Creare una applicazione che mostra i film di tendenza. Procedura:
   • Andare su https://developer.themoviedb.org/reference/getting-started registrarsi e e creare una API Key (cliccando sul pulsante). Copiare e salvare la chiave generata.
   • Creare un progetto da https://stackblitz.com/edit/vitejs-vite-nfdcj76s?file=index.js
   • Copiare la chiave nella stringa “key”.
   • A questo punto generare una fetch al servizio indicato nella variabile urlService (l’istruzione per chi non lo ricorda è await fetch(urlService, fetchOptions). La struttura del JSON di risposta la si può vedere nel file test.json
   • A partire dalla risposta generare una tabella di schede coi film di tendenza che mostra titolo, locandina, overview e voto.

2. Aggiungere sotto alla classifica i risultati dell’ultima partita di serie A.

• URL: https://football98.p.rapidapi.com/seriea/results
• Headers:
{
'X-RapidAPI-Key': 'a8be409292msh83192a5258f2ae4p1f3d1ajsn830150026a35',
'X-RapidAPI-Host': 'football98.p.rapidapi.com'
}
• Dal risultato JSON estrarre i risultati dell’ultima partita. Fare attenzione: il JSON è strutturato come un array di 1 solo elemento che contiene un dizionario dove ad ogni chiave corrisponde una giornata:[{ "Matchday 27": [{...},{...}...]},{ "Matchday 26": [...]},...]
• I risultati devono essere mostrati in un una tabella con le seguenti colonne:  immagine squadra di casa, immagine squadra trasferta, nome squadra casa, nome squadra trasferta, goal casa, goal trasferta.

3. Il servizio Api di IMDB consente di avere un insieme di servizi sui film. Per usarlo occorre una chiave API che si ottiene visitando https://developer.themoviedb.org/docs/getting-started. Occorre registrarsi e dopo la registrazione si accedere alla pagina dove è possibile scaricare la chiave API: https://www.themoviedb.org/settings/api.

Qui un elenco di API:

Qui lo snippet di codice per eseguire la chiamata.

const chiave =
  'CHIAVE OTTENUTA DOPO REGISTRAZIONE';
const url =
  'https://api.themoviedb.org/3/trending/movie/week?language=it-IT';
const caricaFilm = async () => {
  const risposta = await fetch(urL, {
    headers: {
      Authorization: 'Bearer ' + chiave,
    },
  });

Svolgere i seguenti esercizi:

3.1 Scrivere una applicazione che mostra i film di tendenza

3.2 Scrivere una applicazione che consente di ricercare film per titolo o attore

3.3 Scrivere una applicazione che mostra il dettaglio di un film, il cast e mostra il trailer.

La pagina legge dalla URL un ID contenente il dettaglio. Per farlo è sufficiente leggere la url ( ad esempio “detail.html?id=12345”) con questo snippet:

const idFilm = window.location.search.split('=')[1];

Una volta ottenuto l’id usare le API sopra descritte.

3.4 Modificare le applicazioni 3.1 e 3.2 in modo tale che contengano un link alla pagina di dettaglio dell’esercizio 3.3 (con l’id opportunamente valorizzato).