Ict 202

ICT 202
Développement
d’applications
mobiles
Evaris Fomekong
http://www.uy1.uninet.cm/
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
Descriptif seront en mesure 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;
85 GIT 85
Concepts Logiciel
Application %
IDE
GIMP
%
Mobile
Github
HTML
CSS 65 VCS
Framework
65
JAVASCRIPT %
%
TypeScript
Angular
Ionic 40%
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
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 cinq 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é
Pendant un certain temps, il semblait que les limitée pour le travail. Cela change, grâce à
appareils mobiles devaient seulement continuer l'introduction de nouveaux appareils comme l'iPad Pro
à devenir plus petits. Ensuite, l'introduction de et Surface Pro. On commence à rechercher des
l'iPhone 6 Plus a incité les constructeurs a appareils qui offrent plus d'outils et de fonctionnalités,
proposer des nouveautés plus grandes jusqu'à telles que des applications multi-écrans, des
l'introduction de l'expression "Phablet" pour applications plus avancées, une autonomie et un
décrire ces appareils surdimensionnés. stockage accrus..
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 Les fabricants sont à l'écoute et à la
plus de gens utilisaient le Web mobile que les recherche de nouvelles solutions pour
applications et que la plupart des gens sont plus augmenter la vie de la batterie sans
susceptibles de consulter un site Web sur leur compromis sur la taille et le poids des
appareil avant de télécharger une application. En appareils. Déjà, la durée de vie d'une
outre, il y a une perte importante de l'engagement batterie standard a augmenté d'environ
parmi les utilisateurs qui téléchargent des 25% au cours des cinq dernières années.
applications; il semble qu'une majorité 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 Les smartphones sont devenus de
En 1983, le monde a écrans de téléphones portables plus en plus au cœur de la vie
obtenu le tout premier pour la première fois en 1997. La moderne, offrant bien plus que de
téléphone mobile portable même année, Hagenuk a lancé le simples fonctionnalités de
sous la forme du Motorola GlobalHandy, le premier appareil communication. Le premier service
DynaTAC 8000X. Cela sans antenne externe. La 4G du Royaume-Uni a été lancé
coûtait 4000 $ USD et était personnalisation a également dans 11 villes par EE en 2012, avec
un énorme symbole de démarré de façon spectaculaire des vitesses de téléchargement
statut à l'époque. . avec Ericcson offrant des panneaux pouvant atteindre 12 Mbps.
de clavier avant de couleur
interchangeables.
1983 1998 2010
2020
Le Royaume-Uni et les
États-Unis
commencent à
déployer le réseau 5G,
1994 2003 les premières
Le GSM a été lancé pour la La mise en œuvre de la 3G a permis à indications indiquent
première fois en Europe en des vitesses de téléchargement allant des vitesses de
1991 avec l'Orbitel TPU jusqu'à 2MBS en mars 2003, "3" étant transfert de données
900 sur le marché, mais ce le premier à offrir le service au réelles 10 fois plus
n'est qu'en 1992 que les Royaume-Uni. RIM a apporté le rapides que la 4G.
téléphones portables n'ont courrier électronique mobile aux
plus été limités à une masses avec sa gamme de terminaux
utilisation professionnelle. BlackBerry populaires comme le 8100
Pearl. L'avènement des caméras
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.
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.
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 ❖ Meilleure rapidité, fiabilité et dotée d’une

temps à être développées et sont meilleure réactivité ainsi qu’une résolution
relativement 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 fonctionner, ce qui est un réel avantage.
effet, elles doivent passer par une Même en 2017, il existe encore des zones
batterie de tests de validation de ces très peu couvertes par le réseau internet
Stores, qui peut les accepter ou les
refuser.
Application Web
ou Plateformes
Ionic.
Monaca
Web Apps Onsen UI
Framework7
Laganges
Javascript
CSS
Html
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
Ionic HTML Ionic Atom
Monaca CSS Monaca Webstorm
Onsen UI Javascript Onsen Visual Studio
Framework 7 TypeScript Sublime

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

Flutter
PhoneGap
Langages
Javascript
CSS
Html
TypeScript
Frameworks
Angular
React
Vue
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
Flutter Dark Alphabet (Google) Android Studio
React Native Javascript(React) Facebook Visual Studio
Javascript(Angular,Re
Ionic Ionic Visual Studio
act, ES6, Vue)
Phonegap Javascript Apache Visual Studio

❖ Un de taille, elles n’ont pas accès à ❖ Réduction des coûts de développement,

toutes les fonctions avancées présentes embauche de développeurs natifs,
sur le mobile. maintenance de la base de code
❖ Temps de mise sur le marché plus rapide

❖ Les performances manquent comparé à sur les deux plateformes
des applications natives
❖ Facilité de maintenance via des instruments
❖ Dépendance aux plugins de 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
Cas Ionic UI
Html.
CSS
SCSS
Metier
Javascript
TypeScript
Angular
Ionic
Resources
Config
Build
Ionic Avance
Resource Native
Appels API
Deploiement
0%
Progression
Ionic est un framework open source qui permet de créer des applications mobiles grâce aux
technologie simple du web à savoir HTML / CSS / Javascript / Cordova. On appelle cela des
applications Hybride.
Theorie Pratique
Le fonctionnement théorique d’Ionic En pratique Ionic est très simple
n’est pas très compliqué. C’est une d’utilisation pour toutes personnes
jonction subtile entre Angular ayant déjà fait du développement web.
(Javascript) / HTML / CSS et D’autant plus si vous avez déjà
Cordova.. travaillé avec Angular.
Cordova/Capacitor UI/UX
Il permet de crée des applications En effet, pour tout ce qui va être le «
natives mobiles en agissant comme theming » donc faire une jolie
un container qui va permettre d’utiliser application Ionic embarque déjà dans
les fonctions natives des téléphones sa documentation énormément de
(par exemple le GPS, l’accéléromètre, composants.
les fonctions de partage intégré,
l’appareil photo …)
Road Map
RESOURCE NATIVE
APPELS API
HTML/CSS ANGULAR DEPLOIEMENT SUR STORE
UI FRAMEWORK IONIC AVANCE
1 3 5
2 4
METIER IONIC
JAVASCRIPT/TYPESCRIPT RESOURCE
CONFIG
UI COMPONENT
BUILD
HTML/CSS
HTML
Le HTML et le CSS sont des langages web de base ; on

Synopsis commence donc généralement par leur apprentissage car ils
sont assez simples à comprendre et car ils sont
incontournables..
Ce cours n’est pas qu’un simple empilage de connaissances :

l’idée est au contraire de vous accompagner un maximum afin
que vous compreniez à quoi correspond chaque notion,
quand utiliser tel élément de langage plutôt que tel autre,
comment s’imbriquent les différents éléments de langage et
les langages ensemble pour qu’à la fin du cours vous soyez
totalement autonomes et sachiez résoudre des
problématiques relativement complexes.
HTML
Role
Historique
Le rôle du HTML est donc crucial puisqu’il va être
Le HTML est un langage qui a été créé
notre langage privilégié pour indiquer aux
en 1991. Les sigles « HTML » sont
navigateurs ce quoi est constituée chaque page et
l’abréviation de « HyperText Markup
ce qu’ils doivent afficher. Grâce au HTML, on va
Language » ou « langage de balisage
par exemple pourvoir indiquer que tel contenu est
hypertexte » en français.
un texte qui n’est qu’un paragraphe, que tel autre
contenu est un texte qui est un titre de niveau 1
dans notre page, que tel autre contenu est une
html liste, un lien, etc..
Language Exemple
Le HTML est donc un langage de
balisage, c’est-à-dire un langage qui va
nous permettre de définir les différents
contenus d’une page.
CSS
Role
Historique
Le CSS vient résoudre un problème bien différent
Le CSS a été créé en 1996, soit 5 ans
du HTML : en effet, le HTML sert à définir les
après le HTML. Les sigles « CSS » sont
différents éléments d’une page, à leur donner du
l’abréviation de « Cascading
sens. Le CSS, lui, va servir à mettre en forme les
StyleSheets » ou « feuilles de styles en
différents contenus définis par le HTML en leur
cascade » en français.
appliquant des styles.
css
Language Exemple
Le HTML va donc créer la structure des pages
tandis que le CSS va nous permettre de
modifier l’apparence des contenus de la page.
On va ainsi par exemple pouvoir définir la
taille, la couleur ou l’alignement de certains
contenus HTML et notamment en l’occurrence
de certains textes dans notre page.
HTML
Les bases.
✓ Le langage HTML tout entier repose sur l’utilisation d’éléments. Si vous comprenez bien ce qu’est
un élément (balise), vous comprenez le HTML..
✓ Les éléments HTML vont nous permettre de créer la structure d’une page HTML, de définir chaque
contenu de notre page et également de passer certaines informations utiles au navigateur pour
afficher la page.
✓ Dans une page, nous allons utiliser les éléments en HTML pour marquer du contenu, c’est-à-dire
pour lui donner du sens aux yeux des navigateurs et des moteurs de recherche.
✓ Aujourd’hui, il existe plus de 120 éléments HTML différents aux rôles très variés et qui font la
richesse de ce langage.
.
HTML
Les balises.
✓ Un élément HTML peut être soit constitué d’une paire de balises (ouvrante et fermante) et d’un
contenu, soit d’une balise unique qu’on dit alors « orpheline ».
✓ L’élément p (qui sert à définir un paragraphe) est par exemple constitué d’une balise ouvrante,
d’une balise fermante et d’un contenu textuel entre les balises. L’idée ici est que le texte contenu
entre les deux balises va être le texte considéré par le navigateur comme étant un paragraphe.
✓ Comme vous pouvez le constater, la balise ouvrante de l’élément est constituée d’un chevron
ouvrant <, du nom de l’élément en question et d’un chevron fermant >.
✓ . Certains éléments en HTML ne vont être constitués que d’une balise qu’on appelle alors orpheline.
Cela va être le cas pour certains éléments qui ne possèdent pas de contenu textuel comme
l’élément br par exemple qui sert simplement à créer un retour à la ligne en HTML et qui va s’écrire
comme ceci
Exemple
HTML
Les attributs.
✓ les éléments vont également pouvoir contenir des attributs qu’on va alors placer au sein de la balise
ouvrante de ceux-ci.
✓ Pour certains éléments, les attributs vont être facultatifs tandis que pour d’autres ils vont être
obligatoires pour garantir le bon fonctionnement du code HTML.
✓ Les attributs vont en effet venir compléter les éléments en les définissant plus précisément ou en
apportant des informations supplémentaires sur le comportement d’un élément.
✓ . Un attribut contient toujours une valeur, qu’on peut cependant parfois omettre dans le cas des
attributs ne possédant qu’une seule valeur (car la valeur est alors considérée comme évidente).
Exemple
La structure minimale
d’une page HTML
✓ Le DOCTYPE: sert à indiquer le type du document.
Standards Structure
✓ L’élément HTML: L’élément html va représenter notre page en
Le W3C, en définissant des standards Le schéma de base d’une page HTML
soi. On va insérer tout le contenu de notre page (et donc les
de développement, a véritablement va donc toujours être le même. C’est
autres éléments) à l’intérieur de celui-ci.
simplifié la tâche aux développeurs.. ce que nous appellerons la « structure
minimale d’une page HTML valide ».
✓ Les éléments head et body: L’élément head est un élément
d’en-tête. Il va contenir des éléments qui vont servir à fournir
des informations sur la page au navigateur. L’élément body va Etat de l’art Variantes
lui contenir tous les éléments définissant les contenus « En effet aujourd’hui, tous les Cependant, cela n’est possible que
visibles » de la page, c’est-à-dire les contenus à destination de navigateurs sérieux suivent les parce que les développeurs eux-
l’utilisateur. standards proposés par le W3C, ce mêmes suivent certains schémas de
qui n’était pas forcément le cas dans construction de leur page qui sont
✓ L’élément meta : sert lui à transmettre des meta informations le passé. anticipables et attendus par les
sur la page au navigateur. Cet élément possède de nombreux navigateurs.
attributs différents.
HTML
Les entités.
✓ Le HTML possède des caractères réservés. Par exemple, vous ne pouvez pas écrire les signes «
< » et « > » tels quels dans vos pages web, tout simplement car le navigateur pensera que vous
venez d’ouvrir une balise d’élément.
✓ Pour remédier à ce problème, nous allons devoir « échapper » ces caractères réservés en utilisant
ce qu’on appelle des entités HTML. Les entités vont être des suites de caractères représentant un
caractère réservé en HTML.
✓ Voici quelques-unes des entités les plus courantes et leur signification :
Exemple
CSS
Les bases (les selecteurs).
✓ Le CSS est un langage qui a été inventé pour styliser les contenus de nos pages en leur appliquant
des styles.
✓ Pour pouvoir appliquer un style à un contenu, il va déjà falloir le cibler, c’est-à-dire trouver un moyen
d’indiquer qu’on souhaite appliquer tel style à un contenu en particulier.
✓ Pour cela, nous allons utiliser des sélecteurs. Les sélecteurs sont l’un des éléments fondamentaux
du CSS.
✓ De manière très schématique et très simplifiée, nous allons utiliser nos sélecteurs en CSS pour
cibler des contenus HTML et leur appliquer des styles.
✓ Il existe différents types de sélecteurs en CSS : certains sélecteurs vont s’appuyer sur le nom des
éléments, comme le sélecteur CSS p par exemple qui va servir à cibler tous les éléments p d’une
page. Ce type de sélecteurs est appelé « sélecteur d’éléments » tout simplement car ils vont être
identiques aux éléments HTML sélectionnés ou encore « sélecteurs simples ».
✓ D’autres sélecteurs, en revanche, vont être plus complexes et nous permettre de sélectionner un
élément HTML . en particulier ou un jeu d’éléments HTML en fonction de leurs attributs ou même de
leur état : on va ainsi pouvoir appliquer des styles à un élément uniquement lorsque la souris de
l’utilisateur passe dessus par exemple.
Les propriétés CSS
Définition
Les propriétés vont nous permettre de choisir quel(s)
aspect(s) (ou “styles”) d’un élément HTML on souhaite
modifier.
Par exemple, nous allons pouvoir modifier la couleur
d’un texte et lui appliquer la couleur que l’on souhaite
grâce à la propriété color (« couleur », en français).
Une propriété va être accompagnée d’une ou plusieurs

