Micro Application 12, partagée en noSql « Gère ta classe » avec AngularJs+Firebase


geretaclasseIntroduction


Un exercice rapide au format Micro-Application, pour voir comment gérer des tableaux dans un modèle de données Json, et comment Cela fonctionne avec Firebase.

Plus besoin de Back-end, c’est du No-Sql en ligne. Tout le back-end est automatisé et c’est du No-Sql. L’application est partagée, pour le tester, ouvrir 2 onglets de la même application puis voir les modifications s’appliquer en temps réel. La factory AngularJs Firebase  fonctionne vraiment à merveille, et une fois que l’on a compris le truc c’est vraiment génial. Le « 3 Ways Binding », c’est vraiment top.

L’avantage est tellement incroyable par rapport à Php-Sql, que j’abandonne pour l’instant mon application « EvalueTesShoes » qui devait avoir un back end en php-sql. On fait en 1 page ce que Php fait en 5 lorsqu’on s’occupe du Back-End.

Mon but est de placer un max de testing dedans, pour l’instant j’ai pas encore mis l’authentification firebase.

Pour le tester, cliquer ici

Synopsys :


Un Prof Gère ses cours ou ses classes avec un logiciel en ligne,ce qu’il modifie est directement répercuté dans les navigateurs des autres ordinateurs en temps réel, grâce à la technologie NoSql Firebase et AngularJs.

PARTIE DIFFICILE ET TRES COMPLEXE A CODER(En tout cas pour moi):

Le prof peut ensuite affecter le planning des classes à un Agenda Angular Agenda, Synchronisé avec Google Agenda, de ce fait, les élèves recoivent automatiquement leurs planning de cours dans leurs téléphone portable.

Descriptif de l’application :


  • Type : Micro- Application Desktop Web de type Saas.
  • Responsive : oui.
  • Langage : AngularJs, Bootstrap UI, Html 5.0, Css3.0
  • Bibliothèques : AngularFire, Bootstrap,File-upload,Font-awesome,Purecss,TextAngular,nvd3.js,chart.js, Angular-Chart.js …
  • Format d’échanges de Données : JSON
  • Routing angularJs : Oui, 3 vues
  • Back-end : noSql FIREBASE en ligne
  • Difficulté : ++/+++++
  • Test avec jasmine : Non.
  • Durée de codage : Entre 3 heures et 1 Semaine.
  • UML 2.0 : non.
  • Webstorage(stockage des données dans le navigateur) : Non
  • Gestion de la concurence : Firebase s’en charge
  • Webservice : non.
  • Authentification : Non pour l’instant.
  • Minification Grunt : non.
  • Nodes.Js : non.
  • MongoDb/Nosql : Firebase
  • Ambition Commerciale : non.
  • Etude de Marché, Barrières commerciales  : non.
  • Arborescence de l’appli : Css(design), Vues(les vues), factory(la factory pour firebase),img-app(les images de l’application),controleurs(les controleurs dédiés à chaque vues),librairies(angular,boostrap, etc..),envois-devoirs(le système de gestion des devoirs et d’emailing qui marche avec phpmailer et angularJs bien sur)

Le Code :


Le fichier de routing de l’application :

http://nicolash.org/truc36/routing/routing.js

Le controleur de la vue cursus :

http://nicolash.org/truc36/controleurs/cursus.js

Le controleur de la vue classe  :

http://nicolash.org/truc36/controleurs/classes.js

Le controleur des statistiques :

http://nicolash.org/truc36/controleurs/statistiques.js

La factory qui gère le CRUD avec Firebase :

http://nicolash.org/truc36/factory/factoryFirebase.js

Un exemple de vue :

http://nicolash.org/truc36/vues/accueil.html

 

Journal:


 

Jour 17 : 4 H de Code

En commencant à créer les cursus (une vue et un controleur) , j’ai trouvé le moyen d’utiliser le focus sur un onglet plutôt que le truc compliqué que j’avais fait avant pour éditer un objet quelconque à partir d’un ng-repeat.

Résultat, Tout le code devient incroyablement plus simple pour éditer/ajouter, et le formulaire éditer/ajouter devient unique dans la vue, ce qui simplifie incroyablement le code. Car de plus, lors du clic sur une vignette cursus, je charge tout simplement l’intégralité de l’objet présent dans le Ng-repeat, directement dans le formulaire d’édition.

