SlideShare une entreprise Scribd logo
1.1.1.1.1.1.1.1
Projet de Stage :
Application mobile Flutter : Tunisia
Wallpaper
Elaboré par
Miladi Ons
Encadré par :Taieb Meftah
Département : Génie Informatique Industrielle
Année Universitaire : 2019-2020
Résumé :
Ce rapport présente les photos de Tunisie par catégories et mettre en fond d’écran
l’image.
Mon projet s’articule autour des trois chapitres suivants :
- Le premier chapitre présente le cahier de charge, le démarche à suivre de
mon projet et la présentation de la société.
- Le deuxième chapitre présente l’environnement logicielle de mon projet ainsi
que son réalisation.
Table de matières :
Introduction générale :............................................................................................................................ 7
1 Introduction :................................................................................................................................... 8
2 Présentation de la sociéte............................................................................................................... 8
2.1 Définitin de l’entreprise :......................................................................................................... 8
2.2 L’équipe de projet : ................................................................................................................. 8
2.3 Communication au sein de l’équipe de projet : ...................................................................... 9
3 Cahier de charge :............................................................................................................................ 9
3.1 Contexte et la présentation de projet :................................................................................... 9
3.2 Objectif de projet : .................................................................................................................. 9
3.3 Description fonctionnelle des contraintes et des besoins liés au projet ................................ 9
3.4 Le délai de mon projet :........................................................................................................... 9
4 Démarche a suivre :...................................................................................................................... 10
5 Conclusion : ................................................................................................................................... 10
Chapitre 2 :............................................................................................................................................ 11
Environnement logicielle et réalisation................................................................................................. 11
1 Introduction :................................................................................................................................. 11
2 L’environnement logicielle :.......................................................................................................... 11
2.1 Choix de language de programmation :................................................................................ 11
2.2 choix de framework :............................................................................................................. 12
2.3 Choix de plateforme pour conception la base de données : ................................................ 13
2.4 Choix de L’IDE :...................................................................................................................... 14
2.5 Choix de l’émulateur : ........................................................................................................... 14
2.6 UI et UX Design:..................................................................................................................... 14
2.6.1 Qu’est-ce que l’UX Design ? .......................................................................................... 14
2.6.2 Qu’est-ce que l’UI ? ....................................................................................................... 14
2.6.3 Le logiciel utilisé pour UI/UX : ....................................................................................... 15
3 La réalisation : ............................................................................................................................... 15
3.1 Ui ........................................................................................................................................... 15
3.1.1 Sprint 1 : ........................................................................................................................ 16
3.1.2 Sprint 2 : ........................................................................................................................ 16
3.1.3 Sprint 3 : ........................................................................................................................ 16
3.2 UX Design :............................................................................................................................. 17
3.3 Conception de la base de données : ..................................................................................... 18
3.3.1 Storage :......................................................................................................................... 18
4 Conclusion: .................................................................................................................................... 18
Conclusion générale.............................................................................................................................. 19
Bibliographie: ................................................................................................................................ 19
Table de figures
Figure 1 Les compétences de Web Graphique ..........................................................................8
Figure 2 Logo de Dart ...............................................................................................................11
Figure 3 Popularité de language Dart ...................................................................................... 12
Figure 4 Logo de flutter............................................................................................................13
Figure 5 Logo de Firebase.........................................................................................................13
Figure 6 Logo de Visual Studio Code........................................................................................ 14
Figure 7 Exemple de wireframe ............................................................................................... 15
Figure 8 Sprint 1 ....................................................................................................................... 16
Figure 9 Sprint 2 ....................................................................................................................... 16
Figure 10 sprint 3...................................................................................................................... 17
Figure 11 UX Design ................................................................................................................. 17
Figure 12 Storage in Firebase...................................................................................................18
Figure 13 Cloud Firestore in Firebase....................................................................................... 18
Remerciements :
Je tiens avant tout à remercier mon fiancé et ma famille qui m’ont encouragés.
Je tiens a remercié mon encadreur Mr Taieb Meftah qui m’a encouragé pendant la durée du
projet, ainsi pour toute l’aide et le soutien qu’il m’apporté.
Non seulement ca, Je tiens à remercier aussi toute l’équipe pédagogique de l’école nationale
d’électronique et des télécommunications pour ses grands efforts.
Introduction générale :
Dès les premiers instants du mobile, il n'y avait vraiment qu'une seule façon d'offrir
aux utilisateurs la performance et les fonctionnalités qu'ils attendaient : vous
deviez utiliser un SDK, c'est à dire un ensemble d'outils logiciels spécifiques à la
plateforme que vous souhaitiez cibler. Bien sûr, cela impliquait un certain nombre
de contraintes :
 Construire une version différente pour chaque plate-forme mobile
 Gérer plusieurs codes sources
 Embaucher et retenir des développeurs natifs hautement spécialisés et coûteux
