ChatGPT per programmatori: 3 modi pratici per ottimizzare il flusso di lavoro

Jan 28 2023
Dal rilascio di ChatGPT, ho visto molte discussioni su Internet su cosa potrebbe significare per il futuro della programmazione. C'è sicuramente un sacco di "FUD" diffuso là fuori, ma essenzialmente si riduce a due argomenti: ad oggi, i programmatori possono trarre vantaggio da uno strumento come ChatGPT, che dovremmo abbracciare piuttosto che rifuggire.
Due programmatori lavorano insieme per risolvere un problema. Immagine generata da MidJourneyAI.

Dal rilascio di ChatGPT, ho visto molte discussioni su Internet su cosa potrebbe significare per il futuro della programmazione.

C'è sicuramente un sacco di "FUD" diffuso là fuori, ma essenzialmente si riduce a due argomenti:

  1. La programmazione continuerà a essere redditizia e ci adattiamo utilizzando strumenti come ChatGPT e Copilot.
  2. Strumenti come ChatGPT e Copilot sono solo l'inizio di ciò che verrà e il futuro della programmazione è incerto.

A partire da oggi, i programmatori possono trarre vantaggio da uno strumento come ChatGPT, che dovremmo abbracciare piuttosto che rifuggire.

In questo post, voglio evidenziare 3 casi d'uso di ChatGPT che mi hanno avvantaggiato e potrebbero aiutare anche te. In particolare, questi sono: spiegazione del codice, debug e scrittura di boilerplate.

1. Codice esplicativo

Supponi di aver raccolto un nuovo progetto con una base di codice esistente.

Stai cercando di capire come tutto è messo insieme, cosa hanno scritto gli sviluppatori precedenti e come funziona. Questa può essere una vera sfida.

Sebbene ChatGPT non sia in grado di ricostruire il funzionamento dell'intero programma, può aiutarti a comprendere sezioni o segmenti particolari.

Ad esempio, ho chiesto a ChatGPT di spiegare il seguente pezzo di codice tratto da ProbeX , un progetto secondario su cui sto lavorando.

function recent_scans() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
            resp = JSON.parse(this.responseText);
        
            for (key in resp)
            {
                if(location.href.search('reports.html') != -1)
                {

                    scan_data = "<a href=/reports.html#"+resp[key]['scanid']+" onclick='location.reload()'>"+resp[key]['url']+"</a><br>";
                } 
                else
                {
                    
                    scan_data = "<a href=/reports.html#"+resp[key]['scanid']+">"+resp[key]['url']+"</a><br>";
                }

                // Update dictionary
                console.log(resp[key]["scan_status"]);
                if(resp[key]["scan_status"] == "Completed")
                {
                  resp[key].scan_status = '<span class="label label-success">Completed</span>';
                }
                else
                {

                  resp[key].scan_status = '<span class="label label-warning">In Progress</span>';

                }
                resp[key].scanid = scan_data;
                resp[key].id = parseInt(key) + 1;
                console.log(resp);
            }

             $(function () 
            {
                $('#table').bootstrapTable({
                data: resp
                 });
             });
    }
  };
  xhttp.open("GET", "/scan/scanids/", true);
  xhttp.send();
}

Questo codice definisce una funzione JavaScript chiamata "recent_scans()". Quando viene chiamata, la funzione utilizza l'oggetto XMLHttpRequest per inviare una richiesta GET all'URL specificato (in questo caso, "/scan/scanids/"). Quando il server risponde, la funzione verifica che readyState della risposta sia 4 (significa che la richiesta è stata eseguita) e status sia 200 (significa che la richiesta ha avuto successo).

Se queste condizioni sono soddisfatte, la funzione analizza la risposta come JSON e utilizza un ciclo for per scorrere l'oggetto JSON. Per ogni chiave nell'oggetto, controlla se l'URL corrente contiene "reports.html" e, in tal caso, crea un tag di ancoraggio con un evento onclick che ricarica la pagina. Se l'URL non contiene "reports.html", crea un tag di ancoraggio senza un evento onclick.

La funzione quindi aggiorna lo scan_status di ciascuna chiave nell'oggetto, aggiungendo un'etichetta "Completato" o "In corso" accanto allo stato. Infine, la funzione utilizza il plug-in jQuery Bootstrap Table per creare una tabella con i dati dell'oggetto JSON e visualizzarla sulla pagina.

Questo mi ha dato una comprensione iniziale di cosa fa la funzione, ma sapevo che il codice doveva essere corretto. In particolare, la reports.htmlpagina non si caricava al clic.

