note de synthèseainsi que la bibliothèque jquery contenant les fichiers nécessaires pour pourvoir...

Brice VIGNAL Janvier -Février 2017

BTS Services Informatiques aux Organisations Option SLAM

Note De Synthèse

Application mobile Shaver

VIGNAL 2016-2017BRICE SIO2

Sommaire

Table des matières

Sommaire...............................................................................................................................................2

I°) Présentation de l’entreprise et du projet...........................................................................................3

a) L’entreprise.........................................................................................................................................3

b) Description du projet..........................................................................................................................3

c) Technologie choisie.............................................................................................................................3

II°) Architecture des premières pages.....................................................................................................5

III°) Finalisation des fenêtres de l’application.......................................................................................11

IV) Divers correctifs effectués...............................................................................................................18

1.La Carrousel.......................................................................................................................................18

2. La fenêtre de choix homme/femme.................................................................................................20

VI°) Explication du framework Ionic......................................................................................................22

1. Installer Ioni......................................................................................................................................22

2. Tester Ionic.......................................................................................................................................23

V°) Finalisation des fenêtres et détails de l’application.........................................................................28

VI°) Mise en place des différents systèmes...........................................................................................33

1. La géolocalisation.............................................................................................................................33

2. Ionic run android..............................................................................................................................33

3. Plugin de la caméra...........................................................................................................................35

4. Création de la page « Profile »..........................................................................................................36

En conclusion........................................................................................................................................37

Quelques mots sur Shaver et son rêve.................................................................................................37

p. 2


I°) Présentation de l’entreprise et du projet

a) L’entrepriseShaver, est une application mobile crée par Damien Isidore un jeune entrepreneur étudiant basé à l’Université de Sorbonne Nouvelle. Elle permet de relier un coiffeur professionnel ou débutant à un particulier en se basant sur le système d’application d’Uber où encore Hitch. L’entreprise en elle-même est une start-up constituée de jeunes étudiants, travaillant dans le cadre de cette application, le rythme jeune et détendu de l’entreprise allie travail sérieux et qualité.

b) Description du projet

Étant une équipe de deux développeurs stagiaires, nous avons pour but de développer l’application intégralement du début jusqu’à ce qu’elle soit réalisée. Shaver possède plusieurs facettes dont des pages et fenêtres responsives. Notre objectif est de concevoir le squelette de l’application non désigné totalement avec ses différentes pages.

Pour ce faire nous avons chacun étés missionnés sur différentes parties du codage, l’un se chargeant de la structure du code donc le squelette et l’autre du design des fenêtres.

Le premier stagiaire ayant déjà débuté son stage, il ne restait plus que le design des pages et des fenêtres de l’application à créer, j’ai été missionné principalement à mon arrivé sur le design des fenêtres et le bouton-menu de l’application.

c) Technologie choisie

Ionic (basé sur cordova) : il s’agit d’un framework, utilisant AngularJS, permettant de développer desapplications hybrides (c’est-à-dire compatibles avec tous les téléphones, et en utilisant des langagesweb - HTML, CSS, et JavaScript en MVC).

p. 3


p. 4


II°) Architecture des premières pages

Au fur à mesure des jours, l’application commençait à prendre forme avec la mise au point des pages que nous avions réalisé. Il nous manque quelques éléments à mettre en forme tels que le ChatHead de Facebook Messenger, qui fera office de menu ainsi que des boutons « valider » pour le site internet. L’objectif de la bulle est de pouvoir valider des formulaires, de créer une interaction avec lesdifférentes pages de l’application. Entre autres, ce bouton servira à terme de moyen de familiarisation pour l’utilisateur, il pourra déplacer la bulle sur chaque extrémités de la page.

Le ChatHead de Facebook (la bulle messenger) sont présents de nos jours dans tous les smartphones,mais savoir comment le mettre en place est assez compliqué, car ce plugin nécessite un framework Javascript avec la bibliothèque jQuery Mobile.

p. 5

VIGNAL 2016-2017BRICE SIO2Après avoir réussi à faire une esquisse du bouton déplaçable, il a fallu intégrer le code dans le framework Angular JS qui utilise aussi des propriétés du Javascript, mais qui est différents de jQuery Mobile. Il a fallu donc utiliser la bibliothèque Jquery pour pouvoir créer le bouton déplaçable, et angularJS qui est la base de l’application, parce que comme étant évoqué récemment angularJS est utilisé pour créer des application hybrides.