Selon un rapport de l'entreprise américaine comScore (analyse publicitaire), le
nombre d'utilisateurs mobiles a dépassé les utilisateurs d’ordinateurs de bureau en
2014.
Aujourd’hui la donne n’est absolument plus la même et tant mieux d’ailleurs. Tout
le monde peu plus ou moins développer, sans trop de mal, une application mobile
simple en seulement 24h et la publier sur le Google Play Store dans les heures qui
suivent. Alors comment ces gens peuvent développer ces applications ? et quelles
sont l’environnement logiciel et matériel pour réaliser ce travail ?
Chapitre1 :Présentation de societe et
de projet :
1 Introduction :
Ce chapitre présente la société , le cahier de charge ainsi que le démarche à suivre .
2 Présentation de la sociéte
2.1 Définitin de l’entreprise :
Web graphique est une société de conseil et d’ingénierie spécialisée dans les
nouvelles technologies de l’information opérant en Av. 14 Janvier, Sfax El Jadida,
Imm Baya Centre, App. N°54 Sfax-tunisie et à l'International.
Elle développe ses activités autour de différentes prestations de services
informatiques dédiées aux entreprises comme la création et développement des
sites et portails web, Conception des flyers, chart graphique, assistance ...
Figure 1 Les compétences de Web Graphique
2.2 L’équipe de projet :
-Taieb Meftah : gérant et web désigner
-Sameh Bibi :Infographiste
-Med Amine Guidara : développeur
-Amir Elloumi :développeur
-Les stagaires :Moi-même Ons Miladi, Rihab ben hassouna ,Nihel Antri ,Sofien Cherif…
Mon tuteur en entreprise pendant ce stage est M. Taieb Meftah. Les étapes de
développement de l’application seront validées par le gérant. Il me permettre d’avoir accès à
l’infrastructure informatique de l’entreprise et me conseiller sur les technologies à utiliser.
2.3 Communication au sein de l’équipe de projet :
Les membres de l’équipe projet se trouvant au même étage de l’établissement, la
communication verbale est le moyen de communication privilégié. L’équipe étant très
disponible, il est aisé d’obtenir des réponses rapides à des questions ponctuelles ainsi que
d’obtenir des entretiens voire même des réunions.
3 Cahier de charge :
3.1 Contexte et la présentation de projet :
L’application que j’ai développé permet de :
- Afficher les photos de Tunisie par catégories
- Mettre en fond d’écran l’image
3.2 Objectif de projet :
Puisque le nombre de téléchargement des applications de fond d’écran a augmenté, donc
l’idée est de combiner entre les applications de fond d’écran et les images de Tunisie pour
améliorer le tourisme.
3.3 Description fonctionnelle des contraintes et des besoins liés au projet
La première étape de la conception consiste à analyser la situation pour tenir compte
des contraintes, des risques et de tout autre élément pertinent et assurer un ouvrage
ou un processus répondant aux besoins . Une fois mis en perspective avec le
contexte, les besoins réels de ce projet vont être connues par un recherche sur
internet .
Donc les besoins pour mon travail sont :
*Environnement logiciel :
flutter /Android/Firebase/XD/UI
* Environnement matériel :
-Processeur : Intel® Core™ i5 8250U CPU @ 1.60 GHz
-Mémoire installé RAM : 8 GO
-type de système : système d’exploitation 64 bits ,processeur x64
-Windows 10 professionnel
-Emulateur Nokia 4.2
3.4 Le délai de mon projet :
Le délai de mon projet est un mois :
la première semaine :installation ,recherche sur internet ,Conception la base de donnée
avec Firebase
La deuxième semaine : Architecture avec Ui , Design avec XD
La troisième semaine : Affichage des images par catégories.
La quatrième semaine : Ouvrir une image et la mettre en fond d’écran
4 Démarche a suivre :
- Installation flutter et android
- modifier l’environement de systéme(fichier C:srcflutterbin et
C:UsersUtilisateurAppDataLocalAndroidSdkemulator)
- flutter doctor
- quelques sdk ne sont pas acceptés donc faire la commande
flutter doctor --android-licenses
- flutter doctor installation réussite
- création de projet flutter
- run le programme classique
- dans le gradleajouter le chemin de jdk
- Construction la base de données par catégories avec Firebase (cloud Firestore)
- Telecharger google services et la copier danns android/app
- Copier le lien de package dans gradle/build.gradle
- Modifier le min SDK a 21
- Installer les packages cloud firestore ,wallpaper manger, wallpaper cache manger
- Faire le UI/UX
- Coder et stimuler l’application .
5 Conclusion :
Pour bien réaliser le projet en un temps minimum il faut faire le cahier de charge et les
étapes à suivre. On conclut que ce chapitre est le plus important dans ce rapport. Quelle est
alors l’environnement logicielle et quelles sont les étapes de la réalisation ?
Chapitre 2 :
Environnement logicielle et
réalisation
1 Introduction :
Den nos jours, chaque technologie évolue pour atteindre le but de perfection comme le
développement mobile . En effet , la réussite de ce projet dépend de choix de language ,
framework ,bon design et architecture .
Je dégagerai dans la première partie de ce chapitre l’environnement logicielle, ensuite dans
le deuxième partie la réalisation de mon travail.
2 L’environnement logicielle :
2.1 Choix de language de programmation :
La language de programmation utilisé va beaucoup influer sur le projet et la manière dont
celui-ci sera développé, en fonction des avantages et des inconvénients du langage. Il est
important de bien étudier la language, pour éviter de devoir changer de langage en cours de
projet, ce qui constituerai une perte de temps considérable
Le choix du langage s’est finalement porté sur Dart.
Figure 2 Logo de Dart
Dart un langage de programmation web développé par Google. Son but initial est de
remplacer JavaScript pour devenir la nouvelle lingua franca du développement web4,
néanmoins la priorité actuelle des développeurs est que le code Dart puisse être
converti en code JavaScript compatible avec tous les navigateurs modernes, ainsi
que sur le développement d'application multiplateforme.
Dart peut aussi être utilisé pour la programmation côté serveur5, ainsi que le
développement d'applications mobiles (via l'API Flutter).
En effet j’ai choisi cette language pour plusieurs avantages :
 productif, rapide et portable : d’après Google, Dart augmente la
vitesse du développeur, car il a une syntaxe claire et succincte et
peut s'exécuter sur une VM avec un compilateur JIT. Ce dernier
permet le déploiement à chaud et le rechargement dynamique lors
du développement mobile. Cela veut dire que vous pouvez apporter
diverses modifications aux applications et à leurs modules sans
devoir arrêter et redémarrer le serveur .
 accessible : Dart est conçu pour être familier et donc accessible à de
nombreux développeurs existants, grâce à ses aspects orientés
objet et sa syntaxe .
 réactif : Dart fonctionne également bien pour la programmation
