CONCEPTION D’UNE APPLICATION MOBILE REPONDANT A UN PORTAIL D’ANNONCE D’EVENEMENTS

THEME : 

CONCEPTION D’UNE APPLICATION MOBILE
 REPONDANT A UN PORTAIL D’ANNONCE
D’EVENEMENTS

Ivoire-Event

Introduction

La formation de Licence à l'Université Virtuelle de Côte d'Ivoire est assortie d’un stages d'une durée de 2 à 3 mois visant à allier la théorie à la pratique. C’est ainsi que nous avons sollicité et été admis à faire notre stage au sein de l’entreprise informatique Not a Number.

L'intégration des nouvelles technologies au sein du domaine événementiel devient au fil du temps incontournable, surtout en ce qui concerne la communication événementielle. Ainsi, pour faire connaitre leurs événements, les promoteurs d’évènements multiplient leurs actions sur les réseaux sociaux et des plateformes consacrées à l’événementiel. Mais du fait du grand nombre de fonctionnalités que contiennent ces plateformes, la lucarne consacrée à l’annonce d’événement devient presqu’inexistante. Aussi, les promoteurs sont-ils obligés de multiplier leurs dépenses financières pour donner de la visibilité à leurs événements.

Face à cette réalité, quelle solution efficace et adaptée pour faciliter la communication événementielle devrions-nous mettre en place ?

Ayant vu l’efficacité des solutions applicatives mobile, dans la résolution de problème digital, Not a Number décide de mettre en place une application mobile : IVOIRE-EVENT, qui constituera une lucarne pour la promotion d’événement. Les promoteurs d’événement pourront y poster leurs événements et les utilisateurs pourront être alertés des nouveaux événements qui se situent dans leur centre d’intérêt.

Ce présent rapport est structuré en trois grandes parties. Nous exposerons dans la première partie le contexte et le cadre du projet pour faire, dans la deuxième partie, une analyse des besoins des utilisateurs et de la conception du système futur. Nous terminerons avec la troisième partie qui est consacrée à la réalisation de notre application ainsi qu’à certains aspects inhérents à cette réalisation.

CHAPITRE 1 :
PRÉSENTATION DU CONTEXTE DE STAGE

L’objet de cette partie est de situer le cadre d’étude du projet. Cela afin de permettre d’appréhender au mieux les facteurs qui nous conduiront à nos choix. Par conséquent, nous présenterons la structure d’accueil ainsi que le service d’affectation, puis nous ferons l’étude de l’existant et présenterons le cahier de charge du projet à réaliser.

I-                PRESENTATION DE L'ENTREPRISE D’ACCUEIL : NOT A NUMBER

1-   Historique

Not a number (NaN) est une entreprise qui a été fondé en 2017 par EVOX TRADING & KALIMATEC DMCC ; deux entreprises de télécommunication qui ont décidé d’unir leurs forces pour faire face aux changements dans l’industrie des télécommunications en cherchant et formant des talents. Sa forme juridique est de type SARL avec un capital de 1 000 000 francs CFA. L’établissement est composé d’une salle informatique avec plus de 50 IMac y compris la connexion internet, d’une cantine, d’une salle de conférence et des toilettes, son actuel directeur est M. KEFFA Yebe Diomandé.

Positionné dans le domaine de la formation comme une structure (école) Atypique du fait de sa pédagogie le peer-to-peer learning ; NaN, de son volet éducatif se présente comme une école gratuite, formant des jeunes passionnés de nouvelles technologie, à la maitrise des outils de conception dans le domaine de la programmation informatique.

Faire de la côte d’ivoire un pôle de création dans le numérique, étant son objectif principale, NaN accentue pour sa première année d’existence la formation de jeunes venant de tous horizons. Voulant mettre à la disposition d’entreprise de main d’œuvre qualifié, au travers de savoir faire certifier dans le domaine de la programmation.

2-   Evolution

Lancé en 2018 à Abidjan dans la commune de Cocody, NaN forme les développeurs informatiques de demain, Financé par ses deux entreprises de la télécommunications, l’établissement bouscule le paysage de l’enseignement supérieur traditionnel avec une méthode d’apprentissage unique en Côte d’Ivoire.
L’entrée à NaN se divise en deux étapes, une série de test en ligne et un autre test au sein de NaN.

