ICT 218

Développement
d’applications
mobiles
Evaris Fomekong

[Link]
Programme
 01 Objectifs du cours
Agenda 02 Appareils mobiles et apps

03 Environnements et
plateformes de
développement mobile
04 Analyse des besoins,
requis et fonctionnalités

05 Conception UI/UX
06 Utilisation des ressources
 Objectifs du cours

Ce cours introduit les étudiants au développement d’applications pour les

appareils mobiles. Au terme de ce cours, les étudiants seront en mesure
Descriptif de : concevoir, développer et déployer une application mobile; appliquer
les patrons de conception spécifiques à la conception d’applications
mobiles; maîtriser les outils de développement d’une application mobile;

Concepts Logiciel
85%
GIT
IDE
85%
Application
GIMP
Mobile
Github
VCS
Dart
65% Framework 65%
Riverpod
Firebase
70%
Algorithmique 90%
Appareils mobiles et
apps une vue
d'ensemble
Chapitre II, III
 01 Appariel Mobile
Agenda ❖ Materiel
❖ Systeme d’exploitation
❖ Android
❖ IOS
❖ Autres

02 Application Mobile
❖ Concept
❖ Native
❖ Hybride
❖ Web
❖ Language
❖ Java
❖ Swift
❖ Javascript
❖ Framework
❖ React Native
❖ Cordova
❖ Ionic
 A- Appariel Mobile

Synopsis

Un appareil est un appareil informatique portatif utilisable de manière autonome lors d’un
déplacement. Les appareils mobiles sont de petite taille, certains peuvent être mis dans les
poches.

Aujourd'hui, il existe de nombreux types d'appareils mobiles comme les téléphones portables,
les tablettes, les montres connectées ou même les voitures. Cependant, nous allons nous
concentrer principalement sur les deux premiers : les mobiles et les tablettes.

Ces dernières années ont été passionnantes dans le développement des technologies mobiles. Il
semble que chaque jour, il y a quelque chose de nouveau qui se passe sur nos téléphones et
tablettes pour rendre l'expérience encore plus intense et cette tendance ne montre aucun signe
de ralentissement.

Alors, que pouvons-nous attendre dans un avenir proche? Voici quatre tendances mobiles sur
lesquelles nous devons garder un oeil.
 Tendances mobiles
3. Outils de travail

1. Evolution des tailles Les appareils mobiles ont longtemps été considérés
comme outils de communication avec une utilité limitée
Pendant un certain temps, il semblait que les pour le travail. Cela change, grâce à l'introduction de
appareils mobiles devaient seulement continuer à nouveaux appareils comme l'iPad Pro et Surface Pro. On
devenir plus petits. Ensuite, l'introduction de commence à rechercher des appareils qui offrent plus
l'iPhone 6 Plus a incité les constructeurs a proposer d'outils et de fonctionnalités, telles que des applications
des nouveautés plus grandes jusqu'à l'introduction multi-écrans, des applications plus avancées, une
de l'expression "Phablet" pour décrire ces appareils autonomie et un stockage accrus..
surdimensionnés.

2. Performance Web
Le Web mobile poursuit son ascension régulière. En 4. Autonomie de la batterie
2015, un rapport de Morgan Stanley a montré que plus Les fabricants sont à l'écoute et à la
de gens utilisaient le Web mobile que les applications et recherche de nouvelles solutions pour
que la plupart des gens sont plus susceptibles de augmenter la vie de la batterie sans
consulter un site Web sur leur appareil avant de compromis sur la taille et le poids des
télécharger une application. En outre, il y a une perte appareils. Déjà, la durée de vie d'une
importante de l'engagement parmi les utilisateurs qui batterie standard a augmenté d'environ 25%
téléchargent des applications; il semble qu'une majorité au cours des cinq dernières années.
de personnes qui télécharge et installe une application la
supprime après.
 Evolution des Appariels Mobiles
le Siemens S10 a donné vie aux écrans Les smartphones sont devenus de plus
En 1983, le monde a obtenu de téléphones portables pour la en plus au cœur de la vie moderne,
le tout premier téléphone première fois en 1997. La même année, offrant bien plus que de simples
mobile portable sous la forme Hagenuk a lancé le GlobalHandy, le fonctionnalités de communication. Le
du Motorola DynaTAC 8000X. premier appareil sans antenne externe. premier service 4G du Royaume-Uni a
Cela coûtait 4000 $ USD et La personnalisation a également été lancé dans 11 villes par EE en 2012,
était un énorme symbole de démarré de façon spectaculaire avec avec des vitesses de téléchargement
statut à l'époque. . Ericcson offrant des panneaux de pouvant atteindre 12 Mbps.
clavier avant de couleur
interchangeables.

1983 1998 2010

2020
Le Royaume-Uni et les
États-Unis commencent à
déployer le réseau 5G, les
premières indications
1994 2003 indiquent des vitesses de
Le GSM a été lancé pour la La mise en œuvre de la 3G a permis à des transfert de données
première fois en Europe en vitesses de téléchargement allant jusqu'à réelles 10 fois plus
1991 avec l'Orbitel TPU 900 2MBS en mars 2003, "3" étant le premier rapides que la 4G.
sur le marché, mais ce n'est à offrir le service au Royaume-Uni. RIM a
qu'en 1992 que les apporté le courrier électronique mobile
téléphones portables n'ont aux masses avec sa gamme de terminaux
plus été limités à une BlackBerry populaires comme le 8100
utilisation professionnelle. Pearl. L'avènement des caméras frontales
en 2003 sur des appareils
Anatomie d’un Appariel Mobile
 B- Application Mobile

Synopsis

Le marché du mobile connaît une extension folle ces dernières années. Depuis 2015, les
utilisateurs surfent plus sur un smartphone ou une tablette que sur leur ordinateur. Nous
n'utilisons plus notre smartphone uniquement pour téléphoner, et ça, les géants du mobile l'ont
bien compris.

Une application mobile, plus communément appelée application, est un type de logiciel
d'application conçu pour s'exécuter sur un appareil mobile. En réalité, les applications ne sont
pas installées sur l'appareil mobile, mais sur le système d'exploitation mobile.

Qui dit smartphone ou tablette dit bien sûr application mobile. Vous savez ces petites pastilles
qu'on retrouve chez tout le monde, qui permettent de jouer, consulter ses mails, naviguer sur les
réseaux sociaux, etc. Environ 170 milliards d’applications mobiles ont été téléchargées dans le
monde entier.

Il existe deux types principaux d'applications mobiles : les applications natives et les applications
cross-platforms.
Abres des OS Mobile
Différence entre un OS mobile et OS
Caractéristiques OS Mobile OS Bureau

Définition Il s'agit d'un type de système d'exploitation qui permet aux C'est l'environnement dans lequel un utilisateur
logiciels d'application de fonctionner sur des appareils mobiles. manipule un ordinateur personnel.

Mémoire nécessaire Il a besoin d'un minimum de RAM pour optimiser. Il a besoin d'une énorme mémoire pour fonctionner.

Stockage Il utilise un lecteur flash pour stocker les données. Il utilise des disques durs et des lecteurs flash pour
stocker des données.

Temps de démarrage Le démarrage prend moins de temps. Il faut beaucoup de temps pour démarrer.

But Il gère la connectivité cellulaire et sans fil et l'accès aux Il gère les ressources logicielles et matérielles du
appareils. système.

Pouvoir Il est optimisé pour fonctionner avec des besoins en énergie Il n'est pas facilement optimisé pour la perte d'énergie.
minimaux et possède une fonction pour éviter les pertes
d'énergie.

Interface 60 50%
Il fonctionne sur des appareils à écran tactile ou à pavé tactile. Il fonctionne à travers de nombreux périphériques
d'entrée, y compris une souris, un clavier, etc.
Anatomie d’une Application Mobile
 Intro Si vous possédez un téléphone intelligent ou un autre appareil mobile, vous
Comprendre les utilisez probablement des applications pour jouer à des jeux, obtenir des
itinéraires détaillés, accéder aux actualités, aux livres, à la météo, etc. Faciles à
télécharger et souvent gratuites, les applications mobiles peuvent être tellement
applications mobiles amusantes et pratiques que vous pouvez les télécharger sans penser à certaines
considérations clés: comment elles sont payées, quelles informations elles
peuvent recueillir sur votre appareil ou qui obtient ces informations.

Pourquoi certaines applications confidentialité

sont-elles gratuites?
À quels types de données les
applications peuvent-elles
❖ Ventes d’espaces publicitaires. accéder?:
❖ vos contacts téléphoniques et e-
❖ Version de base gratuite mail
❖ Vitrine de produit ❖ journaux d'appels
❖ Payment integres ❖ données Internet

Avis des utilisateurs de l'application mobile? Pourquoi certaines applications ❖ données de calendrier
collectent-elles des données de
localisation?? ❖ données sur l'emplacement de
La plupart des magasins d'applications incluent des avis
❖ fournir des cartes, des coupons l'appareil
d'utilisateurs qui peuvent vous aider à décider de
télécharger ou non. Mais certains développeurs pour les magasins ou des
connaissances (personnes) à ❖ les identifiants uniques de
d'applications et leurs spécialistes du marketing se sont
proximité. l'appareil
fait passer pour des consommateurs pour publier des
commentaires positifs sur leurs propres produits.
❖ Vente aux reseaux publicitaires ❖ des informations sur la façon
pour des publicites ciblees dont vous utilisez l'application
elle-même.
Application Mobile
Types d’applications mobiles
Application Native
ou Plateformes

Android.
IOS
Natives Apps Windows Phone
BlackBerry

Laganges

Java/Kotlin.
C-objective/Swift
C#
C++
 Natives Apps
les applications natives ou « Natives Apps »
Celles-ci correspondent à des logiciels créés uniquement pour une
plateforme mobile spécifique. Le développement de ces logiciels se fait
au travers du SDK ou software développent kit de la plateforme mobile
en question. Le nom de ces applications vient du fait qu’elles sont
développées exclusivement avec le langage « natifs », par exemple le
langage JAVA ou le langage Objective-C. Les natives App sont
téléchargées à partir d’une plateforme de téléchargement qui est
souvent un Store applicatif. C’est par exemple le cas pour l’Apple store
ou encore Google Play.

60% 50%
 Natives Apps

Platform Language Structure Support IDE

Android Java/Kotlin Alphabet (Google) Android Studio

IOS C-Objective/Swift Apple X code

Windows Phones C# Microsoft Visual Studio

Black Berry C++ BlackBerry UEM Visual Studio

 Avantages et inconvénients
Inconvénients Avantages

❖ Les applications natives prennent du temps ❖ Meilleure rapidité, fiabilité et dotée d’une
à être développées et sont relativement meilleure réactivité ainsi qu’une résolution
coûteuses. supérieure ce qui assure une meilleure
expérience utilisateur.
❖ S’ajoutent d’éventuels problèmes de
rétrocompatibilité, en raison notamment ❖ Elle permet un accès plus facile à toutes les
de la création de nouvelles versions du fonctionnalités du téléphone, de
système d’exploitation. l’accéléromètre en passant par la caméra et
même le micro.
❖ Celles-ci peuvent aussi se voir refuser
l’accès au Store sur lesquelles elles ❖ Ne requiert pas forcément internet pour
souhaitent être mises à disposition. En effet, fonctionner, ce qui est un réel avantage. Même
elles doivent passer par une batterie de en 2017, il existe encore des zones très peu
tests de validation de ces Stores, qui peut couvertes par le réseau internet
les accepter ou les refuser.
Application Web
ou Plateformes

Ionic.
Monaca
Web Apps Onsen UI
Framework7

Laganges

Javascript
CSS
Html
 Types d’applications mobiles
les applications Web ou « Web Apps »
Elles correspondent à des sites Web qui sont conçus spécialement pour
un affichage optimisé pour mobile. Pour accéder à ces sites Web, on
utilise le navigateur Internet qui est sur le mobile. Ces applications
mobiles sont développées principalement à partir de technologies Web
comme le HTML5 ou encore CSS3. Grâce au support HTML5, il est dès
lors, possible d’accéder à environ 80 % des fonctions présentes sur le
mobile.

