Ionic et Vanilla JS, quel stack !

31 Août

Amen
3 commentaires
août 31, 2020

Aujourd’hui, nous explorerons le framework 💙Ionic💙 couplé avec le JavaScript (JS) from scratch communément appelé Vanilla. Nous développerons ensemble une page de connexion en utilisant 💙Ionic💙 et le JavaScript pur. Mais avant…

A zero itself is nothing, but without a zero you cannot count anything; therefore, a zero is something, yet zero.

~ Dalai Lama

🚀 Qu’est-ce que le framework Ionic ?

💙Ionic💙 est une boîte à outils d’interface utilisateur mobile open source, permettant de créer des expériences d’applications Web et natives multiplateformes de haute qualité. Il se repose sur du HTML5, CSS/SASS et du JS. Il peut être utilisé avec le JavaScript Vanilla, Angular, React ou même Vue.js (https://ionicframework.com/docs)

🚀Création du projet :

Il s’agit juste d’un répertoire (dossier) qui contiendra trois (03) fichiers:

– index.html
– style.css
– app.js

🚀 Implémentation de la page de connexion dans le fichier index.html :

1- Il nous faudra deux champs de saisie et un bouton à savoir :

– Champ input de type email pour le mail;
– Champ input de type password pour le mot de passe;
– Un bouton pour se connecter évidemment.

En se référant à la documentation, vous avez des tas d’exemples suivant chaque composant et comment les implémenter. Pour les champs input, voici ce que la documentation nous propose :

Quant au composant bouton, voici les possibilités que le framework nous offre:

2- Écriture du code HTML5 :

À présent, passons au code. Nous intégrerons donc nos différents composants dans le fichier index.html en utilisant le CDN (Content Delivery Network) de 💙Ionic💙. Ce CDN permet d’avoir accès aux différents CSS et fonctions JS dont le framework a besoin pour fonctionner correctement :

Ceci étant fait, nous mettrons en place le formulaire dans notre balise <body></body>. En suivant l’architecture du framework, voici le résultat :

Oui ! Effectivement, le bouton est très large ainsi que les champs. Nous appliquerons quelques petites astuces pour avoir une page de connexion de ouf ! Nous utiliserons notamment les grilles ainsi que quelques styles customisés et des classes que Ionic met déjà à notre disposition.

Comme vous le voyez, ce n’est pas mal du tout😃

3- Écriture du code JS :

Enfin, nous récupérerons la valeur de chaque champ et afficherons le tout dans une alerte. Nous serons donc amenés à manipuler les éléments du DOM (Document Object Model) à travers le JS. Let’s go !

Ajoutez ce bout de code avant de fermer la balise </body> tout en bas juste après </ion-app>. Ainsi, notre fichier app.js ne s’exécutera qu’après le chargement de notre page.

a- Récupération du mail :

Nous avons affecté un id au champ de saisie du mail. À travers cet id, nous pouvons facilement accéder à son contenu.

b- Récupération du mot de passe :

Nous avons affecté un id au champ de saisie du mot de passe. À travers cet id, nous pouvons facilement accéder à son contenu.

c- Affichage du mail et du mot de passe :

Nous avons également affecté un id au bouton de connexion. À travers cet id, nous pouvons facilement accéder à son contenu comme les autres éléments du DOM. Ensuite, nous lui avons associé un évènement de clic. Dès lors que l’utilisateur aura cliqué sur le bouton, la méthode alert() s’exécutera et bimmm…! Le mail et le mot de passe s’afficheront😁😁😁

4- Rendu final :

Vous pouvez accéder au projet sur GitHub en suivant ce lien : https://github.com/vy-group/ionic-js-from-scratch

En somme, la flexibilité du framework 💙Ionic💙 et la rapidité d’apprentissage de ce dernier à travers sa documentation facilitent beaucoup la tâche à tout développeur web débutant d’aimer le métier. Tout ce dont vous avez besoin est explicitement défini dans la documentation. Nous espérons que vous aimeriez cet avant-goût. À présent, à vous de faire le grand saut et de vous lancer à fond.