Share
Vous avez donc entendu parler d'Ionic et vous vous demandez comment vous y prendre? Dans ce didacticiel, vous apprendrez à configurer un environnement de développement ionique sur votre ordinateur et à créer un projet ionique..
Eh bien, félicitations, si vous consultez cet article via un ordinateur, vous avez l'une des conditions préalables les plus importantes pour le développement d'applications Ionic: vous aurez besoin d'un ordinateur physique (PC) physique pour le faire. Cela peut être un ordinateur sous Windows, Mac ou Linux.
Puisque nous construisons des applications ioniques à l'aide de technologies Web, vous aurez également besoin d'outils de développement Web installés. Cela inclut un navigateur Web (de préférence Google Chrome) pour exécuter et déboguer nos applications, et un éditeur de texte (tel que Code Sublime, Atom ou Visual Studio) pour écrire et éditer notre code. Si vous débutez dans le développement, je recommanderais Visual Studio Code, car il est couramment utilisé et gratuit..
Avec ces exigences de base installées sur votre ordinateur, allons de l'avant et installons les dépendances dont nous avons besoin pour créer des applications ioniques.
Malheureusement, aucun programme d'installation unique n'installe automatiquement un environnement de développement Ionic sur votre ordinateur. Quel que soit votre système d'exploitation, vous devez installer manuellement chacune des dépendances requises. Alors allons-y et commençons à configurer notre environnement de développement Ionic.
La première dépendance à installer est Node.js, qui est un framework JavaScript côté serveur. Nous allons utiliser Node.js pour son gestionnaire de paquets de noeud (npm), ce qui nous permettra d’installer tous les paquets et outils nécessaires à nos projets. Nous allons également utiliser Node.js pour exécuter un service de serveur de développement nous permettant de prévisualiser les applications dans le navigateur..
Ionic vous recommande, lors de l'installation de Node.js, de sélectionner la version la plus récente du support à long terme (LTS). Dans mon cas, comme vous pouvez le voir ci-dessus, il s’agit de la version 8.9.1 LTS. Ionic recommande d'utiliser les versions LTS car elles sont plus stables..
Il suffit donc de télécharger la version LTS, de suivre les instructions du programme d’installation. Une fois l’installation terminée, vous serez prêt à passer à l’étape suivante..
Avec Node.js installé, vous êtes maintenant prêt à installer Cordova et Ionic. Voici où les choses peuvent devenir un peu délicates pour certains, en particulier ceux qui n’ont jamais travaillé avec l’interface de ligne de commande (CLI) jusqu’à présent. Cela peut sembler un peu intimidant au début, et vous pourriez avoir l’impression que vous allez finir par casser quelque chose sur votre ordinateur bien-aimé! Eh bien, vous ne le ferez pas, alors détendez-vous et essayez de suivre.
Sur Mac et Linux, recherchez Terminal, qui est la CLI que nous utiliserons pour installer Cordova et Ionic. Sous Windows, recherchez Invite de commandes. C'est l'équivalent de Terminal sur un PC Windows.
Avec Terminal ouvert sur Mac ou Linux, tapez la commande suivante et exécutez-la en appuyant sur Entrer sur votre clavier.
sudo npm installer -g cordova ionic
Par la suite, vous serez peut-être invité à saisir un mot de passe. Si tel est le cas, entrez le mot de passe que vous utilisez pour vous connecter à votre ordinateur et appuyez sur Entrer encore.
À partir de l'invite de commande sous Windows, tapez la commande suivante et exécutez-la en appuyant sur Entrer sur votre clavier.
npm installer -g cordova ionic
Comme vous l'avez peut-être remarqué, nous utilisons Node Package Manager (npm) pour installer à la fois Ionic et Cordova ci-dessus, il est donc primordial d'installer Node.js en premier! Vous avez peut-être aussi remarqué que sur Mac et Linux, nous utilisons sudo devant notre commande. Cela est nécessaire pour permettre l’installation d’Ionic et de Cordova à l’échelle mondiale sur ces systèmes..
Le processus d'installation peut prendre quelques minutes, en fonction de votre connexion Internet, mais une fois que c'est fait, vous devriez voir quelque chose comme ça:
Cool, alors qu'Ionic et Cordova ont été installés avec succès, passons à la section suivante et installons les logiciels supplémentaires dont nous aurons besoin pour créer avec succès nos applications iOS et Android à partir de nos projets Ionic..
Vous n'êtes pas obligé d'installer ces outils logiciels maintenant; vous pouvez continuer à créer des applications ioniques à l'aide des technologies Web dont nous avons déjà parlé. Alors n'hésitez pas à sauter cette partie si vous êtes désireux de vous lancer et de créer votre premier projet Ionic.
Toutefois, si vous souhaitez exécuter vos applications sur un appareil mobile réel, tel qu'un téléphone Android ou un iPhone, vous devrez éventuellement installer les outils spécifiques à cette plate-forme. Nous étudierons de plus près le développement pour les appareils Android et iOS dans les prochains tutoriels..
Si vous souhaitez pouvoir compiler des applications Android à partir de votre projet Ionic, vous devez d'abord installer le kit de développement Java (JDK) version 8 ou ultérieure. Accédez au site Web JDK, acceptez le contrat de licence et sélectionnez l'option de téléchargement appropriée en fonction de votre système d'exploitation. Puis suivez les instructions d'installation.
Une fois le JDK installé avec succès, vous devez également installer Android Studio, Android IDE (environnement de développement intégré)..
Avec ces deux packages installés, vous pourrez compiler et empaqueter une application Android à partir de votre projet Ionic..
La création d'applications iOS à partir de vos projets Ionic n'est possible que sur un ordinateur Mac OS. Malheureusement, vous ne pourrez ni compiler ni créer d'applications iOS à partir d'un ordinateur sous Windows ou Linux. (Vous pouvez maintenant coder votre application sur un ordinateur Windows, puis la construire pour iOS à partir d'un Mac.)
Pour compiler des applications iOS sur votre Mac OS, vous devez installer Xcode. Rendez-vous simplement sur l'AppStore sur votre Mac et recherchez Xcode. C'est un téléchargement gratuit.
Une fois que vous avez installé Xcode, vous devez également installer d’autres outils de ligne de commande pour Xcode. Pour ce faire, ouvrez Terminal et lancez la commande suivante.
xcode-select --install
Ceci installera des outils supplémentaires que Cordova utilisera pour construire vos projets iOS..
Pour pouvoir créer vos projets iOS à partir de la ligne de commande, vous devez également exécuter la commande suivante..
sudo npm install -g ios-deploy
Avec tout configuré, vous êtes prêt à créer des applications iOS à partir de vos projets Ionic.
Ionic utilise la ligne de commande et en particulier la CLI Ionic, qui a été installée automatiquement lors de notre processus de configuration, pour créer, tester et construire vos applications Ionic. Alors, ayez à nouveau le courage d'ouvrir un terminal ou une invite de commande (selon votre système d'exploitation).
Un petit conseil avant de continuer: apprenez à utiliser l’outil Ionic CLI. Il est maintenant officiellement devenu votre nouvel ami, alors apprenez à l'aimer!
La première chose à faire est de spécifier où nous voulons enregistrer notre projet Ionic. Pour les besoins de cet exercice, nous allons simplement l'enregistrer sur notre bureau. Alors, accédez au bureau avec la commande suivante.
cd bureau
Nous avons quelques options pour le type d’application Ionic que nous souhaitons créer. Celles-ci sont classées en tant que modèles de projet Ionic. Pour le débutant, il existe trois types de modèles: a Blanc modèle, un Onglets modèle, et un SideMenu modèle. Nous allons utiliser le modèle d'onglets dans cet exemple, alors allons-y et créons notre projet.
Nous allons appeler notre projet Ionic DemoApp. Donc, pour créer notre projet DemoApp à l'aide du modèle d'onglets et l'enregistrer sur notre bureau, nous devons exécuter la commande suivante dans notre CLI.
onglets DemoApp à démarrage ionique
Cette commande prendra un peu de temps à exécuter car elle télécharge tous vos packages de modèles de projet et dépendances d’application. Lors de l'installation, il peut vous être demandé si vous souhaitez installer le kit de développement logiciel gratuit Ionic Pro SDK et connecter votre application. Réponse Non et appuyez sur Entrer encore pour continuer avec l'installation. Une fois l'installation terminée, vous devriez voir quelque chose comme ceci:
Toutes nos félicitations! Vous avez créé avec succès votre premier projet Ionic.
Une fois la configuration du projet terminée, nous sommes maintenant prêts à afficher notre application Ionic. Pour ce faire, accédez au dossier du projet que vous venez de créer via la CLI en exécutant cd ./DemoApp et une fois à l'intérieur de ce dossier, exécutez soit service ionique ou laboratoire ionique.
service ionique et laboratoire ionique Les commandes Ionic de la CLI permettent de compiler votre application et de démarrer un serveur de développement local, vous permettant ainsi d'afficher votre application Ionic dans un navigateur Web sur votre ordinateur..
Dans l'image ci-dessus, j'ai couru le laboratoire ionique Comme vous pouvez le constater, je peux voir mon projet Ionic compilé en tant qu’application Web. Nous n'avons toujours pas réussi à le compiler en tant qu'application native, mais nous le ferons dans des tutoriels ultérieurs..
Je me souviens que lorsque j'ai commencé à développer des applications Ionic, c'était très déroutant au début, surtout de devoir effectuer une grande partie du travail initial via la CLI. En tant que personne qui n'était pas du tout habituée à travailler avec la CLI, ce fut un voyage effrayant pour moi. Je peux donc imaginer ce que certains d'entre vous ressentent peut-être. Je vous conseille de l'accepter - vous serez plus à l'aise et habitué au fur et à mesure, et ne vous inquiétez pas, vous ne cassez rien sur votre ordinateur bien-aimé.!
Nous avons couvert beaucoup de choses dans ce billet, mais avec cette connaissance, vous avez surmonté l'un des plus gros obstacles au codage des applications ioniques. Restez à l'écoute pour le prochain post de cette série!
En attendant, consultez quelques-uns de nos autres articles intéressants sur le codage d'applications ioniques ou essayez l'un de nos cours vidéo complets sur le développement d'applications ioniques.!
Accentsconagua