valeurs qui vont définir le comportement de cette
propriété.
Où écrire le code CSS
✓ Avant d’étudier les mécanismes du CSS en soi, il convient de comprendre où placer le code CSS
afin qu’il s’applique bien à un fichier HTML.
✓ Dans le cas présent, nous avons notre code HTML d’un côté et nous aimerions lui appliquer des
styles en CSS. Cependant, il va falloir d’une manière ou d’une autre « lier » notre code CSS à notre
code HTML afin que les éléments de nos pages HTML tiennent bien compte des styles qu’on a
voulu leur appliquer en CSS.
✓ Pour faire cela, nous allons pouvoir écrire le code CSS à trois endroits différents. Chaque méthode
va présenter des avantages et des inconvénients selon une situation donnée et c’est le sujet que
nous allons aborder dans cette leçon.
écrire le CSS au sein écrire le CSS dans Déclarer le CSS au sein du

du fichier HTML. un fichier séparé fichier HTML, dans des
attributs style
Sélecteurs CSS simples et combinateurs
Synopsis
Le CSS va nous permettre de mettre en forme nos contenus HTML en appliquant des
styles aux différents éléments. Cependant, pour appliquer un style particulier à un ou
plusieurs éléments HTML en CSS, il va avant tout falloir les cibler, c’est-à-dire indiquer
avec précision à quels éléments doivent s’appliquer les styles créés en CSS.
Le but de cette leçon est d’apprendre à se servir de quelques sélecteurs CSS « simples
» et de comprendre leur limitation. Nous allons également en profiter pour définir plus
précisément les différents types de sélecteurs CSS et directement voir comment
combiner différents sélecteurs simples pour en créer des plus complexes.
Sélecteurs éléments « simples »
Content Here
La manière la plus simple de cibler un
type d’éléments HTML en CSS est
néanmoins d’utiliser des sélecteurs
éléments ou sélecteurs « simples ».
Ces sélecteurs sont appelés «
sélecteurs éléments » tout simplement
car ils reprennent le nom des
éléments HTML qu’ils sélectionnent..
Limites
En effet, en utilisant uniquement les
sélecteurs éléments, nous allons être
obligés d’appliquer les mêmes styles à
tous les éléments d’un même type ce
qui n’est pas très flexible.
Exemple
Comment appliquer des styles à un
Par exemple, le sélecteur CSS p va élément en particulier ou à plusieurs
cibler tous les éléments p (c’est-à-dire éléments différents choisis ? Pour
tous les paragraphes) d’une page faire cela, nous allons devoir utiliser
HTML. des sélecteurs complexes.
.
Sélecteurs complexes et combinateurs
Synopsis
En effet, en plus des sélecteurs simples, le
CSS met à notre disposition une panoplie de
sélecteurs que l’on va pouvoir utiliser pour
cibler des contenus de manière très précise
Exemple
On va pouvoir utiliser des sélecteurs CSS
combinateurs qui vont être en fait la combinaison de
plusieurs sélecteurs simples à l’aide de caractères
spéciaux à la signification précise ;
On va pouvoir cibler des contenus HTML selon le fait

qu’ils possèdent un certain attribut ou même selon la
valeur d’un attribut ;
On va pouvoir utiliser les pseudo classes qui vont

nous permettre d’appliquer des styles à des éléments
en fonction de leur état, c’est-à-dire en fonction des
actions d’un utilisateur (contenu cliqué, coché, visité,
etc.), de la place de l’élément dans le document, etc. ;
On va pouvoir utiliser les pseudo éléments qui vont

nous permettre de n’appliquer des styles qu’à
certaines parties des éléments..
Attributs « class » et « id »
Synopsis Priorites
Ces deux attributs sont particuliers en HTML L’ordre de priorité d’application des
puisqu’ils n’ont pas été créés pour préciser le styles en CSS est le suivant (du plus
fonctionnement d’un élément HTML en particulier prioritaire ou moins prioritaire) :
(ce qui est normalement le rôle de tout attribut 1. Les styles liés à un sélecteur #id ;
HTML) mais vont être principalement utilisés
pour cibler certains éléments HTML et leur 2. Les styles liés à un sélecteur .class.
appliquer des styles en CSS.
3. Les styles liés à un sélecteur
Les attributs HTML class et id sont des attributs élément ;
dits globaux car on va pouvoir les ajouter dans la
balise ouvrante de n’importe quel élément HTML.
Caracterisques
Les valeurs indiquées pour les attributs ne doivent
contenir ni caractères spéciaux ni espaces et
commencer par une lettre. En pratique, on
essaiera d’attribuer des valeurs qui font sens à
nos différents attributs.
Notez déjà que chaque id doit avoir une valeur
propre ou unique dans une page. En revanche, on
va pouvoir attribuer la même valeur à plusieurs
attributs class différents.
SASS
Sass est un préprocesseur CSS. Un préprocesseur est un

Synopsis programme qui procède à des transformations sur un code
source avant l’étape de traduction proprement dite
(compilation dans le cas de Sass ou interprétation pour
d’autres types de préprocesseur).
Sass permet en quelques sortes “d’étendre” les possibilités du CSS

classique en nous permettant d’utiliser des variables, des règles imbriquées,
des mixins, des fonctions, etc. Nous allons voir dans la suite de ce cours en
quoi ces éléments vont nous aider à créer un meilleur CSS, plus intuitif et
mieux organisé.
La structure d’un fichier SCSS va ressembler à celle de nos fichiers CSS

classiques : nous allons utiliser des déclarations pour indiquer quels styles
doivent être appliqués à quels éléments. Cependant, nous allons également
pouvoir utiliser des fonctionnalités propres à SASS pour nous permettre
d’avoir un code plus clair et plus facilement maintenable, comme par
exemple l’imbrication de sélecteurs ou l’héritage de règles CSS.
Syntaxes SASS (sass/scss)
concept
Avant d’utiliser Sass à proprement parler, vous devez savoir
que SASS supporte deux syntaxes différentes. Ces deux
syntaxes sont représentées par deux extensions de fichiers
différentes : les extensions .scss et .sass:
✓ La syntaxe liée à l’extension .sass, qu’on appelle encore

“syntaxe indenté”, est la syntaxe originelle de Sass. Cette
syntaxe utilise notamment l’indentation à la place des
accolades pour spécifier la structure du document.
✓ La syntaxe liée à l’extension .scss est un sur-ensemble

