Ottimizzare lo sviluppo mobile con React Native: learn once, write anywhere – 9 i componenti nativi – componenti riutilizzabili

Combinazione di componenti

Quando si crea un’app mobile è spesso necessario riutilizzare determinati elementi dell’interfaccia utente. L’aggiunta di stili direttamente ai componenti senza raggruppare questi elementi può portare a incongruenze. È buona norma creare componenti personalizzati che applicano questo stile all’interno delle app. La creazione di componenti personalizzati è simile a React. Possiamo creare una funzione e renderla come un componente. Quando si crea un componente personalizzato è importante pensare alle funzionalità che deve supportare. I componenti con solo una o poche funzionalità sono più facili da riutilizzare in più posizioni

import React from 'react';
import { View, Text } from 'react-native';

const App = () => (
  <View style={{ flex: 1, justifyContent: 'center' }}>
    <Box color="red" />
    <Box color="green" />
    <Box color="blue" />
  </View>
);

export default App;

export const Box = (props) => (
  // Move a box `View` component here
  <View style={{ width: 100, height: 100, backgroundColor: props.color }} />
);

Spezzare il progetto in componenti riutilizzabili più piccoli è soggettivo. Non esiste una soluzione “taglia unica”. Per saperne di più sul processo di scomposizione del design, leggi la guida Thinking in React: https://reactjs.org/docs/thinking-in-react.html. Iniziamo personalizzando i nostri precedenti esempi di box. Invece di applicare gli stili in linea ogni volta che abbiamo bisogno di un riquadro, sposta una singola view con dimensioni fisse e colore di sfondo nel componente Riquadro. Abbiamo un componente personalizzato riutilizzabile! Ora abbiamo bisogno di aggiungere una proprietà per permettere di cambiare il colore della scatola. Aggiungi una proprietà denominata color al componente box che imposta il colore di sfondo. Con questa proprietà, supportiamo la modifica del colore nelle singole caselle. Ora implementa questo componente Box nella nostra app utilizzando gli stessi colori rosso, verde e blu

componenti riutilizzabili

Ripasso sui componenti nativi

Il componente View può essere utilizzato per creare layout reattivi utilizzando flexbox o aggiungere uno stile di base ai componenti nidificati. Il componente Text visualizza il testo. Su Android e iOS, tutte le stringhe di testo devono essere racchiuse in una di queste. Il componente Immagine visualizza le immagini. Possono essere referenziati utilizzando un collegamento https://, un riferimento file:// locale, una stringa con codifica Base64 o un’immagine importata come modulo con require. Il componente ScrollView è un contenitore “visibile” con l’aggiunta della funzionalità di scorrimento. Nella maggior parte dei casi, non hai bisogno di scorrere. Il componente Pulsante o Button viene utilizzato per le interazioni “clic” o “stampa”. Il componente TextInput viene utilizzato per acquisire l’input dell’utente. I componenti possono essere combinati in componenti personalizzati riutilizzabili

Ottimizzare lo sviluppo mobile con React Native: learn once, write anywhere – 8 i componenti nativi – TextInput

Componente TextInput

La maggior parte delle app richiede agli utenti di fornire contenuti, come scrivere tweet su Twitter. Il componente TextInput viene creato per acquisire input testuali e numerici. Questo componente è meglio comparabile con l’elemento HTML . Per ascoltare le modifiche di input dall’utente, possiamo utilizzare il gestore di eventi onChangeText. Questo gestore di eventi riceve l’input come una stringa, fornita dall’utente

import React, { useState } from 'react';
import { View, Text, TextInput } from 'react-native';

const App = () => {
  const [name, setName] = useState('');

  return (
    <View style={{
      flex: 1,
      alignContent: 'center', 
      justifyContent: 'center', 
      padding: 16,
    }}>
      <Text style={{ marginVertical: 16 }}>
        {name ? `Hi ${name}!` : 'What is your name?'}
      </Text>
      <TextInput
        style={{ padding: 8, backgroundColor: '#f5f5f5' }}
        onChangeText={text => setName(text)}
        secureTextEntry
      />
    </View>
  );
};

export default App;

Se text => viene impostato a NULL come nell’ immagine di esempio tutto il meccanismo di cattura del TextInput non funziona. Quando l’utente fornisce il proprio nome, non accade nulla se non vado a cambiare l’istruzione:

   onChangeText={text => setName(text)}

che usiamo per connettere TextInput al nostro stato del nome tramite il gestore di eventi onChangeText.

in questo caso con il text impostato a null non succede nulla mentre con text => setName(text) e `Hi ${name}!` si risolve

Ottimizzare lo sviluppo mobile con React Native: learn once, write anywhere – 7 i componenti nativi – Button

Interazione con i pulsanti

Componente pulsante

Oltre a tutti i componenti visivi, ogni app richiede componenti interattivi. Una delle interazioni più frequenti è un’interazione “clic” o “stampa”. La maggior parte dei componenti principali supporta le interazioni con la stampa. Ma c’è un componente creato appositamente per gestire semplici pressioni: il componente Button. Sebbene il pulsante sia molto limitato nella personalizzazione dello stile, è perfetto per scopi di apprendimento o prototipazione. Per catturare l’utente che fa clic sul pulsante, è necessario utilizzare il gestore di eventi onPress. Questo è chiamato onPress perché di solito non c’è un mouse disponibile su un dispositivo mobile:

<Button
  title="Profile page"
  onPress={() => navigate('profile')}
/>

Le semplici interazioni possono essere qualsiasi cosa, dall’invio di un modulo alla navigazione in una pagina diversa. Iniziamo sperimentando il gestore di eventi onPress sul Button. Questo gestore di eventi è una proprietà obbligatoria sul Button, ecco perché ha un gestore che restituisce null. In questo codice, vogliamo tenere traccia di quante volte il pulsante viene premuto dall’utente. Modificare il gestore dell’evento onPress per aumentare la variabile di stato del conteggio premuto ogni volta che si preme il pulsante.

import React, { useState } from 'react';
import { Button, Text, View } from 'react-native';

const App = () => {
  const [pressedCount, setPressedCount] = useState(0);

  return (
    <View style={{ flex: 1, justifyContent: 'center' }}>
      <Text style={{ margin: 36 }}>
        {pressedCount > 0
          ? `The button was pressed ${pressedCount} times!`
          : 'The button isn\'t pressed yet'
        }
      </Text>
      <Button
        title='Press me'
        onPress={() => setPressedCount(pressedCount + 1)}
        disabled={pressedCount >= 3}
      />
    </View>
  );
};

export default App;

