Andrà tutto bene: se conosci Typescript con Angular e Ionic!

Va bene la curva per imparare Angular non è proprio una passeggiata quindi se ne deduce che andrà tutto male? Niente affatto. Anche se Angular sembra stato creato volutamente per scoraggiare qualsiasi aspirante programmatore che vorrebbe spedire satelliti su Marte, di fatto c’è anche una bella notizia: esiste anche REACT come framework che certamente sembra promettere meno patemi esistenziali e in ogni caso quello che IONIC promette con i suoi cinque milioni di utenti appassionati di applicazioni mobile IBRIDE sparsi su duecento nazioni non sembra precluso a tutti gli individui di buona volontà, dal momento che IONIC stesso fornisce una abbondante documentazione e anche linee guida per spiegare la struttura base di una APP ibrida come all’ indirizzo https://ionicframework.com/docs/react/your-first-app/ dove è possibile passo a passo la creazione di una APP completa con REACT tramite CLI o finestra terminale disponibile anche all’ interno di un editor come Visual Studio Code; conviene quindi registrarsi a https://ionicframework.com/ e dare un occhiata alle risorse che sono all’ interno della nostra dashboard. Partiamo dalle favole dei fratelli Grimm quando iniziavano con incipit “c’era una volta una APP nativa che faceva mangiare la polvere a una APP ibrida sua antagonista“…certo una volta era proprio così perchè sappiamo che le APP native hanno il vantaggio di accedere a maggiori risorse e con facilità riescono a gestire servizi come quello della fotocamera per esempio. Oggi però la tecnologia sta facendo passi spaventosi e le risorse da gestire anche nelle APP ibride sono sempre più sopportate da sempre più potenti chip in evoluzione. Quindi se ne deduce che davvero ci conviene partire da https://ionicframework.com/docs/intro/cli per iniziare la nostra avventura conoscitiva di primo livello. Va bene ma io non voglio avere niente a che fare con quello strano dialetto di javascript come si chiama, a si Typescript e neanche con il monolitico Angular. Niente paura al momento dell’ installazione globale che avviene con npm install -g ionic@latest la CLI ci dà la possibilità di scegliere se vogliamo usare Angular o React. React è un framework che ha ispirato lo sviluppo di Angular e quindi non solo sulla carta è più semplice visto che abbiamo provato a installare due progetti diversi su desktop e abbiamo concluso che la struttura di quella Angular è molto più nutrita di risorse e complessa con i suoi riferimenti a scatole grandi che governano scatole piccole e il neofita fa certamente fatica a capire cosa governa cosa e perchè le dipendenze si muovono all’ unisono come un motore di una Ferrari. Invece la struttura delle cartelle di un progetto nato con REACT è molto più comprensibile, almeno a livello teorico visto che comunque la complessità di gestione per andare a scrivere COSA in DOVE rimane, ma seplificata tantissimo rispetto al suo antagonista framework. Abbiamo testato anche una creazione di APP in entrambe le direzioni e seguendo il tutorial ci siamo spinti molto avanti mentre con Angular e la moltiplicazione dei file abbiamo preferito fermarci, soddisfatti almeno di essere riusciti a vedere una primissima APP all’ avanguardia dal nome ciao mattino lode a te che hai l’oro in bocca, ovviamente una parodia al più classico primo programma da sempre divulgato dagli accademici insegnanti come ciao mondo! Quindi per entrare dal vivo di questa primordiale creazione ecco che cosa è successo. Dopo aver liquidato la nostra installazione globale con npm install -g ionic@latest e sperimentato comandi di visione e interrogazione versione come npm –ionic version e ionic -v, siamo partiti in quarta sparati seguendo quello che prometteva il comando canonico ionic start ciaomattino blank che ha creato una cartella progetto con una pagina vuota, volendo al posto di blank ci sono altre strutture disponibile già preimpostate all’ apertura del progetto, quelle per la gallery, per un blog e altro. Fatte tutte le installazioni di rito c’è da sbattere il grugno sulla struttura delle directory per cui bisogna sapere chi è coinvolto a livello di recitazione e quali sono gli scenari disponibili per gli attori nel file folder. Per l’opzione Angular ecco quello che abbiamo visto come criticità per chi non ha mai visto nulla:

  • il tslint.json ha a che fare con la parte di verifica delle regole javascript
  • tsconfig.json file di configurazione di typescript con dipendenze sui moduli di lavoro ad esempio noi all’ interno del json scopriremo che lavoreremo all’ interno delal cartella SRC
  • il file di configurazione vero e proprio con le dipendenze di moduli esterni è invece il file in formato json package.json dove posso anche inserire informazioni personali sull’ applciazione e l’autore ed eventuali riferimenti link
  • il file .gitignore si preoccupa di non far fare troppe volte il lavoro di versioning troppe volte, ma mantiene al calduccio quei file nella root che rimangono invariati e che non vanno lavorati
  • poi abbiamo la cartella www dove a fine lavoro inseriremo il nostro lavoro di pubblicazione e dove si trova il fatidico index.html
  • poi ci saranno i moduli esterni di IOS in node_modules ma alla fine della giornata noi avremmo passato tutto il tempo dentro la cartella SRC, che è quella dove dobbiamo focalizzarci, dove abbiamo un file di origine nell’ index.html che suona così:

