web design umbria
react, web design Umbria, web developer Umbria

REACT lato server: INTRODUZIONE

web design umbria

All’ indirizzo https://umbriawayformazione.wordpress.com/2020/05/30/imparare-react-analizzando-casi-concreti-da-inclassificato-a-grande-maestro-in-sette-giorni/ abbiamo visto come costruire applicazioni lato client sulla parte statica HTML importando librerie esterne compreso il traduttore. Adesso vediamo perchè ci conviene passare sull’ altra sponda con JavaScript lato Server con Node, NPM etc. La prima obiezione che salta subito all’ occhio è “ma è così semplice fare tutto HTML, quello che scrivo si capisce“. Nel modo moderno di usare REACT invece devo conoscere la finestra terminale e impartire comandi del tipo:

  • npm -v (per verificare se ho installato il manager di Node, quello che mi fa arrivare in casa qualsiasi cosa (moduli)
  • node -v (il motore che gestisce la parte server di JS)
  • npm install -g create-react-app (comando che serve a dire globalmente al sistema che può creare applicazioni con la libreria react)
  • create-react-app mia-applicazione (dopo essersi posizionati sul desktop questo comando crea il progetto mia-applicazione che userà tecnologia react)
  • avere familiarità con comandi come cd mia-applicazione e npm start (per far partire il programma)
  • avere familiarità con i metodi di pubblicazione a produzione con npm run build (crea un index.html nella cartella build che sarebbe il corrispettivo del nostro https://www.farwebdesign.com/projectreact/react_14.html)
  • avere familiarità con il package.json e gli script a sostegno e le dipendenze associate nel file
  • essere in grado di creare la cartella node_modules con il comando npm install o npm i
  • saper lanciare i programmi appunto con npm start
  • saper costruire le build
  • saper servire in rete le buil con comandi come npm install serve – g e serve – s build che mi danno la possibilità di vedere il risultato finale su localhost

Ora la domanda critica é: perchè devo imparare tutte queste cose quando le posso evitare facendo solo la parte statica con il metodo: https://www.farwebdesign.com/projectreact/react_14.html ??? La risposta è semplicissima: perchè dopo un primo periodo di trauma ci si accorge che tutto è più ricco di risorse e veloce; perchè ci guadagna l’organizzazione di codice in quanto tutti gli snippet vengono separati adeguatamente al contrario di quello che si legge nell’ HTML. Vediamo dal vivo, il vecchio HTML statico era così composto:

 

<div id=”root”></div>
<script type=”text/babel”>

const lakeList = [
{id: 1, name: “Lago Trasimeno”, trailhead: “Volare”},
{id: 2, name: “Lago di Corbara”, trailhead: “Sognare”},
{id: 3, name: “Lago di Piediluco”, trailhead: “Ammirare”}
];

const App = ({lakes}) => (
<ul>
{lakes.map(lake =>
<li key={lake.id}>{lake.name} | Trailhead: {lake.trailhead}</li>
)}
</ul>
)

ReactDOM.render(
<App lakes={lakeList}/>,
document.getElementById(“root”)
);

</script>

vediamo cosa contiene la cartella SRC strutturata nel nuovo modo di creare applicazioni lato server, il file index.js:

import React from “react”;
import ReactDOM from “react-dom”;
import “./index.css”;
import App from “./App”;
import * as serviceWorker from “./serviceWorker”;

const lakeList = [
{ id: 1, name: “Echo Lake”, trailhead: “Echo Lake” },
{ id: 2, name: “Maud Lake”, trailhead: “Wright’s Lake” },
{ id: 3, name: “Cascade Lake”, trailhead: “Bayview” }
];

ReactDOM.render(<App lakes={lakeList} />, document.getElementById(“root”));

e cosa contiene il file App.js, sempre all’ interno della stessa cartella SRC, importato e richiamato dal metodo render con la A maiuscola?

import React from “react”;

const App = ({ lakes }) => (
<ul>
{lakes.map(lake => (
<li key={lake.id}>
{lake.name} | Trailhead: {lake.trailhead}
</li>
))}
</ul>
);

export default App;

 

il risultato finale quando si lancia il tutto dopo aver installato le dipendenze con npm install seguito da npm start è esattamente lo stesso che https://www.farwebdesign.com/projectreact/react_14.html , con la differenza sostanziale che non devo scrivere a mano nulla rispetto a CSS da integrare o altro perchè l’applicazione è tutta collegata all’ unisono. Nello specifico si noti come la index richiami il componente, isolato e riutilizzabile come vuole la filosofia atomica di react per altri usi e consumi!

CONCLUSIONI:

Dopo uno sbandamento iniziale che può durare a lungo si entra progressivamente nell’ area dei benefici che la nuova tecnologia offre. Quindi è meglio abbandonare da subito la logica seguita nel corso di https://umbriawayformazione.wordpress.com/2020/05/30/imparare-react-analizzando-casi-concreti-da-inclassificato-a-grande-maestro-in-sette-giorni/ e sposare subito la nuova filosofia che diventerà una sorta di esercizio di addestramento fatto su un cavallo indisponente e burrascoso che non vorrà lasciarsi ammansire in vista del palio!

web design umbria
react, web developer Umbria

Imparare REACT analizzando casi concreti: da inclassificato a Grande Maestro in sette giorni!

web design umbria
Sette Kg in sette giorni?

No, sette kg in sette giorni era un film comico con Pozzetto e Verdone, al massimo REACT ci può entrare sotto pelle se lo facciamo otto ore al giorno per almeno un semestre o giù di lì, lavorando su progetti concreti. Negli scacchi sportivi si parte a giocare dal livello inclassificato dopodichè se l’agonista si applica può arrivare al massimo titolo dopo alcuni anni di pratica giocata che è quello di GM (se ha le risorse necessarie e il talento, altrimenti si ferma prima). Qui è lo stesso, da inclassificati ci tocca analizzare caso per caso facendo le dovute premesse. Prima di tutto fra i prerequisiti servono competenze di base di HTML, CSS e JS. In particolare le funzioni arrow freccia sono tipiche di ECMASCRIPT 6, ossia l’ultima versione di js ricca di novità per cui anche qui si dovrebbe almeno sulla carta avere un pò di domestichezza. Tuttavia possiamo colmare il divario almeno rispettando Pareto e la regola ottanta venti: su ottanta minuti dedicati allo studio di REACT almeno venti minuti se ci si applica possono diventare competenze acquisite? Quindi partiamo senza dimenticare che i nostri browser hanno bisogno di implementare il plug-in react che analizza la corretta visibilità degli script marcati dai tag <script> di apertura e chiusura delle nostre pagine WEB. C’è inoltre da chiarire che fare APP con NODE (javaScript lato server) ha un modus operandi diverso dall’ analisi qui riportata, che essendo di primo livello, quindi adatta a chi inizia a giocare a scacchi non senza ambizioni e velleità, si presta solo alla parte statica terra-terra delle implementazioni senza terminale che automatizzano i processi e complicano anche la vita se non si conosce la struttura di una APP lato server(tradotto, saltare a javaScript lato server non è un processo indolore). Quindi installato il plug-in che ci segnala errori sui componenti react possiamo partire analizzando lo script presente all’ indirizzo: https://www.farwebdesign.com/projectreact/react_1.html ; bellissimo progetto non si vede nulla se non il bianco più profondo, magari gli esquimesi possono tradurre il termine NEVE in sette modi diversi ma noi qui che abbiamo fatto? In sostanza abbiamo messo i link al framework per farlo lavorare localmente lato client (cosa che ovviamente non servirebbe gestendo tutto con NPM). Molto importante invece il DIV contrassegnato da id=”root” in quanto è proprio quell’ area che farà il lavoro sporco:

<head>
<title>React Project</title>
https://unpkg.com/react@16.7.0/umd/react.development.js
https://unpkg.com/react-dom@16.7.0/umd/react-dom.development.js
</head>
<body>
<div id=”root”></div>
</body>

Adesso analizziamo il file https://www.farwebdesign.com/projectreact/react_2.html:

<head>
<title>React Project</title>
https://unpkg.com/react@16.7.0/umd/react.development.js
https://unpkg.com/react-dom@16.7.0/umd/react-dom.development.js
</head>
<body>
<div id=”root”></div>
<script type=”text/javascript”>
ReactDOM.render(
React.createElement(
“h1”,
{“style”: {“color”: “red”}},
“Creare é dare una forma al proprio destino – A Camus”
),
document.getElementById(“root”)
);
</script>
</body>

Qui al posto di ciao mondo abbiamo sostituito una frase di Camus che risulta anche mozzata perchè nell’ head andrebbe inserito il TAG <meta charset=”utf-8″> per l’esatta interpretazione dei caratteri a video, a noi interessa l’analisi di react per cui notiamo che siamo di fronte a una doppia funzione nidificata, ossia una scatola dentro la scatola. Quella esterna che è ReactDOM.render (vedere https://it.reactjs.org/docs/react-dom.html ) è responsabile di visualizzare graficamente i contenuti della funzione interna che con il metodo createElement ( vedere https://it.reactjs.org/docs/react-api.html#createelement ) riempe di contenuti la cornice. Vitale è l’istruzione finale javascript document.getElementById(“root”) che come si sottolineava prima serve a sparare tutto il contenuto creato in un punto preciso e cioé nel div che ha un nome e un cognome (root)! Ancora da analizzare ci sono le graffe dentro le graffe, in quanto ci sono delle proprietà che verranno riversate sul selettore. Quando non ci sono proprietà nell’ oggetto dobbiamo impostare a NULL il valore. Analizziamo ora https://www.farwebdesign.com/projectreact/react_3.html:

<head>
<title>React Project</title>
https://unpkg.com/react@16.7.0/umd/react.development.js
https://unpkg.com/react-dom@16.7.0/umd/react-dom.development.js
</head>
<body>
<div id=”root”></div>
<script type=”text/javascript”>
ReactDOM.render(
React.createElement(
“div”,
null,
React.createElement(
“h1”,
null,
“Creare é dare una forma al proprio destino – A Camus”
)
),
document.getElementById(“root”)
);
</script>
</body>

Qui compare il NULL che si diceva prima ossia NON CI SONO PROPRIETA’ per l’oggetto renderizzato. Manca sempre il <meta charset=”utf-8″> che fa guai sulle stringhe di testo ma non ci importa perchè la nostra attenzione è rivolta sulla parte dinamica. Qui viene creato un elemento div che diventa padre dell’ elemento h1 e questo ci porta ad analizzare una situazione molto importante perchè REACT appoggiandosi a un DOM virtuale che traduce prima di quello reale ha bisogno di decodificare bene il codice HTML per renderlo digeribile al rendering della pagina che ha bisogno di un traduttore che ha un nome e cioé JSX, infatti così il div come è segnalato ci crea problemi, vediamo allora il codice sorgente di https://www.farwebdesign.com/projectreact/react_4.html:

<head>
<title>React Project</title>
https://unpkg.com/react@16.7.0/umd/react.development.js
https://unpkg.com/react-dom@16.7.0/umd/react-dom.development.js
https://unpkg.com/@babel/standalone/babel.min.js
</head>
<body>
<div id=”root”></div>
<script type=”text/babel”>
ReactDOM.render(
<h1>Creare ̩ dare una forma al proprio destino РA Camus</h1>,
document.getElementById(“root”)
);
</script>

Qui abbiamo aggiunto un link esterno con CDN , un traduttore di nome BABEL che interpreta (come dovrebbe fare il charset menzionato prima che manca per le frasi) correttamente i TAG per il parser REACT che deve macinare le istruzioni delle funzioni per renderle compatibili con il DOM virtuale e successivo rendering. Infatti anche la dicitura sullo script è cambiata passando a script type=”text/babel”. Da questo momento avendo inserito il famoso traduttore JSX (vedere https://it.reactjs.org/docs/faq-build.html#gatsby-focus-wrapper ) di REACT non dovremmo più avere anomalie sull’ impostazione base. Vediamo il content di https://www.farwebdesign.com/projectreact/react_5.html , la parte head è per comodità tranciata visto che rimarrà invariata rispetto a prima per tutto il prosieguo, prenderemo in esame da ora in poi solo il contenuto del body:

<div id=”root”></div>
<script type=”text/babel”>
let city = “Assisi”;

ReactDOM.render(
<h1 className=”heading”>Hello {city}</h1>,
document.getElementById(“root”)
);
</script>

Qui siamo di fronte a un classico ciao Assisi (W il Glocal!) con testo stilizzato . Da notare come il contenuto della variabile city sia iniettato nel corpo del render grazie all’ uso delle graffe {}. Andiamo oltre analizzando il corpo della pagina con https://www.farwebdesign.com/projectreact/react_6.html:

<div id=”root”></div>
<script type=”text/babel”>

const Hello = () => {
return (
<div className=”heading”>
<h1>Creare ̩ dare una forma al proprio destino РA Camus</h1>
</div>
)
};

ReactDOM.render(
<Hello />,
document.getElementById(“root”)
);
</script>

Qui siamo di fronte a una incredibile novità! possiamo dichiarare una costante e all’ interno del suo valore costruire una funzione con un valore di ritorno che non fa altro che comporre tutto il div critico contrassegnato da id=”root”, per cui ci basterà assurdamente richiamare solo il nome di questa costante per invocare tutto quello che rappresenta. Magia! C’è anche un className=”heading” che possiamo stilizzare nell’ head come vogliamo settando la classe. Vediamo il corpo di https://www.farwebdesign.com/projectreact/react_7.html:

<body>
<div id=”root”></div>
<script type=”text/babel”>

const Hello = ({library, message}) => {
return (
<div className=”heading”>
<h1>Welcome to {library}</h1>
<p>{message}</p>
</div>
)
};

ReactDOM.render(
<Hello library=”React” message=”Enjoy!”/>,
document.getElementById(“root”)
);
</script>
</body>

Sempre più difficile! Qui abbiamo un componente che accetta due parametri di ingresso prima di sparare tutto il suo contenuto a video, per cui possiamo personalizzare il nostro oggettino decidendo di volta in volta cosa far comparire. La costante Hello che contiene tutto, deve avere la prima lettera rigorosamente maiuscola per poter essere invocata correttamente nel metodo render. Vediamo il corpo di https://www.farwebdesign.com/projectreact/react_8.html:

<div id=”root”></div>
<script type=”text/babel”>

const Lake = ({name}) => <h1>{name}</h1>;

const App = () => (
<div>
<Lake name=”Lago Trasimeno” />
<Lake name=”Lago di Corbara” />
<Lake name=”Lago di Piediluco” />
<Lake name=”Lago di Alviano” />
</div>
);

ReactDOM.render(
<App />,
document.getElementById(“root”)
);
</script>

Qui in sostanza con una funzione definita secondo la nuova nomenclatura js6 ARROW FRECCIA (una funzione in forma sintetica) definiamo come il valore di una costante debba essere formattato, in questo modo posso dire che ogni attributo name della costante Lake deve uscire sulla pagina con intestazione1 (h1). Questo avviene all’ interno di un COMPONENTE definito App il quale prima eredita sui suoi contenuti l’operazione descritta in precedenza e dopo si dà in pasto con un semplice TAG alla funzione ReactDOM.render che delegherà a document.getElementById di trasmettere i dati al div contrassegnato da ID=”root”. dA NOTARE E APPREZZARE QUINDI COME UN SEMPLICE tag COME <App /> sia utilizzabile a livello atomico! Vediamo https://www.farwebdesign.com/projectreact/react_9.html:

<div id=”root”></div>
<script type=”text/babel”>

const Lake = ({name}) => <h1>{name}</h1>;

class App extends React.Component {
render() {
return (
<div>
<Lake name=”Lago Trasimeno” />
<Lake name=”Lago di Corbara” />
<Lake name=”Lago di Piediluco” />
<Lake name=”Lago di Alviano” />>
</div>
)
}
}

ReactDOM.render(
<App />,
document.getElementById(“root”)
);
</script>

Qui abbiamo migliorato l’organizzazione del codice precedente e compattato tutto dentro un valore di ritorno del componente APP che adesso è completamente autonomo, non per questo REACT segue il principio della scomposizione molecolare e della riutilizzabilità del codice atomico, cioè la singola parte che non é più divisibile. Da notare l’uso di extends React.Component e render dentro il componente. Vediamo il corpo della pagina https://www.farwebdesign.com/projectreact/react_10.html:

<div id=”root”></div>
<script type=”text/babel”>

const Lake = ({name}) => <h1>{name}</h1>;

class App extends React.Component {
state = {
loggedIn: false
}
render() {
return (
<div>
<div>The user is {this.state.loggedIn ? “logged in” : “not logged in”}.</div>
<Lake name=”Lago Trasimeno” />
<Lake name=”Lago di Corbara” />
<Lake name=”Lago di Piediluco” />
<Lake name=”Lago di Alviano” />
</div>
)
}
}

ReactDOM.render(
<App />,
document.getElementById(“root”)
);
</script>
</body>

SIamo alla presenta agli STATI (vedere https://it.reactjs.org/docs/state-and-lifecycle.html ) e a come vengono ingeriti dal componente APP che nasce come estensione della classe genitore React.Component. In sostanza impostando il valore della variabile loggedIn a false sotto l’operatore ternario dice che se questa variabile ha un valore vero scrivi a video logged in altrimenti esegui l’istruzione contraria, una semplice istruzione condizionale espressa in formula veloce sintetica in una sola riga seguendo la sintassi dei ? e dei : al posto degli IF ed ELSE. Il resto rimane invariato. Analizziamo il contenuto del body in https://www.farwebdesign.com/projectreact/react_11.html:

<div id=”root”></div>
<script type=”text/babel”>

const Lake = ({name}) => <h1>{name}</h1>;

class App extends React.Component {
state = {
loggedIn: false
}
logIn = () => this.setState({loggedIn: true})
logOut = () => this.setState({loggedIn: false})
render() {
return (
<div>
<button onClick={this.logIn}>Log In</button>
<button onClick={this.logOut}>Log Out</button>
<div>
The user is {
this.state.loggedIn
? “logged in”
: “not logged in”}.
</div>
<Lake name=”Lago Trasimeno” />
<Lake name=”Lago di Corbara” />
<Lake name=”Lago di Piediluco” />
<Lake name=”Lago di Alviano” />
</div>
)
}
}

ReactDOM.render(
<App />,
document.getElementById(“root”)
);
</script>

Questo esempio invece mostra come INTERCETTARE GLI EVENTI seguendo la logica dell’ OPERATORE TERNARIO, vediamo come premendo su ogni rispettivo pulsante si ha una risposta all’ evento onclick che risponde segnalando vero o falso a seconda della scelta. l’ESPRESSIONE this.state.loggedIn fa riferimento alla funzione dell’ oggetto corrente che ha una proprietà valorizzata a false. Vediamo https://www.farwebdesign.com/projectreact/react_12.html solo il corpo della pagina:

<div id=”root”></div>
<script type=”text/babel”>

const Lake = ({name}) => <h1>{name}</h1>;
const SkiResort = ({name}) => <h1>{name}</h1>;

const App = ({summer}) => (
<div>
{summer
? <Lake name=”Lago Trasimeno”/>
: <SkiResort name=”Monte Pennino”/>}
</div>
)

ReactDOM.render(
<App summer={false}/>,
document.getElementById(“root”)
);
</script>

Qui gioco sulle vacanze da passare al lago o in montagna. L’operatore ternario lo abbiamo già visto prima e sappiamo come funziona. Il punto ? interrogativo ossia IF corrisponde di default a VERO altrimenti else o : corriponde a FALSO come valore booleano. Ma il componente quando viene dichiarato all’ interno del metodo render accetta l’impostazione a false di default per cui si annulla la condizione vera che era quella di vai al trasimeno se non succede altro, ma qui summer nel corpo del render è valorizzato a false, quindi l’altro succede! Ovviamente impostando nel render summer a true ci toccherà andare in vacanza al lago Trasimeno (che dispiacere!). Vediamo il corpo di https://www.farwebdesign.com/projectreact/react_13.html dove vediamo in azione un ciclo che prende gli elementi da un array e li fa girare:

<div id=”root”></div>
<script type=”text/babel”>

const lakeList = [
“Lago Trasimeno”,
“Lago di Corbara”,
“Lago di Piediluco”
];

const App = ({lakes}) => (
<ul>
{lakes.map((lake, i) =>
<li key={i}>{lake}</li>
)}
</ul>
)

ReactDOM.render(
<App lakes={lakeList}/>,
document.getElementById(“root”)
);

</script>

Questo è solo un ciclo, il componente è scomparso! Esiste una costante che genera un ciclo comprensivo di HTML che ha bisogno di un’altra costante per avere del contenuto da macinare, infatti si legge <App lakes={lakeList}/> con la A iniziale rigorosamente maiuscola (altrimente verrebbe segnalato errore) e dove lakeList è il contenuto dell’ armadio definito fuori contesto e presente come entità autonoma (o atomica visto il logo react!). Vediamo infine https://www.farwebdesign.com/projectreact/react_14.html dove viene proposta una soluzione per far ciclare gli elementi di un array che non hanno un solo valore assegnato ma più di uno da stampare a video:

<div id=”root”></div>
<script type=”text/babel”>

const lakeList = [
{id: 1, name: “Lago Trasimeno”, trailhead: “Volare”},
{id: 2, name: “Lago di Corbara”, trailhead: “Sognare”},
{id: 3, name: “Lago di Piediluco”, trailhead: “Ammirare”}
];

const App = ({lakes}) => (
<ul>
{lakes.map(lake =>
<li key={lake.id}>{lake.name} | Trailhead: {lake.trailhead}</li>
)}
</ul>
)

ReactDOM.render(
<App lakes={lakeList}/>,
document.getElementById(“root”)
);

</script>

Lo script è uguale al precedente come logica ma qui l’array è più complesso perchè non ha un solo valore associato all’ oggetto, ma bensì ospita due proprietà, name e trailhead. Abbiamo coppie di chiave/valore che hanno delle assegnazioni da restituire a video. Definiamo in sostanza prima un array che si chiama lakeList e successivamente diciamo cosa farne di questi dati con il nome della funzione che si chiama lakes e che accetta come parametro da masticare nel ciclo proprio il nome della mia costante array (array che sono facilmente riconoscibili perchè nella sintassi generale sono definiti da parentesi quadre!)

CONCLUSIONI

REACT (inventato da quelli di Facebook!) risponde al trend delle curve di apprendimento indicato dal mercato dove Vue JS sembra il framework più facile da digerire, poi viene REACT JS e infine il demoniaco ANGULAR con Typescript (Champollion dove sei?); alla fine di questo lungo viaggio siamo riusciti almeno a farci promuovere a terza nazionale che è sempre un gradino basso per un agonista che gioca a scacchi, ma ricordiamoci che eravamo partiti da livello inclassificato che è ancora peggio. In ogni caso ricordiamoci che davanti ci sono ancora miriadi di categorie da percorrere e ci sarà molto da esplorare sulla parte server di REACT, con un ambiente di sviluppo molto complesso ma anche molto più ricco di risorse, dove le possibilità rispetto a queste lavorazioni statiche HTML aumentano a dismisura, non è un caso che questa tecnologia oggi sia richiestissima e di uso quotidiano nelle grandi multinazionali globali! La domanda é ma la legge di Pareto iniziale nell’ incipit dopo questa trattazione è stata confutata? Ai poster(i) l’ardua sentenza! In uno dei prossimi articoli cercheremo di capire come fare le stesse cose viste qui, ma lato server analizzando i comandi da impartire a finestra terminale. Ci accorgeremo che il modo di lavorare sarà completamente diverso perche NODE e NPM ci consentono implementazioni veloci e dipendenze strutturate, così tanto che è necessario conoscere l’anatomia del FILE SYSTEM progetto creato al momento della comparsa del famoso package.json! Insomma REACT lato server rappresenta a dir poco uno STRAVOLGIMENTO TOTALE ma dà anche più soddifazioni in termini di risultati di grafica e di funzionalità, tanto da arrivare a valutare seriamente di concentrarsi solo sulla parte SERVER che non è questa statica con agganci a librerie esterne CDN vista oggi, anche se JS NON CAMBIA da entrambi i lati della rete. Infine cosa molto importante per uno sviluppatore di REACT, consultare sempre giorno-notte-colazione-cena la documentazione specifica, in questo caso https://it.reactjs.org/

web design umbria
game development, web design Umbria, web developer Umbria

Aspettando Godot: non é Beckett ma Game Development

Strano, digitando Godot su un motore di ricerca mi aspetterei di trovare informazioni sul teatro dell’ assurdo e https://it.wikipedia.org/wiki/Samuel_Beckett e quindi sullo strano sig. Godot che se ne va in giro a passeggiare con la mascherina nella fase due aspettando qualcuno. Invece il primo risultato della SERP riporta: https://godotengine.org/ il cui claim è guarda un pò proprio un famigliare “Il motore di gioco che hai aspettato“. Ci sono alcune buone notizie immediate. La piattaforma di sviluppo è liberamente usabile senza restrizioni e anche open source! E’ finita l’attesa spasmodica delle nostre teatrali pulsioni! Ha inoltre un vasto eco di appassionati sviluppatori che continuano a far crescere questo potente engine per i giochi. Godot usa un linguaggio di scripting simile a Pyton che si chiama GDScript. I primi passi da fare sono scaricare dal sito indicato l’eseguibile da decomprimere e prendere familiarità con i nodi e le escene e la personalizzazione degli oggetti e dei caratteri. Questa piattaforma segue una logica architetturale a nodi. Godot user interface supporta anche i suoni a corredo creatico e naturalmente consente di creare nemici a piacere e collezioni di oggetto. Tutto questo lo fa con una interfaccia enormemente semplificata rispetto a Unity dove posso anche scegliere di mettere in piedi costruzioni di gioco 3D. I nodi servono a gestire le scene e possiamo mettere in moto delle collection di location che avranno a sostegno quindi dei nodi che come struttura root ramificazione e figli ricorda proprio il DOM dei documenti html manipolabili con javascript. Un nodo può essere associato alla scena quindi e la generazione di fatto crea un file sul file system del progetto con estensione TSCN, per esempio MainScene.tscn. Il modo migliore per capire come funziona la piattaforma è riportare in vita il deprecato FLASH, un portentoso software che qualche anno fa creava fantastiche animazione usando la metafora dello STAGE, dove gli elementi venivano posizionati a livelli uno sopra l’altro. Qui è lo stesso: un nodo potrebbe fare da cornice principale, un altro potrebbe aiutarci l’istanza nemici, un altro potrebbe avere da controllare ostacoli e pericoli etc etc fino a scomporre tutti gli elementi primari che formano la scena che diventa un gigantesco affresco armonico e funzionale. Ad esempio devo creare un elemento nel progetto chiamato PLAYER.TSCN che sarà un nodo figlio del blocco main. Questo giocatore lo posso posizionare con una griglia di precisione disposta sulla destra inserendo dei valori numerici sugli assi X e Y e posso anche decidere di inserire un’ area di collisione sempre gestendone da pannello di controllo INSPECTOR le proprietà. Il programma mi fa istanziare gli oggetti per cui da figlio posso ereditare caratteristiche o proprietà tipiche del papà menzionato. Le griglie di costruzione per le scene e i personaggi sono sagomate millimetricamente per posizionare ad esempio blocchi o ostacoli lungo il cammino dell’ eroe con assoluta precisione. Una volta definite le possibilità di movimento del personaggio giocatore che può saltare usando la gravità e muoversi avanti e indietro per aggirare gli ostacoli possiamo disegnare gli scenari di gioco con i blocchi di piramide o simili messi a disposizione dagli asset-risorse della piattaforma. Certo è che la fase di pianificazione per creare un gioco deve tenere conto di innumerevoli fattori che sono sempre tanti: dobbiamo considerare situazioni in cui l’eroe saltando per esempio raccoglie delle monete e quindi incrementa uno SCORE, oppure situazioni dove un nemico entra in collisione con noi ed esplodiamo o in alternativa ostacoli vaganti con certe caratteristiche di movimento da definire, per cui servirà una FUNZIONE DI RIPRISTINO per continuare il gioco azzerando tutti i progressi. Servirà un dispositivo di ripresa cinematografica attivabile da INSPECTOR che seguirà i movimenti del nostro prode Achille, per cui saltando, correndo ed evitando ostacoli il nostro sguardo è dinamico e segue noi che siamo i protagonisti mentre la location di sfondo scorre. Le dinamiche da prevedere sono sempre tante e complesse: se devo saltare e afferrare due euro intendendo graficamente un doblone d’oro raggiungibile alcuni metri sopra la mia testa che afferro volando, quel nodo al momento del contatto deve ubbidire a una funzione che dissolve il valore della moneta per alimentare il mio contatore e contemporaneamente attivare la possibilità di afferrare il prossimo target da raggiungere sempre saltellando dinamicamente come un canguro. Come se non bastasse al momento della digestione per indicare un successo dovrò richiamare un suono sintomatico che l’operazione di ingurgitamento è stata piacevole. Con Godot tutti questi aspetti della progettazione si possono controllare ma soprattutto alle prime armi la piattaforma ci mette a disposizione con l’import alcuni progetti che si possono vivisezionare e studiare per vedere l’effetto che fa e come sono strutturati. Si possono quindi richiamare delle librerie che hanno oggetti figli che a loro volta diventeranno padri per le nostre mainScene e in questo modo potremmo agganciare dei nodi, richiamare dei valori etc, mettere a disposizioni numerosi metodi per soddisfare le nostre esigenze e anche richiamare delle risorse utili con User Interface per fornire audio tematico per il nostro game! Godot, quello del teatro, ci dispiace ma l’attesa è finita: https://godotengine.org/

ajax, jquery, web developer Umbria

Ajax e JQuery: come dare scacco matto in due mosse!

Fermi tutti! Ajax non è una squadra di calcio! E’ un rivoluzionario oggetto che hanno inserito nei moderni browser chiamato XMLHTTPREQUEST e serve per effettuare chiamate asincrone senza permettere il caricamento della pagina tanto caro a HTTP di vecchio stampo dove l’utente fa una richiesta client e il server singolarmente restituisce una risposta immediata prima di effettuare altre operazioni. Ne consegue che migliora la UI dell’ utente ma non solo l’esperienza in termini di velocità, soprattutto in efficienza visto che mentre in background Ajax si occupa di aggiornare dei dati per esempio senza rifare il rendering della pagina è possibile anche andare oltre in multitasking. E quando Ajax incontra JQuery il risultato finale performante è assicurato, in quanto con la versione semplificata di javascript con poche righe di codice lineari è possibile aggiornare e catturare i dati lato server senza mettere la sveglia per effettuare la nostra prossima operazione. Ma analizziamo un primo esempio dove in virtù di una richiesta effettuata tramite un BUTTON chiedo alla pagina di restituirmi il contenuto di un file testo lato server. Per restare in tema di scacchi supponiamo di chiedere all’ oracolo messo su come esercizio quale apertura sia più frequente nella pratica dei Grandi Maestri di scacchi. Non che ci interessi molto, ma con questo pretesto possiamo iniziare a dare un occhiata a come viene effettuata una chiamata AJAX sfruttando la potenza di esecuzione di JQuery e quali sono i suoi attributi che possiamo utilizzare per decidere se la richiesta deve essere GET o POST (di default è GET), se ci sono dei dati in caricamento, degli errori da gestire per dare un buon esito all’ utente e via dicendo con altri parametri. Prendiamo quindi in esame l’esempio presente all’ indirizzo https://www.farwebdesign.com/ajax_jquery/1/ dove c’è un pulsante che fa una domanda e un campo testo che dopo la pressione esercitata come EVENTO CLICK darà la risposta. Dentro la directory avremo quindi un file TXT, il file JQuery per permettere l’interazione con XMLHTTPREQUEST e il file HTML che avrà il seguente contenuto nel body:

<div id=”contenitore”>
<div id=”contenuto”></div>
<button>Vuoi sapere quale è la difesa più giocata tra i GM? Click here!</button>
</div>

<script>
$(document).ready( // questa riga è standard per permettere prima il caricamento della pagina rispetto ad altre operazioni da effettuare
function(){

$(“button”).click( // questa riga dice che l’elemento BUTTON alla pressione del CLICK eseguirà il contenuto della funzione contenuta
function()
{
$.ajax( // potenza di JQuery! Il metodo ajax permette comunicazioni asincrone
{
url: “berlinese.txt”, // il parametro url serve a collegare la risorsa per attingere ai suoi contenuti
success: function(result) // il parametro success evidenzia un risultato da restituire come risposta alla richiesta
{
$(“#contenuto”).html(result); // qui viene restituito il contenuto appoggiandosi all’ ID del DIV statico dell’ HTML definito come CONTENUTO

},
error: function (request, status, error) // il parametro error gestisce eventuali messaggi di errore sulla richiesta dell’ utente
{
alert(“Errore nella richiesta”); // una finestra semplice che segnala all’ utente che qualcosa è andato storto per esempio se il file testo del server si chiamasse in modo diverso da URL
}

}
);

}

);

});
</script>

Dopo la pressione del pulsante avrò graficamente la mia risposta come in figura ottenuta attraverso un processo lineare senza rendering della pagina: richiesta, elaborazione dei dati seguendo i criteri di lavoro dell’ oggetto xmhttprequest, risposta. Adesso analizziamo una caso dove al posto del file testo mi ritrovo da gestire un file con estensione JSON che sono sequenze di dati formattati in maniera particolare e che si possono validare facilmente come verifica della sintassi con strumenti free presenti in rete come https://jsonformatter.curiousconcept.com/ che si prendono cura di sottolineare eventuali anomalie nella struttura dei dati. Analizziamo quindi il seguente esercizio dedicato all’ attuale campione del mondo di scacchi all’ indirizzo https://www.farwebdesign.com/ajax_jquery/2/ , chi non sa di chi stiamo parlando può cliccare sul pulsante e scoprire chi è questa leggendaria figura. Qui abbiamo uno script decisamente diverso in quanto cambiando la tipologia di fonte di dati ci troviamo nella necessità di spezzare i dati per farli entrare nelle singole celle identificate da un ID poi catturato con il valore grazie a JQuery:

<table>
<tr>
<td>Nome</td>
<td id=”nome”></td>
</tr>
<tr>
<td>Cognome</td>
<td id=”cognome”></td>
</tr>
<tr>
<td>Età</td>
<td id=”eta”></td>
</tr>
<tr>
<td>Federazione</td>
<td id=”federazione”></td>
</tr>
<tr>
<td colspan=”2″><button>Scarica dati</button></td>
</tr>
</table>
<script>
$(document).ready(
function(){

$(“button”).click(function(){

$.ajax(
{
url: “dati.json”,
success: function(result)
{
$(“#nome”).text(result.nome);
$(“#cognome”).text(result.cognome);
$(“#eta”).text(result.eta);
$(“#federazione”).text(result.federazione);
}
}
);
});

}
);

</script>

 

Il risultato ottenuto è quello mostrato, da sottolineare come le istruzioni tipo $(“#nome”).text(result.nome); servano proprio a collegare la fonte dei dati con la cella da agganciare statica presente nell’ HTML. L’analisi del resto rimane sempre la stessa: abbiamo un evento click che scatena il contenuto di una funzione che di fatto aziona un metodo ajax, cattura i dati da un url, verifica il risultato ottenuto e immette questi dati nella parte client tramite l’identificazione ID consentita da JQuery tramite il famoso cancelletto #. Quindi nulla di particolarmente impegnativo. Finora abbiamo analizzato però solo casi in cui di default viene usato solo la trasmissione dati GET che sappiamo non essere ideale ad esempio quando dobbiamo gestire quelle situazioni in cui abbiamo utente e password che devono rimanere dati nascosti quando transitano in rete. Abbiamo disponibile nell’ oggetto xmlhttprequest dove il parametro type che ci consente di specificare la modalità di trasmissione dei dati, ossia nel caso che ci appresteremo ad analizzare quindi POST. Analizziamo quindi questa nuova situazione presente all’ indirizzo https://www.farwebdesign.com/ajax_jquery/3/

<div id=”contenitore”>
<input type=”text” name=”username” placeholder=”Username”/>
<input type=”password” name=”password” placeholder=”Password”/>
<button>Login</button>
</div>

<script>
$(document).ready(
function(){
$(“button”).click(function(){
username=$(“[name=username]”).val();
password=$(“[name=password]”).val();
$.ajax(
{
url:”login.php”,
type: “POST”,
data: {“username”:username, “password”:password},
success:function(result)
{
if (result==’OK’)
{
alert(“Puoi entrare”);
$(“[name=username]”).val(”);
$(“[name=password]”).val(”);
}
else if (result==’KO’)
{
alert(“Credenziali errate”);
}
else
alert(“Errore”);
}

}
);
});
});

</script>

Questa volta il file punta sul file login.ph che contiene al suo interno i criteri con cui l’utente dovrà o non dovrà ottenere il suo scopo, che si presuppone essere quello di atterrare su un’ area riservata.L’ultimo caso analizza invece un file JSON con dati multipli da caricare dove la creazione della lista nel suo elemento LI avviene ciclando con un EACH, per ottenere una stringa composita che verrà infine stampata a video usando il metodo APPEND

<div id=”centrale”>
<ul>
</ul>
</div>
<script>
$(document).ready(
function(){
$.ajax(
{
url:”persone.json”,
success: function (result)
{
lista=$(“ul”);
$.each(
result, function(k,v)
{
li=$(“<li>”);
li.text(v.nome+” “+v.cognome+”, “+v.eta+
” anni (“+v.citta+”)”);
lista.append(li);
}
);
}
}
);
});
</script>

dove il contenuto del file JSON sarà:

[
{
“nome”:”Giulio”,
“cognome”:”Rossi”,
“eta”: 25,
“citta”: “Genova”
},
{
“nome”:”Enea”,
“cognome”:”Verdi”,
“eta”: 33,
“citta”: “Torino”
},
{
“nome”:”Elisa”,
“cognome”:”Bianchi”,
“eta”: 19,
“citta”: “Roma”
},
{
“nome”:”Mario”,
“cognome”:”Bianchi”,
“eta”: 57,
“citta”: “Roma”
},
{
“nome”:”Silvio”,
“cognome”:”Gialli”,
“eta”: 28,
“citta”: “Napoli”
},
{
“nome”:”Marina”,
“cognome”:”Gialli”,
“eta”: 21,
“citta”: “Napoli”
}
]

web developer Umbria
oop, php, web developer Umbria

PHP e OOP: membri statici e costanti all’ interno di una classe

Articoli precedenti sullo stesso tema OOP in PHP nei portali umbriaway:

https://umbriawayinfo.wordpress.com/2019/04/07/programmazione-procedurale-oppure-oop-this-is-the-problem/

https://umbriawaypotenzia.wordpress.com/2019/04/07/php-versione-sette-introdotte-nuove-direttive-per-trasformare-il-linguaggio-in-fortemente-tipicizzato/

https://umbriawaysemplifica.wordpress.com/2019/04/08/ambito-di-visibilita-delle-variabili-in-php-public-protected-private/

https://umbriawaytarget.wordpress.com/2019/04/08/php-oop-magic-method-e-costruttori/

https://umbriawayvalorizza.wordpress.com/2019/04/08/warning-ambito-di-visibilita-publica-delle-classi-encapsulation-e-sicurezza-metodi-getter-e-setter/

https://umbriawayvendita.wordpress.com/2019/04/09/php-e-oop-magic-method-__autoload-ereditarieta-pianificazione-iniziale-con-uml/

https://umbriawaynoir.wordpress.com/2019/04/09/php-e-oop-overriding-e-polimorfismo/

web developer UmbriaEsiste un legame strettissimo tra le proprietà di una classe e l’istanza di una classe, nel senso che posso diversificare i valori tra le due classi. Posso anche impostare degli atributi specifici nella classe, esattamente come avviene in un ostello quando la cucina o certi locali sono in uso comune. Posso quindi identificare una proprietà o un metodo specifico definindolo in un certo modo con una certa sintassi tenendo presente che tutto quello che accade sulle istanze ha una ripercussione diretta su tutti gli oggetti che hanno quella caratteristica. A livello di comprensione è quello che accade nel procedurale con le variabili globali di PHP, dove tutte le variabili che hanno quella caratteristica subiranno le stesse modifiche in tutte le righe del programma. Sostanzialmente certe tipologie di variabili fanno riferimento alla classe originaria e non all’ istanza che ne scaturisce dall’ utilizzo della parola chiave NEW. Ad esempio all’ interno di una classe contatore potrei avere bisogno di una inizializzazione fissa nell’ istruzione protected static $contatore=0; in quanto il programma ha proprio questa caratteristica che non deve mutare neanche all’ esterno. Ma se volessi modificare da fuori il valore di questa variabile potrei farlo usando la notazione pattern singleton dei due punti che mi faranno accedere. La parola STATIC caratterizza una specificità nella classe, ossia è come se imponesse a tutti quelli che utilizzano la classe genitore o chi istanzia nuove classi che quella variabile ha quel valore che deve rimanere immutabile. Quindi userò una sintassi tipo:

self::$ proprietà oppure $metodo

A questo punto diamo un occhiata alla classe sorgente e quella derivata come si trasforma e come diventa:

/*

file Hits.php

<?php
class Hits {
protected $ip;
protected static $numhits = 0;
public function __construct() {
self::$numhits++;
}
public function totalHits() {
return self::$numhits;
}
public function setIp() {
$this->ip = $_SERVER[‘REMOTE_ADDR’];
$this->saveIp();
}
private function saveIp() {
// salvo dato su database
}
}

file di output index.php:

<?php
require_once “Classi/Hits.php”;
$hit = new Hits();
echo $hit -> totalHits();
echo “<br>”;
$hit = new Hits();
echo $hit -> totalHits();

file Hits1.php

<?php
class Hits {
protected $ip;
protected static $numhits = 0;
public static function increment() {
return self::$numhits++;
}
public function totalHits() {
return self::$numhits;
}
public function setIp() {
$this->ip = $_SERVER[‘REMOTE_ADDR’];
$this->saveIp();
}
private function saveIp() {
// salvo dato su database
}
}

file di lettura index1.php

<?php
require_once “Classi/Hits1.php”;
$hit = new Hits();
echo $hit::increment();
echo “<br>”;
Hits::increment();
echo $hit->totalHits();

*/

Quindi con questi attributi specifici nella classe, abbiamo visto la parola chiave STATIC, definisco una sorta di variabile globale che ha una sua costante appartenenza con la classe originaria. Quel metodo non apparterrà quindi all’ istanza che verrà creata ma sarà una particolarità della classe originale e ci potrò accedere solo usando una sintassi tipo self::$ proprietà oppure $metodo che avrà ripercussioni su tutte le aree del progetto che utilizzano quella proprietà. Non posso manipoalre queste variabili globali con la parola chiave THIS che fa riferimento all’ oggetto corrente, mentre abbiamo detto che una istanza non si porta dietro le caratteristiche esclusive della classe originaria.La parola chiave self fa riferimento alla classe di origine stessa.