API: integrazione e personalizzazione

Introduzione

Con il termine "WebAPI" si parla di diversi moduli da integrare nel codice di una pagina web per permetterne la visualizzazione come widget:

L’affluenza in tempo reale dell'istituto (tasso di occupazione o tempo di attesa)

Gli orari dell'istituto

Esempio di una API integrata mostrando l'occupazione in tempo reale e gli orari di apertura della biblioteca (fonte: CHUV - BiUM)

Le WebAPI funzionano tutte con un aggiornamento automatico del modulo ogni 5 minuti.

Ogni WebApi ha un cosiddetto responsive design: si adatta agli elementi che lo contengono e offre quindi una comoda consultazione anche per i diversi supporti.

Per trovare le WebAPI del vostro istituto, andate sul portale di amministrazione nella sezione " Display presenze (WebAPI) ". Se disponete di più siti, è necessario selezionarli nel menu a tendina per accedere alle API di ciascuno di essi.

Integrazione

Tag HTML

Queste WebAPI sono composte da tag HTML che possono essere facilmente e rapidamente integrate in una pagina web:

Un tag <script> che permette di caricare il codice JavaScript necessario per il corretto funzionamento del modulo.

Questo tag deve essere integrato nel codice della pagina tra i tag <head>.

C'è un tag <script> per ogni tipo di modulo da visualizzare (tempo di attesa, tasso di occupazione o orari dell'istituto).

Un tag di visualizzazione WebAPI diverso a seconda delle informazioni da visualizzare (tempo di attesa, tasso di occupazione o orari).

Questo tag deve essere integrato nel codice della pagina in cui deve essere visualizzato il WebAPI.

Il codice da inserire nella pagina HTML può essere estratto per ogni istituto nel portale Affluences nella rubrica Amministrazione, su Display presenze (WebAPI).

Si possono integrare queste webAPI in un'applicazione mobile non appena l'applicazione è in grado di visualizzare una webview (vedi documentazione iOS o Android).

Esempio di codice

Ecco un esempio di codice HTML per la visualizzazione di una webAPI del tasso di occupazione.

<html>
<head>
<script charset="UTF-8" src="https://webapi.affluences.com/js/webapi_latest.min.js%22></script>
</head>
<body>
<div class="affluences-counter" data-token="TST0T0t0TT0TTT"></div>
</body>
</html>

Personalizzazione

Le WebAPI possono essere personalizzate aggiungendo gli attributi nel tag <div>.

La tabella sottostante elenca gli attributi disponibili e i diversi valori possibili.

Valori possibili

numero intero da 1 a 7

numero intero da 1 a 5

Permette di attivare la modalità a scala di grigi

Permette di cambiare la lingua del display in inglese, tedesco o italiano (l'impostazione predefinita è il francese).

Consente di modificare il nome dell'istituto sulla WebAPI. Il nome principale nel Portale Affluences è quello predefinito.

WebAPI	Attributi	Descrizione
Orari	`data-hide-navigation`	true/false	Permette di nascondere i pulsanti (a sinistra e a destra dei giorni) per cambiare la settimana
	`days-number`	Permette di visualizzare solo un certo numero di giorni della settimana
	`lang`	eng, deu, ita	Permette di cambiare la lingua di visualizzazione (il valore predefinito è il francese)
Affluenza in tempo reale (attesa o occupazione)	`forecasts-count`	Per visualizzare le previsioni per le seguenti fascie orarie (1 a 5 fascie orarie possibili) (vedi sotto)
	`greyscale ou grayscale`	true/false
	`lang`	eng, deu, ita
	`data-title-override`	stringhe di caratteri

Esempio di personalizzazione di una WebAPI del tempo di attesa con forecast-count e grayscale

Comunicazione

Alcuni consigli per l'utilizzo delle webAPI:

Presenta i webAPI (o widget) al tuo webmaster

Comunica al pubblico che la trasmissione dei dati è in tempo reale
Aggiungi un titolo chiaro e una legenda, ad esempio "Tempo di attesa reale alla biglietteria / Occupazione attuale della sala"