du CSS, ce qui signifie que tout code CSS valide est
également reconnu et valide en SCSS. Cela rend cette
syntaxe plus simple d’utilisation que la précédente, et c’est
donc sur celle-ci que ce cours sera basé.
SASS
Les variables
✓ Une variable Sass est un conteneur pour une valeur. L’idée est de lier un nom à une valeur puis d’utiliser ensuite ce nom à la place de la
valeur dans le code. Le nom utilisé sera ensuite converti automatiquement en la valeur à laquelle il est lié.
✓ Les variables Sass sont très simple d’utilisation : il suffit d’utiliser un signe $ (dollar) suivi d’un nom pour déclarer (c’est-à-dire créer) une
variable et d’affecter une valeur à ce nom en séparant le nom de la valeur par le signe : (deux-points).
✓ Sass met à notre disposition le drapeau !default qui permet de réaliser cela. En effet, ce drapeau permet d’indiquer qu’une valeur doit
être affectée à une variable uniquement si cette variable n’est pas définie ou si sa valeur est null.
✓ La “portée” des variables définit l’espace dans lequel les variables vont être accessibles. Les variables SASS peuvent avoir une portée
soit globale, soit locale.
✓ Les variables déclarées en dehors des accolades (dans les fichiers .scss) sont appelées variables globales. Les variables globales sont
disponibles (utilisables) n’importe où après leur déclaration, même dans une autre feuille de style.
✓ Les variables déclarées dans des blocs (les accolades dans les fichiers .scss) sont généralement locales et ne sont accessibles que
dans le bloc où elles ont été déclarées.
✓ le drapeau SASS !global qui permet d’indiquer qu’une variable doit être considérée comme globale quelque soit l’endroit où elle a été
déclarée.
.
SASS
Les fontions
✓ Une fonction est un bloc de code contenant une suite d’instructions
cohérentes et dont le rôle est d’effectuer une tâche précise.
✓ L’idée de base d’une fonction est d’effectuer des calculs ou opérations

dans son corps et de renvoyer une valeur en résultat. Généralement,
les calculs vont être faits en fonction de certaines données qu’on va
devoir passer à la fonction pour qu’elle fonctionne. On appelle ces
données des arguments.
✓ Il existe deux grands moyens d’utiliser les fonctions avec Sass : on

peut soit utiliser des fonctions Sass prédéfinies ou “prêtes à l’emploi”,
soit créer nos propres fonctions.
✓ En programmation, les fonctions servent généralement deux objectifs :
✓ Gagner du temps de développement / simplifier nos scripts ;
✓ Masquer la complexité de certaines opérations.
✓ le drapeau SASS !global qui permet d’indiquer qu’une variable doit

être considérée comme globale quelque soit l’endroit où elle a été
déclarée. .
SASS
Les imbrications
✓ L’imbrication et donc la hiérarchisation de la structure d’une page est
l’un des principes fondamentaux du HTML.
✓ Le CSS, en contrepartie, n’offre toujours pas à ce jour de moyen

d’imbriquer les sélecteurs CSS de la même façon qu’on imbrique les
éléments HTML les uns dans les autres.
✓ Sass propose cette fonctionnalité. Cela permet une meilleure

organisation et lisibilité du code CSS dans son ensemble.
✓ Le sélecteur parent & est un sélecteur spécial inventé par Sass qui
est utilisé dans les sélecteurs imbriqués pour faire référence au
sélecteur extérieur.
✓ Ce sélecteur peut être utile si on souhaite réutiliser le sélecteur

externe de manière plus complexe, comme par exemple pour ajouter
une pseudo-classe ou pour ajouter un sélecteur avant le parent.
.
SASS
L’heritage
✓ Sass nous permet à travers une règle @extend de mettre en place
un système d’héritage des styles d’un sélecteur à un autre.
✓ Concrètement, nous allons pouvoir définir un ensemble de propriétés

CSS qu’on va lier à un sélecteur puis utiliser @extend pour partager
cet cet ensemble de propriétés avec d’autres sélecteurs.
✓ Sass propose cette fonctionnalité. Cela permet une meilleure

organisation et lisibilité du code CSS dans son ensemble.
✓ Le sélecteur % permet de créer un ensemble de règles qui

n’apparaitront dans la sortie CSS (dans le rendu final). Cela permet
donc de créer des ensembles de règles qu’on va ensuite pouvoir
utiliser ou pas et permet donc d’avoir un fichier de style beaucoup
plus clair et concis.
.
SASS
Mixins/boucles/conditions/import
✓ Les mixins Sass nous permettent de créer des groupes de déclarations CSS en vue de
les réutiliser plus tard dans notre code.
✓ On va créer un mixant Sass avec la règle @mixin. Il va falloir donner un nom à chacun
de nos mixins pour pouvoir s’ne resservir plus tard. Ensuite, on va inclure nos mixins
dans n’importe quelle déclaration CSS grâce à la règle @include.
✓ Sass met à notre disposition quatre règles @ nous permettant de générer des structures
de contrôle qui vont se manifester soit sous forme de conditions (le code ne sera exécuté
que si telle condition est remplie), soit sous forme de boucles (le code sera exécuté un
certain nombre de fois tant qu’une condition de sortie de boucle n’est pas vérifiée).
✓ @if et @else permettent d’exécuter un bloc de code SI (if) une condition est
remplie ou d’exécuter un autre code SINON (else) ;
✓ @each évalue un bloc pour chaque élément d’une liste ou chaque paire d’une
map (le mapping correspond au fait de lier certaines données entre elles) ;
✓ @for évalue un bloc un nombre de fois précisé lors de la création de la règle (le
nombre d’évaluation est connu à l’avance) ;
✓ @while évalue un bloc jusqu’à ce qu’une certaine condition de sortie soit remplie
(le nombre d’évaluation n’est pas connu à l’avance).
✓ Le CSS dispose d’une option d’importation du code à travers la règle @import qui nous
.
permet d’importer des règles dans une feuille de style à partir d’autres fichiers CSS.
✓ Sass s’appuie sur cette règle @import et nous offre une option d’importation
avec @import moins gourmande en termes de ressources puisqu’au lieu de créer une
nouvelle requête HTTP Sass va récupérer le fichier qu’on souhaite importer et le
combiner avec le fichier dans lequel on l’importe afin de n’envoyer au final qu’une seule
feuille de style au navigateur.
30%
Progression
Metier. (Javascript/Typescript/Angular)
Theorie Pratique
JavaScript
Le JavaScript est un langage de programmation créé en 1995.

Synopsis Le JavaScript est aujourd’hui l’un des langages de
programmation les plus populaires et il fait partie des
langages web dits « standards » avec le HTML et le CSS. Son
évolution est gérée par le groupe ECMA International qui se
charge de publier les standards de ce langage.
Pour définir ce qu’est le JavaScript et le situer par rapport aux autres

langages, et donc pour comprendre les intérêts et usages du JavaScript il
faut savoir que :
Le JavaScript est un langage dynamique ;

Le JavaScript est un langage (principalement) côté client ;
Le JavaScript est un langage interprété ;
Le JavaScript est un langage orienté objet.
JAVASCRIPT
un langage dynamique
✓ Le JavaScript est un langage dynamique, c’est-à-dire un langage qui va nous permettre de générer
du contenu dynamique pour nos pages web.
✓ Un contenu « dynamique » est un contenu qui va se mettre à jour dynamiquement, c’est-à-dire

changer sans qu’on ait besoin de modifier le code manuellement mais plutôt en fonction de
différents facteurs externes.
✓ Le HTML et le CSS forment un premier couple très puissant. Cependant, nous allons être limités si
nous n’utilisons que ces deux langages tout simplement car ce sont des langages qui ne permettent
que de créer des pages « statiques ».
✓ le JavaScript entre en jeu : ce langage va nous permettre de manipuler des contenus HTML ou des
styles CSS et de les modifier en fonction de divers évènements ou variables. Un évènement peut
être par exemple un clic d’un utilisateur à un certain endroit de la page tandis qu’une variable peut
être l’heure de la journée.
.
JAVASCRIPT
Le JavaScript, un
Le JavaScript, un langage orienté JavaScript, API, librairies et framework
un langage (principalement)
langage interprété objet
côté client
Le JavaScript en tant que langage correspond à un ensemble de structures de

On peut encore séparer
codes ou un ensemble d’éléments qu’on va pouvoir utiliser pour implémenter des
Un langage « côté client » ou « les langages selon qu’ils
fonctionnalités sur nos pages web.
client side » est un langage qui puissent être exécutés
va être exécuté dans le directement (on parlera La programmation
Les API et les librairies JavaScript sont construites à partir de ces éléments de
navigateur des utilisateurs qui alors de langages orientée objet est
base du JavaScript et vont nous permettre d’utiliser des structures plus complexes
demandent la page. On peut interprétés) ou qu’il faille un paradigme de
déjà prêtes à l’emploi qui vont in-fine nous permettre de réaliser simplement des
également appeler ces langages les transformer en une programmation qui
opérations qu’il aurait été très difficile de réaliser si on avait dû les coder
des langages « web » puisqu’ils autre forme pour pouvoir se base sur une
entièrement à la main.
sont principalement utilisés dans les exécuter (on parlera abstraction du
un contexte web. le JavaScript alors le langages monde réel pour
une librairie est un ensemble de fichiers qu’on va télécharger et contient un
est un langage principalement compilés). créer des modèles.
ensemble de structures de codes prêtes à l’emploi.
utilisé côté client, mais qui va Plusieurs
également pouvoir s’utiliser côté Le JavaScript est un techniques sont
une API, de l’autre côté, va nous permettre d’utiliser une application qu’on n’a pas
serveur à condition qu’on mette langage interprété. Cela utilisées, provenant
le droit de manipuler directement.
en place un environnement signifie qu’il va pouvoir de paradigmes
favorable (en utilisant Node.js être exécuté directement précédents,
un framework ou « cadre de travail » est relativement similaire dans son but à une
par exemple). sous réserve qu’on comme la
« super librairie ». Les framework vont également nous fournir un ensemble de
possède le logiciel modularité, le
codes tout prêts pour nous faire gagner du temps en développement.
Dans ce cours, nous allons interpréteur. Pas de polymorphisme, ou
La grande différence entre un framework et une librairie réside dans l’inversion du
exclusivement nous concentrer panique ici : tous les l'encapsulation.
contrôle : lorsqu’on télécharge une librairie, on peut l’utiliser comme on le souhaite
sur un usage du JavaScript côté navigateurs connus
en intégrant ses éléments à nos scripts tandis que pour utiliser un framework il
client. possèdent leur
faut respecter son cadre (ses règles).
interpréteur JavaScript.
Les framework JavaScript les plus connus aujourd’hui sont Angular.js et React.js.
Comme Attribut
Directement dans la balise ouvrante d’un Où écrire le
élément HTML ;
code JavaScript ?
Comme Balise
Dans un élément script, au sein d’une
page HTML ;
Comme fichier séparé

