0 basic

1. JavaScript — Sviluppo di Servizi Web — Augusto Ciuffoletti Univ. di Pisa 17 febbraio 2021 Augusto Ciuffoletti (Univ. di Pisa) JavaScript 17 febbraio 2021 1 / 19

2. JavaScript: l’idea di base Il JavaScript ha la caratteristica peculiare di andare in esecuzione nel browser I quindi non utilizza l’ambiente di esecuzione offerto dal PC ospite I possiamo pensare che utilizzi un ambiente di esecuzione virtuale Questo comporta importanti conseguenze I Non dipende dal sistema operativo ospite I Ha a disposizione primitive di sistema standardizzate (nel browser) I Ha a disposizione una interfaccia grafica standardizzata (dal browser) I Va in esecuzione in un ambiente protetto (accesso al filesystem ospite limitato) Nasce come linguaggio speciale, potente e poco strutturato, e diventa dominante Segue uno standard di riferimento, in modo da essere interoperabile (ECMAScript) Evolve in un linguaggio più strutturato, il TypeScript Augusto Ciuffoletti (Univ. di Pisa) JavaScript 17 febbraio 2021 2 / 19

13. Una sandbox: giocare con JavaScript in modo semplice Il modo più efficace per fare esercizi di JavaScript (e oltre) è avere a disposizione una sandbox completa: I un editor per scrivere il codice della app I un server web che ospiti la nostra pagina I un browser che accede al codice e visualizza il risultato Esistono strumenti web che mettono a disposizione i tre componenti attraverso il browser Si chiamano Online IDE, ed esistono per ogni genere di linguaggio di programmazione Noi utilizziamo StackBlitz, che è specifico per JavaScript Augusto Ciuffoletti (Univ. di Pisa) JavaScript 17 febbraio 2021 3 / 19

20. Usare la sandbox Creiamo un account su https://stackblitz.com Nella pagina di dashboard selezionare il tipo di progetto JavaScript (Blank Project) Quella che compare è la vista del progetto: a sinistra il progetto con i suoi file, al centro l’editor per modificarli, a destra la pagina risultante sul browser La modifica è dinamica (disattivabile): appena modificate un file la pagina web cambia di conseguenza La finestra di sinistra può visualizzare, invece del progetto, una interfaccia di ricerca, una per il deploy, una per le eventuali estensioni, ed una per la configurazione della IDE. I per passare dall’una all’altra usate il selettore a sinistra della finestra Augusto Ciuffoletti (Univ. di Pisa) JavaScript 17 febbraio 2021 4 / 19

26. Stackblitz (grafica) Augusto Ciuffoletti (Univ. di Pisa) JavaScript 17 febbraio 2021 5 / 19

27. Composizione del progetto JS In questa fase del corso usiamo StackBlitz per fare semplici esercizi in JavaScript Il progetto base è composto da quattro file, e in questa fase non ne aggiungeremo altri: I Il file index.html che contiene solo un <div>, riempito dallo script JavaScript I Il file index.js, che contiene il JavaScript: viene eseguito automaticamente, anche se non esplicitamente indicato nell’index.html F imposta una stringa nel <div> definito nella pagina html F lavoreremo essezialmente su questo I Un file package.json che definisce versione, nome ed altri meta-dettagli della app I Un file style.css che contiene lo stile della pagina A suo tempo vedremo la composizione di un progetto TypeScript, RxJS, e Angular Augusto Ciuffoletti (Univ. di Pisa) JavaScript 17 febbraio 2021 6 / 19

36. Hallo world (hallo) Per fare fare pratica di solito scriveremo codice nel file index.js Per esempio, con il codice seguente nel file index.js; // Import stylesheets import ’./style.css’; window.alert("Hallo world"); Il risultato è il solito popup Per caricare gli esercizi senza perdere tempo a ricopiare: I Creare un progetto StackBlitz I Selezionare "Connect repository" poi "import an existing repository" I Impostare il link, che costruite a partire dalla etichetta accanto al titolo della trasparenza I Parte fissa https://github.com/AugustoCiuffoletti/ssw_ seguita dall’etichetta hallo I Evitate il cut-paste dalla trasparenza: il risultato è inaffidabile Augusto Ciuffoletti (Univ. di Pisa) JavaScript 17 febbraio 2021 7 / 19

