Royaume du Maroc

Université Sultan Moulay Slimane

Ecole Supérieure de Technologie – Fquih Ben Salah

Développement Mobile

Réalisé par: Demandé par:

Siham EL YAAGOUBI Mr. Rashid AIT DAOUD

2022-2023 1
 sommaire

 Développement mobile.
 Importance du développement mobile.
 Les plateformes mobiles.
 Les applications natives vs hybrides.
 Flutter.
 Caractéristiques du Flutter.
 Avantages du Flutter.
 Getting started with Flutter.
 cas pratique .

2022-2023 2
 Développement mobile

 Le développement mobile fait référence au processus de création d'applications mobiles qui

s'exécutent sur des appareils mobiles tels que les smartphones, les tablettes et les smartwatchs.
Cela implique le développement d'applications logicielles spécifiquement conçues pour
fonctionner sur les systèmes d'exploitation de ces appareils, tels que iOS ou Android.

 Le développement mobile peut impliquer une variété de langages de programmation, de

Frameworks et d'outils qui permettent aux développeurs de créer des applications mobiles. Ces
applications peuvent être développées à diverses fins, notamment les réseaux sociaux, le
commerce électronique, etc.

2022-2023 3
 Importance de Développement
mobile

 Accessibilité : les applications mobiles sont accessibles de n’importe où et à tout moment, offrant aux
utilisateurs la convenance et la flexibilité. Ceci est particulièrement important pour les entreprises qui
fournissent des services ou des produits nécessitant un accès instantané, tels que les services bancaires en
ligne, la réservation de voyages ou la livraison de nourriture.

 Génération de revenus : les applications mobiles sont devenues une source majeure de revenus pour les
entreprises. Les entreprises qui développent des applications utiles, attrayantes et conviviales peuvent
générer des revenus substantiels grâce aux ventes d'applications, aux achats intégrés et à la publicité.

 Engagement accru : les applications mobiles permettent aux entreprises d'interagir avec les clients de
manière plus personnalisée et ciblée. En fournissant aux utilisateurs un contenu et des fonctionnalités
personnalisés, les entreprises peuvent améliorer l'engagement des utilisateurs et la fidélité des clients.

2022-2023 4
 Les platformes mobile
Les plates-formes mobiles sont les systèmes d'exploitation qui alimentent les appareils mobiles tels que les smartphones et
les tablettes. Il existe plusieurs plates-formes mobiles populaires, notamment :

Android iOS Windows Phone

il s’agit d’un système Développé par Apple, iOS est un

d’exploitation open source qui
permet à de nombreux types
de périphériques de différents
fabricants d’exécuter diverses
versions du système
d’exploitation Android.
Basé sur Google et Linux,
représentant environ 80 % de
la part de marché.
système d'exploitation mobile
quine s’étend pas à autant de
terminaux qu’Android parce Windows Phone : Développé
qu’elle n’est pas en open source : par Microsoft, Windows
elle fonctionne exclusivement sur Phone est un système
les produits Apple. De même, d'exploitation mobile utilisé
pour créer des applications pour sur les smartphones et
iOS, les développeurs doivent certaines petites tablettes.
utiliser un ordinateur Mac
exécutant OS X, le système
d’exploitation Mac standard
2022-2023 5
 Les applications natives vs hybrides.

I. Applications mobiles natives

 
 fait référence à un logiciel d'application conçu pour fonctionner sur un appareil ou une plate-forme particulier.
Comme il est conçu pour fonctionner sur un appareil mobile spécifique et son système d'exploitation, il utilise des
logiciels et du matériel spécifiques à l'appareil.

 Ces applications offrent des performances améliorées et tirent parti des technologies les plus avancées, telles que
le traitement d'images, etc. 

 Les applications mobiles natives ont un haut degré de précision et une exécution rapide. En plus d'être plus
rapides, ils permettent également aux utilisateurs d'accéder à toutes les dispositions et commandes de l'interface
utilisateur native. 

2022-2023 6
 Les avantages
 Performances : les applications natives sont
conçues spécifiquement pour un système
d'exploitation particulier et peuvent donc
tirer pleinement parti des capacités
matérielles et logicielles de l'appareil.
 Fonctionnalité : les applications natives
