APISENSE / bee-ios

APISENSE® iOS client
1 stars 0 forks source link

Sprint #1 : Design discussion #2

Closed duribreux closed 7 years ago

duribreux commented 8 years ago

Before starting any development we would like you to suggest some basics sketches to discuss together. The idea is to build a nice looking application using elegant flat design.

You can take a look at:

And more generally, some guidelines for iOS design development.

Note: To the extent possible iOS and Android design should be pretty close to each other.

You can take a look at the current version of Bee This is an open discussion, feel free to exchange about what you think is good or not.

Tibooh commented 8 years ago

Ce genre de maquette vous convient il ? Ça reste encore schématique bien sûr. login2

Nous allons vous envoyer une série de propositions d'ici demain.

Pour les couleurs, est ce que vous souhaitez une application aux couleurs de votre logo (jaune et noir) ou bien nous sommes libre des couleurs ?

duribreux commented 8 years ago

Il y a du mieux néanmoins quelques remarques:

:warning: Concernant les écrans de login/register, il faut également intégrer les boutons Google+ et Facebook.

:information_source: Eviter les design impliquant des bordures de plusieurs pixels de large qui donne un aspect lourd voir austère à l'app ainsi que les fonts trop exotiques.

NiTnEuQs commented 8 years ago

Bonjour, suite à vos remarques, nous avons changé le design de l'écran de login, pour cela nous avons utilisé le logiciel Gimp 2

design-bee-ios-login

Je pense que le bouton en vert n'est pas forcément une bonne idée mais je voulais savoir quel était votre ressenti avant de changer. Cela reste très basique comme design, surtout pour les champs de texte, dîtes-nous ce que vous en pensez

duribreux commented 8 years ago

Ca prend forme ! Effectivement le vert n'est sans doute pas la couleur la plus adéquate. A noter que Facebook et Google ont des boutons "officiels" qui divergent un peu de ceux proposés mais l'idée est là !

Concernat l'écran de login, après discussion, nous apprécions particulièrement ce genre d'intégration concernant les types de connexion alternatifs (celui au milieu pour être précis):

Image centrale

Nous attendons vos prochains slides :+1:

NiTnEuQs commented 8 years ago

En m'inspirant des designs présentés, je vous propose ce design design-bee-ios-login C'est un design plus sobre, plus aéré. Pour la couleur des boutons Facebook et Google, serait-ce mieux en blanc ? Pour la police du texte "BEE", est-ce que celle-ci concorde avec celle que vous imaginiez ?

duribreux commented 8 years ago

