Come sviluppatori, utilizziamo ogni giorno strumenti che ci aiutano a scrivere codice più pulito, testare API, automatizzare processi e migliorare il nostro flusso di lavoro. Ma quali sono davvero essenziali?  

Questo corso ti guiderà attraverso i **tool indispensabili per un Web Developer**, mostrandoti come utilizzarli al meglio per ottimizzare la produttività e migliorare la qualità del codice. Al termine del corso, sarai in grado di:  

- **Configurare e integrare Prettier ed ESLint** per un codice più leggibile e senza errori  
- **Utilizzare Postman** per testare API in modo efficace  
- **Sfruttare Docker** per gestire ambienti di sviluppo consistenti  
- **Automatizzare processi con GitHub Actions**  
- **Padroneggiare i DevTools dei browser** per il debugging e l'ottimizzazione  
- **Gestire task con Task Runner** per semplificare lo sviluppo  

Il corso è gratuito e disponibile sul canale **WebTea Learning**. Puoi seguirlo in qualsiasi momento, su qualsiasi dispositivo.  

Le lezioni saranno sia teoriche che pratiche e verranno **pubblicate progressivamente**.

Se vuoi suggerire un tool passa da discord o scrivici una email.

Manuel Ricci

316135391_10228434730003413_3440617797997573835_n.webp

In questa raccolta trovi i corsi che possono andare bene sia a frontend developer che backend developer e possono aiutarti a comprendere meglio gli strumenti e i linguaggi che hai a disposizione.

