L’application projetsdiy également disponible sur iOS et Android, premier projet mobile avec Ionic 3

Bonjour à tous. Voici presque deux mois que je n’ai publié aucun tutoriel sur le blog. Après un peu vacances, j’ai pris le temps de réfléchir à d’autres thèmes et d’autres projets. Pour la rentrée, je vous propose de débuter une nouvelle catégorie sur le développement d’applications pour iOS et Android. L’idée est de vous proposer une série de tutoriels pour vous permettre de développer vos propres applications pour smartphone ou tablette. Nous verrons par exemple comment piloter et récupérer des infos directement avec un micro-contrôleur ESP8266, ESP32 (ou un Arduino) depuis un téléphone sans avoir à installer un serveur domotique intermédiaire. 

Comme cela fait quelques années que je n’avais pas fait de développement d’application mobile, j’ai profité du mois d’août pour me remettre à niveau. Rien de tel qu’un projet pour se motiver. J’ai donc profité de l’occasion pour développer une application mobile qui reprend le contenu du blog.

L’application projetsdiy.fr pour Android et iOS développée avec le framework Ionic 3

On dispose de 2 familles de technologies pour développer des applications mobiles :

  • Le code natif. En Java sur Android et en Swift (le remplaçant de l’Objective C) pour iOS
  • Le développement hybride. Pour simplifier, l’application est un site internet qui peut accéder aux ressources et aux matériels du téléphone ou de la tablette

Comme d’habitude, chaque technologie apporte son lot d’avantages et d’inconvénients. Performance et parfaite intégration au système pour les applications natives. Rapidité de développement et code (quasi) identique pour les applications hybrides.

A part pour le développement de jeux ou d’applications grand pubic, le développement cross platform hybride est une excellente solution. Dans ce domaine, le framework Ionic se démarque des autres solutions.

Entièrement Open Source, Ionic framework est une sur-couche qui s’appuie sur deux autres projets majeurs :

  • Cordova (un projet Open Source de la fondation Apache), le moteur qui permet de faire le lien entre le code HTML5 de l’application et d’accéder aux ressources matériels (caméra, accéléromètre, microphone…)
  • Angular (un projet Open Source développé en grande partie par Google), le moteur de développement de l’application Web. Avec Angular, on développe l’application sous la forme d’un site internet

Ionic vient habiller Angular avec des éléments graphiques qui miment le système sur lequel l’application est lancée. Les icônes, la forme des fenêtres, les animations de transition… ont été reproduites avec des styles CSS pour mimer l’interface d’iOS, Android ou Windows Phone (euh, passons).

Quelques exemples de composants d’interface

Pour utiliser les ressources du téléphone, les développeurs Ionic ont développé des wrappers, un composant logiciel qui fait le lien entre un plugin Cordova (écrit Java sur Android, Swift ou ObjectiveC sur iOS) et le code Javascript de votre projet Ionic.

Ionic est une boite à outil complète qui permet de gérer tous les aspects du projet jusqu’à la publication sur l’Apple Store, le Google Play Store ou tout simplement sur son smartphone personnel :

  • Ajouter des plugins Cordova pour prendre en charge des fonctionnalités (microphone, caméra, accéder aux photos, contacts…)
  • Compiler l’application pour Android ou préparer le projet Xcode pour iOS (un Mac sera nécessaire pour compiler l’application et l’installer sur un iPhone ou un iPad)
  • Ajouter des éléments aux projets HTML Angular, pages, services, pipe (mise en forme des éléments HTML)…

Si vous découvrez le développement d’applications mobiles, c’est probablement du chinois, mais ce n’est pas grave, nous aurons l’occasion de reprendre tout ça en détail dans les prochains tutoriels. En attendant, voici un petit aperçu de ce que vous pourrez réaliser avec Ionic.

Comment fonctionne l’application ?

L’application se connecte au blog projetsdiy.fr pour récupérer les articles et les catégories

Il m’a fallu un peu plus de 2 semaines pour développer une version fonctionnelle avec la plupart des fonctionnalités que j’imaginais :

  • Affichage de la liste des derniers articles publiés avec chargement infini des anciens tutoriels. Cela permet de limiter la charge sur le serveur ainsi que l’espace sur votre smartphone.
  • Mise en favori des articles,
  • Mise en cache pour lecture hors lignes (10 derniers articles),
  • Accès aux articles par catégorie ou mot clé,
  • Recherche d’article sur le blog,
  • Intégration de la chaine Youtube.

Le contenu occupe la totalité de l’écran. Un sidemenu permet d’accéder aux différentes fonctions de l’application. Pour le moment, je bloque encore sur un problème pour intégrer dans l’application le forum et la chaine Youtube (d’ailleurs, c’est interdit par Google, donc la lecture des vidéos risque de toujours se faire via le navigateur externe).

Application mobile iOS et Android projetsdiy.fr sidemenu

Le sidemenu permet d’accéder à toutes les fonctions de l’application