peuvent accéder aux fonctionnalités de
l'appareil telles que l'appareil photo, le GPS
et autres, ce qui permet de créer des
applications plus riches en fonctionnalités
et plus complexes.
 Sécurité : les applications natives peuvent
utiliser les fonctionnalités de sécurité
intégrées de la plate-forme, telles que le
cryptage et l'authentification biométrique,
pour fournir un niveau de sécurité plus
élevé que les applications Web ou hybrides
2022-2023
Les inconvénients
Maintenance : les applications natives
nécessitent une maintenance et des mises à
jour régulières pour garantir la compatibilité
avec les dernières mises à jour du système
d'exploitation et les corrections de bogues.
Compatibilité : les applications natives sont
conçues spécifiquement pour un système
d'exploitation particulier, ce qui signifie qu'elles
peuvent ne pas fonctionner sur d'autres plates-
formes.
Coût de développement : le développement
d'applications natives peut être plus coûteux
que le développement d'applications Web ou
hybrides, car il nécessite des connaissances
spécialisées et des outils de développement
pour chaque plate-forme.
7
 Les applications natives vs hybrides.

I. Applications mobiles hybrides

 
 Une application hybride est conçue pour une utilisation sur toutes les plateformes : Android et IOS, sans
différence entre les versions. Son développement est rapide et sa gestion est facile : le code source reste unique.
Ce qui facilite les futures mises à jour.

 Ce type d’application offre une facilité dans la maintenance parce qu’il n’y a qu’une seule version pour plusieurs
plateformes.

 Le principe de l'application hybride permet de réduire les coûts et délais de développement nécessaires pour
proposer plusieurs applications natives pour les différents systèmes d'exploitation mobiles.

2022-2023 8
 Les avantages
Compatibilité multiplateforme : les applications
hybrides peuvent s'exécuter sur plusieurs plates-
formes, y compris iOS, Android et le Web, ce qui
permet d'atteindre plus facilement un public plus large
sans avoir besoin d'applications distinctes pour chaque
plate-forme
Les inconvénients
Fragmentation : les applications hybrides
peuvent être confrontées à des problèmes de
fragmentation, car elles doivent être
compatibles avec plusieurs plates-formes,
systèmes d'exploitation et types d'appareils.

Temps de développement plus rapide : les

Problèmes de sécurité : les applications
applications hybrides peuvent être
hybrides peuvent être plus vulnérables aux
développées plus rapidement que les
menaces de sécurité, telles que les violations
applications natives, car la même base de code
de données et les logiciels malveillants, car
peut être réutilisée sur plusieurs plates-formes,
elles reposent sur des technologies Web
ce qui réduit le temps et les ressources
susceptibles d'être attaquées.
nécessaires au développement.

Maintenance facile : étant donné que les

applications hybrides utilisent une seule base La personnalisation du design de votre
de code, elles sont plus faciles à entretenir et à application est aussi limitée puisque l’interface
mettre à jour, ce qui réduit le temps et le coût est la même pour toutes les plateformes.
de la maintenance

2022-2023 9
 Flutter
 Flutter est Framework d'applications mobiles qui permet aux développeurs de créer des applications compilées
nativement de haute qualité pour les mobiles, le Web et les ordinateurs de bureau à l'aide d'une seule base de
code. Il a été créé par Google et utilise le langage de programmation Dart, également développé par Google.

 Flutter fournit un riche ensemble de widgets prédéfinis qui permettent aux développeurs de créer des interfaces
utilisateur visuellement attrayantes et réactives pour leurs applications. Les widgets sont personnalisables et
peuvent être combinés pour créer des éléments d'interface utilisateur complexes, et de nombreux plugins tiers
sont disponibles pour ajouter des fonctionnalités supplémentaires aux applications.

2022-2023 10
Version et historique Flutter:
 2015 code “Sky”
 La première version de Flutter était connue sous le nom de code “Sky” et fonctionnait sur le système d’exploitation Android.
 Elle a été dévoilée lors du sommet des développeurs Dart de 2015, avec l’intention déclarée de pouvoir effectuer un rendu
