Lascapi.fr

Menu

Catégorie : Développement

AngularJS : focus automatique dans un tableau

Comment gérer le focus des éléments d’un tableau de manière automatique avec AngularJs ? Mes recherches brute.

Contrainte : il y a des groupes de lignes et des lignes. Il y a donc besoin de deux autofocus différents. Et lors de la suppression d’une ligne par exemple, le focus doit rester dans la même colonne.

  • ngFocus permet d’exécuter une expression quand le focus arrive sur l’élèment,
  • $watch exécute une fonction quand la valeur d’une variable change,
  • L’attribut autofocus de <input> indique que le champ doit recevoir le focus lorsque le chargement de la page est terminé,
  • Un autofocus.js qui permet d’ajouter un attribut directement dans le html,
  • la fonction focus() de javascript

On peut utiliser autofocus="true" ou la version autofocus.js pour la création de groupe et de ligne.

Pour le changement de ligne sélectionné on peut utiliser la fonction focus() qui pointe vers un élément récupéré avec :
document.getElementsByName(nameElementFocused)[0]
Notez qu’on récupère le premier élément de la liste, même si celle-ci doit en théorie n’en contenir qu’un si les noms sont uniques.

Convergence des applis de chat pour les équipes

Actuellement beaucoup de solution de travail en équipe voient le jour. Ces derniers temps j’ai eu l’occasion de travailler avec quatre d’entre elles : RocketChat, Riot, Slack et Zulip.

Et le moins qu’on puisse dire c’est qu’elles se veulent différentes, mais qu’elles se ressemblent de plus en plus.

Capture d'écran de Riot
Interface de Riot, application de messagerie Open Source et Fédérée
Capture d'écran de RocketChat
Interface de RocketChat, application de collaboration d’équipe Open Source

Les points communs

On constate très vite des gros points communs, ce qui est logique puisque ces applications cherchent à résoudre le même problème de communication à savoir « trop de mail tue le mail » !!!

Les communautés

Tous d’abord il y a la notion de communauté, ou d’entreprise, ou de groupe. Elle correspond à un ensemble de personne qui vont discuter sur des sujets communs. Concrètement c’est une association, une entreprise ou encore un groupe de parents d’élèves.

Les groupes

Nommé très différemment selon les logiciels (canaux, chaine, stream, salon), c’est simplement le découpage thématique des conversations. Chaque personne peut s’y abonner ou pas. Ils peuvent être privé, public.

C’est par exemple « le bureau de l’association » ou bien « les évènements » pour une entreprise, ou « les infos de l’école » pour les parents d’élèves.

Ça correspond à une liste de diffusion si on pense aux mails. En effet c’est juste un ensemble d’adresse mail ou chacun est libre de s’inscrire où pas.

Les réponses

On a donc des fils de discutions organisé par équipe. Au sein de ceux ci, on peut être amené à devoir répondre à un message qui est loin dans l’historique. Heureusement il y a la possibilité de faire des réponse à un message en particulier.

En général cette réponse est accompagnée du message cité ou, au moins, du début et d’un lien vers le message original.

Les réactions

Les réactions sont simplement la possibilité de répondre par un émoji au message. Utilisé pour marquer son approbation 👍, sa joie 😃 ou encore sa compassion 😥

Les différences

Capture d'écran de Slack
Interface de Slack, logiciel privateur
Capture d'écran  de Zulip
Interface de Zulip, application de messagerie pour les équipes

Les sujets de discutions

On a vu qu’il y a beaucoup de points communs. Une des grosses différences vient du traitement des sujets de discutions au seins d’un groupe.

Actuellement Riot ne gère pas l’affichage des sujets, il y a une citation du message auquel on répond, mais pas la possibilité de voir toutes les réponses à un même sujet.

RocketChat et Slack se comportent sensiblement pareil. Il y a la chaine (ou le groupe) qui est aussi un fil de discussion et on peut répondre à un message en particulier, ce qui va le « transformer » en sujet de discussion qu’on pourra afficher dans une colonne séparé afin de le suivre sans être dérangé par les autres sujets.

Et enfin il y a Zulip qui est original sur ce point puisqu’il oblige les utilisateurs à répondre à un sujet ou a en créer un. Il n’y a donc pas de chaine sans sujets et aucun message ne se retrouve orphelin dans le groupe. Et cette restriction a du bon puisqu’elle oblige chacun a faire du tri dans sa tête et aide donc les autres personnes a y voir plus claire.

Très concrètement c’est comme envoyer un mail à pleins de personne. Zulip oblige à mettre un objet au message, RocketChat et Slack non. Et a mon sens c’est beaucoup plus efficace de mettre un sujet puisque ça cadre un minimum les échanges.

