Faire un client Twitter avec Ionic

Si vous avez lu mes précédents articles, vous savez maintenant que je suis plutôt fan de Ionic et que ce framework permet de faire de bonnes applications très facilement et rapidement 🙂

Je vous propose donc de faire le tour des composants Ionic en créant un client twitter.

C’est parti !

Installation

Si vous ne l’avez pas déjà fait, installez node.js. Puis Cordova et Ionic :

Vous pouvez maintenant créer un nouveau projet vide :

et le lancer dans votre navigateur :

Pensez à redimensionner votre navigateur aux dimensions d’un téléphone, par exemple 384×525 (Nexus 4). Vous pouvez aussi visualiser les styles Android et iOS en simultané en utilisant l’option –lab : ionic serve --lab  (ou en ajoutant /ionic-lab à la fin de votre url 😉 ).

Pour l’installer sur votre téléphone, il faudra installer le sdk Android ou iOS, ajouter la plateforme souhaitée et compiler l’application :

Si vous rencontrez des difficultés, n’hésitez pas à consulter le Getting Started de Ionic, laisser un commentaire ici ou aller faire un tour sur le forum Ionic.

Structure de l’application

Si vous regardez les fichiers générés par votre ligne de commande, vous trouverez :

  • Un dossier hooks/ : permet d’exécuter des tâches pendant le build cordova (usage avancé)
  • Un dossier platforms/ (si vous avez ajouté une plateforme) : il contient les fichiers générés par la compilation et notamment le .apk pour Android (platforms/android/ant-build/CordovaApp-debug.apk)
  • Un dossier plugins/ : contenant les plugins cordova relatifs au projet
  • Un dossier scss/ : utilisé seulement si on active sass sur le projet
  • Un dossier www/ : qui contient tout le code de notre application
  • Un fichier config.xml : qui permet de configurer cordova lors du build. Notamment, le nom de l’application et son package.

Dans le dossier www/ vous trouverez la structure standard d’une application front-end et notamment le index.html qui est notre fichier principal.

Etape 1 : Structurer un peu le projet

Pour partir du bon pied, mieux vaut avoir un projet un minimum structuré. Nous allons donc :

  • Créer les fichiers qui nous manquent : www/js/controllers.js, www/js/services.js et www/views/app.html
  • Inclure dans le fichier index.html les scripts créés (controllers.js et services.js)
  • Remplacer tout le contenu de la balise <body>  par une balise <ion-nav-view></ion-nav-view>  (fichier index.html)
  • Créer une première route dans le app.js (Ionic utilise ui-router) avec son controlleur AppCtrl.

J’en ai aussi profité pour supprimer quelques commentaires et changer le nom de l’application angular « starter » en « app ».

L’application doit maintenant afficher une belle page blanche ! Si vous êtes un peu perdu, jetez un œil à mon code sur github 🙂

 Etape 2 : Créer une liste de twitts

Comme tout bon client twitter, il nous faut un feed de twitts. Pour cela nous allons créer un service qui nous renverra les twitts à afficher (fake pour l’instant) puis le markup html nécessaire pour les afficher.

Twitter app : step 2Dans la partie JavaScript, rien de bien étonnant pour qui connaît un peu Angular. On crée un service avec une fonction (getTwitts()) qui renvoie un tableau de twitts dans une promise (ce sera asynchrone par la suite…).

Le contrôleur utilise le service pour récupérer les twitts et les mettre dans le $scope (celui-ci est disponible dans la vue liée au contrôleur, ci qui nous permettra d’accéder aux twitts dans le HTML).

Dans la vue, nous utilisons plusieurs directives angular issues de Ionic. Tout d’abord le <ion-view> (doc) qui définit une « vue ». C’est dans cette vue que nous pourrons placer nos éléments. Ensuite, le <ion-header-bar>  (doc) définit un header, celui-ci en fixé en haut de l’application et peut comporter des boutons d’action. Enfin, le <ion-content>  (doc) est le contenu principal de la vue. Celui-ci est scrollable et prend toute la hauteur restante de la vue.

Pour notre liste de twitts, Ionic propose différentes classes permettant de créer des listes avec un style proche du natif, il suffit donc simplement de mettre les bonnes classes CSS (list, item, item-avatar).

Pas mal non ?

Si vous êtes perdu, passez voir github 😉

Etape 3 : Récupérer plus de twitts

step3Bon, afficher une liste de twitts c’est bien, mais on voudrait aussi pouvoir lire les nouveaux twitts et les twitts passés… Heureusement, Ionic nous fournit deux directives pour ça :  <ion-refresher>  (doc) et  <ion-infinite-scroll>  (doc). Voyons comment les utiliser…