On voit de suite que mon controleur cursus.js est  mieux fait que les anciens.

C’est en particulier cette fonction :

editCursus(cursus)

qui charge directement dans le formulaire l'objet cliqué dans un ng-repeat dans la vue ! Il suffit ensuite de faire un focus sur l'onglet d'édition et tout se fait automatiquement puisque l'objet est chargé dans les champs automatiquement!

C’est plus simple comme ça, on ne se soucie même plus des IDS, tout est automatique !

Conclusion, je préfère faire une autre exercice exploitant le focus d’onglets dynamique ainsi que le chargement par objet sur clic, plutôt que de continuer cet exo. Ce que j’ai compris étant vraiment une norme.

De plus je laisse tomber l’agenda pour l’instant et préfère faire un autre exo avec le système simplifié des onglets que l’on peut « focus » et l’identification et la sécurisation de la base de données firebase (droits en lecture.).

EDIT :

Finalement c’est pas si simple, parce que pour updater le modèle avec l’objet dans firebase , j’y arrive pas aujour’hui .Pour l’instant l’update ne fonctionne pas,

 

Jour  16 : 3h00 de code:

  • Intégration d’une directive affichant un loader lors des accès $http
  • Premières études du fonctionnement des calendriers Angular pour une intégration dans l’application (C’est « hard »)
  • Ajout d’un icône, d’un contrleur et d’une vue « paramêtres »
  • Suppression du bouton « retour à la liste ».

Note :

La prog AngularJs étant de la prog orientée Objet, UML2.0 commence à me manquer et j’aurais du l’utiliser, même pour un simple exercice, afin de pouvoir lister facilement les caractéristiques de mes modèle de données, et les caractéristiques de leurs champs.  Actualiser ce genre de diagrammes  servira bien dans mes prochaines apps afin de bien pouvoir se repérer. Bien sur, j’irais bien plus vite et ma programmation sera bien plus structurée à l’avenir.

En projet :

  • Savoir gérer le calendrier en adéquation avec le modèle de données (Hard) , et envoyer les cours dans les agendas  téléphones des membres.
  • Finaliser l’enregistrement de la  notation des membres et les stats associées.
  • Eventuellement modifier toute la logique d’inscription de membre par une logique de filtrage comme indiqué plus bas car celle ci est désagréable à gérer.
  • Exploiter les selects AngularsJs qui trient par catégories.
  • Exploiter de nombreux autres graphiques et réaliser pleins d’autres stas y compris basées sur le temps.
  • Créer un autre exercice permettant la création d’objets graphiques par Drag And Drop et l’exploitation de l’identification firebase qui a pas l’air très simple aux premiers abords.
  • Modifier les css pour que l’app soit correcte et standardisée dans un téléphone 5 pouces.

 

Jour 15 : 3h45 de code :

  • Intégration de premiers graphiques de statistiques avec la lib chart.js et angular-chart.js. ils se réactualisent sur clic, mais d’autres pourraient s’actualiser en temps réel, en fonction des besoins, dans une autre application en temps réel par exemple.
  • je viens de constater que les graphes ne s’affichent que dans Firefox, à voir demain…

 

Jour 13 et 14: 8 h de code.

  • Premier problème d’intégrité référentielle, pour faire bête, si on modifie le nom d’une personne dans la liste des membres, cela ne modifiait pas le nom d’un membre inscrit dans une classe… Normal puisque l’on est tenté de copier, parfois pour aller plus vite, une partie d’un modèle de données JSON dans un autre, hors, il ne faut jamais le faire, sous peine de foutre un bordel pas possible et des tonnes de doublons. Il faut uniquement se débrouiller avec les filtres ou les IDS, comme en SQL(cependant, c’est plus difficile qu’en SQL).
  • De plus, une autre analyse m’a fait comprendre que je n’avais pas conçu le système d’incription aux classes de l’app comme d’habitude. En l’occurence, l’inscription se fait par ajout d’id dans le modèle de données classe, mais, il existait une autre solution, qui est d’ajouter l’id de la classe au membre, puis à filtrer dans la vue classe les membres qui sont inscrits, je pense revenir à cette deuxième solution qui fait plus penser à du AngularJs.
  • Pour l’instant, le problème d’intégrité est réglé, en cela que si on modifie un membre dans la vue membre, alors cela est automatiquement répercuté dans la vue Classe, il n’y a pas de doublons.
  • Finition de l’envoi par email groupé, qui fonctionne avec AngularJs et la classe PHPMAILER. ça marche pas mal, hormis que l’hébergeur ayant limité l’envoi de 20 emails par jours, on ne peux pa trop le voir fonctionner. Je vais uploader l’app chez un autre hébergeur dès que je peux. On voit bien chaque devoir partir dans la console, en fonction des élèves présent dans la classe. Je dois le finaliser demain.

 

 