Quindi, ho chiesto a ChatGPT di aiutarmi con il debug.

2. Debug

A mio parere, questo è il caso d'uso di ChatGPT che cambia di più la vita dal punto di vista della programmazione. Come ho accennato nel mio post precedente , sembra quasi che tu abbia una seconda persona che lavora con te per risolvere un problema.

Ora, se chiedo semplicemente a ChatGPT cosa c'era di sbagliato nel codice sopra, mi dà un consiglio troppo generico. Quindi, qui è essenziale essere il più specifici possibile.

Ad esempio, questo è il prompt che ho inserito:

La pagina non viene reindirizzata quando si utilizza questo codice; quale potrebbe essere il problema? La sezione del codice qui sotto è ciò a cui voglio che tu presti attenzione.

scan_data = “<a href=/reports.html#”+resp[key]['scanid']+” onclick='location.reload()'>”+resp[key]['url']+”</ a><br>”;

Ecco la risposta con cui ChatGPT è tornato:

  1. Assicurati che la variabile scan_data venga aggiunta correttamente all'HTML della pagina. Puoi verificarlo ispezionando il codice sorgente HTML della pagina dopo che è stato caricato nel browser.
  2. Assicurati che la funzione location.reload() venga chiamata correttamente. Puoi provare ad aggiungere un'istruzione console.log al gestore di eventi onclick per confermare che la funzione viene chiamata quando si fa clic sul collegamento.
  3. Assicurati che l'attributo href dell'elemento a sia impostato correttamente. Se l'attributo href è impostato su un URL errato, la pagina non verrà reindirizzata anche se viene chiamata la funzione location.reload().
  4. Controlla la console per eventuali messaggi di errore che potrebbero fornire ulteriori informazioni sul problema. Apri la console per sviluppatori del browser (in genere premendo F12) e cerca eventuali messaggi di errore che potrebbero aiutare a identificare il problema.

Ho provato ciascuno dei suggerimenti che mi ha dato e ho riportato i risultati a ChatGPT. Tuttavia, nessuno dei consigli ha effettivamente funzionato.

Indipendentemente da ciò, mi ha aiutato a pensare di più al problema. Attraverso un processo avanti e indietro con ChatGPT (e Google), mi sono reso conto che reports.htmlserviva solo più tempo per il caricamento.

Ho quindi segnalato le mie scoperte a ChatGPT e gli ho chiesto di generare un codice che ritardasse il caricamento della pagina. Ho aggiunto la sua risposta alla base di codice e ha funzionato!

È essenziale notare qui che questo processo è iterativo. Richiede un po 'di avanti e indietro con ChatGPT e una certa comprensione da parte dei programmatori per sapere dove possono esistere potenziali problemi.

3. Scrivere boilerplates

Infine, avere ChatGPT che scrive interi standard di codice può essere un enorme aumento della produttività.

Questo è un caso d'uso più comune di ChatGPT, ma comunque potente.

In sostanza, puoi chiedere a ChatGPT di scrivere intere funzioni, script e segmenti di codice, che puoi modificare con le tue specifiche.

Facciamo un esempio rudimentale.

Prompt: Scrivi una semplice API Flask.

Parte della risposta di ChatGPT:

from flask import Flask, jsonify, request

app = Flask(__name__)

@app.route('/greet', methods=['GET'])
def greet():
    name = request.args.get('name')
    return jsonify(message=f"Hello, {name}!")

if __name__ == '__main__':
    app.run(debug=True)

Ovviamente, questo è un esempio banale che avremmo potuto semplicemente cercare su Google. Tuttavia, la premessa rimane la stessa se volessimo qualcosa di più complesso.

Conclusione

Se non lo è già, strumenti di intelligenza artificiale come ChatGPT probabilmente daranno forma al modo in cui i programmatori scriveranno il codice in futuro. Per come la vedo io, questo significa che possiamo dedicare più tempo alla qualità del prodotto piuttosto che alla complessità del codice.

I casi d'uso che ho evidenziato in questo post sono quelli che ho trovato i più rivoluzionari, ma onestamente credo che questo scalfisca solo la superficie. Ad esempio, altri scenari che vengono in mente sono l'ottimizzazione del codice, la scrittura della documentazione e l'apprendimento di nuove tecnologie.

Tutto sommato, mi piace pensare a ChatGPT come al mio assistente programmatore on-demand; lì per aiutarmi quando ho bisogno, se ho bisogno. Questo è tutto.