Non trovi il corso che fa al caso tuo? Ti andrebbe di dirmi qual è? Così mi aiuterai ad alimentare il catalogo corsi e otterrai il corso che desideri. Per suggerirmi un corso puoi [compilare il modulo google che trovi qui](https://forms.gle/SLdYyE4B4JUiEcjU7).

Full Stack

Scrivere codice pulito non è solo una questione di estetica, ma di efficienza e collaborazione. Prettier ed ESLint sono due strumenti fondamentali per mantenere uno stile coerente e ridurre gli errori nel codice. In questo video vediamo come configurarli e integrarli per migliorare il workflow di sviluppo.

Prettier ed ESLint aiutano a mantenere il codice pulito e senza errori. Scopri come configurarli e integrarli per un workflow di sviluppo più efficiente.

Come configurare Prettier ed ESLint

Impara a usare Postman per testare, automatizzare e documentare le API. Dall'installazione ai test avanzati, tutto ciò che serve per ottimizzare il tuo workflow.

Postman è uno strumento potente e versatile per testare, documentare e automatizzare le API. Originariamente sviluppato come estensione per Chrome, oggi è una piattaforma completa che permette agli sviluppatori di interagire con i servizi web in modo efficiente.

Le API (Application Programming Interfaces) sono fondamentali nello sviluppo moderno, poiché consentono ai sistemi di comunicare tra loro. Tuttavia, senza strumenti adeguati, il debug e il testing possono essere complessi. Postman semplifica questo processo grazie a funzionalità come:

* Invio di richieste HTTP senza dover scrivere codice.
* Visualizzazione strutturata delle risposte, utile per individuare errori.
* Gestione di API tramite collezioni di richieste, che ne facilitano l’organizzazione.
* Automazione dei test con script in JavaScript.
* Collaborazione in team, con la condivisione di richieste e documentazione.

Postman è utile sia per chi sviluppa API sia per chi le utilizza, accelerando il processo di sviluppo e testing.

## Installazione e configurazione iniziale

Postman è disponibile per i principali sistemi operativi (Windows, macOS, Linux). Per installarlo:

1. Scarica l’applicazione dal sito ufficiale:[ https://www.postman.com/downloads/](https://www.postman.com/downloads/)
2. Segui la procedura di installazione per il tuo sistema operativo.
3. Avvia l’app e, se desideri, crea un account per sincronizzare le richieste tra più dispositivi.

Se non vuoi installarlo puoi sempre usare la versione web based.

## Panoramica dell'interfaccia di Postman

Una volta avviato, Postman presenta diverse sezioni fondamentali:

* **Workspace**: area di lavoro per organizzare e gestire le richieste API.
* **Request Builder**: spazio per configurare le richieste HTTP scegliendo metodo, URL, parametri, intestazioni e corpo della richiesta.
* **Response Viewer**: sezione in cui vengono visualizzate le risposte del server (JSON, XML, HTML, testo).
* **Collezioni**: insieme organizzato di richieste API, utile per testing ripetitivo e documentazione.
* **Environments**: gestione di variabili globali o locali per testare API in diversi contesti (es. sviluppo, staging, produzione).
* **Flows**: interfaccia visuale per creare flussi automatizzati di test e interazioni tra API, senza necessità di scrivere codice.
* **APIs**: sezione dedicata alla gestione centralizzata delle API, che permette di definire e documentare endpoint, versioni e specifiche (supporta OpenAPI, RAML, GraphQL).
* **Mock Server**: funzionalità che consente di simulare risposte API senza un backend attivo, utile per testare applicazioni client prima dello sviluppo dell’API reale.
* **Monitors**: strumenti di automazione per eseguire richieste API a intervalli regolari, monitorando lo stato delle API e ricevendo notifiche in caso di errori o tempi di risposta elevati.

## Creare e testare un'API con Postman

Per comprendere meglio Postman, creiamo un server API con Node.js ed Express:

```javascript
import express from 'express';
import bodyParser from 'body-parser';
import jwt from 'jsonwebtoken';

const app = express();
const PORT = 3000;
const SECRET_KEY = "supersegreto";

app.use(bodyParser.json());

let posts = [
    { id: 1, title: 'Primo post', content: 'Contenuto del primo post' },
    { id: 2, title: 'Secondo post', content: 'Contenuto del secondo post' }
];

const users = [{ username: 'admin', password: 'password' }];

app.post('/login', (req, res) => {
    const { username, password } = req.body;
    const user = users.find(u => u.username === username && u.password === password);

    if (user) {
        const token = jwt.sign({ username }, SECRET_KEY, { expiresIn: '1h' });
        return res.json({ token });
    }

    res.status(401).json({ error: 'Credenziali non valide' });
});

const authenticate = (req, res, next) => {

    const token = req.headers['authorization'];

    if (!token) return res.status(403).json({ error: 'Token richiesto' });
    try {
        req.user = jwt.verify(token.split(" ")[1], SECRET_KEY);
        next();
    } catch {
        res.status(401).json({ error: 'Token non valido' });
    }

};

app.get('/posts', authenticate, (req, res) => {
    res.json(posts);
});

app.post('/posts', authenticate, (req, res) => {
    const newPost = { id: posts.length + 1, ...req.body };
    posts.push(newPost);
    res.status(201).json(newPost);
});

app.listen(PORT, () => console.log(`Server in ascolto su porta ${PORT}`));
```

Avvia il server con:

```bash
node server.js
```

Ora possiamo testare le API con Postman.


## Effettuare richieste con Postman

1. In Postman, crea una nuova richiesta POST verso[ http://localhost:3000/login](http://localhost:3000/login).
2. Nella scheda Body, seleziona raw e il formato JSON.
3. Inserisci questo payload: `{"username": "admin", "password": "password"}`
1. Clicca su Send per ricevere un token JWT nella risposta.


### Salvare il token JWT in Postman


Nella scheda Scripts, aggiungi questo script nella sezione post-response:

```javascript
pm.test("Token JWT ricevuto e memorizzato", function () {
    pm.response.to.have.status(200);
    const jsonData = pm.response.json();
    pm.environment.set("jwt_token", jsonData.token);
});

```

Clicca su Send per memorizzare il token JWT. Assicurarsi di aver selezionato un ambiente per fare in modo che il token venga memorizzato correttamente.

### Richiesta GET autenticata

1. Crea una nuova richiesta GET verso[ http://localhost:3000/posts](http://localhost:3000/posts).
2. Nella sezione Authorization, aggiungi un’autenticazione di tipo Bearer Token con valore {{jwt_token}}.
3. Clicca su Send per ricevere l’elenco dei post.

## Automazione dei Test con Postman

Postman permette di scrivere script di test per automatizzare la verifica delle API.

### Test per la richiesta GET

```javascript
pm.test("Verifica status code 200", function () {
    pm.response.to.have.status(200);
});

pm.test("Verifica che ci sia almeno un post", function () {
    const jsonData = pm.response.json();
    pm.expect(jsonData.length).to.be.at.least(1);
});
```

### Test per la richiesta POST

```javascript
pm.test("Verifica status code 201", function () {
    pm.response.to.have.status(201);
});

pm.test("Verifica che il post sia stato creato", function () {
    const jsonData = pm.response.json();
    pm.expect(jsonData.title).to.equal("Nuovo post da Postman");
});
```

## Testing Avanzato

Quando si lavora con le API, è importante assicurarsi che la struttura dei dati restituiti sia sempre conforme allo schema previsto. Per farlo, Postman permette di eseguire la validazione dello schema JSON utilizzando la libreria Ajv (Another JSON Schema Validator), che è attualmente uno dei migliori strumenti per questa operazione.

Di seguito, un esempio di validazione della risposta JSON di un endpoint che restituisce un post:

```javascript
const Ajv = require('ajv');
const ajv = new Ajv({ allErrors: true, strict: false }); // Abilita la validazione di tutti gli errori

const schema = {
    type: "object",
    properties: {
        id: { type: "integer", minimum: 1 }, // ID deve essere un intero positivo
        title: { type: "string", minLength: 3, maxLength: 100 }, // Il titolo deve avere tra 3 e 100 caratteri
        content: { type: "string", minLength: 10 } // Il contenuto deve avere almeno 10 caratteri
    },
    required: ["id", "title", "content"], // Campi obbligatori
    additionalProperties: false // Non permette campi extra
};

pm.test("Schema della risposta valido", function () {
    const jsonData = pm.response.json();
   const validate = ajv.compile(schema);
    const valid = validate(jsonData);

    if (!valid) {
        console.error("Errori di validazione:", validate.errors);
    }

    pm.expect(valid, "La risposta non rispetta lo schema previsto").to.be.true;
});

Cosa fa questo test?

* Ajv viene inizializzato con `allErrors: true` per mostrare tutti gli errori invece di fermarsi al primo errore rilevato.
* Lo schema JSON definisce la struttura prevista per un post:
    * L’`id` deve essere un intero positivo (`minimum: 1`).
    * Il `title` deve avere tra 3 e 100 caratteri.
    * Il `content` deve avere almeno 10 caratteri.
    * Non sono ammessi campi extra (`additionalProperties: false`).
* Se la validazione fallisce, gli errori vengono stampati in console, permettendo di identificare il problema.

### Verifica del codice di stato

Oltre alla validazione della struttura, è fondamentale verificare che l'API restituisca il codice di stato corretto per ogni richiesta effettuata. Ad esempio, quando un nuovo post viene creato correttamente, l'API dovrebbe restituire un `201 Created`.

Il test seguente controlla che il codice di stato della risposta sia corretto:

```javascript
pm.test("Verifica status code 201", function () {
    pm.response.to.have.status(201);
});
```


### Verifica dei dati restituiti

Dopo aver verificato la struttura e il codice di stato, è utile controllare che i dati restituiti dall’API siano effettivamente quelli attesi.

```javascript
pm.test("Verifica che il post sia stato creato correttamente", function () {
    const jsonData = pm.response.json();
    pm.expect(jsonData).to.be.an("object"); // Verifica che la risposta sia un oggetto JSON
    pm.expect(jsonData).to.have.property("title"); // Controlla che il campo "title" esista
    pm.expect(jsonData).to.have.property("content"); // Controlla che il campo "content" esista
    pm.expect(jsonData.title).to.equal("Nuovo post da Postman"); // Controlla il valore del titolo
    pm.expect(jsonData.content).to.be.a("string"); // Verifica che il contenuto sia una stringa
});
```

Cosa fa questo test?

* Controlla che la risposta sia un oggetto JSON valido.
* Verifica che i campi `title` e `content` siano presenti.
* Confronta il titolo ricevuto con il valore atteso.
* Si assicura che `content` sia una stringa.

### Test delle performance

Un altro aspetto importante nella validazione di un’API è il tempo di risposta. Se un endpoint impiega troppo tempo per restituire i dati, può essere un segnale di problemi di performance.

Postman permette di impostare test automatici per verificare che la risposta venga ricevuta entro un tempo massimo prestabilito. Nell’esempio seguente, il test verifica che il server risponda in meno di 200 millisecondi:

```javascript
pm.test("Tempo di risposta inferiore a 200ms", function () {
    pm.expect(pm.response.responseTime, "La risposta è stata troppo lenta").to.be.below(200);
});
```

Se l’API impiega più di 200ms per rispondere, il test fallirà e verrà mostrato un messaggio di errore.
Se vuoi visualizzare il tempo di risposta lo trovi sopra al response viewer a destra affianco al codice di stato.

## Visualizzazione avanzata dei dati con Postman Visualizer

Postman consente di personalizzare la visualizzazione dei dati di risposta utilizzando HTML, CSS e JavaScript. Questa funzionalità è utile per rappresentare i dati API in tabelle, grafici o layout personalizzati.

Utilizziamo Postman Visualizer per creare una tabella interattiva che mostra i dati restituiti dall'API.

**Esempio di template HTML:**

```javascript
const template = `
<style>
    table {
        width: 100%;
        border-collapse: collapse;
        background-color: #fff;
    }

    th, td {
        border: 1px solid #fff;
        padding: 8px;
        text-align: left;
    }

    th {
        background-color: #aaa;
    }

    tr:nth-child(even) {
        background-color: #ccc;
    }
</style>

<table>
    <thead>
        <tr>
            <th>ID</th>
            <th>Title</th>
            <th>Content</th>
        </tr>
    </thead>
    <tbody>
        {{#each json}}
        <tr>
            <td>{{id}}</td>
            <td>{{title}}</td>
            <td>{{content}}</td>
        </tr>
        {{/each}}
    </tbody>
</table>
`;

// Passiamo i dati JSON ricevuti dalla risposta API
let responseData = {
    json: pm.response.json() // Carichiamo la risposta API nel template
};

// Impostiamo il visualizzatore con il template HTML e i dati JSON
pm.visualizer.set(template, responseData);
```

* Il template HTML crea una tabella con intestazioni per ID, Titolo e Contenuto.
* La sintassi {{#each json}} ... {{/each}} scorre i dati JSON ricevuti e li popola dinamicamente nella tabella.
* Il codice CSS migliora la leggibilità della tabella, aggiungendo sfondi alternati per le righe e bordi più chiari.
* L'oggetto responseData memorizza i dati della risposta API per renderli disponibili al template.

### Personalizzazioni Avanzate

Se vogliamo visualizzare i dati API come grafico a barre, possiamo integrare Chart.js nel template:

```javascript
var template = `
<h2 style="color: #fff; font-family: sans-serif;">Lunghezza dei post</h2>
<canvas id="myChart" height="150"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
    var ctx = document.getElementById("myChart").getContext("2d");
    // Creazione del grafico con dati inizialmente vuoti
    var myChart = new Chart(ctx, {
        type: "bar",
        data: {
            labels: [],
            datasets: [{
                label: "Lunghezza contenuto",
                data: [],
                backgroundColor: "rgba(75, 192, 192, 0.2)",
                borderColor: "rgba(75, 192, 192, 1)",
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        }
    });

    // Recupero dei dati JSON passati dal test script
    pm.getData(function (err, value) {
        if (!err) {
            myChart.data.labels = value.titles;
            myChart.data.datasets[0].data = value.content_lengths;
            myChart.update();
        }
    });
});
</script>
`;

// Estrazione e formattazione dei dati dalla risposta JSON
let jsonData = pm.response.json();

// Controllo dei dati ricevuti
if (!Array.isArray(jsonData) || jsonData.length === 0) {
    jsonData = [{ title: "Nessun dato", content: "" }];
}

let chartData = {
    titles: jsonData.map(post => post.title), // Array dei titoli dei post
    content_lengths: jsonData.map(post => post.content.length) // Array della lunghezza dei contenuti
};

// Passiamo il template e i dati al visualizzatore
pm.visualizer.set(template, chartData);
```


## Documentazione API con Postman

Oltre a testare e visualizzare le API, Postman fornisce strumenti per documentarle in modo automatico. Una documentazione chiara e dettagliata è fondamentale per garantire che altri sviluppatori possano comprendere e utilizzare l’API senza difficoltà.

### Creazione della Documentazione

Per ogni richiesta API all'interno di una collezione, Postman permette di aggiungere descrizioni dettagliate. Le informazioni fondamentali da includere sono:

* **Scopo della richiesta:** Spiega il motivo dell'endpoint e cosa restituisce.
* **Parametri richiesti:** Elenca i parametri di:
    * Query (es. ?id=1).
    * Body (es. JSON da inviare in una richiesta POST).
    * Headers (es. Authorization: Bearer &lt;token>).
* **Esempi di richiesta e risposta:** Aiutano a comprendere il formato dei dati attesi.

### Aggiunta di esempi

Postman consente di salvare esempi di richieste e risposte direttamente nella collezione. Questi esempi facilitano la comprensione dell’API per gli sviluppatori che la utilizzano.

### Pubblicazione della Documentazione

Postman offre diverse opzioni per condividere la documentazione generata:

* **Condivisione tramite Postman:**
    1. Seleziona una collezione e clicca su "Publish".
    2. Postman genererà automaticamente una documentazione interattiva, accessibile via URL pubblico o privato.
    3. La documentazione include dettagli sugli endpoint, parametri e risposte attese.
* **Integrazione con strumenti di API Management: **Postman permette anche di collegare le API a strumenti di gestione avanzata come:
* AWS API Gateway
* Azure API Management
* Kong API Gateway

Queste integrazioni facilitano il monitoraggio, la gestione e la sicurezza delle API in ambienti di produzione.

### Best Practices per una Documentazione Efficace

Per garantire che la documentazione sia utile e aggiornata, è importante seguire alcune buone pratiche:

* **Usa descrizioni dettagliate:** Ogni endpoint deve avere una spiegazione chiara del suo funzionamento.
* **Includi esempi di richieste e risposte:** Gli esempi aiutano a comprendere il formato dei dati attesi.
* **Mantieni la documentazione aggiornata:** Ogni modifica all’API deve riflettersi nella documentazione.
* **Utilizza variabili ed environment:** Per semplificare i test e le richieste dinamiche.

In questa lezione abbiamo esplorato le principali funzionalità di Postman, uno strumento indispensabile per chiunque lavori con le API. Abbiamo visto come Postman semplifica il testing, la documentazione e l'automazione delle API, offrendo un'interfaccia intuitiva e una vasta gamma di funzionalità avanzate.

Dall'invio di semplici richieste HTTP alla creazione di test automatizzati, dalla validazione dello schema JSON alla visualizzazione personalizzata dei dati, Postman si rivela uno strumento completo e versatile, adatto a sviluppatori di ogni livello.

Che tu sia un principiante alle prime armi con le API o un professionista esperto, Postman ti aiuterà a migliorare la qualità del tuo lavoro, rendendo più efficiente e produttivo il processo di sviluppo e testing delle API.

Guida completa a Postman: installazione, test API, automazione e documentazione. Impara a ottimizzare lo sviluppo e il debugging delle API.

Come si usa Postman?

Impara a automatizzare test, build e deploy con GitHub Actions! Scopri come creare workflow CI/CD efficienti e ottimizzare il tuo sviluppo

Impara a automatizzare test, build e deploy con GitHub Actions! Scopri come creare workflow CI/CD efficienti e ottimizzare il tuo sviluppo.

Tool Essenziali per Web Developer

Lezioni

Lezioni

Come si usa Postman?

Cosa sono le GitHub Actions