réactive avec ses bibliothèques de base, y compris les flux et les
futures (qui font référence à des techniques de synchronisation pour
certains langages concurrents). Il a également un grand support
pour la gestion des objets temporaires grâce à un ramasse-miettes
générationnel rapide.
Figure 3 Popularité de language Dart
2.2 choix de framework :
Pour que l’application soit robuste, facile à faire évoluer et réalisable en un temps minimum,
un Framework représente un outil idéal.
Il existe une grande quantité de Framework. Chacun présentant des avantages et des
inconvénients.
C’est pour cela j’ai choisi flutter pour ces grands avantages par rapport à autres Framework :
-Avec flutter on peut utiliser android studio code ou visual studio code ou n’import quelle
ide
Moins de code pour la meme résultat en natif
-design de qualité ,reposant sur des widgets, une bibliothéque d’animations , une
architecture en couches extensible
-Compilation extremenet rapide :l’application se recharge automatiquement quand le code
est modifié de maniére presque instantané
Figure 4 Logo de flutter
Flutter est le framework de Google permettant un développement multiplateforme. Il
permet donc de ne développer une application qu’une seule fois pour les différentes
plateformes : iOS et Android.
Flutter s’appuie sur le langage de programmation DART (à l’origine appelé Dash),
créé également par Google et présenté au public en 2011.
2.3 Choix de plateforme pour conception la base de données :
Pour la conception de BD j’ai choisi Firebase car elle a des API intuitives regroupées
dans un SDK unique .Ces API gagne le temps et réduit le nombre d’intégrations
gérés par mon application.
En effet ,Firebase est une plate-forme de développement d’applications mobiles et
web qui fournit aux développeurs une pléthore d’outils et de services pour les aider à
développer des applications de haute qualité, a élargie leur base d’utilisateurs et à
générer davantage de profits.
Figure 5 Logo de Firebase
2.4 Choix de L’IDE :
Un IDE complet est un éditeur unique dans lequel vous pouvez écrire, compiler, lancer,
déboguer et publier l’application.
Visual Studio Code est un éditeur de code extensible développé
par Microsoft pour Windows, Linux et macOS. Les fonctionnalités incluent la prise en charge
du débogage, la mise en évidence de la syntaxe, la complétion intelligente du code, les snippets,
la refactorisation du code et Git intégré.
Figure 6 Logo de Visual Studio Code
2.5 Choix de l’émulateur :
J’ai choisi mon téléphone comme un émulateur car il est plus rapide que l’émulateur de
Visual Android studio.
Mon émulateur est Nokia 4.2 qui a les caractéristiques suivantes :
-Android 9Pie
-5.71 HD +19.9 display
-3000 mAh battery
-Qualcomm Snapdargon mobile Platform
2.6 UI et UX Design:
2.6.1 Qu’est-ce que l’UX Design ?
L’UX Design se définit donc comme l’ensemble des moyens mis en œuvre pour
concevoir une interface qui répond pleinement aux besoins en utilisabilité de chaque
utilisateur. L’objectif étant de fournir la meilleure expérience utilisateur possible.
2.6.2 Qu’est-ce que l’UI ?
Avec l’UI, l’interface utilisateur, on rentre dans le registre de la technologie de
l’information et plus spécifiquement dans la conception d’interface homme-machine
(IHM). Son but étant d’améliorer l’interaction d’un utilisateur avec l’interface. L’UI
designer est donc la personne en charge de réaliser une interface agréable et utile
pour les utilisateurs. Selon les règles et méthodes dédiées à l’ergonomie des
interfaces, il conçoit et positionne les différents éléments graphiques et textuels.
La technologie utilisé pour le UI est wireframe. c’est quoi alors Wireframe ?
Le wireframe (ou maquette fonctionnelle) est une représentation graphique
simplifiée de votre interface utilisateur qui permet de définir les zones,
l’organisation générale de l’information et tous les éléments qui devront être
présents dans chaque page de façon simple et percutante.
Figure 7 Exemple de wireframe
2.6.3 Le logiciel utilisé pour UI/UX :
Adobe XD est une solution d'UX/UI design complète pour la conception de sites web,
d'applications mobiles, etc
Alliant rapidité, précision et qualité, XD permet aux designers de modifier et partager
facilement des prototypes interactifs avec collaborateurs et réviseurs sur l'ensemble
des appareils et plates-formes, dont Windows, Mac, iOS et Android.
3 La réalisation :
L’application sert a offrir au utilisateur des images de la tunisie . Ce dernier peut mettre l’image en
fond d’écran.
3.1 Ui
Pour bien réaliser l’application en un temps minimale il faut bien faire l’ui.
En effet j’ai fait 3 interfaces :
3.1.1 Sprint 1 :
Figure 8 Sprint 1
Cette interface présente les catégories de Tunisie .L’utilisateur doit choisir l’un des catégories pour
aller aux images
3.1.2 Sprint 2 :
Figure 9 Sprint 2
Cette interface presente les images de la catégorie choisi.il fuaut cliquer sur l’un des images pour
aller au interface suivante ou bien cliquer sur le bouton de retour.
3.1.3 Sprint 3 :
Figure 10 sprint 3
Cette interface présente l’image choisi .il faut cliquer sur « set wallpaper » pour la mise en fond
d’écran ou bien cliquer sur le bouton de retour.
3.2 UX Design :
Figure 11 UX Design
3.3 Conception de la base de données :
En premier temps j’ai téléchargé les images et j’ai importé ces images dans le bloc de Storage.
3.3.1 Storage :
Figure 12 Storage in Firebase
En deuxième temps j’ai copié le lien de ces images et j’ai les mis dans Cloud firestore .
Figure 13 Cloud Firestore in Firebase
4 Conclusion:
Dans ce chapitre j’ai réalisé une étude au niveau de l’environnement logicielle.
Après cela j’ai fait la construction de la base de données ainsi que UI/UX.
Conclusion générale
Bibliographie:
https://ionic.mobiletuto.com/v3/introduction.html
https://www.blogduwebdesign.com/logiciels-wireframe-prototype/
https://lesveilleursdenuit.fr/introduction-a-firebase/
https://blog-ux.com/quelle-difference-entre-ux-design-et-ui-design/
https://fr.wikipedia.org/wiki/Dart_(langage)#:~:text=Dart%20est%20des
tin%C3%A9%20%C3%A0%20r%C3%A9soudre,%C2%BB%2C%20et%20
une%20meilleure%20s%C3%A9curit%C3%A9.
https://programmation.developpez.com/actu/284127/Python-devance-
Java-et-devient-le-deuxieme-langage-de-programmation-le-plus-utilise-
par-les-contributeurs-sur-GitHub-apres-JavaScript/
https://www.mobizel.com/flutter-avantages-inconvenients/

Contenu connexe

Tendances

Rapport de pfe (am)
Rapport de pfe (am)Rapport de pfe (am)
Rapport de pfe (am)
Anasse ELRHOUL
 
Rapport pfe Conceptionet Developpement d'une Application web et Mobile
Rapport pfe Conceptionet Developpement d'une Application web et  Mobile Rapport pfe Conceptionet Developpement d'une Application web et  Mobile
Rapport pfe Conceptionet Developpement d'une Application web et Mobile
Raoua Bennasr
 
Rapport de projet de fin d"études
Rapport de projet de fin d"étudesRapport de projet de fin d"études
Rapport de projet de fin d"études
Mohamed Boubaya
 
Rapport de projet de fin d'étude licence informatique et multimédia
Rapport de projet de fin d'étude licence informatique et multimédiaRapport de projet de fin d'étude licence informatique et multimédia
Rapport de projet de fin d'étude licence informatique et multimédia
Nazih Heni
 
Rapport PFE
Rapport PFERapport PFE
Rapport PFE
IbtissemSlimeni
 
Rapport PFE "Conception et développement d'un Portail web pour le Smart Met...
Rapport  PFE  "Conception et développement d'un Portail web pour le Smart Met...Rapport  PFE  "Conception et développement d'un Portail web pour le Smart Met...
Rapport PFE "Conception et développement d'un Portail web pour le Smart Met...
Hajer Dahech
 
Rapport PFE Ahmed BEN JEMIA
Rapport PFE Ahmed BEN JEMIARapport PFE Ahmed BEN JEMIA
Rapport PFE Ahmed BEN JEMIA
Ahmed BEN JEMIA
 
Rapport_pfe_licence_ISAMM
Rapport_pfe_licence_ISAMMRapport_pfe_licence_ISAMM
Rapport_pfe_licence_ISAMM
Eya TAYARI
 
Rapport PFE Ilef Ben Slima
Rapport PFE Ilef Ben SlimaRapport PFE Ilef Ben Slima
Rapport PFE Ilef Ben Slima
Ilef Ben Slima
 
rapport PFE ingénieur génie logiciel INSAT
rapport PFE ingénieur génie logiciel INSATrapport PFE ingénieur génie logiciel INSAT
rapport PFE ingénieur génie logiciel INSAT
Siwar GUEMRI
 
Conception et développement d'une application de gestion de production et de ...
Conception et développement d'une application de gestion de production et de ...Conception et développement d'une application de gestion de production et de ...
Conception et développement d'une application de gestion de production et de ...
Mohamed Aziz Chetoui
 
