La page de présentation
Il m’a semblé judicieux de prévoir une page de présentation de mon projet, afin de montrer aux utilisateurs que la couveuse possède une interface tactile et qu’une application peut-être téléchargée.
Devant rendre un MVP et n’ayant pas d’application à publier, j’ai décidé de rapidement faire les textes, un petit design et de vite coder la page en version mobile. Je trouvais ça plus chouette que de simplement mettre des liens vers les différents éléments de mon projet.
Je dois encore retravailler les textes et ajuster le design sur celui de mon interface couveuse.
L’application
J’ai commencé un début de wireframe pour l’application afin de pouvoir mettre dessus les informations pour comprendre les couvaisons. Mon sujet étant très spécifique et peu connu, je me suis dit qu’il était grand temps de mettre en place ces informations pour aider mes camarades et professeurs à mieux comprendre mon sujet.
J’ai dans un premier temps, suite aux remarques reçues, réfléchis à mettre les informations sur l’interface également. Mais après réflexion, je pense que ce genre d’information n’a pas à se trouver sur la couveuse, car les personnes qui achètent une couveuse, connaissent les bases, afin de bien choisir la couveuse qui correspond à leur besoin.
L’application n’est pour le moment qu’un wireframe vite fait. Je n’ai pas encore eux le temps de relire mes textes. De plus, j’ai quelques illustrations et photos à réaliser.
L’interface
Le design
Ayant fini les prototypes, je me suis tout doucement mis à faire le design. J’ai d’abord commencé par réaliser un logo. La première version représente une petite mascotte, je l’aimais beaucoup cette mascotte malheureusement, elle ne convient pas sur mon petit écran. Je me suis donc redirigé vers quelque chose de plus basique. Et finalement, je ne regrette pas d’avoir décidé de refaire le logo, car je trouve le nouveau trop chouette !
Pour les couleurs, j’ai pris le parti de faire un site monochrome avec comme couleur de base un jaune assez flash. En utilisant les diverses variantes du jaune, cela me permet de mettre les éléments importants en avant. Par exemple : mettre la température en vert quand c’est bon et en rouge quand il y a un problème. L’utilisateur sera attiré par les éléments mis en couleur.
Ce qui est assez complexe dans la réalisation du design, c’est que mon écran ne sera pas pus grand qu’un écran de tablette et que c’est tactile. Les boutons doivent être assez grands pour simplifier l’utilisation.
Le code
Objectif de la semaine : arriver à afficher la température dans le navigateur.
J’ai dans un premier temps fait un websocket et avec le code que j’avais déjà réalisé, j’ai réussis à afficher le tout sur mon pc. Mais petit problème pour lancer la page web, je dois d’abord lancer mon serveur moi-même et ce n’est absolument ce que je souhaite.
Ma première idée, c’est de mettre le tout en ligne. C’est une idée pas du tout réfléchis, car mon projet nécessite d’utiliser les ports USB de mon portable, il est donc impossible de se connecter à mes ports USB en le mettant en ligne. Retour à la case départ !
Mon problème : Lancer le serveur tout seul !
Dit Google, tu as la solution ?
Après des recherches, je découvre que oui, c’est possible et qu’en plus de ça, je peux faire en sorte que mon projet s’affiche en mode kiosk (en mode plein écran, et ne plus avoir accès à l’interface Raspbian de mon raspberry).
Merci les tutos car ça fonctionne.
Sur cette victoire personnelle, je vous dis à dans deux semaines !
Quelques liens
La page de présentation
Première version sur figma
Page mise en ligne
L’application
prototype de l’application sur figma
L’interface
Interface avec design sur figma