A titre personnel j'apprécie la tournure que prend ce POC graphique ! Modulo le fait d'avoir les alvéoles correctement découpées / incrustées et rajouter un texte du genre "login with..." au dessus des logos (il me semble qu'il s'agit d'un champ obligatoire dans le cas de l'utilisation d'un logo minimaliste, renseignez-vous sur ce point) j'approuve !

Concernant la font, j'essaye de faire remonter en interne le nom de la police utilisée sur nos logos. Dès que j'ai ça nous vous la communiquerons.

Sur le principe et après discussion avec @rouvoy , nous validons la page d'accueil.

Edit: Vous pouvez commencer à développer ce premier écran (mise en place des projets, suite de tests, intégration continue (nous pouvons en rediscuter ultérieurement)) L'idée étant en parallèle d'itérer sur le design des autres visu et de commencer le développement. (cc @NiTnEuQs)

aveuiller commented 8 years ago

Cette page de login me semble prendre une bonne direction.

De même que Julien, je ne peux que vous inviter à bien prendre connaissance des conditions d'utilisation et de placement du bouton de login de google et facebook (ainsi que tous ceux que vous allez intégrer).

Je ne sais pas où en sont vos maquettes, mais je vous invite aussi à nous proposer un diagramme de navigation pour l'application. Cela nous permettra de valider que nous sommes d'accords sur les spécifications de celle-ci et ainsi avoir un inventaire des différentes vues que vous aurez à développer.

Tibooh commented 8 years ago

Nous vous enverrons les autres maquettes d'ici la fin du week end/ debut semaine prochaine.

Pour le diagramme de navigation, que voulez vous dire par la ? Cela se fait avec MarvelApp ?

Concernant le début du développement, nous avons hâte de le commencer mais nous n'arrivons toujours pas à accéder au code de l'application, y a-t-il des manipulations spéciales à faire sur GitHub ? Avec notre clé publique par exemple ?

duribreux commented 8 years ago

Ok pour les écrans restants.

Un diagramme de navigation à comme son nom l'indique vocation à exposer graphiquement / schématiquement l'ensemble des écrans de l'application et la façon dont ils s'enchainent les uns vis-à-vis des autres. Google :stuck_out_tongue_winking_eye:

MarvelApp peut être intéressant pour cet exercice, voir même pour le design de l'app' !

Concernant l'accès aux sources, nous allons vous envoyer l'adresse de notre GitLab d'où vous aurez accès à nos applications mobiles. Comme communiqué dans un mail précédent, connectez-vous au LDAP pour modifier votre password. Ensuite laissez-vous guider.

NiTnEuQs commented 8 years ago

Voici toutes les maquettes demandées

design-bee-ios-login design-bee-ios-register design-bee-ios-home design-bee-ios-details design-bee-ios-store design-bee-ios-settings

Il y a certaines chose dont je ne suis pas satisfait personnellement mais dîtes-nous ce que vous en pensez. Le diagramme de navigation arrivera très prochainement, nous sommes actuellement entrain de travailler dessus.

Par ailleurs, nous n'avons pas réussi à changer le mot de passe LDAP, l'option n'est pas disponible ou alors cachée. Il est écrit "Some options are unavailable for LDAP accounts"

aveuiller commented 8 years ago

Nous aurons un certain nombre de remarques à propos de ces dernières maquettes, mais nous attendrons le diagramme de navigation afin d'avoir une vue complète de votre design.

Dans tous les cas, nous vous donnons rendez-vous ce vendredi 27 à 9h30 à Inria afin de discuter de la suite du projet.

Concernant le changement de mot de passe LDAP, je vous invite à regarder le mail contenant vos identifiants temporaires, vous donnant l'adresse du bastion sur lequel vous pourrez changer votre mot de passe.

Tibooh commented 8 years ago

Voici notre prototype simulant la navigation dans l'application,

https://marvelapp.com/1ac7920

Pour le moment la page d'accueil permet d'accéder aux Settings et au Store, la fonction des autres boutons reste à voir, ce sont pour le moment des raccourcis vers des page de Détails.

Est ce que ce genre de prototype fait gage de "Diagramme de navigation" ou bien souhaitez vous un diagramme type "UML" ?

Nous aurons sans doute des questions sur l'installation du projet vendredi car nous avons quelques soucis à récupérer les sources dans Android Studio à partir du Git.

aveuiller commented 8 years ago

Diagramme

La simulation de la navigation, bien que jolie, ne peut à mon goût remplacer un diagramme de navigation. En effet, cela ne permet pas d'avoir une vision synthétique des transitions et liens entre les écrans.

Il vous faudra donc produire un vrai diagramme de navigation, même si celui-ci n'a pas vocation à être formel, le but est de pouvoir appréhender les transitions d'un seul coup d'oeil.

Retours sur le design

Pour revenir sur votre proposition de design, voici les principales remarques:

Remarques générales:

Pour finir, le design général est très proche de l'application iOS, certains écrans même inférieurs (Details contenant moins de détails). Le but de ce projet est d'apporter une réelle plus-value sur l'organisation de l'application d'un point de vue ergonomique et non d'apporter uniquement des modifications graphiques mineures sur un design déjà existant.

Je vous conseille de vous détacher de l'application existante et d'axer vos réflexions autour des éléments à intégrer. Nous sommes conscients que vous n'êtes pas designer, mais de nombreux exemples existent sur internet.

Tibooh commented 8 years ago

diagramme

Dites nous ce que vous pensez de ce diagramme, je me suis inspiré de ce que j'ai sur le web, il me parait assez clair sur la navigation entre les pages.

Dans Home comme dans Settings ce serai des onglets que l'on peut défiler.

aveuiller commented 8 years ago

Bonjour,

J'avais effectivement précisé dans mon commentaire précédent que le diagramme n'avait pas à être formel, néanmoins je ne m'attendais pas à un résultat si pauvre, preuve d'un manque d'investissement qui se fait sentir depuis le début du projet.

Quelques remarques sur ce diagramme:

En outre, quid des nouvelles maquettes associées à cette navigation? Une semaine me semble amplement suffisante pour prendre en compte les quelques remarques faites sur l'issue ainsi que pendant la réunion de ce vendredi en sus de ce diagramme, je vous rappelle que la moitié du projet est passée et que vous n'en êtes encore qu'à la phase de spécification...

Nous attendons les éléments manquant avant jeudi matin afin de pouvoir faire un retour constructif, la non remise de ces documents entrainera l'annulation de la réunion de ce vendredi.

Cordialement.

Tibooh commented 8 years ago

Bonjour,

Merci pour les remarques, je pensais faire quelque chose d'original... Voilà le diagramme que j'ai refait, de manière plus formel.

diagrammepji

Concernant les maquettes nous avons travaillé dessus, nous vous les enverrons ce soir !

Enfin concernant l'installation du projet, j'ai réussi à installer le projet Android sur ma machine. Nous allons commencer le développement sur la page d'accueil que vous avez validé.

Cordialement.

duribreux commented 8 years ago

Le diagramme nous semble correct et admettons le, vous avez produit en moins de 2h un diagramme de bien meilleure qualité que celui que vous nous avez envoyé après une semaine complète !

L'originalité n'est pas un mal mais uniquement utilisée à bon escient :smile:

Nous attendons donc vos visuels.

NiTnEuQs commented 8 years ago

Bonsoir,

Voici le diagramme modifié:

diag2

Et voici nos visuels après vos remarques:

La page de login ne change pas, peut-être les boutons de réseaux sociaux à changer ? design-bee-ios-login

La page register est maintenant plus formelle suite à vos remarques design-bee-ios-register

Quand quelqu'un se connecte, il arrive sur la page des experiences. Quand il n'y a aucune experience installée la page n'affiche que le bouton pour en ajouter. Le bouton de la petite maison en haut a gauche permet d'aller sur la page que nous avons appelé "Overview" qui est une sorte de tableau de bord (voir ci-dessous) design-bee-ios-experiences

La page "Overview" permet de voir les expériences installées et interagir avec (arrêter, lancer, supprimer), un clique dessus permet de revenir sur l'écran des expériences mais sur la bonne page (sur la page de l’expérience en question). Quand il n'y a aucune expérience installée la page n'affiche que le bouton pour en ajouter. La barre en bas permet de vérifier les succès déverrouillés, c'est la partie gamification, elle nous mène vers une page que nous avons appelé "Achievements" design-bee-ios-overview

Cette page répertorie les succès déverrouillés. Si la partie des succès est géré par un plugin externe (Google Play Games), nous pouvons changer cette page pour n'afficher que les médailles (si l'utilisateur est connecté, sinon un bouton de connexion) et un bouton pour afficher les succès. design-bee-ios-achievements

