Ionic est un framework gratuit et open-source permettant de créer des applications natives et Web multiplateformes de haute qualité. Il est livré avec une puissante interface de ligne de commande qui vous aide à créer un projet à partir d'une simple commande. Ionic prend en charge Android, IOS et la plate-forme Windows universelle pour le développement d'applications. Ionic utilise les plugins Cardova pour accéder à l'appareil photo, au GPS et à la lampe de poche.
Dans cet article, nous vous montrerons comment installer Ionic Mobile App Framework sur le serveur Debian 10.
Prérequis
- Un serveur exécutant Debian 10.
- Un mot de passe root est configuré sur le serveur.
Mise en route
Tout d'abord, mettez à jour les packages système vers la version mise à jour en exécutant la commande suivante :
apt-get update -y
Une fois tous les packages mis à jour, vous pouvez installer d'autres packages requis avec la commande suivante.
apt-get install curl gnupg2 wget -y
Installer Node.js
Ensuite, vous devrez installer Node.js sur votre système. Par défaut, la dernière version de Node.js n'est pas incluse dans le référentiel Debian. Vous devrez donc ajouter le référentiel source Node à votre système.
Vous pouvez ajouter le dépôt source du nœud avec la commande suivante :
curl -sL https://deb.nodesource.com/setup_14.x | bash -
Une fois le dépôt ajouté, installez le Node.js avec la commande suivante :
apt-get install nodejs -y
Après avoir installé Node.js, vérifiez la version de Node.js avec la commande suivante :
node --version
Vous devriez voir le résultat suivant :
v14.17.1
Ensuite, vous devez également installer Cordova sur votre système. Vous pouvez l'installer avec la commande suivante :
npm install -g cordova
Une fois installé, vous pouvez passer à l'étape suivante.
Installer Ionic Framework
Tout d'abord, vous devrez installer un utilitaire CLI ionique sur votre serveur. Vous pouvez l'installer avec la commande suivante :
npm i -g @ionic/cli
Après avoir installé ionic, vérifiez la version ionic avec la commande suivante :
ionic -v
Vous devriez obtenir le résultat suivant :
6.16.3
Créer un projet avec Ionic
Maintenant, vous pouvez créer votre premier projet avec la commande suivante :
ionic start
Il vous sera demandé de sélectionner le framework entre React ou Angular, de spécifier le nom de votre projet et de sélectionner un modèle comme indiqué ci-dessous :
Pick a framework! ???? Please select the JavaScript framework to use for your new app. To bypass this prompt next time, supply a value for the --type option. ? Framework: Angular Every great app needs a name! ???? Please enter the full name of your app. You can change this at any time. To bypass this prompt next time, supply name, the first argument to ionic start. ? Project name: myapp Let's pick the perfect starter template! ???? Starter templates are ready-to-go Ionic apps that come packed with everything you need to build your app. To bypass this prompt next time, supply template, the second argument to ionic start. ? Starter template: tabs ? Preparing directory ./myapp in 3.69ms ? Downloading and extracting tabs starter in 591.18ms ? Integrate your new app with Capacitor to target native iOS and Android? No Your Ionic app is ready! Follow these next steps: - Go to your new project: cd ./myapp - Run ionic serve within the app directory to see your app in the browser - Run ionic capacitor add to add a native iOS or Android project using Capacitor - Generate your app icon and splash screens using cordova-res --skip-config --copy - Explore the Ionic docs for components, tutorials, and more: https://ion.link/docs - Building an enterprise app? Ionic has Enterprise Support and Features: https://ion.link/enterprise-edition
Démarrer l'application
Maintenant, changez le répertoire de votre projet et démarrez l'application avec la commande suivante :
cd myapp
ionic serve --host 0.0.0.0 --port 8100,/p>
Vous devriez obtenir le résultat suivant :
> ng run app:serve --host=0.0.0.0 --port=8100
[INFO] Development server running!
Local: http://localhost:8100
External: http://216.98.11.73:8100
Use Ctrl+C to quit this process
[INFO] Browser window opened to http://localhost:8100!
Maintenant, ouvrez votre navigateur Web et accédez à votre application en utilisant l'URL http://your-server-ip:8100 . Vous devriez voir votre application ionique sur l'écran suivant :
Conclusion
Toutes nos félicitations! vous avez installé avec succès le framework Ionic sur le serveur Debian 10. Vous pouvez maintenant commencer à créer votre application mobile en utilisant le framework Ionic.