Open source

C’est une différence technique, mais fondamentale. Qui développe le logiciel, qui va héberger le service ainsi que vos données ?

Je vais être très clair. Je déconseille Slack qui est peut-être le plus connu et le plus accessible avec leur politique de compte gratuit. Mais c’est une prison dorée. En effet leur solution étant propriétaire ils deviennent les seuls à pouvoir vous donner accès à vos données. Il faudra, à un moment ou l’autre, passer sur le forfait payant et il n’y a aucune concurrence possible en cas de tarif qui augmente. Et en cas de données sensible ou stratégique, il faut juste être conscient que cette entreprise y a accès librement et sans restriction.

Donc clairement, le choix de la raison s’oriente vers une solution open source comme RocketChat, Zulip où Riot. Elle ne sera pas gratuite, mais vous aurez le choix entre différents prestataires, entre plusieurs tarif, niveau de service ou même d’être votre propre fournisseur avec des coups maitrisés en interne.

Je note tout de même au passage que pour les associations et les particuliers il y a des solutions d’hébergement gratuit chez Zaclys (RocketChat) ou Framasoft (Mattermost) par exemple !

Fédéré

En quelque mots, la fédération au niveau logiciel, correspond à la capacité de dialogue entre des comptes de service différents. Exemple très concret :

  • le mail est fédéré puisque je peux envoyer un message avec une adresse moi@laposte.net vers une adresse toi@posteo.de ! Ça fonctionne très bien
  • Slack n’est pas fédéré puisque je ne peux pas envoyer de message à un compte Slack depuis une autre application
  • Riot est fédéré puisque je peux envoyer un message à quelqu’un qui hébèrge sont propre serveur dans son salon en étant moi même inscrit sur matrix.org

Pourquoi c’est important tout ça ? Parce que c’est un des seuls moyen de pouvoir coopérer de manière efficace, en ayant assez de compétition et de complémentarité. C’est un bon moyen de lutter contre les monopoles. Et c’est aussi le seul moyen de pouvoir être autonome !

Riot est fédéré et Slack ne l’est pas. Riot a été pensé pour être décentralisé. Slack a été conçu comme un service centralisateur (vous sentez tout le caractère péjoratif de ce mot ? ^^ )

D’après mes recherches, RocketChat peut être fédéré en fonction du paramétrage du serveur, et il me semble qu’il ne l’est pas par défaut.
Et pour Zulip il y a beaucoup de service intégré, mais pas encore de fédération entre serveur !!

Et Donc ?

Je n’étais pas parti pour faire un poste aussi long … Donc je n’ai pas vraiment de conclusion. Je vais juste finir en disant qu’il n’y a pas de logiciel miracle. Il faudra toujours que chacun soit formé aux outils. Il faut que chaque équipe se pose pour analyser ses besoins spécifique.

Je note aussi que par défaut pas mal de groupe se tourne vers des solutions comme WhatsApp. À mon sens c’est une erreur stratégique. Cette appli n’est pas faites pour ça, elle a l’avantage d’être très répandu, mais ça n’en fait pas une application de communication d’équipe.

Et pour vraiment finir : dans le cadre de mon travail, nous hésitons encore entre Slack et RocketChat ( et je fais tout pour qu’on choisisse RocketChat ^^ ), dans le cadre personnel j’utilise Riot qui est top, et de mieux en mieux.

Merci pour votre lecture, n’hésiter pas à écrire votre commentaire ici ou sur Mastodon !! :)

Utiliser le Bluetooth dans une appli

Pour l’instant il n’y a qu’un seul paquet sérieusement utilisable pour développer un application avec Flutter, il s’agit de flutter_blue. Il existe d’autres paquets mais beaucoup trop limité, par exemple bluetooth où encore flutter_bluetooth_serial qui est limité à Android, ce qui est un paradoxe puisque Flutter n’est utile que pour développer des applications cross-platform !

Il y a très peu de documentation sur Flutter dès qu’on s’éloigne des thèmes décrit dans la doc officielle. C’est là qu’on voit que c’est un framework très jeune.

Architecture d’une appli avec Flutter

Lifting State Up

Une application en «layer» avec des « building blocks ».

  • StatefulWidget
    • Inclue les informations dans le constructeur, c’est à dire les données qui doivent lui être passées pour fonctionner
  • State
    • définition des paramètres liés au widget (qui doivent être rendu dedans)
    • les méthodes pour mettre à jour le widget (avec «setState()»)
    • construire l’interface

C’est le concept de « Lifting State Up » qui vient de React :

https://medium.com/@nimelrian/thinking-in-react-a-paradox-statement-33c19e2eb9e2

