Dans ce dernier chapitre sur la création d’un design d’application web, du brief créatif à l’intégration, nous essaierons d’être le plus simple et concis.
Une fois le brief créatif (voir l’article précédent Design d’application web (1/3) : le brief créatif ) et les maquettes créées et approuvées en interne et par le client (voir l’article précédent Design d’application web (2/3) : la conception des maquettes), nous pouvons débuter l’intégration de l’application.
Avant de pouvoir intégrer le design, le développeur back-end doit créer la structure de l’application.
- Développeur back-end
-
Le développeur back end est la personne qui réalise la partie cachée d’une application web. Il conçoit la structure et les fonctionnalités de la solution et coordonne aussi la partie serveur.
Nous choisissons en premier lieu la technologie adaptée au projet du client et à son besoin.
La solution d’un WordPress sera toute indiquée pour un site simple, avec ou sans multilingue, e-commerce ou non et pouvant intégrer un blog.
Alors qu’un besoin métier plus spécifique pourra nécessité l’appel à des technologies plus complexes (Ruby on Rails, Laravel, symfony)
Nous sélectionnons aussi les plugins qui seront nécessaires. Par exemple, pour les sites de vente en ligne nous utilisons le plugin WooCommerce disponible sur WordPress.
Nous créons ensuite le compte du nouveau projet sur un serveur dédié pour pouvoir mettre l’application en ligne.
Nous mettons en place un système de versioning en créant un dépôt Git qui sera hébergé sur GitHub.
Cet outil nous permet d’apporter des modifications sur l’application de manière sécurisée car chaque changement est archivé sur une branche principale.
Il nous est alors plus facile d’identifier d’éventuels problèmes, de pouvoir les corriger, ou de revenir en arrière sur des changements.
Avec ce genre d’outil permettant de conserver l’historique de projet il est beaucoup plus simple et sécurisant de travailler en équipe sur un même projet, comme le font régulièrement un développeur back et un développeur front. Chacun peut travailler dans une sous-branche puis mettre ses modifications sur la branche principale en vérifiant que cela n’impacte pas le travail réalisé par d’autres.
Enfin, nous créons le projet en établissant l’environnement local qui nous servira pour développer l’application en direct.
Pour mener à bien un projet, il est nécessaire d’utiliser des outils de communication et de gestion.
Slack est une messagerie instantanée professionnelle.
Elle nous sert à créer des espaces pour chaque projet, mettre les informations principales en commun et échanger.
C’est aussi sur cet outil que nous recevons les alertes en cas d’erreur sur un projet.
Enfin, nous pouvons consulter l’avancée des projets via les messages git qui sont redirigées sur le channel correspondant à chacun.
Basecamp est une application de planification de tâches et d’organisation de projet.
À chaque lancement d’application, nous créons un nouveau projet sur cet outil. Nous listons toutes les tâches à réaliser dans des tableaux séparés : installation de l’environnement, back, front, avant mise en production. Cela permet un suivi rigoureux sur l’avancement du projet, à la fois pour les développeurs et pour le gestionnaire de projet.
Nous ajoutons les documents (maquettes, charte graphique, schéma,…) relatif au projet, nécessaire pour sa compréhension et sa réalisation.
Enfin, l’outil comprend un chat où l’équipe peut échanger librement sur le projet en question.
Maintenant que l’environnement de développement est prêt, nous installons les plugins nécessaires au fonctionnement du projet (e-commerce, multilingue, … ).
Dans le cas où l’application doit être liée à une base de données du client, il faut vérifier que tout soit mis en place pour que les données soient bien transmises et quelles correspondent bien aux informations attendues :
- Si le client utilise un logiciel de gestion, par exemple l’ERP Sage, il faudra prévoir de concevoir des connecteurs pour lier la base des produits à un site d’e-commerce.
- Dans le cas d’une base de produit PIM (Product Information Management) nous demandons au client les noms des clés pour appeler les informations sur les produits.
En dehors des extensions qu’on peut être amenées à utiliser, nous pouvons réaliser des développements spécifiques aux besoins du client.
Pour s’assurer que l’application soit toujours fonctionnelle, nous testons régulièrement les modifications sur un environnement temporaire appelé staging ou pré-production.
Une fois les tests effectués, nous mettons les modifications sur l’environnement de production, autrement dit sur l’application en ligne.
- Developpeur front-end/intégrateur
-
Le développeur front-end intègre le design d’une application. Il travaille souvent de pair avec un graphiste qui lui fait parvenir les maquettes réalisées. Il est aussi en charge d’optimiser l’ergonomie.
L’intégrateur exploite plusieurs langages pour styliser et dynamiser une application : le CSS et le Javascript. Ils sont appelés et utilisés sur les fichiers HTML.
Depuis plusieurs années, nous utilisons principalement le framework TailwindCSS, et ce pour plusieurs raisons :
- Il est disponible sur la plupart des outils que nous exploitons
- Il est pratique à utiliser, lire et comprendre grâce au processus d’intégration de classes directement dans le fichier HTML, sans passer par la création de fichiers CSS (utility-first).
- Il bénéficie du mode “Just in time” qui permet de ne charger seulement que les classes appelées dans notre code, il ne charge donc pas la totalité de la librairie du framework. Ce qui est un bénéfice considérable pour les performances d’affichage de l’application puisque le CSS généré est allégé au maximum.
- Il est conçu dans une logique responsive
D’autres librairies existent (Bootstrap, InuitCSS, Bulma, …) et ont d’autres intérêts comme celui d’avoir des composants déjà stylisés.
Comme pour le développement back, avant de mettre nos modifications en ligne, les développeurs testent en local puis éventuellement en pré-production pour détecter d’éventuels effets de bord, et tout autres problèmes de design. Nous mettons également un point d’honneur à vérifier et optimiser le responsive puisque nous intégrons dans une logique de mobile first.
La réalisation d’une application web est un travail d’équipe entre développeur back-end et front-end.
Il arrive que d’autres acteurs soient nécessaires pour mener à bien le projet : responsable réseaux, connecteur…
Une fois que la structure du projet et les outils utiles à son développement sont en place, le développeur front procède à l’intégration du style conformément aux maquettes et à la charte graphique du client.