Faire un client Twitter avec Ionic – partie 2

Visiblement la première partie vous a plu, alors on continue !

Etape 4 : Publier un twitt

On va maintenant vouloir créer ses propre twitts. Pour cela je vous propose d’utiliser un modal (doc). Mais commençons par le début. Pour twitter, il nous faut un compte. Nous allons donc créer un service qui nous renverra l’utilisateur actuel :

Une fois de plus on mock les données pour avoir juste ce qu’il nous faut et avancer.

Ensuite, notre TwittSrv doit implémenter une nouvelle fonction : sendTwitt(twitt). Rien de plus simple :

Ici on prend le twitt créé par l’utilisation (il y a uniquement le contenu), on lui rajoute l’utilisateur actuel et on le renvoie. Dans une application réelle, on enverrait tout simplement ces données à twitter et lui nous renverrait le twitt créé. Bien sûr il ne faut pas oublier de 1/ déclarer cette fonction dans le service et 2/ ajouter le UserSrv en dépendance de notre service TwittSrv (tout comme $q et $timeout). Voilà pour la partie « backend » 🙂

Pour créer un Modal avec Ionic, il nous fait faire appel à un service particulier : $ionicModal. Il y aura 3 actions en lien avec le modal : l’ouvrir (pour écrire un nouveau twitt), le fermer (si on ne veut plus twitter) et le fermer en envoyant le twitt rédigé :

Le modal sera créé à partir d’un template de vue (qu’on créera juste après) et on lui passe le scope afin qu’il puisse communiquer avec le contrôleur. On stocke l’objet retourné afin de pouvoir agir dessus (show() et hide() notamment). Le reste du code est relativement simple. A noter simplement qu’il faut bien supprimer le modal lorsqu’on ne souhaite plus l’utiliser (lorsque le contrôleur est détruit par exemple). Ici encore, n’oubliez pas d’ajouter $ionicModal comme dépendance du contrôleur.

Le template du modal est une simple vue mais avec la directive <ion-modal-view>  :

Ici, pas grand chose de nouveau. Les boutons avant le titre du header se retrouvent à gauche et ceux après se retrouvent à droite. Pour les formulaires, Ionic propose pas mal de styles de champs. On va maintenant simplement ajouter quelques styles à notre compter de caractère :

Bien sûr, toujours aucun moyen de créer un nouveau twitt depuis l’application, corrigeons ça avec un bouton dans le header :

Il suffit de le mettre juste après le titre de la vue principale (pour avoir le bouton affiché à droite).

Voir le code de cette étape sur github.

Etape 5 : Navigation avec des onglets (tabs)

L’application commence à être fonctionnelle mais si on veut rajouter de nouvelles choses il va falloir mettre en place une navigation un peu mieux. Il y a, en général, il y a deux options pour la navigation principale : des onglets ou un menu de côté. Commençons par les onglets, comme sur l’application twitter officielle.

Avec Ionic, les tabs (doc) fonctionnent avec une vue parente qui définit les tabs, et des vues enfants. Grâce à ui-router, il sera très simple de définir ce type de routes :

Comme vous pouvez le constater, on possède maintenant un état parent (tabs) et des états fils (tabs.twitts, tabs.notifications, tabs.profil). Notre état parent est défini comme abstrait pour qu’on ne puisse pas y accéder (ça n’aurais pas vraiment de sens…). Chaque état fils a son propre contrôleur avec sa propre vue. Notez aussi que chaque état fils doit spécifier dans quelle sous-vue il doit être injecté (twitts-tab, notifications-tab ou profil-tab). Ces noms doivent correspondre à ceux qu’on a fixés dans notre vue tabs.html. D’ailleurs, puisqu’on en parle, la voici :

Encore une fois, les directives Ionic nous rendent vraiment la vie plus facile ! Le <ion-tabs>  permet d’indiquer qu’on souhaite utiliser des tabs et de les configurer (notamment leur style). Ensuite, chaque <ion-tab>  correspond à une tab. On leur définit un nom (title), les icônes à utiliser (en fonction de si elle sont actives ou pas) ainsi que l’état sur lequel se rendre lorsqu’on clique dessus. A l’intérieur de celui-ci, on y met les vues souhaitées. Comme il y en a plusieurs, il faut les nommer pour que ui-router sache ce qu’il doit inclure et à quel endroit (cf les routes).