Eccezionale! Ora prova a premere il pulsante. Il testo dovrebbe riflettere quante volte hai premuto il pulsante. Questo esempio dimostra i principi fondamentali dei gestori di eventi, i metodi invocati dall’interazione dell’utente. Questi gestori di eventi possono anche eseguire azioni più grandi, come passare a un’altra schermata o inviare dati a un’API. A volte è necessario disabilitare determinate interazioni dell’utente quando il gestore dell’evento sta eseguendo un’attività più grande. L’invio di dati a un’API dovrebbe terminare abbastanza rapidamente. Sfortunatamente, a volte le connessioni Internet non sono eccezionali e la richiesta HTTP può richiedere un paio di secondi. La disabilitazione del pulsante per evitare di inviare i dati due volte durante questo periodo può migliorare l’esperienza dell’utente. Aggiungiamo una proprietà al nostro Button che disabilita il Button dopo averlo premuto 3 o più volte con disabled={pressedCount >= 3}:

      <Button
        title='Press me'
        onPress={() => setPressedCount(pressedCount + 1)}
        disabled={pressedCount >= 3}
      />

e infine vediamo l’effetto che fa:

il pulsante button in action

Ottimizzare lo sviluppo mobile con React Native: learn once, write anywhere – 6 i componenti nativi – ScrollView

scrollare che passione

Componente ScrollView

Dopo aver visto all’ indirizzo https://umbriawaycultura.wordpress.com/ componenti nativi come viste, text e image adesso possiamo alle aree scrollabili con il componente nativo ScrollView. La creazione di contenuti scorrevoli sul Web è abbastanza semplice. Devi solo applicare una larghezza e un’altezza fisse a un contenitore per rendere scorrevole il contenuto fuori dai limiti. Con lo sviluppo nativo, questo richiede un po’ più di un componente View con dimensioni fisse. I componenti della vista non sono scorrevoli in Expo e React Native. Il rendering del contenuto scorrevole richiede calcoli aggiuntivi che potrebbero compromettere le prestazioni se applicati a tutti i componenti della vista. Expo e React Native hanno diversi componenti scorrevoli che possiamo usare, come ScrollView. ScrollView ci consente di gestire e personalizzare completamente la modalità di scorrimento del contenuto. Iniziamo con il rendering di un titolo e tre riquadri, con colori diversi, nella nostra app. Le caselle dovrebbero essere contenute all’interno di un componente Visualizza, questa sarà la nostra area scorrevole

import React from 'react';
import { ScrollView, Text, View } from 'react-native';

const App = () => (
  <View style={{ flex: 1, justifyContent: 'center' }}>
    <Text style={{ fontSize: 24, textAlign: 'center' }}>
      Scroll me!
    </Text>
    <View style={{ height: 400, backgroundColor: '#e5e5e5' }}>
      {/* This is our scrollable area */}
      <ScrollView vertical>
        <View style={{ width: 300, height: 300, backgroundColor: 'red' }} />
        <View style={{ width: 300, height: 300, backgroundColor: 'green' }} />
        <View style={{ width: 300, height: 300, backgroundColor: 'blue' }} />
      </ScrollView>
    </View>
  </View>
);

export default App;

da notare l’istruzione in alto:

import { ScrollView, Text, View } from 'react-native';

L’anteprima è effettivamente scorrevole. Mostra anche tutte le nostre aree, anche quelle che dovrebbero essere “fuori limite”. Questo perché si tratta di un’anteprima web in cui il componente View viene tradotto in un elemento div, che è scorrevole per impostazione predefinita, sul web. Se provi questo codice su un dispositivo mobile, il contenuto NON è scorrevole. Aggiungiamo una ScrollView all’interno della nostra area “scorribile” dove vogliamo scorrere il contenuto. Nel nostro caso, le aree colorate sono il contenuto scorrevole. Da notare inoltre l’istruzione:

  <ScrollView vertical>

che può diventare:

      <ScrollView horizontal>

grazie a questi settaggi possiamo decidere se scrollare in verticale o in horizontal. Per approfondimenti fare sempre riferimento alla documentazione ufficiale https://reactnative.dev/docs/scrollview

Ottimizzare lo sviluppo mobile con React Native: learn once, write anywhere – 5 i componenti nativi – image

react native: si apre un mondo

Componente nativo Image

Quasi tutte le app visualizzano immagini. Questo contenuto può essere renderizzato in React Native usando il componente Image. È simile all’elemento HTML , ma il componente Immagine ha più funzionalità. Una delle funzionalità aggiuntive di è la possibilità di caricare immagini da diverse fonti. Potrebbe essere un collegamento https:// accessibile pubblicamente, un riferimento file:// locale, una stringa con codifica Base64 o un’immagine importata come modulo con require. Ciascuna delle fonti di immagini ha i suoi vantaggi. Si possono utilizzare due metodi: utilizzare immagini da URL HTTP e immagini importate localmente. Dobbiamo scrivere Image come componente a chiusura automatica. Al contrario di View, non ammette child. Il componente Immagine può essere stilizzato proprio come il componente Visualizza, utilizzando la proprietà style

import React from 'react';
import { Image, View } from 'react-native';

const App = () => (
  <View style={{ flex: 1, justifyContent: 'center' }}>
<Image source={{ uri: 'https://example.com/cool-image.jpg' }} />
  </View>
);

export default App;

questo per quanto riguarda gli agganci in rete, ma se ho una immagine in locale?

import React from 'react';
import { Image, View } from 'react-native';

const image = require('./react-native.jpg');

const App = () => (
  <View style={{ flex: 1, justifyContent: 'center' }}>
    <Image
      source={image}
      style={{ width: 100, height: 100 }}
    />
  </View>
);

export default App;

L’origine dell’immagine dell’URL HTTP pubblico è la più flessibile di tutte le origini. Fornendo l’URL, React Native scaricherà e renderà l’immagine. Ma su connessioni Internet più lente, questo potrebbe richiedere del tempo. Possiamo migliorare questo tempo di caricamento incorporando immagini senza la nostra app creata. Ciò ridurrà notevolmente il tempo di caricamento perché non è necessario scaricare prima l’immagine. Per fare ciò, importa un’immagine come un file JavaScript standard con require(…) o import. Nel nostro spazio di lavoro, abbiamo un’immagine chiamata ./react-native.jpg. Importiamo quell’immagine usando require e impostiamola come sorgente nel nostro componente Immagine. Per approfondimenti https://reactnative.dev/docs/image

Ottimizzare lo sviluppo mobile con React Native: learn once, write anywhere – 4 i componenti nativi – text

