Création d'applications mobiles avec Ionic et React

Ionic a récemment ajouté la prise en charge de React; Les développeurs de React peuvent désormais bénéficier des avantages d'Ionic pour créer des applications mobiles hybrides et des applications Web progressives (PWA). Dans cet article, nous allons vous montrer comment commencer à utiliser Ionic avec React en créant une application de démonstration simple à partir de rien.

Conditions préalables

Pour suivre correctement ce didacticiel, vous devez connaître les conditions préalables suivantes: [19659005] versions récentes de Node.js et npm installées sur votre système,

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

 $ node -v 

Présentation de React And Ionic

Commençons par une brève introduction à React et à Ionic.

D'après le site officiel de : [19659012] «React est une bibliothèque JavaScript déclarative, efficace et flexible permettant de créer des 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 à distance. les données et le routage, vous devrez donc utiliser certaines bibliothèques tierces existantes pour ces tâches.

Selon le site Web Ionic :

«Ionic Framework est le logiciel mobile gratuit à code source ouvert. Boîte à outils d'interface utilisateur permettant de développer des applications multiplate-forme de grande qualité pour iOS, Android et le Web, le tout à partir d'une seule base de code. -end framework ou bibliothèque, telle que Angular, React ou Vue, pour construire une application mobile hybride et un PWA.

Dans ce didacticiel, nous verrons et utiliserons des composants d'interface utilisateur ionique tels que les suivants:

• IonMenu : Grâce à cela, un tiroir de navigation se glisse du côté de la vue actuelle.
• IonToolbar : ces barres supérieures sont positionnées au-dessus ou au-dessous du contenu.
• IonHeader : ce composant parent contient le composant de 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 composant de contenu dans une seule vue.
• IonList : Ce composant contient des éléments avec un contenu de données similaire, tel que des images et du texte. Il est constitué 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 pouvant être utilisé dans un formulaire ou à tout endroit nécessitant une fonctionnalité de bouton standard simple.

Installation d'Ionic CLI v5

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

Ouvrez une interface de ligne de commande et exécutez la commande suivante:

 $ npm install -g ionic 

Au moment de la rédaction, CLI v5.2.3 d'Ionic est le

Note : * 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 rencontrez des erreurs d'autorisation. Vous pouvez aussi simplement réparer vos autorisations npm ou utiliser un outil tel que nvm . *

Ensuite, installez Cordova Resources (utilisé pour générer Cordova ressources localement) et Native Run (utilisé pour déployer des fichiers binaires d'applications sur des périphériques):

 $ npm install -g cordova-res en natif 

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

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

Créons maintenant un projet basé sur React. Retournez à votre terminal, assurez-vous que vous êtes 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épart parmi ceux disponibles. Prenons sidemenu comme modèle de départ avec un menu latéral et une navigation.

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

 $ cd ./. monApp
$ ionic serve 

Votre application sera disponible à partir de l’adresse http: // localhost: 8100 et vous pourrez utiliser votre navigateur Web pour commencer à jouer avec elle.

Ionic est appelé un hybride. cadre mobile, 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 les technologies natives pour les plates-formes cibles, telles que Java ou Kotlin pour Android ou Swift pour iOS.

Comme votre application mobile est en fait une application Web, vous pouvez effectuer l'essentiel du développement en testant dans un navigateur Web sans utiliser d'émulateur ou de périphérique mobile réel, sauf pour tester les fonctionnalités de l'appareil natif telles que la caméra ou le stockage SQLite, si vous les avez utilisées 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 tous les tests au cours du développement dans votre navigateur Web.

Cleaning Our Project

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

Commençons par supprimer le fichier src / pages / List.tsx puis ouvrez le fichier src / App.tsx . 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: [19659008] importez la liste de './pages/List';

Next, supprimez du composant App :

 const App: React.FunctionComponent = () => (
  
    
      
        
        
          
            
             } />
          
        
      
    
  
);

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';
importer ReactDOM de 'react-dom';
importer l'application depuis './App';

ReactDOM.render (document.getElementById ('root')); 

La méthode render () est utilisée pour restituer un élément React dans le DOM dans la racine fournie. element.

Theming The App

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

Commençons par le menu latéral. Ouvrez le fichier src / components / Menu.tsx et ajoutez un attribut color avec une valeur primaire à IonToolbar . ] IonContent IonList et IonItem Composants d'interface utilisateur:

 const Menu: React.FunctionComponent  = ({appPages}) => (
  
    
      
         Menu 
      
    
    
      
         {appPages.map ((appPage, index) =>
          revenir (
            
              
                
                 {appPage.title} 
              
            
          );
        })}
      
    
  
);  