<head>
<meta charset=”utf-8″ />
<title>Ionic App</title>

<base href=”/” />

<meta name=”color-scheme” content=”light dark” />
<meta name=”viewport” content=”viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no” />
<meta name=”format-detection” content=”telephone=no” />
<meta name=”msapplication-tap-highlight” content=”no” />

<link rel=”icon” type=”image/png” href=”assets/icon/favicon.png” />

<!– add to homescreen for ios –>
<meta name=”apple-mobile-web-app-capable” content=”yes” />
<meta name=”apple-mobile-web-app-status-bar-style” content=”black” />
</head>

<body>
<app-root></app-root>
</body>

da sottolineare l’importanza del tag <app-root> che è il punto di ingresso della nostra applicazione. A questo punto diamo una occhiata alla nostra APP dando il comando ionic serve (sulla directory progetto) per ottenere una risposta di apertura pagina che nel nostro caso è avvenuta sulla porta 8100 localhost: http://localhost:8100/home … da qui a immaginare la modifica di un testo sulla home e rivendicare il diritto di aver creato la prima APP con IONIC e TYPESCRIPT ANGULAR il passo è stato facilmente colmato, è bastato individuare i file critici che contenevano il testo per modificarli, come si evince dalla gallery inserita a fine articolo. Firefox nelle sue opzioni ispeziona documento è un broiwser che mette a disposizione in alto a destra l’opzione mobile che aprendosi apre un ulteriore ventaglio di possibilità sui settaggi e sulle modalità di visualizzazione e risolzione, posso in sostanza scegliere le simulazioni della mia APP sui dispositivi IOS o ANdroid a mia preferenza e anche scegliere se optare per una visualizzazione di tipo landscape orizontale quindi. Del resto lo sviluppo per creare queste APP ibride con IONIC non richiede grandi strumenti se non aver superato il trauma delle istruzioni da riga di comando che accompagnano l’aspirante programmatore nelle sue scorribande esplorative. Basta aver un browser, un editor, una finestra terminale o la CMD per chi ha Windows come sistema operativo e il tutto viene archiviato come allestimento di ambiente di lavoro. Certamente capire tutte le dipendenze e il modo inc ui possiamo attingere alle risorse non è qualcosa che si può imparare in un giorno. Sopra quella cartella SRC bisogna fare le nottate, aspetto che esulava dal notro intento primario al momento, che era la curiosità di dare un occhiata a grandi linee senza troppi patemi a qualcosa comunque di complesso ma anche all portata di chiunque abbia voglia di stare con costanza e intensità sopra a dei progetti pratici che necessitano di problemi concreti da risolvere. Se IONIC dispone di cinque milioni di affiliati (il software è gratuito ndr) un motivo ci sarà, non è che KOTLIN e JAVA o l’alternativa IOS come linguaggio per le APP native siano miraggi più facilmente raggiungibili. Esistono anche altri modi per mettere in piedi APP IBRIDE, Cordova e PhoneGap rispettivamente https://cordova.apache.org/ e https://phonegap.com/ sono comunque strumenti importanti che meritano di essere esplorati, e quindi ci siamo già ripromessi di non allontanarci troppo dalla loro linea di sviluppo!

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo di WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione /  Modifica )

Google photo

Stai commentando usando il tuo account Google. Chiudi sessione /  Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione /  Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione /  Modifica )

Connessione a %s...