Les pages settings permet de changer les paramètres de l'application. Il y a 3 parties dispatchées sous les onglets en haut de l'écran.

"Privacy" est la partie personnalisation, nous sommes au courant qu'il n'y a pas tous les paramètres nécessaires mais cela suit la même logique de design. design-bee-ios-settings-privacy

"Account" est la partie personnelle, nous voulions ajouter un champ pour modifier le mot de passe, nous ne l'avons pas ajouté étant donné que nous pouvons nous connecter avec des comptes Facebook et Google. Dîtes-nous ce que vous en pensez, pour ma part, je pense que c'est un champ nécessaire (peut-être un champ pour changer l'adresse mail aussi ?). design-bee-ios-settings-account

"About" regroupe les copyrights, licenses et informations à propose de l'application design-bee-ios-settings-about

La page store ressemble fortement à celle de l'application Android déjà existante. Nous n'avons pas trouvé de chose à rajouter. L'onglet categories répertorie les expériences par catégories comme son nom l'indique. La page est quasiment la même que l'onglet home. design-bee-ios-store

La page store details permet de voir les détails d'une expérience avant de la télécharger. Il se peut qu'il manque des champs. design-bee-ios-store-details

Enfin, dîtes-nous ce que vous pensez du fond d'écran, nous avons essayé avec un fond blanc mais cela nous semblait trop clair. design-bee-ios-overview-fond-blanc

Merci de nous faire part de vos remarques.

Cordialement

duribreux commented 8 years ago

Agréablement surpris, on vous fera un débriefing demain. A titre personnel je trouve le fond trop mate, il faudra peut être revoir un peu le jeu de couleurs mais c'est de l'ordre du détail. C'est le genre de chose qu'on peut modifier facilement de toute façon.

Good job.

aveuiller commented 8 years ago

Navigation

Le diagramme ouvre quelques discussions:

Design

De manière générale:

Nous vous attendons donc demain à 9h30, avec une première réflexion (et maquettes si possible) sur les remarque ci-dessus. Si vous avez des questions, pensez à bien configurer votre environnement de travail (eduroam).

duribreux commented 8 years ago

Suite à notre réunion et après discussion, refaite quand même les visuels de toutes les activités en utilisant nos différentes remarques sauf login & register évidemment. Merci.

Tibooh commented 8 years ago

Maquettes:

Navigation Drawer

Le navigation drawer s'ouvrira en appuyant sur le bouton en haut a gauche sur la page Home La couleur utilisé n'est pas la couleur définitive, voulez vous le même orange que dans le reste de l'appli, ou bien un orange plus foncé comme ici ? Sinon le navigation Drawer affichera les expériences actives et inactives, ainsi que le bouton settings, store, achievement et un bouton help ?

navigation drawer

Home

home

Vos indications ont été prise en compte sur le Store et Détails du store:

Store

store

DétailStore

store-details

Sinon les autres pages n'ont pas changé, mis à part le fond que nous avons mis dans un blanc pas trop clair.

Settings

settings

Account

account

Nouveau diagramme de navigation :

diagrammev3

Développement

J'ai réussi à installer votre SDK.

J'ai juste un petit problème avec mon ordinateur qui m’empêche de pouvoir lancer l'exécution sur mon mobile. Linux ne reconnait pas mon téléphone dans les devices pour lancer l'éxecution mal grès avoir effectué toute les étapes de ce tuto (http://developer.android.com/tools/device.html)

Et impossible de lancer l'appli dans un émulateur, mon ordinateur n'est pas assez puissant...

Edit : J'ai finalement trouvé le problème, il venait de mon téléphone (LG g3) .. J'arrive à lancer l'appli sur un ancien téléphone..

Un autre problème est apparu que je n'avais pas vu :

Error:A problem occurred configuring project ':bee'.

Could not resolve all dependencies for configuration ':bee:_debugCompile'. Could not resolve com.github.PhilJay:MPAndroidChart:v2.1.6. Required by: bee-android:bee:unspecified

Could not GET 'https://jitpack.io/com/github/PhilJay/MPAndroidChart/v2.1.6/MPAndroidChart-v2.1.6.pom'. peer not authenticated

aveuiller commented 8 years ago

Bonjour,

Nous sommes très déçus que vous n'ayez pas su être force de proposition sur ce projet. Les écrans de Store présentés n'ont tout simplement subi aucune réflexion de votre part, votre seule contribution ici étant de reproduire à l'identique une proposition qui vous a été fournie et n'était, à dessein, pas parfaite (sens de rating, position de la description...).

Étant las de sans cesse revenir sur des points qui ne sont pris en compte (pas de point d'entrée sur le diagramme de navigation, deux fois les traces locales sur le détail d'une collecte, ...) et compte-tenu de votre manque d'implication concernant la création des maquettes (8 jours pour fournir si peu de modifications), nous allons vous laisser libre de commencer le développement sur les maquettes présentement proposées, mais nous ne pourrons pas vous donner la totalité des points sur les maquettes en l'état.

Ceci étant dit, voici quelques rêgles à absolument respecter lors de vos développement:

Nous baserons notre évaluation sur les pull requests que vous soumettrez sur le projet et qui seront intégrées à l'une des branches principales.

En outre, comment arrivez-vous à lancer l'application sur un ancien téléphone si la compilation ne fonctionne pas?

Tibooh commented 8 years ago

Bonjour,

Je ne comprends pas votre déception, nous avons appliqué scrupuleusement toutes vos remarques, nous avons bien aimé votre proposition sur le store et l'avons appliqué avec notre design. Nous avons passé notre mardi après-midi à refaire le design, j'ai ensuite passé mon samedi après-midi a dessiner un navigation drawer, refaire le diagramme de navigation et essayer d'installer le projet !

En l'état je ne vois pas ce qu'il y a à reprocher à nos maquettes, ce ne sont que des maquettes et nous retrouvons dedans toutes les idées qu'il nous faut développer alors je ne vois pas pourquoi nous n'aurions pas tout les points sur les maquettes...

Concernant le développement je n'arrive pas à lancer l'application. Mes 2 problèmes étaient distincts mon ordinateur ne détectait juste pas mon téléphone et je n'aurai pas pu tester, mais ce problème est réglé. Maintenant je peux lancer l’exécution de Bee, je choisis mon device qui est branché et ensuite il y a la compilation, n'est ce pas la bonne manière de procéder ?

Néanmoins j'ai toujours la même erreur à la compilation :

Error:A problem occurred configuring project ':bee'. Could not resolve all dependencies for configuration ':bee:_debugCompile'. Could not resolve com.github.PhilJay:MPAndroidChart:v2.1.6. Required by: bee-android:bee:unspecified

Could not GET 'https://jitpack.io/com/github/PhilJay/MPAndroidChart/v2.1.6/MPAndroidChart-v2.1.6.pom'. peer not authenticated

Concernant les commits, je crée une branche dans le projet et je la push normalement ? Pas de consigne particulière ? Quels sont les fichiers de configuration de l'éditeur à ne pas prendre ?

rouvoy commented 8 years ago

Le reproche qui vous est fait ici est l'absence de recul sur ce qui est proposé et l'absence de proposition quant au design de l'application mobile. En particulier, il vous a été conseillé de vous inspirer d'autres applications existantes et d'exemples de design pour proposer des idées nouvelles par rapport à l'état actuel de l'application Bee. Pourriez-vous nous indiquer la liste des applications et des exemples sur lesquels vous vous êtes appuyés pour faire vos propositions ? Force est de constater que le design actuel est encore très proche de l'existant et que les quelques nouveautés introduites sont celles qui ont été proposées par Julien et Antoine et que vous avez, en effet, recopié à l'identique dans un format plus graphique. D'où la déception qui a été formulée ici.

En tant qu'étudiants de Master (et plus de Licence) qui aspirent à des postes d'ingénieur d'ici un peu plus d'un an, vous êtes évalués sur votre capacité à être force de proposition et d'autonomie pour conduire ce projet. À ce titre, j'imagine que l'erreur que vous rencontrez peut «facilement» se résoudre via une requête sur Google.

Pour le processus de développement, nous vous demandons i) de forker le dépôt GitHub auquel vous avez librement accès, ii) travailler sur votre dépôt pour préparer une fonctionnalité (commit/push) et iii) de faire une pull request vers le dépôt initial. Nous évaluerons vos contributions via ces pull requests au travers desquelles nous vous ferons des retours.