Par exemple, cela permet d’accéder à différentes fonctions, comme la

géolocalisation, à l’accéléromètre, gérer la fonction multitouch ou
encore permettre la synchronisation offline lorsque le mobile perd et
retrouve ensuite sa connexion.
Ces applications Web peuvent être de deux sortes : les génériques, qui
sont compatibles avec toutes les plateformes mobiles et donc
utilisables sur n’importe laquelle, ou alors celles conçues
spécifiquement pour un genre de support en particulier.
60% 10%
 Web Apps

Platform Language Structure Support IDE

Ionic HTML Ionic Atom

Monaca CSS Monaca Webstorm

Onsen UI Javascript Onsen Visual Studio

Framework 7 TypeScript Sublime

 Avantages et inconvénients
Inconvénients Avantages

❖ Un de taille, elles n’ont pas accès à toutes ❖ Leur code unifié permet la comptabilité avec
les fonctions présentes sur le mobile. Par tous les navigateurs, cela permet aux
exemple, il leur est impossible d’accéder au applications Web d’être développées plus
répertoire du mobile. rapidement et donc d’obtenir une réduction
conséquente des coûts du projet.
❖ Elles sont pas deployables sur les stores des
differents platformes natives reduisant les ❖ De plus, les Web App sont simples à développer
canaux d’acces à l’application sur ces plateformes, puisque celles-ci ne les
soumettent pas au test de validation..
Application Hybride
ou Plateformes

Ionic.

Hybrid Apps React Native

Flutter
PhoneGap

Langages

Javascript
CSS
Html
Dart

Frameworks

Angular
React
Vue
 Types d’applications mobiles
les applications de type hybride ou « hybrid Apps »
Ces dernières sont considérées comme un mix, entre les Web Apps et
les Nativ Apps. En effet, elles sont compatibles avec toutes les
plateformes mobiles. Mais ces applications sont principalement
développées à l’aide d’HTML5, aujourd’hui, qui est très performant
mais qui utilisent aussi d’autres langages Web comme le CSS et le
JavaScript.

Ainsi, une application dite hybride, contrairement à une application

native, n’est pas dépendante d’une plateforme mobile en particulier.
De la même manière, et contrairement aux applications Web, les
applications hybrides peuvent accéder à toutes les fonctions présentes
sur le mobile. Cela est rendu possible par des liens qui sont faits entre
le langage natif et la technologie Web présente dans l’application
hybride..

60%
30%
 Natives Apps

Platform Language Structure Support IDE

Flutter Dart Alphabet (Google) Android Studio

React Native Javascript(React) Facebook Visual Studio Code

Javascript(Angular,React,
Ionic Ionic Visual Studio Code
ES6, Vue)

Xamarin C# Microsoft Visual Studio

 Avantages et inconvénients
Inconvénients Avantages

❖ Un de taille, elles n’ont pas accès à toutes ❖ Réduction des coûts de développement,
les fonctions avancées présentes sur le embauche de développeurs natifs, maintenance
mobile. de la base de code

❖ Temps de mise sur le marché plus rapide sur les

❖ Les performances manquent comparé à des deux plateformes
applications natives
❖ Facilité de maintenance via des instruments de
❖ Dépendance aux plugins navigateur intégrés et des outils de débogage.

❖ Taille de l'application ❖ De plus, les Web App sont simples à développer

sur ces plateformes, puisque celles-ci ne les
soumettent pas au test de validation..
 Resumé
Au risque de décevoir certains il n'y a pas de mauvais ou de bon outil. Il existe juste des
outils adaptés pour résoudre des tâches spécifiques. Dans le cas d’Ionic, sa valeur ajouté
est le développement d’applications sur diverses plateformes, en utilisant des
technologies bien connues. Il aide les équipes à économiser du budget, du temps et des
efforts de développement.

Si vous possédez une solide expertise en matière de framework et une bonne maîtrise
du langage, il est possible de créer une application très performante. Mais rien ne vaut
l’application native en termes de performances et d’expérience utilisateur. Donc, en fin
de compte, ce sont vos priorités qui dictent votre choix.
Application Introduction

Cas Flutter Présentation

Avantages
Installation et configuration
Premier projet Flutter

Dart
Introduction
Variables et types de données
Structures de contrôle de flux
Fonctions et méthodes
Programmation orientée objet
Gestion d'état (Riverpod)
Introduction
Présentation de Riverpod
Comprendre le concept de provider
Utilisation de provider
MultiProvider
Communication réseau avec REST et GraphQL
Introduction
Mise en place d'une API REST ou GraphQL
Consommation d'une API REST ou GraphQL dans Flutter
Affichage des données récupérées depuis l'API

Utilisation des fonctions natives du téléphone

Introduction
Plugins pour accéder aux fonctions natives
Exemples :caméra, le microphone et les capteurs
 0%
Progression

Flutter est un framework open-source de développement d'applications mobiles créé par Google en
2017. Il permet de créer des applications pour les plateformes Android et iOS avec un seul code source.
Flutter utilise le langage de programmation Dart, également créé par Google.

Theorie
Flutter offre plusieurs avantages par rapport UI/UX
à d'autres frameworks de développement
d'applications mobiles : Flutter est basé sur un modèle de
Un seul code source pour plusieurs programmation réactif et utilise un
plateformes : avec Flutter, vous pouvez créer widget de style déclaratif pour construire
des applications pour Android et iOS avec un l'interface utilisateur. Les widgets sont
seul code source, ce qui réduit des éléments de base de l'interface
considérablement le temps et les coûts de utilisateur tels que des boutons, des
développement. champs de texte, des images et des listes.
Performances élevées : grâce à l'utilisation Ils peuvent être combinés pour créer des
de widgets personnalisables et d'un moteur mises en page complexes et des
de rendu haute performance, les applications interactions avec l'utilisateur..
Flutter offrent des performances élevées et
une expérience utilisateur fluide.
 Road Map

Camera
GPS

Historique/Avantage/Installation Riverpod
RESSOURCES
INTRO Gestion D’etat NATIVE

1 3 5
2 4
DART Appel API
Variable
REST
Function
POO Graphql
 Flutter
INTRO

Synopsis Flutter est un framework open-source de développement

d'applications mobiles créé par Google en 2017. Il permet de créer
des applications pour les plateformes Android et iOS avec un seul
code source. Flutter utilise le langage de programmation Dart,
également créé par Google.

Flutter est basé sur un modèle de programmation réactif et utilise

un widget de style déclaratif pour construire l'interface utilisateur.
Les widgets sont des éléments de base de l'interface utilisateur tels
que des boutons, des champs de texte, des images et des listes. Ils
peuvent être combinés pour créer des mises en page complexes et
des interactions avec l'utilisateur.
 Introduction
Avantages de Flutter.

Flutter offre plusieurs avantages par rapport à d'autres frameworks de développement d'applications mobiles :

✓ Un seul code source pour plusieurs plateformes : avec Flutter, vous pouvez créer des applications pour
Android et iOS avec un seul code source, ce qui réduit considérablement le temps et les coûts de
développement.

✓ Performances élevées : grâce à l'utilisation de widgets personnalisables et d'un moteur de rendu haute
performance, les applications Flutter offrent des performances élevées et une expérience utilisateur fluide.

✓ Développement rapide : Flutter offre une expérience de développement rapide avec des fonctionnalités
telles que Hot Reload, qui permet de voir les changements apportés à l'application en temps réel.

✓ Design personnalisable : Flutter offre une grande flexibilité en matière de conception d'interface utilisateur,
permettant aux développeurs de créer des designs personnalisés et attrayants.

✓ Communauté active: Flutter est soutenu par une communauté de développeurs active et croissante, ce qui
signifie que vous avez accès à une variété de ressources et de bibliothèques pour vous aider dans votre
développement..
 Introduction
limites et inconvénients de Flutter.
Bien que Flutter soit un framework de développement mobile puissant et populaire, il présente également
certaines limites et inconvénients. Voici quelques-uns des principaux :

Taille de l'application : Comme Flutter utilise son propre moteur de rendu pour afficher l'interface utilisateur
de l'application, cela peut augmenter la taille de l'application, ce qui peut être un inconvénient pour les
utilisateurs ayant un espace de stockage limité sur leur appareil.

Courbe d'apprentissage : Flutter utilise un langage de programmation relativement nouveau appelé Dart, ce
qui peut rendre la courbe d'apprentissage plus longue pour les développeurs qui ne sont pas familiers avec le
langage.

Problèmes de compatibilité : Bien que Flutter soit compatible avec les deux principales plates-formes mobiles
(iOS et Android), il peut y avoir des problèmes de compatibilité avec certains appareils ou systèmes
d'exploitation, ce qui peut entraîner des bogues ou des problèmes de performance.

Bibliothèques tierces : Bien que Flutter dispose d'une grande bibliothèque de widgets personnalisables, il
peut y avoir des limites ou des lacunes dans les fonctionnalités de Flutter qui nécessitent l'utilisation de
bibliothèques tierces, ce qui peut augmenter la complexité et la taille de l'application.

Documentation et support : Bien que Flutter dispose d'une communauté de développeurs active et
croissante, la documentation et le support peuvent être limités ou peu clairs pour certains problèmes ou
.
fonctionnalités plus avancés.

Il est important de noter que la plupart de ces limites et inconvénients sont relatifs et peuvent varier en
fonction des besoins et des exigences spécifiques de chaque projet. En fin de compte, la décision d'utiliser
Flutter dépendra des priorités et des contraintes de chaque projet individuel.
 Introduction
Installation de Flutter et configuration de l'environnement de
développement.

Pour installer Flutter, vous pouvez suivre ces étapes :

1. Téléchargez le fichier d'installation de Flutter à partir du site officiel de Flutter.

2. Extrayez le fichier dans un répertoire de votre choix.

3. Ajoutez le chemin d'installation de Flutter au PATH de votre système.

Vérifiez l'installation de Flutter en exécutant la commande "flutter doctor" dans

votre terminal.

Pour configurer votre environnement de développement, vous pouvez installer un

éditeur de code tel que Visual Studio Code ou Android Studio, et installer les
plugins Flutter nécessaires.
.
 Introduction
Création d'un premier projet Flutter.

Voici les étapes pour créer un nouveau projet Flutter :

1. Ouvrez votre terminal et créez un nouveau projet Flutter en utilisant la

commande "flutter create nom-du-projet".

2. Une fois que le projet est créé, accédez au répertoire du projet en utilisant la
commande "cd nom-du-projet".

3. Exécutez le projet en utilisant la commande "flutter run". Cela va lancer

l'application sur votre émulateur ou votre appareil connecté.

4. Utilisez un éditeur de code tel que Visual Studio Code ou Android Studio pour
éditer et personnaliser votre application
.
 Introduction
Presentation de l ’arborescence
✓ Le fichier [Link] : c'est le fichier principal de configuration de votre projet. Vous y spécifiez les
dépendances de votre application, les ressources (images, fonts, etc.) et les métadonnées de votre
application (nom, version, auteur, etc.).

✓ Le dossier lib : c'est le dossier qui contient le code source de votre application. C'est là que vous allez créer
vos widgets, vos modèles de données, vos services, etc. Le fichier [Link] se trouve dans ce dossier et il
contient la méthode principale qui est appelée lors du lancement de l'application.

✓ Le dossier android : c'est le dossier qui contient le code source spécifique à Android. Si vous avez besoin
de personnaliser le comportement de votre application sur Android, vous pouvez le faire dans ce dossier.

✓ Le dossier ios : c'est le dossier qui contient le code source spécifique à iOS. Si vous avez besoin de
personnaliser le comportement de votre application sur iOS, vous pouvez le faire dans ce dossier.

✓ Le dossier test : c'est le dossier qui contient les tests unitaires et les tests d'intégration de votre application.
Vous pouvez y écrire des tests pour vérifier le bon fonctionnement de votre application.

✓ Le dossier assets : c'est le dossier qui contient les fichiers binaires (images, polices de caractères, etc.) que
votre application utilise. Les fichiers contenus dans ce dossier sont automatiquement inclus dans
l'application lors de la construction de celle-ci.