Rapport Pfe Application Web e-commerce Symfony2
Rapport Pfe Application Web e-commerce Symfony2Rapport Pfe Application Web e-commerce Symfony2
Rapport Pfe Application Web e-commerce Symfony2
Ben Abdelwahed Slim
 
Rapport pfe-ayoub mkharbach
Rapport pfe-ayoub mkharbachRapport pfe-ayoub mkharbach
Rapport pfe-ayoub mkharbach
Ayoub Mkharbach
 
Rapport Projet De Fin D'étude Développent d'une application web avec Symfony2
Rapport Projet De Fin D'étude Développent d'une application web avec Symfony2Rapport Projet De Fin D'étude Développent d'une application web avec Symfony2
Rapport Projet De Fin D'étude Développent d'une application web avec Symfony2
Sofien Benrhouma
 
Rapport Projet de fin d'etude sur le parc informatique
Rapport Projet  de fin d'etude sur le parc informatiqueRapport Projet  de fin d'etude sur le parc informatique
Rapport Projet de fin d'etude sur le parc informatique
Hicham Ben
 
Rapport final pfe_systeme_de_gestion _de_cabinet_de_formation_mobile_web
Rapport final pfe_systeme_de_gestion _de_cabinet_de_formation_mobile_webRapport final pfe_systeme_de_gestion _de_cabinet_de_formation_mobile_web
Rapport final pfe_systeme_de_gestion _de_cabinet_de_formation_mobile_web
Salma Gouia
 
Pfe conception et réalisation d'une application de gestion des processus d'ac...
Pfe conception et réalisation d'une application de gestion des processus d'ac...Pfe conception et réalisation d'une application de gestion des processus d'ac...
Pfe conception et réalisation d'une application de gestion des processus d'ac...
Ahmed Makni
 
Rapport (Mémoire de Master) de stage PFE pour l’obtention du Diplôme Nationa...
Rapport (Mémoire de Master) de stage PFE pour  l’obtention du Diplôme Nationa...Rapport (Mémoire de Master) de stage PFE pour  l’obtention du Diplôme Nationa...
Rapport (Mémoire de Master) de stage PFE pour l’obtention du Diplôme Nationa...
Mohamed Amine Mahmoudi
 
Rapport de projet de conception et de développement
Rapport de projet de conception et de développementRapport de projet de conception et de développement
Rapport de projet de conception et de développement
Donia Hammami
 
Conception et Réalisation Application Web Laravel PFE BTS
Conception et Réalisation Application Web Laravel PFE BTSConception et Réalisation Application Web Laravel PFE BTS
Conception et Réalisation Application Web Laravel PFE BTS
FaissoilMkavavo
 

Tendances (20)

Rapport de pfe (am)
Rapport de pfe (am)Rapport de pfe (am)
Rapport de pfe (am)
 
Rapport pfe Conceptionet Developpement d'une Application web et Mobile
Rapport pfe Conceptionet Developpement d'une Application web et  Mobile Rapport pfe Conceptionet Developpement d'une Application web et  Mobile
Rapport pfe Conceptionet Developpement d'une Application web et Mobile
 
Rapport de projet de fin d"études
Rapport de projet de fin d"étudesRapport de projet de fin d"études
Rapport de projet de fin d"études
 
Rapport de projet de fin d'étude licence informatique et multimédia
Rapport de projet de fin d'étude licence informatique et multimédiaRapport de projet de fin d'étude licence informatique et multimédia
Rapport de projet de fin d'étude licence informatique et multimédia
 
Rapport PFE
Rapport PFERapport PFE
Rapport PFE
 
Rapport PFE "Conception et développement d'un Portail web pour le Smart Met...
Rapport  PFE  "Conception et développement d'un Portail web pour le Smart Met...Rapport  PFE  "Conception et développement d'un Portail web pour le Smart Met...
Rapport PFE "Conception et développement d'un Portail web pour le Smart Met...
 
Rapport PFE Ahmed BEN JEMIA
Rapport PFE Ahmed BEN JEMIARapport PFE Ahmed BEN JEMIA
Rapport PFE Ahmed BEN JEMIA
 
Rapport_pfe_licence_ISAMM
Rapport_pfe_licence_ISAMMRapport_pfe_licence_ISAMM
Rapport_pfe_licence_ISAMM
 
Rapport PFE Ilef Ben Slima
Rapport PFE Ilef Ben SlimaRapport PFE Ilef Ben Slima
Rapport PFE Ilef Ben Slima
 
rapport PFE ingénieur génie logiciel INSAT
rapport PFE ingénieur génie logiciel INSATrapport PFE ingénieur génie logiciel INSAT
rapport PFE ingénieur génie logiciel INSAT
 
Conception et développement d'une application de gestion de production et de ...
Conception et développement d'une application de gestion de production et de ...Conception et développement d'une application de gestion de production et de ...
Conception et développement d'une application de gestion de production et de ...
 
Rapport Pfe Application Web e-commerce Symfony2
Rapport Pfe Application Web e-commerce Symfony2Rapport Pfe Application Web e-commerce Symfony2
Rapport Pfe Application Web e-commerce Symfony2
 
Rapport pfe-ayoub mkharbach
Rapport pfe-ayoub mkharbachRapport pfe-ayoub mkharbach
Rapport pfe-ayoub mkharbach
 
Rapport Projet De Fin D'étude Développent d'une application web avec Symfony2
Rapport Projet De Fin D'étude Développent d'une application web avec Symfony2Rapport Projet De Fin D'étude Développent d'une application web avec Symfony2
Rapport Projet De Fin D'étude Développent d'une application web avec Symfony2
 
Rapport Projet de fin d'etude sur le parc informatique
Rapport Projet  de fin d'etude sur le parc informatiqueRapport Projet  de fin d'etude sur le parc informatique
Rapport Projet de fin d'etude sur le parc informatique
 
Rapport final pfe_systeme_de_gestion _de_cabinet_de_formation_mobile_web
Rapport final pfe_systeme_de_gestion _de_cabinet_de_formation_mobile_webRapport final pfe_systeme_de_gestion _de_cabinet_de_formation_mobile_web
Rapport final pfe_systeme_de_gestion _de_cabinet_de_formation_mobile_web
 
Pfe conception et réalisation d'une application de gestion des processus d'ac...
Pfe conception et réalisation d'une application de gestion des processus d'ac...Pfe conception et réalisation d'une application de gestion des processus d'ac...
Pfe conception et réalisation d'une application de gestion des processus d'ac...
 
Rapport (Mémoire de Master) de stage PFE pour l’obtention du Diplôme Nationa...
Rapport (Mémoire de Master) de stage PFE pour  l’obtention du Diplôme Nationa...Rapport (Mémoire de Master) de stage PFE pour  l’obtention du Diplôme Nationa...
Rapport (Mémoire de Master) de stage PFE pour l’obtention du Diplôme Nationa...
 
Rapport de projet de conception et de développement
Rapport de projet de conception et de développementRapport de projet de conception et de développement
Rapport de projet de conception et de développement
 