Dans un fichier séparé contenant
exclusivement du JavaScript et portant
l’extension .js.
Workflow
En effet résumons ce qu’il se passe dans ce
cas :
Le navigateur commence à analyser (ou à traiter)
le code HTML ;
L’analyseur du navigateur rencontre un
élément script ;
Le contenu JavaScript est demandé et
téléchargé (dans le cas où il se situe dans un
fichier externe) puis exécuté. Durant tout ce
temps, l’analyseur bloque l’affichage du HTML,
ce qui peut dans le cas où le script est long
ralentir significativement le temps d’affichage de
la page ;
Dès que le JavaScript a été exécuté, le contenu
HTML finit d’être analysé et est affiché.
JAVASCRIPT
Variables
✓ Une variable est un conteneur servant à stocker des informations de
manière temporaire, comme une chaine de caractères (un texte) ou un
nombre par exemple.
✓ Le propre d’une variable est de pouvoir varier, c’est-à-dire de pouvoir

stocker différentes valeurs au fil du temps et c’est cette particularité qui
les rend si utiles.
✓ Une variable est donc un conteneur ou un espace de stockage temporaire

qui va pouvoir stocker une valeur. Lorsqu’on stocke une valeur dans une
variable, on dit également qu’on assigne une valeur à une variable.
✓ Pour déclarer une variable en JavaScript, nous allons devoir utiliser le mot
clef var.
✓ Le propre d’une variable et l’intérêt principal de celles-ci est de pouvoir

stocker différentes valeurs.
✓ Pour affecter une nouvelle valeur dans une variable déjà initialisée, on va
se contenter d’utiliser à nouveau l’opérateur d’affectation =.
.
JAVASCRIPT
Structures de controle
✓ On appelle « structure de contrôle » un ensemble d’instructions qui
permet de contrôler l’exécution du code.
✓ Il existe deux grands types de structure de contrôle de base qu’on

retrouve dans la plupart des langages informatiques et notamment en
JavaScript : les structures de contrôle conditionnelles (ou plus simplement
les « conditions ») et les structures de contrôle de boucles (ou plus
simplement les « boucles »).
✓ Les conditions vont nous permettre d’exécuter un certain nombre

d’instructions si et seulement si une certaine condition est vérifiée.
✓ Nous avons accès aux structures conditionnelles suivantes en
JavaScript :
✓ La condition if (si) ;
✓ La condition if… else (si… sinon) ;
✓ La condition if… elseif… else (si… sinon si… sinon)
.
JAVASCRIPT
Structures de controle
✓ Les boucles vont nous permettre d’exécuter un bloc de code en boucle

tant qu’une condition donnée est vérifiée.
✓ Pour rappel, nous pouvons utiliser les boucles suivantes en
JavaScript :
✓ La boucle while ;
✓ La boucle do… while ;
✓ La boucle for ;
✓ La boucle for… in ;
✓ La boucle for… of ;
✓ La boucle for await… of.
.
JAVASCRIPT
Fonction
✓ Une fonction correspond à un bloc de code nommé et réutilisable et dont le but est d’effectuer
une tâche précise.
✓ Le langage JavaScript dispose de nombreuses fonctions que nous pouvons utiliser pour
effectuer différentes tâches. Les fonctions définies dans le langage sont appelées fonctions
prédéfinies ou fonctions prêtes à l’emploi car il nous suffit de les appeler pour nous en servir.
✓ L’intérêt principal des fonction prédéfinies est de nous permettre de réaliser des opérations
complexes de manière très simple : en les appelant, tout simplement.
✓ En plus des nombreuses fonctions JavaScript prédéfinies et immédiatement utilisables, nous

allons pouvoir créer nos propres fonctions en JavaScript lorsque nous voudrons effectuer une
tâche très précise.
✓ Pour pouvoir utiliser une fonction personnalisée, en pratique, il faut déjà la définir. Pour définir
une fonction, on va utiliser le mot clef function suivi du nom que l’on souhaite donner à notre
fonction puis d’un couple de parenthèses.
✓ Les arguments d’une fonction sont des valeurs qu’on va passer à notre fonction afin qu’elle
fonctionne normalement ou pour préciser le comportement qu’elle doit adopter. Certaines
fonctions ne vont pas nécessiter d’arguments, d’autres vont avoir besoin
. d’un argument, d’autres
de deux, etc. De plus, certains arguments vont être obligatoires tandis que d’autres vont être
facultatifs.
✓ Une fonction récursive est une fonction qui va s’appeler elle-même au sein de son code.Tout
comme pour les boucles, les fonctions récursives vont nous permettre d’exécuter une action en
boucle et jusqu’à ce qu’une certaine condition de sortie soit vérifiée.
JAVASCRIPT
POO
✓ Un « paradigme » de programmation est une façon d’approcher la programmation informatique,

c’est-à-dire une façon de voir (ou de construire) son code et ses différents éléments.
✓ Il existe trois paradigmes de programmation particulièrement populaires, c’est-à-dire trois

grandes façons de penser son code :
✓ La programmation procédurale ;
✓ La programmation fonctionnelle ;
✓ La programmation orientée objet.
✓ La programmation orientée objet est une façon de concevoir un code autour du concept d’objets.
Un objet est une entité qui peut être vue comme indépendante et qui va contenir un ensemble
de variables (qu’on va appeler propriétés) et de fonctions (qu’on appellera méthodes). Ces
objets vont pouvoir interagir entre eux.
✓ La plupart des langages supportent aujourd’hui plusieurs paradigmes et le JavaScript, en

particulier, supporte chacun des trois paradigmes principaux cités ci-dessus ce qui signifie qu’on
va pouvoir coder en procédural, en fonctionnel et en orienté objet en JavaScript ;
✓ Les intérêts supposés principaux de développer en orienté objet plutôt qu’en procédural par
exemple sont de permettre une plus grande modularité ou flexibilité du code ainsi qu’une
meilleure lisibilité et une meilleure maintenabilité de celui-ci. .
✓ Nous pouvons créer des objets de 4 manières différentes en JavaScript. On va pouvoir :

✓ Créer un objet littéral ;
✓ Utiliser le constructeur Object() ;
✓ Utiliser une fonction constructeur personnalisée ;
✓ Utiliser la méthode create().
JAVASCRIPT
POO (Classe)
✓ Il existe deux grands types de langages orientés objet : ceux basés sur les classes,
et ceux basés sur les prototypes.Le JavaScript est un langage orienté objet basé sur
la notion de prototypes, mais la plupart des langages supportant l’orienté objet sont
basés sur les classesLa programmation orientée objet.
✓ Le JavaScript est un langage objet basé sur les prototypes. Cela signifie que le
JavaScript ne possède qu’un type d’élément : les objets et que tout objet va pouvoir
partager ses propriétés avec un autre, c’est-à-dire servir de prototype pour de
nouveaux objets. L’héritage en JavaScript se fait en remontant la chaine de
prototypage.
✓ Récemment, le JavaScript a introduit une syntaxe utilisant les classes pour son
modèle objet. Cette syntaxe est copiée sur les langages orientés objets basés sur les
classes et nous permet concrètement de mettre en place l’héritage en JavaScript
plus simplement.Attention:cependant, le JavaScript est toujours un langage orienté
objet à prototypes et, en tâche de fond, il va convertir nos « classes » selon son
modèle prototypes.
✓ En plus de la possibilité d’utiliser l’orienté objet pour créer nos propres objets et nos
propres chaines de prototypage, le JavaScript possède des objets (constructeurs)
.
prédéfinis ou natifs comme Object(), Array(), Function(), String(), Number(), etc.
JAVASCRIPT
Asynchrone (Callback) 1/2
✓ on dit que deux actions sont synchrones lorsqu’elles se déroulent en même temps ou
de manière synchronisée. Au contraire, deux opérations sont asynchrones si elles ne
se déroulent pas en même temps ou ne sont pas synchronisées. En informatique,
on dit que deux opérations sont synchrones lorsque la seconde attend que la
première ait fini son travail pour démarrer.
✓ Au contraire, deux opérations sont qualifiées d’asynchrones en informatique

lorsqu’elles sont indépendantes c’est-à-dire lorsque la deuxième opération n’a pas
besoin d’attendre que la première se termine pour démarrer.
✓ Par défaut, le JavaScript est un langage synchrone, bloquant et qui ne s’exécute que
sur un seul thread. Cela signifie que :
✓ Les différentes opérations vont s’exécuter les unes à la suite des autres (elles
sont synchrones) ;
✓ Chaque nouvelle opération doit attendre que la précédente ait terminé pour
démarrer (l’opération précédente est « bloquante ») ;
✓ Le JavaScript ne peut exécuter qu’une instruction à la fois (il s’exécute sur un
thread, c’est-à-dire un « fil » ou une « tache » ou un « processus » unique).
✓ Pour éviter de bloquer totalement le navigateur et le reste du script, on
aimerait que ce genre d’opérations se déroule de manière asynchrone, c’est-
à-dire en marge du reste du code et qu’ainsi le reste du code ne. soit pas
bloqué.
✓ Le premier outil utilisé en JavaScript pour générer du code asynchrone a été les
fonctions de rappel. En effet, une fonction de rappel ou « callback » en anglais est
une fonction qui va pouvoir être rappelée (« called back ») à un certain moment et /
ou si certaines conditions sont réunies.
JAVASCRIPT
Asynchrone (Promise) 2/2
✓ Utiliser des fonctions de rappel pour générer du code asynchrone fonctionne mais
possède certains défauts. Le principal défaut est qu’on ne peut pas prédire quand notre
fonction de rappel asynchrone aura terminé son exécution, ce qui fait qu’on ne peut pas
prévoir dans quel ordre les différentes fonctions vont s’exécuter.
✓ En 2015, cependant, le JavaScript a intégré un nouvel outil dont l’unique but est la
génération et la gestion du code asynchrone : les promesses avec l’objet
constructeur Promise. C’est à ce jour l’outil le plus récent et le plus puissant fourni par le
JavaScript nous permettant d’utiliser l’asynchrone dans nos scripts (avec la
syntaxe async et await basée sur les promesses et que nous verrons en fin de partie).
✓ Plutôt que d’attacher des fonctions de rappel à nos fonctions pour générer des
comportements asynchrones, nous allons créer ou utiliser des fonctions qui vont renvoyer
des promesses et allons attacher des fonctions de rappel aux promesses. Une opération
asynchrone peut être dans l’un des états suivants :
✓ Opération en cours (non terminée) ;
✓ Opération terminée avec succès (promesse résolue) ;
✓ Opération terminée ou plus exactement stoppée après un échec (promesse
rejetée).
✓ Pour obtenir et exploiter le résultat d’une promesse, on va généralement utiliser la

