Application

Pour illustrer mon expérience dans la création d'applications, quoi de mieux que de vous montrer toutes les étapes que j'ai suivies pour créer mon application :

Logo

Sharesport

apple storeplay store

Qu'est ce que c'est Sharesport ?

Description of image

J'ai choisi de créer cette application parce qu'avant toute chose, je suis un passionné de sport et je pense que c'est le meilleur moyen de maintenir un bon état d'esprit.

Le sport n'est pas seulement une passion pour moi, c'est aussi un moyen de promouvoir le bien-être mental et physique. C'est l'une des raisons pour lesquelles j'ai voulu que Sharesport soit accessible à tous.

De plus, il devenait de plus en plus difficile de trouver des personnes avec qui pratiquer des sports en groupe. Par exemple, organiser des matchs de football devenait compliqué, tout comme trouver un partenaire pour courir. De plus, pour certaines personnes, s'adonner à un sport en solitaire peut être difficile à maintenir. C'est pourquoi ShareSport répond à toutes ces problématiques. Cette application permet à n'importe qui de créer des séances de sport auxquelles tout le monde peut participer.

La devise de ShareSport est : 'Rencontrez des personnes et faites du sport.' Cette application est conçue pour résoudre des problèmes très concrets dans le domaine du sport, en facilitant les rencontres et en

isant les barrières économiques et sociales.

Pré-étape avant la création ?

Description of image

Avant la création de l'application, plusieurs documents ont été nécessaires pour obtenir une vue d'ensemble claire du projet. Le point de départ a été l'élaboration d'un business plan exhaustif. Ce document crucial a permis de mettre en lumière tous les aspects essentiels à la réussite du projet, tels que l'analyse de marché, l’étude du modèle économique, et bien d'autres facteurs.

Technologies utilisées

Description of image

En ce qui concerne les technologies utilisées, j'ai opté pour Flutter pour la partie frontend et Firebase Firestore pour la partie backend. J'ai choisi ces technologies pour plusieurs raisons. Tout d'abord, je souhaitais absolument utiliser une technologie qui me permettrait de développer une application pour les deux principales plateformes (Android et iOS) en utilisant un seul langage de programmation. J'avais donc le choix entre React Native et Flutter. J'ai finalement choisi Flutter, car il s'intègre parfaitement avec tout un écosystème de services, notamment Firebase.

L'un des avantages clés de Flutter est sa capacité à permettre un développement multiplateforme efficace. Cela réduit non seulement le temps de développement, mais aussi les coûts associés.

Pour le backend, j'ai choisi Firebase Firestore en raison de sa compatibilité native avec Flutter et aussi parce qu'il propose une solution de stockage de données NoSQL. Le concept du NoSQL m'avait toujours intrigué, et c'était l'occasion idéale pour moi de l'apprendre. De plus, Firestore simplifie de nom

eux aspects tels que le stockage, l'authentification et bien d'autres grâce aux fonctionnalités qu'il propose.

L'écosystème de Firebase offre une panoplie de services qui vont bien au-delà du simple stockage de données. Il comprend également des fonctionnalités pour l'analyse, la monétisation et même l'intelligence artificielle, ce qui fait de lui un choix idéal pour un développement rapide et robuste.

Méthodologie utilisée

Description of image

Pour la méthodologie de développement, j'ai adopté une approche Scrum en raison d'une date limite imminente pour la rentrée. Avant de lancer chaque sprint, j'attribuais un nom

e de points à chaque story afin d'évaluer sa complexité et le temps qu'elle me prendrait à réaliser.

Cette démarche me permettait de mieux planifier mes journées et d'optimiser la gestion de mon sprint. Chaque sprint avait une durée d'une semaine, durant laquelle je m'efforçais de compléter toutes les stories prévues.

Diagramme

Description of image

Avant de débuter le développement, un diagramme de cas d'utilisation a été établi pour avoir une vue globale des fonctionnalités à implémenter. Suite à cela, des diagrammes de séquences ont été créés pour chacune de ces fonctionnalités.

Outil organisationnel

Description of image

Pour gérer toute cette organisation, j'ai utilisé l'outil Notion, qui a facilité la gestion de mes sprints. Il m'a permis de savoir ce qui avait été accompli, ce qui était en cours de réalisation et ce qui restait à faire.

Notion offre des fonctionnalités qui permettent de créer des tableaux Kanban, ce qui est idéal pour suivre l'avancement des sprints en utilisant une méthodologie Agile comme Scrum. Notion a également servi de carnet de notes pour toutes les idées qui me traversaient l'esprit. Cet outil m'a grandement aidé à simplifier toute l'organisation nécessaire à la création de cette application.

UX/UI design

Description of image

Avant de commencer à créer les maquettes, je cherche à m'inspirer de ce qui se fait de mieux en termes de design. C'est pourquoi je consulte des sites comme Dribbble et Mobbin, qui me fournissent une source inépuisable d'inspiration. Les sites comme Dribbble et Mobbin me permettent de réaliser une analyse concurrentielle et de comprendre les tendances actuelles en matière de design d'interface utilisateur (UI) et d'expérience utilisateur (UX).