Ici on avait le Code html de la bulle (bouton) qu’il fallait intégrer au code principal de l’application :

p. 6

VIGNAL 2016-2017BRICE SIO2Ensuite le code CSS de la bulle :

Ainsi que la bibliothèque jQuery contenant les fichiers nécessaires pour pourvoir animer la bulle et son code .JS

p. 7


Voici le résultat obtenu :

p. 8

VIGNAL 2016-2017BRICE SIO2Le principe est simple, le bouton est déplaçable partout sur l’écran de l’utilisateur en utilisant des coordonnées sur les axes (x, y), avec des restrictions au centre, ce qui fait que la bulle ne se déplacerait que vers les extrémités de l’écran :

C’était donc là notre plus grand défi à réaliser. Le langage utilisé pour ce type d’application hybride estle JavaScript, plus particulièrement l’Angular JS qui permettrait de générer des scripts en JavaScript et rendre la page plus dynamique avec des événements et des actions.

p. 9

VIGNAL 2016-2017BRICE SIO2Les fenêtres et les pages de l’application sont aussi sous format dynamique.

Quant à l’architecture de l’application elle est en MVC (Modèle-Vue-Contrôleur), cela consiste à classer les différentes fichiers de l’applications, dans un domaine spécifique, pour le « Modèle » ce sera tout ce qui constitue le base de l’application avec les relations entre certains fichier. La « Vue » sera comme son nom l’indique la vue donc la visualisation de l’information codée. Le « Contrôleur » sera celui qui contrôle les différents types de codages dans l’application et les mettra en relations.

Ici le CSS, sera la vue pour les différentes fenêtres et pages de l’application, le JS sera le modèle avec le script basé sous AngularJS ainsi que les scripts des autres pages et fenêtres, le contrôleur sera templates et Index.html.

p. 10


III°) Finalisation des fenêtres de l’application

Étant une équipe de deux développeurs étudiant, nous étions chacun chargés de travailler sur un aspect différent de l’application, l’application hybride, comprenait deux parties dont l’une était la page de l’application :

Cette page comprenait des renseignements à propos des types de coupes que l‘on voulaient avoir, et des coupes que l’on proposait aux clients, le but étant de proposer des coupes mais aussi de pouvoir en avoir qui ne sont pas du tout proposées dans le catalogue du Shaver (coiffeur).

Mais il y avait aussi les fenêtres à gérer pour pouvoir avoir une application rapide et efficace, gérant tous les types de smartphones et tablettes.

Le format responsive de l’application permettait de pouvoir avoir un format adaptatif aux différents téléphones grâces a Ionic le Framework que nous utilisons. Ionic est un framework permettant de pouvoir créer des application hybrides sur smartphone, il se base sur le langage AngularJs qui est un langage dérivé du javascript.

p. 11

VIGNAL 2016-2017BRICE SIO2Pour ma part, j’étais chargé de devoir construire l’ensemble des fenêtres de l’application, avec leurs designs et leurs propriétés, avec des documents et images mises à disposition. Ces documents nous sont fournis pour pouvoir remplir les pages et les fenêtres de l’application.

L’application ayant évolué convenablement, au cours nos semaines de stage, nous avions eu différents objectifs a réaliser pour améliorer l’application.

L’application Hybride était développée sous l’environnement Cordova Ionic. Pour pouvoir lancer l’application puis interagir avec celle-ci et installer des plugins, il fallait utiliser une console directement généré par GitHub

p. 12


Une fois notre application générée, nous accédons à l’environnement de notre application : la page d’accueil était composé de html et CSS conçus par nous-mêmes, avec un code Javascript directement généré par l’application.

p. 13


p. 14

VIGNAL 2016-2017BRICE SIO2Ainsi que les scripts controleur.js, services.js, app.js :

p. 15


p. 16


p. 17


IV) Divers correctifs effectués

Les pages et les fenêtres on toutes été faites, cependant certains détails restaient à régler pour le bondéveloppement de l’application et son design.

Notre cheklist avait pour but de corriger ces différents problèmes que nous avions rencontrés auparavant. Cette checklist est complétée par le tuteur du stage il nous permet de faire un bilan complet de la semaines avec les modifications effectuées.

1.La Carrousel

C’était l’un des éléments les plus difficiles à réaliser après la bulle qui était encore inachevé.