méthode then() pour le succes et catch() pour l’echec du constructeur. Promise.
✓ Les premières méthodes à connaitre sont les méthodes resolve() et reject() qui vont
nous permettre de créer manuellement des promesses déjà résolues ou rejetées et qui
vont donc être utiles pour démarrer manuellement une chaine de promesses.
✓ En plus de cela, nous allons pouvoir utiliser la méthode all() de Promise qui va prendre
en argument un tableau de promesses et retourner une nouvelle promesse.
JAVASCRIPT
Storage
✓ L’API Web Storage permet de stocker des données sous forme de paires
clefs/valeurs qui doivent obligatoirement être des chaines de caractères dans le
navigateur de vos visiteurs.
✓ Pour stocker des données avec Web Storage, on va pouvoir utiliser les propriétés
(qui sont avant tout des objets) localstorage et sessionstorage. On va utiliser ces
propriétés avec l’objet implicite Window.
✓ La principale différence entre localstorage et sessionstorage est la suivante : dans le

cas où on utilise sessionstorage, les données enregistrées ne vont subsister qu’après
un rechargement de la page courante tandis que si on utilise localstorage les
données vont subsister même après qu’un visiteur ait quitté son navigateur.
✓ Les objets localstorage et sessionstorage vont nous fournir les propriétés et

méthodes suivantes :
✓ setItem() : permet de stocker une paire clef/valeur. Prend une clef et une
valeur en arguments ;
✓ getItem() : permet d’obtenir une valeur liée à une clef. Prend une clef en
argument ;
✓ removeItem() : permet de supprimer une paire clef/valeur. Prend une clef en
argument ;
✓ clear() : permet de supprimer tous les objets de stockage. . Ne prend pas
d’argument ;
✓ key() : permet d’obtenir une clef située à une certaine position. Prend un index
en argument ;
✓ length : permet d’obtenir le nombre de données stockées.
JAVASCRIPT
Les modules JavaScript : import et export
✓ Un module en programmation correspond à un bloc cohérent de code, c’est-à-dire à un
bloc de code qui contient ses propres fonctionnalités fonctionnant ensemble et qui est
séparé du reste du code. Généralement, un module possède son propre fichier.
L’avantage principal des modules est une meilleure séparation qui résulte dans une
meilleure maintenabilité et lisibilité du code.
✓ un module est un fichier JavaScript qui va exporter certains de ses éléments : fonctions,
objets, variables, etc.
✓ Les éléments d’un module qui peuvent être exportés doivent être précédés de la
déclaration export. Pour importer ensuite ces éléments dans d’autres modules, nous
allons devoir utiliser la déclaration import suivi nom de l’élément à importer suivi du mot
clef from suivi du chemin relatif du fichier importé par rapport au fichier qui l’importe.
✓ Les modules permettent :
✓ Une meilleure maintenabilité du code : par définition un bon module doit être
autonome et on doit pouvoir le modifier sans avoir à modifier d’autres scripts ;
✓ D’éviter de polluer les autres scripts : les modules possèdent leur propre espace
de portée globale et les autres scripts n’y ont pas accès par défaut. Cela permet
donc de limiter le risque de pollution (le fait d’avoir de nombreuses variables
.
différentes dans l’espace global du script et de courir le risque que certaines
possèdent le même nom) ;
✓ Une meilleure réutilisation du code : comme les modules sont indépendants et
autonomes (s’ils sont créés correctement), on peut les réutiliser dans différents
projets, ce qui nous fait gagner beaucoup de temps.
JAVASCRIPT
JSON
✓ JSON (JavaScript Object Notation) est un format d’échange de données léger et donc
performant. C’est un format de texte indépendant de tout langage mais utilisant des
conventions familières aux programmeurs de la famille de langages C (incluant
JavaScript et Python notamment).
✓ JSON est une syntaxe pour sérialiser* des objets, tableaux, nombres, chaînes de
caractères, booléens et valeurs null. Elle est basée sur la syntaxe de JavaScript mais en
est distincte : du code JavaScript n’est pas nécessairement du JSON, et du JSON n’est
pas nécessairement du JavaScript.
✓ JSON peut représenter des nombres, des booléens, des chaînes, la valeur null, des
tableaux (séquences de valeurs ordonnées) et des objets constitués de ces valeurs (ou
d’autres tableaux et objets).
✓ En JSON, ces deux structures se retrouvent sous les formes suivantes :

✓ Un objet est un ensemble non ordonnées de paires nom : valeur. Un objet
commence avec { et se termine avec }. Les noms sont suivis de : et les
paires nom : valeur sont séparées par des ,
✓ Un tableau est une collection ordonnée de valeurs. Un tableau commence
avec [ et se termine avec ]. Les valeurs sont séparées par des ,
✓ En JavaScript, on possède ainsi un objet JSON. L’objet JavaScript global JSON possède
deux méthodes pour interpréter du JSON et convertir des valeurs. en JSON. : les
méthodes parse() et stringify().
✓ JSON.stringify() convertit des objets JavaScript en JSON tandis que JSON.parse() fait
l’opération inverse et convertit du JSON en objet JavaScript.
ECMAScript ES7
ECMAScript est une spécification des scripts. ECMAScript est

Synopsis un ensemble des normes qui concernent les langages des
script. Il y a plusieurs langages de scripting, notamment,
javascript. Ainsi Javascript et les autres langages de script
(comme TypeScript) doivent obéir à ces normes et
spécifications dans chaque version.
A chaque fois que les langages de scripting évoluent, on a une nouvelle

version de ECMAScript ou ES. Aujourd’hui, on parlera de ES7 et les versions
qui la suivent.
La première version est sortie en juin 1997. Et la version actuelle(ES7) est

présente dépuis Juin 2016.
ES7
Variables et paramètres dans ES7
✓ let : est un mot clé permettant de déclarer une variable dans ES6. Alors
c’est quoi la nouveauté ? On peut déclarer une variable en utilisant
simplement le mot clé “var”.
✓ Const: Permet de définir la valeur d’une variable ReadOnly. ReadOnly

signifie que la valeur de la variable ne change pas .
✓ Valeurs par défaut:Pour passer une valeur par défaut dans une fonction
JavaScript, il suffit d’initialiser sa valeur comme suivant:
✓ Paramètre Rest: ça permet de travailler avec les fonctions qui prennent