La liste des articles s’adapte automatiquement à la taille de l’écran. Sur smartphone, elle occupe une seule colonne.

Deux onglets permettent de passer rapidement de la liste des articles aux articles favoris.

Derniers articles publiés sur le blog

Derniers articles publiés sur le blog avec chargement infini lorsqu’on arrive à la fin de la liste

Sur tablette, l’historique des article s’affiche sur deux colonnes

Comment faire :

  • Platform de ionic-angular. La fonction platform.width() permet de passer à True / False une variable utilisée ensuite dans le code HTML de la page . On charge le template en fonction de la valeur brai/faux à l’aide de *ngIf comme ceci
<ng-template *ngIf=”isTablette; then tablette; else mobile”></ng-template>
<ng-template#tablette>
<!– code HTML tablette –>
<ng-template#mobile>
<!– code HTML tablette –>
Liste des articles sur deux colonnes

La liste des articles passe sur deux colonnes dès que l’application détecte qu’elle est exécutée sur une tablette (largeur de l’écran supérieure à 767 pixels).

L’étoile dans le coin supérieur droit de l’écran permet de marquer l’article comme favori. La liste des articles favoris est automatiquement actualisée dès qu’un article est ajouté ou retiré de la liste. Les identifiants des articles favoris ainsi que le contenu de chaque article est stocké dans une base de données SQLite locale à l’aide du plugin Local Storage.

Comment faire :

  • @ionic/storage
  • Events de @ionic-angular. Fonctions publish et subscribe

Le bouton de partage permet d’envoyer le lien de l’article par n’importe quel réseau social ou par email. 

Comment faire :

  • @ionic-native/social-sharing

Application mobile. Tirez l’écran vers le haut pour ouvrir l’article précédent. Vers le bas pour aller à l’article suivant.

Un accès rapide aux articles d’une catégorie. Les icônes proviennent du site icons8.com. Elles sont gratuites (en basse résolution), à condition de citer le site.

Recherche d'articles et de projets par catégorie

Application mobile. Recherche d’articles et de projets par catégorie

Enfin la liste des vidéos de la chaine Youtube. Dommage, la lecture se fera obligatoirement depuis le navigateur.

Liste des vidéos publiées sur la chaîne Youtube

Liste des vidéos publiées sur la chaîne Youtube

Ensuite, il m’a fallu encore une petite semaine pour maitriser la compilation de l’application sur Android et Xcode, corriger les défauts de la version de production puis publier sur les Stores.

Vous ne trouverez aucune publicité sur l’application. De même, il n’y a aucune analyse de l’usage que vous en ferez. Pour financer l’achat de composants (et maintenant le compte développeur Apple), j’ai intégré une section Bons Plans avec un véritable filtre de recherche. C’est très intéressant pour apprendre à manipuler des objets JSON.

Les offres sont classées par catégorie de produits. Vous ne trouverez que des produits destinés aux développements d’objets connectés DIY (Arduino, composants, outillage, Raspberry Pi…) ainsi que la plupart des fabricants de box et accessoires domotiques (Aqara Xiaomi, Belkin WeMo, DI-O Chacon, Fibaro, Myfox, Nest, Google Home, Eedomus…). Pour figurer dans la liste, le produit doit au moins être proposé 5% moins chère qu’à la normale. Les offres sont mises à jour quotidiennement.

Les offres sont classées par catégories (imprimantes 3D, Arduino, Raspberry Pi, Starter Kits, Drones…) et par marques

Lorsqu’il y a beaucoup de promos, vous pouvez appliquer plusieurs filtres supplémentaires : uniquement avec Code Promo, par gamme de prix, avec un taux de réduction mini.

Filtres de recherche
Trier par prix, taux de réduction, avec code promo, boutique, alphabétique.
Sélection par gamme de prix et taux de réduction mini

 

Comme vous pouvez le constater, Ionic 3, Cordova et Angular sont vraiment très puissant. Vous pouvez tester par vous même l’application en vous rendant sur l’Apple Store ou le Google Play Store.

 

 

L’application sera améliorée dans les prochaines semaines. La mise en cache des articles n’est pas satisfaisante pour le moment. Il fallait bien commencer par quelques choses. Dans la prochaine version, les articles seront mis en cache (en arrière plan) pour permettre une lecture ultérieure hors ligne. Je vous propose également d’ajouter un système de notification.

Nous utiliserons la plupart des notions utilisées dans les prochains tutoriels. J’espère que vous trouverez l’application à votre goût. N’hésitez pas à proposer d’autres fonctionnalités ou à me faire part de vos idées pour d’autres développements.

Print Friendly, PDF & Email

Inscrivez-vous à la newsletter hebdomadaire

Aucun spam et aucun autre usage ne sera fait de votre email. Vous pouvez vous désinscrire à tout moment.

Comparateur de prix

Bons plans

Les offres suivantes se terminent bientôt. Utilisez le coupon indiqué pour profiter du prix promo

Tags:

Domotique et objets connectés à faire soi-même