Ionic fournit certaines couleurs par défaut (primaires, secondaires, tertiaires, succès, avertissement, danger, clair, moyen et sombre) qui peuvent être utilisées pour modifier la couleur des composants de l'interface utilisateur. Une couleur peut être appliquée à un composant ionique afin de modifier les couleurs par défaut à l'aide de l'attribut color . Pour plus d'informations, voir « Couleurs ».

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

Voici 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 couleur des composants IonToolbar et IonContent pour . primaire :

 const HomePage: React.FunctionComponent = () => {
  revenir (
    <>
      
        
          
            
          
           Accueil 
        
      
      

      
    >
  );

Voici une capture d'écran de la page:

Installation d'Axios et utilisation d'une API REST

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

Après avoir thématisé notre application, voyons maintenant comment extraire des données à l'aide d'Axios. Nous allons utiliser l’API tierce disponible à partir de NewsAPI.org .

Premièrement, nous devons récupérer une clé d’API afin de pouvoir communiquer avec l’API. Allez à la page registration entrez vos informations et enregistrez un compte. Vous recevrez une clé API; notez-le et poursuivons.

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

 $ npm install axios --save 

Ouvrez ensuite le fichier src / pages / Home. .tsx et commencez par importer Axios et IonButton :

 import {
  IonButton
} de '@ ionic / react';

import axios from 'axios'; 

Ensuite, définissez les variables constantes API_KEY et :

 const API_KEY = "";
const URL = `https://newsapi.org/v2/top-headlines?sources=techcrunch&apiKey=${API_KEY}`;[19659054HERanslavariableURLnousallonsajouterunpointdeterminaisonpourobtenirlesprincipauxtitresdenotresourceTechCrunchVouspouvezutilisern’importequellesourceparmiles sources disponibles . 
  Note :  Assurez-vous de bien insérer votre propre clé API dans la variable  API_KEY . .  
 Ensuite, définissez la méthode  fetchArticles ()  comme suit: 
 const fetchArticles = () => {

  retour axios ({
    URL: URL,
    méthode: 'get'
  }). then (response => {

    console.log (réponse);
    return response.data;
  })
 Nous appelons simplement la méthode  axios ()  pour envoyer une demande GET au point de terminaison de l'actualité. Le résultat de cette méthode est une promesse qui doit être résolue pour obtenir les données d'actualité. .
 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 ([]);
  Objets constants: any [] = [];

  React.useEffect (() => {

    fetchArticles (). then (data => setArticles (data.articles));

  }, []);

  revenir (
    <>
      
        
          
            
          
           Accueil 
        
      
      
        

           {
            articles.map (a => {

              revenir (
                
                  {a ['title']}
                   Lire 
                
              );
            })
          }

        
      
    >
  );
 Dans notre composant fonction, nous appelons d’abord le crochet  useState ()  de React pour créer la variable d’état  articles qui conservera les articles après les avoir récupérés. l'API.
  useState ()  renvoie la variable d'état, qui a le tableau vide comme valeur initiale et une fonction que nous pouvons utiliser pour modifier la valeur de la variable. Nous utilisons  l'assignation de déstructuration  pour décomposer les valeurs de la paire retournée en variables distinctes (à savoir  articles  et  setArticles () ).
 Ensuite, nous appelons le  useEffect ()  crochet pour effectuer un effet secondaire dans notre composant. Dans notre cas, l'effet secondaire consiste à extraire des 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 attribuer les données d'actualité à la variable  articles .
 Both  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 de classe. Le crochet  useEffect ()  équivaut à appeler les méthodes  de composantDidMount combinées dans des composants de classe. ] Enfin, dans le modèle de vue, nous parcourons le tableau  articles  à l'aide de la méthode  ()  et nous affichons le titre de chaque article dans un  IonItem . ] élément du composant  IonList ainsi qu'un bouton qui nous mène à la page de l'article complet. 
 Voici une capture d'écran de la page:
 Vous pouvez trouver le code source dans ce  référentiel GitHub .
 Conclusion
 Dans ce tutoriel, nous avons commencé à utiliser à la fois Ionic et React et les a utilisés pour créer une application mobile simple qui récupère et affiche les données d'actualité à partir d'une API tierce en utilisant le client Axios. Nous avons également vu comment utiliser les crochets dans React - à savoir les crochets  useState ()  et  useEffect ()  - pour créer un état et effectuer des effets secondaires au sein des composants de la fonction React. Avec Ionic, nous avons constaté à quel point il est facile de générer un projet basé sur React et de cibler l'application à l'aide des attributs de couleur des composants.
 (dm, al, yk, ra, il ) 
 

Le meilleur outil 2023 pour ta croissance Instagram !

Source link

Partager :

• Cliquez pour partager sur Twitter(ouvre dans une nouvelle fenêtre)
• Cliquez pour partager sur Facebook(ouvre dans une nouvelle fenêtre)