Les tests à passer sur le portail candidature de l’école consistent à mettre à l’épreuve les capacités de logique et de mémoire des candidats. Ils permettent de mesurer l’appétence pour l’informatique, la motivation à apprendre et la capacité de travail.
L’école cultive sa différence jusque dans la sélection de ses étudiants, aucun diplôme n’est exigé, l’âge étant l’unique critère pour postuler (18 à 25 ans).
 Ainsi pour sa première promotion NaN compte 20 étudiants sur 100 et actuellement en cours de cursus la deuxième promotion compte 500 étudiants qui ont réussi à la piscine. Pour les années à venir elle compte accueillir encore plus d’étudiants.
C’est une entreprise en pleine croissance dans son secteur d’activité et veut se positionner comme un pionnier du domaine. Pour ce faire, NaN développe au travers de son équipe interne, des solutions innovantes dans divers secteurs d’activité.

3-   Nature des activités de Not a Number

Le monde de l’informatique s’est diversifié avec le temps tout en occupant une place toujours plus stratégique au sein des entreprises. Par conséquent la structure NaN intervient dans le monde du digital, elle se base sur le numérique ; Ainsi elle propose des services tels que la conception de site web, d’application mobile, formation en ligne et plein d’autres services qui rentre dans ce domaine.

L’entreprise a développé des valeurs qu’elle s’efforce de mettre tous les jours en œuvre. En effet, la passion, l’audace, la ténacité et la recherche continuelle de solution à différents problème ou d’innovation, sont ces valeurs qui forgent l’identité de l’entreprise.

4-   Organigramme de la structure

La structure organisationnelle de Not a Number est présentée comme suit :

5-   Service d’affectation

Dans le cadre de notre stage dans l'entreprise nan, nous avons été affecté dans l’agence de développement web de NaN. Ce service a pour rôle de travailler sur les solutions informatiques et développer des applications pour l'entreprise. 

Nous y avons été amener à concevoir des interface web, en nous basant sur des maquettes fonctionnelles, dans le cadre de la mise en place de différentes applications.

Dirigé par le chef de projet nous travaillons en étroite collaboration avec la maitrise d’ouvrage, pour satisfaire les besoins du client. NaN étant spécialisé dans la conception de plateformes sur mesure, nous sommes amenées à développer des plateformes sans aucun CMS ou Template pré-fait. 

Toutefois nous sommes aidés dans notre tâche par l’utilisation de framework tel que boostrap et des outils de travail propre au développements d’interface comme code-pen, pour produire des résultats à la hauteur de la renommée de l’entreprise.

I-                EUDE DE L’EXISTANT

1-   Contexte et problématique

La communication événementielle a toujours eu pour but de faire passer un message en créant un lien fort avec les participants et les spectateurs

Il existe de nos jours différentes stratégies basées principalement, mais pas exclusivement, sur la promotion en ligne et sur les réseaux sociaux afin de promouvoir de façon efficace un événement.   Mais du fait du grand nombre de ces médias et des nouveaux canaux de communication que constitue les réseaux sociaux, les promoteur d’évènement finissent par disperser leur ressource, ne trouvant pas toujours une plateforme pouvant leur permettre d’un seul coup d’atteindre un grand nombre d’intéressé.

L’application que nous mettrons en place permettra au promoteur d’évènement d’annoncé leur évènement, acquit déjà à leur cause. Dans le même temps les utilisateurs pourront être alerté des événements à venir qui se situent dans leur centre d’intérêt.

2-   Exemples des plateformes existants et critique de l’existant

En plus des réseaux sociaux, Il existe déjà des plateformes qui se sont penché sur ce problème. Des plateformes tel que event225.ci propose au utilisateur d’annoncer leur évènement, mais sont victimes du même problème que les réseaux sociaux. Les annonces d’évènement dans le cas des réseaux sociaux se trouve noyer dans une pléthore de fonctionnalité qu’offre ces mêmes réseaux sociaux. Finalement la lucarne devient presqu’invisible, et ne permet pas d’atteindre de manière efficace l’auditoire.

Notre application quand a elle sera axée sur l’annonce et la notification d’évènement, de manière très simple.

II-           CAHIER DE CHARGE

1-   Explication générale

L’application constituera une plateforme globale pour des expériences qui permet à tous de créer, partager, trouver et participer à de nouvelles activités.

Des festivals de musique, des marathons, des conférences, des rassemblements communautaires et de collectes de fonds aux concours de jeux en passant par les concours de guitare imaginaire, l’objectif étant de créer un pôle événementiel virtuel. La plupart des applications mobiles événementielles du marché proposent le même assortiment basique de fonctionnalités comme l’agenda, la carte, la biographie des intervenants. Une liste interminable de fonctionnalités ne garantit pas forcément la qualité d’une application. Nous voulons faire la différence au travers d’une application axée à fonctionnalités uniques, faciles à paramétrer et à utiliser ! Et pour cela il ne faut surtout pas négliger l’UX.