✓ Le dossier build : c'est le dossier qui contient les fichiers générés lors de la construction de l'application. Il
.
est créé automatiquement lors de la construction de l'application et ne doit pas être modifié manuellement.

Voilà une présentation rapide des éléments constituant un projet Flutter. Bien entendu, il est important de
comprendre le rôle de chacun de ces éléments pour pouvoir développer efficacement une application Flutter.
 Dart
Metier

Synopsis Dart est un langage de programmation développé par Google, utilisé

pour développer des applications web et mobiles. Dart est un langage
typé statiquement, ce qui signifie que les variables doivent être déclarées
avec un type spécifique avant leur utilisation. Dart prend également en
charge la programmation orientée objet, les fonctions d'ordre supérieur
et les fonctions asynchrones.

Dart prend en charge la programmation orientée objet, ce qui signifie que les
développeurs peuvent encapsuler des données et du code dans des classes, et utiliser
l'héritage et la polymorphie pour créer des hiérarchies de classes. Les classes peuvent
également contenir des méthodes, des propriétés et des constructeurs. En Dart, toutes les
classes héritent de la classe "Object".
 DART
Intro.
✓ Dart est un langage de programmation créé par Google en 2011. Le langage a été conçu pour être utilisé
pour développer des applications Web, des applications mobiles, des applications de bureau et des serveurs.
Il a été présenté au public pour la première fois en 2011, mais a connu une refonte majeure en 2018 avec la
publication de la version 2.0.

✓ Dart est un langage de programmation orienté objet avec une syntaxe similaire à celle de C et C++, mais il est
également influencé par d'autres langages de programmation tels que Java, JavaScript et Python. Dart est
typé statiquement, ce qui signifie que les variables doivent être déclarées avec un type spécifique avant leur
utilisation, mais il prend également en charge le typage dynamique pour les variables lorsque cela est
nécessaire.

✓ L'un des principaux avantages de Dart est son approche de développement rapide et son langage simplifié,
ce qui rend la programmation plus facile et plus intuitive pour les développeurs. Il est également facile à
apprendre et à utiliser pour les développeurs qui viennent d'autres langages de programmation.

✓ En plus de cela, Dart est également conçu pour offrir des performances élevées. Il utilise un système de
compilation Just-In-Time (JIT) pour accélérer l'exécution du code, ainsi qu'un système de compilation Ahead-
Of-Time (AOT) pour produire du code natif optimisé pour les performances.

✓ Depuis sa création, Dart a été utilisé pour développer un certain nombre de projets et d'outils, notamment le
framework de développement mobile Flutter, le framework Web AngularDart, le système de gestion de
paquets Pub, et le serveur Web Dart, entre autres.

✓ En résumé, Dart est un langage de programmation moderne et polyvalent, conçu pour offrir une expérience
de développement rapide, une performance élevée et une syntaxe simplifiée. Avec l'utilisation croissante de
Flutter et d'autres outils basés sur Dart, le langage continue de gagner en popularité et de devenir une
option de plus en plus populaire pour les développeurs.
 DART
Les variables.
✓ Les variables sont des espaces réservés en mémoire qui stockent des valeurs. En Dart, les
variables peuvent être déclarées en utilisant le mot-clé 'var', suivi du nom de la variable et de
sa valeur.

Types de données.
✓ Dart est un langage typé, ce qui signifie que chaque variable doit avoir un type de données
spécifique. Les types de données de base en Dart sont :

✓ Les nombres
✓ Les nombres entiers (int)
✓ Les nombres à virgule flottante (double)
✓ Les boolean : bool
✓ Les chaînes de caractères : String
Exemple
 DART
Types de données.
✓ Dart est un langage typé, ce qui signifie que chaque variable doit avoir un type de données
spécifique. Les types de données de base en Dart sont :

✓ Les listes : List

✓ Les maps : Map
✓ Les sets : Set

✓ Enfin, il est important de noter que les types de données en Dart sont dynamiques, ce qui
signifie que le type de données d'une variable peut changer pendant l'exécution du
programme si une valeur d'un type différent est affectée à la variable.

✓ En résumé, les variables et types de données sont des éléments essentiels de la

programmation en Dart. Il est important de comprendre comment déclarer et utiliser ces
éléments pour créer des programmes fonctionnels en Dart.

Exemple
 DART
Les instructions conditionnelles.
✓ Les instructions conditionnelles sont utilisées pour exécuter un bloc de code en fonction
d'une condition spécifiée. En Dart, il existe deux types d'instructions conditionnelles : if-else
et switch-case.

✓ L'instruction if-else :
✓ L'instruction if-else est utilisée pour exécuter un bloc de code si une condition est vraie
et un autre bloc de code si la condition est fausse.

✓ L'instruction switch-case :
✓ L'instruction switch-case est utilisée pour exécuter différents blocs de code en
fonction de différentes valeurs d'une variable.
Exemple
 DART
Les instructions de boucles.
✓ Les boucles : Les boucles sont utilisées pour exécuter un bloc de code plusieurs fois. En Dart,
il existe trois types de boucles : while, do-while et for.

✓ La boucle while : La boucle while est utilisée pour exécuter un bloc de code tant qu'une
condition est vraie.

✓ La boucle do-while : La boucle do-while est similaire à la boucle while, sauf qu'elle exécute
d'abord le bloc de code, puis vérifie la condition.

✓ La boucle for : La boucle for est utilisée pour exécuter un bloc de code un nombre spécifié
de fois.
Exemple
 DART
Les instructions de saut .
✓ Les instructions de saut sont utilisées pour interrompre une boucle ou une instruction
conditionnelle et passer à la suivante. En Dart, il existe deux types d'instructions de saut :
break et continue.

✓ L'instruction break : L'instruction break est utilisée pour interrompre une boucle ou une
instruction conditionnelle.

✓ L'instruction continue : L'instruction continue est utilisée pour passer à l'itération suivante
d'une boucle.

Exemple
Exemple
DART
Les fonctions/methodes.
✓ Fonctions : Les fonctions sont utilisées pour exécuter un bloc de code plusieurs fois en
utilisant un nom spécifié et un ensemble d'arguments. En Dart, les fonctions sont des objets
de première classe, ce qui signifie qu'elles peuvent être assignées à une variable, transmises
en tant qu'arguments à une autre fonction et renvoyées en tant que valeur de retour.
✓ Dans cet exemple, nous avons créé une fonction appelée "somme" qui prend deux
arguments de type "int" et renvoie leur somme. Nous avons ensuite appelé cette fonction
dans la fonction "main" et stocké le résultat dans une variable "result".

✓ Méthodes : Les méthodes sont similaires aux fonctions, sauf qu'elles sont associées à une
classe ou à un objet spécifique. Elles sont utilisées pour exécuter des actions sur des objets
ou pour renvoyer des informations sur des objets.
✓ Dans cet exemple, nous avons créé une classe appelée "Rectangle" avec deux propriétés :
largeur et hauteur. Nous avons également créé une méthode appelée "calculerSurface" qui
renvoie la surface du rectangle en multipliant la largeur par la hauteur. Nous avons ensuite
créé un objet de la classe "Rectangle" dans la fonction "main" et appelé la méthode
"calculerSurface" sur cet objet.

✓ En résumé, les fonctions et les méthodes sont des éléments clés de la programmation en
Dart. Les fonctions sont utilisées pour exécuter des blocs de code plusieurs fois en utilisant
un nom spécifié et un ensemble d'arguments, tandis que les méthodes sont similaires aux
fonctions, mais sont associées à une classe ou à un objet spécifique.
 La structure minimale
d’une page HTML
✓Dart prend en charge la programmation orientée objet, ce qui signifie que les développeurs peuvent encapsuler des
données et du code dans des classes, et utiliser l'héritage et la polymorphie pour créer des hiérarchies de classes. Les
classes peuvent également contenir des méthodes, des propriétés et des constructeurs. En Dart, toutes les classes héritent
de la classe "Object«

✓Une interface définit la syntaxe à laquelle toute entité doit adhérer. Les interfaces définissent un ensemble de méthodes
disponibles sur un objet. Dart n'a pas de syntaxe pour déclarer les interfaces. Les déclarations de classe sont elles-mêmes
des interfaces dans Dart.
 DART/POO
Les classes.
✓ Classes et objets : La POO en Dart repose sur les classes et les objets. Une classe est une
structure de données qui définit des propriétés et des méthodes. Un objet est une instance
d'une classe.

✓ Dans cet exemple, nous avons créé une classe appelée "Personne" avec deux propriétés :
nom et prénom. Nous avons également créé une méthode appelée "afficherNomComplet"
qui affiche le nom complet de la personne. Nous avons ensuite créé un objet de la classe
"Personne" dans la fonction "main" et appelé la méthode "afficherNomComplet" sur cet
objet.
Exemple
 DART/POO
Les Encapsulation .
✓ L'encapsulation est une technique qui consiste à masquer les détails d'implémentation d'une
classe aux utilisateurs de la classe. En Dart, l'encapsulation est réalisée en utilisant des
propriétés et des méthodes privées.

✓ Dans cet exemple, nous avons créé une classe appelée "CompteBancaire" avec une propriété
privée "_solde". Nous avons également créé des méthodes pour déposer et retirer de
l'argent du compte, ainsi qu'une méthode publique "solde" pour obtenir le solde actuel du
compte. Nous avons ensuite créé un objet de la classe "CompteBancaire" dans la fonction
"main" et appelé les méthodes pour déposer et retirer de l'argent du compte, puis affiché le
solde actuel.

Exemple
 DART/POO
Héritage .
✓ L'héritage est une technique de POO qui permet à une classe d'hériter des propriétés et des
méthodes d'une autre classe. En Dart, l'héritage est réalisé en utilisant le mot-clé "extends".

✓ Dans cet exemple, nous avons créé une classe "Animal" avec une méthode "parler". Nous
avons ensuite créé deux classes qui héritent de "Animal" : "Chien" et "Chat".

Exemple
 DART/POO
Abstraction .
✓ L'abstraction est une technique de POO qui consiste à définir une classe de base avec des
méthodes et des propriétés génériques qui peuvent être héritées et implémentées par des
sous-classes. L'abstraction permet de masquer les détails d'implémentation complexes des
sous-classes aux utilisateurs de la classe de base.

Exemple
 DART/POO
