Créer des applications mobiles avec Ionic et React

Ionic a récemment ajouté la prise en charge de React ; alors maintenant, les développeurs de React peuvent profiter des avantages d'Ionic pour créer des applications mobiles hybrides et des applications Web progressives (PWA). Dans cet article, nous vous montrerons comment commencer à utiliser Ionic avec React en créant une application de démonstration simple à partir de zéro.

Conditions préalables

Afin de suivre correctement ce tutoriel, vous aurez besoin des prérequis suivants :

• les versions récentes de Node.js et npm installées sur votre système,
• connaissance pratique de TypeScript et React.

Vous pouvez vérifier que la dernière version de Node.js (v10) est installée en exécutant la commande suivante :

 $ node -v

Présentation de React et Ionic

Commençons par de brèves introductions à la fois à React et à Ionic.

Selon le site officiel :

« React est une bibliothèque JavaScript déclarative, efficace et flexible pour la création d'interfaces utilisateur. Il vous permet de composer des interfaces utilisateur complexes à partir de petits morceaux de code isolés appelés "composants".

React se concentre sur la création d'interfaces utilisateur et ne fournit aucun outil intégré pour les tâches courantes requises dans le développement Web, telles que la récupération de données distantes et le routage, vous devrez donc utiliser certaines bibliothèques tierces existantes pour ces tâches.

D'après le site Ionic :

"Ionic Framework est la boîte à outils d'interface utilisateur mobile gratuite et open source pour développer des applications multiplateformes de haute qualité pour iOS, Android et le Web natifs - le tout à partir d'une seule base de code."

Fondamentalement, il s'agit d'un ensemble de composants d'interface utilisateur que vous pouvez utiliser avec du JavaScript simple ou n'importe quel framework ou bibliothèque frontale populaire, comme Angular, React ou Vue, pour créer une application mobile hybride et PWA.

Dans ce didacticiel, nous verrons et utiliserons certains composants de l'interface utilisateur Ionic tels que les suivants :

• IonMenu : avec cela, un tiroir de navigation glissera du côté de la vue actuelle.
• IonToolbar : ces barres supérieures sont positionnées au-dessus ou en dessous du contenu.
• IonHeader : ce composant parent contient le composant de la barre d'outils.
• IonContent : ce composant fournit une zone de contenu, avec des méthodes pour contrôler la zone de défilement et d'autres choses. Vous n'avez besoin que d'un seul composant de contenu dans une seule vue.
• IonList : ce composant contient des éléments avec un contenu de données similaire, tels que des images et du texte. Il est composé d'objets IonItem.
• IonItem : ce composant peut contenir du texte, des icônes, des avatars, des images, des entrées et tout autre élément natif ou personnalisé.
• IonButton : ce composant fournit un élément cliquable, qui peut être utilisé dans un formulaire ou n'importe où nécessitant une fonctionnalité de bouton simple et standard.
  

Installation de la CLI ionique v5

L'interface de ligne de commande (CLI) d'Ionic, version 5, prend en charge la création de projets Ionic basés sur React. Alors, commençons par installer l'outil à partir de npm.

Ouvrez une CLI et exécutez la commande suivante :

 $ npm install -g ionic

Au moment de la rédaction de cet article, la CLI v5.2.3 d'Ionic est la dernière.

Remarque : *Selon la façon dont vous avez installé Node.js sur votre système, vous devrez peut-être ajouter sudo avant votre commande sous macOS ou Linux ou exécuter l'invite de commande en tant qu'administrateur sous Windows si vous obtenez des erreurs d'autorisation. Vous pouvez également simplement corriger vos autorisations npm ou utiliser un outil tel que nvm.*