UI design

Description of image

Une fois que j'ai toutes les sources d'inspiration nécessaires, je passe à la création des maquettes. Pour cela, j'utilise deux outils.

Papier : Je commence par dessiner sur papier, car je trouve qu'il stimule davantage l'imagination et encourage la créativité. Le dessin sur papier offre une grande liberté de mouvement et permet de gribouiller, d'effacer et de recommencer facilement, ce qui est idéal pour la phase initiale de

ainstorming. Une fois les maquettes bien établies sur papier, je migre vers un outil numérique : Balsamiq.

Balsamiq : Cet outil permet de créer des interfaces utilisateur simples et intuitives. Il s'agit principalement pour moi de transposer les concepts dessinés sur papier dans Balsamiq. Après avoir terminé les maquettes dans cet outil, je les soumets à mes amis pour des tests d'ergonomie. Les retours obtenus sont précieux et me permettent de faire les ajustements nécessaires avant de passer à la phase de design d'expérience utilisateur (UX).

Ux design

Description of image

Après avoir validé mes maquettes sur Balsamiq, j'ai poursuivi avec la conception du design sur Figma, m'inspirant des éléments visuels que j'avais rassemblés en amont. Ce travail s'appuie sur les connaissances que j'ai accumulées au fil des années, à travers des vidéos YouTube, des formations suivies sur Udemy, et de nom

eux blogs consultés.

J'ai choisi le noir comme couleur primaire et le blanc pour le secondaire, car elles correspondent à l'identité visuelle établie par mon logo. En utilisant les mêmes couleurs que celles du logo, je m'assure que l'application conserve une identité de marque cohérente, ce qui est crucial pour la reconnaissance et la fidélité de la marque. Sharesport est une plateforme qui offre une grande variété de sports à ses utilisateurs.

Le défi en matière de design était de trouver une couleur qui puisse unifier ces différents sports sans favoriser l'un ou l'autre. Le noir est une couleur neutre qui n'est associée à aucun sport en particulier, ce qui permet à la plateforme de ne pas sembler biaisée envers une discipline sportive spécifique.

Dévelopement

Description of image

Avant de me lancer dans l'implémentation des fonctionnalités, j'ai d'abord retranscrit le design visuel de l'application en utilisant Flutter. En somme, il s'agissait d'un copier-coller fidèle des maquettes élaborées sur Figma.

Une fois le design visuel reproduit avec précision, je suis passé à la programmation des fonctionnalités, en m'appuyant sur les diagrammes de séquence que j'avais préalablement établis.

Voici quelques fonctionnalités intéressantes que j’ai dû créer pour ce projet :

Authentification

Description of image

Comme dans tout projet solide, l'authentification constitue une étape incontournable. Cette fonction permet aux utilisateurs de s'identifier au sein de l'application. Grâce à cette authentification, nous pouvons suivre qui a créé une séance sportive et qui y a participé.