Abstraction .
✓ Le polymorphisme est une technique de POO qui permet à des objets de différentes classes de
répondre aux mêmes messages (c'est-à-dire aux mêmes méthodes ou propriétés). En Dart, le
polymorphisme est réalisé grâce à l'héritage et à l'abstraction.

✓ Dans cet exemple, nous avons créé une classe abstraite "Animal" avec une méthode abstraite
"parler". Nous avons ensuite créé deux sous-classes qui héritent de "Animal" : "Chien" et "Chat".
Exemple Chacune de ces sous-classes implémente la méthode "parler" de manière spécifique à l'animal.
 DART
Comment référencer un autre fichier dans Dart ?
✓ Supposons que notre fichier principal s'appelle [Link] et que nous souhaitions ajouter un
autre fichier au projet. Donc, pour cela, nous devons créer un autre fichier et ajouter une
référence à ce fichier dans notre [Link] afin que nous puissions utiliser toutes les
fonctionnalités de ce fichier.

1. Créez votre fichier à référencer, donnez-lui un nom de fichier et l'extension devrait être .dart
Exemple
2. Accédez à votre fichier principal où vous souhaitez faire référence au fichier ci-dessus .

3. Maintenant, commencez à écrire « import » en haut de votre fichier

Remarque : Si votre fichier se trouve dans un autre répertoire ou dans un package, vous devez
également inclure le chemin d'accès à ce fichier dans le guillemet simple. Comme dans ce cas,
[Link] a été inclus, nous avons donc mentionné le nom du package auquel appartient le
fichier comme ceci :
 Widgets Flutter
UI

Synopsis Les widgets sont les éléments de base qui constituent l'interface
utilisateur de toute application Flutter. Tout ce qui peut être vu ou
manipulé dans l'application est un widget. Flutter fournit une grande
variété de widgets préconstruits pour créer des interfaces utilisateur
riches et interactives, ainsi que la possibilité de créer des widgets
personnalisés pour répondre aux besoins spécifiques d'une application.

Flutter fournit deux types de widgets : Stateless et Stateful.

[Link] Widgets: Les widgets Stateless sont des widgets qui ne peuvent pas être
modifiés une fois créés. Ils ont une représentation immuable et sont souvent utilisés pour
des éléments de l'interface utilisateur qui ne changent pas. Par exemple, les icônes, les
boutons, les textes, les images, etc.

[Link] widgets Stateful sont des widgets qui peuvent être modifiés après leur création. Ils
ont une représentation mutable et sont souvent utilisés pour des éléments de l'interface
utilisateur qui changent en réponse à une interaction utilisateur ou à des changements de
données.
 Widgets
Types de widgets : Stateless
✓ Les widgets Stateless sont des widgets qui ne peuvent pas être modifiés une fois créés. Ils ont
une représentation immuable et sont souvent utilisés pour des éléments de l'interface
utilisateur qui ne changent pas.

✓ Par exemple, les icônes, les boutons, les textes, les images, etc.
Exemple
 Widgets
Types de widgets : StateFul
✓ Les widgets Stateful sont des widgets qui peuvent être modifiés après leur création. Ils ont une
représentation mutable et sont souvent utilisés pour des éléments de l'interface utilisateur qui
changent en réponse à une interaction utilisateur ou à des changements de données.

Exemple
 Widgets
Création de widgets personnalisés
✓ Flutter permet de créer des widgets personnalisés pour répondre aux besoins spécifiques d'une
application. La création d'un widget personnalisé se fait en héritant d'un widget existant et en
surchargeant certaines de ses méthodes.

✓ Ce widget personnalisé prend deux paramètres : l'emplacement de l'image à afficher et le texte

Exemple à afficher. Il crée une colonne contenant l'image et le texte.
Widgets
Cycle de vie d’un widget
Dans Flutter, le cycle de vie d'un widget correspond à la série d'événements qui se produisent
depuis la création du widget jusqu'à sa destruction. Comprendre le cycle de vie des widgets est
important pour optimiser les performances de votre application Flutter et pour garantir que vos
widgets se comportent correctement. Voici les différentes étapes du cycle de vie d'un widget, dans
l'ordre:

1. createState(): Cette méthode est appelée lorsque le widget est d'abord instancié. Elle renvoie
une instance de la classe d'état (State) correspondante au widget.
2. initState(): Cette méthode est appelée une fois lorsque le widget d'état est inséré dans l'arbre
des widgets. Vous pouvez utiliser cette méthode pour effectuer toute initialisation qui dépend
de l'emplacement du widget dans l'arbre des widgets.
3. didChangeDependencies(): Cette méthode est appelée immédiatement après initState(), et
chaque fois que les dépendances du widget changent. Vous pouvez utiliser cette méthode
pour effectuer toute initialisation qui dépend de widgets hérités ou d'autres dépendances.
4. build(): Cette méthode est appelée chaque fois que le widget doit être reconstruit, ce qui peut
arriver plusieurs fois pendant la durée de vie du widget. Vous devez remplacer cette méthode
pour définir la mise en page et l'apparence de votre widget.
5. didUpdateWidget(): Cette méthode est appelée chaque fois que le widget est reconstruit avec
des arguments de constructeur différents. Vous pouvez utiliser cette méthode pour comparer
les instances de widget anciennes et nouvelles et effectuer toutes les mises à jour nécessaires.
6. setState(): Cette méthode est appelée chaque fois que vous souhaitez mettre à jour l'état du
widget. Elle planifie une reconstruction du widget.
7. deactivate(): Cette méthode est appelée immédiatement avant qu'un widget d'état ne soit
supprimé de l'arbre des widgets. Vous pouvez utiliser cette méthode pour nettoyer les
ressources allouées dans initState() ou didChangeDependencies().
8. dispose(): Cette méthode est appelée lorsque le widget d'état est supprimé de l'arbre des
widgets. Vous pouvez utiliser cette méthode pour nettoyer les ressources allouées dans
initState() ou didChangeDependencies(), ou pour annuler tout minuteur ou flux actif.
 Widgets
Les widgets principaux à connaître
✓ Scaffold pour fournir une structure de base à notre application, avec une AppBar et un body.

✓ Padding pour ajouter des marges autour des éléments de notre liste.

✓ Text : pour afficher du texte à l'écran.

✓ Container : pour dessiner un conteneur rectangulaire.

✓ Row et Column : pour organiser les widgets en rangées horizontales et verticales,

respectivement.

✓ Image : pour afficher des images à l'écran.

✓ ListView et GridView : pour afficher des listes et des grilles d'éléments.

✓ TextField : pour permettre à l'utilisateur de saisir du texte.

✓ RaisedButton et FlatButton : pour créer des boutons cliquables.

✓ Expanded pour permettre à la colonne de texte de prendre autant de place que possible à côté
de l'image.

✓ Icon : pour afficher des icônes.

Il existe de nombreux autres widgets utiles en Flutter, mais ceux-ci constituent une bonne base
pour commencer.
 Widgets
Utilisation des widgets pour réaliser les interfaces
✓ Les widgets sont les blocs de construction de l'interface utilisateur dans Flutter. Ils sont utilisés
pour construire des éléments d'interface tels que des boutons, des champs de saisie, des listes,
etc. En utilisant différents types de widgets, il est possible de créer des interfaces utilisateur très
complexes et riches.

✓ Pour créer une interface utilisateur dans Flutter, il faut

✓ d'abord décider quels widgets sont nécessaires

✓ organiser ces widgets en une arborescence de widgets, également appelée arbre de

widgets. L'arbre de widgets est une structure hiérarchique dans laquelle chaque widget
est un nœud. L'arbre de widgets peut être représenté par un arbre DOM, comme dans le
web.

✓ Les widgets sont divisés en deux catégories principales : les widgets structurels et les widgets
de présentation. Les widgets structurels sont utilisés pour organiser les éléments d'interface
utilisateur et pour définir la mise en page. Les widgets de présentation sont utilisés pour définir
l'apparence des éléments d'interface utilisateur.
Widgets
Thèmes et personnalisation

✓ Flutter offre des thèmes prédéfinis qui peuvent être utilisés pour personnaliser
l'apparence des widgets. Les thèmes peuvent être utilisés pour définir les couleurs,
les polices, les tailles et autres propriétés visuelles des widgets.

✓ Il est également possible de personnaliser les thèmes en utilisant la classe

ThemeData. Cette classe permet de définir des thèmes personnalisés en fonction
des besoins de l'application. Par exemple, il est possible de définir un thème
sombre pour une application de lecture de nuit.

✓ Dans cet exemple, nous avons créé deux couleurs personnalisées, primaryColor et
secondaryColor, qui sont utilisées dans le thème de l'application. Le primaryColor
est utilisé comme couleur principale de l'application, tandis que le secondaryColor
est utilisé comme couleur d'accentuation. De plus, nous avons personnalisé le
textTheme pour que le headline6 ait la couleur de notre primaryColor.

✓ Ensuite, nous avons utilisé ces couleurs personnalisées dans notre thème en les
passant comme arguments à ThemeData. Enfin, nous avons utilisé le textTheme
personnalisé pour le texte dans le corps de notre application en utilisant
[Link](context).textTheme.headline6.
 Widgets
Widgets de grille (Grid)
✓ Les widgets de grille sont utilisés pour organiser les éléments d'interface utilisateur en une
grille. Flutter offre deux types de widgets de grille : le GridView et le Wrap.

✓ Le GridView est utilisé pour afficher des éléments d'interface utilisateur dans une grille
régulière. Les éléments sont disposés en rangées et en colonnes. Il est possible de spécifier le
nombre de colonnes et de rangées, ainsi que la taille des éléments.

✓ Le Wrap est utilisé pour afficher des éléments d'interface utilisateur dans une grille irrégulière.
Les éléments sont disposés en fonction de l'espace disponible sur l'écran. Il est possible de
spécifier le nombre de colonnes et la taille des éléments.

✓ En utilisant les widgets de grille, il est possible de créer des interfaces utilisateur complexes et
riches en données, telles que des tableaux de bord, des galeries d'images, des calendriers, etc.
 Widgets
Exemple Complet
 Widgets
Exemple Complet
 Routage Flutter
UI

Synopsis Le routage et la navigation sont des éléments importants dans le

développement d'applications mobiles avec Flutter. Ils permettent de
naviguer entre différentes pages de l'application..

Le routage se réfère au processus de détermination de l'emplacement et de la disposition

des différents widgets dans une application Flutter. Il permet à l'utilisateur de passer
d'une page à une autre en cliquant sur un bouton ou en effectuant une autre action.
 Routage
Introduction

✓ Le routage (ou navigation) dans une application Flutter consiste à permettre à l'utilisateur de
naviguer entre différentes pages (ou écrans) de l'application en cliquant sur des boutons, des
liens ou d'autres éléments interactifs.

✓ Le routage permet également de gérer la logique de navigation de l'application, par exemple en

définissant la hiérarchie des pages et en déterminant quelles pages doivent être empilées
(poussées) sur la pile de navigation et quelles pages doivent être retirées (pop) de cette pile.

✓ Le routage peut être effectué en utilisant différentes approches et différentes classes de

navigation, telles que la navigation push et pop, la navigation par onglets ou la navigation par
côte à côte.
 Routage
Types
Il existe plusieurs types de navigation dans Flutter :

✓ Navigation par onglets (tabs) : il s'agit d'un mode de navigation qui permet de basculer entre
plusieurs onglets. Chaque onglet peut contenir une page différente.

✓ Navigation par piles (stack) : elle permet d'empiler plusieurs pages les unes sur les autres.
Lorsque l'utilisateur quitte une page, la page précédente dans la pile est affichée.

✓ Navigation latérale (drawer/sidemenu) : elle permet d'ouvrir un menu latéral qui contient
des liens vers d'autres pages de l'application.

Cet exemple crée une interface à

onglets avec trois onglets différents.
Lorsqu'un utilisateur clique sur un
onglet, la page correspondante est
affichée. Chaque page est
représentée par un widget différent.
 Routage
Exemple Stack Nagivation
✓ Dans cet exemple, nous avons trois pages (HomePage, SecondPage et ThirdPage) qui sont empilées les
unes sur les autres. Lorsque l'utilisateur appuie sur le bouton "Go to second page" de la page d'accueil,
nous naviguons vers la SecondPage. De même, lorsque l'utilisateur appuie sur le bouton "Go to third
page" de la SecondPage, nous naviguons vers la ThirdPage.

✓ Pour revenir en arrière dans la pile, nous utilisons la méthode [Link](context).

✓ Dans la ThirdPage, la méthode [Link](context, [Link]('/')) est utilisée

pour fermer toutes les pages empilées sur la pile de navigation jusqu'à atteindre la première page de
l'application, qui est la page d'accueil. Cela signifie que toutes les pages qui ont été empilées sur la pile
de navigation depuis la page d'accueil seront supprimées de la pile et la page d'accueil sera affichée.
 Routage
Concept à connaitre !
Voici les principaux concepts à connaître concernant la navigation sur Flutter :

✓ Routes : une route représente une page ou une vue dans une application. Les routes sont définies dans le fichier
MaterialApp en utilisant le widget MaterialApp ou CupertinoApp.

✓ Navigator : le Navigator gère la pile de navigation de l'application. Il permet de naviguer vers une nouvelle route, de
revenir à la route précédente et de gérer la pile de navigation.

✓ Push : pour naviguer vers une nouvelle route, vous pouvez utiliser la méthode [Link]. Cette méthode permet
de pousser une nouvelle route sur la pile de navigation.

✓ Pop : pour revenir à la route précédente, vous pouvez utiliser la méthode [Link]. Cette méthode permet de
retirer la route actuelle de la pile de navigation.

✓ Modal : les routes modales sont des routes qui s'affichent par-dessus la route actuelle, sans pour autant retirer cette
dernière de la pile de navigation. Les routes modales sont utiles pour les fenêtres de dialogue, les sélecteurs de
date/heure, etc.

✓ Arguments : vous pouvez passer des arguments à une nouvelle route en utilisant le paramètre "arguments" de la
méthode [Link].

✓ Gestion de la pile de navigation : vous pouvez gérer la pile de navigation en utilisant les méthodes
[Link], [Link], [Link], etc.

✓ Navigation en arrière-plan : lorsque vous naviguez vers une nouvelle route, l'application est mise en arrière-plan. Vous
pouvez utiliser le widget WillPopScope pour intercepter le retour à l'arrière et exécuter une action spécifique.

✓ Navigation avec des onglets : pour naviguer entre différentes vues dans une même page, vous pouvez utiliser le
widget TabBar ou le widget BottomNavigationBar.
 Gestion d'état Flutter
UI

Synopsis La gestion d'état est un aspect important du développement

d'applications Flutter. L'état d'une application est l'ensemble des
données qui définissent l'état actuel de l'interface utilisateur. Lorsque
l'état de l'application change, l'interface utilisateur doit également être
mise à jour pour refléter ce changement.

La gestion d'état est un concept clé en développement d'applications, notamment en

Flutter. Elle permet de gérer et de maintenir les données de l'application tout au long de
son cycle de vie. La gestion d'état en Flutter se fait via des widgets d'état, des modèles de
gestion d'état ou des bibliothèques tierces.
Gestion d'état
Introduction à la gestion d'état en Flutter
✓ En Flutter, l'état fait référence aux données qui sont utilisées pour afficher les éléments de
l'interface utilisateur de l'application. L'état est généralement stocké dans un objet appelé
"State" qui est lié à un widget particulier.

✓ Par exemple, si vous avez un widget de bouton qui doit afficher différentes couleurs en fonction
de l'état de l'application (par exemple, lorsqu'il est enfoncé ou relâché), vous stockerez les
informations sur l'état de ce widget dans un objet State.

✓ L'utilisation de l'état est importante car elle permet à votre application d'être réactive et de
mettre à jour l'interface utilisateur en temps réel en fonction des actions de l'utilisateur ou des
changements dans l'application. En utilisant la gestion d'état appropriée, vous pouvez créer des
applications qui semblent fluides et réactives, ce qui améliore l'expérience utilisateur.

✓ La gestion d'état en Flutter peut être effectuée de plusieurs manières, telles que la gestion
d'état interne avec le widget StatefulWidget et la gestion d'état globale avec des packages tels
que Provider ou Riverpod ou Bloc.
Gestion d'état
Gestion d'état avec setState
✓ La gestion d'état avec setState est une des méthodes les plus courantes pour gérer l'état dans
une application Flutter. Elle consiste à déclarer une variable d'état dans la classe d'un widget et
à la mettre à jour à l'aide de la méthode setState pour redessiner le widget avec les nouvelles
valeurs de l'état.
Gestion d'état
Gestion d'état avec setState
✓ Dans cet exemple, nous avons créé un widget CounterWidget qui maintient un compteur
_counter et une méthode _incrementCounter qui utilise la méthode setState pour mettre à
jour la valeur de _counter. Nous utilisons ensuite la valeur de _counter pour afficher le nombre
de clics sur le bouton flottant FloatingActionButton.

✓ Lorsque l'utilisateur appuie sur le bouton flottant, la méthode _incrementCounter est appelée,
ce qui met à jour la valeur de _counter à l'aide de setState. Flutter détecte le changement d'état
et appelle la méthode build pour redessiner le widget avec les nouvelles valeurs de _counter.

✓ Ceci est un exemple simple pour illustrer la gestion d'état avec setState. Dans des applications
plus complexes, il est souvent préférable d'utiliser des méthodes plus avancées telles que
Riverpod ou Provider pour gérer l'état de manière plus efficace.
Gestion d'état
comment partager les donnees d'etat entre deux widgets ?
✓ Il y a plusieurs façons de partager des données d'état entre deux widgets dans Flutter,
selon le niveau de complexité de l'application.

✓ Utiliser des callbacks : La méthode la plus simple consiste à passer une fonction callback
de parent en enfant et à la rappeler dans l'enfant avec les données mises à jour.

✓ Utiliser le constructeur de widget : Il est possible de passer des données d'état

directement via le constructeur d'un widget. Si un widget enfant nécessite une certaine
donnée d'état, vous pouvez la transmettre via le constructeur.

✓ Utiliser InheritedWidget : InheritedWidget est un widget spécial qui peut être utilisé
pour transmettre des données entre plusieurs widgets. Il permet de créer un widget
commun qui contient des données partagées et de les transmettre à ses enfants.

✓ Utiliser Provider : Provider est un package de gestion d'état qui facilite grandement la
transmission de données entre différents widgets. Il permet de créer une variable globale
partagée et d'y accéder facilement depuis n'importe quel widget de l'arborescence de
widgets.
 La structure minimale
d’une page HTML
✓Riverpod est une bibliothèque de gestion d'état pour Flutter. Il permet de gérer l'état de manière simple et efficace.
Riverpod utilise le concept de provider pour fournir des données à l'interface utilisateur et pour gérer l'état de l'application.

✓La bibliothèque Riverpod est construite sur la bibliothèque Provider de Flutter, qui fournit un moyen de gérer l'état de
l'application en utilisant des widgets.

✓Cependant, Riverpod ajoute des fonctionnalités avancées, telles que la prise en charge de la réactivité, la gestion d'état non
lié à l'interface utilisateur et la prise en charge de l'injection de dépendances.
 Riverpod
Introduction
✓ Riverpod est une bibliothèque de gestion d'état pour Flutter qui a été créée pour résoudre
certains des problèmes rencontrés avec la bibliothèque de gestion d'état intégrée de Flutter,
c'est-à-dire "setState" et "InheritedWidget".

✓ Elle a été créée pour améliorer la gestion de l'état dans les applications Flutter en proposant
une approche plus déclarative.

✓ Riverpod est plus performant que "setState" et "InheritedWidget".

✓ Elle facilite la gestion de l'état dans les applications Flutter en proposant une approche plus
déclarative.

✓ Riverpod facilite la gestion de plusieurs types d'états tels que le statut de l'application,
l'authentification de l'utilisateur, les préférences de l'utilisateur, etc.

✓ Riverpod utilise une approche de gestion de l'état basée sur la portée.

✓ Il y a deux types de portées dans Riverpod :
✓ "ProviderScope" : portée globale qui est accessible dans toute l'application.
✓ "ScopedProvider" : portée locale qui est accessible uniquement dans la partie de
l'application où elle est définie.
Riverpod
Comment utiliser Riverpod ?
✓ Pour utiliser Riverpod, vous devez ajouter la bibliothèque "riverpod" à votre fichier
"[Link]".

✓ Vous pouvez créer un "Provider" pour gérer votre état en utilisant la méthode
"Provider" ou "ScopedProvider" de Riverpod.

✓ Pour accéder à la valeur d'un "Provider", vous pouvez utiliser la méthode "watch" de
Riverpod.

✓ Vous pouvez également modifier la valeur d'un "Provider" en utilisant la méthode

"read" de Riverpod.

✓ Dans cet exemple, nous créons un StateProvider nommé counterProvider avec une
valeur initiale de 0. Ensuite, nous utilisons ProviderScope pour envelopper notre
application et rendre counterProvider disponible dans l'ensemble de l'application.

✓ Dans le build de MyApp, nous affichons un bouton flottant qui, lorsqu'il est pressé,
incrémente la valeur de counterProvider. La valeur de counterProvider est ensuite
affichée dans le texte en utilisant le widget Consumer.

✓ Notez que watch est utilisé pour écouter les changements de la valeur de
counterProvider, et [Link] est utilisé pour modifier la valeur. Cette séparation
permet une meilleure gestion des performances en n'écoutant que les changements
dont nous avons besoin.
 Riverpod
Comprendre le concept de provider
✓ Le concept de Provider sur Riverpod est une méthode de gestion d'état dans les applications Flutter, qui
permet de partager des données entre différents widgets de manière efficace et performante. Il est
basé sur les principes de l'injection de dépendances, ce qui signifie que les widgets n'ont pas besoin de
connaître directement l'état global de l'application, mais qu'ils peuvent le récupérer à partir d'un objet
Provider qui leur est fourni.

✓ Les Providers peuvent être créés pour fournir n'importe quel type de données à une application, telles
que des objets, des listes, des fonctions, etc. Ils peuvent également être organisés en arbre pour fournir
différents niveaux d'état à différentes parties de l'application.

✓ Il existe deux types de Providers dans Riverpod : les Providers d'instance et les Providers de valeur.
✓ Les Providers d'instance sont utilisés pour fournir des objets qui sont créés une seule fois,
✓ les Providers de valeur sont utilisés pour fournir des valeurs qui peuvent changer au fil du temps.

✓ Pour utiliser un Provider, il est nécessaire de le déclarer dans la partie supérieure de l'arbre des widgets,
afin qu'il puisse être accessible par les widgets enfants. Ensuite, il est possible de récupérer la valeur du
Provider dans les widgets enfants à l'aide de la méthode Consumer, qui met à jour automatiquement les
widgets chaque fois que la valeur du Provider change.
Riverpod
Comprendre le concept de provider: Exemple
✓ Supposons que nous avons une application de compteur simple qui a deux pages: une
page d'accueil avec un compteur et une page de configuration où l'utilisateur peut
choisir le nombre initial pour le compteur.
✓ Créer un dossier nommé "providers" pour stocker les providers. Dans ce dossier,
créez un fichier nommé "counter_provider.dart".
✓ Dans "counter_provider.dart", importez les bibliothèques nécessaires et créez
une classe nommée "CounterProvider" qui étend "ChangeNotifier".

✓ Dans la page d'accueil, importez le package Riverpod, le fichier counter_provider.dart et

créez une instance de CounterProvider en utilisant "[Link]".
Riverpod
Comprendre le concept de provider: Exemple
✓ Dans la page de configuration, importez également les mêmes
bibliothèques et créez une instance de CounterProvider en
utilisant "[Link]". Ensuite, utilisez un formulaire pour
permettre à l'utilisateur de saisir un nombre initial pour le
compteur. Lorsque l'utilisateur appuie sur le bouton "Enregistrer",
la valeur saisie est définie comme la nouvelle valeur du compteur
à l'aide de "[Link]".
Riverpod
MultiProvider
✓ Le concept de MultiProvider est étroitement lié au concept de Provider dans
Riverpod. En effet, MultiProvider est un widget fourni par Riverpod qui permet de
regrouper plusieurs providers et de les fournir à plusieurs widgets descendants.

✓ Voici un exemple simple pour comprendre l'utilisation de MultiProvider. Supposons

que nous ayons deux providers, CounterProvider et UserProvider, qui stockent
respectivement le nombre de clics sur un bouton et le nom de l'utilisateur connecté.
Nous voulons fournir ces deux providers à deux widgets descendants différents :
CounterWidget et UserWidget.

✓ Tout d'abord, définissons nos providers ensuite, créons nos widgets CounterWidget
et UserWidget qui affichent respectivement le nombre de clics sur un bouton et le
nom de l'utilisateur connecté

✓ Enfin, créons notre widget principal MyApp qui utilise MultiProvider pour fournir
nos deux providers à nos deux widgets descendants

✓ Notez que chaque provider doit être enveloppé dans un ProviderScope. Dans cet
exemple, nous fournissons CounterWidget et UserWidget en tant qu'enfants de
ProviderScope, ce qui signifie que ces widgets peuvent accéder aux valeurs stockées
dans les providers. Ensuite, nous enveloppons MyHomePage dans MaterialApp
pour créer notre application.

✓ En résumé, MultiProvider est un outil pratique pour fournir plusieurs providers à

plusieurs widgets descendants en même temps. Cela permet de réduire la
complexité du code et de faciliter la gestion de l'état de l'application.
 Appels API Externes

Dans ce chapitre, nous allons apprendre différentes méthodes pour les

appels d'API. REST et GraphQL sont des protocoles de communication
Synopsis client-serveur utilisés pour la création d'API. REST est basé sur l'utilisation
des verbes HTTP tels que GET, POST, PUT, DELETE pour effectuer des
opérations CRUD sur des ressources. GraphQL, quant à lui, permet de
récupérer uniquement les données dont on a besoin en envoyant des
requêtes spécifiques au serveur.

La mise en place d'une API REST ou GraphQL dépend du langage et

du framework que vous utilisez côté serveur. En 2012, l'ingénieur
Facebook Nick Schrock a commencé à travailler sur un petit
prototype pour faciliter l'abandon d'une ancienne API partenaire
non prise en charge qui alimentait le fil d'actualité Facebook
actuel. À l'époque, cela s'appelait « SuperGraph ». Avance rapide
jusqu'à aujourd'hui et SuperGraph a contribué à façonner le
langage de requête open source GraphQL, qui a été une grande
partie du mot à la mode ces derniers temps.
 API
Intro
❖ Une API est un ensemble de définitions et de protocoles permettant de créer et
d'intégrer des fonctions d'application. Il est parfois appelé contrat entre un
fournisseur d'informations et un utilisateur d'informations, établissant le contenu
requis du consommateur (l'appel) et le contenu requis par le producteur (la
réponse).

❖ Les bases de données et les services Web ont ce qu'on appelle une API (Application
Programming Interface) avec laquelle les applications peuvent communiquer via
une URL. En d'autres termes, une API permet aux applications de récupérer ou
d'envoyer des données vers et depuis des bases de données ou des services Web.

❖ Une API REST (également appelée API RESTful) est une interface de programmation
d'applications (API ou API Web) conforme aux contraintes du style architectural
REST et permettant une interaction avec les services Web RESTful. REST signifie
REpresentational State Transfer et a été créé par l'informaticien Roy Fielding.

❖ GraphQL est un langage de requête pour les API et un environnement d'exécution

pour répondre à ces requêtes avec vos données existantes . En termes simples,
GraphQL est une alternative à REST alors qu'avec REST, l’on collecte généralement
.
des données à partir d'une série de requetes , GraphQL permet au développeur
d'envoyer une seule requête au serveur qui décrit les besoins exacts en données.
 API
REST API : DIO vs http
❖ DIO et http sont deux packages de Flutter qui permettent d'effectuer des requêtes
HTTP vers des API REST. Voici une présentation de ces deux packages :

❖ DIO est une bibliothèque HTTP puissante et facile à utiliser pour Dart. Elle a été
conçue pour être facilement étendue et personnalisable, tout en étant simple à
utiliser pour les développeurs. DIO prend en charge les fonctions telles que les
interceptions de requêtes, la gestion des cookies, les demandes multipartes, la
gestion des erreurs et bien plus encore.

❖ Pour utiliser DIO, il faut ajouter le package dans le fichier [Link] et

l'importer dans le fichier source

❖ HTTP est un package HTTP de base pour Flutter qui fournit une interface simple et
facile à utiliser pour effectuer des requêtes HTTP. Le package prend en charge les
requêtes GET, POST, PUT, DELETE et PATCH et permet également de personnaliser
les en-têtes HTTP.

❖ Pour utiliser HTTP, il faut ajouter le package dans le fichier [Link] et

l'importer dans
.
❖ Les deux packages ont leurs avantages et leurs inconvénients. DIO est plus puissant
et offre plus de fonctionnalités, mais il est également plus complexe à utiliser. HTTP
est plus simple et plus facile à utiliser, mais il ne dispose pas de toutes les
fonctionnalités de DIO. En résumé, DIO est recommandé pour les projets de grande
envergure et les API complexes, tandis que HTTP est recommandé pour les projets
simples et les API simples.
 API
REST API : DIO avec Riverpod (Exemple)
❖ on peut créer un fichier api_service.dart pour gérer les appels à l’API

❖ Ensuite, on peut créer un provider pour le service d'API

❖ on peut créer un provider pour les tâches (todos) qui dépend du service d’API

❖ Enfin, dans la page où on veut afficher la liste des tâches, on peut utiliser le
provider todosProvider pour afficher les données récupérées depuis l'API

❖ Notez que nous utilisons Consumer pour accéder au provider et nous avons
également utilisé la méthode when pour gérer différents états (data, loading, error)
de la récupération des données.

.
 API
Pour commencer à ajouter GraphQL à notre application
Graphql : intro
✓ GraphQL est une technologie de requête et de manipulation
de données qui permet aux clients de spécifier exactement les
données dont ils ont besoin et de recevoir uniquement ces
données. Contrairement aux API REST traditionnelles, où
chaque point de terminaison renvoie une quantité fixe de
données, GraphQL permet aux clients de définir les données
qu'ils souhaitent et d'obtenir ces données en un seul appel.

✓ L'interopérabilité avec GraphQL est possible en utilisant des

bibliothèques telles que graphql_flutter qui permettent
d'interroger les données de manière asynchrone.

✓ Graphql utilise deux verbes pour l’echange des requetes :

✓ Les requetes (query) afin de recuperer des donnees du
serveur .

✓ Les mutateurs ( mutation) afin de modifier (creer ,

modifier, supprimer) les donnees du serveur.
 API
Pour commencer à ajouter GraphQL à notre application
Graphql : integration
✓ Voici les étapes générales pour l'intégration de GraphQL dans une
application Flutter :

✓ Définir le schéma GraphQL : définir les types de données, les

champs et les relations entre les types de données dans le schéma
GraphQL.
✓ Écrire les requêtes GraphQL : les requêtes GraphQL définissent les
données que l'application demande à l'API GraphQL.
✓ Configurer l'API GraphQL : configurer l'API GraphQL pour traiter les
requêtes envoyées par l'application.
✓ Utiliser la bibliothèque graphql_flutter pour effectuer des requêtes :
en utilisant cette bibliothèque, nous pouvons interroger l'API GraphQL
à partir de l'application et recevoir les données demandées.

✓ L'intégration de GraphQL peut être plus complexe que

. celle de REST en
raison de la nécessité de définir un schéma GraphQL. Cependant,
l'utilisation de GraphQL peut améliorer les performances et la
récupération des données de manière significative dans les
applications mobiles.
 Graphql : Query
API
❖ Une opération GraphQL peut être une opération de lecture ou
d'écriture. Une requête (query) GraphQL est utilisée pour lire ou
récupérer des valeurs.

❖ Les requêtes GraphQL aident à réduire la récupération excessive de

données. Contrairement à une API Restful, GraphQL permet à un
utilisateur de restreindre les champs qui doivent être récupérés
depuis le serveur. Cela signifie des requêtes plus petites et un trafic
moindre sur le réseau ; ce qui réduit le temps de réponse

❖ vous pouvez utiliser la classe GraphQLClient pour exécuter des

requêtes GraphQL. Voici un exemple de requête GraphQL qui
récupère les noms et les âges des utilisateurs

❖ Dans cet exemple, nous créons un client GraphQL avec un HttpLink

qui pointe vers notre API GraphQL. Nous utilisons ensuite ce client
pour exécuter une requête avec les options de requête spécifiées
dans QueryOptions. Enfin, nous affichons les résultats .
 Graphql : Mutation
API
❖ Les mutations GraphQL aident à modifier les donees. Comme la
requete grapql la mutation permet à un utilisateur de restreindre
les champs qui doivent être récupérés depuis le serveur. Cela
signifie des requêtes plus petites et un trafic moindre sur le réseau
; ce qui réduit le temps de réponse

❖ Cet exemple effectue une mutation AddUser en passant les

variables name et email et récupère l'ID de l'utilisateur
nouvellement créé.

.
 API
Graphql : Subscription
❖ En plus des requêtes et des mutations , GraphQL prend en charge un troisième type
d'opération : les souscriptions .

❖ Comme les requêtes, les souscriptions vous permettent de récupérer des données.
Contrairement aux requêtes, les abonnements sont des opérations de longue durée qui
peuvent changer leur résultat au fil du temps. Ils peuvent maintenir une connexion active à
votre serveur GraphQL (le plus souvent via WebSocket), permettant au serveur de pousser
les mises à jour vers le résultat de l'abonnement.

❖ Les subscriptions sont une fonctionnalité avancée des API GraphQL qui permettent de
recevoir des mises à jour en temps réel lorsque les données sous-jacentes changent.
Cela peut être utile dans les applications où les données sont fréquemment mises à
jour, telles que les applications de messagerie ou les applications de suivi en temps
réel.
❖ Vous devez utiliser les souscriptions pour les éléments suivants:
❖ Petites modifications incrémentielles des grands objets . L'interrogation répétée d'un
objet volumineux est coûteuse, en particulier lorsque la plupart des champs de l'objet
changent rarement. Au lieu de cela, vous pouvez récupérer . l'état initial de l'objet avec
une requête, et votre serveur peut pousser de manière proactive les mises à jour vers
des champs individuels au fur et à mesure qu'elles se produisent.
❖ Mises à jour en temps réel à faible latence . Par exemple, le client d'une application de
chat souhaite recevoir les nouveaux messages dès qu'ils sont disponibles.
 API
Graphql : Subscription Exemple

❖ Supposons que nous avons un serveur GraphQL qui envoie des mises à jour
en temps réel sur le nombre d'utilisateurs connectés en temps réel. Nous
voulons afficher ce nombre sur notre application Flutter et le mettre à jour
en temps réel dès que le nombre d'utilisateurs connectés change. Pour cela,
nous allons utiliser une requête de souscription GraphQL.
❖ Tout d'abord, nous devons créer un client GraphQL à l'aide de la classe
WebSocketLink fournie par graphql_flutter
❖ Ensuite, nous pouvons utiliser la méthode subscribe de l'objet
GraphQLClient pour envoyer une requête de souscription GraphQL au
serveur
❖ Nous avons créé un objet gql qui représente notre requête de souscription
GraphQL, qui dans ce cas-ci retourne simplement le nombre d'utilisateurs
connectés. Ensuite, nous avons appelé la méthode subscribe de l'objet
GraphQLClient en lui passant la requête de souscription. Cela renvoie un flux
de résultats de requête, qui émettra une nouvelle valeur chaque fois que le
serveur enverra une mise à jour en temps réel.
❖ Nous avons également utilisé la méthode listen sur le flux . de résultats de
requête pour recevoir et traiter les résultats. Si le résultat a une exception,
nous l'imprimons simplement. Sinon, nous extrayons le nombre d'utilisateurs
connectés à partir des données de résultat et faisons quelque chose avec
cette valeur.
 GraphQl VS REST API
API
GraphQl REST

Un langage de requête offrant efficacité et flexibilité pour Un style architectural largement considéré comme une norme
résoudre les problèmes courants lors de l'intégration d'API conventionnelle pour la conception d'API
Déployé sur HTTP à l'aide d'un seul point de terminaison qui
Déployé sur un ensemble d'URL où chacun d'eux expose une seule ressource
fournit toutes les capacités du service exposé
Utilise une architecture orientée client Utilise une architecture pilotée par serveur
Manque le mécanisme de mise en cache automatique Utilise la mise en cache automatiquement
Pas de versionnage de l'API Prend en charge plusieurs versions d'API
Représentation JSON uniquement Prend en charge plusieurs formats de données
Un seul outil est principalement utilisé pour la documentation : Large gamme d'options pour la documentation automatisée, telles que
GraphiQL OpenAPI et API Blueprint
Complique la gestion des codes d'état HTTP pour identifier les
Utilise des codes d'état HTTP pour identifier facilement les erreurs
erreurs
.
Un langage de requête offrant efficacité et flexibilité pour Un style architectural largement considéré comme une norme
résoudre les problèmes courants lors de l'intégration d'API conventionnelle pour la conception d'API
Déployé sur HTTP à l'aide d'un seul point de terminaison qui
Déployé sur un ensemble d'URL où chacun d'eux expose une seule ressource
fournit toutes les capacités du service exposé
BAAS: Firebase
Introduction
À l'ère du prototypage rapide, nous pouvons avoir des idées brillantes, mais parfois elles ne
sont pas applicables si elles demandent trop de travail. Souvent, le back-end est le facteur
limitant - de nombreuses considérations ne s'appliquent jamais au codage côté serveur en
raison d'un manque de connaissances ou de temps.

Firebase est un Backend-as-a-Service (BaaS) qui a démarré en tant que startup YC11. Elle
est devenue une plate-forme de développement d'applications de nouvelle génération sur
Google Cloud Platform. Firebase (une base de données NoSQLjSON) est une base de
données temps réel qui permet de stocker une liste d'objets sous forme d'arbre. Nous
pouvons synchroniser les données entre différents appareils.
 INTERET
Pourquoi utiliser Firebase ?
❖Firebase gère les données en temps réel dans la base de données. Ainsi, il
échange facilement et rapidement les données vers et depuis la base de
données. Par conséquent, pour développer des applications mobiles telles que
la diffusion en direct, la messagerie instantanée, etc., nous pouvons utiliser
Firebase.

❖Firebase permet de synchroniser les données en temps réel sur tous les
appareils - iOS, Android et Web - sans actualiser l'écran.

❖Firebase fournit une intégration à Google Advertising, AdMob, Data Studio,

BigQuery DoubleClick, Play Store et Slack pour développer nos applications avec
une gestion et une maintenance efficaces et précises.

❖Tout, des bases de données, des analyses aux rapports de plantage, est inclus
dans Firebase. Ainsi, l'équipe de développement d'applications peut rester
concentrée sur l'amélioration de l'expérience utilisateur.

❖Les applications Firebase peuvent être déployées via une connexion sécurisée
au serveur Firebase.

❖Firebase propose un tableau de bord de contrôle simple.

❖Il offre un certain nombre de services utiles à choisir.

 Avantages et inconvénients
Inconvénients Avantages

❖ Firebase est une base de données en temps réel.

❖ Firebase n'est pas largement utilisé ni testé ❖ Il a un potentiel de taille de stockage énorme.
pour les entreprises. ❖ Firebase est sans serveur.
❖ Il est hautement sécurisé.
❖ Il s'agit de la solution BaaS hébergée la plus
❖ Il a des requêtes et une indexation très avancée.
limitées. ❖ Il a une configuration minimale.
❖ Il fournit une liaison de données à trois voies via
un tir angulaire.
❖ Il ne fournit aucune agrégation. ❖ Il fournit une sérialisation simple de l'état de
l'application.
❖ Nous pouvons facilement accéder aux données,
❖ Il n'a pas de fonctionnalité de réduction de aux fichiers, à l'authentification, etc.
carte. ❖ Aucune infrastructure de serveur n'est requise
pour alimenter les applications avec des
données.
❖ Il ne peut pas interroger ou répertorier les ❖ Il dispose d'un stockage JSON, ce qui signifie
utilisateurs ou les fichiers stockés. qu'il n'y a pas de barrière entre les données et
les objets.
 Caractéristiques de Firebase
Firebase possède plusieurs fonctionnalités qui
rendent cette plate-forme indispensable. Ces
fonctionnalités incluent des rapports illimités, la
messagerie cloud, l'authentification et
l'hébergement, etc. Jetons un coup d'œil à ces
fonctionnalités pour comprendre en quoi ces
fonctionnalités rendent Firebase essentiel.

Le tableau de bord d'analyse est l'une des meilleures

fonctionnalités de Firebase, qui en est équipé. Il est gratuit
et peut signaler 500 types d'événements, chacun avec 25
attributs. Le tableau de bord est de premier ordre pour
observer le comportement des utilisateurs et mesurer
diverses caractéristiques des utilisateurs. En fin de compte,
cela nous aide à comprendre comment les gens utilisent
notre application afin que nous puissions mieux l'optimiser
à l'avenir.
 Quelques Services
Analytic
❖Rapports illimités: Il permet de signaler 500 événements
distincts.

❖Segmentation du public: Nous pouvons identifier des

audiences personnalisées dans la console Firebase en fonction
des données de l'appareil, des événements personnalisés ou
des propriétés utilisateur. Après cela, nous pouvons utiliser
ces audiences que nous avons spécifiées avec d'autres
attributs Firebase lors du ciblage de nouvelles fonctionnalités
ou notifications.

❖Intégration avec d'autres services: Nous pouvons intégrer

Firebase à d'autres services pouvant utiliser nos applications
professionnelles telles que Big Query, Firebase Notifications,
Firebase Remote Configuration, Firebase CrashReporting et
Google Tag Manager.
 Quelques Services
Le développement
❖Messagerie Cloud : Firebase nous permet de livrer et de recevoir des messages
de manière plus fiable sur toutes les plateformes.

❖Authentification : Firebase a peu de frictions avec l'authentification.

❖Laboratoire d'essai: Testez plutôt en laboratoire sur vos utilisateurs.

❖Hébergement: Firebase fournit du contenu Web plus rapidement.

❖Configuration à distance: Il permet de personnaliser l’application à chaud.

❖Liens dynamiques: Les liens dynamiques sont des URL intelligentes qui modifient
dynamiquement le comportement pour offrir la meilleure expérience sur
différentes plates-formes. Ces liens permettent aux utilisateurs de l'application
d'accéder directement au contenu qui les intéresse après l'installation de
l'application, qu'ils soient complètement nouveaux ou clients à vie.

❖Rapport d'incident: Il maintient notre application stable.

❖Base de données en temps réel: Il peut stocker et synchroniser les données des
applications en temps réel.

❖Stockage: Nous pouvons facilement stocker le fichier dans la base de données.

 Quelques Services
Engagement des utilisateurs
❖ AdWords: Lier AdWords est très simple, et avec lui, nous pouvons segmenter et
définir notre base d'utilisateurs à l'aide de Firebase Analytics. De plus, il est facile
d'améliorer notre ciblage dans les campagnes de publicité marketing. Parmi les autres
avantages, citons le suivi des conversions, les réseaux inter-réseaux, les réseaux
d'attribution et la LTV (Calculating Customer Lifetime Value).

❖ Indexation des applications: Avec l'indexation des applications, nous pouvons

travailler sur des aspects tels que le réengagement avec notre application, en
particulier en surfant sur le contenu de l'application dans les résultats de recherche
Google. Cela aidera également à classer notre application dans les résultats de
recherche Google.

❖ Invite: C'est un outil parfait pour les références et le partage. Obtenez l'aide de nos
utilisateurs pour développer facilement notre application par e-mail ou SMS,
permettant à leurs utilisateurs existants de partager notre application ou le contenu
intégré à l'application. Si nous utilisons cette fonctionnalité en combinaison avec des
promotions, nous pouvons également travailler à l'acquisition de nouveaux clients et
à la fidélisation de nos clients existants.

❖ Notifications: Nous pouvons gérer très facilement les campagnes d'information, y

compris la possibilité de définir et de programmer des messages pour engager les
utilisateurs au bon moment de la journée. Ces notifications sont entièrement
gratuites. Ceux-ci sont illimités pour iOS et Android. Il n'y a qu'un seul tableau de
bord à prendre en compte, et si nous intégrons Firebase Analytics, nous pouvons
utiliser diverses fonctionnalités de segmentation des utilisateurs.
 Integration à Flutter

Synopsis Il existe deux manières d'ajouter Firebase à un projet

React Native : la SDK Web Firebase ou react-native-
firebase. Nous ferons l’integrations pour react-
native-firebase.

La plupart des applications doivent connaître l'identité

de l'utilisateur qui les utilise. Connaître l'identité d'un
utilisateur permet à une application d'enregistrer en
toute sécurité les données utilisateur dans le cloud et
de fournir une expérience personnalisée sur tous les
appareils de l'utilisateur.
 Installation
Firebase est une plateforme de développement
d'applications mobiles de Google qui fournit une
multitude de services cloud. Il est facilement
intégrable avec Flutter et peut être utilisé pour gérer
l'authentification utilisateur, stocker des données,
envoyer des notifications push et bien plus encore.
Voici les étapes à suivre pour installer et configurer
Firebase sur Flutter :

Créer un projet Firebase :

Allez sur le site web de Firebase
([Link] et connectez-vous
avec votre compte Google.
Cliquez sur le bouton "Ajouter un projet" pour créer
un nouveau projet Firebase.
Donnez un nom à votre projet, choisissez un
pays/région, puis cliquez sur "Créer un projet".
Exécutez la commande "flutter pub get" pour
télécharger les dépendances.
 Installation
Ajouter Firebase à votre projet Flutter :
Ouvrez votre projet Flutter dans un éditeur de code.
Ajoutez les dépendances Firebase dans le fichier
[Link] :

Configuration de Firebase dans votre projet Flutter :

Créez un fichier nommé "[Link]" dans

le dossier "android/app" de votre projet Flutter.
Copiez le fichier de configuration que vous avez
téléchargé à partir du site web de Firebase et collez-
le dans le fichier "[Link]".
Pour les appareils iOS, ajoutez le fichier de
configuration "[Link]" à votre
projet Xcode.

Avec cette configuration, vous pouvez commencer à

utiliser les différents services Firebase dans votre
application Flutter. Assurez-vous de suivre les
instructions de sécurité de Firebase pour protéger
vos données utilisateur et de ne pas inclure vos
informations d'identification Firebase dans votre
code source.
Auth
Auth
CRUD
CRUD
Storage
Resources Natives
 Introduction
Les ressources natives sont des fonctionnalités qui
sont déjà disponibles sur les appareils mobiles et qui
peuvent être utilisées dans une application mobile
Flutter. Parmi ces fonctionnalités, on peut citer
l'appareil photo, le microphone, le capteur de
proximité, le GPS, etc.

Pour utiliser ces fonctionnalités, il faut les intergrer

dans votre application. Nous allons voir comment
intergrer la caméra et le microphone dans votre
application Flutter.

Pour intergrer la caméra, vous pouvez utiliser le

plugin camera. Voici les étapes à suivre :

✓ Ajouter la dépendance du plugin camera dans le

fichier [Link]

✓Importer le package dans votre fichier dart

✓Dans votre méthode main() initialiser les caméras

Camera
 Microphone
Pour intégrer l'enregistrement
microphone sur Flutter, vous
pouvez utiliser le package
microphone qui fournit une
interface pour enregistrer
l'audio depuis le microphone
de l'appareil. Voici un exemple
simple pour enregistrer l'audio
et le sauvegarder dans un
fichier.
 Microphone
Dans cet exemple, nous utilisons le
package microphone pour enregistrer
l'audio à partir du microphone de
l'appareil. Nous avons également utilisé
le package path_provider pour obtenir
le chemin d'accès au répertoire de
l'application où nous allons sauvegarder
le fichier audio enregistré. Enfin, nous
avons utilisé un bouton flottant pour
démarrer et arrêter l'enregistrement.
 Wifi
Voici un exemple d'intégration de la fonctionnalité
de partage de fichiers entre deux appareils
connectés au même réseau WiFi

✓ Créez une méthode pour récupérer l'adresse IP

de votre appareil

✓ Créez une méthode pour envoyer un fichier

vers un autre appareil connecté au même
 Wifi
✓ Créez une méthode pour
écouter les connexions
entrantes et recevoir des
fichiers

✓ Utilisez ces méthodes

pour envoyer et recevoir
des fichiers
Conclusion
Le développement mobile avec Flutter est une solution très intéressante pour créer des applications mobiles
multiplateformes. Avec son approche de programmation déclarative, Flutter permet de créer des interfaces
utilisateur riches et personnalisables, tout en offrant une performance élevée. L'intégration avec les API REST,
GraphQL et Firebase est également très facile grâce aux nombreuses bibliothèques disponibles.

En conclusion, Flutter est une technologie prometteuse pour le développement mobile multiplateforme, offrant
une expérience de développement fluide et efficace. En continuant d'apprendre et d'explorer cette plateforme,
vous pouvez créer des applications mobiles incroyables et innovantes pour tous les utilisateurs.

Recommandations pour aller plus loin :

✓ Approfondir la connaissance de Flutter en créant des projets

plus complexes
✓ Apprendre les meilleures pratiques de conception
d'interfaces utilisateur pour Flutter
✓ Explorer les possibilités de l'intégration avec les services
cloud, tels que AWS et Google Cloud
✓ Étudier les techniques de test pour les applications Flutter
✓ Suivre les mises à jour et les évolutions de Flutter, car la
plateforme est en constante évolution
Analyse des besoins,
requis et
fonctionnalités
Synopsis
Vous avez donc une idée d'application. C'est super. Vous devez maintenant
prendre cette idée abstraite et la transformer en une application réelle. Le
processus de conception et de développement d'applications mobiles
nécessite beaucoup de travail (et de temps et d'argent). Mais qu'en est-il
des détails? Comment devriez-vous l'aborder? Où devriez-vous commencer?
Nous avons des réponses à ces questions et à bien d'autres.

Les etapes
1. Découverte 2. Validation de l'idée
Votre première tâche sera de Après avoir décidé du problème
fournir autant de détails que que vous souhaitez résoudre et de
possible sur le projet. la solution, il est temps d'effectuer
des recherches approfondies.

3. Stratégie UX 4. Conception et développement

Il est enfin temps pour une la plupart des données ont été
conception UX approfondie. L'étape collectées, toutes les étapes
3 du cycle de vie du préliminaires du processus de
développement de l'application développement d'applications sont
mobile consiste à concevoir derrière vous, et il est enfin temps
l'interface dans tous ses détails. de commencer la conception et le
codage.
 Découverte
Esquissez votre idée : Pour rendre l'étape de découverte plus facile et plus utile, de nombreuses entreprises, y compris Mind
Studios, utilisent le Lean Canvas - une sorte de tableau dans lequel vous remplissez des informations sur votre idée, le
problème que votre application résoudra, la solution possible que vous avez trouvée avec, et plus encore. Le Lean Canvas est
l'une des meilleures options pour organiser les informations les plus cruciales sur votre entreprise en ce qui concerne le
projet: forces et faiblesses, avantages que vous avez que vos concurrents n'ont pas, etc. Vous pouvez vous essayer au Lean
Canvas avec CNVS ou Canvanizer

Renseignez-vous sur votre client: Connaître votre client est la clé du succès du développement d'applications mobiles . Qui
achètera votre produit? D'où viennent-ils, que font-ils et comment utilisent-ils leurs appareils mobiles? Créez une
personnalité généralisée d'un client qui a le problème que vous souhaitez résoudre avec votre application. Selon le type de
votre application, vous pouvez diviser les personnages par sexe, données démographiques, situation sociale / matrimoniale
ou emploi ; mais la recommandation générale est de définir le comportement du paramètre principal dans l'application.

Créer un concept de navigation : C'est ce qu'on appelle aussi un prototype basse fidélité . Ce n'est pas encore une
application fonctionnelle; il s'agit simplement d'une visualisation de l'application qui sert un seul objectif: vérifier que vous
et votre équipe voyez le produit de la même manière. Un concept de navigation est un ensemble d'images qui montrent
comment les connexions entre les écrans ou les pages fonctionneront sur chacune des plates-formes pour lesquelles vous
créez l'application. Le prototypage basse fidélité peut également aider à estimer davantage les coûts, au moins
partiellement, en permettant à votre équipe de mieux comprendre l'étendue des fonctionnalités et de calculer le coût
approximatif de leur développement.
Validation de l'idée
Mener des recherches directes: Cela ne fait jamais de mal de parcourir les applications déjà présentes sur l'App Store pour
voir la concurrence dans votre catégorie et comment vos concurrents gèrent le problème que vous souhaitez résoudre (si
quelqu'un s'en occupe).

Utilisateurs cibles de l'enquête: D'une part, les enquêtes ne sont pas la source d'information la plus fiable et vous voudrez
peut-être au moins combiner cette méthode avec autre chose. D'autre part, communiquer avec vos futurs clients potentiels
vous permet non seulement de valider votre idée, mais aussi de fournir les premiers commentaires, vous permet de
connaître les critères que votre public cible utilise pour décider s'il est prêt à payer et en crée présence pour votre marque.

Rechercher des requêtes de recherche: Tout dépend du produit que vous fabriquez et de l'équipe avec laquelle vous
travaillez, mais il peut parfois être utile de mener une recherche globale sur les requêtes de recherche. Cela peut vous aider
à voir si quelqu'un cherche même une solution au problème que votre application résout.

Diffusez des promotions et des publicités: Il ne s'agit pas de publicités en tant que modèle de monétisation, mais de
publicités destinées à rendre votre entreprise et votre produit visibles. Lancez une campagne sur Facebook pour voir
combien d'utilisateurs sont intéressés par ce que vous cherchez à offrir.

Valider le prototype de concept: Vous avez esquissé un prototype de concept au stade de la découverte pour vous assurer
que votre équipe voit le projet de la même manière que vous. Il est maintenant temps de savoir s'il atteint réellement son
objectif aux yeux de vos utilisateurs potentiels..

Créer un MLP: Un produit minimal aimable, ou MLP, est la dernière étape de l'étape de validation de l'idée, et c'est aussi
votre premier prototype fonctionnel. Un MLP est similaire à un MVP - un produit minimum viable - mais au lieu de créer le
minimum de fonctionnalités nécessaires , avec un MLP, vous accordez une attention particulière à la caractéristique unique
de votre produit.
 Stratégie UX
Structuration UML: Pour tout simplifier, commencez par structurer toutes les données dont vous disposez. Il existe plusieurs
façons de le faire et vous pouvez choisir celle que vous préférez. Nous trouvons les diagrammes ER et les diagrammes de
classes UML très utiles, car ils aident à montrer non seulement les éléments eux-mêmes, mais aussi les relations et les
connexions entre eux, offrant une image plus claire de ce que vous faites.

Prototype haute fidélité: Les prototypes haute fidélité incluent une conception détaillée de l'interface utilisateur et de
l'expérience utilisateur, et il est recommandé de les rendre interactifs afin que votre groupe de test puisse essayer la
navigation et avoir une impression générale. La raison de la création de prototypes haute fidélité est de surveiller le
comportement des utilisateurs, de trouver des modèles et, encore une fois, de recevoir des commentaires.

Evaluation du cout : Après avoir terminé et testé un prototype haute fidélité, vous serez également en mesure d' estimer le
coût de développement de l'application avec beaucoup plus de précision qu'au départ, ainsi que de créer un plan de projet
plus détaillé et précis pour la phase de développement..
Conception et développement
Methodologie Agile: Selon Agile, le flux du processus de développement d'applications mobiles est divisé en tâches par
sprint. Un sprint est une courte période de temps, généralement deux semaines, pendant laquelle une certaine partie du
travail de développement est terminée. À la fin de chaque sprint, le périmètre de travail prévu est comparé au travail
effectué.

Frontend: partie que vos utilisateurs verront - l'interface, la conception visuelle, tout ce que nous, les utilisateurs, pensons
être l'application. En fonction de la plate-forme choisie (iOS, Android, Windows), vous utiliserez un langage de
programmation différent: Objective-C ou Swift pour les applications natives basées sur iOS, Java ou Kotlin pour Android.
Outre les langages, il existe d'autres outils tels que des bibliothèques, des systèmes de contrôle de version et des
frameworks.

Back end: le moteur de la fonctionnalité de votre produit. Un utilisateur ne le voit pas, mais le back-end est ce qui maintient
tout ensemble, gère la communication avec les serveurs et maintient la logique opérationnelle. Il existe également des
langages et des outils distincts pour le développement backend, par conséquent, les équipes de développement ont
généralement au moins un spécialiste backend en plus des développeurs frontaux Android et iOS, des concepteurs et un QA.

Tests: À proprement parler, les tests ne se limitent pas à la phase de conception et de développement - vous le ferez dès les
tout premiers prototypes. C'est à cela que servent les prototypes, après tout: tester ce que vous avez par rapport aux
résultats attendus. Mais lorsque vous atteignez ce stade, l'assurance qualité devient encore plus essentielle et rigoureuse.
 En resumé.
C'est tout. Vous connaissez maintenant les
Conclusion étapes essentielles de développement
d'applications mobiles. Bien sûr, le travail n'est
pas terminé lorsque l'application est développée.
Il reste la question du lancement, du marketing,
des mises à jour et de nombreux tests à chaque
étape. Mais tout cela vient plus tard. Avec la vue
d'ensemble ci-dessus, vous savez en général
comment créer une application mobile et à quoi
s'attendre de votre société de développement. Si
vous avez encore des questions ou avez besoin
de précisions sur les étapes de création d'une
application mobile, contactez- nous sur notre
page de contact .
Conception UI/UX
 Introduction
La différence entre une bonne application et une UX Mobile: Perceptions et sentiments des utilisants
mauvaise application réside généralement dans la avant, pendant et apres leur interaction avec le
qualité de son expérience utilisateur (UX). mobile.

UI ( User Interface ) : Interface graphique , il s’agit de Considerer :

ce que l’utilisateur voit et utilise pour interagir avec ❖ La petite taille de l’ecran
l’application ❖ Les contraintes liees à la connectivité.
❖ Les differences de fonctionnalites entre appareils

UX ( User Experience ) : Experience utilisateur, il s’agit

de ce que l’utilisateur recent en utilisant l’application Utiliser les outils appropriés:
❖ Pour le prototypage lofi : Balsamiq, MockPlus,
Axure, Lucichard .
❖ Pour le prototypage hifi : Adobe Xd, Figma, Xecth,
JustInMind
 Bonnes Pratiques de conception (1/2)
Minimiser La Charge Cognitive DIVISER LES TÂCHES EN MORCEAUX DE LA TAILLE
D'UNE BOUCHÉE
La charge cognitive fait ici référence à la
quantité de puissance cérébrale requise Si une tâche contient de nombreuses étapes et
pour utiliser l'application. Le cerveau humain actions requises du côté de l'utilisateur, il est
a une puissance de traitement limitée, et préférable de diviser ces tâches en plusieurs sous-
lorsqu'une application fournit trop tâches. Ce principe est extrêmement important dans
d'informations à la fois, elle peut submerger la conception mobile, car vous ne voulez pas créer
l'utilisateur et lui faire abandonner la tâche. trop de complexité pour l'utilisateur à la fois

DÉSENCOMBRER UTILISER DES ÉCRANS FAMILIERS

Le désordre est l'un des pires ennemis d'un Les écrans familiers sont des écrans que les
bon design. En encombrant votre interface, utilisateurs voient dans de nombreuses
vous surchargez les utilisateurs avec trop applications. Des écrans tels que
d'informations: chaque bouton, image et «Démarrage», «Quoi de neuf» et «Résultats
icône ajouté complique l'écran. de la recherche» sont devenus des normes
de facto pour les applications mobiles.
 Bonnes Pratiques de conception (2/2)
MINIMISER L'ENTRÉE DE L'UTILISATEUR RENDRE LA CONCEPTION COHÉRENTE
Taper sur un petit écran mobile n'est pas
l'expérience la plus confortable. En fait, il est La cohérence est un principe fondamental de la
souvent sujet aux erreurs. Et le cas le plus conception. La cohérence élimine la confusion. Il est
courant d'entrée utilisateur est de remplir un essentiel de conserver une apparence générale
formulaire. cohérente dans toute une application. En ce qui
concerne l'application mobile, la cohérence signifie
ce qui suit:
❖ Cohérence visuelle : Les polices, boutons et
étiquettes doivent être cohérents dans toute
l'application.

❖ Cohérence fonctionnelle : Les éléments

interactifs doivent fonctionner de la même
manière dans toutes les parties de votre
application.
ANTICIPER LES BESOINS DES UTILISATEURS
❖ Cohérence externe : La conception doit être
Recherchez de manière proactive les étapes du cohérente sur plusieurs produits. De cette façon,
parcours utilisateur où les utilisateurs peuvent avoir l'utilisateur peut appliquer ses connaissances
besoin d'aide. préalables lors de l'utilisation d'un autre produit.
Merci !!!