Conception et Réalisation Application Web Laravel PFE BTS
Conception et Réalisation Application Web Laravel PFE BTSConception et Réalisation Application Web Laravel PFE BTS
Conception et Réalisation Application Web Laravel PFE BTS
 

Similaire à 1601896849 rapport fluttercopie

ANDROID_Developper_des_applications_mobi.pdf
ANDROID_Developper_des_applications_mobi.pdfANDROID_Developper_des_applications_mobi.pdf
ANDROID_Developper_des_applications_mobi.pdf
samsungofficielcom
 
Rapport-de-perfectionnement-Jasser-Degani.pdf
Rapport-de-perfectionnement-Jasser-Degani.pdfRapport-de-perfectionnement-Jasser-Degani.pdf
Rapport-de-perfectionnement-Jasser-Degani.pdf
AlaChihaoui1
 
Rapport de stage boite à idées innovantes avec dashboard
Rapport de stage boite à idées innovantes avec dashboardRapport de stage boite à idées innovantes avec dashboard
Rapport de stage boite à idées innovantes avec dashboard
Siwar GUEMRI
 
Implémentation d’une solution de supervision de température et d’humidité pou...
Implémentation d’une solution de supervision de température et d’humidité pou...Implémentation d’une solution de supervision de température et d’humidité pou...
Implémentation d’une solution de supervision de température et d’humidité pou...
Mohammed Lymame
 
Tendances cloud
Tendances cloudTendances cloud
Tendances cloud
Raphaël Moraly
 
Tendances cloud-livre-blanc-collaboratif
Tendances cloud-livre-blanc-collaboratifTendances cloud-livre-blanc-collaboratif
Tendances cloud-livre-blanc-collaboratif
harrybosch
 
En association avec le CEFRIO et HEC Montréal, le CIGREF délivre les résultat...
En association avec le CEFRIO et HEC Montréal, le CIGREF délivre les résultat...En association avec le CEFRIO et HEC Montréal, le CIGREF délivre les résultat...
En association avec le CEFRIO et HEC Montréal, le CIGREF délivre les résultat...
nuntiis
 
Memoire web 3.0 Marion Pelouzet
Memoire web 3.0 Marion PelouzetMemoire web 3.0 Marion Pelouzet
Memoire web 3.0 Marion Pelouzet
Pelouzet
 
Mémoire_SciencesPo_Alexis-Legrand_L’INTERNET-DES-OBJETS,-UN-PAS-VERS-LA-TRAN...
Mémoire_SciencesPo_Alexis-Legrand_L’INTERNET-DES-OBJETS,-UN-PAS-VERS-LA-TRAN...Mémoire_SciencesPo_Alexis-Legrand_L’INTERNET-DES-OBJETS,-UN-PAS-VERS-LA-TRAN...
Mémoire_SciencesPo_Alexis-Legrand_L’INTERNET-DES-OBJETS,-UN-PAS-VERS-LA-TRAN...
Alexis Legrand
 
Réponse pédagogique à l'appel d'offre (fictif) lancé par Ryanair
Réponse pédagogique à l'appel d'offre (fictif) lancé par RyanairRéponse pédagogique à l'appel d'offre (fictif) lancé par Ryanair
Réponse pédagogique à l'appel d'offre (fictif) lancé par Ryanair
Guillaume Beck
 
Le logiciel libre dans le secteur public, un état des lieux en juin 2013
Le logiciel libre dans le secteur public, un état des lieux en juin 2013Le logiciel libre dans le secteur public, un état des lieux en juin 2013
Le logiciel libre dans le secteur public, un état des lieux en juin 2013
Benjamin Vidal
 
Rapport de stage (promoteur immobilier )
Rapport de stage (promoteur immobilier )Rapport de stage (promoteur immobilier )
Rapport de stage (promoteur immobilier )
Aicha OUALLA
 
Thèse Bureautique 2.0 - Stephane LAU
Thèse Bureautique 2.0 - Stephane LAUThèse Bureautique 2.0 - Stephane LAU
Thèse Bureautique 2.0 - Stephane LAU
stephou85
 
Le webdocumentaire, une nouvelle opportunité d’appréhender le monde
Le webdocumentaire, une nouvelle opportunité d’appréhender le mondeLe webdocumentaire, une nouvelle opportunité d’appréhender le monde
Le webdocumentaire, une nouvelle opportunité d’appréhender le monde
Olivier Crou
 
Rapport de stage PFE ( DUT) chez Synthèse Conseil - Jaiti Mohammed
Rapport de stage PFE ( DUT) chez Synthèse Conseil  - Jaiti MohammedRapport de stage PFE ( DUT) chez Synthèse Conseil  - Jaiti Mohammed
Rapport de stage PFE ( DUT) chez Synthèse Conseil - Jaiti Mohammed
Mohammed JAITI
 
Rapport du Projet de Fin d'année Génie informatique
Rapport du Projet de Fin d'année Génie informatique Rapport du Projet de Fin d'année Génie informatique
Rapport du Projet de Fin d'année Génie informatique
ayoub daoudi
 
Le développement du télétravail dans la société numérique de demain
Le développement du télétravail dans la société numérique de demainLe développement du télétravail dans la société numérique de demain
Le développement du télétravail dans la société numérique de demain
ACTIPOLE21
 
Le développement du télétravail dans la société numérique de demain
Le développement du télétravail dans la société numérique de demainLe développement du télétravail dans la société numérique de demain
Le développement du télétravail dans la société numérique de demain
guest499e380
 
Rapport cas teletravail_26_xi2009
Rapport cas teletravail_26_xi2009Rapport cas teletravail_26_xi2009
Rapport cas teletravail_26_xi2009
GreenICTies
 

Similaire à 1601896849 rapport fluttercopie (20)

ANDROID_Developper_des_applications_mobi.pdf
ANDROID_Developper_des_applications_mobi.pdfANDROID_Developper_des_applications_mobi.pdf
ANDROID_Developper_des_applications_mobi.pdf
 
Rapport-de-perfectionnement-Jasser-Degani.pdf
Rapport-de-perfectionnement-Jasser-Degani.pdfRapport-de-perfectionnement-Jasser-Degani.pdf
Rapport-de-perfectionnement-Jasser-Degani.pdf
 
Rapport de stage boite à idées innovantes avec dashboard
Rapport de stage boite à idées innovantes avec dashboardRapport de stage boite à idées innovantes avec dashboard
Rapport de stage boite à idées innovantes avec dashboard
 
Implémentation d’une solution de supervision de température et d’humidité pou...
Implémentation d’une solution de supervision de température et d’humidité pou...Implémentation d’une solution de supervision de température et d’humidité pou...
Implémentation d’une solution de supervision de température et d’humidité pou...
 
Tendances cloud
Tendances cloudTendances cloud
Tendances cloud
 
Tendances cloud-livre-blanc-collaboratif
Tendances cloud-livre-blanc-collaboratifTendances cloud-livre-blanc-collaboratif
Tendances cloud-livre-blanc-collaboratif
 