Pour mettre en œuvre cette fonctionnalité, j'ai utilisé Firestore Authenticator, qui offre aux utilisateurs plusieurs options d'authentification : une connexion classique par courrier électronique et mot de passe, ainsi que des connexions via Google et Apple (cette dernière étant réservée aux utilisateurs d'iOS).

Saisie d’adresses

Description of image

L'une des étapes cruciales lors de la création d'une séance sur Sharesport est la saisie d'une adresse. Afin d'éviter toute erreur ou ambiguïté, j'ai mis en place une fonctionnalité d'aide à la saisie. Lorsqu'un utilisateur commence à taper une adresse dans le champ dédié, une liste de suggestions d'adresses s'affiche, basée sur les caractères saisis.

Une fois que l'utilisateur repère l'adresse souhaitée dans les suggestions, il peut simplement la sélectionner. Cela permet à Sharesport de disposer d'une adresse valide, ce qui est indispensable pour obtenir le point géographique de la séance et ainsi calculer la distance par rapport à chaque utilisateur participant.

Cette fonctionnalité de suggestions d'adresses a été réalisée grâce à l'API Place Autocomplete de Google. Cette fonctionnalité améliore grandement l'expérience utilisateur en simplifiant la saisie d'adresses, ce qui accélère le processus de création de séances sportives.

Système de notifications

Description of image

Pour maintenir les utilisateurs informés des nouvelles séances créées ou des mises à jour des séances auxquelles ils sont inscrits, l'incorporation d'un système de notifications était indispensable. Chaque utilisateur reçoit un FCM (Firebase Cloud Messaging) Token lors de son inscription sur la plateforme, lequel est enregistré dans Firebase et mis à jour à chaque connexion. Ce FCM Token permet d'envoyer des notifications push aux utilisateurs.

La gestion des notifications s'effectue via une fonction cloud qui se déclenche sur la base de déclencheurs spécifiques—soit la création d'une nouvelle séance, soit l'ajout d'une nouvelle personne à une séance existante. En conséquence, une notification est envoyée à tous les utilisateurs concernés.

Pour les appareils iOS, une étape supplémentaire est nécessaire pour intégrer les notifications push d'Apple. Cela implique des configurations spécifiques dans Xcode pour activer les notifications sur ces appareils.

Vérifications d’images

Description of image

Pour préserver l'intégrité de l'application et garantir un environnement sûr pour les utilisateurs, j'ai intégré une fonction de vérification d'images. Cette fonction est essentielle pour éviter la mise en ligne de contenu inapproprié ou obscène dans les photos de profil ou les images des séances sportives.

J'ai utilisé l'API Cloud Vision de Google pour cette fonctionnalité. Cette API scanne l'image téléchargée par l'utilisateur pour détecter tout contenu potentiellement choquant. Si une telle image est identifiée, un message d'avertissement est affiché à l'utilisateur. Dans le cas contraire, l'image est enregistrée dans la base de données Firestore.

Comme vous pouvez le voir, google permet de créer une application facilement en intégrant des fonctionnalités complexes, grâce à leur api. Une fois que, j’ai fini ma première version, j’ai passé à l’étape de test.

Phase de test

Description of image

Après avoir achevé la première version de l'application Sharesport, j'ai passé à l'étape cruciale du test. Cette étape est essentielle pour identifier tout bug, lacune ou inefficacité dans l'application avant son lancement public.

Les différents types de tests que j'ai effectué sont les suivants :

Tests Unitaires: Pour vérifier la logique de chaque fonction et méthode.

Tests d'Intégration: Pour s'assurer que différents composants de l'application interagissent correctement entre eux.

Tests de Performance: Pour évaluer la réactivité et la stabilité de l'application sous diverses conditions.

Tests d'Utilisabilité: Pour juger de l'expérience utilisateur et identifier tout obstacle potentiel à une utilisation fluide.

Tests Bêta: Une version bêta de l'application peut être publiée pour obtenir des retours en conditions réelles d'une petite communauté d'utilisateurs.

Outils et Techniques

Description of image

J'ai utilisé des frameworks de tests spécifiques à Flutter et Firebase pour réaliser les tests unitaires et d'intégration.

J'ai également fait appel à des utilisateurs réels pour les tests d'utilisabilité, collectant leurs avis via des questionnaires et des entretiens.

Feedback

Description of image

Suite aux résultats des tests, j'ai effectué les ajustements nécessaires pour améliorer l'application. Cela a impliqué à la fois des modifications mineures, comme le débogage et le peaufinage de l'interface utilisateur, et des révisions plus substantielles pouvant toucher à la logique de l'application ou à ses fonctionnalités.

La phase de test a été l'occasion de valider et d'ajuster le travail réalisé jusqu'à ce point. Elle m'a permis de peaufiner l'application pour assurer une expérience utilisateur de qualité et une performance optimale. Le recours aux outils et services de Google a été un facteur clé de la réussite de ce projet, simplifiant la tâche complexe de développement d'application.

Phase de déploiement

Description of image

Après avoir franchi toutes les étapes de développement et de test, il était enfin temps de déployer l'application ShareSport sur les magasins d'applications officiels : le Google Play Store et l'Apple App Store.

Déploiement sur Google Play Store

Description of image

Création du compte: Il est nécessaire d'ouvrir un compte sur la Google Cloud Console et d'acheter une licence de développeur pour 30 CHF.

Préparation du fichier: La commande `flutter build` permet de créer le fichier `.aab` nécessaire au déploiement.

Mise en ligne: Le fichier `.aab` est ensuite téléchargé sur la console Google Play, suivant les instructions pour la mise en production.

Déploiement sur App Store

Description of image

Création du compte: J'ai créé un compte sur App Store Connect et acquis la licence de développeur, qui coûte 180 CHF.

Archivage: Avant la publication, il est nécessaire de créer une archive de l'application via Xcode. .

Mise en ligne: Cette archive est ensuite téléchargée sur App Store Connect pour soumission à l'équipe d'examen d'Apple.

Validation et Mise en Production

Description of image

Après avoir soumis les applications aux plateformes respectives, chacune d'elles doit passer par une phase de validation. Des équipes de test de chaque plateforme examinent l'application pour s'assurer qu'elle respecte leurs directives et critères de qualité.

Une fois la validation obtenue, l'application est mise en production et devient accessible au public. Cette étape marque la concrétisation de tout le travail acharné et l'investissement dans le projet.

Suivi et Mises à Jour

Description of image

Il est crucial de suivre les performances de l'application après sa mise en production. Les avis des utilisateurs, les données d'analyse et les rapports d'erreur fournissent des informations précieuses pour les futures mises à jour et l'amélioration continue de l'application.

Le déploiement est l'étape finale, mais cruciale, dans le cycle de vie du développement d'application. Il nécessite une attention méticuleuse aux détails et une préparation soignée pour garantir que l'application est prête à être accueillie par le public général.

Aa © 2023

Instagram