Il fallait programmer des carrousels qui avaient une fonction de slider de droite à gauche ou inversement. Comme dans une page ou dans des fenêtres mais cette fois-ci avec des images, l’enjeu, en lui-même était assez compliqué, mais fut simple une fois la syntaxe comprise :

p. 18

VIGNAL 2016-2017BRICE SIO2On avait ci-dessus les lignes essentielles de code pour effectuer une carrousel, avec des propriétés d’ionic telles que <ion-slides></ion-slides> qui servaient à créer une fenêtres avec des objets à l’intérieur en mouvement horizontale. Le tout encadré par une <ion-slides-page></ion-slides-pages> qui mettaient forme la page dans laquelle serait la fenêtre en mouvement.

p. 19


2. La fenêtre de choix homme/femme

L’autre détails que nous avions a régler était la fenêtre de choix, c’est à dire que quand l’utilisateur démarrait l’application pour la première fois, la toute première fenêtre serait une fenêtre e renseignant sur le genre de l’utilisateur, si c’est un homme ou une femme ainsi que les différentes coiffures adaptées à leur ethnie, leur type de visage.

p. 20

VIGNAL 2016-2017BRICE SIO2Ayant résolu tous ces petits problèmes, l’objectif devenait alors

• de développer la bulle aux formats adaptatifs à Ionic, malgré le fait qu’il utilise le framework jQuery avec sa bibliothèque,

• mais aussi la création et la relation avec la base de données, selon quelques recherches celle que nous allons utiliser se base sur le service de google Firebase qui est une base de donnéescontenant des données au format JSON, un format permettant de pouvoir stocker nos donnés via le serveur distant de Firebase.

p. 21


VI°) Explication du framework Ionic

1. Installer Ioni

Il faut NodeJs afin d’installer ionic.

On utilise alors la console pour la suite :

Commande pour installer Ionic :

Puis on lance la commande Ionic pour créer un projet, suivi du nom du projet.

On précise blank pour que le projet soit vierge, car Ionic propose également des templates prédéfinis(par défaut, sans préciser blank, Ionic crée un projet avec un side-menu).

p. 22

VIGNAL 2016-2017BRICE SIO22. Tester Ionic

Pour tester l’application, ionic serve crée un serveur local et ouvre une page internet pour testerl’application sur navigateur (chrome inclus une écran responsive selon différents téléphones, ce quifavorise le test).

Cela ne remplace pas un test sur téléphone, en branchant un smartphone android à l’ordinateur et enlançant ionic run android pour que l’application se lance sur le premier téléphone détecté.

Ionic emulate android est également possible pour émuler l’application mais il faut Android Studio, etl’émulation est lente et demande beaucoup de ressources.

Voici l’arborescence de base, et les fichiers que j’ai le plus utilisé :

p. 23

VIGNAL 2016-2017BRICE SIO2Et voilà l’arborescence du fichier www :

Voilà le fichier JavaScript :

On retrouve la structure MVC avec les controlers, apps.js qui correspond au routes, ion-datetime-picker est un plugin ionic.

p. 24

VIGNAL 2016-2017BRICE SIO2Voilà les routes, qui gèrent le lien entre les pages de l’application :

Dans Ionic on différencie les pages, définies dans les routes et correspondant à un fichier HTML, et lesmodals, correspondant à des fenêtres recouvrant les pages à l’apparition, définies dans des fichiersHTML « virtuels ».

Voici un modal :

p. 25


Un modal, pour être affiché, doit être appelé par un contrôleur, comme celui-ci :

Les deux dernières fonctions appliquent un filtre CSS rendant flou la page de l’application derrière le modal pendant que celui-ci est affiché, puis l’enlèvent.

p. 26

VIGNAL 2016-2017BRICE SIO2Voici un extrait du code HTML de la page principale :

On retrouve des balises HTML propres à Ionic telles que ion-content, ou encore ion-header-bar, ion-view, …

Elles englobent des balises et des classes permettant l’adaptabilité sur mobile, et sont doncindispensables.

p. 27


V°) Finalisation des fenêtres et détails de l’application

Quelques mots sur le plan stratégique de l’application :

Après avoir bien avancés sous les différentes parties de l’application, nous sommes arrivés à un moment ou l’application commençait à prendre forme et avoir un design correspondant à une V1.

En effet l’autre élément phare de cette application c’est de pouvoir relier les coiffeurs et les particuliers entre-eux, sans que les créateurs puissent pour le moment engranger de l’argent, selon leur technique stratégique, le déploiement d’une V1 de l’application pourrait familiariser quelques utilisateurs au nouveau concept pour ainsi permettre de recevoir des retours, bénéfiques ou non.

