Dans un article précédent, je vous ai parlé du framework ionic qui permet de développer des applications mobiles en utilisant les technologies du Web comme javascript, html et css. Dans cet article, je vais vous montrer comment créer une application ionic 4 et l'exécuter dans un simulateur Android.
Installer inonic 4 et Cordova
Pour créer une application ionic 4, nous allons d'abord préparer l'environnement de travail. Rappelons que ionic est un framework sous nodejs. Lisez l'article qu'est ce que nodejs si vous ne connaissez pas le framework nodejs.
Télécharger et installer gratuitement nodejs.
Configuer votre environnement pour Android en suivant les instructions sur la page officielle Android Setup. Si vous optez pour ios, vous pouvez suivre les instructions sur cette page. Ios Setup
Insllater cordova
npm install -g cordova
Installez ionic
npm install -g ionic
Créer un projet ionic 4
Une fois les installations terminées, vous pouvez maintenant créer votre projet ionic 4.
Exécuter la commande suivante :
ionic start myApp
La version 4 de ionic n'est pas encore officielle. Nous allons utiliser la version beta. Pour cette raison, la commande précédente va vous demander si vous souhaitez créer un projet ionic 3 ou 4. Nous allons choisir ionic 4.
[INFO] You are about to create an Ionic 3 app. Would you like to try the release candidate for Ionic 4?
Ionic 4 uses the power of the modern Web and embraces the Angular CLI and Angular Router to bring you the best
version of Ionic ever. See our blog announcement[1] and documentation[2] for more information. We'd love to hear
your feedback on our latest version!
[1]: https://blog.ionicframework.com/ionic-framework-4-0-rc-shipped-paving-way-for-final
[2]: https://beta.ionicframework.com/docs/
? Try Ionic 4? (y/N)
Après avoir choisi yes ionic 4 va vous proposer les 3 templates disponibles: blank, sidemenu et tabs.
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: (Use arrow keys)
❯ blank | A blank starter project
sidemenu | A starting project with a side menu with navigation in the content area
tabs | A starting project with a simple tabbed interface
Nous allons choisir le template blank. Une fois ce choix effectué, ionic va générer la structure de votre projet et va télécharger toutes les dépendances.
✔ Preparing directory ./myapp - done!
✔ Downloading and extracting blank starter - done!
Installing dependencies may take several minutes.
✨ IONIC DEVAPP ✨
Speed up development with the Ionic DevApp, our fast, on-device testing mobile app
- ? Test on iOS and Android without Native SDKs
- ? LiveReload for instant style and JS updates
--> Install DevApp: https://bit.ly/ionic-dev-app <--
Ionic va également vous demander si vous souhaitez installer AppFlow. Dans cet exemple, nous allons répondre n.
? IONIC APPFLOW ?
Supercharge your Ionic development with the Ionic Appflow SDK
- ⚠️ Track runtime errors in real-time, back to your original TypeScript
- ? Push remote updates and skip the app store queue
Learn more about Ionic Appflow: https://ionicframework.com/appflow
────────────────────────────────────────────────────────────
? Install the free Ionic Appflow SDK and connect your app? (Y/n)
Après cette dernière étape, votre projet ionic 4 est prêt.
[INFO] Next Steps:
- Go to your newly created project: cd ./myapp
- Run ionic serve within the app directory to see your app
- Build features and components: https://beta.ionicframework.com/docs/building/scaffolding
- Get Ionic DevApp for easy device testing: https://bit.ly/ionic-dev-app
Démarrez votre projet ionic 4 avec les commandes suivantes:
cd myApp
ionic serve
La commande ionic serve nous rappelle celle de Angular ng serve. Votre projet va démarrer avec les informations suivantes:
> ng run app:serve --host=0.0.0.0 --port=8100
[INFO] Development server running!
Local: http://localhost:8100
External: http://192.168.1.64:8100
DevApp: myapp@8100 on Blochaous-MBP-2
Use Ctrl+C to quit this process
[INFO] Browser window opened to http://localhost:8100!
[ng] ℹ ｢wdm｣: wait until bundle finished: /
[ng]
[ng] Date: 2019-01-07T18:22:32.168Z
[ng] Hash: 46a8079867dad465713b
[ng] Time: 10624ms
[ng] chunk {62m} 62.js, 62.js.map () 19.3 kB [rendered]
[ng] chunk {1m140} 140.js, 140.js.map () 3.34 kB [rendered]
[ng] chunk {common} common.js, common.js.map (common) 20.7 kB [rendered]
[ng] chunk {home-home-module} home-home-module.js, home-home-module.js.map (home-home-module) 5.6 kB [rendered]
[ng] chunk {main} main.js, main.js.map (main) 33.2 kB [initial] [rendered]
[ng] chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 223 kB [initial] [rendered]
[ng] chunk {runtime} runtime.js, runtime.js.map (runtime) 8.85 kB [entry] [rendered]
[ng] chunk {styles} styles.js, styles.js.map (styles) 70 kB [initial] [rendered]
[ng] chunk {vendor} vendor.js, vendor.js.map (vendor) 5.16 MB [initial] [rendered]
[INFO] ... and 170 additional chunks
[ng] ℹ ｢wdm｣: Compiled successfully.
Naviguez vers http://localhost:8100 et vous verrez votre projet s'afficher dans le navigateur. Dans chrome , il s'affiche comme ci-dessous:
Rappelons que ionic est un framework qui utilise les technologies du Web. Il est donc normal qu'un projet ionic s'exécute dans un navigateur web.
Démarrer ionic 4 dans un simulateur Android
Si vous avez configuré correctement Android en suivant les instructions de la page Android Setup, vous pouvez démarrer ionic dans un simulateur Android avec la commande suivante :
ionic cordova run android
Cette commande va créer un projet Android avec Android Studio. Elle va compiler le projet. Elle va créer le .apk, va l'installer dans le simulateur puis va le démarrer comme le montre l'image ci-dessous.
Dans un prochain article, j'expliquerai le contenu d'un projet ionic 4. Pour l'instant, retenez que vous pouvez créer une application android avec les technologies Web en utilisant ionic 4 framework.