un nombre inconnu ou variable des arguments. Un exemple très connu
est la fonction Sum ou Sommation qui permet d’ajouter les valeurs des
paramètres et donner leur sommation comme résultat.
.
✓ Template: Template est un moyen de créer une template de string. ça
permet d’avoir une structure d’une chaîne de caractères réutilisable.
attention il faut utiliser la back tick ( ` ) et non pas la simple apostrophe ( ‘ ).
dans l’exemple suivant on passe le paramètre de la fonction à la template
ES7
Les classes
✓ Le concept des classes est très important pour créer et
utiliser les instances. on peut déclarer une classe en
utilisant le mot clé “class” et on peut l’instancier en
utilisant le mot clé “new”
✓Les Getters et Setters des classes: Comme dans les

autres langages orientés objets, le getter permet de lire la
valeur d’une propriété.
✓Heritage:ça permet d’assurer l'héritage d’une classe

d’une autre classe. Pour ceci on utilise le mot clé
“extends”
✓Fonction Lambda on peut utiliser la fonction Arrow qui

permet d’initialiser une fonction. Exemple on va re-appeler
.
la même fonction addNumber mais en utilisant le mot clé
“Arrow” en utilisant le symbole “=>”
TP
Nodes IDE Android SDK Ionic
1 2 3 4
Node version Notepad++ Java JDK/JRE Ionic (cli)

manager(NVM)
Visual Studio Code Config Path Ionic tab
Cmder
ou Android Studio Build Android APK
Yarn
Atom API latest Installer l’apk sur mobile
Nodejs
Installer Installer Installer/Configurer Installer/Build

TypeScript
TypeScript est un langage transcompilé en JavaScript. C.a.d

Synopsis après écrire un code en TypeScript un compilateur va
convertir le code en JavaScript ainsi tous les navigateurs
peuvent comprendre et interpréter ce code. Finalement, le
gain que nous apporte TypeScript est que nous sommes
entrain d'écrire du JavaScript avec un Syntaxe orienté objet.
TypeScript est un superset (Sur-ensemble) de JavaScript (c'est-à-dire que

tout code JavaScript peut être utilisé avec TypeScript).
TypeScript va ajouter l'aspect orienté objet à JavaScript et d’autres

fonctionnalités. Donc il est, désormais, possible d'écrire des classes, des
interfaces, déclarer des Types au lieu d’utiliser simplement le fameux mot clé
“var” et les fonctions JavaScript.Il est possible, aussi, de faire l'héritage et de
déclarer des constantes et des types génériques.
TYPESCRIPT
Role
Historique
TypeScript va ajouter l'aspect orienté objet à
TypeScript est un langage de
JavaScript et d’autres fonctionnalités. Donc il est,
programmation, très récent, créé par
désormais, possible d'écrire des classes, des
Microsoft en 2012 afin de faire extension
interfaces, déclarer des Types au lieu d’utiliser
à JavaScript. Le but est de trouver un
simplement le fameux mot clé “var” et les fonctions
langage côté client qui est au même
JavaScript.Il est possible, aussi, de faire l'héritage
temps un langage orienté objet.
et de déclarer des constantes et des types
génériques..
BASE
Language Exemple
TypeScript est un langage transcompilé en
JavaScript. C.a.d après écrire un code en
TypeScript un compilateur va convertir le code en
JavaScript ainsi tous les navigateurs peuvent
comprendre et interpréter ce code. Finalement, le
gain que nous apporte TypeScript est que nous
sommes entrain d'écrire du JavaScript avec un
Syntaxe orienté objet.
TypeScript
Types des données
✓ Le symbole backquote ( ` ) : ça vous permet d'écrire une chaîne
des caractères sur plusieurs lignes. Par exemple, si on souhaite
écrire une longue chaine de caractère HTML et qu’on l’assigne à
une variable. Alors, il vaut mieux écrire cette chaîne HTML sur
plusieurs lignes pour qu’elle soit lisible pour les humains. Ainsi on
utilise (`) Au lieu de la simple cotte ou bien cotte double.
✓Les Expressions Intégrées : On utilise les expressions intégrées

pour évaluer le résultat d’une équation mathématique ou n’importe
quelle expression.
✓Les accesseurs :Type Script supporte les accesseurs

suivants: (public, protected et private). Le Tableau suivant
résume la visibilité des variables qui utilisent ses
accesseurs.
.
✓EnumerationsLes énumérations sont des types qui permettent de
structurer les collections sous forme numérique. D’autres langages
comme C#, Java, PHP définissent les énumérations. Aussi
TypeScript étends JavaScript pour définir des énumérations.
TYPESCRIPT
Typage Strict
le typage strict, qui permet de s’assurer qu’une variable ou
une valeur passée vers ou retournée par une fonction soit
du type prévu ;
Fonction Lambda
les fonctions dites lambda ou arrow,
permettant un code plus lisible et donc
plus simple à maintenir .
POO
les classes et interfaces, permettant de coder de manière
beaucoup plus modulaire et robuste.
Angular
Synopsis Angular est tout un Framework JavaScript Open

Source. Il est apparu, la première fois en 2009
créé par Misko Hevery et Adam Abrons.
Maintenant il est totalement avalé et supporté par
Google. Donc on parle d’un produit Google.
Il y a toute une rupture entre AngularJS et Angular2.0 et les

versions qui suivent. En fait, google a annoncé que l’idée est de
créer tout un framework basé sur Javascript et non pas une
simple bibliothèque ( Comme JQuery) qui permet d'exploiter la
puissance de JavaScript et qui assure une expérience utilisateur
très riche et fluide à la fois.
Angular
Role
Historique
En outre, Angular2 est orienté mobile aussi. Donc
Angular et AngularJs sont deux
vous pouvez créer des applications avec angular 2 et
frameworks différents qui ont +- le
l’utiliser sur votre Iphone ou Samsung Mobile. On va
même nom. Et ça peut créer un conflit
voir un tutoriel comment faire ça.
l’utilisation des composants qui servent pour créer
des applications modernes. Les composants peuvent
êtres aussi utilisables plusieurs fois dans la même
application. Aussi on peut utiliser le même composant
BASE dans plusieurs applications séparées.
Language Concept
La première Version (AngularJS ) est assez
proche du patron de conception MVC, mais coté
JavaScript. Donc nous sommes appelés à créer
des contrôleurs et des vues JavaScript.
Par contre dans Angular2, il fallait créer des
composants.Ces composants sont totalements
indépendants et peuvent être utilisés plusieurs fois
dans l’application et même dans d’autres
applications.
Angular
Environnement
✓Pour travailler avec Angular il est possible de travailler sur plusieurs IDE (Comme
Visual studio 2015, 2017 ou autre ou autre), mais dans notre cas on va travailler
avec Visual Studio Code qui est à son tour un environnement de développement
open source et gratuit.
✓Node.js est une plateforme logicielle libre et événementielle en JavaScript. Tout

simplement, en l’utilise pour créer un serveur web côté serveur qui permet
d'exécuter du Code TypeScript. Il est utilisé pour créer des applications web I/O
Intensives comme les sites de Streaming et SinglePage Sites. Donc on a pas
besoin d’un langage serveur comme C# ou Java. Il suffit du code TypeScript qui
va être compilé et exécuté par NodeJS
✓Pour vérifier que NodeJS est bien installé il suffit de lancer cette commande à
partir de votre Terminal Command (cmd). node –version
✓NPM ou “Node Packaged Modules” est un . outil qui permet d’installer les
dépendances. c.a.d pour lancer une application angular on a besoin de plusieurs
modules qui font la conversion, la compilation ou autres actions
✓NPM a le rôle de trouver les packages nécessaires et il les installes dans le

répertoire de l’application
Angular
Environnement
✓Le CLI crée énormément de fichiers au moment

de la création d'une nouvelle application.
✓Le dossier e2e est généré pour les tests end-to-

end.
✓ Ensuite, le dossier node_modules contient

toutes les dépendances pour votre application :
les fichiers source Angular et TypeScript, par
exemple
✓.Le dossier src , où on trouvera tous les fichiers

sources pour le developpement application.
.
Angular
Routing 1/2
✓Un site web est constitué d'une multitude de pages.Ces

pages sont écrites grâce notamment au langage HTML.
✓L'hypertexte est la technologie qui permettra de relier
une page à d'autres pages via des hyperliens.
✓Le Routing est le mécanisme qui permet de naviguer

d'une page à une autre sur un site web.
✓Angular propose une librairie angular@routeur qui
permet de gérer le routing.
✓Nous importerons cette librairie dans un module dédié

au routage.
✓Ce module portera le nom suivant app-
routing.module.ts
.
✓La configuration du "Routing" sera transmise au module
RouterModule
Angular
Routing 2/2
✓ Routes est un Array contenant la déclaration des Route et

RouterModule est un module regroupant les directives et les services
paramétrables permettant de remplir la fonctionnalité de routage.
Comme cela a déjà été évoqué dans l'article sur les modules.
✓ Contrairement à une application Web classique, il n'est pas possible

d'utiliser l'attribut href dans vos balises lien <a>. Comme nous l'avons
vu, cela entraîne un rechargement de la page et une perte de notre
contexte Javascript. Angular nous fournit donc une directive en
remplacement : routerLink. Cette directive attendant un tableau
contenant un path et des paramètres optionnels
✓ Routage avec enfants : Angular exige que vous ayez un itinéraire

sans chemin dans le tableau d'enfants qui inclut le composant parent,
pour représenter la route parente. C'est un peu déroutant, mais si
vous pensez à une URL vide pour une route enfant, elle
correspondrait essentiellement à la même URL que la route parente.
.
Angular
Composant 1/2
✓ Un composant est une classe, qui contrôle une portion de l’écran. Cette portion de
l’écran contrôlée par le composant, on l’appelle une vue: une vue peut être l’ensemble
de la page web, une fenêtre de tchat, une barre de navigation, etc. Cette vue est définie
dans le template du composant.
✓ Un composant Angular peut être énorme et correspondre à une page entière, ou tout
petit, et correspondre à un simple élément visuel comme un bouton ou une image.
✓ Les composants Angular peuvent être imbriqués les uns dans les autres. D’ailleurs, le
point de départ de toute application Angular, c’est un composant “racine” qui va contenir
tous les autres composants et qui représente l’ensemble de l’interface. La convention
est d’appeler ce composant racine AppComponent.
✓ Il y a deux manières d’afficher un composant dans une application Angular :

✓ En passant par son sélecteur.
✓ En passant par le routeur Angular.
.
Angular
Composant 2/2
❖ Ligne 1: pour chaque component on a besoin d’importer la bibliothèque component qui permet au
compilateur de comprendre l’annotation @component à la ligne 3.
❖ @component({...}) est une annotation ou décoration de notre component qui permet d’apporter
des informations sur le component exemple selector, templateUrl …
❖ selector (ligne 4): permet de définir le nom de la balise ou élément html utilisé pour invoquer le
component. c.a.d à partir d’un autre component, précisément, à partir de sa template html, on
peut appeler notre module en utilisant la balise <app-first> </app-first> qui est le selector de notre
component.
❖ templateUrl: permet de définir le path du fichier html qui contient le html de notre component
❖ Finalement, à la ligne 7 on créé la classe du component décorée par le mot clé “export” qui
permet de rendre visible notre component au autres components et modules.
❖ Enregistrer votre new component: Vous avez créé la définition et la template du component mais
ça est insuffisant. il fallait informer Angular explicitement du nouveau .
❖ Dans le module associé (dans notre cas c’est appModule.ts): il faut importer et préciser le path du
component (ligne 5).
.
❖ Ajouter le nom du component aux déclarations (ligne 11)
❖ Appeler le component: c'est la dernière étape. Elle consiste simplement à appeler la balise html
<app-first> </app-first> dans l’emplacement qu’on souhaite. Dans mon cas, je vais l’ajouter dans
la template du composant existant app.component.html
Angular
Module
❖ L'idéal serait de pouvoir regrouper nos composants par fonctionnalité :
par exemple, regrouper tous les composants dédiés à l'authentification,
tous ceux qui servent à construire un blog, etc.
❖ Eh bien, Angular permet cela, grâce aux modules ! Tous nos

composants seront regroupés au sein de modules.
❖ Au minimum, votre application doit contenir un module : le module

racine. Au fur et à mesure que votre application se développera, vous
rajouterez d'autres modules pour couvrir de nouvelles fonctionnalités.
❖ Mais le plus important ici est l'annotation NgModule, car c'est elle qui
permet de déclarer un module :
❖ imports : permet de déclarer tous les éléments que l'on a
besoin d'importer dans notre module. Les modules racines ont
besoin d'importer le BrowserModule (contrairement aux autres
modules que nous ajouterons par la suite dans notre
application) ;
❖ declarations : une liste de tous les composants et directives qui
appartiennent à ce module. Nous avons donc ajouté notre
unique composant AppComponent ;
.
❖ bootstrap : permet d'identifier le composant racine, qu'Angular
appelle au démarrage de l'application. Comme le module racine
est lancé automatiquement par Angular au démarrage de
l'application, et qu'AppComponent est le composant racine du
module racine, c'est donc AppComponent qui apparaîtra au
démarrage de l'application. Ça va, rien de compliqué si on prend
le temps de bien comprendre.
Angular
DataBinding
1.Interpolation:
❖ Le databinding est l’une des fonctionnalités les plus {{ NomProp }}
Uni-Directionnel Du modèle -> Template
impressionnantes dans Angular. Il s’agit d’un mécanisme qui 2.Property Binding:
permet la synchronisation instantanée entre la vue (HTML [property] = “data”
Template) et les données de l’application (par exemple:L’une des Du Template -> Modèle 3.Event Binding
propriétés du Component). L’un des exemples les plus connus Uni-Directionnel (Exemple: l'événement * (click) = "......."
c’est lorsqu'un utilisateur écrit dans un champ text la valeur du TextChanged) * on-click
modèle change instantanément et vis versa.
S’il change dans l’un, la
4.Two-WAy-DataBinding
❖ Donc le databinding permet de faire la communication entre le Bi-Directionnel modif se répercute
input [( ngModel )]= "NomHotel" >
component et sa template. Angular propose plusieurs types du instantanément
databinding qui seront utilisés selon le besoin.
❖ Il y a plusieurs types du databinding. Nous allons regrouper ces

types dans des catégories selon le sens du flux des données.Il y
a trois sens pour le flux:
❖ Du component vers la template
❖ ou inversement de la template vers le component
❖ et finalement un Databinding dans le deux sens (si on
change dans le html donc la valeur du component change
et inversement si suite à un traitement, la valeur du
component ou sa propriété change donc le navigateur et
.
l’affichage se rafraîchit automatiquement et
instantanément).
Angular
Décorateurs
❖ Le sujet qu’on va aborder c’est la communication inter-components. Elle
permet d’assurer les canaux de communication entre les différents
components, dans les deux sens (du fils vers parent et vis versa).
❖ Dans ce cadre, on va appliquer plusieurs techniques qui nous permettre de

mieux organiser notre application Angular.
❖ D’une manière simplifiée “Decorators” sont des fonction préfixées par le

symbole “@”. Les Decorators permettent d’ajouter une condition ou une
information sur (classe, propriété, méthode, ou paramètre) auquel il est
appliqué.
❖ On a déjà utilisé le décorateur @component qui permet d’ajouter des

informations sur le component comme le ‘selector’, templateUrl, styleUrl
❖ @Input : on utilise @input pour dire que cette propriété est une entrée
(input) pour ce component. Imaginez que le component est une machine qui
a besoin des entrées pour nous retourner des sorties ou même les mêmes
entrées mais, un peu modifiées.
❖ @Output : le décorateur @Output est très similaire à l’input sauf que

l’output est utilisé dans l’autre sens de la communication. c.a.d. que le
deuxième component peut répondre le premier component. Il est toujours
bindé à une propriété de type “TypeEventEmitter”.
❖ @ContentChildren et @ContentChild: parfois, le component Parent a

besoin d'accéder au composant descendant pour chercher des éléments et
faire les actions nécessaires. cette action est possible avec les deux
décorateurs.
Angular
Directives
❖ Les Components sont des directives à la seule différence qu'ils possèdent
une fonctionnalité de templating. En TypeScript, une directive est une classe
à laquelle on applique le décorateur @Directive. Il existe deux sortes de
directives :
❖ Les directives structurelles : elles ont pour but de modifier le DOM en
ajoutant, enlevant ou replaçant un élément du DOM.
❖ Les attribute directives : elles ont pour but de modifier l'apparence ou
le comportement d'un élément.
❖ Il ne nous reste plus qu'à définir la couleur paramétrable grâce à un autre

décorateur Angular : le décorateur @Input. Ce décorateur permet de lier le
paramètre passé à une propriété de la classe de la Directive. Il est possible
de passer en paramètre un alias dans le cas où la propriété de la classe n'a
pas le même que l'attribut de la Directive. Voici notre Directive finale :
❖ Exemple: Le constructeur a été modifié pour permettre d'utiliser ses

paramètres dans toute la classe. Le fait de mettre la portée devant les
paramètres est un accélérateur de développement qui permet de faire
l'équivalent d'un this._el = _el. C'est une spécificité TypeScript bien pratique.
❖ Le @Input a été ajouté. Il permet de récupérer notre couleur passée
en paramètre de notre directive.
❖ Nos @HostListener ont été modifiés pour permettre le changement
de couleur comme c'était le cas avec notre constructeur.
TP2
Components Routing Services Build
1 2 3 4
Creer 2 pages dans Ajouter les pages dans Creer un services

l’app ionic le router
Injecter le services dans
Creer 2 Composants Ajouter les anchres
une page
dans le projets Ionic d’acces a ces pages
Build Android APK
Installer l’apk sur mobile
Injection Build
Pages Navigation
Angular
Formulaires 1/2
❖ Une application, sans formulaire et user Inputs est simplement une application
Vitrine. Angular2 est très flexible dans la gestion des inputs.
❖ Template-Driven Forms : souvent est la méthode la plus utilisée pour la

création et la gestion des formulaire. Cette approche se bas essentiellement sur
deux directives “ngModel” et “ngForm”.
❖ “ngForm” : elle est utilisée dans votre balise HTML <form
ngForm=“...”></form> pour exporter les valeurs saisies et les etats
“ngForm” des validateurs vers le controlleur typescript. Donc, à partir du
component, si on veut chercher qu’est ce qu’un user a saisi donc on
récupère “ngForm” et on cherche dans cette collection les valeurs des
inputs souhaitées.
❖ “ngModel”: cette directive est utilisé à l'intérieur de la balise HTML <input

ngModel=“”></input> .Elle est utilisées pour exposer la valeur de cet input
ou même autre control. Donc son rôle est d’enregistrer ce champ en
utilisant l’attribut “name”. “
❖ Reactive Forms: C’est la moins utilisées mais la plus façonnable et flexible.
.
Angular
Formulaires 2/2
❖ Reactive Forms: C’est la deuxième forme de création des formulaire. Cette
forme de création est plus approfondie et elle donne une marge de manipulation
plus importante d'où un peu plus complexe à comprendre et à utiliser.
❖ Remarque: Template-Driven Forms, on utilise les directives et classes suivantes:

‘ngForm’, ‘ngModel’ et le module ‘FormsModule’. Reactive-Forms: on utilises
des classes et des directives comme: ‘FormControl’, ‘FormGroup’,
‘FormArray’, ‘FormBuilder’ et ils utilisent le module ‘ReactiveFormsModule’.
❖ Pour créer une propriété de type FormControl (qui est la base du modèle) il
suffit d'écrire maProp = new formControl();
❖ Pour initialiser une propriété de type FormControl . Il suffit de passer la valeur
souhaité dans le constructeur. Vous pouvez passer un string, un booléen, un
entier .Exemple: maProp = new formControl(true);
❖ Pour passer une valeur : this.maProp.setValue(‘maValeur’);
❖ “formGroup” peut être considéré comme un conteneur de “formControl”. Donc

d’une manière simplifiée, “formGroup” est un groupe de formControl. Dans le
component.ts, on utilise new “formGroup({ })” et dedans on ajoute des propriétés
de type FormControl().
.
Angular
Dependency Injection
❖ La "Dependency Injection" est un "design pattern" qui consiste à séparer
l'instanciation (et donc l'implémentation) d'une dépendance et son utilisation.
❖ Ce "design pattern" permet :

❖ d'inverser les dépendances
❖ d'éviter le couplage fort avec les dépendances
❖ de factoriser l'instanciation d'une dépendance
❖ de faciliter le remplacement d'une dépendance par une autre
implémentation à des fins fonctionnelles ou de "testing“.
.
Angular
Services
❖Un service est un moyen de partager des informations
entre des classes qui ne se connaissent pas.
❖Avec Angular, une dépendance est généralement l'instance

d'une classe permettant de factoriser certaines
fonctionnalités ou d'accéder à un état permettant ainsi aux
composants de communiquer entre eux. Dans le
vocabulaire Angular, ces classes sont appelées "services".
❖Les services sont le plus souvent des singletons.
❖Pour déclarer un service Angular, il suffit de créer une

classe TypeScript et de la décorer avec le décorateur
@Injectable().
❖Lazy Loading: il s’agit du chargement asynchrones des

modules Angular afin d’optimiser la rapidite du systeme.
Angular
HttpClient
❖ HttpClient est un service Angular permettant d’effectuer des requetes
http ; on peut donc le récupérer avec la Dependency Injection.
❖ Le service HttpClient a pour avantages de :

❖ simplifier l'implémentation d'échanges HTTP,
❖ fournir les outils nécessaires pour faciliter l'implémentation des
"tests unitaires",
❖ se baser sur les Observables permettant ainsi :
❖ de suivre la progression d'"upload" et de "download",
Angular
Pipes
❖Les Pipes sont des filtres utilisables directement depuis la vue afin
de transformer les valeurs lors du "binding".
❖La syntaxe des Pipes est simplement inspirée des Pipes des shell
UNIX que l'on retrouve dans de nombreux systèmes de templating.
❖Les Pipes peuvent prendre des paramètres qu'il faut mettre après le
Pipe et séparés avec le symbole ":".
❖Angular dispose de plusieurs "pipes" natifs :

https://angular.io/api?type=pipe.
❖Le Pipe async est un Pipe capable de consommer des Observables
(ou Promise) en appelant implicitement la méthode subscribe (ou
then) afin de "binder" les valeurs contenus dans l'Observable (ou la
Promise).
❖Pour créer un Pipe personnalisé, il faut :

❖implémenter une classe suivant l'interface PipeTransform,
❖décorer cette classe avec le décorateur @Pipe() en indiquant
le nom du Pipe.
❖ajouter la classe aux declarations (et exports) du module
associé.
Angular
Librairies Externe
❖Angular étant compatible avec la plateforme NodeJs, il est alors
possible d’installer des modules externes (librairies) depuis le
gestionnaire de package npm ou yarn.
❖Dans l’exemple nous installons le module externe *ng2-charts

depuis npmjs.com, le configurer et utiliser pour tracer des graphes.
80%
Progression
Framework
Theorie Pratique
IONIC
Role
Historique
La grande chose à propos d'Ionic est qu'avec une
Ionic est un framework open-source
base de code, vous pouvez construire pour
créé en 2013 par Max Lynch, Ben
n'importe quelle plate-forme en utilisant
Sperry, et Adam Bradley. Deux versions
uniquement HTML, CSS et JavaScript. ..
distinctes sont disponibles,
incompatibles entre elles : la première
version, 1.3.3, se base sur AngularJS
1.5.3 tandis que la version >2 se base
sur Angular >2 et TypeScript.
html
Language Exemple
Le Framework Ionic dans sa dernière
version utilise les langages:
- Html
- Css ( SASS )
- Javascript.
Lui-même basé sur d’autre framework
au choix ( angular, react , vue )
IONIC
Structure du projet (de type angular)
❖ Le dossier node_modules qui comporte tous les modules Angular, Ionic et
Cordova
❖ le dossier platforms , créé par le CLI au moment de l'ajout d'une plateforme

cible pour votre application. Ce dossier contient la majorité des ressources
nécessaires au build final de votre application pour les plateformes différentes
comme iOS et Android (les deux plateformes que vous verrez dans ce cours).
❖ le dossier plugins contient les plugins Cordova qui permettent, par exemple,
d'accéder aux fonctions natives des appareils, comme l'appareil photo ou la
géolocalisation. Il contient également le plugin qui permet d'exécuter votre
application Angular sur mobile.
❖ Le dossier resources contient les images correspondant à l'icône et au splash

screen de votre application.
❖ Le dossier www est également géré par le CLI pour la création des packages
finaux pour votre application.
❖ Les fichier config.xml et ionic.config.json contiennent les configurations sur le

fichier final suivant la plateforme ( nom de l’application, nom du package)
❖ Le dossier src a été présenté plus tôt dans la partie angular du cours.
Ionic(CLI)
La CLI Ionic est construite avec TypeScript et Node.js. Il prend en charge
Node 10.3+, mais le dernier Node LTS est toujours recommandé. Suivez le
développement sur le référentiel GitHub open source.
Command Line Interface

L'interface de ligne de commande (CLI) Ionic est un outil incontournable
pour développer des applications Ionic.
✓Installation:
✓Assurez vous que les derniers Node 6 LTS et NPM 3+ sont installés.
✓Ensuite, installez la CLI globalement

✓ il permet la génération des principaux fichier utilises pendant le
développement du projet
✓Il englobe en plus des fonctionnalités propre a ionic , les cli des api
supportées par ce dernier ( cordova, capacitor, angular etc…)
Ionic(UI Components)
Les applications ioniques sont constituées de blocs de construction de haut niveau appelés Composants, qui vous permettent
de créer rapidement l'interface utilisateur de votre application. Ionic est livré avec un certain nombre de composants, y compris
des cartes (ion-card), des listes (ion-list) et des onglets (ion-tab).
L'un des plus grands changements apportés par Ionic 4 est que les composants ionic sont devenus des composants Web pour
chaque. Les composants Web sont un ensemble d'API de plate-forme Web. Il permet au développeur de créer des balises
HTML personnalisées et réutilisables à utiliser dans les pages Web et les applications Web. Les composants Web améliorent
considérablement les temps de démarrage et de chargement et sont très essentiels pour créer des applications Web
hautement performantes.
User Interface Components

Ionic(Theming)
Ionic fournit plusieurs variables globales qui sont utilisées dans tous les composants pour changer le thème par défaut d'une application entière.
Les couleurs d'application sont utiles pour changer l'apparence de la plupart des composants ioniques,
Ionic Colors Generator: Créez des palettes de couleurs personnalisées pour l'interface utilisateur de votre application. Mettez à jour les valeurs
hexadécimales d'une couleur, vérifiez l'application de démonstration à droite pour confirmer, puis copiez et collez le code g énéré directement
dans votre projet Ionic.
SASS Variables
Ionic(CLI)
La CLI Ionic est construite avec TypeScript et Node.js. Il prend en charge
Node 10.3+, mais le dernier Node LTS est toujours recommandé. Suivez le
développement sur le référentiel GitHub open source.
Command Line Interface

L'interface de ligne de commande (CLI) Ionic est un outil incontournable
pour développer des applications Ionic.
✓Installation:
✓Assurez vous que les derniers Node 6 LTS et NPM 3+ sont installés.
✓Ensuite, installez la CLI globalement

✓ il permet la génération des principaux fichier utilises pendant le
développement du projet
✓Il englobe en plus des fonctionnalités propre a ionic , les cli des api
supportées par ce dernier ( cordova, capacitor, angular etc…)
Ionic(Bridge)
Capacitor: API multiplateforme et d'une couche d'exécution de code qui facilite l'appel des SDK natifs à partir du code Web. Il écrit ég alement les
plugins natifs personnalisés dont votre application pourrait avoir besoin.
Cordova: Apache Cordova est un framework de développement d'applications mobiles créé par Nitobi. Adobe Systems a acheté Nitobi en 2011, l'a
rebaptisé PhoneGap, puis a publié une version open source du logiciel appelée Apache Cordova.
Stencil: compilateur de composants Web créé par l'équipe ionic pour construire les normes qui sont conformes aux serveurs Web. Il utilise l'API
supplémentaire, telle que TypeScript, Virtual DOM, JSX et async, qui sont les mieux adaptées pour PWA.
Cordova / Capacitor/Stencil
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.

❖ Firebase est une base de données en

❖ Firebase n'est pas largement utilisé ni temps réel.
testé pour les entreprises. ❖ Il a un potentiel de taille de stockage
énorme.
❖ Firebase est sans serveur.
❖ Il a des requêtes et une indexation très ❖ Il est hautement sécurisé.
limitées. ❖ Il s'agit de la solution BaaS hébergée la plus
avancée.
❖ Il a une configuration minimale.
❖ Il ne fournit aucune agrégation. ❖ Il fournit une liaison de données à trois
voies via un tir angulaire.
❖ Il fournit une sérialisation simple de l'état de
❖ Il n'a pas de fonctionnalité de réduction l'application.
de carte. ❖ Nous pouvons facilement accéder aux
données, aux fichiers, à l'authentification,
etc.
❖ Il ne peut pas interroger ou répertorier ❖ Aucune infrastructure de serveur n'est
les utilisateurs ou les fichiers stockés. requise pour alimenter les applications avec
des données.
❖ Il dispose d'un stockage JSON, ce qui
signifie 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

déplacement.
❖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

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 à Ionic
Synopsis Dans Ionic, permet de créer une application CRUD

(Créer, lire, mettre à jour, supprimer) en utilisant Cloud
Firestore comme base de données et Cloud Storage
comme stockage d'images.
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.
Auth
CRUD
Storage
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
étapes essentielles de développement
d'applications mobiles. Bien sûr, le travail
Conclusion 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
mauvaise application réside généralement dans utilisants avant, pendant et apres leur interaction
la qualité de son expérience utilisateur (UX). avec le mobile.
UI ( User Interface ) : Interface graphique , il Considerer :

s’agit de ce que l’utilisateur voit et utilise pour ❖ La petite taille de l’ecran
interagir avec 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 Utiliser les outils appropriés:
l’application ❖ 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 actions requises du côté de l'utilisateur, il est
humain a une puissance de traitement préférable de diviser ces tâches en plusieurs
limitée, et lorsqu'une application fournit sous-tâches. Ce principe est extrêmement
trop d'informations à la fois, elle peut important dans la conception mobile, car vous
submerger l'utilisateur et lui faire ne voulez pas créer trop de complexité pour
abandonner la tâche. l'utilisateur à la fois
DÉSENCOMBRER UTILISER DES ÉCRANS FAMILIERS

Le désordre est l'un des pires ennemis Les écrans familiers sont des écrans que
d'un bon design. En encombrant votre les utilisateurs voient dans de
interface, vous surchargez les nombreuses applications. Des écrans
utilisateurs avec trop d'informations: tels que «Démarrage», «Quoi de neuf»
chaque bouton, image et icône ajouté et «Résultats de la recherche» sont
complique l'écran. 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
courant d'entrée utilisateur est de remplir un est essentiel de conserver une apparence
formulaire. générale 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
parcours utilisateur où les utilisateurs peuvent façon, l'utilisateur peut appliquer ses
avoir besoin d'aide. connaissances préalables lors de l'utilisation
d'un autre produit.
Merci !!!
http://www.uy1.uninet.cm/

Ict 202

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Ict 202

Transféré par

Droits d'auteur :

Formats disponibles

ICT 202

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

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

❖ Les applications natives prennent du ❖ Meilleure rapidité, fiabilité et dotée d’une

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

Platform Language Structure Support IDE

Ionic HTML Ionic Atom

Monaca CSS Monaca Webstorm

Onsen UI Javascript Onsen Visual Studio

Framework 7 TypeScript Sublime

Hybrid Apps React Native

Ainsi, une application dite hybride, contrairement à une

Platform Language Structure Support IDE

Flutter Dark Alphabet (Google) Android Studio

React Native Javascript(React) Facebook Visual Studio

Phonegap Javascript Apache Visual Studio

❖ Un de taille, elles n’ont pas accès à ❖ Réduction des coûts de développement,

❖ Temps de mise sur le marché plus rapide

Si vous possédez une solide expertise en matière de framework et une bonne

UI FRAMEWORK IONIC AVANCE

Le HTML et le CSS sont des langages web de base ; on

Ce cours n’est pas qu’un simple empilage de connaissances :

html liste, un lien, etc..

✓ Voici quelques-unes des entités les plus courantes et leur signification :

Une propriété va être accompagnée d’une ou plusieurs

écrire le CSS au sein écrire le CSS dans Déclarer le CSS au sein du

On va pouvoir cibler des contenus HTML selon le fait

On va pouvoir utiliser les pseudo classes qui vont

On va pouvoir utiliser les pseudo éléments qui vont

Sass est un préprocesseur CSS. Un préprocesseur est un

Sass permet en quelques sortes “d’étendre” les possibilités du CSS

La structure d’un fichier SCSS va ressembler à celle de nos fichiers CSS

✓ La syntaxe liée à l’extension .sass, qu’on appelle encore

✓ La syntaxe liée à l’extension .scss est un sur-ensemble

✓ L’idée de base d’une fonction est d’effectuer des calculs ou opérations

✓ Il existe deux grands moyens d’utiliser les fonctions avec Sass : on

✓ En programmation, les fonctions servent généralement deux objectifs :

✓ Gagner du temps de développement / simplifier nos scripts ;

✓ Masquer la complexité de certaines opérations.

✓ le drapeau SASS !global qui permet d’indiquer qu’une variable doit

✓ Le CSS, en contrepartie, n’offre toujours pas à ce jour de moyen

✓ Sass propose cette fonctionnalité. Cela permet une meilleure

✓ Ce sélecteur peut être utile si on souhaite réutiliser le sélecteur

✓ Concrètement, nous allons pouvoir définir un ensemble de propriétés

✓ Sass propose cette fonctionnalité. Cela permet une meilleure

✓ Le sélecteur % permet de créer un ensemble de règles qui

Le JavaScript est un langage de programmation créé en 1995.

Pour définir ce qu’est le JavaScript et le situer par rapport aux autres

Le JavaScript est un langage dynamique ;

✓ Un contenu « dynamique » est un contenu qui va se mettre à jour dynamiquement, c’est-à-dire

Le JavaScript en tant que langage correspond à un ensemble de structures de

Comme fichier séparé

✓ Le propre d’une variable est de pouvoir varier, c’est-à-dire de pouvoir

✓ Une variable est donc un conteneur ou un espace de stockage temporaire

✓ Le propre d’une variable et l’intérêt principal de celles-ci est de pouvoir

✓ Il existe deux grands types de structure de contrôle de base qu’on

✓ Les conditions vont nous permettre d’exécuter un certain nombre

✓ Les boucles vont nous permettre d’exécuter un bloc de code en boucle

✓ En plus des nombreuses fonctions JavaScript prédéfinies et immédiatement utilisables, nous