2-   Exigences techniques

La ou les plateforme(s) : iOS, Android 

L’équipement : mobile, tablette (format portrait, paysage ou les 2).  

Modèle économique : application gratuite 

3-   Fonctionnalité primaire

- L’utilisateur doit avoir la possibilité de créer un compte
- La possibilité de créer un événement seulement lorsqu’on a un compte
- L’utilisateur doit avoir accès aux à la fil d’actualité des annonces d’évènements
- L’utilisateur doit avoir accès aux détails des différents évènements

CHAPITRE 2 :
ETUDE CONCEPTUELLE

Après une analyse des besoins décrits dans le cahier des charges de notre projet, il est nécessaire de donner un fonctionnement du système à implémenter. Alors, l'utilisation d'une méthode d’analyse et de conception constitue un impératif pour conduire à bien un projet de développement informatique. Nous effectuons, ici, le choix d’une méthode avant d’aborder en profondeur l’étude des besoins des utilisateurs.

I-                METHODE D’ANALYSE

 L’objectif de ce chapitre est d'aboutir à la modélisation de notre plateforme. En effet modéliser un système avant sa réalisation permet de mieux comprendre le fonctionnement du système. C'est également un bon moyen pour maitriser sa complexité et d'en assurer la cohérence Nous allons modéliser notre plateforme en utilisant le langage de modélisation UML (Unified Modeling Language) qui est un langage de modélisation objet.

1-   Méthodes d'analyse

Bien que UML ne soit pas une méthode d'analyse, ses acteurs précisent néanmoins qu'une méthode basée sur l'utilisation de UML doit être :  Pilotée par les cas d’utilisation : La principale qualité d'un logiciel étant son utilité, c'est-à-dire son adéquation avec les besoins des utilisateurs.

Toutes les étapes, de la spécification des besoins à la maintenance, doivent être guidées par les cas d'utilisation qui modélisent justement les besoins des utilisateurs centrés sur l'architecture du logiciel.

2-   Modélisation UML

  UML, se définit comme un langage graphique et textuel qui permet de représenter, de communiquer les divers aspects d'un système d'information. UML 2.0 comporte treize (13) diagrammes représentant autant de vues distinctes pour représenter des concepts particuliers du système : les vues statiques et les vues dynamiques :

Dans le cadre de la modélisation de notre système nous utiliseront, les diagrammes des cas d'utilisation, de séquences et de classe pour modéliser notre système.

II-           CONCEPTION DU SYSTEME

1.    Les besoins de l’utilisateur

Cette partie représente le cœur de l’analyse. On y décrit le contexte, les acteurs ou utilisateurs du projet, les fonctionnalités du logiciel mais aussi les interactions entre ces acteurs et ces fonctionnalités. Le besoin des utilisateurs sera décrit à l’aide d’un diagramme : le diagramme de cas d’utilisation.

1.1.                      Le diagramme de cas d’utilisation

Ce diagramme représente les fonctionnalités nécessaires aux utilisateurs. Les diagrammes de cas d’utilisation sont composés d’acteurs et de cas d’utilisation. Un acteur est un utilisateur, humain ou non, du système qui est doté d’un nom qui correspond à son rôle. Un cas d’utilisation est une manière spécifique d’utiliser le système. Il permet de décrire ce que le futur système devra faire, sans spécifier comment il le fera.

1.1.1.   Identification des acteurs

Les acteurs qui interagissent avec notre système sont : 

·         L’utilisateur : Il désigne l’entité qui vient s’inscrire sur la plateforme, et bénéficier des services qu’offres l’application.

·         L’administrateur : Il désigne la personne qui est en charge du système informatique.

1.1.2. Diagrammes de cas d’utilisation

1.1.1.      Description textuelle des cas d’utilisation

Pour documenter les cas d’utilisation, la description textuelle est très utile, car elle permet de communiquer aisément avec les utilisateurs.

Cas 1 : S’authentifier

TITRE	S’authentifier
ACTEUR PRINCIPAL	Utilisateur
RESUME	L’utilisateur s’authentifie pour exécuter ses tâches
PRECONDITIONS	Avoir créer un compte
POSTCONDITIONS	Le système ouvre la fil d’actualité des annonces
SCENARIO NOMINAL
1)      L’utilisateur lance l’application		2)      Le système vérifie la Configuration
		3)      Le système ouvre l’interface d’authentification