cohérent à 120 images par 4 seconde .
 2018 Flutter 1.0
 Lors du discours d’ouverture des Google Developer Days à Shanghai, Google a annoncé la sortie de Flutter Release Preview 2 qui
est la dernière grande version avant Flutter 1.0.
 Le 4 décembre 2018, Flutter 1.0 a été publié lors de l’événement Flutter Live, ce qui représente la première version “stable” du
Framework.
 La version bêta de Flutter a été lancée le 13 mars 2018 et elle a été lancée pour la première fois le 4 décembre 2018. En si peu de
temps, Flutter a déjà établi sa position sur le marché.
 2019 Flutter 1.12
 Le 11 décembre 2019, Flutter 1.12 a été publié lors de l’événement Flutter Interactive.
 2020 Flutter 1.17
 Le 6 mai 2020, le SDK de Dart en version 2.8 et celui de Flutter en version 1.17.0 sont sortis. La prise en charge de l’API Metal a
été ajoutée, améliorant les performances des appareils iOS (environ 50 %), de nouveaux widgets Material et de nouveaux outils
de suivi de réseau.
 2021 Flutter 2.0
 Le 3 mars 2021, l’équipe de développement de Flutter a annoncé la release de son SDK en version 2.0.0. De nombreux bugs et
problèmes de jeunesse ont été résolus à cette occasion (ajout de null safety par exemple). De plus, l’utilisation de Windows,
Linux et la version Web sont ajoutés à la release.

2022-2023 11
Architecture Flutter

2022-2023 12
 Dart
 Dart est un langage de programmation, qui a été et est développé principalement par Google, apparu en 2010 à
l’initiative de deux développeurs de Google : Lars Bak et Kasper Lund.

 Il est standardisé par Ecma (Ecma est une organisation internationale de normalisation des systèmes d’information et
de communication ainsi que des appareils électroniques grand public) en 2014.

 À l’origine, ce projet avait comme objectif de remplacer JavaScript à moyen ou long terme, en raison des difficultés à
faire évoluer ce dernier. Google a donc conçu Dart à partir de cette idée et la version 1.0 est sortie le 10 octobre
2011.

2022-2023 13
 Les fondamentaux
 Les variables:
les variables sont utilisées pour stocker la valeur à l'emplacement de la mémoire. Il contient un espace de noms faisant
référence à l'emplacement de la mémoire.
Syntax:
type variableName;

 Les fonctions :
La fonction est également appelée une méthode qui prend des entrées et exécute une séquence d'un bloc de code
d'instructions et renvoie la sortie.
Syntax: Datatype functionname(arguments){
//function body contains code block;
return value; }

 Les classes:
class{
Syntax: // instance member variables
constructor(){ }
// setters and getters
// functions and methods }

2022-2023 14
Le mot-clé Async:

Dans Dart, async est un mot-clé utilisé pour définir des fonctions asynchrones. Les fonctions asynchrones vous
permettent d'effectuer des tâches de longue durée, telles que des requêtes réseau ou des E/S de fichiers, sans
bloquer l'exécution du reste de votre code .

Le mot-clé Await:

Dans Dart, await est un mot-clé utilisé pour interrompre l'exécution d'une fonction jusqu'à ce qu'elle soit ‘Future’
terminée.

« Future » représente une valeur qui n'est peut-être pas encore disponible, comme le résultat d'une requête
réseau ou d'une opération d'E/S de fichier. Lorsque vous « Await » un  « Future », l'exécution de la fonction en
cours est interrompue jusqu'à ce que le Future se termine, au moment auquel la valeur du Future est renvoyée et
la fonction reprend son exécution.

Il est important de noter que cela await ne peut être utilisé qu'à l'intérieur d'une async fonction et que le type de
retour de la fonction doit être un Future. Await peut également être utilisé avec d'autres opérations asynchrones,
telles que les E/S de fichiers ou les requêtes de base de données

2022-2023 15
 Les caractéristiques du flutter

 Hot reload: la fonction de rechargement à chaud de Flutter permet aux développeurs d'apporter des modifications
au code et de voir instantanément les résultats sur l'application, ce qui rend le processus de développement plus
rapide et plus efficace.