L’autre objectif est de trouver des incubateurs permettant de valider et financer leur projet pour ce faire, ils veulent arriver avec cette première version de l’application que je développe, pour donner une forme au projet et permettre de sensibiliser et persuadés les incubateurs.

En bref ,étant missionné sur la fin du design de l’application j’ai dû revoir ou mettre à jour certains éléments de l’application.

On à commencé par refaire le design de la fenêtres des « Filtres », le changement majeur de cette fenêtre à été de passer d’un carrousel à une liste d’images :

p. 28

VIGNAL 2016-2017BRICE SIO2Le passage à une liste d’image était justifié parce qu’il n’y avait pas de compatibilité avec la possibilitéde sélectionner des images, une par une.

p. 29

VIGNAL 2016-2017BRICE SIO2L’autre nouveau changement, qui a été intégré récemment, c’est le bandeau du bas qui permet de sélectionner si on veux se coiffer « maintenant » ce qui active la géolocalisation automatique, ou biende se coiffer « plus tard » qui permet de basculer dans une barre de recherche d’adresse où l’on peut saisir manuellement l’adresse à laquelle on veux se coiffer.

Les créations réalisées ensuite sont les pages d’évaluation des rendez-vous qui étaient assez complexes à concevoir du fait de la syntaxe du langage AngularJs.

p. 30

VIGNAL 2016-2017BRICE SIO2J’ai dû relier des fenêtres via le contrôleur, qui crée une dépendance entre les différentes pages. La fenêtre « Bien » commence avec une notation de 3 étoiles, et une case pourboire pour le pourboire que l’on veux ajouter ; la fenêtre « Correct » résume la notation à 1 étoile minimum et une case aussi pour le pourboire, la dernière fenêtre « Regret » est celle qui demandera à l’utilisateur de donner un commentaire, et pourquoi ce rendez-vous a été considéré comme « regrettable » :

p. 31

VIGNAL 2016-2017BRICE SIO2Nous sommes donc arrivés au terme de la première version de l’application avec ces différents changements.

La prochaine étape était de commencer la gestion de la base de données via Firebase, que nous avons déjà présenté, c’est un SGBD comme PhpMyAdmin, qui permet de stocker des données directement envoyés en JSON.

Cela permettra de stocker les informations personnelles des utilisateurs ainsi que leur informations bancaires si besoin.

p. 32


VI°) Mise en place des différents systèmes

1. La géolocalisation

Le système de géolocalisation de l’application était un des systèmes fondamentals à exécuter pour le bon déroulement de l’application. Après que le client ait choisit sa coiffure il fallait programmer l’endroit où la réaliser. Plusieurs choix s’offraient à l’utilisateur, « chez soi », « en salon », ou « chez mon shaver ». Si l’utilisateur appuyait sur « chez soi », le lien vers la géolocalisation était donc activé pour pouvoir fournir les coordonnées exactes du coiffeur, s’il appuyait sur « en salon » l’utilisateur avait les coordonnées des différents salonsà proximité de sa position,ou si l’utilisateur appuyait sur « chez mon shaver », il disposait des coordonnées de tous les shaver à proximité de sa positions actuelle.

C’est grâce à l’aide d’un plugin du framerwork que l’on a pu élaborer cette carte Google maps.

Les coordonnées des coiffeurs seront administrées depuis la base de données, l’emplacement de leurs salons seront ensuite indiqués par des marqueurs.

2. Ionic run android

L’émulation de l’application ne suffisant pas pour cette nouvelles fonctionnalités, il a fallu donc lancer directement l’application sur smartphone pour pouvoir la tester en direct. Cela permettait de détecter la présence de bugs ou ce qu’il fallait corriger pour l’implémentation des plugins comme celui de la géolocalisation qui utilise les données mobiles d’un smartphone ainsi que l’itinérance sur les données en activant la géolocalisation.

Avec cette commande, Ionic construit l’application via les fichiers principaux de l’application et l’adapte au format mobile :

p. 33

VIGNAL 2016-2017BRICE SIO2En l’occurrence l’ajout de la plateforme android pour smartphone Android, et celle de la plateforme ios pour smartphone IOS :

La commande bash finale à exécuter pour pouvoir tester l’application est :

Ensuite l’application crée une icône depuis le smartphone pour pouvoir y accéder sans passer par les commandes.