Bonne continuation

duribreux commented 8 years ago

Nous reportons la réunion initialement prévue ce vendredi pour vous laisser le temps d'avancer sur le projet sauf si vous avez des interrogations qui nécessitent une entrevue.

En ce qui concernant la configuration reportez-vous au .gitignore du fichier courant pour voir les fichiers à exclure et assurez-vous de ne pas pousser le fichier gradle.properties que Antoine vous a envoyé par e-mail.

Tibooh commented 8 years ago

Nous nous posons quelques questions mais rien qui ne nécessite une entrevue.

Actuellement j'ai importé le projet de votre Git de apisforge.inria.fr, j'ai créé une nouvelle branche local et commencé le développement des pages Login/Register.

Comment procéder pour le push dans le projet GitHub ici pour que Quentin puisse accéder à mes modifs ? Sachant que dans Android-Studio le projet est synchronisé avec l'autre Git.

Faut il que je crée un nouveau projet à partir du GitHub et que je transphase tout le code manuellement ? Ou y a t-il moyen de pusher directement ici ? Si oui le quel ?

rouvoy commented 8 years ago

Je ne pense pas que cloner le projet GitLab existant pour le pousser ensuite dans le projet GitHub que nous vous avons créé soit la solution la plus simple pour vous, mais ce conseil n'engage que moi.