Ensuite, installez Cordova Resources (qui est utilisé pour générer des ressources Cordova localement) et Native Run (utilisé pour déployer des binaires d'application sur des appareils) :

 $ npm install -g cordova-res native-run

Celles-ci ne sont nécessaires que si vous souhaitez tester votre application sur un véritable appareil mobile ou émulateur.

Création d'un projet ionique et réactif

Maintenant, créons un projet basé sur React. Retournez sur votre terminal, assurez-vous d'être dans votre répertoire de travail et exécutez la commande suivante :

 $ ionic start myApp --type=react

Nous utilisons --type=react pour générer un projet basé sur React. Vous devrez ensuite choisir un modèle de démarrage parmi ceux disponibles. Choisissons sidemenu pour un modèle de démarrage avec un menu latéral et une navigation.

Après avoir généré le projet et installé les dépendances, vous pouvez diffuser votre application localement à l'aide des commandes suivantes :

 $ cd ./myApp $ ionic serve

Votre application sera disponible à partir de l'adresse https://localhost:8100, et vous pouvez en fait utiliser votre navigateur Web pour commencer à jouer avec.

Ionic est appelé un framework mobile hybride car il utilise des technologies Web conçues à l'origine pour créer des applications Web, ainsi qu'un conteneur natif (Cordova ou Capacitor), pour créer des applications mobiles sans utiliser de technologies natives pour les plates-formes cibles, telles que Java. ou Kotlin pour Android ou Swift pour iOS.

Étant donné que votre application mobile est en fait une application Web, vous pouvez effectuer la plupart des développements en testant dans un navigateur Web sans utiliser d'émulateur ou d'appareil mobile réel, sauf pour tester les fonctionnalités natives de l'appareil telles que l'appareil photo ou le stockage SQLite, au cas où vous Je les ai utilisés dans votre application. En fait, il est même possible d'utiliser certaines techniques pour imiter les plugins qui fournissent les fonctionnalités natives et effectuer l'ensemble des tests lors du développement dans votre navigateur Web.

Nettoyage de notre projet

Nous avons la structure de base de l'application, avec deux pages (accueil et liste) et un menu. Supprimons la page de liste puisqu'il ne s'agit que de code passe-partout.

Tout d'abord, supprimez le fichier src/pages/List.tsx , puis ouvrez le fichier src/App.tsx et supprimez l'entrée de la page de liste du tableau appPages :

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

Supprimez également l'importation de la page de liste du fichier :

 import List from './pages/List';

Ensuite, supprimez <Route path="/:tab(home)/list" component={List} exact={true} /> du composant 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;

Le composant App est le composant racine rendu par notre application. Si vous ouvrez le fichier src/index.tsx , vous trouverez le code suivant :

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

La méthode render() est utilisée pour restituer un élément React dans le DOM dans l'élément root fourni.

Thématisation de l'application

Après avoir créé, servi et nettoyé notre projet Ionic, voyons maintenant comment nous pouvons changer les couleurs de l'interface utilisateur pour qu'elle ait l'air plus professionnelle.

Commençons par le menu latéral. Ouvrez le fichier src/components/Menu.tsx et ajoutez un attribut de color avec une valeur primary aux IonToolbar , IonContent , IonList et 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 fournit des couleurs par défaut (primaire, secondaire, tertiaire, succès, avertissement, danger, clair, moyen et foncé) qui peuvent être utilisées pour changer la couleur des composants de l'interface utilisateur. Une couleur peut être appliquée à un composant ionique afin de changer les couleurs par défaut à l'aide de l'attribut color . Voir « Couleurs » pour plus d'informations.

Ces couleurs ont des valeurs par défaut, mais vous pouvez les personnaliser via certaines variables CSS prédéfinies. Voir "Modification des couleurs".

Ceci est une capture d'écran de notre menu :

Ensuite, changeons la couleur de la page d'accueil. Ouvrez le fichier src/pages/Home.tsx et définissez l'attribut color des composants IonToolbar et IonContent sur primary :

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

Ceci est une capture d'écran de la page :

Installation d'Axios et consommation d'une API REST

Nous verrons comment installer Axios et utiliser une API RESTful tierce dans notre application, et nous verrons également comment afficher les données récupérées à l'aide de la carte Ionic et des composants de liste.

Après avoir thématisé notre application, voyons maintenant comment récupérer des données à l'aide d'Axios. Nous utiliserons l'API tierce disponible sur NewsAPI.org.

Tout d'abord, nous devons récupérer une clé API, afin de pouvoir communiquer avec l'API. Accédez à la page d'inscription, entrez vos informations et créez un compte. Vous recevrez une clé API ; notez-le, et continuons.

Retournez à votre terminal et exécutez la commande suivante pour installer Axios :

 $ npm install axios --save

Ensuite, ouvrez le fichier src/pages/Home.tsx , et commencez par importer Axios et IonButton :

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

Définissez ensuite les variables constantes API_KEY et URL :

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

Dans la variable URL, nous ajouterons un point de terminaison pour obtenir les principaux titres de notre source, TechCrunch. Vous pouvez utiliser n'importe quelle source parmi les sources disponibles.

Note : Assurez-vous de mettre votre propre clé API dans la variable API_KEY .

Ensuite, définissez la méthode fetchArticles() comme suit :

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

Nous appelons simplement la méthode axios() pour envoyer une requête GET au point de terminaison de news, et le résultat de la méthode est une promesse qui doit être résolue afin d'obtenir les données de news.

Ensuite, mettez à jour le composant HomePage comme suit pour appeler la méthode fetchArticles() et résoudre la promesse renvoyée :

 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> </> ); };

Dans notre composant de fonction, nous appelons d'abord le useState() de React pour créer la variable d'état des articles , qui contiendra les articles de presse après les avoir extraits de l'API.

useState() renvoie la variable d'état, qui a le tableau vide comme valeur initiale et une fonction que nous pouvons utiliser pour changer la valeur de la variable. Nous utilisons l'affectation de déstructuration pour décompresser les valeurs de la paire renvoyée en variables distinctes (c'est-à-dire articles et setArticles() ).

Ensuite, nous appelons le useEffect() pour effectuer un effet secondaire dans notre composant. Dans notre cas, l'effet secondaire est de récupérer les données de l'API de news à l'aide de la méthode fetchArticles() , qui renvoie une promesse. Une fois la promesse résolue, nous appelons la méthode setArticles() pour affecter les données d'actualité à la variable articles .

useState() et useEffect() sont des crochets React intégrés qui ont été introduits dans React 16.8 ; ils vous permettent simplement d'utiliser l'état et d'autres fonctionnalités de React sans avoir à écrire une classe. Le crochet useEffect() équivaut à appeler les méthodes de cycle de vie componentDidMount , componentDidUpdate et componentWillUnmount combinées dans des composants basés sur des classes.

Enfin, dans le modèle de vue, nous parcourons le tableau d' articles à l'aide de la méthode map() , et nous affichons le titre de chaque article d'actualité dans un élément IonItem du composant IonList , ainsi qu'un bouton qui nous amène à la page du article complet.

Ceci est une capture d'écran de la page :

Vous pouvez trouver le code source dans ce référentiel GitHub.

Conclusion

Dans ce didacticiel, nous avons commencé à utiliser à la fois Ionic et React et les avons utilisés pour créer une application mobile simple qui récupère et affiche les données d'actualité d'une API tierce à l'aide du client Axios. Nous avons également vu comment utiliser les crochets dans React - à savoir, les useState() et useEffect() - pour créer un état et effectuer des effets secondaires à l'intérieur des composants de la fonction React. Avec Ionic, nous avons vu à quel point il est facile de générer un projet basé sur React et comment nous pouvons thématiser l'application en utilisant les attributs de couleur des composants.