Commençons par le pull-to-refresh :

On ajoute la fonction getNewTwitts() dans le service TwittSrv pour récupérer les nouveaux twitts. Cette fonction renverra, pour le moment, seulement un tableau de 1 twitt aléatoire au bout de 500 milli-secondes. Ne pas oublier d’ajouter $timeout comme dépendance au service et de rajouter la nouvelle fonction dans l’objet retourné par le service (pour qu’elle soit accessible par le contrôleur).

On ajoute ensuite une fonction doRefresh() au contrôleur qui permettra d’ajouter les nouveaux twitts dans le DOM :

Cette fonction récupère simplement les nouveaux twitts et les ajoute au début du tableau de twitts. A noter qu’il faut envoyer l’événement ‘scroll.refreshComplete‘ lorsque l’on a terminé pour que le loader disparaisse.

Et enfin, on ajoute tout simplement la directive  <ion-refresher>  au dessus de sa liste :

C’est elle qui fait tout le job ! C’est pas beau ça ???

Pour la fonction infinite-scroll, les choses sont très similaires :

Le <ion-infinite-scroll>  est à ajouter en fin de liste. Lorsqu’on arrive en bas, la fonction loadMore() sera appelée pour charger des twitts plus anciens.

On vient donc de créer en quelques lignes, une liste infinie avec un pull-to-refresh. Heureusement qu’il y a Ionic pour ça 😉

Le code de cette étape est une fois de plus accessible sur github si nécessaire.

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


 

Je vais m’arrêter là pour ce premier article. Vous pourrez bientôt lire la suite et découvrir un peu plus Ionic… Stay tuned !

13 réponses à “Faire un client Twitter avec Ionic

  1. Le code généré par Ionic pour iOs et Android est dans une webview ? Ou c’est transformé en code natif ?

    • Le code est exécuté dans la webview.

      • Du coup, à part faire un prototype l’intérêt est presque nul non ?
        Et même pour prototyper pourquoi ne pas passer par quelque chose genre Titanium Appcelerator qui du JS produit du réel code natif ?

        • C’est un long débat 😉

          Perso je trouve que le résultat est plutôt bien et pas mal de boites (startup certes) l’utilisent pour de « vraies » applications.

          Pour Titanium je n’ai jamais vraiment testé mais je n’ai pas eu de super retours dessus…

          • C’est un long débat oui 🙂

            Après par exemple iOs refuse les applis avec moins de 60% de code natif.

            Et pour Titanium, ça a sacrément bien mûri maintenant 🙂

          • Je connais mal l’environnement Apple mais ça me parait bizarre qu’ils refusent les app avec peu de code natif… Les app cordova et ionic sont publiées sans problème…

            Pour Titanium faut voir… Après, il faut surtout faire un choix, on peut pas tout tester 😉

  2. Merci pour cette série d’article très intéressante !

    Néanmoins, on dit twitter, mais des tweets 🙂

    • Merci Renaud…

      Effectivement, je ne sais jamais comment l’écrire !!! 😉

      • C’est juste un détail et ça n’enlève rien à la qualité des explications (oh et je te conseille de relire le 2ème article qui est bourré de fautes).

        Hier, j’ai entrepris de refaire pas à pas l’application en suivant les 2 articles et ça marche du tonnerre ! (https://github.com/marmotz/twitionic)

        Vivement la suite 🙂

        • Cool 🙂

          Content que ça t’ai plu !!!
          La suite arrivera bientôt 😀

          • Bonne nouvelle 🙂

  3. […] Faire un client Twitter avec Ionic | Loïc Knuchel. Si vous avez lu mes précédents articles, vous savez maintenant que je suis plutôt fan de Ionic et que ce framework permet de faire de bonnes applications très facilement et rapidement Je vous propose donc de faire le tour des composants Ionic en créant un client twitter. C’est parti ! Si vous ne l’avez pas déjà fait, installez node.js. Puis Cordova et Ionic : $ sudo npm install -g cordova ionic Vous pouvez maintenant créer un nouveau projet vide : $ ionic start twitter-app blank et le lancer dans votre navigateur : $ cd twitter-app/ && ionic serve Pensez à redimensionner votre navigateur aux dimensions d’un téléphone, par exemple 384×525 (Nexus 4). Pour l’installer sur votre téléphone, il faudra installer le sdk Android ou iOS, ajouter la plateforme souhaitée et compiler l’application : $ ionic platform add [android/ios] $ ionic run [android/ios] Si vous regardez les fichiers générés par votre ligne de commande, vous trouverez : L’application doit maintenant afficher une belle page blanche ! […]

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="">