Emoji and UX
Why Unicode is good and emoji on it is bad !
a and α are quiet similar for user but different for developers.
And 😀 is very different in android / iOS / WhatsApp style and don’t say the same thing for users.
Catégorie : Développement
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.
Flutter en image
iOS et Android
Tout est widget
Les états : app and ephemeral states
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 :
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
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.
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 ! :-)
Drag and Drop dans une OnePage
Je continue les recherches pour faire le fameux jeu de présentation en glisser/déposer et du coup je découvre plein de choses interressantes, la première c’est que jquery permet de faire ça simplement. Et puis plein de tuto au résultat vraiment sympa :
- chez-syl.fr/2012/03/drag-and-drop-html5-jquery/
- guillaumevoisin.fr/tutoriel-drag-and-drop-jquery-exemple-avec-une-liste-des-taches
- w3schools.com/html/html5_draganddrop
- html5demos.com/drag (c’est pas un tuto mais une démo)
Et puis en marge de cette magnifique découverte (pour moi … ) j’ai trouvé des scripts qui peuvent être super intéressant pour optimiser son site, à savoir headjs pour les scripts et bLazy (ou Be Lazy) pour le chargement progressif des images.
La mise en place du drag&drop dans une one page n’est pas si évidente que ça ! Il faut arriver à concilier les deux bibliothèques javascript et leur css respective !
Mais c’est faisable quand même ^^ Voici un exemple de drag and drop.
OnePage Dynamic
Ok, aujourd’hui je commence le développement d’un page de présentation d’un nouveau procédé de production chimique. La commande est simple, une one page avec un petit jeu éducatif dedans, à savoir un jeu de glisser/déposer.
Première difficulté, reprendre contact avec la multitude de projet et bibliothèque qui pullulent sur le web pour faire ce genre de chose et faire le tri entre le bon grain et livrais.
Exemple de ce qui est possible de faire en jeux one page :
- http://connectmania.com/
- http://slaveryfootprint.org/survey/#where_do_you_live
- http://whosyoursanta.ca/
- http://www.puddingrush.com/
Un tuto intéressant pour refaire ses armes avec JQuery : http://www.snoupix.com/slideshow-jquery-accessible_tutorial_28.html
Deux projets super interressant !!
Le premier test de la journée : http://lascapi.fr/flowchem/one-page-dynamic-20140106/
Et pour finir le wireframe pas du tout définitif du projet.