Il vous faut chacun travailler sur une branche indépendante en vous répartissant les tâches de développement (voir par exemple ce projet). À chaque fois que l'un de vous termine sa tâche, il pousse ses développements vers une branche commune develop en utilisant une pull request. Cette branche develop fait office de branche de référence pour la synchronisation de vos développements. Pour se synchroniser, il suffit d'utiliser la commande git rebase sur votre branche pour "importer" les derniers changement de la branche develop. De notre côté, nous validerons les pull requests faites vers la branche develop pour nous assurer que les développements ne cassent pas les version précédentes et vous faire d'éventuels remarques sur votre intégration.

Tibooh commented 8 years ago

D'accord merci de l'éclaircissement.

Je travaille donc maintenant sur la branche locale du projet GitHub créé par Antoine (Branch : PJI2016), où j'ai réussi à récupérer les modifs que j'ai fait hier, sauf qu'au moment de Pusher on me met :

Push failed Failed with error: ERROR: Permission to APISENSE/bee-android.git denied to Tibooh. fatal: Could not read from remote repository.

aveuiller commented 8 years ago

Bonjour,

C'est effectivement la branche PJI2016 qui est supposée recevoir vos développements.

Pour ce faire, le processus est le suivant:

  1. Vous devrez chacun forker le projet, le projet sera copié dans votre répertoire personnel et il vous sera possible d'y contribuer directement en poussant du code.
  2. Vous pourrez ensuite procéder à vos développements à l'aide de branches (ou de toute organisation qui vous siéra du moments que les messages de commits respectent la documentation fournie).
  3. Il vous suffira finalement d'effectuer une pull request (comme précédemment documentée par Romain) spécifique pour chaque ajout de feature (je vous recommande donc d'utiliser des branches afin de séparer chaque feature).
  4. Nous vous ferons les retours nécessaire autours de cette pull request si besoin et l'intégrerons à la branche locale au dépôt appartenant au groupe APISENSE si acceptée.
