Creation d’une application mobile simple avec le framework Ionic pour les débutants : une calculette.

Suite à ce post sur ma page facebook ou je parles des diffrentes possibilités de faire les applications mobiles et vu le fait que cela reste flou pour beaucoup de persones, on va construire une calculette simple avec “Ionic” de A à Z juste pour apprendre, on refrea la meme calculette avec “Flutter”,”Xamarin”, et de manière native avec java puis kotlin dans android studio, mais ce post est dedié seulement àionic (code source se trouve ici sur mon github).

1. Aller sur cette page rapidement et telecharger et installer Nodejs: pour developper avec ionic, il faut nodejs car ionic est basé sur nodejs pour son developement.Dans la page, prenez bien soin de telecharger ce qui est evidence en rouge

2. Une fois nodejs installé, ouvrez une fenetre powershell (les exemples ici sont fait avec window comme system d’exploitation), dans la barre de recherche de votre windows commencer à tapper “powershell”

quand “Powershell” s’ouvre, écrivez la commande suivante:

node — version

si vous voyez le meme résultat que moi sur cette fenetre (15.17.3) alors nodejs est dejà bien en place dans votre machine, si non vous devez le reinstaller.

3. Je vous conseille de telecharger et installer aussi VSC(visual studio code), ce n’est pas obligé on peut utiliser n’importe quel editeur de texte, mais VSC c’est l’editeur pour n’importe quel type de developpement de nos jours, allez y ici telechargez le et installez le.

4. A partir de la fenetre de “Powershell ” ouverte dans l’etape précédente, tapper cette commande ci et appuyez sur la touche entrée pour installer de manière globale ionic dans votre machine.

npm install -g @ionic/cli native-run cordova-res

5. une fois l’installation de ionic terminée, toujours sur powershell, tappez la commande suivante:

ionic --version

voilà, ionic est aussi installé dans votre machine et chez moi, la commande me dit que j’ai la version 6.16.3 de ionic installé dans ma machine.

les bonnes choses peuvent à présent demarrer.

toujours dans la fenetre de powershell, deplacer vous dans le repertoire ou vous voulez creer le proget ( en utilisant la commande cd “NomDuChemin”) puis tappez la commande suivante:

ionic start ITinnovCalculette blank --type=angular --capacitor

L’image ci dessus explique ce que fait chaque parametre de la commande principale de ionic.

une fois le proget crée (notre proget s’appelle ITinnovCalculette), naviguer dans le repertoire du proget avec powershell comme en image ci dessous et tappez :

code .

Le proget s’ouvre à vos grands yeux dans VSC comme en image:

J’ai pris le soin de dire sur la photo ci dessus en grande ligne ce qui est important de savoir dans un proget ionic comme je vous l’ai dit est en fait un proget angular, le but dans ce post n’est pas d’expliquer à quoi sert chaque fichier, mais retenez juste que ce proget ionic étant basé sur Angular, il suit le modele MVC donc j’ai longuement parlé dans ma page, la vue (View =V) est represente par les fichiers HTML(+css) par exemple “app.component.html/app.component.css”, le controller(C) par un fichier typscript (extension .ts) par exemple “app.component.ts”, et generalement le model (M) est generalement une classe écrite en typscript qui doit contenir les données qu’on veut manipuler dans la app.

en haut de la barre de navigation dans visual studio code, faite un clique sur “New terminal ”(j’esperes que vous avez VSC comme moi en anglais, je vous ai toujours dit qu’il faut tout faire en anglais bon si non cherchez la corerspondance en français)

tappez dans la commande de VSC ceci

ionic serve — lab

inionic va commencer à compiler l’application et lancer votre navigateur avec une page qui vous fait voir la app pour le moment dans votre navigateur, une est android, et une autre est ios:

Retournons dans visual studio code, et ouvrez le fichier home/home.page.ts comme dans l’image suivante et copiez coller le code ci dessous:

Ouvrez également le fichier home.page.html et copiez- collez le code suivant

ouvrez également le fichier “home.page.scss” et tappez le code suivant:

Allez successivement sur le menu “File” et sauver tout

Et voilà.. si vous reguardez maintenant sur votre navigateur, la page s’est automatiquement mise à jour et on a ceci:

Amusez vous et faites vos calculs comme vous voulez, ça marche non? le code est assez simple et je ne vais pas me mettre à expliquer ligne par ligne ce que le code fait, mon intention dans cet article est de vous faire voir comment fonctionne ionic et non comment ecrire du code typscript.

Place maintenant à le faire fonctionner dans notre telephone android.

Vous devez avoir l’option developpeur abilité dans votre telephone android pour installer la app dans votre telephone (https://www.frandroid.com/comment-faire/tutoriaux/184906_comment-acceder-au-mode-developpeur-sur-android)

Connecter votre telephone avec un cable USB à votre ordinateur, retourner sur VSC et faite un ctrl +c pour dans la fenetre de VSC pour arreter la page web precedement ouverte puis tappez la commande suivante (accepter tout ce que vous propose la commande, au fait elle va decouvrir que vous avez votre telephone connecté et ainsi creer la apk de android et installe la app dans votre telephone):

vous devez au prealable installer la SDK de android dans votre ordinateur(https://developer.android.com/studio/releases/platform-tools)

ionic capacitor run android

eh voilà.. voici ce que je vois dans mon telephone android

et ça marche, le code source de cet exemple concret se trouve ici sur mon github.

---

---

Share

Comments (0)

Leave A Comment

Your Name:
Comment: