Creazione di app mobili con Ionic e React

Pubblicato: 2022-03-10
Riepilogo rapido ↬ Gli sviluppatori React possono ottenere i vantaggi di Ionic per creare app mobili ibride e app Web progressive. In questo tutorial, utilizzeremo Ionic e React per creare un'app mobile da zero.

Ionic ha recentemente aggiunto il supporto per React; quindi ora, gli sviluppatori React possono ottenere i vantaggi di Ionic per creare app mobili ibride e app Web progressive (PWA). In questo post, ti mostreremo come iniziare a utilizzare Ionic con React creando da zero una semplice app demo.

Prerequisiti

Per seguire correttamente questo tutorial, avrai bisogno dei seguenti prerequisiti:

  • versioni recenti di Node.js e npm installate sul tuo sistema,
  • conoscenza pratica di TypeScript e React.

Puoi verificare di avere l'ultima versione di Node.js (v10) installata eseguendo il comando seguente:

 $ node -v

Presentazione di React e Ionic

Iniziamo con brevi introduzioni sia a React che a Ionic.

Secondo il sito ufficiale:

“React è una libreria JavaScript dichiarativa, efficiente e flessibile per la creazione di interfacce utente. Ti consente di comporre interfacce utente complesse da pezzi di codice piccoli e isolati chiamati "componenti". "

React si concentra sulla creazione di interfacce utente e non fornisce strumenti integrati per le attività comuni richieste nello sviluppo Web, come il recupero di dati remoti e il routing, quindi per queste attività sarà necessario utilizzare alcune librerie di terze parti esistenti.

Secondo il sito web di Ionic:

"Ionic Framework è il toolkit gratuito e open source per l'interfaccia utente mobile per lo sviluppo di app multipiattaforma di alta qualità per iOS nativi, Android e Web, il tutto da un'unica base di codice".

Fondamentalmente, è un insieme di componenti dell'interfaccia utente che puoi utilizzare con JavaScript semplice o qualsiasi framework o libreria front-end popolare, come Angular, React o Vue, per creare un'app mobile ibrida e PWA.

In questo tutorial, vedremo e utilizzeremo alcuni componenti dell'interfaccia utente di Ionic come i seguenti:

  • IonMenu: con questo, un cassetto di navigazione scorrerà dal lato della vista corrente.
  • IonToolbar: queste barre in alto sono posizionate sopra o sotto il contenuto.
  • IonHeader: questo componente principale contiene il componente della barra degli strumenti.
  • IonContent: questo componente fornisce un'area di contenuto, con metodi per controllare l'area scorrevole e altre cose. Hai bisogno di un solo componente di contenuto all'interno di una singola vista.
  • IonList: questo componente contiene elementi con contenuto di dati simile, come immagini e testo. È composto da oggetti IonItem.
  • IonItem: questo componente può contenere testo, icone, avatar, immagini, input e qualsiasi altro elemento nativo o personalizzato.
  • IonButton: questo componente fornisce un elemento cliccabile, che può essere utilizzato in un modulo o ovunque che richieda una funzionalità semplice e standard dei pulsanti.
Altro dopo il salto! Continua a leggere sotto ↓

Installazione di Ionic CLI v5

L'interfaccia a riga di comando (CLI) di Ionic, versione 5, supporta la creazione di progetti Ionic basati su React. Quindi, iniziamo installando lo strumento da npm.

Apri una CLI ed esegui il comando seguente:

 $ npm install -g ionic

Al momento in cui scrivo, la CLI v5.2.3 di Ionic è l'ultima.

Nota : * A seconda di come hai installato Node.js nel tuo sistema, potrebbe essere necessario aggiungere sudo prima del comando in macOS o Linux o eseguire il prompt dei comandi come amministratore in Windows se ricevi errori di autorizzazione. Puoi anche semplicemente correggere le tue autorizzazioni npm o utilizzare uno strumento come nvm.*