Tpe nguyen tien-thinh
Tpe nguyen tien-thinhTpe nguyen tien-thinh
Tpe nguyen tien-thinh
 
En association avec le CEFRIO et HEC Montréal, le CIGREF délivre les résultat...
En association avec le CEFRIO et HEC Montréal, le CIGREF délivre les résultat...En association avec le CEFRIO et HEC Montréal, le CIGREF délivre les résultat...
En association avec le CEFRIO et HEC Montréal, le CIGREF délivre les résultat...
 
Memoire web 3.0 Marion Pelouzet
Memoire web 3.0 Marion PelouzetMemoire web 3.0 Marion Pelouzet
Memoire web 3.0 Marion Pelouzet
 
Mémoire_SciencesPo_Alexis-Legrand_L’INTERNET-DES-OBJETS,-UN-PAS-VERS-LA-TRAN...
Mémoire_SciencesPo_Alexis-Legrand_L’INTERNET-DES-OBJETS,-UN-PAS-VERS-LA-TRAN...Mémoire_SciencesPo_Alexis-Legrand_L’INTERNET-DES-OBJETS,-UN-PAS-VERS-LA-TRAN...
Mémoire_SciencesPo_Alexis-Legrand_L’INTERNET-DES-OBJETS,-UN-PAS-VERS-LA-TRAN...
 
Réponse pédagogique à l'appel d'offre (fictif) lancé par Ryanair
Réponse pédagogique à l'appel d'offre (fictif) lancé par RyanairRéponse pédagogique à l'appel d'offre (fictif) lancé par Ryanair
Réponse pédagogique à l'appel d'offre (fictif) lancé par Ryanair
 
Le logiciel libre dans le secteur public, un état des lieux en juin 2013
Le logiciel libre dans le secteur public, un état des lieux en juin 2013Le logiciel libre dans le secteur public, un état des lieux en juin 2013
Le logiciel libre dans le secteur public, un état des lieux en juin 2013
 
Rapport de stage (promoteur immobilier )
Rapport de stage (promoteur immobilier )Rapport de stage (promoteur immobilier )
Rapport de stage (promoteur immobilier )
 
Thèse Bureautique 2.0 - Stephane LAU
Thèse Bureautique 2.0 - Stephane LAUThèse Bureautique 2.0 - Stephane LAU
Thèse Bureautique 2.0 - Stephane LAU
 
Le webdocumentaire, une nouvelle opportunité d’appréhender le monde
Le webdocumentaire, une nouvelle opportunité d’appréhender le mondeLe webdocumentaire, une nouvelle opportunité d’appréhender le monde
Le webdocumentaire, une nouvelle opportunité d’appréhender le monde
 
Rapport de stage PFE ( DUT) chez Synthèse Conseil - Jaiti Mohammed
Rapport de stage PFE ( DUT) chez Synthèse Conseil  - Jaiti MohammedRapport de stage PFE ( DUT) chez Synthèse Conseil  - Jaiti Mohammed
Rapport de stage PFE ( DUT) chez Synthèse Conseil - Jaiti Mohammed
 
Rapport du Projet de Fin d'année Génie informatique
Rapport du Projet de Fin d'année Génie informatique Rapport du Projet de Fin d'année Génie informatique
Rapport du Projet de Fin d'année Génie informatique
 
Le développement du télétravail dans la société numérique de demain
Le développement du télétravail dans la société numérique de demainLe développement du télétravail dans la société numérique de demain
Le développement du télétravail dans la société numérique de demain
 
Le développement du télétravail dans la société numérique de demain
Le développement du télétravail dans la société numérique de demainLe développement du télétravail dans la société numérique de demain
Le développement du télétravail dans la société numérique de demain
 
Rapport cas teletravail_26_xi2009
Rapport cas teletravail_26_xi2009Rapport cas teletravail_26_xi2009
Rapport cas teletravail_26_xi2009
 

