Comment installer ionic sur Fedora 38/37/36

IonIC est un cadre d'oer open source populaire pour créer des applications mobiles multiplateforme utilisant des technologies Web telles que HTML, CSS et JavaScript. Il exploite l'angulaire, la réaction ou le vue.JS pour créer des interfaces utilisateur de haute qualité et natives. Fedora est une distribution Linux axée sur la communauté qui sert de base à la Commercial Red Hat Enterprise Linux (RHEL). Dans cet article, nous vous guiderons tout au long du processus d'installation d'Ionic sur Fedora, ainsi que la création d'un exemple simple d'application.

Conditions préalables

Avant de pouvoir installer Ionic sur Fedora, assurez-vous d'avoir les conditions suivantes:

• Un système exécutant Fedora (version 33 ou plus est recommandé).
• Un compte utilisateur avec les privilèges sudo.

Étape 1: Mettez à jour le système

Tout d'abord, mettez à jour votre système Fedora en exécutant la commande suivante:

Sudo DNF Update -y  

Cette commande garantira que votre système a les dernières mises à jour et correctifs de sécurité.

Étape 2: Installez le nœud.js

Ionic nécessite un nœud.JS, un runtime javascript, à exécuter. Installer le nœud.js en utilisant la commande suivante:

curl -sl https: // rpm.nœud.com / setup_18.X | sudo -e bash -  sudo dnf install nodejs  

Une fois l'installation terminée, vous pouvez vérifier le nœud.Version JS en fonctionnant:

Node -v  

Étape 3: Installer Ionic CLI

Ionic CLI (interface de ligne de commande) est un outil qui vous aide à créer, développer et gérer les applications ioniques. Installez la CLI ionique globalement sur votre système à l'aide de NPM:

Sudo NPM Install -g @ ionic / CLI  

Une fois l'installation terminée, vérifiez la version CLI ionique en fonctionnant:

ionic -v  

Étape 4: Créez un nouveau projet ionique

Maintenant que vous avez installé ionique, vous pouvez créer un nouveau projet ionique. Pour ce faire, exécutez la commande suivante:

Start ionic MySampleApp Blank --type = Angular  

Remplacer 'MysampleApp' avec le nom souhaité pour votre application. Cette commande créera un nouveau répertoire avec le nom spécifié et configurera un projet ionique avec un modèle vierge utilisant Angular.

Étape 5: Accédez au répertoire du projet

Accédez au répertoire de projet nouvellement créé:

CD MySampleApp  

Étape 6: Exécutez l'application ionique

Pour exécuter l'application ionique dans votre navigateur Web, utilisez la commande suivante:

service ionique  

Cette commande ouvrira votre navigateur Web par défaut et affichera votre application ionique.

Étape 7: créer un exemple d'application

Pour créer un exemple simple d'application, ouvrez le «SRC / App / Home / Home.page.html ” Fichier dans votre éditeur de texte préféré et remplacer son contenu par les éléments suivants:

Mon exemple d'application mon exemple d'application cliquez sur moi!

12345678910111213141516171819

Mon exemple d'application Mon exemple d'application Cliquez sur moi!

Ensuite, ouvrez le «SRC / App / Home / Home.page.ts " fichier dans votre éditeur de texte et remplacer son contenu par les suivants:

import composant de '@ angular / core'; import alertController de '@ ionic / angular'; @Component (Selector: 'App-Home', TemplateUrl: 'Accueil.page.HTML ', StyleUrls: [' Home.page.SCSS '],) Export Class HomePage Constructor (public AlertController: AlertController) Async ShowAlert () const alert = attend ceci.chèque d'alerte.créer (Header: 'Bonjour!', Message:' Il s'agit d'un exemple d'application ionique.', boutons: [' ok ']); attendre l'alerte.cadeau();

12345678910111213141516171819202122

import composant de '@ angular / core'; import alertController de '@ ionic / angular'; @Component (Selector: 'App-Home', TemplateUrl: 'Accueil.page.HTML ', StyleUrls: [' Home.page.SCSS '],) Export Class HomePage Constructor (public AlertController: AlertController) Async ShowAlert () const alert = attend ceci.chèque d'alerte.créer (Header: 'Bonjour!', Message:' Il s'agit d'un exemple d'application ionique.', boutons: [' ok ']); attendre l'alerte.cadeau();

Dans cet exemple d'application, nous avons ajouté un bouton ionique qui, lorsqu'il est cliqué, affiche une alerte simple avec un message.

Étape 8: Testez l'exemple d'application

Maintenant que vous avez créé l'exemple d'application, exécutez-le à nouveau dans votre navigateur Web en exécutant la commande suivante à partir du répertoire du projet:

service ionique  

Votre navigateur Web doit ouvrir et afficher l'application ionique mise à jour. Clique le «Cliquez sur moi!" bouton pour voir l'alerte avec le message.

Conclusion

Dans cet article, nous avons démontré comment installer ionic sur Fedora et créer un exemple simple de l'application. Vous êtes maintenant prêt à commencer à développer des applications mobiles multiplateforme en utilisant le cadre ionique. Avec cette fondation, vous pouvez créer des interfaces utilisateur de haute qualité et natives pour vos applications mobiles sur Fedora.