Iniziare con il servizio di utilizzo e le API

Questo articolo mostra come impostare un semplice server per raccogliere eventi del servizio di utilizzo (un server echo) e visualizzarli sulla console. Imparerai anche come costruire un progetto API di esempio che invierà eventi al server echo. Inoltre, vedrai come modificare l'evento inviato al servizio di utilizzo utilizzando le variabili d'ambiente.

Prerequisiti

Devi installare Node.js per utilizzare questo esempio. Consulta Node.js per il programma di installazione di Node.js.

Impostare un Server Echo

Crea un file contenente il codice mostrato di seguito:

const express = require('express')
const bodyParser = require('body-parser')

const app = express()

// Parse JSON bodies.
app.use(bodyParser.json())
// Accept events.
app.post('/:version/event', (req, res) => {
  const event = req.body
  console.log(event)

  // Respond so the client is happy.
  res.status(200)
  res.send('Event accepted!')
})

// Listen for requests.
app.listen(3000)

Chiameremo il file echo-server.js. Salvalo in una nuova directory e passa a quella directory.

Il server ascolta le richieste sulla porta 3000 e scrive nel console il corpo della richiesta ricevuta. Quindi ogni volta che viene eseguito un test client API o CLI (e la registrazione dell'uso è abilitata), il server echo scrive l'evento di utilizzo ricevuto.

Installa express e body-parser, due dipendenze necessarie per eseguire il codice sopra:

npm i express body-parser

Avvia il server echo:

node echo-server.js

Creare un Test

Puoi utilizzare il Catalogo degli Esempi per ottenere codice di test di esempio. Quando esegui il codice di test, esso invierà dati di metriche di utilizzo al server echo che hai creato nella sezione precedente.

Avvia una nuova finestra di terminale o console per i passaggi seguenti.

Clona il repository del Catalogo degli Esempi Deque su GitHub e poi cambia in quella directory:

git clone git@github.com:dequelabs/axe-devtools-html-api-examples.git
cd axe-devtools-html-api-examples

Per questo esempio, abbiamo utilizzato il codice di esempio Node.js Playwright. Cambia in quella directory e installa i pacchetti Node.js necessari:

cd Node/playwright
npm i

Potresti anche dover installare le dipendenze di Playwright:

npx playwright install

Ora imposta le variabili d'ambiente richieste per abilitare la segnalazione delle metriche e imposta il server sul server echo locale che hai creato in precedenza:

• export AXE_TRACK_USAGE=true
• export AXE_METRICS_URL=http://localhost:3000

Puoi impostare le variabili d'ambiente ed eseguire i test (npm test) dalla riga di comando su Linux e macOS:

AXE_TRACK_USAGE=true AXE_METRICS_URL=http://localhost:3000 npm test

set AXE_TRACK_USAGE=true
set AXE_METRICS_URL=http://localhost:3000

setx AXE_TRACK_USAGE true
setx AXE_METRICS_URL http://localhost:3000

La finestra del terminale che contiene il server echo in esecuzione mostrerà risultati come i seguenti:

{
  dateTime: '2023-01-20T17:26:54.371Z',
  productComponent: 'api-node-playwright',
  productName: 'axe-devtools-html',
  version: 'v2',
  event: 'analyze',
  distinctId: '1b8a5e67-eb1f-4637-9668-be3a332d2c41',
  applicationProperties: {
    target: 'https://broken-workshop.dequelabs.com/',
    target_medium: 'text/html',
    engineVersion: '4.5.2',
    failedRuleCount: 2,
    failedRuleNames: 'color-contrast,label',
    failedItemCount: 5,
    inapplicableRuleCount: 39,
    incompleteRuleCount: 2,
    passedRuleCount: 21,
    testResults: {}
  }
}

Per dettagli sulle proprietà di questo oggetto, vedi L'oggetto Evento.

Modificare l'Evento usando le Variabili d'Ambiente

È possibile modificare l'evento che le API o il CLI inviano al servizio di utilizzo utilizzando le variabili d'ambiente. Questo esempio dimostra come cambiare l'evento.

Per prima cosa, imposta una variabile d'ambiente per il valore che vuoi modificare, per esempio:

export AXE_DEPARTMENT="test department"

Questo cambierà la proprietà department sull'oggetto evento come mostra l'esempio qui sotto (su Linux o macOS):

AXE_DEPARTMENT="test department" AXE_TRACK_USAGE=true AXE_METRICS_URL=http://localhost:3000  npm test

Dalla finestra di terminale in cui stai eseguendo il server echo, dovresti vedere un evento che include informazioni department come mostra la riga evidenziata qui sotto:

{
  dateTime: '2023-01-20T17:31:48.422Z',
  productComponent: 'api-node-playwright',
  productName: 'axe-devtools-html',
  version: 'v2',
  event: 'analyze',
  distinctId: '18cd1262-b5b7-4681-9f7a-a7d4c97745c8',
  applicationProperties: {
    target: 'https://broken-workshop.dequelabs.com/',
    target_medium: 'text/html',
    engineVersion: '4.5.2',
    failedRuleCount: 2,
    failedRuleNames: 'color-contrast,label',
    failedItemCount: 5,
    inapplicableRuleCount: 39,
    incompleteRuleCount: 2,
    passedRuleCount: 21,
    testResults: {}
  },
  department: 'test department'}

Per ulteriori informazioni sulle variabili d'ambiente che puoi utilizzare per modificare gli eventi di utilizzo, vedi Controllare il Servizio di Utilizzo tramite Variabili d'Ambiente.

Prossimi Passi

Per seguire una versione di questo tutorial per il CLI, vedi Iniziare con il Servizio di Utilizzo e il CLI.

Per informazioni generali sul servizio di utilizzo, vedi Il Servizio di Utilizzo.

Per un riferimento sull'oggetto evento, vedi Riferimento agli Eventi del Servizio di Utilizzo.