Tibooh commented 8 years ago

Bonjour,

Je n'arrive pas non plus à faire de Pull Request, ni sur la branche PJI2016 ni sur la branche Developp. Android-Studio me sort à chaque fois le même message d'erreur :

Can't Create Pull Request Push failed: ERROR: Permission to APISENSE/bee-android.git denied to Tibooh. Could not read from remote repository.

Je continue malgré tout mes développements, j'arrive uniquement à faire des commits. Je travaille actuellement sur les pages Login et Register et commence à me familiariser à votre code.

rouvoy commented 8 years ago

Tant que vous refuserez de lire attentivement les consignes et les conseils que nous vous donnons, cela ne pourra pas fonctionner correctement (cf. message d'Antoine ci-dessus).

Tibooh commented 8 years ago

Ah oui merci, en effet j'avais mal compris l'histoire des forks, j'essayerai ça demain.

Tibooh commented 8 years ago

Bonjour,

Voilà à quoi ressemble les pages login/register actuellement, il reste pas mal de petites choses à peaufiner (polices, boutons de connections...) , c'est assez difficile de coller parfaitement aux maquettes comme c'est la première fois que je fais du design mais je suis plutôt content pour l'instant.

On ne voit pas la toolbar dans la page register sur l'aperçu d'android studio, mais il y a bien une toolbar avec une fleche de retour et le titre "register"

Je ferai un pull request de ces pages bientôt.

layout-2016-03-30-201531 layout-2016-03-30-201509

PS : j'ai ajouté des icones a gauche des champs "user" et "password", qu'en pensez vous ?

aveuiller commented 8 years ago

Quelques remarques concernant votre développement:

Dans l'attente de votre pull request avec un design reflétant les maquettes proposées.

Ledit rendu: 2016-03-31-085454_1720x1093_scrot