Prosegue il nostro viaggio con i componenti nativi all’ indirizzo https://umbriawaycultura.wordpress.com/ e a questo punto abbiamo assimilato l’importanza delle viste – contenitore. Ora non ci resta che approfondire di più il concetto di testo, la centratura, come si formatta, come applico gli stili etc etc. Poiché Expo e React Native traducono i componenti nella loro controparte nativa, non sono esattamente simili al semplice React. Con il web, puoi eseguire il rendering del testo in qualsiasi punto del documento senza aggiungere elementi principali. Su piattaforme native come Android e iOS, ciò non è possibile. Per eseguire il rendering del testo su Android e iOS, la stringa deve essere racchiusa in un componente di testo. Con questo componente è possibile eseguire il rendering e lo stile del testo. Può anche ereditare lo stile da un componente di testo padre, perfetto per enfatizzare determinate parole. Per approfondimenti https://reactnative.dev/docs/text

import React from 'react';
import { View, Text } from 'react-native';

const App = () => (
  <View style={{ flex: 1, justifyContent: 'center',alignItems:'center' }}>
   <Text>Prove tecniche di trasmissione</Text>
  </View>
);

export default App;

In questo esempio stiamo centrando il testo, per la dimensione verticale ci pensa la proprietà justifyContent mentre per metterlo al centro della linea orizzontale ci pensa la proprietà alignItems. Da notare come il tag TEXT aviluppi il testo senza formattarlo. Vediamo un caso ora dove posso formattare il testo:

import React from 'react';
import { View, Text } from 'react-native';

const App = () => (
  <View style={{ flex: 1, justifyContent: 'center',  alignItems:'center' }}>
    <Text style={{ fontSize: 16 }}>Il <Text style={{ fontWeight: 'bold' }}>gatto</Text> miagola per la fame</Text>
  </View>
);

export default App;
formattare il testo con il componente nativo Text

Da notare come è stato applicato il font che estende le sue proprietà su tutto il testo mentre vi é all’ interno della stringa una nidificazione per evidenziare un grassetto.

Ottimizzare lo sviluppo mobile con React Native: learn once, write anywhere – 3 i componenti nativi – view

i componenti nativi

All’ indirizzo https://umbriawaycultura.wordpress.com/ dopo aver affrontato una prima overview e costruito la nostra prima applicazione, la classica “ciao mondo” siamo ormai pronti per studiare i componenti messi a disposizione dal framework react-native. In Expo e React Native, i componenti vengono tradotti in componenti nativi per la piattaforma su cui è in esecuzione. Per aiutarti a iniziare, React Native fornisce un set di componenti pronti all’uso. Questi componenti sono chiamati “componenti principali” e la maggior parte di essi ha implementazioni Android e iOS integrate. Puoi importare questi componenti dal pacchetto react-native. Nei post precedenti abbiamo già importato i componenti principali di View e Text. Durante i successivi studi, approfondiremo View, Text, Image, Button, TextInput e ScrollView. Questi componenti sono essenziali per ogni app Expo e React Native.

Ora torniamo ad analizzare un semplice frammento di codice:

import React from 'react';
import { View, Text } from 'react-native';

const App = () => (
  <View style={{ flex: 1, justifyContent: 'center' }}>
  <Text>
voglio la moglie ubriaca, l'uva sulla vigna e la botte piena
  </Text>
  </View>
);

export default App;

la parte superiore ci dice molto sulla tecnologia che stiamo utilizzando:

import React from 'react';
import { View, Text } from 'react-native';

qui ad esempio stiamo importando come componenti le viste e i testi. A questo punto sorge spontanea la domanda: quali sono i componenti nativi basici messi a disposizione dal framework?

  • Vew
  • Text
  • Image
  • TextInput
  • ScrollView
  • StyleSheet
  • Button

Ognuno di questi componenti ha delle caratteristiche che vanno studiate prese singolarmente, iniziamo quindi a capire dei principi basici. Il cuore di una applicazione REACT è la VISTA che consente quindi NIDIFICAZIONI con altri elementi. Una vista senza STILE è come un DIV invisibile in HTML: per renderlo visibile occorre definire un oggetto stile visto che REACT non supporta i CSS ma gli oggetti JavaScript sì! React Native supporta FLEXBOX per cui grazie a questa risorsa possiamo impaginare i nostri elementi sulla pagina. Per esempio analizziamo il seguente codice:

nidificazione con allineamento centrale rispetto alla linea horizontal

Intanto qui si vede la forza della vista a tutti gli effetti in quanto nidificando due viste, una che serve come container e l’altra che definisce il nostro oggetto visibile, abbiamo un allineamento al centro della pagina rispetto all’ asse X e questo si ottiene grazie alla proprietà FLEX alignItems: ‘center’, ma a questo punto se volessi allineare rispetto al contenuto sempre al centro come faccio?

allineamento verticale

qui ho usato la proprietà di FLEX justifyContent: ‘center’, ne consegue che se volessi questo oggetto al centro userò quindi la seguente sintassi:

ossia ho combinato le due proprietà viste in precedenza per centrare alla perfezione il mio oggetto nella pagina! Sarebbe una follia limitarsi a questo esempio per spiegare una vista, proviamo per esempio a includere anche un altro quadrato con colore diverso:

import React from 'react';
import { View } from 'react-native';

const App = () => (
  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
    <View style={{ width: 100, height: 100, backgroundColor: 'red' }} />
    <View style={{ width: 100, height: 100, backgroundColor: 'blue' }} />
  </View>
);

export default App;

come si può notare gli oggetti con js che evoca i componenti nativi di react sono racchiusi tra parentesi graffe doppie {{ }} perchè abbiamo detto che per definire gli stili dobbiamo aggirare l’ostacolo del framework che li riconosce solo come oggetti

Possiamo anche studiare all’ indirizzo https://reactnative.dev/docs/view dove ci ritroviamo il seguente esempio:

import React from "react";
import { View, Text } from "react-native";

const ViewBoxesWithColorAndText = () => {
  return (
    <View
      style={{
        flexDirection: "row",
        height: 100,
        padding: 20
      }}
    >
      <View style={{ backgroundColor: "blue", flex: 0.3 }} />
      <View style={{ backgroundColor: "red", flex: 0.5 }} />
      <Text>Hello World!</Text>
    </View>
  );
};

export default ViewBoxesWithColorAndText;

che produce graficamente:

esercizi di stile

da notare qui la proprietà flexDirection che incanala la disposizione degli elementi in un senso piuttosto che in un altro. Qui per quanto riguarda un componente espresso da una funzione, ma volendo posso anche ottenere lo stesso con la definizione di una classe e una diversa sintassi:

import React, { Component } from "react";
import { View, Text } from "react-native";