 Bibliothèque de widgets : Flutter dispose d'un riche ensemble de widgets personnalisables qui permettent aux
développeurs de créer des interfaces utilisateur étonnantes et dynamiques pour leurs applications mobiles.

 Développement multiplateforme : Flutter permet aux développeurs de créer des applications mobiles de haute
qualité pour les plates-formes Android et iOS avec une seule base de code. Cette fonctionnalité réduit
considérablement le temps et les coûts de développement.

2022-2023 16
 Configurez votre environnement Flutter

 Éditeur de texte:
Pour rendre cet atelier de programmation aussi simple que possible, nous supposons que vous utiliserez Visual
Studio Code (VS Code) comme environnement de développement. C'est gratuit et fonctionne sur toutes les principales
plateformes.
 Flutter SDK

 La cible de développement :
Flutter est un Framework multiplateforme , Cependant, il est courant de choisir un seul système d'exploitation pour
lequel vous développerez principalement. Il s'agit de votre « objectif de développement », c'est-à-dire le système
d'exploitation sur lequel votre application s'exécute pendant le développement.

2022-2023 17
 Pubspec.yaml

 Une pubspec de base est générée lorsque vous créez un nouveau projet Flutter. Il est situé en haut de
l'arborescence du projet et contient des métadonnées sur le projet que les outils Dart et Flutter doivent
connaître. Le pubspec est écrit en YAML , qui est lisible par l'homme, mais sachez que l'espace blanc
(tabulations v espaces) est important .

 Le fichier pubspec spécifie les dépendances requises par le projet, telles que des packages particuliers (et
leurs versions), des polices ou des fichiers image. Il spécifie également d'autres exigences, telles que les
dépendances sur les packages de développement.

2022-2023 18
 Getting started with flutter
Widgets:

 Les widgets sont des éléments constitutifs d'une application Flutter. Ce sont des configurations pour différentes
parties de l'interface utilisateur. Les widgets peuvent être des éléments structurants, des éléments d'entrée, des
mises en page d'interface utilisateur, des éléments interactifs, des animations, des actifs, des images, des icônes et
des widgets personnalisés.

Les widgets Flutter peuvent être classés en deux types : StatelessWidget et StatefulWidget.
 StatelessWidget : Un StatelessWidget est un widget qui ne change pas dans le temps. Une fois créé, il reste le même.
Les widgets sans état sont utilisés pour des éléments d'interface utilisateur simples tels que du texte, des images, des
boutons, etc.

 StatefulWidget : un StatefulWidget est un widget qui peut changer dans le temps. L'état du widget peut changer en
fonction de l'entrée de l'utilisateur ou d'autres événements. StatefulWidget est utilisé pour les éléments d'interface
utilisateur plus complexes qui doivent répondre aux entrées de l'utilisateur ou à d'autres événements.

2022-2023 19
 Widget Tree
 Le Widget tree (arbre de widgets en français) est un concept clé de Flutter. Il représente la hiérarchie des widgets qui
composent l'interface utilisateur de l'application.

 Chaque widget dans le Widget tree est un objet qui représente un élément d'interface utilisateur tel qu'un bouton,
une image, un texte, un champ de saisie, etc. Les widgets peuvent être des éléments simples ou plus complexes, tels
que des conteneurs qui contiennent d'autres widgets.

2022-2023 20
 Le moteur de rendu

 Le moteur de rendu est un autre élément clé de Flutter. Il est responsable de l'affichage des widgets à l'écran et de la
gestion des interactions de l'utilisateur avec ces widgets.

 Flutter utilise un moteur de rendu appelé Skia, qui est également utilisé par d'autres projets tels que Chrome et
Firefox. Skia est une bibliothèque de dessin 2D développée par Google qui offre une grande flexibilité en matière
de conception d'interface utilisateur.

 Skia permet à Flutter de dessiner des formes personnalisées, des dégradés, des ombres portées, des images et
d'autres éléments graphiques à l'écran. En outre, Skia est optimisé pour les performances, ce qui permet à Flutter de
fournir une expérience utilisateur fluide et réactive, même sur des appareils moins puissant

2022-2023 21
 Les Widgets de base
Flutter propose une large gamme de widgets pour la création d'interfaces utilisateur riches et interactives. Voici quelques
exemples de widgets de base Flutter:

 Texte (Text)
 Boutons (Button)
 Images (Image)
 Conteneurs (Container)
 Listes (ListView)
 Barres d'outils (AppBar)
 Boîtes de dialogue (AlertDialog)
 Icones (Icon)
 Row
 Column

Exemple:
2022-2023 22
2022-2023 23
 Navigation en flutter
La navigation en Flutter est le processus de déplacement entre différentes vues, ou pages, dans une application Flutter.
Cela peut inclure la transition d'une vue à l'autre, ainsi que la gestion de l'historique de navigation et la transmission de
données entre les vues.
La navigation basique en Flutter peut être mise en place à l'aide de routes nommées. Une route nommée est
simplement une référence à une page de l'application.

 Utilisation de routes nommées

 naviguer entre les pages avec des boutons

2022-2023 24
  Utilisation de routes nommées:

Pour définir une route nommée, vous pouvez utiliser le widget MaterialApp et spécifier un ensemble de routes
avec la propriété routes.

Exemple:

2022-2023 25
  naviguer entre les pages avec des boutons

Pour naviguer entre les pages à l'aide de boutons, vous pouvez utiliser le widget Navigator.

Exemple:

2022-2023 26
  passer des données entre les pages
Pour passer des données entre les pages dans Flutter, vous pouvez utiliser le deuxième argument de la méthode
Navigator.pushNamed. Voici comment procéder :

 Dans la page d'où proviennent les données, vous pouvez appeler la méthode Navigator.pushNamed avec la route
nommée de la page de destination et les données en tant qu'arguments.

Dans la page de destination, vous pouvez récupérer les données à l'aide de la propriété arguments de l'objet
ModalRoute

2022-2023 27
 Flutter et Firebase
Flutter et Firebase sont deux technologies qui peuvent être combinées pour créer des applications mobiles puissantes et
évolutives.

Firebase est une plateforme de développement d'applications mobiles de Google qui fournit une infrastructure de
backend pour les applications mobiles, tandis que Flutter est un framework de développement d'applications mobiles
open source et multiplateforme.

quelques fonctionnalités de Firebase:

 Firebase Authentication :
 Utilisation de Firebase Authentication pour gérer l'authentification utilisateur dans votre application Flutter
 Possibilité d'authentifier les utilisateurs via des fournisseurs d'authentification tels que Google, Facebook, Twitter,
etc.
 Cloud Functions :
 Utilisation de Cloud Functions pour ajouter des fonctionnalités côté serveur à votre application Flutter
 Possibilité de déclencher des fonctions en réponse à des événements dans votre application.

2022-2023 28
 Flutter :base de données
Firebase est une excellente option pour stocker des données dans une application Flutter, car elle fournit une
infrastructure de backend robuste et évolutive pour stocker et synchroniser des données en temps réel.
Firebase propose deux services principaux pour stocker des données :

 Cloud Firestore :
Cloud Firestore est une base de données NoSQL qui permet de stocker et de synchroniser des données en temps réel. Elle
permet de stocker des documents dans des collections et de les organiser en hiérarchies, ce qui facilite l'organisation des
données de l'application. Firestore prend également en charge la recherche et les requêtes de données en temps réel, ce qui
permet aux utilisateurs de voir les mises à jour en temps réel.

 Realtime Database :

Realtime Database est une base de données en temps réel qui stocke des données sous forme de paires clé-valeur. Il est
utilisé pour stocker des données en temps réel dans des applications mobiles, et il est particulièrement adapté aux
applications qui nécessitent une mise à jour rapide des données en temps réel.

2022-2023 29
 résume

En résumé, Flutter offre des avantages significatifs pour les développeurs et les entreprises en termes de
développement rapide, de performances élevées et d'interface utilisateur personnalisable. Avec une
communauté en croissance et une adoption croissante par les entreprises, Flutter est une technologie
prometteuse pour l'avenir du développement d'applications mobiles et multiplateformes.

2022-2023 30
Cas pratique

Mon gestionnaire de taches IT

2022-2023 31
Merci pour votre attention

2022-2023 32