Storyboard de l'application mobile

J’ai opté pour l’utilisation des composants simples lord de la création du storyboard de l’application mobile (pour la 1er phase du développement du projet), toute en laissant la liberté à vos talons d’enrichir chacune des interfaces par d’autres composants et animations que vous jugerez plus adéquoits.

Le lancement de l’application mobile à travers le menu principal (1ere figure), une interface temporaire s’affiche durant quelques secondes, contenant le logo du projet ainsi que celui de notre communauté. Cette fenêtre est appelée « splash » (2éme figure), puis la fenêtre d’authentification s’affiche à son tour pour inviter l’utilisateur à saisir son login et son mot de passe (3éme figure):

Une fois que l’utilisateur s’est fait identifier, l’application se connecte au web service pour récupérer la dernière mise à jour et affiche la liste des pièces auxquelles il est autorisé à accéder sous forme d’une « carocelle » qui peut être manœuvrée par des simples glissements de doigts.

A partir de cette interface le propriétaire peut effectuer quelques opérations soit sur les pièces (ajouter, modifier ou supprimer) soit sur les comptes utilisateurs (ajouter, modifier ou désactivé). Il peut accéder à ces différentes actions à travers le bouton menu :

Après avoir sélectionné une pièce, l’utilisateur sera guidé vers une nouvelle interface contenant la liste des différents équipements qui y sont installés.

Prenons l’exemple du contrôle du salon : l’utilisateur sélectionne la porte. Une boite de dialogue s’affiche pour lui proposer d’opter pour l’alternative disponible (ouvrir ou fermer, dépend de l’état actuel de l’équipement en question (1er figure). Une fois l’ordre d’ouverture lancé, une notification, en prévenance de l’établissement, est affichée pour informer l’utilisateur du résultat de l’action (2eme et 3eme figure).

Cette interface permet de modifier ou d'ajouter un équipement (cet opération est possible via le menu de l’interface).