Enfin, il faut créer les contrôleurs et vues associées. On va renommer le contrôleur AppCtrl en TwittsCtrl ainsi que la vue app.html en twitts.html (pour correspondre à l’état tabs.twitts). On va ensuite créer trois contrôleurs vide :

Et les vues notifications.html et profile.html avec un minimum d’éléments :

Tadam… Et voilà nos tabs 😀

Voir le code de cette étape sur gihub.

Etape 6 : La navigation secondaire

Parfois, une navigation secondaire peut s’avérer intéressante. Notamment lorsqu’on choisi des tabs comme navigation principale, on ne souhaite pas en inclure trop. Une manière habituelle de régler ce problème est d’ajouter un bouton avec une liste déroulante d’options. Et ça tombe bien, Ionic a un composant parfait pour ça : le Popover (doc).

Commençons par ajouter un bouton « more » à droite dans le header. En général, on met une icône avec « … ». Pour cela il suffit d’ajouter notre nouveau bouton juste après celui qui nous permet de créer un nouveau twitt :

On peut noter qu’au click, on affiche la popover, c’est donc maintenant que nous allons la créer. Pour cela, Ionic nous fournit un service particulier : $ionicPopover.

Son utilisation est très similaire au modal, on fourni un template avec les $scope souhaité et on récupère l’objet popover qui l’on met dans le $scope pour y accéder depuis la vue (notamment pour l’activer: popover.show($event)). Comme le modal, la popover est une vue à part entière, voici le template que je vous propose :

Comme pour le modal, il faut utiliser une directive de vue spéciale <ion-popover-view> . Le reste de la vue est maintenant relativement classique. A noter que pour que la popover se referme au click, j’ai rajouter un popover.hide() sur l’ensemble de la liste. Par ailleurs, comme sur l’application twitter officielle, le premier élément de la liste affiche le compte utilisateur. Il faut donc mettre notre utilisateur courant dans le $scope :

L’idéal  est de le mettre dans le $scope du contrôleur TabsCtrl afin qu’il soit accessible dans toutes les vues de l’application (le $scope est hérité dans les contrôleurs fils). Pour terminer, n’oubliez pas d’ajouter les nouvelles dépendances aux contrôleurs TwittsCtrl etTabsCtrl : $ionicPopover et UserSrv 🙂

Voir le code de cette étape sur gihub.

Voici l’application android générée et son aperçu actuel :

 

Toujours motivé ? A bientôt pour la prochaine partie… 😉

5 réponses à “Faire un client Twitter avec Ionic – partie 2

  1. Pourquoi avoir créé un 2ème service UserSrv et pas avoir inclus la fonction getUser dans TwittSrv ?
    Y a-t-il une raison cachée et intéressante à savoir ou est-ce simplement un choix subjectif ?

    • La raison c’est le « single responsibility principle ». C’est mieux de séparer les choses qui n’ont pas de rapport (la gestion des utilisateurs et et tweets par exemple).
      Mais techniquement on pourrait le mettre dans TwittSrv, ça marcherait tout aussi bien !

  2. Justement, les tweets que tu retournes dans TwittSrv.getTwitts retourne déjà les utilisateurs des tweets. Donc ca ne me paraissait pas « sans rapport ». Mais ok, je comprends mieux.
    J’attends de voir la suite, surtout si tu vas jusqu’au branchement avec l’API twitter 🙂

    • L’objectif étant plutôt de faire découvrir Ionic et Cordova, je me focalise plutôt à faire le tour des fonctionnalités, outils, plugin et des pattern habituels pour les applications. La connexion avec l’API twitter ferait un article un peu long et pas forcément en relation direct avec l’objectif de cette série. Mais pourquoi pas lorsque j’aurais fait tout ce que j’ai prévu…

  3. Marco

    Merci beaucoup pour ce tuto !
    Comme Renaud, j’attend avec hâte la suite.
    Et bien d’autres sur ionic entre autre.
    ++

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">