Une introduction pour réagir avec Ionic

Le Ionic Framework est une boîte à outils d'interface utilisateur open source pour créer des applications rapides et de haute qualité en utilisant des technologies Web avec des intégrations pour des frameworks populaires comme Angular et React. Ionic permet le développement multiplateforme à l'aide de Cordova ou de condensateur, ce dernier prenant en charge le développement d'applications de bureau à l'aide d'Electron.

Dans cet article, nous allons explorer Ionic avec l'intégration React en créant une application qui affiche des bandes dessinées en utilisant le API Marvel Comics et permet aux utilisateurs de créer une collection de leurs favoris. Nous apprendrons également comment intégrer des capacités natives dans notre application avec Condensateur et générer des versions pour une plate-forme native.

Si vous n'avez pas travaillé avec Ionic dans le passé, ou si vous êtes curieux de découvrir comment Ionic fonctionne avec React , ce didacticiel est pour vous.

Prérequis

Avant de pouvoir commencer à créer des applications avec Ionic Framework, vous aurez besoin des éléments suivants:

• Node.js (au moins v10) installé sur votre ordinateur
• fonctionnant connaissance de React
• familiarité avec l'API Hooks
• expérience avec TypeScript
• un IDE natif, Android Studio pour Android ou XCode pour iOS
• a Compte développeur Marvel avec une clé API. Vous pouvez en obtenir un ici

Voici une image de ce que nous allons construire:

Installation Ionic CLI

Les applications Ionic sont créées et développées principalement via l'interface de ligne de commande Ionic (CLI). La CLI offre une large gamme d'outils de développement et d'options d'aide lors du développement de votre application hybride. Pour continuer avec ce guide, vous devrez vous assurer que la CLI est installée et accessible depuis votre terminal.

Ouvrez une nouvelle fenêtre de terminal et exécutez la commande suivante:

 npm install -g @ ionic / cli

Cela installera la dernière version de l'Ionic CLI et la rendra accessible de n'importe où sur votre ordinateur. Si vous souhaitez confirmer que l'installation a réussi, vous pouvez exécuter la commande suivante:

 ionic --version

Cette commande affichera la version Ionic installée sur votre ordinateur et elle devrait ressembler à ceci:

 6.4.1

Vous pouvez désormais amorcer des applications Ionic pour les intégrations de framework officiellement prises en charge – Angular et React – en utilisant l'un des modèles prédéfinis disponibles.

Démarrage d'une application Ionic React

La création d'une application Ionic React est facile à l'aide de la CLI. Il fournit une commande nommée start qui génère des fichiers pour un nouveau projet basé sur le framework JavaScript que vous sélectionnez. Vous pouvez également choisir de commencer avec un modèle d'interface utilisateur prédéfini au lieu de l'application vide par défaut «Hello world».

Pour commencer, exécutez la commande suivante:

 onglets ionic start marvel-client --type = react - -condensateur

Cette commande va créer une nouvelle application Ionic React en utilisant le modèle des onglets . Il ajoute également une intégration de condensateur à votre application. Capacitor est un moteur d'exécution multiplateforme qui facilite l'exécution d'applications Web en natif sur iOS, Android et sur le bureau.

Accédez à votre terminal vers le répertoire nouvellement créé et lancez le démarrage du serveur.

 cd marvel-client
service ionique

Pointez maintenant votre navigateur sur http: // localhost: 8100 pour voir votre application en cours d'exécution.

Remarque: Si vous avez utilisé create-react-app (CRA) auparavant, la structure de répertoires de votre projet actuel devrait vous sembler très familière. En effet, afin de garder l'expérience de développement familière, les projets Ionic React sont créés à l'aide d'une configuration similaire à celle trouvée dans une application CRA. React Router est également utilisé pour alimenter la navigation des applications sous le capot.

Création d'un composant React

Vous allez créer un composant React réutilisable à cette étape. Ce composant recevra des données et affichera des informations sur une bande dessinée. Cette étape vise également à démontrer que Ionic React n'est encore que React.