4)      L’utilisateur saisit ses paramètres de connexion puis valide.		5)      Le système vérifie l’identifiant et le mot de passe saisis par l’utilisateur
		6)      Le système ouvre la fil d’actualité des annonces
SCENARIO ALTERNATIF
Point 5 : Identifiant et/ou mot de passe incorrect(s)		1-Le système affiche un message d’erreur 2-Le scénario nominal reprend au point 4

Cas 2 : Créer un compte    

TITRE	Créer un compte
ACTEUR PRINCIPAL	Utilisateur
RESUME	L’utilisateur créée un compte, pour accéder à la fil d’actualité
PRECONDITIONS	aucune
POSTCONDITIONS	Le système ouvre la fil d’actualité des annonces
SCENARIO NOMINAL
1)      L’utilisateur lance l’application		2)      Le système vérifie la Configuration
		3)      Le système ouvre l’interface de création de compte
4)      L’utilisateur remplit le formulaire d’inscription		5)      Le système valide les informations
		6)      Le système ouvre la fil d’actualité des annonces

Nous en avons fait de même pour les 4 autres cas d’utilisation que sont :  consulter les annonces, créer annonces, Consulter les statistiques, et Supprimer annonces.

1.    Vue Processus

La vue des processus démontre :

·         La décomposition du système en processus et actuations ;

·         Les interactions entre les processus ;

·         La synchronisation et la communication des activités parallèles.

Nous présenterons la vue des processus à l’aide du diagramme de séquence.

1.1.                                                    Diagramme de séquence

Le diagramme de séquence est une représentation de façon séquentielle du déroulement des traitements et des interactions entre les éléments du système et/ou de ses acteurs. Du point de vue de l’analyse, le système est perçu comme une boîte noire et on considère seulement les interactions visibles par les acteurs. Ainsi, Le diagramme de séquence permet de décrire les différents scenarios d’utilisation du système.

Nous en avons fait de même pour les 4 autres diagramme de séquence que sont :  diagramme de séquence consulter les annonces, diagramme de séquence créer annonces, diagramme de séquence Consulter les statistiques, et diagramme de séquence Supprimer annonces.

1.    Vue logique

La vue logique a pour but d’identifier l’élément du domaine, les relations et les interactions entre ces éléments. Nous utiliserons le diagramme de classe pour définir cette vue.

1.1.                     Diagramme de classe

Il s’agit d’une vue statique du système, autrement dit, les concepts du domaine qui serons manipules à l’intérieur.

Alors que le diagramme de cas d’utilisation montre du point de vue des acteurs, le diagramme de classes montre la structure interne du système. Il permet de fournir une représentation abstraite des objets du système qui vont interagir ensemble pour réaliser les cas d’utilisation.
Le diagramme de classe constitue l’un des pivots de la modélisation avec UML.

I-                TECHNOLOGIES UTILISÉES

Avant d’implémenter une application, il est impératif de sélectionner les outils de développement adéquats. De plus, en tant qu’entreprise de développement informatique, Not a Number, utilise en son sein un certain nombre d’outils d’implémentation. Les technologies que nous avons utilisées ne résultent donc pas de choix personnels. Le tableau ci-dessous les présente :

TECHNOLO-GIES	ROLES	VER-SIONS	PROPRIETAI-RES	SITES WEB
Sketch	Outils de dessin de maquettes	52.6	Bohemian Coding	https://www.sketch.com
Flutter	Framework de développement d'applications mobiles	1.9.1	Google	https://flutter.dev
IntelliJ IDEA	Environnement de développement	2019.2.1	JetBrains	https://www.jetbrains.com
XCode	Environnement de développement	9.2	Apple	https://developer.apple.com/xcode/
Android Studio	Environnement de développement	3.5	Google	https://developer.android.com

CHAPITRE 3 :
REALISATION

Cette partie abordera en premier lieu l’implémentation de notre système puis un second volet présentera les différentes interfaces et le fonctionnement de l’application.

1-   Mission principale

Pendant notre stage à Not a Number, notre mission principale était de développer les interfaces de l’application mobile : Ivoire-Event. Ainsi notre travail était exclusivement axé sur le front-end, donc sur l’UI et UX de applications.

Nous avons dû, conformément aux instructions reçu, proposer les différentes interfaces de l’application, au travers de l’outils de conception de maquette sketch, nous basant sur les différents digrammes précédemment cités.

