Lavorare con WebStorm

6.1 Analisi della struttura dell'IDE

Dai, facciamo un po’ di chiarezza su cosa vediamo qui.

1. L'albero di cartelle e file del tuo progetto:

Qui vediamo il contenuto della cartella del nostro progetto — web-storm-10.

Ho creato appositamente un file per rendere più chiaro come tutto è organizzato. Nella prossima lezione farai anche tu queste cose.

2. Il file aperto attualmente:

Questo è semplicemente il contenuto del file index.html, con la sintassi evidenziata.

3. Sopra vedi il menu principale:

Bottoni utili in alto a destra:

• «Triangolo verde» — bottone per avviare il progetto
• «Insetto» — bottone per avviare la modalità debug
• «Lente» — ricerca nel progetto
• «Ingranaggio» — impostazioni

4. A sinistra vedi il menu laterale:

Qui ci sono alcuni bottoni utili. A noi, in particolare, interesserà il bottone Terminale.

5. Barra di stato:

A sinistra nella barra di stato è mostrato il percorso del file attualmente aperto. A destra la sua codifica: CRLF, UTF-8. Presto imparerai a padroneggiare tutto questo.

6.2 Analisi del progetto

1. File HTML.

Questi file hanno estensione .html, e WebStorm li segna con un'icona verde a due frecce. C'è solo un file di questo tipo — index.html

Questi file hanno estensione .js, e WebStorm li segnala con un'icona gialla. Al momento non ci sono file di questo tipo nello screenshot.

2. File CSS con gli stili.

Questi file hanno estensione .css, e WebStorm li segnala con un'icona blu. Al momento non ci sono file di questo tipo nello screenshot.

3. File multimediali statici. Sono i file che contengono dati ma non codice. Possono essere file di testo, immagini, file multimediali, ecc. Al momento non ci sono nel nostro progetto.

4. Librerie esterne (External libraries). Al momento non ci sono nel nostro progetto, ma quando le scaricherai, WebStorm le mostrerà qui.

6.3 Lavorare con il terminale

In WebStorm puoi lavorare direttamente con la riga di comando del sistema operativo. Su Linux e MacOS la riga di comando è comunemente chiamata Terminale, quindi anche in WebStorm si chiama così. In realtà non è un capriccio di WebStorm, ma una denominazione standard tra i programmatori.

Per aprire il Terminale devi cliccare sul bottone Terminale nel menu laterale:

Dovrebbe aprirsi questa finestra:

In questa finestra puoi scrivere i comandi del tuo sistema operativo. A noi interessa uno di questi.

Vediamo la versione attuale di Windows. Per farlo devi scrivere:

    
      ver
    
  

Ecco cosa è uscito a me:

Se hai un errore, scrivi prima il comando «cmd», e poi il comando «ver».

6.4 Cos'è il plugin CodeGym e a cosa serve?

È un'applicazione, un modulo software speciale che si integra nell'ambiente di sviluppo Intellij IDEA o WebStorm e ti permette di lavorare con i compiti del corso CodeGym. Per esempio, scrivere il codice della soluzione, inviarlo per la verifica, confrontarlo con quello "default" e molto altro. Il progresso nella risoluzione dei compiti nel plugin si sincronizza con il tuo account su CodeGym, quindi sarà identico sia sul sito che nell'ambiente di sviluppo.

Puoi scaricare il plugin CodeGym dal marketplace Jetbrains, direttamente nell’ambiente di sviluppo. Di seguito mostreremo i passaggi su WebStorm, ma sono gli stessi anche per Intellij IDEA.

1. Vai nella sezione "Impostazioni", Windows/Linux File - Settings, MacOS WebStorm - Preferences. Se non c’è la sezione impostazioni, apri un progetto qualsiasi o creane uno nuovo.

2. Nella finestra che si apre, scegli la sezione Plugins dal menu laterale e apri la scheda Marketplace. Nella barra di ricerca digita codegym

3. Seleziona il plugin e premi il bottone Install.
4. Riavvia (Restart IDE) WebStorm per iniziare a lavorare con il plugin.
5. Vedrai un’interfaccia leggermente modificata e il bottone Accedi al tuo account nella barra orizzontale in alto.

Cliccando si aprirà una finestra per accedere al tuo account, dove dovrai inserire la tua chiave segreta:

Ricordiamo che puoi trovare la chiave segreta nella sezione “Impostazioni” → “Sicurezza e accesso”.

Dopo aver effettuato il login, il progetto e il Codegym SDK inizieranno a caricarsi (non cambiare a un’altra versione).

6. Per aprire un nuovo compito, premi su Tasks nel pannello verticale a sinistra, poi sulla carta del compito nel pannello laterale sinistro, e nella finestra popup clicca su Apri:

7. Si aprirà una finestra con due schede. Una con il testo del compito e l’altra per inserire il codice.
8. Ora scrivi la tua soluzione al compito e premi il bottone Verifica

Plugin installato! Ora puoi risolvere i compiti.

Sincronizzazione compiti sito — plugin

La lista dei compiti e il loro stato si aggiornano automaticamente ogni cinque minuti o dopo l’invio di qualsiasi compito per la verifica (server Codegym).

Quindi se hai risolto un compito sul sito, apparirà anche nel plugin nella lista dei compiti risolti. Se hai bisogno di aggiornare le informazioni direttamente ora, clicca sul tuo avatar (in alto a destra), e nel menu a tendina seleziona Sincronizza i compiti:

Modalità principiante nel plugin

Questa è una versione semplificata per quegli utenti che non hanno (o hanno poca) esperienza con WebStorm e altri ambienti di sviluppo. Nasconde alcune funzioni di WebStorm. Per disattivare questa modalità clicca sul tuo avatar (in alto a destra), e nel menu a tendina seleziona Impostazioni:

Come nascondere il pannello di navigazione del plugin in modalità PRO

Clicca sul punto Impostazioni (⚙️) e deseleziona il punto "Mostra il pannello di navigazione del plugin":