Fév 18, 2016 Ionic

Ionic : jouer avec ionic creator

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 :

img01

Il suffit de renseigner le formulaire et d ele soumettre.

Connexion

On peut ensuite se connecter avec son compte :

img02

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 :

img07

On nous demande alors le nom et le type de projet :

img08

Par exemple j’ai choisi Test avec un type Blank et j’obtiens ceci :

img09

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 :

img10

Il suffit de cliquer sur la petite poubelle en bas à droite pour avoir cette fenêtre de confirmation :

img11

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 :

img12

On obtient cet aspect :

img13

La première chose à connaître est le bouton de prévisualisation :

img14

Qui permet d’avoir une prévisualisation du résultat :

img15

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 :

img16

En cliquant sur un élément on afficha la page correspondante, par exemple pour Camera Tab Default Page :

img17

On a simultanément à droite les propriétés et actions possibles pour cette page :

img18

On peut de la même façon sélectionner un onglet dans la liste des composants :

img19

Il est alors sélectionné dans l’espace de travail central :

img20

Et ses propriétés apparaissent à droite :

img21

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 :

img22

Attention parce qu’il n’y a pas de confirmation prévue. On n’a plus que 2 onglets :

img23

On va supprimer également la page qui correspondait à l’onglet qu’on a supprimé :

img24

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 :

img25

img26

Avec cet aspect :

img27

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 :

img28

On va changer les textes pour le réalisme de l’apparence :

img33

On va aussi ajouter un bouton :

img47

Avec ces réglages :

img48

D’autre part définissez cette page comme la page par défaut :

img29

La page des résultats

Changez le nom pour Résultats.

Faites glisser une List :

img30

Par défaut on a 3 items, on va en supprimer un :

img31

On va aussi changer les textes pour le réalisme de l’apparence :

img32

Prévisualisation

On peut maintenant prévisualiser le résultat :

img34

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 :

img35

Choisissez le Zip :

img36

On récupère tout ça :

img37

On a ainsi une application Html fonctionnelle qui tourne dans un navigateur :

img38

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 :

img39

Sélectionnez le dossier qui contient ce que vous avez importé.

On vous demande ensuite le nom du projet :

img40

Ne changez rien aux fenêtres suivante en acceptant directement.

Notre projet a été accepté par l’IDE :

img41

On peut maintenant aller le bricoler pour compléter le code. On peut émuler le résultat :

img42

Et bien d’autres choses que je vous propose d’explorer dans un prochain article !

Laisser un commentaire