Jour 12 : 3h45 de code:

  • Début de programmation du système de notation de devoirs, et de testing de l’envoi groupé des devoirs par email, avec la classe php phpmailer et angularJs.
  • Re-structuration définitive de l’application avec un rep « Routing », « controleurs », »factory », »vues », de manière à avoir la norme Grunt.
  • Début de Normalisation du style de l’application: Utilisation des csss bootstrap panel panel-default etc… que l’on peut trouver ici :http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-panels.php
  • Upload très basique Angular, sans module externe : A voir ici(la 2 ème solution) :
  • http://stackoverflow.com/questions/13963022/angularjs-how-to-implement-a-simple-file-upload-with-multipart-form

 

Jour 11 : 5h de code :

  • Intégration des catégories de Classes (Exemple : Sciences)
  • Intégration des ids sur les classes.
  • Intégration d’un filtre sur les classes, avec le critère de catégorie.
  • Intégration de bulles avec uib-tooltip= »textedelabulle »
  • Intégration du taux de remplissage par classe, calculé directement dans la vue.

Jour 10 : 3h de code :

  • Mise en place de la vue Statistiques puis pré préparation de quelques  premières Statistiques au format tableau de Json,  pour les graphiques nvd3.js

En projet : 

  • Gestion des devoirs, envoi par email+ notation, classement des membres par notes.

 

Jour 9 : 3 heure de code.

  • Ajout d’une directive de modale de décision « Oui non ».
  • Ajout de contrôle sur les champs (validation AngularJs)
  • Ajout d’une case de recherche sur les élèves.
  • Essai d’ajout d’un footer.

 

Jour 8 : 5 h de code :

  • Réorganisation des librairies et des vues dans un répetoire vue.
  • Multiples essais d’uploads sur l’hébergeur, celui-ci ayant un cache, cela ne fonctionne pas bien, je vais donc changer d’hébergeur, car j’en ai marre. L’intégration n’est pas terrible pour l’instant, je devrais faire une sorte de service mais je n’y arrive pas avec ce module pour l’instant.
  • Dans l’ensemble, l’utilisation est très bonne, le système de synchronisation est carrément impressionant, et surtout, l’ajout de champs à l’application est tellement facile, sans back-end, c’ est tellement agréable. De plus le système de vision de notre modèle sur le site de Firebase est une énorme aide au développement. Bref tout ce qu’il faut pour créer des applications vraiment puissantes et modernes. Je constate juste un échec dans le chargement du modèle parfois.. Mais la touche F5 resouds le problème.

En projet : 

  • Finalisation correcte d’un système d’upload d’images et de fichiers par classe et par membre, design correct.
  • Ajout des ids sur les classes, afin de pouvoir utiliser le filtrage et la recherche Angular.
  • Résolution du problème du clic dans le menu qui n’agit pas.
  • Choix d’une librairie graphique.
  • Plus de suppressions, mais un flag à « inactif ».
  • Utilisation des jauges.
  • Ajout de groupes et catégories, ainsi qu’un menu paramétrage.

 