45. Visualizzazione dei risultati (trealert) Gli alert possone essere inseriti nel codice per arrestare l’esecuzione e visualizzare un messaggio: scomodi, li useremo il minimo // Import stylesheets import "./style.css"; // Write Javascript code! const appDiv = document.getElementById("app"); appDiv.innerHTML = ‘<h1>Prova con gli alert</h1>‘; window.alert("Primo"); window.alert("Secondo"); window.alert("Terzo"); Il comando JS alert visualizza il messaggio ed attende l’Ok per procedere Augusto Ciuffoletti (Univ. di Pisa) JavaScript 17 febbraio 2021 8 / 19

46. Visualizzazione dei risultati (trealert) Gli alert possone essere inseriti nel codice per arrestare l’esecuzione e visualizzare un messaggio: scomodi, li useremo il minimo // Import stylesheets import "./style.css"; // Write Javascript code! const appDiv = document.getElementById("app"); appDiv.innerHTML = ‘<h1>Prova con gli alert</h1>‘; window.alert("Primo"); window.alert("Secondo"); window.alert("Terzo"); Il comando JS alert visualizza il messaggio ed attende l’Ok per procedere Augusto Ciuffoletti (Univ. di Pisa) JavaScript 17 febbraio 2021 8 / 19

47. Visualizzazione dei risultati (console) Un modo pratico per visualizzare messaggi durante l’esecuzione è tramite la console // Import stylesheets import ’./style.css’; // Write Javascript code! const appDiv = document.getElementById(’app’); appDiv.innerHTML = ‘<h1>JS Starter</h1>‘; console.log("Primo"); console.log("Secondo"); console.log("Terzo"); Il metodo log della console visualizza il messaggio sulla console Per aprire la console premete il tasto sinistro sulla barra in basso alla sezione del browser I per chiuderere la console premete il tastino in alto a destra della sua finestra Augusto Ciuffoletti (Univ. di Pisa) JavaScript 17 febbraio 2021 9 / 19

51. Visualizzazione dei risultati (innerhtml) Il JavaScript può manipolare la visualizzazione sul browser Per mostrare il risultato di un’elaborazione possiamo inserirlo in un elemento HTML Per fare riferimento all’elemento utilizziamo la funzione getElementById Per impostarne il contenuto accediamo al campo innerHTML // Import stylesheets import ’./style.css’; document.getElementById("demo").innerHTML = "Primo<br>"; document.getElementById("demo").innerHTML += "Secondo<br>"; document.getElementById("demo").innerHTML += "<b>Terzo</b>"; Augusto Ciuffoletti (Univ. di Pisa) JavaScript 17 febbraio 2021 10 / 19

55. Laboratorio Familiarizzate con la IDE dell’editor: I come modificare il contenuto HTML I come modificare l’identificatore di una div I l’editor per JavaScript e HTML è diverso! I esplorate la command palette orizzontale in alto Create qualcosa I Se avete un vecchio esercizio (semplice) provate a caricarlo e vedere se funziona I Altrimenti rispolverate i ricordi di HTML, JavaScript, CSS e inventate qualcosa Augusto Ciuffoletti (Univ. di Pisa) JavaScript 17 febbraio 2021 11 / 19

56. Controllo delle revisioni Nello sviluppo è importante poter registrare versioni progressive del codice Esistono strumenti specifici per questo, ed uno molto popolare è Git Tramite Git è possibile I verificare i cambiamenti tra versioni successive, I tracciare l’introduzione di bug, I ritornare a versioni precedenti I sviluppare varianti del codice in modo indipendente La storia del codice è contenuta in un repository locale I E’ possibile registrare una nuova versione o analizzare differenze Il repository locale può essere sincronizzato con uno remoto I ad esempio condiviso tra più sviluppatori, o come backup Esistono servizi Web specifici per questo I ad esempio github, o bitbucket Augusto Ciuffoletti (Univ. di Pisa) JavaScript 17 febbraio 2021 12 / 19

69. Git e Github (grafica) Augusto Ciuffoletti (Univ. di Pisa) JavaScript 17 febbraio 2021 13 / 19