1601896849 rapport fluttercopie

  • 1. 1.1.1.1.1.1.1.1 Projet de Stage : Application mobile Flutter : Tunisia Wallpaper Elaboré par Miladi Ons Encadré par :Taieb Meftah Département : Génie Informatique Industrielle Année Universitaire : 2019-2020
  • 2. Résumé : Ce rapport présente les photos de Tunisie par catégories et mettre en fond d’écran l’image. Mon projet s’articule autour des trois chapitres suivants : - Le premier chapitre présente le cahier de charge, le démarche à suivre de mon projet et la présentation de la société. - Le deuxième chapitre présente l’environnement logicielle de mon projet ainsi que son réalisation.
  • 3. Table de matières : Introduction générale :............................................................................................................................ 7 1 Introduction :................................................................................................................................... 8 2 Présentation de la sociéte............................................................................................................... 8 2.1 Définitin de l’entreprise :......................................................................................................... 8 2.2 L’équipe de projet : ................................................................................................................. 8 2.3 Communication au sein de l’équipe de projet : ...................................................................... 9 3 Cahier de charge :............................................................................................................................ 9 3.1 Contexte et la présentation de projet :................................................................................... 9 3.2 Objectif de projet : .................................................................................................................. 9 3.3 Description fonctionnelle des contraintes et des besoins liés au projet ................................ 9 3.4 Le délai de mon projet :........................................................................................................... 9 4 Démarche a suivre :...................................................................................................................... 10 5 Conclusion : ................................................................................................................................... 10 Chapitre 2 :............................................................................................................................................ 11 Environnement logicielle et réalisation................................................................................................. 11 1 Introduction :................................................................................................................................. 11 2 L’environnement logicielle :.......................................................................................................... 11 2.1 Choix de language de programmation :................................................................................ 11 2.2 choix de framework :............................................................................................................. 12 2.3 Choix de plateforme pour conception la base de données : ................................................ 13 2.4 Choix de L’IDE :...................................................................................................................... 14 2.5 Choix de l’émulateur : ........................................................................................................... 14 2.6 UI et UX Design:..................................................................................................................... 14 2.6.1 Qu’est-ce que l’UX Design ? .......................................................................................... 14 2.6.2 Qu’est-ce que l’UI ? ....................................................................................................... 14 2.6.3 Le logiciel utilisé pour UI/UX : ....................................................................................... 15 3 La réalisation : ............................................................................................................................... 15 3.1 Ui ........................................................................................................................................... 15 3.1.1 Sprint 1 : ........................................................................................................................ 16 3.1.2 Sprint 2 : ........................................................................................................................ 16 3.1.3 Sprint 3 : ........................................................................................................................ 16 3.2 UX Design :............................................................................................................................. 17 3.3 Conception de la base de données : ..................................................................................... 18
  • 4. 3.3.1 Storage :......................................................................................................................... 18 4 Conclusion: .................................................................................................................................... 18 Conclusion générale.............................................................................................................................. 19 Bibliographie: ................................................................................................................................ 19 Table de figures
  • 5. Figure 1 Les compétences de Web Graphique ..........................................................................8 Figure 2 Logo de Dart ...............................................................................................................11 Figure 3 Popularité de language Dart ...................................................................................... 12 Figure 4 Logo de flutter............................................................................................................13 Figure 5 Logo de Firebase.........................................................................................................13 Figure 6 Logo de Visual Studio Code........................................................................................ 14 Figure 7 Exemple de wireframe ............................................................................................... 15 Figure 8 Sprint 1 ....................................................................................................................... 16 Figure 9 Sprint 2 ....................................................................................................................... 16 Figure 10 sprint 3...................................................................................................................... 17 Figure 11 UX Design ................................................................................................................. 17 Figure 12 Storage in Firebase...................................................................................................18 Figure 13 Cloud Firestore in Firebase....................................................................................... 18
  • 6. Remerciements : Je tiens avant tout à remercier mon fiancé et ma famille qui m’ont encouragés. Je tiens a remercié mon encadreur Mr Taieb Meftah qui m’a encouragé pendant la durée du projet, ainsi pour toute l’aide et le soutien qu’il m’apporté. Non seulement ca, Je tiens à remercier aussi toute l’équipe pédagogique de l’école nationale d’électronique et des télécommunications pour ses grands efforts.
  • 7. Introduction générale : Dès les premiers instants du mobile, il n'y avait vraiment qu'une seule façon d'offrir aux utilisateurs la performance et les fonctionnalités qu'ils attendaient : vous deviez utiliser un SDK, c'est à dire un ensemble d'outils logiciels spécifiques à la plateforme que vous souhaitiez cibler. Bien sûr, cela impliquait un certain nombre de contraintes :  Construire une version différente pour chaque plate-forme mobile  Gérer plusieurs codes sources  Embaucher et retenir des développeurs natifs hautement spécialisés et coûteux Selon un rapport de l'entreprise américaine comScore (analyse publicitaire), le nombre d'utilisateurs mobiles a dépassé les utilisateurs d’ordinateurs de bureau en 2014. Aujourd’hui la donne n’est absolument plus la même et tant mieux d’ailleurs. Tout le monde peu plus ou moins développer, sans trop de mal, une application mobile simple en seulement 24h et la publier sur le Google Play Store dans les heures qui suivent. Alors comment ces gens peuvent développer ces applications ? et quelles sont l’environnement logiciel et matériel pour réaliser ce travail ?
  • 8. Chapitre1 :Présentation de societe et de projet : 1 Introduction : Ce chapitre présente la société , le cahier de charge ainsi que le démarche à suivre . 2 Présentation de la sociéte 2.1 Définitin de l’entreprise : Web graphique est une société de conseil et d’ingénierie spécialisée dans les nouvelles technologies de l’information opérant en Av. 14 Janvier, Sfax El Jadida, Imm Baya Centre, App. N°54 Sfax-tunisie et à l'International. Elle développe ses activités autour de différentes prestations de services informatiques dédiées aux entreprises comme la création et développement des sites et portails web, Conception des flyers, chart graphique, assistance ... Figure 1 Les compétences de Web Graphique 2.2 L’équipe de projet : -Taieb Meftah : gérant et web désigner -Sameh Bibi :Infographiste -Med Amine Guidara : développeur -Amir Elloumi :développeur -Les stagaires :Moi-même Ons Miladi, Rihab ben hassouna ,Nihel Antri ,Sofien Cherif… Mon tuteur en entreprise pendant ce stage est M. Taieb Meftah. Les étapes de développement de l’application seront validées par le gérant. Il me permettre d’avoir accès à l’infrastructure informatique de l’entreprise et me conseiller sur les technologies à utiliser.
  • 9. 2.3 Communication au sein de l’équipe de projet : Les membres de l’équipe projet se trouvant au même étage de l’établissement, la communication verbale est le moyen de communication privilégié. L’équipe étant très disponible, il est aisé d’obtenir des réponses rapides à des questions ponctuelles ainsi que d’obtenir des entretiens voire même des réunions. 3 Cahier de charge : 3.1 Contexte et la présentation de projet : L’application que j’ai développé permet de : - Afficher les photos de Tunisie par catégories - Mettre en fond d’écran l’image 3.2 Objectif de projet : Puisque le nombre de téléchargement des applications de fond d’écran a augmenté, donc l’idée est de combiner entre les applications de fond d’écran et les images de Tunisie pour améliorer le tourisme. 3.3 Description fonctionnelle des contraintes et des besoins liés au projet La première étape de la conception consiste à analyser la situation pour tenir compte des contraintes, des risques et de tout autre élément pertinent et assurer un ouvrage ou un processus répondant aux besoins . Une fois mis en perspective avec le contexte, les besoins réels de ce projet vont être connues par un recherche sur internet . Donc les besoins pour mon travail sont : *Environnement logiciel : flutter /Android/Firebase/XD/UI * Environnement matériel : -Processeur : Intel® Core™ i5 8250U CPU @ 1.60 GHz -Mémoire installé RAM : 8 GO -type de système : système d’exploitation 64 bits ,processeur x64 -Windows 10 professionnel -Emulateur Nokia 4.2 3.4 Le délai de mon projet : Le délai de mon projet est un mois : la première semaine :installation ,recherche sur internet ,Conception la base de donnée avec Firebase La deuxième semaine : Architecture avec Ui , Design avec XD
  • 10. La troisième semaine : Affichage des images par catégories. La quatrième semaine : Ouvrir une image et la mettre en fond d’écran 4 Démarche a suivre : - Installation flutter et android - modifier l’environement de systéme(fichier C:srcflutterbin et C:UsersUtilisateurAppDataLocalAndroidSdkemulator) - flutter doctor - quelques sdk ne sont pas acceptés donc faire la commande flutter doctor --android-licenses - flutter doctor installation réussite - création de projet flutter - run le programme classique - dans le gradleajouter le chemin de jdk - Construction la base de données par catégories avec Firebase (cloud Firestore) - Telecharger google services et la copier danns android/app - Copier le lien de package dans gradle/build.gradle - Modifier le min SDK a 21 - Installer les packages cloud firestore ,wallpaper manger, wallpaper cache manger - Faire le UI/UX - Coder et stimuler l’application . 5 Conclusion : Pour bien réaliser le projet en un temps minimum il faut faire le cahier de charge et les étapes à suivre. On conclut que ce chapitre est le plus important dans ce rapport. Quelle est alors l’environnement logicielle et quelles sont les étapes de la réalisation ?
  • 11. Chapitre 2 : Environnement logicielle et réalisation 1 Introduction : Den nos jours, chaque technologie évolue pour atteindre le but de perfection comme le développement mobile . En effet , la réussite de ce projet dépend de choix de language , framework ,bon design et architecture . Je dégagerai dans la première partie de ce chapitre l’environnement logicielle, ensuite dans le deuxième partie la réalisation de mon travail. 2 L’environnement logicielle : 2.1 Choix de language de programmation : La language de programmation utilisé va beaucoup influer sur le projet et la manière dont celui-ci sera développé, en fonction des avantages et des inconvénients du langage. Il est important de bien étudier la language, pour éviter de devoir changer de langage en cours de projet, ce qui constituerai une perte de temps considérable Le choix du langage s’est finalement porté sur Dart. Figure 2 Logo de Dart Dart un langage de programmation web développé par Google. Son but initial est de remplacer JavaScript pour devenir la nouvelle lingua franca du développement web4, néanmoins la priorité actuelle des développeurs est que le code Dart puisse être converti en code JavaScript compatible avec tous les navigateurs modernes, ainsi que sur le développement d'application multiplateforme. Dart peut aussi être utilisé pour la programmation côté serveur5, ainsi que le développement d'applications mobiles (via l'API Flutter).
  • 12. En effet j’ai choisi cette language pour plusieurs avantages :  productif, rapide et portable : d’après Google, Dart augmente la vitesse du développeur, car il a une syntaxe claire et succincte et peut s'exécuter sur une VM avec un compilateur JIT. Ce dernier permet le déploiement à chaud et le rechargement dynamique lors du développement mobile. Cela veut dire que vous pouvez apporter diverses modifications aux applications et à leurs modules sans devoir arrêter et redémarrer le serveur .  accessible : Dart est conçu pour être familier et donc accessible à de nombreux développeurs existants, grâce à ses aspects orientés objet et sa syntaxe .  réactif : Dart fonctionne également bien pour la programmation réactive avec ses bibliothèques de base, y compris les flux et les futures (qui font référence à des techniques de synchronisation pour certains langages concurrents). Il a également un grand support pour la gestion des objets temporaires grâce à un ramasse-miettes générationnel rapide. Figure 3 Popularité de language Dart 2.2 choix de framework : Pour que l’application soit robuste, facile à faire évoluer et réalisable en un temps minimum, un Framework représente un outil idéal. Il existe une grande quantité de Framework. Chacun présentant des avantages et des inconvénients.
  • 13. C’est pour cela j’ai choisi flutter pour ces grands avantages par rapport à autres Framework : -Avec flutter on peut utiliser android studio code ou visual studio code ou n’import quelle ide Moins de code pour la meme résultat en natif -design de qualité ,reposant sur des widgets, une bibliothéque d’animations , une architecture en couches extensible -Compilation extremenet rapide :l’application se recharge automatiquement quand le code est modifié de maniére presque instantané Figure 4 Logo de flutter Flutter est le framework de Google permettant un développement multiplateforme. Il permet donc de ne développer une application qu’une seule fois pour les différentes plateformes : iOS et Android. Flutter s’appuie sur le langage de programmation DART (à l’origine appelé Dash), créé également par Google et présenté au public en 2011. 2.3 Choix de plateforme pour conception la base de données : Pour la conception de BD j’ai choisi Firebase car elle a des API intuitives regroupées dans un SDK unique .Ces API gagne le temps et réduit le nombre d’intégrations gérés par mon application. En effet ,Firebase est une plate-forme de développement d’applications mobiles et web qui fournit aux développeurs une pléthore d’outils et de services pour les aider à développer des applications de haute qualité, a élargie leur base d’utilisateurs et à générer davantage de profits. Figure 5 Logo de Firebase
  • 14. 2.4 Choix de L’IDE : Un IDE complet est un éditeur unique dans lequel vous pouvez écrire, compiler, lancer, déboguer et publier l’application. Visual Studio Code est un éditeur de code extensible développé par Microsoft pour Windows, Linux et macOS. Les fonctionnalités incluent la prise en charge du débogage, la mise en évidence de la syntaxe, la complétion intelligente du code, les snippets, la refactorisation du code et Git intégré. Figure 6 Logo de Visual Studio Code 2.5 Choix de l’émulateur : J’ai choisi mon téléphone comme un émulateur car il est plus rapide que l’émulateur de Visual Android studio. Mon émulateur est Nokia 4.2 qui a les caractéristiques suivantes : -Android 9Pie -5.71 HD +19.9 display -3000 mAh battery -Qualcomm Snapdargon mobile Platform 2.6 UI et UX Design: 2.6.1 Qu’est-ce que l’UX Design ? L’UX Design se définit donc comme l’ensemble des moyens mis en œuvre pour concevoir une interface qui répond pleinement aux besoins en utilisabilité de chaque utilisateur. L’objectif étant de fournir la meilleure expérience utilisateur possible. 2.6.2 Qu’est-ce que l’UI ?
  • 15. Avec l’UI, l’interface utilisateur, on rentre dans le registre de la technologie de l’information et plus spécifiquement dans la conception d’interface homme-machine (IHM). Son but étant d’améliorer l’interaction d’un utilisateur avec l’interface. L’UI designer est donc la personne en charge de réaliser une interface agréable et utile pour les utilisateurs. Selon les règles et méthodes dédiées à l’ergonomie des interfaces, il conçoit et positionne les différents éléments graphiques et textuels. La technologie utilisé pour le UI est wireframe. c’est quoi alors Wireframe ? Le wireframe (ou maquette fonctionnelle) est une représentation graphique simplifiée de votre interface utilisateur qui permet de définir les zones, l’organisation générale de l’information et tous les éléments qui devront être présents dans chaque page de façon simple et percutante. Figure 7 Exemple de wireframe 2.6.3 Le logiciel utilisé pour UI/UX : Adobe XD est une solution d'UX/UI design complète pour la conception de sites web, d'applications mobiles, etc Alliant rapidité, précision et qualité, XD permet aux designers de modifier et partager facilement des prototypes interactifs avec collaborateurs et réviseurs sur l'ensemble des appareils et plates-formes, dont Windows, Mac, iOS et Android. 3 La réalisation : L’application sert a offrir au utilisateur des images de la tunisie . Ce dernier peut mettre l’image en fond d’écran. 3.1 Ui Pour bien réaliser l’application en un temps minimale il faut bien faire l’ui. En effet j’ai fait 3 interfaces :
  • 16. 3.1.1 Sprint 1 : Figure 8 Sprint 1 Cette interface présente les catégories de Tunisie .L’utilisateur doit choisir l’un des catégories pour aller aux images 3.1.2 Sprint 2 : Figure 9 Sprint 2 Cette interface presente les images de la catégorie choisi.il fuaut cliquer sur l’un des images pour aller au interface suivante ou bien cliquer sur le bouton de retour. 3.1.3 Sprint 3 :
  • 17. Figure 10 sprint 3 Cette interface présente l’image choisi .il faut cliquer sur « set wallpaper » pour la mise en fond d’écran ou bien cliquer sur le bouton de retour. 3.2 UX Design : Figure 11 UX Design
  • 18. 3.3 Conception de la base de données : En premier temps j’ai téléchargé les images et j’ai importé ces images dans le bloc de Storage. 3.3.1 Storage : Figure 12 Storage in Firebase En deuxième temps j’ai copié le lien de ces images et j’ai les mis dans Cloud firestore . Figure 13 Cloud Firestore in Firebase 4 Conclusion: Dans ce chapitre j’ai réalisé une étude au niveau de l’environnement logicielle. Après cela j’ai fait la construction de la base de données ainsi que UI/UX.