Les tests finals sont bientôt en cours de réalisations, quelques plugins sont encore en traitement pourfinaliser les derniers petits détails de l’application.

Durant la finalisation des détails de l’application comprenant les derniers plugins, et fenêtres, et changement, il ya plusieurs éventuelles hypothèse et idées pour trouver le bon plugin,

p. 34


3. Plugin de la caméra

Le plugin de la caméra est un plugin utilisant le framework ionic, cordova, il s’installe par le biais d’une ligne de commande « cordova plugin add cordova-plugin-camera », ainsi grâce à ce plugin on a pu sélectionner des photos depuis notre galerie du téléphone pour l’ajouter a notre application, on a crée une fenêtre addpic qui ajoute les nouvelles photos des utilisateurs ou coiffeurs.

L’image se chargeait directement sur la fenêtre, on pouvait aussi « prendre une vidéo depuis la galerie » ce qui permettait de visualiser aussi une vidéo depuis la fenêtre.

Les derniers changements étaient graphiques, c’est-à-dire qu’il a fallu régler des petits détails concernant la responsivité de l’application, les éléments oublier ou a changer…

p. 35


4. Création de la page « Profile »

La page profile, sert à mettre en relation l’une des images d’une galerie, et de pouvoir « liker » (aimer) une photo de l’un des coiffeurs. Elle montre le détails ou la description de la photo, on peux aussi partager la photo sur différents réseaux sociaux dont Facebook Instagram ou Twitter.

p. 36


En conclusion

L’application Shaver n’est pas encore prête à voir le jour d’ici ces prochains mois malgré les changements faits au cours de mon stage. Il y a plusieurs point positifs et négatifs : le fait d’intégrer leplugin de la camera et celui de la géolocalisation a été un défi très important relevé. Ne connaissant pas ce langage j’ai du m’adapter et créer ou intégrer des fonctions. En réalité la grande phase importante de cette application reste la base de données, elle servira à intégrer les informations ainsi que les « post-photo » et aussi les vidéos de tous les utilisateurs qu’ils soient shaver ou clients. Les points négatifs eont été l’impossibilité d’ajouter « la bulle » qui crée un conflit entre le langage angularJs et Jquery Mobile, ou encore d’autres options comme le drag & drop.

Mais Shaver sera aussi une réseau de « proximité » permettant de créer des liens sociaux entre chaque individus. Il reprendra le concept de chaque réseau social tel que Facebook, Instagram ou encore Twitter, le système de « like » ne dépaysera pas certains utilisateurs des ces réseau.

Quelques mots sur Shaver et son rêve

Le grand rêve de cette start-up c’est aussi de s’étendre au niveau mondial.Selon eux, ayant un bon concept, une publicité marketing assez forte derrière eux, ils pourront se faire une place dans le monde entier. Selon les mots du chef d’entreprise, Damien Isidore, « Le must serait d’avoir un coiffeursitué a Shanghai, qui peux venir te coiffer chez toi », Shanghai, mais aussi Tokyo, Singapour ou d’autres pays. N’ayant pas de bilan prévisionnel, ils veulent faire en sorte d’engranger un maximum d’incubateur pour pouvoir promouvoir leur application au grand jour.

« La publicité c’est quelques chose qui permettra de faire pousser l’application de manière exponentielle ».

Entre autre c’est une idée novatrice qui prévoit d’avoir de la proximité avec les clients et les professionnels alliant créativité simplicité et « cool-attitude ».

Elle m’a permis d’en apprendre d’avantage sur le développement mobile et m’a aiguillé sur mon choixavenir pour ma poursuite d’étude. En effet, mon prochain choix de cursus sera axé sur le développement mobile et web, plus particulièrement sur les framework des langages web.

Cette expérience chez Shaver complète mes compétence et mes aptitudes à acquérir durant cette deuxième année de BTS. Elle suit un langage déjà vue en cours (JavaScript) mais pas en détails avec une structure claire et concise, et de nouvelles syntaxes. Ce langage m’a formé en apprenant d’avantage, sur le mobile, le web et les framework qui l’entourent.

Je tiens à remercier les membres du groupe Shaver qui m’ont bien accueilli et beaucoup appris sur le monde de l‘entrepreneuriat et des Start-up (un concept que je ne connaissais pas du tout).

p. 37

note de synthèseainsi que la bibliothèque jquery contenant les fichiers nécessaires pour pourvoir...

Documents