class App extends Component {
  render() {
    return (
      <View
        style={{
          flexDirection: "row",
          height: 100,
          padding: 20
        }}
      >
        <View style={{ backgroundColor: "blue", flex: 0.3 }} />
        <View style={{ backgroundColor: "red", flex: 0.5 }} />
        <Text>Hello World!</Text>
      </View>
    );
  }
}

export default App;

Siamo dunque alle prese con una semplice sperimentazione di codice, dove occorre spostare, modificare, cambiare e combinare gli elementi per costruire la nostra superview composta da elementi nidificati e qui serve solo pratica! Anche Flexbox è qualcosa che va studiato https://reactnative.dev/docs/flexbox e le combinazioni per disporre gli elementi sono così estese che sarebbe presuntuoso proporre in questo post tutte le combinazioni possibili per cui al momento ci conviene ricaricare le batterie per passare al quarto approfondimento tematico che parlerà del componente TEXT!

Ottimizzare lo sviluppo mobile con React Native: learn once, write anywhere – 2 entrare nel vivo

si entra nel vivo delle dinamiche di sviluppo

Vantaggi e svantaggi usando REACT NATIVE con EXPO

Nella prima puntata con digital marketing umbria presente all’ indirizzo https://umbriawaycultura.wordpress.com/ abbiamo preparato il terreno per capire come funziona react native per lo sviluppo mobile e abbiamo avuto anche tempo per inquadrare meglio quali sono i vantaggi e gli svantaggi della tecnologia. Parliamo prima dei vantaggi. Expo e React Native sono strumenti ideali quando è necessario eseguire un’app su più piattaforme, accedere direttamente a funzionalità native e/o avere solo uno sviluppo web di base e una conoscenza della piattaforma nativa. Ma abbiamo anche uno svantaggio rilevante. Expo e React Native non sono strumenti ideali quando hai bisogno di prestazioni assolute, funzionalità all’avanguardia appena rilasciate dalla piattaforma e/o applicazioni complesse di grandi dimensioni. Detto questo per l’uso del mobile che vogliamo farne noi va benissimo e quindi in questa seconda puntata entreremo nel vivo della configurazione ambiente prima di gettarci a capofitto nello sviluppo

Entrare nel vivo nella creazione dell’ APP EXPO: la configurazione locale con React Native

Ora che dopo la prima puntata trascorsa in compagnia di digital marketing Umbria sappiamo un po’ come funzionano Expo e React Native insieme, tuffiamoci e creiamo la nostra prima app mobile! Per creare l’app, abbiamo bisogno di alcune cose da installare sul computer, Node.js – un runtime JavaScript e Visual Studio Code: un editor di testo. Come sempre abbiamo necessità di inserire un pò di comandi da finestra terminale:

node -v //che controlla la versione di Node.js
npm -v  //che controlla la versione del gestore di pacchetti Node
npm install -g expo-cli //Installa gli strumenti della riga di comando di Expo

Gli strumenti da riga di comando di Expo semplificano la creazione, la manutenzione e il test di un progetto Expo!

expo init hello-world  //comando che crea una nuova app Expo
cd hello-world //per spostarci nella cartella hello-world

dopo aver creato questa cartella di base dove sono presenti tutti i file critici siamo pronti per la configurazione locale con React Native nella sua fase finale: testare l’applicazione!

Installare l’app Expo Go su mobile

Testeremo con digital marketing Umbria l’app sul nostro dispositivo mobile personale. Per farlo, però, dovremo installare un’altra app chiamata Expo Go. L’app Expo Go si sincronizzerà con gli strumenti della riga di comando di Expo che abbiamo usato per creare la nostra app nell’ultimo esercizio.Una volta installata l’app Expo Go, eseguiamo il progetto React Native. Dall’interno del terminale di Visual Studio Code, digitare quanto segue per avviare l’APP:

npm start

Ora apriamo l’app Expo Go appena installata e scansioniamo il codice QR che dovrebbe essere apparso nel terminale. Potrebbero volerci un secondo o due per caricarsi, ma il tuo nuovo progetto React Native dovrebbe ora essere in esecuzione sul dispositivo!

Lavorare sul codice APP.js


import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Sto familiarizzando con react native!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

che produrrà a video

ci siamo!

Modifica

Grazie al supporto di digital marketing umbria abbiamo configurato la nostra app e l’abbiamo testata: ora è il momento di immergersi nel codice e iniziare a fare un po’ di sviluppo effettivo e cimentiamoci nella modifica del JSX. La prima cosa che faremo è iniziare a giocare con il JSX che si trova nel file App.js. Modifichiamo il testo nell’app cambiando il componente

<Text>Ciao mondo</Text>

Una volta apportata la modifica, l’app dovrebbe aggiornarsi automaticamente come per magia! Questo processo di aggiornamento dell’app quando salviamo il file si chiama aggiornamento live, è una delle funzionalità che otteniamo utilizzando Expo. Proviamo anche questa modifica:

import { StatusBar } from 'expo-status-bar'
import React from 'react'
import { StyleSheet, Text, View } from 'react-native'

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Sto familiarizzando con react native!</Text>
      <Text>ciao mondo</Text>
      <Text>posso inserire molti tag text</Text>
      <StatusBar style="auto" />
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#ff9900',
    alignItems: 'center',
    justifyContent: 'center',
  },
})
posso inserire più componenti TEXT

Da sottolineare l’importanze delle righe di comando nell’ applicazione che richiamano i componenti:

import { StatusBar } from 'expo-status-bar'
import React from 'react'
import { StyleSheet, Text, View } from 'react-native'

Stili

Lo stile in react native è visto come un oggetto. Ora aggiungiamo un po’ di colore nella nostra app, verso la fine del file, modifichiamo gli stili.

const styles = StyleSheet.create({
container: {
…
backgroundColor: 'blue',
…
}
})

La modifica del campo backgroundColor cambierà il colore di sfondo dell’app in blu

Errori di debug

Inevitabilmente ci saranno degli errori di sviluppo. Fortunatamente è davvero facile risolverli quando eseguiamo la nostra app con Expo. Verifichiamolo creando un errore di sintassi. Rimuoviamo il tag di chiusura per il componente Testo e salviamo.

<Testo>Ciao mondo

Questo genererà un errore, che dovrebbe essere visibile sul nostrodispositivo. Con l’utile messaggio di errore, è davvero facile scoprire esattamente qual è il problema.

errori segnalati facilmente da expo

Correggiamo l’errore, salviamo e l’app dovrebbe caricarsi di nuovo!

Review Local Setup with React Native