Supprimez les fichiers du composant ExploreContainer de src / components et supprimez ses importations des fichiers .tsx dans le répertoire src / pages .

 import React from 'react';
import {IonContent, IonHeader, IonPage, IonTitle, IonToolbar} à partir de '@ ionic / react'; 
 import ExploreContainer à partir de '../components/ExploreContainer' ;;19659041Import import' ./Tab1.css ';
const Tab1: React.FC = () => {
  revenir (
    
        ...
        
      
    
       Onglet 1 
    
  
   
 
    
  );
};
exporter Tab1 par défaut;

Dans votre fichier Tab1.tsx supprimez également le contenu de la balise .

Créez ensuite un fichier nommé ComicCard.tsx dans votre répertoire src / components . Ensuite, ouvrez le fichier dans votre éditeur et ajoutez le contenu suivant:

 import React, {FC} from 'react';
importer {Comic} depuis '../interfaces/comic';
importer {IonImg, IonCard, IonCardTitle, IonCardSubtitle, IonCardHeader} depuis '@ ionic / react';
type Props = {
    bande dessinée: bande dessinée;
}
const ComicCard: FC  = (accessoires): JSX.Element => {
    const {comic} = accessoires;
    revenir (
        
            

                
            
            
                
                     {comic.title}
                
                
                    

                         {comic.series.name}
                    
                
            
        
    );
}
exporter la ComicCard par défaut;
 

Votre composant ComicCard reçoit les accessoires contenant les détails d'une bande dessinée et restitue les informations à l'aide d'un composant IonCard . Les cartes en Ionic sont généralement composées à l'aide d'autres sous-composants. Dans ce fichier, vous utilisez les composants IonCardTitle et IonCardSubtitle pour afficher le titre de la bande dessinée et les informations de série dans un composant IonCardHeader .

Consommation de l'API Marvel

Pour utiliser votre composant nouvellement créé, vous devez extraire des données de l'API Marvel. Aux fins de ce guide, vous allez utiliser le package axios pour effectuer vos requêtes HTTP. Vous pouvez l'installer en exécutant la commande suivante:

 yarn add axios

Ensuite, ajoutez le dossier suivant à votre répertoire src :

 # ~ / Desktop / marvel-client / src
mkdir -p services

Ensuite, cd dans le répertoire services et créez un fichier nommé api.ts :

 # ~ / Desktop / marvel-client / src /prestations de service
touch api.ts

Enfin, ouvrez le fichier et ajoutez le contenu suivant:

 import axios from 'axios';
importer {DataContainer} depuis '../interfaces/data-container';
importer {Comic} depuis '../interfaces/comic';
const API_KEY = '813xxxxxxxxxxxxxxxxxx';
const api = axios.create ({
    baseURL: 'https://gateway.marvel.com:443/v1/public',
    en-têtes: {
        'Content-Type': 'application / json',
    },
});
api.interceptors.response.use ((réponse) => {
    if (response.status === 200) {
        return response.data.data;
    }
});
fonction d'exportation getComics (): Promise <DataContainer > {
    return api.get ('/ comics', {
        params: {
            apikey: API_KEY,
            limite: 10,
            hasDigitalIssue: true,
        },
    });
}

Assurez-vous de remplacer la valeur de API_KEY par votre propre clé API. Si vous n'en avez pas, vous pouvez en demander un en vous inscrivant sur le site Web de Marvel d eveloper . Vous devez également configurer votre compte pour autoriser les demandes de votre serveur de développement local en ajoutant localhost * à votre liste de référents autorisés Marvel (voir l'image ci-dessous):

Vous avez maintenant une instance axios configurée pour utiliser l'API Marvel. Le fichier api.ts n'a qu'une seule exportation, qui atteint le point de terminaison GET / comics et renvoie une collection de bandes dessinées. Vous limitez les résultats à ceux qui sont disponibles numériquement. Vous allez maintenant utiliser le service API dans votre application.

