Dans le précédent article j’ai présenté rapidement le principe des applications hybrides et Ionic avec son outil Ionic Creator. Dans le présent article je vais présenter justement cet outil qui permet de réaliser facilement des interface graphiques pour application hybride utilisant le framework Ionic.
Inscription, connexion et premier projet
Inscription
La première chose à faire pour pouvoir utiliser l’outil est de créer un compte :
Il suffit de renseigner le formulaire et d ele soumettre.
Connexion
On peut ensuite se connecter avec son compte :
Donc du grand classique ! Avec un compte gratuit on a droit à un seul projet, on va s’en contenter pour cet article…
Créer un projet
Pour créer un projet il suffit de cliquer sur le bouton New Project ou sur le lien Start here :
On nous demande alors le nom et le type de projet :
Par exemple j’ai choisi Test avec un type Blank et j’obtiens ceci :
Je peux maintenant utiliser l’outil !
Supprimer un projet
Pour supprimer un projet c’est aussi très simple. Sur votre écran d’accueil vous avez tous vos projets :
Il suffit de cliquer sur la petite poubelle en bas à droite pour avoir cette fenêtre de confirmation :
Si vous confirmez en entrant DELETE et en cliquant sur Delete Project alors votre projet est définitivement supprimé.
Un Quiz
Création du projet
Pour s’amuser un peu avec le créateur on va créer l’interface d’un quiz. On crée un nouveau projet en choisissant le type Tabs et le nom Quiz :
On obtient cet aspect :
La première chose à connaître est le bouton de prévisualisation :
Qui permet d’avoir une prévisualisation du résultat :
Vous pouvez d’ailleurs constater que l’application est déjà fonctionnelle parce qu’on à trois pages, chacune s’affichant quand on clique sur le bouton correspondant.
On revient en mode création avec l’autre bouton.
Pour accéder aux pages ça se passe dans l’onglet Pages dans la partie supérieure gauche :
En cliquant sur un élément on afficha la page correspondante, par exemple pour Camera Tab Default Page :
On a simultanément à droite les propriétés et actions possibles pour cette page :
On peut de la même façon sélectionner un onglet dans la liste des composants :
Il est alors sélectionné dans l’espace de travail central :
Et ses propriétés apparaissent à droite :
On trouve en particulier la page avec laquelle il est associé et la possibilité de la changer. On peut aussi déplacer l’onglet et changer l’icône.
Adaptation du projet
Les onglets
Pour le quiz on va se contenter de deux onglets. On va par exemple supprimer Cloud Tab en cliquant sur la petite poubelle :
Attention parce qu’il n’y a pas de confirmation prévue. On n’a plus que 2 onglets :
On va supprimer également la page qui correspondait à l’onglet qu’on a supprimé :
On a maintenant deux onglets et deux pages, c’est parfait.
On va changer les appellations et icônes des onglets pour les adapter au quiz. Pour celui-ci on va prévoir deux pages, une pour les questions et une autre pour les résultats.
Voici les changements :
Avec cet aspect :
La page des questions
Changez le nom de la page pour Questions.
A partir de la zone qui comporte tous les composants faites glisser un Card et 3 Radio :
On va changer les textes pour le réalisme de l’apparence :
On va aussi ajouter un bouton :
Avec ces réglages :
D’autre part définissez cette page comme la page par défaut :
La page des résultats
Changez le nom pour Résultats.
Faites glisser une List :
Par défaut on a 3 items, on va en supprimer un :
On va aussi changer les textes pour le réalisme de l’apparence :
Prévisualisation
On peut maintenant prévisualiser le résultat :
Et vérifier que les onglets fonctionnent.
On a rien réalisé de bien extraordinaire mais ça permet de manipuler un peu ce créateur et se rendre compte qu’il est très facile à utiliser.
Exportation
Il ne nous reste plus qu’à exporter notre projet en utilisant cette icône :
Choisissez le Zip :
On récupère tout ça :
On a ainsi une application Html fonctionnelle qui tourne dans un navigateur :
Enfin, quand je dis fonctionnelle je parle juste d el’aspect et du fonctionnement des onglets qui affichent bien les pages. Il nous reste encore à coder l’application mais on a toute l’architecture en place.
Intel XDK
Dans le précédent article je vous ai parlé de Intel XDK qu’on va maintenant utiliser. On va créer un projet à partir de ce qu’on a importé.
Lancez l’IDE et choisissez Import Your HTML5 Code Base :
Sélectionnez le dossier qui contient ce que vous avez importé.
On vous demande ensuite le nom du projet :
Ne changez rien aux fenêtres suivante en acceptant directement.
Notre projet a été accepté par l’IDE :
On peut maintenant aller le bricoler pour compléter le code. On peut émuler le résultat :
Et bien d’autres choses que je vous propose d’explorer dans un prochain article !