Abbiamo creato la nostra prima APP con Expo e React Native! Riassumendo, lo sviluppo di app Expo sul nostro computer richiede Node.js e un editor di codice. Con npm install -g expo-cli installiamo gli strumenti della riga di comando di Expo. Con expo init hello-world creiamo un nuovo progetto Expo chiamato hello-world. Con Expo Go, l’app mobile per Android e iOS, semplifichiamo l’anteprima della nostra app sul nostro smartphone

Ottimizzare lo sviluppo mobile con React Native: learn once, write anywhere – 1 overview

due approcci diversi per creare APP MOBILI con react native: con expo (per neofiti) o senza (sviluppatori esperti)

I problemi dello sviluppo Mobile: ibride o native? E quale tecnologia usare?

Ok diciamo che si ferma è perduto e Digital Marketing Umbria una volta compreso che dopo aver trascorso sei mesi sopra una tecnologia che di colpo è diventata vecchia a causa della versione 4 di codeigniter che sta soppiantando la tre, se vuole comunque tirare a lucido il cv deve per forza concentrarsi su qualcosa di nuovo da assimilare. Come si sa lo sviluppo mobile va incontro a diverse problematiche per un imprenditore, del tipo che se voglio sfornare un prodotto IOS avrò bisogno di tutta una serie di skills legate al mondo APPLE per cui la conoscenza di objective-c e di x-code per esempio piuttosto che analoghe problematiche sul versante opposto con Android Studio e Java piuttosto che Kotlin per sfornare un prodotto Android. Siccome poi difficilmente il lavoro viene delegato a un singolo ma a squadre di tecnici, ne consente che se volessi sviluppare nel mio ufficio tecnico APP Mobili per IOS e ANDROID avrei da sostenere dei costi pesanti. Ma a questo punto subentrano altre riflessioni legate alla tipologia di APP MOBILI che possono essere pprodotte: devono essere ibride o native? Rispetto alle “cugine” app ibride, quelle native godono di ottime prestazioni (anche se il gap si sta assottigliando sempre di più), ma sono più costose. Il budget da mettere in conto per lo sviluppo di app native è, in media, 4/5 volte superiore rispetto a quello per le applicazioni ibride, proprio per i motivi espressi all’ inizio. Ma a questo punto entra in campo REACT NATIVE che riesce in un colpo solo ad accontatore l’imprenditore con poco budget. Infatti con questa tecnologia si può sfornare un prodotto che ha una doppia valenza, semplicemente usando javascript che appoggiandosi alla tecnologia REACT e ai suoi componenti nativi riesce runtime a creare componenti utili sia per il mondo IOS sia per il mondo ANDROID! Miracolo? Io non credo, è solo una questione di opportunità e di tecnologia da studiare. Le applicazioni mobili che vengono messe in piedi con react native possono usare due modalità diverse, una usando la miracolosa piattaforma di semplificazione EXPO e l’altra che prevede gli strumenti citati all’ inizio con Android Studio e X-Code per il mondo IOS! Ok ma quali prerequisiti devo avere per entrare nel magico mondo di REACT NATIVE? Una conoscenza pregressa di JS6 e REACT per esempio! Però grazie a EXPO che semplifica di molto lo sviluppo grazie alle sue interfacce grafiche per non esperti che vogliono subito gettarsi nella mischia possiamo davvero da subito essere competitivi anche se sviluppare APP Mobili usando REACT e i corrispettivi tools dedicati a IOS e ANDROID dà più credibilità allo sviluppatore che non ha bisogno di una protesi come EXPO per arrivare all’ obiettivo finale. A questo punto c’è un altro problema da affrontare che è quello di come apprendere!

Studiare una nuova tecnologia: istruzioni per l’uso

Spesso in rete sono presenti numerose risorse per appagare la propria curiosità ma il quadro generale è comunque dissonante e sconnesso perchè il più delle volte ci troviamo di fronte a situazioni non strutturate e articolate dal punto di vista didattico e chi deve approvvigionarsi per capirci qualcosa è costretto a un superlavoro di cementazione che non sempre va in porto a contatto con la frammentazione. Un esempio pratico. Qualcuno ha detto che la documentazione di codeigniter framework vrsione tre dove ho passato gli ultimi sei mesi è assolutamente scarna per risolvere problemi pratici e non sempre anche le richieste inoltrate a forum dedicati subiscono delle risoluzioni tematiche. Per me è stato così! L’inizio con codeigniter per me è stato traumatico sei mesi fa e oggi invece lo uso con la stessa semplicità con cui userei power point per esempio. Quindi come approcciarsi a react native?! Magari andando su siti di formazione tematici e vedere che cosa offrono. Una volta risolta la spinosa questione di come e dove approvvigionarsi (la vedo dura imparare react native senza linee guida didattiche facendo leva solo su una sperimentazione in autopprendimento basato sulla magia del fare come è stato per me l’esperienza con codeigniter) non resta che prendere il kaotico gomitolo e srotolare tutti i fili che lo compongono! Quindi pronti e via, si parte! Si dà per scontato che alcuni comandi si debbano per forza impartire usando CMD di windows o qualsiasi CLI tematica

EXPO e hai uno scorrimano di supporto

Abbiamo detto che quando si ha poca esperienza è meglio usare la protesi EXPO, senza usare un tono negativo perchè di fatto se siamo neofiti usando questa piattaforma abbiamo solo dei vantaggi. Ma che cosa è EXPO e come si installa? Expo è un framework e una piattaforma per applicazioni React universali. È un insieme di strumenti e servizi costruiti attorno a React Native e piattaforme native che ti aiutano a sviluppare, costruire, distribuire e iterare rapidamente su iOS, Android e app Web dalla stessa base di codice JavaScript/TypeScript. Se hai già esperienza con gli strumenti React e JavaScript e vuoi immergerti subito e capire le cose mentre procedi, questo è il modo più rapido per iniziare, installare expo globalmente:

npm install --global expo-cli

inizializzare un progetto:

expo init my-project

Inizializzare una app:

expo init my-app

posizionarsi all’ interno della cartella progetto con:

cd my-app

per avviare la piattaforma:

expo start

