Projet Miam List

J’ai travaillé il y a quelques mois sur un petit « side-project » qui me sert beaucoup et que je tenais à partager avec vous ! J’ai appelé ce projet « Miam List » : il s’agit de petits aimants pour vous aider à gérer votre liste de courses à la maison.

I’ve worked a little while ago on a side-project that is very useful to me. I wanted to shared it with you. I called this project « Fridge Magnet » : it’s little magnets to help you handle your grocery list at home.

Miam List, c’est quoi ?

Des petits éléments aimantés avec des aliments ou des produits dessus à disposer sur votre frigo.
Une fois que vous devez acheter un des éléments, vous n’avez qu’à les glisser sur le côté. Une fois que le moment est venu de faire vos courses, 2 solutions :
– soit vous prenez en photo les éléments à acheter

– soit vous utilisez mon outil qui va lire les codes et générer une checklist. Vous pourrez ensuite exporter cette liste ou l’envoyer à quelqu’un par e-mail.

Organisation

À la maison, j’ai décidé de faire 3 groupes :
– Les aliments qui se rangent au frigo ou au congélateur
– Les aliments qui se rangent dans les placards
– Les autres (non comestibles)

J’ai aussi une 4ème zone pour me rappeler du nombre de produits que j’ai mis au sous-sol. J’ai acheté ce pack de lettres et de chiffres aimantés pour les enfants.

Télécharger le projet / Download the project

Pour utiliser ce projet chez vous, il vous faut :
– une feuille de papier A4 (je vous conseille du papier épais)
– une plastifieuse (facultatif)
– une paire de ciseaux
– des petits aimants autocollants

ÉTAPES :
1. Téléchargez la fiche (lien en dessous)
2. Imprimez-la sur une feuille A4. Plastifiez-la si possible.
3. Découpez les petits éléments (vous pouvez seulement sélectionner ceux que vous allez utiliser)
4. Collez les éléments sur les aimants autocollants
5. Placez-les sur votre frigo ou autre surface aimantée
6. Une fois que vous devez faire vos courses, prenez en photo la zone de votre frigo ou scannez le QR code pour générer votre checklist (perso je copie-colle dans Google Keep).

Voici l’URL de mon outil qui génère la check-list en lisant les codes :
https://www.lesaventuresduchouchou.com/miam-list/

Si vous testez ce DIY, n’hésitez pas à poster une photo sur les réseaux sociaux avec les hashtags #ChouchouCendre et #MiamList

⇢   TÉLÉCHARGEZ LA FICHE

Pourquoi ce projet ?

Pendant longtemps j’ai utilisé Google Tasks pour gérer ma liste de courses. Je ne trouvais pas cela pratique car des fois j’avais les mains sales ou mouillées, mon portable devait être à proximité et un fois le téléphone allumé, je regardais mes notifications et cela me prenait toujours plus de temps que prévu.
J’ai aussi testé Google Keep pour partager une liste avec mon copain mais le partage de note fonctionne très mal (hâte que Google fasse une refonte de Keep comme ils viennent de le faire pour Tasks). Mais le principal problème était le fait que mon compagnon ne me signalait pas quand il finissait un produit.
Puis, j’ai utilisé une ardoise avec un feutre. Cette méthode a des avantages mais il y a le même souci avec les mains sales sans compter le temps d’écrire lisiblement. Juste avant de commander mes courses en ligne, je prenais en photo mon ardoise.
Puis un jour j’ai eu une idée : des petits carrés avec mes produits habituels à déplacer couplé à une webapp générant une checklist. Facile, ludique, simple !

Même les enfants participent. Je demande régulièrement à ma fille de déplacer des aimants pour moi : parfait pour apprendre à lire.

Côté réalisation

Ce projet s’est divisé en 2 parties :
– Création des petits carrés et plusieurs phases de test pour détecter les codes. J’ai récupéré les icônes sur l’excellent site FlatIcon et modifié certaines. J’ai fait énormément de tests pour la lecture des codes.

– Création d’une petite webapp générant la checklist en javascript.
J’ai effectué plusieurs tests : certains avec des QR codes. La contrainte : une toute petite zone, seulement 2 cm. J’ai finalement opté pour le format Datamatrix a donné des résultats satisfaisants sur une petite surface. J’ai cherché pendant des heures mais je n’ai pas trouvé de librairie open-source d’image processing de codes (si vous en connaissez : MP). C’est très particulier car il ne s’agit pas de lire un QR code ou autre, il s’agit de détecter et lire plusieurs codes sur une photo complexe.
La librairie la plus connue, ZXing, ne donnait pas de résultats satisfaisants.
Après beaucoup de recherches, j’utilise une API normalement payante. En version gratuite, elle split la valeur du code en 2. J’ai donc triché en nommant mes valeurs 0101 pour récupérer 01. Les IDs sont ensuite mapés avec mes fichiers JSON.
Côté front, j’ai utilisé le framework ReactJS mais j’ai aussi effectué des tests en NodeJS avec d’autres librairies.
Comme mes autres petits projets, le repo est sur GitHub.

Si vous avez des suggestions, remarques, demande d’ajout de produits, n’hésitez pas à laisser un commentaire !

Vous avez aimé cet article ? Épinglez cet article sur Pinterest pour le retrouver plus tard :

Pour fêter la publication de ce projet, je vous propose de gagner 5 kits avec feuille plastifiée et plaquettes magnétique adhésives !

Comment participer ?
Pour participer, rien de plus simple, il suffit de commenter sur les réseaux sociaux : Facebook, Twitter ou Instagram.

Tirage au sort dans 2 semaines, le mardi 15/05 à minuit.

EDIT DU 16/05/18 : Voici la liste des gagnants, contactez-moi en MP pour me fournir vos adresses postales :

EDIT du 31/08/18 : Ce projet était très sympa a développer ! Mais je ne l’utilise plus : je me sers maintenant d’Alexa pour la liste de courses.