70. Gestire un repository Git con StackBlitz StackBlitz integra alcuni semplici strumenti per gestire un repo(sitory) Git Nel frame di sinistra, sopra l’elenco dei file, trovate un tasto "Connect repository" I l’icona accanto è il logo di Github I per usare la funzionalità è necessario avere un account Github (gratuito) Premendo il tasto compare un dialog che consente di creare un nuovo repo: I una riga per definire un nome per repo (e l’opzione se renderlo pubblico) I un tasto per creare il repo ed eseguire il push (caricamento) del progetto nel repo Troverete il progetto nella vostra pagina GitHub Alternativamente è possibile importare in StackBlitz un repo git esistente I Inserire la URL completa del repo I attenzione, sovrascriverà ogni contenuto preesistente in StackBlitz Augusto Ciuffoletti (Univ. di Pisa) JavaScript 17 febbraio 2021 14 / 19

81. Laboratorio Create un account gratuito su github.com Tornate su StackBlitz e create un repository per uno degli esercizi precedenti Osservate i tasti descritti nella slide precedente Modificando l’esercizio il tasto Commit si abilita automaticamente I premendolo si sincronizza il repo locale con il contenuto della IDE I e si registra una nuova revisione Se volete modificare il progetto ma mantenere disponibile una versione precedente I sotto al nome del repository accedete ai branch del repo (ora solo il master) I premete e selezionate il triagolino I ora potete creare un nuovo branch, o selezionare quale utilizzare Vicino al nome del repository trovate due piccoli tasti: pull e download I premendo pull il repository git remoto si sincronizza con quello locale (avanzamento) Augusto Ciuffoletti (Univ. di Pisa) JavaScript 17 febbraio 2021 15 / 19

93. Deploy di un progetto software L’operazione di deploy è complessa, e può rivelarsi fatale per un progetto sviluppato male I ad esempio utilizzando in modo disordinato e non documentato librerie e strumenti specifici I ciò che invece normalmente fa il programmatore bricoleur che sviluppa senza precauzioni sulla propria macchina di lavoro Per portare a termine il deploy è necessario preparare una nuova macchina esposta al pubblico e mandare in esecuzione il programma sviluppato, in modo affidabile I cioè senza sorprese. In molti casi la macchina su cui si fa il deploy non è configurabile a piacere dallo sviluppatore I ma condizionata dalle piattaforme standard offerte del fornitore del servizio di hosting Quindi lo sviluppo deve già seguire linee guida precise, altrimenti va adattato per consentire il deploy I cioè, il disastro Augusto Ciuffoletti (Univ. di Pisa) JavaScript 17 febbraio 2021 16 / 19

102. Il PaaS Firebase Firebase è un servizio di hosting gestito da Google, specifico per progetti Angular I Quindi è la scelta giusta per noi Firebase è una piattaforma che offre tutte le funzionalità necessarie ad un servizio web professionale I Autenticazione, monitoraggio, memoria e DB collegati, ecc. Offre un piano gratuito che viene incontro a chi vuole imparare ad usarlo Augusto Ciuffoletti (Univ. di Pisa) JavaScript 17 febbraio 2021 17 / 19

107. StackBlitz e deploy su Firebase StackBlitz è particolarmente orientato a progetti Angular I Avrete notato che tra le varie icone c’è anche Angular I non Angular JS StackBlitz offre la possibilità di fare deploy su Firebase in modo molto semplice La terza icona nel frame di sinistra serve a questo Premendola vengono visualizzati i progetti disponibili I selezionandone uno viene presentato un bottone per effettuare il deploy I al termine del deploy viene presentato un tasto per aprire la URL del vostro servizio nel browser Augusto Ciuffoletti (Univ. di Pisa) JavaScript 17 febbraio 2021 18 / 19

115. Laboratorio Registratevi su Firebase utilizzando le vostre credenziali di ateneo (che sono credenziali Google) I Nella schermata iniziale, Inizio e Aggiungi progetto, specificando poi il nome del progetto I L’abilitazione di Google Analytics è meglio evitarla per semplicità, e comunque non ci serve I La creazione del progetto richiede qualche decina di secondi Ora tornate su StackBlitz e premete l’icona di Firebase Selezionate il vostro nuovo progetto Firebase (se necessario ricaricate) e poi premete Deploy Potete vedere il vostro esercizio alla URL indicate, sul browser del PC ma anche sul vostro smartphone! Augusto Ciuffoletti (Univ. di Pisa) JavaScript 17 febbraio 2021 19 / 19

0 basic

Recommended

Recommended

More Related Content

Similar to 0 basic

Similar to 0 basic (20)

More from Augusto Ciuffoletti

More from Augusto Ciuffoletti (20)

Recently uploaded

Recently uploaded (20)

0 basic