Ouvrez le fichier Tab1.tsx et remplacez le contenu par ce qui suit:

 import React, {FC, useState, useEffect} de 'réagir';
importer {IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonSpinner, IonGrid, IonRow, IonCol} depuis '@ ionic / react';
import './Tab1.css';
importer ComicCard depuis '../components/ComicCard';
importer {Comic} depuis '../interfaces/comic';
import {getComics} de '../services/api';

const Tab1: FC = () => {
  const [comics, setComics] = useState (null as Comic [] | null);
  const [loading, setLoading] = useState (false);
  const fetchComics = () => {
    setLoading (true);
    getComics (). then ((response) => {
      if (response && response.results) {
        setComics (response.results);
      }
    }). Enfin (() => {
      setLoading (false);
    });
  };
  useEffect (() => {
    fetchComics ();
  }, [])
  revenir (
    
      
        
           Accueil 
        
      
      
         {(chargement) && (
          

            
          
        )}
        {(des bandes dessinées) && (
          
            
               {comics.map ((bande dessinée) => (
                
                  
                
              ))}
            
          
        )}
      
    
  );
};
exporter Tab1 par défaut;

Le fichier ci-dessus est un exemple de page en ionique. Les pages sont des composants accessibles avec une route / URL. Pour garantir le bon fonctionnement des transitions entre les pages, il est nécessaire que le composant IonPage soit le composant racine de votre page.

IonHeader est un composant censé exister en haut de une feuille. Il n'est pas requis pour toutes les pages, mais il peut contenir des composants utiles comme le titre de la page, le composant IonBackButton pour naviguer entre les pages ou le IonSearchBar . IonContent est la zone de contenu principale de vos pages. Il est chargé de fournir le contenu défilable avec lequel les utilisateurs interagiront, ainsi que tous les événements de défilement qui pourraient être utilisés dans votre application.

À l'intérieur de votre composant, vous avez une fonction appelée fetchComics () – appelée une fois à l'intérieur le crochet useEffect () – qui demande d'obtenir des bandes dessinées à partir de l'API Marvel en appelant la fonction getComics () que vous avez écrite plus tôt. Il enregistre les résultats dans l'état de votre composant via le crochet useState () . Le composant IonSpinner affiche une icône en rotation pendant que votre application envoie une demande à l'API. Une fois la demande terminée, vous transmettez les résultats au composant ComicCard que vous avez créé précédemment.

À ce stade, votre application devrait ressembler à ceci:

À l'étape suivante, vous apprendrez à utiliser les plug-ins de condensateur dans votre application en activant le stockage hors ligne.

Création d'une collection personnelle de Marvel Comics

Votre application ressemble bon jusqu'à présent, mais il n'est pas très utile comme application mobile . Dans cette étape, vous allez étendre les fonctionnalités de votre application en permettant aux utilisateurs de «mettre en vedette» des bandes dessinées ou de les enregistrer en tant que favoris. Vous pourrez également rendre des informations sur les favoris enregistrés disponibles pour les visualiser hors ligne en utilisant le plugin de stockage de condensateur.

Tout d'abord, créez un fichier nommé util.ts dans votre répertoire src :

 # ~ / Desktop / marvel-client / src
touch util.ts

Maintenant, ouvrez le fichier et collez le contenu suivant:

 importez {Plugins} depuis '@ capacitor / core';
importer {Comic} depuis './interfaces/comic';

const {Storage, Toast} = Plugins;

