Lo screenshot illustra la procedura standard per clonare un repository Git remoto utilizzando l’interfaccia grafica di Visual Studio Code. Di seguito sono descritti i passaggi rappresentati, con tono formale e professionale.
Nel pannello iniziale di Visual Studio Code, collocato nella parte sinistra dell’interfaccia, l’utente seleziona l’opzione “Clone Git Repository…”. Questa funzione consente di avviare il processo di clonazione di un repository remoto, senza necessità di utilizzare comandi da terminale.
Dopo aver selezionato l’opzione di clonazione, Visual Studio Code apre una barra di ricerca nella parte superiore dello schermo.
L’utente inserisce il nome o l’URL del repository desiderato, in questo caso: mastrogpimg/mastrogpt-react-starter
Contestualmente, l’editor mostra un elenco di repository corrispondenti o recentemente utilizzati.
Il repository corretto viene evidenziato e selezionato dall’elenco:
mastrogpimg/mastrogpt-react-starter
Questa conferma indica che l’utente intende clonare tale progetto dalla piattaforma GitHub.
Una volta selezionato il repository, Visual Studio Code procederà con i seguenti passaggi:
- Richiedere all’utente la cartella di destinazione in cui salvare i file del progetto.
- Eseguire la clonazione completa del repository remoto nella posizione scelta.
- Proporre l’apertura del progetto appena clonato in una nuova finestra o nella finestra corrente.
Questa operazione consente di importare rapidamente un progetto GitHub all’interno dell’ambiente di sviluppo, rendendo immediatamente disponibile il codice sorgente per la modifica, l’esecuzione e la gestione con gli strumenti integrati di Visual Studio Code.
Lo screenshot mostra due notifiche di Visual Studio Code relative alla gestione di un progetto che include una configurazione per Dev Containers. Le notifiche guidano l’utente nell’installazione dell’estensione necessaria e nella successiva apertura del progetto all’interno del container di sviluppo.
La prima notifica informa l’utente che il progetto include un file devcontainer.json.
Per poter utilizzare questa configurazione, Visual Studio Code richiede l’installazione dell’estensione ufficiale:
- Dev Containers (Microsoft)
Il pulsante evidenziato con l’etichetta 1 – “Install” consente di installare immediatamente l’estensione necessaria. L’installazione è obbligatoria per abilitare tutte le funzionalità di sviluppo all’interno di un container Docker dedicato.
Una volta rilevata la presenza di una configurazione Dev Container, Visual Studio Code suggerisce all’utente di riaprire il progetto direttamente all’interno del container.
La seconda notifica indica:
- “Folder contains a Dev Container configuration file. Reopen folder to develop in a container.”
Il pulsante marcato con l’etichetta 2 – “Reopen in Container” avvia il processo di:
- Creazione del container sulla base della configurazione fornita.
- Installazione automatica degli strumenti di sviluppo previsti.
- Apertura del progetto all’interno dell’ambiente isolato.
Questo consente di lavorare in un ambiente di sviluppo standardizzato, riproducibile e separato dal sistema operativo locale.
Le due notifiche operano in sequenza per garantire la corretta attivazione del Dev Container:
- Installare l’estensione richiesta.
- Riaprire il progetto all’interno del container configurato.
Questo processo assicura che il progetto utilizzi un ambiente di sviluppo coerente con quanto definito nel repository.
Lo screenshot mostra Visual Studio Code aperto all’interno di un Dev Container, mentre viene eseguita la procedura di autenticazione a un ambiente Apache OpenServerless tramite l’estensione dedicata. Gli elementi numerati rappresentano i passaggi logici e funzionali dell’intero processo.
Nel pannello laterale di sinistra è visibile l’icona dell’estensione OpenServerless. Selezionandola, VS Code mostra tutte le azioni disponibili, come Login, Deploy, Undeploy.
Dal menu dell’estensione viene scelto il comando Login. Questa azione avvia la procedura guidata di autenticazione, visualizzata come interfaccia grafica al centro dello schermo.
Nel primo campo del modulo di login viene inserito il nome utente.
Nell’esempio mostrato, l’utente utilizza la credenziale: michele
Nel secondo campo viene digitata la password associata all’account OpenServerless. Il valore è mascherato, come previsto da una procedura di accesso sicura.
Nel terzo campo viene specificato l’indirizzo dell’istanza OpenServerless alla quale collegarsi. Nell’immagine il valore inserito è:
httpsimg//openserverless.dev
L’utente completa il modulo selezionando il pulsante LOGIN. Questa azione avvia la procedura di connessione e configurazione dell’ambiente.
Nel pannello OUTPUT, VS Code mostra l’intero processo eseguito dall’estensione:
- avvio dello script di login;
- configurazione dell’accesso all’host;
- utilizzo delle credenziali fornite;
- conferma dell’autenticazione avvenuta con successo;
- aggiornamento dei parametri dell’ambiente
whisk(host e auth).
Il testo indica chiaramente che l’utente è stato autenticato correttamente.
Infine, Visual Studio Code mostra una notifica di esito positivo:
You successfully logged in. You can now use the ops command palette.
Ciò conferma che l’ambiente OpenServerless è configurato e pronto per operazioni come deploy, undeploy e gestione delle funzioni.
L’immagine illustra l’intero flusso di autenticazione tramite interfaccia grafica:
- apertura dell’estensione
- avvio del comando di login
- compilazione del modulo
- conferma
- visualizzazione dell’esito positivo
Il sistema risulta ora correttamente configurato per operazioni con Apache OpenServerless all’interno del Dev Container.
Lo screenshot mostra l’esecuzione del comando Deploy dell’estensione OpenServerless all’interno di un Dev Container in Visual Studio Code. A sinistra è visibile il menu dei comandi, mentre a destra è riportato l’output della procedura di deployment.
Nel pannello laterale dell’estensione OpenServerless, l’utente seleziona la voce Deploy. Questa operazione avvia il processo automatizzato che:
- compila il progetto,
- genera gli asset da distribuire,
- carica i file sull’istanza OpenServerless configurata.
Il terminale integrato mostra che Visual Studio Code ha eseguito:
ops ide deploy
Si tratta del comando che gestisce l’intero ciclo di build e upload del progetto verso l’ambiente remoto.
Il sistema conferma che il processo di compilazione è terminato correttamente:
Segue il riepilogo dell’upload. Il report indica che:
- sono stati caricati 7 file,
- il caricamento è stato eseguito con successo,
- non sono stati rilevati errori,
- nessun file è stato ignorato.
A operazione conclusa, viene restituito l’indirizzo pubblico del progetto:
URL: httpsimg//michele.openserverless.dev
L’applicazione risultante è quindi online e raggiungibile all’URL indicato.
Il deploy è stato eseguito correttamente e senza errori. Il progetto React è stato compilato, i file generati sono stati caricati sull’istanza OpenServerless, e l’applicazione risulta ora pubblicata e accessibile tramite l’URL fornito.
Lo screenshot mostra la schermata di Visual Studio Code dedicata all’esecuzione dei test Python tramite il pannello Testing. Gli elementi numerati illustrano i passaggi necessari per visualizzare, organizzare ed eseguire i test presenti nel progetto.
Nel pannello laterale sinistro è selezionata l’icona a forma di beuta (simbolo dei test). Questa icona apre il Test Explorer, lo strumento integrato in Visual Studio Code per la gestione dei test automatici.
Il riquadro centrale mostra la lista dei test rilevati automaticamente dal sistema. In questo caso, il rilevatore ha identificato:
- un gruppo di test Pytest associati al progetto
mastrogpt-react-starter; - due file di test Python:
test_hello_world_int.pytest_hello_world.py
- il gruppo “Python Tests”, che rappresenta l’insieme aggregato dei test Python disponibili.
Tutti i test risultano eseguiti correttamente, come indicato dai simboli verdi di completamento.
Nella barra superiore del Test Explorer è presente l’icona Run All Tests (triangolo “play”). La selezione di questo pulsante consente di eseguire:
- l’intera suite di test,
- tutti i test presenti nel progetto,
- aggiornando i risultati mostrati nel pannello.
Nello screenshot, il riquadro in alto indica che sono stati eseguiti 4 test in totale, senza errori, con un tempo di esecuzione di 747 ms.
L’immagine rappresenta l’intero flusso operativo per:
- accedere al pannello dei test,
- visualizzare la lista dei test Python trovati automaticamente,
- eseguire la suite tramite l’apposito comando.
Tutti i test risultano completati con successo, confermando il corretto funzionamento dell’ambiente di sviluppo e della configurazione Pytest.
Lo screenshot mostra l’utilizzo della funzione Devel dell’estensione OpenServerless in Visual Studio Code, utile per testare l’applicazione localmente durante la fase di sviluppo.
Nel pannello laterale di sinistra viene selezionato il comando Devel. Questo comando esegue:
- l’avvio del backend OpenServerless in locale,
- la generazione di un server di sviluppo per il frontend,
- la pubblicazione degli endpoint di test accessibili sul browser.
Nel terminale, il comando eseguito è:
ops ide devel
La pagina viene caricata nel Simple Browser di Visual Studio Code, indirizzata all’endpoint locale:
httpimg//localhost:8080
Si tratta dell’indirizzo generato dal server di sviluppo, elencato anche nel terminale:
Local: httpimg//localhost:808img/
L’interfaccia dell’applicazione richiede all’utente di inserire un nome. Una volta digitato “Michele”, viene premuto il pulsante Test Backend.
In questo momento, il frontend invia una richiesta HTTP al backend OpenServerless attivo in locale.
L’applicazione mostra una notifica:
Hello, Michele 🎉
Questo indica che:
- il backend OpenServerless ha ricevuto correttamente la richiesta,
- la funzione serverless è stata eseguita,
- la risposta è stata gestita correttamente dal frontend,
- la modalità di sviluppo è operativa e sincronizzata.
Nel terminale, la sezione finale mostra anche l’attivazione della funzione:
Activation: ‘world’ (…)
- Avvio del backend e server di sviluppo con Devel.
- Apertura automatica dell’applicazione su
localhost:8080. - Interazione con il frontend tramite il browser integrato.
- Verifica immediata della risposta della funzione backend.
Questa modalità consente uno sviluppo rapido e interattivo, effettuando un deploy continuo e incrementale durante la fase di sviluppo del backend, ed eseguendo il frontend localmente anche esso in modalita sviluppo.
Lo screenshot documenta l’intero ciclo di modifica, aggiornamento e verifica di una funzione backend in un progetto OpenServerless all’interno di Visual Studio Code, eseguito nel Dev Container.
Nel pannello EXPLORER è selezionata la cartella: packageimg/hellimg/worlimg/
Questa cartella contiene la definizione dell’azione OpenServerless denominata hellimg/world.
In particolare, il file interessato è: world.py
Il contenuto di questo file rappresenta il codice eseguito dal backend quando l’azione viene invocata.
All’interno di world.py viene modificata la risposta della funzione Python:
def main(args):
input = args.get("input", "world")
return { "output": f"Ciao, {input}" }La modifica consiste nel personalizzare il messaggio di risposta, che ora restituisce:
Ciao, <nome>
Si tratta della logica che verrà eseguita dal backend quando il frontend invia una richiesta.
- Aggiornamento dell’azione su OpenServerless (etichetta 3)
Nel terminale vengono eseguiti gli aggiornamenti dell'azione.
L’output conferma l’operazione:
ok: updated action hellimg/world
Segno che l’azione è stata aggiornata ed è immediatamente invocabile.
- Verifica della modifica tramite il frontend (etichetta 4)
Nel Simple Browser di Visual Studio Code, l’utente inserisce il nome (“Michele”) e seleziona Test Backend.
La risposta mostrata è:
Ciao, Michele 🎉
Questo messaggio dimostra che:
- il backend esegue la versione aggiornata della funzione,
- la modifica al file Python è stata correttamente pacchettizzata e applicata,
- frontend e backend comunicano correttamente nella modalità di sviluppo.
L’immagine rappresenta l’intero ciclo operativo di sviluppo backend:
- apertura del file dell’azione,
- modifica del codice Python,
- creazione del pacchetto ZIP,
- aggiornamento dell’azione OpenServerless tramite ops,
- verifica immediata nel browser integrato.
Questa sequenza consente uno sviluppo veloce e iterativo delle funzioni serverless direttamente da Visual Studio Code.
Lo screenshot mostra come l’aggiornamento della funzione backend (“Hello → Ciao”) comporti un necessario aggiornamento dei test, sia locali (unit test) sia remoti (integration test). L’immagine illustra il ciclo completo: fallimento dei test, modifica delle asserzioni, nuova esecuzione con esito positivo.
Nella parte superiore della schermata, il Test Explorer indica: img/4 FAILED
Ciò significa che tutti i test sono falliti.
Aprendo i file dei test (test_hello_world.py e test_hello_world_int.py) si osservano gli errori:
- Il test locale e il test di integrazione si aspettavano:
“Hello, world”ma la funzione ora restituisce:“Ciao, world”
Entrambi i test falliscono con errore di tipo AssertionError.
Per allineare i test al nuovo comportamento della funzione, le asserzioni di entramnbi i test aggiornate.
Da: "Hello, world" a "Ciao, world"
- Nuova esecuzione e superamento dei test (etichetta 3)
Dopo la modifica, i test vengono rieseguiti con il pulsante Run All Tests.
Il nuovo risultato mostra: img/4 ✓ PASSED
Il simbolo verde conferma che:
- la funzione Python restituisce l’output previsto,
- il backend aggiornato risponde correttamente,
- i test unitari e di integrazione ora sono coerenti con il comportamento attuale.
- Modifica della funzione backend (da “Hello” a “Ciao”).
- Fallimento dei test, perché verificavano ancora il vecchio comportamento.
- Aggiornamento delle aspettative nei test (assert == "Ciao, world").
- Riesecuzione e superamento di tutti i test (img/4).
Questo screenshot mostra un caso reale in cui l’aggiornamento del codice richiede la sincronizzazione dei test per garantire coerenza e qualità del sistema.
Lo screenshot mostra il processo completo di deploy dell’applicazione tramite OpenServerless e la successiva apertura dell’applicazione pubblicata attraverso l’URL fornito dall’ambiente di deployment.
Nel pannello laterale dell’estensione OpenServerless, viene selezionata l’opzione Deploy.
Questa operazione avvia il comando:
ops ide deploy
Il comando si occupa di:
- compilare il progetto frontend,
- preparare gli asset da pubblicare,
- caricare i file sull’host OpenServerless,
- rendere disponibile l'applicazione tramite un dominio pubblico.
Nell’area del terminale si osserva che il processo termina correttamente.
Al termine dell’upload, OpenServerless fornisce l’URL pubblico dove l’applicazione è ora raggiungibile:
URL: httpsimg//michele.openserverless.dev
Questo dominio rappresenta l’endpoint pubblico associato al progetto, configurato automaticamente durante il deploy.
La seconda parte dello screenshot mostra il browser con il sito aperto all’indirizzo indicato.
Questo dominio rappresenta l’endpoint pubblico associato al progetto, configurato automaticamente durante il deploy.
L’URL viene evidenziato e utilizzato per aprire l’applicazione.
L’interfaccia visualizzata corrisponde all’app React deployata.
La presenza dell’interfaccia conferma che:
- il deploy è avvenuto correttamente,
- gli asset statici sono stati caricati con successo,
- il dominio pubblico è attivo e raggiungibile.
- Selezione del comando Deploy dall’estensione OpenServerless.
- Esecuzione del processo di build e upload senza errori.
- Ricezione dell’URL pubblico dell'applicazione.
- Apertura del sito nel browser, che conferma il deploy riuscito.
L’immagine documenta chiaramente il flusso completo di pubblicazione e verifica finale dell'applicazione su OpenServerless.