Con Expo e React Native, puoi creare un’app mobile utilizzando React. Utilizza lo stesso paradigma dell’interfaccia utente dichiarativa, ma esegue il rendering degli stessi componenti di visualizzazione nativi creati durante la scrittura del codice nativo. Puoi scrivere la tua app una volta ed eseguirla su più piattaforme, come Android, iOS e persino il web. Riutilizzando le precedenti conoscenze di sviluppo web, puoi creare app mobili con interfaccia utente nativa e funzionalità del dispositivo. Inoltre, accelera lo sviluppo riutilizzando la maggior parte dello stesso codice. Ma, per passare dall’idea all’app su tutte le piattaforme, è necessaria una conoscenza di base delle piattaforme native. Expo fornisce anche una gamma di strumenti che risolvono la maggior parte dei problemi comuni. Sebbene Expo non sia necessario per utilizzare React Native, aiuta gli sviluppatori eliminando la necessità di conoscenze native di base. Con Expo puoi creare le tue app utilizzando JavaScript puro. E’ necessaria quindi un minimo di esperienza con lo sviluppo JavaScript e React per entrare nello sviluppo mobile! Le cose da imparare sono tante: cosa sono Expo e React Native e come si scrive un’app? Come utilizzare i componenti principali nelle tue app? Come aggiungere uno stile personalizzato ai componenti? Come usare React Navigation per creare app multischermo? Ma siccome nessuno nasce imparato occorre andare a studiare punto per punto tutte le basi della disciplina!

Ma come funziona il rendering?

Con javascript evoco dei componenti nativi REACT e questi a runtime convertono per ogni piattaforma la vista corrispondente per IOS o ANDROID

Come siamo messi con lo sviluppo mobile?

Al giorno d’oggi i dispositivi mobili come smartphone e tablet sono ovunque. Cisco prevede che entro il 2023 ci saranno 5,7 miliardi di utenti mobili in tutto il mondo! Tutte le grandi aziende, anche Codecademy, hanno app mobili che mettono i loro servizi nel palmo della tua mano. Sui dispositivi mobili esistono due piattaforme principali, Android e iOS. (Ce ne sono alcuni altri, ma questi due costituiscono il 99,4% di tutti i dispositivi.). La creazione di app per queste due piattaforme richiede molte conoscenze specifiche della piattaforma, tra cui più lingue, più set di strumenti, più team e per iOS avrai bisogno di un Mac. Vediamo la prima grafica:

lo stesso linguaggio per due prodotti diversi!

Il diagramma mostra la stessa app su piattaforme diverse: Android e iOS. Sebbene abbiano le stesse caratteristiche, hanno un aspetto leggermente diverso e utilizzano un codice diverso sotto il cofano

Che cosa è react native?

React Native è una libreria creata con la stessa API di React. Utilizza lo stesso paradigma dell’interfaccia utente dichiarativa, ma esegue il rendering direttamente sui componenti nativi. Puoi scrivere la tua app una volta in React ed eseguirla su più piattaforme native, come Android e iOS. Sebbene “nativo” faccia parte del nome, non è puro sviluppo di app native: Expo e React Native usano ancora JavaScript per eseguire la tua app. Invece di eseguire il rendering di questo JavaScript con un motore Web, utilizzano i componenti nativi effettivi della piattaforma. Come già detto senza Expo o React Native, lo sviluppo di app native pure richiederebbe l’apprendimento del linguaggio della piattaforma e degli strumenti come Android Studio per Android e Xcode per iOS. Usando React, puoi riutilizzare le precedenti conoscenze di sviluppo web per creare dispositivi mobili con le funzionalità native delle app mobili tradizionali. Consente inoltre agli sviluppatori di condividere la maggior parte del codice su tutte le piattaforme, con conseguente sviluppo più rapido. Ma, per passare dall’idea all’app, è necessaria una conoscenza di base delle piattaforme native. Nell ‘immagine precedente abbiamo l’anatomia di un’app in Android e iOS. Anche se ogni piattaforma utilizza elementi diversi, come ViewGroup in Android e UIView in iOS, devi solo scrivere il codice una volta in JavaScript.

EXPO protesi plus!

Expo è una piattaforma per creare app React universali che ti aiuta a sviluppare, costruire, distribuire e iterare rapidamente su app mobili. Fornisce una gamma di strumenti per rendere ancora più semplice lo sviluppo con React Native. Sebbene Expo non sia necessario per creare app React Native, aiuta gli sviluppatori eliminando la necessità di conoscenze native di base. Expo Go è un’app che puoi scaricare sul tuo telefono per “visualizzare” la tua app in sviluppo. Expo CLI è uno strumento per creare, gestire e sviluppare le tue app. Expo SDK è un set modulare di pacchetti che forniscono l’accesso alle API native, come Fotocamera o Notifiche. Expo Snack è un parco giochi basato sul web in cui puoi scrivere frammenti di React Native ed eseguirli nel browser. Occasionalmente vedrai Expo menzionato nella documentazione di React Native. In genere ti consigliamo di utilizzare Expo quando crei app React Native. È il modo più semplice per iniziare a creare la tua app e non è previsto alcun blocco. Una volta che inizi con Expo, puoi sempre espellere di nuovo solo su React Native

Rendering di un componente

Tutte le app in Expo e React Native sono composte da componenti. Questi componenti sono piccoli pezzi riutilizzabili della tua app, che funzionano tutti insieme. Ciascuno di questi componenti di solito ha una singola responsabilità. Può variare dal rendering del testo con stile o dal rendering di altri componenti pre-stilati per creare un modulo. Proprio come il normale React, la tua app discende tutta da un singolo componente. Questo componente esegue il rendering di tutti gli altri componenti della tua app, dalle schermate al testo semplice. Invece di eseguire il rendering di questo componente in DOM, Expo e React Native lo rendono per te utilizzando un concetto chiamato punto di ingresso:

import React from 'react';
import { Text } from 'react-native';

const App = () => (
  <Text style={{ margin: 64 }}>
    Welcome to React Native!
  </Text>
);

export default App;
expo in azione!

se volessi creare il classico ciao mondo?

import React from 'react';
import { Text } from 'react-native';

const App = () => (
  <Text style={{ margin: 64 }}>
    Hello World!
  </Text>
);

export default App;
Bello il claim imparare una volta e scrivere ovunque!

Rendering nativo

Nel nostro esempio precedente, abbiamo utilizzato il componente per eseguire il rendering del testo. Ci sono alcuni altri componenti forniti con React Native; chiamiamo questi componenti principali. React Native sa come renderizzarli su una piattaforma specifica perché sono legati a una controparte del componente nativo. Creando componenti e renderizzandoli, dici a React Native cosa rendere. Il JavaScript con i componenti è raggruppato nella tua app ed eseguito in un thread separato dall’interfaccia utente nativa. Questo thread JS indica a React Native ciò di cui ha bisogno per il rendering. La suddivisione in un thread JS e in un thread dell’interfaccia utente consente alla piattaforma di comprendere cosa deve essere visualizzato senza bloccare i componenti dell’interfaccia effettivi. Per visualizzare questi due thread, considera un’autostrada con una sola corsia per il traffico. Con il traffico lento e veloce combinato su questa corsia, una parte del traffico potrebbe rallentarne altre. L’aggiunta di un’altra corsia consente al traffico più veloce di circolare indipendentemente dal traffico più lento. Sebbene JS non sia necessariamente un traffico lento, può comunque bloccare il thread dell’interfaccia utente e causare balbuzie nelle animazioni visibili. Oltre ai componenti dell’interfaccia utente visibili, il thread dell’interfaccia utente nativa gestisce anche le richieste API native. Alcune funzionalità, come la posizione GPS, devono essere richieste dalle API native. Se il tuo codice JS utilizza questo tipo di funzionalità, interagisce con l’API nativa utilizzando il codice nativo. I dati di questo codice nativo vengono rinviati al codice JS e gestiti nella tua app