Jour 7 : 3h de code :

  • essais de meilleurs designs, ce n’est pas encore terrible sur mobile, j’ai repéré d’autres frameworks CSS orientés commerce qui sont très jolis pour mobiles. (http://foundation.zurb.com/templates.html)
  • Pré intégration du downloader de fichiers par membre, à finir demain avec un bon design.
  • Elaboration d’un controle de de doublons pour les membres à ajouter et les évaluations : Je m’en servirais de nouveau à l’avenir.

Admettons que le modèle soit ça : items.json = {« classe »: »Anglais »,members:[{« id »: »1″, »nom »: »Roger »},{« id »: »2″, »nom »: »Mohammed »}]};

 

Alors mon controle de doublonnage et de présence du tableau est semblable à celui-ci :


<!-- AJOUTER UN MEMBRE -->
$scope.addMember = function (idCourant,i){

/* SI LE TABLEAU MEMBERS EST INEXISTANT, IL FAUT LE CREER */
if(!$scope.items[$scope.idCourant].members){
$scope.items[$scope.idCourant].members=[];
}

/* SI L ID DU MEMBRE EST DEJA PRESENT IL NE FAUT PAS L AJOUTER , CONTROLE DU DOUBLON*/
var arr = $scope.items[$scope.idCourant].members;

/* ALGO QUI REGARDE DANS LE TABLEAU MEMBERS SI L ID DU MEMBRE EST DEJA PRESENT */
var test = 0;
for(x=0;x<arr.length;x++){
if(arr[x].id==i.id){
test++;
};

};

if(test>0){
alert('doublon !');
}

else{
$scope.items[$scope.idCourant].members.push({"id":i.id,"nom":i.nom})
ItemsService.updateItem($scope.idCourant)
}

};

Jour 6 : 6h de code :

  • Recherche d’un framework CSS pour rendre l’app responsive, mon choix est purecss de Yahoo.
  • Je suisen train de transformer le design de l’application en Responsive, pour qu’elle puisse s’adapter aux desktop et aussi aux téléphones portables 5 pouces le plus possible.

Jour 5 : 6h de code :

  • Testing et mise en place du tri sur les membres… Il faut passer de la logique $index, à la logique de lecture des ids, et c’est plus compliqué, il ne faut pas faire d’erreur. En effet, lorsque l’on trie le tableau des membres, le $index n’est plus valable, il faut coder en conséquence en tirant partie de l’id du membre.
  • Mise en place d’onglet avec les balise <tabset>, à noter que les <tab< peuvent contenir une vue, à l’aide du module ui-router(dont je ne me sers pas ici)
  • Mise en place d’un filtrage sur la liste des membres.

Jour 4 : 3h30 de code

  • Intégration de Bootstrap UI Picker pour les dates d’entrées des membres, enregistrement sur firebase OK en temps réel. Problème son code ne devrait pas apparaitre dans le controleur mais dans un service séparé
  • Intégration de AngularJs TextEditor, Enregistrement ok, en temps réel dans Firebase.
  • Ajout d’un controleur pour la vue Accueil(Ce sera le tableau de bord).

Jour 3 : 3h30 de code:

  • Mise en place d’une vue « Membre » et de son modèle de données synchronisé sur Firebase
  • Mise en place d’une fonction qui trouve l’Id Maximum d’un membre, afin de pouvoir en ajouter de nouveaux. De cette façon, on peut supprimer un membre et en recréer sans doublons.

En projet :

  • Etudier comment gérer l’intégrité réfèrentielle . En l’occurence, si l’on supprime un membre, il doit être supprimé de toutes les classes, il faut donc créer une fonction Js qui le fasse.

 

 

Jour 2 :  3 H 30de code:

  • Mise en place d’un routing AngularJs
  • Design des Css sommaire.
  • Exploitation de l’autocomplétion Angular-Bootstrap
  • Exploitation du filling de select avec Angular.

En projet :  

  • Utilisation des jauges avec cette lib:
  • http://demos.componentone.com/wijmo/5/Angular/GaugeIntro/GaugeIntro/

 

Jour 1 : 3 H de code:

Principe général de l’application: Lors du click sur un des élèments de la liste, la variable idCourant prends la valeur de l’Id de l’élèment cliqué, de ce fait, la fenêtre « Détails » contient toutes les informations relatives à cet ID.

  • Design des divs.
  • Testing d’ajout de childs nodes Firebase = ok
  • Testing d’ajout de tableaux imbriqués dans le modèle de données = ok sur Firebase.

 

 

Publicités