Cette architecture est parfaite pour gérer un ou deux niveaux sur un écran, mais ça devient vite très compliqué de faire passer les paramètres au travers de plusieurs niveaux, et ça ne permet pas de bien découper le code, ni d’être flexible ni d’être testable.

InheritedWidget

https://cdn-images-1.medium.com/max/1200/1*GEvdBRvehbG6PvqLbVmwZw.png
https://medium.com/flutterpub/breakdown-flutter-i-o-2018-part-two-d47f1236f585

Ce type de widget permet de recevoir un état (des fonctions et des variables) et d’y accéder directement depuis tous les enfants, peut importe leurs niveau.

Bibliographie


Flutter et les API

Quelques liens, exemples et remarques pour cerner rapidement comment on peut utiliser une API externe pour injecter des données dans son application.

Pour la doc de base c’est dans le cookbook « Fetch data from the internet » de Flutter et dans la doc du package http de Dart.

Un super exemple d’application avec un système de login : https://appleeducate.github.io/flutter_login/ et un bon tuto flutter-login-app-using-rest-api

http.post

Pour envoyer du json à une API REST deux choses sont importantes, ne pas oublier de définir le content-type dans le header, ainsi que d’encoder le body.

headers: {'content-type': 'application/json'},
body: json.encode({"user": {"email": "jean@mail.com", "password": "jean"}}),

Le reste est très bien décrit dans les tutos et dans la documentation.

Flutter, applis pour iOs et Android

Pour commencer, c’est quoi Flutter ? Voilà deux liens qui expliquent la politique de Google lié à ce nouvel outil et le deuxième qui refait l’évolution des outils destiné à « écrire une fois, déployer partout ».

Un bon article qui montre de quoi est capable flutter : https://proandroiddev.com/mythbuster-10-rumors-about-flutter-why-its-not-worse-than-android-kotlin-f1a1acbe587d

StateLessWidget vs StateFulWidget

Les « widgets sans état » sont utiles lorsque la partie de l’interface utilisateur que vous décrivez ne dépend pas d’autre chose que des informations de configuration de l’objet lui-même et du BuildContext dans lequel le widget est déployé. Pour les compositions qui peuvent changer dynamiquement, par exemple en raison d’un état d’horloge interne, ou selon l’état du système, pensez à utiliser StatefulWidget.

https://docs.flutter.io/flutter/widgets/StatelessWidget-class.htm

Les widgets de Flutter sont construit sur le même modèle que ceux de React. Il y en a 4 types principaux :

  • le texte
  • des colonnes et des lignes pour organiser des éléments horizontalement et verticalement
  • des piles (stacks), pour empiler des éléments à la manière de la position absolue en html/css
  • un conteneur plus général, comme une <div> qui peut être manipulé par des matrices.

Lancement de la boutique ItsTeaTime, vente de thé en ligne

Bonjour :-)

Je suis fier de vous annoncer que la première boutique de vente de thé, créée par Stéphanie et conçu par Pascal Isman est accessible depuis le 12/12 à 12:12 !! C’est  pour nous un bel événement  puisque c’est l’achèvement de plusieurs mois de travail, et c’est aussi le vrai début de l’aventure !!

J’ai développé ce site avec Prestashop, qui est leader des solutions de commerce en ligne en France. Avec le système de module on peut monter une boutique en ligne de manière extrêmement efficace.

Ce site s’adresse à tous, aux amateurs de thé, comme à ceux qui ont moins l’habitude, jusqu’au plus newbies d’entre nous qui avons envie de découvrir ce monde fabuleux.

Vous pouvez le découvrir à l’adresse itsteatime.fr et sur facebook.com/itsteatime.fr

Bonne dégustation de thé :-)

Encore du drag and drop !

Et oui, j’ai pas encore fini  car après la recherche documentaire et la « remise à niveau » j’ai pu passer au codage proprement dis. À cette occasion j’ai essayé d’utiliser un logiciel de gestion de versions décentralisé pour garder trace de mes différentes étapes de développement.

Page d'accueil du site pour FlowChem

La plus grosse difficulté que j’ai eu au niveau de la programmation est au niveau de la gestion des évènements et de leur ordre pour réaliser le système d’ajout, de déplacement et de suppression des icônes en fonction de leur origine et de leur destination.

Pour le design c’est pas du définitif, ce n’est qu’une première version, mais le gros du travail est sur les icônes qui doivent être à la fois graphique, et évidente pour des chimistes.

Et puis la surprise de dernière minute c’est l’adaptation du site à une résolution de 800×600 en plus de la version plus standard pour 1024×748 et plus.

Voici les deux versions :

Je prend volontiers les retours sur le comportement de cette petite application sur votre terminal ! :-)