Quindi, installa Cordova Resources (usato per generare risorse Cordova localmente) e Native Run (usato per distribuire i binari dell'app sui dispositivi):

 $ npm install -g cordova-res native-run

Questi sono necessari solo se vuoi testare la tua applicazione su un vero dispositivo mobile o emulatore.

Creazione di un progetto ionico e reattivo

Ora creiamo un progetto basato su React. Torna al tuo terminale, assicurati di essere nella tua directory di lavoro ed esegui il seguente comando:

 $ ionic start myApp --type=react

Usiamo --type=react per generare un progetto basato su React. Successivamente dovrai scegliere un modello iniziale tra quelli disponibili. Selezioniamo menu sidemenu per un modello iniziale con menu laterale e navigazione.

Dopo aver generato il progetto e aver installato le dipendenze, puoi servire la tua app in locale utilizzando i seguenti comandi:

 $ cd ./myApp $ ionic serve

La tua app sarà disponibile dall'indirizzo https://localhost:8100 e puoi effettivamente utilizzare il tuo browser web per iniziare a giocarci.

Ionic è chiamato framework mobile ibrido perché utilizza tecnologie Web originariamente progettate per creare app Web, insieme a un contenitore nativo (Cordova o Capacitor), per creare app mobili senza utilizzare tecnologie native per le piattaforme di destinazione, come Java o Kotlin per Android o Swift per iOS.

Poiché la tua app mobile è in realtà un'applicazione Web, puoi eseguire la maggior parte dello sviluppo testando in un browser Web senza utilizzare un emulatore o un dispositivo mobile reale, ad eccezione del test delle funzionalità del dispositivo nativo come la fotocamera o l'archiviazione SQLite, nel caso tu' li ho usati nella tua app. In effetti, è anche possibile utilizzare determinate tecniche per imitare i plug-in che forniscono le funzionalità native ed eseguire l'intero test durante lo sviluppo nel tuo browser web.

Pulire il nostro progetto

Abbiamo la struttura di base dell'app, con due pagine (home e list) e un menu. Rimuoviamo la pagina dell'elenco poiché è solo un codice standard.

Innanzitutto, rimuovi il file src/pages/List.tsx , quindi apri il file src/App.tsx e rimuovi la voce per la pagina dell'elenco dall'array appPages :

 const appPages: AppPage[] = [ { title: 'Home', url: '/home', icon: home } ];

Inoltre, rimuovere l'importazione della pagina elenco dal file:

 import List from './pages/List';

Quindi, rimuovi <Route path="/:tab(home)/list" component={List} exact={true} /> dal componente App :

 const App: React.FunctionComponent = () => ( <IonApp> <IonReactRouter> <IonSplitPane content> <Menu appPages={appPages} /> <IonPage> <IonRouterOutlet> <Route path="/:tab(home)" component={Home} exact={true} /> <Route exact path="/" render={() => <Redirect to="/home" />} /> </IonRouterOutlet> </IonPage> </IonSplitPane> </IonReactRouter> </IonApp> ); export default App;

Il componente App è il componente radice di cui viene eseguito il rendering dalla nostra applicazione. Se apri il file src/index.tsx , troverai il seguente codice:

 import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render(<App />, document.getElementById('root'));

Il metodo render() viene utilizzato per eseguire il rendering di un elemento React nel DOM nell'elemento root fornito.

Temi l'app

Dopo aver creato, servito e pulito il nostro progetto Ionic, vediamo ora come possiamo cambiare i colori dell'interfaccia utente in modo che appaia più professionale.

Iniziamo con il menu laterale. Apri il file src/components/Menu.tsx e aggiungi un attributo color con un valore primary ai componenti dell'interfaccia utente di IonToolbar , IonContent , IonList e IonItem :

 const Menu: React.FunctionComponent = ({ appPages }) => ( <IonMenu content> <IonHeader> <IonToolbar color="primary"> <IonTitle>Menu</IonTitle> </IonToolbar> </IonHeader> <IonContent color="primary"> <IonList style= {{ background : '#3880ff'}} color="primary"> {appPages.map((appPage, index) => { return ( <IonMenuToggle key={index} auto-hide="false"> <IonItem color="primary" href={appPage.url}> <IonIcon slot="start" icon={appPage.icon} /> <IonLabel>{appPage.title}</IonLabel> </IonItem> </IonMenuToggle> ); })} </IonList> </IonContent> </IonMenu> ); const Menu: React.FunctionComponent = ({ appPages }) => ( <IonMenu content> <IonHeader> <IonToolbar color="primary"> <IonTitle>Menu</IonTitle> </IonToolbar> </IonHeader> <IonContent color="primary"> <IonList style= {{ background : '#3880ff'}} color="primary"> {appPages.map((appPage, index) => { return ( <IonMenuToggle key={index} auto-hide="false"> <IonItem color="primary" href={appPage.url}> <IonIcon slot="start" icon={appPage.icon} /> <IonLabel>{appPage.title}</IonLabel> </IonItem> </IonMenuToggle> ); })} </IonList> </IonContent> </IonMenu> );

Ionic fornisce alcuni colori predefiniti (primario, secondario, terziario, successo, avviso, pericolo, chiaro, medio e scuro) che possono essere utilizzati per modificare il colore dei componenti dell'interfaccia utente. È possibile applicare un colore a un componente ionico per modificare i colori predefiniti utilizzando l'attributo color . Vedere "Colori" per ulteriori informazioni.

Questi colori hanno valori predefiniti, ma puoi personalizzarli tramite alcune variabili CSS predefinite. Vedere "Modifica dei colori".

Questo è uno screenshot del nostro menu:

Menù ionico
Menù ionico. (Grande anteprima)

Quindi, cambiamo il colore della Home page. Apri il file src/pages/Home.tsx e imposta l'attributo color dei componenti IonToolbar e IonContent su primary :

 const HomePage: React.FunctionComponent = () => { return ( <> <IonHeader> <IonToolbar color="primary"> <IonButtons slot="start"> <IonMenuButton /> </IonButtons> <IonTitle>Home</IonTitle> </IonToolbar> </IonHeader> <IonContent color="primary" > </IonContent> </> ); };

Questo è uno screenshot della pagina:

Casa ionica
Casa ionica. (Grande anteprima)

Installazione di Axios e consumo di un'API REST

Vedremo come installare Axios e utilizzare un'API RESTful di terze parti nella nostra applicazione e vedremo anche come visualizzare i dati recuperati utilizzando la scheda Ionic e i componenti dell'elenco.

Avendo tematizzato la nostra applicazione, vediamo ora come recuperare i dati utilizzando Axios. Utilizzeremo l'API di terze parti disponibile su NewsAPI.org.

Innanzitutto, dobbiamo prendere una chiave API, in modo da poter comunicare con l'API. Vai alla pagina di registrazione, inserisci i tuoi dati e registra un account. Ti verrà fornita una chiave API; notalo e continuiamo.

Torna al tuo terminale ed esegui il seguente comando per installare Axios:

 $ npm install axios --save

Quindi, apri il file src/pages/Home.tsx e inizia importando Axios e IonButton :

 import { IonButton } from '@ionic/react'; import axios from 'axios';

Quindi, definisci le variabili costanti API_KEY e URL :

 const API_KEY = "<YOUR_API_KEY_HERE>"; const URL = `https://newsapi.org/v2/top-headlines?sources=techcrunch&apiKey=${API_KEY}`;

Nella variabile URL, aggiungeremo un endpoint per ottenere i titoli principali dalla nostra fonte, TechCrunch. Puoi utilizzare qualsiasi fonte che desideri dalle fonti disponibili.

Nota : assicurati di inserire la tua chiave API nella variabile API_KEY .

Quindi, definisci il metodo fetchArticles() come segue:

 const fetchArticles = () => { return axios({ url: URL, method: 'get' }).then(response => { console.log(response); return response.data; }) };

Chiamiamo semplicemente il metodo axios() per inviare una richiesta GET all'endpoint delle notizie e il risultato del metodo è una promessa che deve essere risolta per ottenere i dati delle notizie.

Quindi, aggiorna il componente HomePage come segue per chiamare il metodo fetchArticles() e risolvere la promessa restituita:

 const HomePage: React.FunctionComponent = () => { const [articles, setArticles] = React.useState([]); const items: any[] = []; React.useEffect(() => { fetchArticles().then(data => setArticles(data.articles)); }, []); return ( <> <IonHeader> <IonToolbar color="primary"> <IonButtons slot="start"> <IonMenuButton /> </IonButtons> <IonTitle>Home</IonTitle> </IonToolbar> </IonHeader> <IonContent color="primary" > <IonList color="primary"> { articles.map(a => { return ( <IonItem> {a['title']} <IonButton href={a['url']} color="primary" slot="end">Read</IonButton> </IonItem> ); }) } </IonList> </IonContent> </> ); };

Nel nostro componente di funzione, chiamiamo prima l' useState() di React per creare la variabile di stato degli articles , che conterrà gli articoli di notizie dopo averli recuperati dall'API.

useState() restituisce la variabile di stato, che ha l'array vuoto come valore iniziale e una funzione che possiamo usare per cambiare il valore della variabile. Usiamo l'assegnazione di destrutturazione per decomprimere i valori dalla coppia restituita in variabili distinte (cioè articles e setArticles() ).

Successivamente, chiamiamo l' useEffect() per eseguire un effetto collaterale nel nostro componente. Nel nostro caso, l'effetto collaterale è quello di recuperare i dati dall'API delle notizie utilizzando il metodo fetchArticles() , che restituisce una promessa. Una volta risolta la promessa, chiamiamo il metodo setArticles() per assegnare i dati delle notizie alla variabile articles .

Sia useState() che useEffect() sono hook React incorporati che sono stati introdotti in React 16.8; ti consentono semplicemente di utilizzare lo stato e altre funzionalità di React senza dover scrivere una classe. L' useEffect() equivale a chiamare i metodi del ciclo di vita componentDidMount , componentDidUpdate e componentWillUnmount combinati in componenti basati su classi.

Infine, nel modello di visualizzazione, eseguiamo un'iterazione sull'array degli articles utilizzando il metodo map() e visualizziamo il titolo di ogni articolo di notizie all'interno di un elemento IonItem del componente IonList , e anche un pulsante che ci porta alla pagina del articolo completo.

Questo è uno screenshot della pagina:

App di notizie ioniche
App di notizie ionico (anteprima grande)

Puoi trovare il codice sorgente in questo repository GitHub.

Conclusione

In questo tutorial, abbiamo iniziato a utilizzare sia Ionic che React e li abbiamo usati per creare una semplice applicazione mobile che recupera e visualizza i dati delle notizie da un'API di terze parti utilizzando il client Axios. Abbiamo anche visto come utilizzare gli hook in React, ovvero gli useState() e useEffect() , per creare stato ed eseguire effetti collaterali all'interno dei componenti della funzione React. Con Ionic, abbiamo visto quanto sia facile generare un progetto basato su React e come possiamo tematizzare l'applicazione usando gli attributi di colore dei componenti.