export const constFavourites = async (comic: Comic): Promise  => {
    const sauvé = attendre Storage.get ({clé: 'savedFavourites'});
    favoris const: bande dessinée [] | null = (enregistré && enregistré.valeur)
        ? JSON.parse (saved.value)
        : nul;

    si (! favoris) {
        const comics = [comic];
        attendre Storage.set ({
            key: 'savedFavourites',
            valeur: JSON.stringify (bandes dessinées),
        });
        retourner Toast.show ({
            texte: "Ajouté aux favoris",
        });
    }

    const copyOfFavourites = favourites.slice ();
    const {id} = bande dessinée;
    const isSavedIndex = copyOfFavourites.findIndex ((c) => c.id === id);

    if (isSavedIndex! == -1) {
        copyOfFavourites.splice (isSavedIndex, 1);
        attendre Storage.set ({
            key: 'savedFavourites',
            valeur: JSON.stringify (copyOfFavourites),
        });
        retourner Toast.show ({
            texte: "Supprimé des favoris",
        });
    } autre {
        copyOfFavourites.unshift (bande dessinée);
        attendre Storage.set ({
            key: 'savedFavourites',
            valeur: JSON.stringify (copyOfFavourites),
        });
        retourner Toast.show ({
            texte: "Ajouté aux favoris",
        });
    }
};

export const getFavourites = async (): Promise  => {
    const enregistré = attendre Storage.get ({
        key: 'savedFavourites',
    });
    return (sauvé && sauvegardé.valeur)
        ? JSON.parse (saved.value)
        : nul;
};

export const checkFavourite = async (id: number): Promise  => {
    const enregistré = attendre Storage.get ({
        key: 'savedFavourites',
    });
    favoris const: bande dessinée [] | null = (enregistré && enregistré.valeur)
        ? JSON.parse (saved.value)
        : nul;
    si (favoris) {
        const isSavedIndex = favourites.findIndex ((c) => c.id === id);
        if (isSavedIndex! == -1) {
            return true;
        }
    }
    retour faux;
};
 

Le plug-in de stockage fournit un magasin de valeurs-clés pour les données simples, tandis que le plug-in Toast fournit une fenêtre contextuelle de notification pour afficher des informations importantes pour un utilisateur.

Le updateFavourites () La fonction dans ce fichier prend un seul argument, un objet Comic et l'ajoute au stockage de l'appareil s'il n'existe pas, ou le supprime du stockage de l'appareil s'il a déjà été enregistré. getFavourites () renvoie les bandes dessinées enregistrées de l'utilisateur, tandis que checkFavourites () accepte un seul argument, un ID de ressource Comic et le recherche dans les bandes dessinées enregistrées, renvoyant vrai s'il existe, ou faux sinon.

Ensuite, ouvrez le fichier ComicCard.tsx et apportez les modifications suivantes pour permettre aux utilisateurs de votre application de enregistrer leurs bandes dessinées préférées:

 importer {star, starOutline} depuis 'ionicons / icons';
importer * en tant qu'utils depuis '../util';;19659041
    bande dessinée: bande dessinée;
}
const ComicCard: FC  = (accessoires): JSX.Element => {
    const {comic} = props; 
 const [isFavourite, setIsFavourite] = useState (false);
    const checkFavourite = (): void => {
        utils.checkFavourite (comic.id) .then ((valeur: booléen) => {
            setIsFavourite (valeur);
        });
    }

    useEffect (() => {
        checkFavourite ();
    }); 
 return (
        
            ...
            
                ...
             
 
                 {
                        utils.updateFavourites (comic) .finally (() => {
                            checkFavourite ();
                        });
                    }}
                >
                    
                    {(isFavourite)
                        ? 'Retirer'
                        : 'Ajouter'
                    }
                
             
 
    );
}

Votre composant ComicCard possède désormais un composant IonButton qui, lorsque vous cliquez dessus, appelle la fonction updateFavourites () que vous avez écrite plus tôt. N'oubliez pas que la fonction agit comme une bascule, supprimant la bande dessinée si elle a déjà été enregistrée, ou bien l'enregistrant. N'oubliez pas d'ajouter les importations des nouveaux composants ioniques, IonButton IonCardContent et IonIcon qui viennent d'être ajoutés à ce composant.

Maintenant pour le dernière partie de cette étape, où vous allez rendre les bandes dessinées enregistrées dans leur propre page. Remplacez le contenu du fichier Tab2.tsx par ce qui suit:

 import React, {useState} de 'react';