js chiama il componenti nativi di react framework e questi a runtime converte per ios o android

Il diagramma mostra la relazione tra il codice React, il thread JS, il thread dell’interfaccia utente e l’applicazione nativa. Da sinistra a destra, descrive come viene eseguito il rendering di un pulsante React su un componente pulsante nativo. React: gli sviluppatori di codice JavaScript simili a React scrivono per le loro app React Native. Thread JS: il codice dell’app viene convertito in un singolo bundle o file JS. React Native esegue questo codice in un thread speciale per determinare ciò di cui ha bisogno per eseguire il rendering o invocare il componente. Thread dell’interfaccia utente: questo thread riceve azioni da eseguire in modo nativo. Può includere il rendering di componenti nativi e può anche restituire dati, richiesti dal thread JS, come i dati del sensore. Nativo: il sistema operativo nativo esegue il rendering del componente nativo sul telefono

Differenze multipiattaforma

Molto codice Expo e React Native può essere riutilizzato su più piattaforme native, ma ci sono alcune differenze di cui dovresti essere a conoscenza. I componenti nativi possono avere un aspetto diverso a causa delle linee guida di progettazione fornite dalla piattaforma. Su iOS, Apple ha implementato le linee guida per l’interfaccia umana mentre Android fornisce le linee guida per la progettazione dei materiali. Alcuni dei componenti principali potrebbero avere un aspetto diverso su altre piattaforme per questo motivo. Diamo un’occhiata al componente . In questa immagine puoi vedere come viene renderizzato sia su Android che su iOS. Ci sono anche differenze nelle funzionalità fornite da ciascuna piattaforma. Apple vuole che gli sviluppatori di app utilizzino la loro funzione “Autentica con Apple”, ma questa non è disponibile su Android. Per questo motivo, non è sempre possibile fornire un’API unificata per la funzionalità nativa

Devo usare Expo e React Native?

Expo e React Native forniscono un quadro completo con una grande comunità. Esistono migliaia di pacchetti predefiniti che puoi utilizzare direttamente nella tua app. Proprio come ogni altro framework, Expo e React Native non sono una soluzione da proiettile d’argento. Per la maggior parte delle app, Expo e React Native sono una buona scelta: le app create con Expo o React Native possono essere eseguite su più piattaforme. Ciò significa uno sviluppo più rapido e meno codice da mantenere condividendo la maggior parte del codice. Fornisce l’accesso diretto alle funzionalità native, consentendo agli sviluppatori di rendere l’app performante come le app native pure. niziare con Expo e React Native richiede solo uno sviluppo web di base e una conoscenza di base della piattaforma nativa. Grandi aziende come Bloomberg, Shopify e Coinbase utilizzano React Native per le loro app mobili. Coinbase ha iniziato con native e si è spostato su React Native con grande successo. Puoi trovare più aziende elencate nella documentazione di React Native!

Ma React Native è performante?

Le app native pure hanno un limite di prestazioni più elevato rispetto alle app Expo e React Native. Expo e React Native sono astrazioni sulla piattaforma nativa. Devono seguire le ultime modifiche e funzionalità dalle piattaforme native. Le app complesse spesso richiedono l’ottimizzazione e la personalizzazione del codice nativo, il che richiede una buona conoscenza di ogni piattaforma che devi supportare

Riassunto

In questo post digital marketing Umbria ha trattato alcuni concetti di base di Expo e React Native. React Native è una libreria che utilizza React per lo sviluppo di app mobili per creare app performanti con JavaScript. Expo è una piattaforma per app React universali che contiene React Native e ti aiuta a iterare velocemente, senza alcuna conoscenza della piattaforma nativa. I componenti in React Native hanno una controparte del componente nativa che viene renderizzata sulla piattaforma nativa. Expo e React Native eseguono il tuo JavaScript React nell’app reale, in un thread diverso dall’interfaccia utente per mantenere la tua app senza intoppi. Proprio come React, Expo e React Native utilizzano il punto di ingresso della tua app per renderla su diverse piattaforme native. Poiché le diverse piattaforme native non sono identiche, alcuni componenti si comportano in modo diverso su alcune piattaforme

Expo Snack

Expo Snack è un parco giochi basato sul web che ti consente di scrivere ed eseguire app React Native nel browser. Puoi scrivere, eseguire e condividere frammenti di codice direttamente dal tuo browser con Expo Snack. I documenti React Native, Expo doc utilizzano Snack per dimostrare frammenti di codice Expo e React Native direttamente nel browser. Riferimento: https://docs.expo.io/workflow/snack/

Componenti nativi

I componenti nativi sono componenti supportati dalla piattaforma. Questi componenti vengono invocati con JavaScript usando i componenti React. In fase di esecuzione, React Native crea le viste Android e iOS corrispondenti

Thread JS e UI

Il thread JS esegue il codice JavaScript in bundle, che quindi invia azioni o richieste al thread dell’interfaccia utente

App native contro ibride

React Native è più veloce delle app ibride. Questo perché il codice React esegue il rendering direttamente sui componenti nativi invece che su un browser web

Expo Go

Expo Go è un client di sviluppo per Android e iOS in grado di caricare la parte JS del progetto. Ciò ti consente di visualizzare in anteprima la tua app in fase di sviluppo

Expo CLI

Expo fornisce uno strumento CLI come interfaccia principale per consentire agli sviluppatori di iniziare a scrivere codice per un progetto: $ expo init

Expo SDK

L’SDK è un insieme modulare di pacchetti contenenti le implementazioni native per accedere alle funzionalità della piattaforma

Visibilità dei componenti

Sia Android che iOS hanno creato diverse guide di stile per la loro piattaforma. Un pulsante visualizzato su Android avrà un aspetto leggermente diverso rispetto a un pulsante visualizzato su iOS

Prestazioni

Le app React Native non sempre contengono le ultime funzionalità native e non hanno un tetto di prestazioni così alto come le app native tradizionali

Conclusioni