Une fois la maquette valider, nous nous sommes atteler à développer ces interfaces avec le Framework Flutter.

2-   Mission secondaire

Etant immergé dans le fonctionnement de l’entreprise, nous avons eu à intervenir sur des projets web, tel que : NaN certifPro, Le Camp Numérique, et NaN Business. Nos apports à ces différents projets étaient essentiellement axés sur le front-end.

3-    Environnement de travail

Pour la réalisation de notre projet, Not a Number a mis à notre disposition une machine pouvant nous permettre d’utiliser au mieux les technologies précitées. Le tableau ci-dessous résume les principales caractéristiques de la machine utilisée.

NOM	NOMBRE DE POUCES	SYSTEME HOTE	MEMOIRE RAM	CAPACITE DU DISQUE DUR	PROCESSEUR
iMac	15	macOS High Sierra	8 Go	1 Téra	Core i5

4.     Réalisation de la maquette avec sketch

Ivoire-Event est une application qui met l’accent sur deux fonctionnalités principales que sont : la notification d’annonce d’évènement, et la publication d’annonce d’évènement.

Le défi pour nous était d’allier simplicité d’utilisation, et beau design, pour rendre agréable l’expérience utilisateur.

4.1.Vue Générale avec relation

Cette vue présente les différentes interfaces de l’application en mettant en évidence les différents liens qu’il y a entre ces dernières.

5.    Réalisation des différentes interfaces avec flutter

Nous avons tout d’abord configurer l’environnement de travail sur la machine mise à notre disposition en suivant les instruction de la documentation de Flutter (https://flutter.dev).

Pour le développement de l’application, les outils principalement utilisés étaient : IntelliJ IDEA, et le simulateur de Xcode.

4.1.Le fichier de configuration pubspec.yaml

Ce fichier comporte les différentes dépendances de l’application, ainsi que la déclaration des éléments externe à l’application tel que les image et les polices …

6.    Les interfaces de l’application

Dans ce qui suit, voici présenter les interfaces de notre application Mobile.

4.1. Le slide de présentation

Cette interface constitue la porte d’entrée de l’application pour l’utilisateur lors de sa première ouverture. Elle présente l’application et ces fonctionnalités.

4.1. Les pages de connexion et d’inscription

Au travers de ces deux interfaces l’utilisateur aura la possibilité de s’inscrire ou de se connecter pour avoir accès au service de l’application.

Elles sont obligatoires lors de la première connexion.

4.1. Choix de la localité

L’utilisateur a la possibilité de préciser sa localisation, suite à son inscription

4.1.Choix du centre d’intérêt

L’utilisateur a la possibilité de choisir son centre d’intérêt au travers de cette interface.

4.1. la fil d’actualité et interface de détails

Cette page constitue le point central de l’application. Tous les annonce d’événements y sont notifiées, par centre d’intérêt. L’utilisateur a aussi la possibilité de voir les détails des événements.

4.1.Interface de création d’annonce

L’utilisateur à la possibilité de créer une nouvelle annonce au travers du formulaire qui lui est soumis par le bière de cette interface.

7.    Les difficultés rencontrées

Le fait d’avoir à apprendre à utiliser un nouveau système (Mac Os) et à travailler avec un nouveau Framework, a été pour nous un challenge.

De plus nous avons dû changer de système entre Mac Os et WINDOWS 10, pour pouvoir hors des locaux de NaN, travailler sur le projet.

Mais avec les conseils de notre maître de stage nous avons pu accomplir les tâches qui nous étaient incombées.

CONCLUSION

Dans le cadre de notre projet de fin d’étude, un stage nous a été accordé au sein de Not a Number, où nous avons travaillé sur le projet intitulé « conception d’une application mobile répondant à un portail d’annonce d’événement ». Il consistait à mettre en place les interface de la solution logicielle mobile, Ivoire-Event, dans l’objectif de faciliter l’expérience des utilisateurs. Pour ce faire, nous avons d’abord procédé à la présentation de la solution à mettre en place, ce qui nous a permis de mieux comprendre les besoins des utilisateurs. Ensuite, nous avons fourni grâce au langage UML, les diagrammes qui ont mis en exergue les données. Et après une description des outils techniques choisis, nous avons détaillé la réalisation de notre application.

Par ailleurs, nous comptons ajouter des fonctionnalités tel que l’achat de ticket au travers de l’application. Cela implique donc l’ajout d’un système de payement.