Gestion d'une cave à vins. consultation, mise à jour, rangement, création de casiers etc.
Le répertoire assets qui contient les images est accessible depuis n'importe quel template, n'importe quel SCSS via le path "../assets". La raison est que, au build, ionic crée en guis de contexte de serveur un répertoire "www" dans lequel on trouve, au premier niveau, le répertoire build et le répertoire assets. Dans le répertoire build, tout a été transpilé, minifié et webpackisé dans main.js, main.css. Tous les chemins indiqués à ce niveau doivent donc remonter d'un répertoire et redescendre dans assets. Conclusion: toutes les images, tous les fichiers contenus dans assets sont inclus via un chemin "../assets".
| Feature | description | implémentée |
|---|---|---|
| liste des bouteilles | lister les bouteilles de la cave | oui |
| recherche | recherche multicritères, par région, couleur, appellation, millésime... | oui |
| recherche | recherche par mot clé | oui |
| importer | importer la cave depuis cavus sous forme CSV | oui |
| importer | importer la cave depuis cavus sous forme XLS | oui |
| statistiques | gérer quelques statistiques | oui |
| statistiques | les montrer graphiquement | oui |
| importer | idéalement automatiser la connexion à cavus et récupérer le flux XLS | non |
| stocker les factures | photographier une facture et l'associer à un lot de bouteilles | non |
| gérer le login | identifier l'utilisateur (FB, tweeter, mail...) | mail, FB, ano |
| authentifier l'utilisateur | gérer l'empreinte digitale | non |
| mise à jour | mise à jour d'un lot de bouteille | partiel |
| détail | lister les photos liées à une bouteille | non |
| retirer une bouteille | mettre à jour le nombre de bouteilles restantes, saisir un court formulaire d'impression sur la bouteille | oui |
| ranger les bouteilles | faciliter le travail pour retrouver les bouteilles rangées. pointer les emplacements, d'n'd pour déplacer ? etc. | oui |
| recherche | compléter avec options 'bouteilles actuellement en cave' et 'vaforites seulement' | oui |
| chargement | effectuer le chargement en background pour plus de fluidité, par blocs de 50 ? | non |
- pour l'instant je suis contraint pas les données issues de cavus. Le problème est que ce sont des libellés qui sont stockés. Il faudrait extraire les libellés dans des tables / json statiques livrés avec l'appli et changer les données pour utiliser des IDs qui pointent vers ces données.
- cela serait plus propre et éviterait les dysfonctionnements lors des recherches de régions par exemple.
- pour cela il faut modifier l'importation assez profondément. Chaque bouteille importée doit passer dans un importateur qui transforme les libellés en code. Peut être pas si lourd pour finir.
L'application repose sur le framework Ionic 3.20.x à fin mai 2018.
Ionic repose sur Angular 5.2.10 à fin mai 2018. Le routeur d'Angular n'est pour l'instant pas utilisable dans Ionic, Ionic fournit le sien, plus simple mais plus limité (notamment en terme de gardes, resolvers et children pages)
Firebase est une DB NoSql hébergée par Google. Gratuite pour les petits volumes, elle est très intéressante car elle permet le databinding direct entre le GUI et la DB. Aucun backend n'est nécessaire. Elle s'appuie énormément sur les Promises et donc les observables.
Angular est bâti sur RXJS. Je me suis très fortement appuyé sur RXJS afin d'améliorer au mieux les performances de l'application Angular sous-jacente (ChangeDetectionStrategy.OnPush) et également pour respecter la philosophie "réactive" d'Angular
L'application était devenue trop complexe et difficilement maintenable. Les données étaient manipulées dans toutes les pages, tous les composants, les observables émettaient depuis n'importe où (services, composants, pages...) et cela parfois partait en boucle. La liste des bouteilles, des casiers, dégustations etc. était stockée en plusieurs endroits de l'application: DB, services, pages, et partiellement composants. Les filtres étaient créés dans le browse et modifiés partout.
Il fallait mettre en place une vraie gestion d'état. Pour cela j'ai donc choisi d'utiliser NGRX. Il reste des défauts dans son utilisation: les bouteilles et casiers sont modifiables dans certianes pages. Il y a donc création d'objets Bottle et Locker en plusieurs endroits (updatePage, cellar page quand on déplace des bouteilles ou qu'on redimensionne un casier qui n'est pas vide. Ces pages sont comme des formulaires, qui émettent des actions de modifications.
plutôt compliqué ! une fois suivi le tutorial https://javebratt.com/ionic-2-facebook-login/ il faut impératibvement
- autoriser une plateforme native (android / iOS par ex) dans le compte facebook developper
- pour cela il faut pouvoir fournir les infos techniques réclamées par FB comme le "hashage clé". Je n'ai pas compris la procédure indiquée ici: https://forum.ionicframework.com/t/facebook-plugin-not-installed-error/88285 mais en essayant l'app sur Android j'ai obtenu un message d'erreur FB lors du login m'indiquant que le hash "5a+U3FWyFV0pQSZ6FeoA3nHxGZ0=" n'est pas autorisé. Je suis donc retourné sur le compte développeur FB dans l'app, Paramètres / Général, partie plateforme android, pour ajouter ce hash dans les "Cachages clés"
- mise à jour du 30 septembre 2017: le hashkey exigé par facebook est en fait la version base64 de l'empreinte numnérique SHA1 du certificat qui a servi à signer l'APK. Pour convertir l'empreinte aller sur http://tomeko .net/online_tools/hex_to_base64.php
- 30-09-2017 : fonctionne bien sur browser mais ERROR 10 lors du login via Cordova, apparemment un problème de signature de l'APK
==> ça a marché...
cordova plugin add cordova-plugin-facebook4 --save --variable APP_ID="253712085111353" --variable APP_NAME="cellar-explorer"
J'utilise le plugin Chrome "Lighthouse" de Google pour analyser la home page et dégager les principaux problèmes. Grâce à ce plugin j'ai déjà changé:
- modularisation du code: un module par page en lazy load
- mise en place d'un service worker avec toutes la chaine de build (voir copy.config.js, webpack.config.js et workbox-config.js). Voir l'article https://golb.hplar.ch/2017/12/Workbox-in-Ionic-and-Lazy-Loading-Modules.html
- mise en place de modernizr: pour modifier la config aller dans config/modernizr-config.json, ajouter les checks à faire (voir la liste des possibilités sur https://github.com/Modernizr/Modernizr/blob/master/lib/config-all.json. Après l'ajout dans le json regénérer le src/app/modernizr.js via le CLI "modernizr -c ./config/modernizr-config.json"
Dans src/app/scss/icons/fonts se trouve une police générée spécialement pour le projet. Voir le fichier README_FONT.txt
il reste des choses à modifier pour améliorer l'application:
- les classes Bottle, Locker etc. devraient être des interfaces: cela simplifierait grandement leur utilisation en particulier dans le cadre de NGRX
- les events NGRX sont parfois difficiles à comprendre. Dans pas mal de situations on reçoit de multiples fois la liste des bouteilles par exemple (suite à une mise à jour par exemple). Il faut éclaircir ça et faire en sorte de limiter les plus d'events susceptibles de redéclencher un render.