Expo e React Native sono strumenti ideali quando è necessario eseguire un’app su più piattaforme, accedere direttamente a funzionalità native e/o avere solo uno sviluppo web di base e una conoscenza della piattaforma nativa. Expo e React Native non sono strumenti ideali quando hai bisogno di prestazioni assolute, funzionalità all’avanguardia appena rilasciate dalla piattaforma e/o applicazioni complesse e di grandi dimensioni. I componenti nativi sono componenti supportati dalla piattaforma. Questi componenti vengono invocati con JavaScript usando i componenti React. In fase di esecuzione, React Native crea le viste Android e iOS corrispondenti. Tutte le funzionalità dell’app React Native devono essere incluse in un singolo componente React, esportato come predefinito dal file del punto di ingresso:

import * as React from 'react';
 
const App = () => (
  // All functionality goes here
);
 
export default App;

Un primo sguardo con digital marketing umbria lo abbiamo azionato sulla tecnologia react-native, ma sappiamo che questo è solo l’entry-level di numerose info che seguiranno nelle prossime puntate!

Diventa sindaco di Bugliano Umbra per un giorno e rilancia l’economia locale, portando prosperità e benessere in tutta la valle, trasformando le tue idee in profitto tramite JQuery!

Rilanciamo l’economia a Bugliano Umbra, sei il sindaco, cosa fai per risollevare le sorti di una vallata depressa?

Problem Solving e Question Time
Stanco di fare il cittadino che subisce e non partecipa alla vita pubblica? Allora diventa sindaco nella finction a Bugliano Umbra e risolleva le sorti dell’ economia locale.
All’ indirizzo http://umbriawayformazione.altervista.org/uwcode/bugliano_umbra/ possiamo giocare a diventa sindaco di Bugliano Umbra per un giorno con tecnologie come JQuery e LocalStorage, la prima libreria javascript esterna da integrare nei nostri progetti e la seconda database con capacità limitata integrato direttamente nel browser e che ci consente quindi di salvare i dati localmente.

La versatilità dei workflow
All’ indirizzo https://umbriawayvalorizza.wordpress.com/2021/02/27/joomla-e-i-flussi-di-lavoro-il-webinar-sponsorizzato-da-host-it-sui-workflow/ si è parlato di workflow relativamente a Joomla ma gli stati che con le ACL regolano il flusso di lavoro (permessi da dare agli utenti) per la pubblicazione degli articoli si possono applicare in tutte le discpline umane e ne vediamo un esempio pratico giocando appunto a diventa sindaco per un giorno in una località fantasma che di certo non è messa benissimo e che ha bisogno di essere rivitalizzata per rilanciare turismo ed economia locale non solo a causa delle tante buche sull’ asfalto rimaste allo stato brado. Ad esempio che cosa pianificheresti e quali processi di lavorazione subirebbero le tue idee per renderle effettive, legate all’ obiettivo prefissato che è quello di riportare Bugliano Umbra ai fasti perduti di un tempo che sembra lontanissimo? Gli stati di lavorazione prevedono appunto il passaggio in vari compartimenti per cui l’idea prima sta in magazzino e vive in linea teorica, poi si concretizza con l’azione e con una serie di atti pratici prima di passare alla fase di test dove ci si aspetta un risultato che poi potrà essere archiviato come replicabile o meno per gli effetti positivi portati alla causa del bilancio amministrativo comunale.

risolleviamo le sorti della vallata a Bugliano Umbra, adesso sei tu il sindaco di quella località che vedi sullo sfondo!

Adesso sei un manager economista con 50 master appena uscito dalla Bocconi che deve salvare Bugliano Umbra e rilanciarla dal degrado: che cosa faresti?
A questo punto essendo chiara la parte informatica possiamo spingere l’analisi dell’ attuale degrado di Bugliano Umbra che è un comune immaginario malato di spopolamento pensando ad esempio se il territorio si presta per la nascita di industrie locali (no perchè la cronologia storica segnala numerosi fallimenti in proposito, essendo tutta finction possiamo ipotizzare che l’esperienza passata con la grande azienda produttrice di elettrodomestici che ha prodotto alla fine disastri sul territorio dopo un periodo limitato di prosperità non sia da ripetersi per esempio con altre iniziative parallele simili) o se possiamo trasformare le verdi colline di Bugliano Umbra in fertili vallate in stile Silicon Valley per la nascita di numerose start-up locali . Esclusa quindi la possibilità di far rifiorire la zona attraverso la ripresa industriale e la new economy (a Bugliano Umbra adorano sollazzarsi nelle criticità mosse dal digital device, approfondimenti https://it.wikipedia.org/wiki/Divario_digitale) che di fatto ha visto a Bugliano solo un breve periodo di felicità, non resta che la filiera del turismo da qui oltre a pensare a richiedere finanziamenti a destra e a manca arruolando figure specialistiche in grado di allestire bandi europei non ci resta che spremerci le meningi per riportare le masse a godere delle bellezze locali che sono cultura, storia, cibo stratosferico, acque cristalline e aria pura, attraverso un turismo che avrebbe ripercussioni benefiche secondarie su tutto l’indotto ma in primis ai turisti stessi che scoprirebbero solo nelle acque locali la veridicità delle famose leggende insite nelle fontane dell’ eterna giovinezza!

Dove trovo lo script per la gestione del mondo dei sogni?
Lo script è free download all’ indirizzo https://www.jqueryscript.net/other/kanban-board-app.html e nel frattempo concentriamoci su quello che dobbiamo o non dobbiamo fare per risollevare le sorti di una valle, quella di Bugliano Umbra, che meriterebbe di rivivere un nuovo rinascimento senza scomodare quelli di poltrona viva o strani soggetti che si muovono sul territorio per interessi di parrocchia (ricordiamo che la simulazione con la finction di Bugliano Umbra, comune che non esiste ma che bisognerebbe inventarlo, è completamente visionaria e non aderente al mondo reale, necessitando alla letteratura condominiale un contesto irreale dove ambientare trame mirabolanti con il famoso genere da promuovere che è il noir appenninico)

Conclusione
Non ci hai capito nulla di quanto trovi scritto in questo post, sull’ economia che dovrebbe perseguire un sindaco o su quali obiettivi dovrebbe avere una amministrazione comunale? Non ti preoccupare, l’autore lo fa apposta per non farsi capire (ma anche “pecapissedasolo” come dicono a RM). L’importante è che all’ indirizzo http://umbriawayformazione.altervista.org/uwcode/bugliano_umbra/ hai per le mani una applicazione che puoi adattare con flessibilità per ogni esigenza in ogni tuo progetto, ricordando l’inconsistenza dei dati di tutta la fatiscente (ma funzionale) applicazione, che non hanno il supporto di un DB dietro, ma solo la funzionalità LocalStorage dei browser