import {IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonGrid, IonRow, IonCol, useIonViewWillEnter} depuis '@ ionic / react';
import './Tab2.css';
importer {Comic} depuis '../interfaces/comic';
import {getFavourites} de '../util';
importer ComicCard depuis '../components/ComicCard';

const Tab2: React.FC = () => {
  const [comics, setComics] = useState (null as Comic [] | null);

  const loadComics = (): void => {
    getFavourites (). then ((result) => {
      if (résultat) {
        setComics (résultat);
      }
    })
  };

  useIonViewWillEnter (() => {
    loadComics ();
  });

  revenir (
    
      
        
           Favoris 
        
      
      
         {(bandes dessinées) && (
          
            
               {comics.map ((bande dessinée) => (
                
                  
                
              ))}
            
          
        )}
      
    
  );
};
exporter Tab2 par défaut;

Cette page est assez similaire à la page Tab1 mais, au lieu de faire une demande d'API pour obtenir des bandes dessinées, vous accédez à des données enregistrées localement. Vous utilisez également le crochet du cycle de vie ionique, useIonViewWillEnter () au lieu d'un crochet useEffect () pour appeler la fonction qui lit les bandes dessinées enregistrées et met à jour l'état du composant . Le crochet useIonViewWillEnter () est appelé au moment où la page en cours de navigation entre en vue.

Votre application utilise maintenant quelques plugins natifs pour améliorer ses fonctionnalités. À l'étape suivante, vous apprendrez à générer un projet natif pour Android et à créer une application native à l'aide d'Android Studio.

Remarque: vous pouvez supprimer les fichiers liés à * Tab3 * et supprimer l'importation et le composant * IonTab * dans le fichier * App.tsx * .

Génération d'un projet natif

Ionic est fourni avec la prise en charge des exécutions d'applications multiplateformes tels que Condensateur et Cordova. Ces frameworks vous aident à créer et exécuter des applications développées à l'aide d'Ionic sur un appareil ou un émulateur natif. Aux fins de ce guide, vous utiliserez Capacitor pour générer des fichiers de projet natifs.

Avant de procéder à l'ajout d'une plate-forme, vous devrez générer une version de production de votre application. Exécutez la commande suivante dans le répertoire racine de votre projet pour ce faire:

 build ionique

Ajoutons maintenant le condensateur à votre projet et générons les ressources nécessaires pour créer une application native. Le condensateur fournit une CLI accessible dans votre projet à l'aide de npx ou de la ionic CLI comme illustré ci-dessous:

Utilisation de npx

 npx cap add android

Cette commande ajoute la plate-forme android à votre projet. D'autres valeurs de plate-forme possibles sont électron et électron .

Utilisation de ionique

Depuis que vous avez initialisé votre projet en utilisant le drapeau - condensateur plus tôt , Le condensateur a déjà été initialisé avec les informations de votre projet. Vous pouvez procéder à l'ajout d'une plate-forme en exécutant la commande suivante:

 condensateur ionique add android

Cette commande installera les dépendances requises pour la plate-forme android . Il générera également les fichiers requis pour un projet Android natif et copiera les ressources que vous avez créées précédemment lors de l'exécution de build ionique .

Si vous avez installé Android Studio vous pouvez maintenant ouvrir votre projet dans Android Studio en exécutant:

 condensateur ionique ouvert android

Enfin, construisez votre projet:

Conclusion

Dans ce guide, vous avez appris à développer des applications mobiles hybrides à l'aide de l'intégration React de Ionic Framework. Vous avez également appris à utiliser Capacitor pour créer des applications natives, en particulier pour la plate-forme Android. Consultez la documentation de l'API car il existe de nombreux autres composants d'interface utilisateur disponibles pour être utilisés dans les applications Ionic que nous n'avons pas explorées. Vous pouvez trouver le code sur GitHub .

Références

(ks, ra, yk, il, og)