Cybersecurity with Computational and Artificial Intelligence

Institut Universitaire Catholique Saint Jérôme de Douala

Développement mobile

Par Pr.-Dr.-Ing. Franklin Tchakounté

Objectifs
A l’issue de cours, chaque apprenant sera
capable de
– D’expliquer le bien fondé du développement
cross-platform
– De déployer un environnement de
développement react native Android
– De développer des applications react native avec
des composantes basiques sous Android
– De transformer une application react native en
apk.

2
Plan du cours
1. Développement Cross-platforms
2. Mise en place de l’environnement
3. Hello World
4. Présentation du Projet à réaliser
5. Eléments Basiques de React Native
– Components
– Styles
– Vues
– Props
– State
6. Transformation en apk.

3
I. DÉVELOPPEMENT CROSS-PLATFORMS

4
1. Application native
• Développée pour un système d'exploitation.
• Développer appl. Sous iOS et Android,
– Il faudra une première pour iOS, en langage Swift
ou Objective-C,
– et une seconde pour Android, en langage Kotlin
ou Java.
• Apprendre plusieurs langages
• Temps lors du développement

5
2. Applications cross-platforms
• Développée pour un système d'exploitation.
• Développer appl. Sous iOS et Android,
– Il faudra une première pour iOS, en langage Swift
ou Objective-C,
– et une seconde pour Android, en langage Kotlin
ou Java.
• Apprendre plusieurs langages
• Temps lors du développement

6
3. Application cross-platform
• Développée une seule et unique fois et sont
compatibles sur iOS et Android.
• Frameworks : Ionic, PhoneGap, Xamarin et
Titanium.
– Langages simples et non natifs: Javascript, c#
– (1) Langage (2) Framework (3) Application
– Gain en temps
– Enormes progrès: ressemblance avec les
applications natives

7
4. React Native
• Framework cross-platforms sorti en 2015 par
Facebook
• Langage Javascript
• Utilise les composants mobiles natifs et en plus
de ceux Web: Ex: UIView (iOS) android.view.View
(Android)
– Pareil pour boutons, textes, listes, …
– RN transforme les éléments en leur équivalent natif.
– Conséquence: applications seront plus performantes,
plus fluides et plus ressemblantes à une application
mobile.
• http://mobile-frameworks-comparison-
chart.com/ 8
5. React Native
Deux options
• (1) Quick start
– Démarrer rapidement une application RN
• create-react-native-app (CCRNA)
– pour se lancer rapidement dans les développements
– elle nécessite peu de configuration. C'est le moyen le
plus simple de créer une application mobile React
Native.
– L'inconvénient est qu'elle ne permet pas d'utiliser du
code natif et donc d'accéder aux composants du
téléphone.
9
6. React Native
Deux options
• (2) Building projects with Native Code
– les différentes étapes avant de pouvoir créer une
application React Native avec du code natif (Swift,
Objective-C, Java ou Kotlin)
– besoin d'accéder à des composants du téléphone,
par exemple la caméra, la géolocalisation, les
contacts
– RN fait la différence: application sans ou avec code
natif
10
7. React Native
• Si vous avez besoin d’exploiter des composants
du téléphone
– C’est possible de passer automatiquement d'une
CRNA à une application React Native avec du code
natif.

11
II. MISE EN PLACE DE L’ENVIRONNEMENT

12
1. Outils
• Expo
– un outil de développement permettant de créer des
applications React Native.
– offre une application hôte. Cette application va nous
permettre d'exécuter et d'afficher le rendu de nos
applications pendant les phases de développement.
– la solution CRNA est entièrement portée par Expo.
Solution Expo = CCRNA
– Installable sous Play Store ou iOS store
• Editeur de texte ou IDE (Installer Atom par ex.)
13
2. Outils
• Node.js:
– Permet de créer un serveur et d'y déposer le code
React Native (en Javascript).
– Son gestionnaire de paquet: npm (Node Package
Manager)
– npm: installe des outils pour le développement
– Télécharger et installer
– https://nodejs.org/en/download/
• Taper dans le cmd : npm install -g expo-cli
– -g installe les lignes de commande CRNA de manière
globale, c'est-à-dire dans tout votre ordinateur et sa
session courante. 14
3. Création d’une CCRNA
• Installer les outils: npm install -g expo-cli
– Cela peut prendre quelque temps
• Création du workspace: mkdir ReactNative
• S’y déplacer: cd ReactNative
• Créer la CRNA (Le projet). expo init DropnDrap
– Expo demande de choisir le template de départ pour
votre application
– choisir blank à l’aide des directionnelles ensuite OK
– La création peut prendre un peu de temps ; il faut que
le projet installe une multitude de librairies Javascript.
Une fois que cela est fini, vous devriez voir apparaître
le message :
15
4.Une précision sur Windows 10
• La commande expo peut ne pas être connue
– Appuyez sur la touche Windows et recherchez
« Variables d’environnement »
– Choisir Modifier « Variables d’environnement »
– Une fenêtre s’ouvre et cliquer sur « variables
d’environnement »
– La fenêtre « variables d’environnement » s’ouvre.
Dans variables système, cliquer sur « Nouvelle »
• Nom de la variable: A votre choix
• Valeur: %USERPROFILE%\AppData\Roaming\npm
– Fermer le terminal et le reouvrir. Maintenant c’est bon
16
5. Hiérarchie d’une CCRNA
• Se déplacer dans le workspace ReactNative
• Observer l’arborescence du Projet DropnDrap
– babel.config.js: compilateur Javascript
– .gitignore: pour exclure les fichiers React Native et
Expo de vos repos. (Utilisateurs Git)
– .watchmanconfig: Watchman est un service
permettant d'observer chaque changement du
projet.
– assets: Dossier contenant deux images: icône de l’
application et son splashscreen : image affichée
lorsque l’application est lancée.
17
6. Hiérarchie d’une CCRNA
• Fichiers & Dossiers utiles
– node_modules: toutes les dépendances pour que le
projet CRNA fonctionne. Eviter de toucher à ce dossier
et à n'importe quel fichier qu'il contient.
– app.json: Ce fichier permet de configurer des
informations liées à votre application. Ici, on définit le
SDK Expo.
– package.json: toutes les dépendances de l’application y
sont recensées. Si ce fichier est bien configuré, une
personne qui reprend votre travail n'aura qu'une
commande à taper avant de se lancer dans les
développements.
– App.js: c’est un peu le comme le index.html. C’est le
point d'entrée de la CRNA. Ce fichier va être exécuté au
lancement de l'application 18
III. HELLO WORLD

19
1. Lancement de la première
application
• Le smartphone et le serveur dans le même wifi
• Se placer dans le workspace: cd DropnDrap
• Démarrer npm: npm start
– Node.js va créer un serveur localhost où héberger l’
application React Native. Expo va s'occuper de vous
faciliter l'accès à votre application.

20
2. Lancement de la première application
• Retourner sur le terminal, un
énorme QR code s’affiche :
– Depuis le tél, lancer l'application
Expo
– Cliquez sur le bouton « Scan QR
Code » et scanner le QR Code
affiché dans votre terminal.
– Expo va charger votre
application.
– Cela peut prendre un peu de
temps, il faut qu'Expo récupère
le projet React Native sur
votre serveur Node.JS et
l'affiche à l'écran.
21
3. Lancement de la première application
• Bravo

22
4. Rechargement
• Ouvrir App.js avec Atom

23
5. Rechargement
• Remplacer

Par

• Visualiser votre application dans le Tél.

• S’il n y a pas modification
– Il faut secouer l’appareil jusqu'à l'apparition d'une pop-
up (menu debug) et sélectionner "Reload".
• Live Reloading: Pas besoin de recompilation
comme le natif pour recharger
• Enregistrer le projet:
24
6. Rechargement
• Après l’enregistrement du projet
– React Native génère un fichier Javascript de toute
votre application (appelé bundle) et le dépose sur
votre serveur Node.JS en localhost.
– L’application, qui tourne sur le tél, observe ce
bundle et se met à jour automatiquement lorsque
celui-ci change.
– L'exécution du code Javascript et la mise à jour de
votre application sont quasi instantanées, c'est
pour cela que c'est aussi rapide.
25
7. Résumé

26
IV. PRÉSENTATION DU PROJET
INDIVIDUEL

27
 1. Présentation du Projet Individuel
RESET: Réinitialise tout
M: Modifier un élément
OK: Ouvre une autre fenêtre Mon Projet
avec le résumé des
Informations entrées avec Nom
L'âge de l’étudiant
SEXE: menu déroulant Prénom
Date: Type Calendrier
Permettant a l’utilisateur de Sexe
Cliquer sur l’année, le mois et le jour
Date de naissance

Renvoyer le projet RESET M OK

• Par votre Github
• Par Apk/iOS
28
 2. Codes Tests
• L’apprenant s’amusera avec certains codes
tests pour une observation et une ouverture
d’esprit
• Répertoire Projets_Tests
– 05 TPs
– Objectif: Exécuter et identifier à quoi sert le code

29
 3. Documentations par excellence
• Il existe des liens intéressants pour avoir des
extraits de code

• https://reactnative.dev/docs/getting-started
• https://fr.reactjs.org/
• https://www.tutorialspoint.com/react_native/rea
ct_native_state.htm
• https://reactnative.dev/docs/signed-apk-android

30
V. ELÉMENTS BASIQUES DE REACT
NATIVE

31
1. Components
• vues, boutons, textes, images, listes, ….

32
2. Components
• Découper nos interfaces utilisateur en
pièces indépendantes et réutilisables, et de
penser à chaque pièce séparément
• Bureau: Ordinateur on peut réutiliser le
component Ordinateur dans un autre
component (Table par e.g)
• Dans le code

33
3. Components
• Components React Native
– Ils existent déjà et sont mis à disposition par React
Native
– Text, Button, Image, ScrollView, View, WebView, etc.
Lien
• Components customs
– On peut créer nos propres components.
– placer dans un dossier Components de l’application et
surtout de créer un fichier Javascript par component.
– Composition de components reactive

34
4. Components
• Elément graphique affiché par l'interface
utilisateur
– React permet de définir les composants en tant
que classes ou fonctions.
– Toutes les vues React sont composées
entièrement de components.
– Pour définir un composant React avec une classe,
on doit étendre React.Component :
– La méthode render() est la seule méthode requise
dans une classe de composant.

35
5. Components
• Component React Native View
– Component React Native Image
• Component React Native Text

Pour reutiliser

• Component custom Profil

– Component React Native View
• Component React Native Image
– Component React Native Text

36
6. Components
• Importer la librairie React
• Déclarer la classe qui extends React.Component

• Attention: La première lettre : Majuscule

37
 7. Components
• La classe React.Component implémente une
méthode render.
– C'est cette méthode qui va définir ce que notre
component va rendre à l'écran.
• Lorsque l'on crée un component custom, on doit
obligatoirement réimplémenter cette méthode et
retourner (return) les éléments graphiques
• sans quoi notre component ne rendra rien et ne
fonctionnera pas.

38
 8. Components
• Il faut définir les éléments que le component
renvoie
• Cas : component Search affiche une vue avec
un champ de saisie de texte et un bouton.
– View : pour la vue.
– TextInput : pour le champ de saisie de texte.
– Button : pour le bouton.
• Avant de pouvoir utiliser les components React
Native, il faut les importer de la librairie du
même nom
39
 9.Components
• Il faut définir les éléments que le component
renvoie
• Cas : component Search affiche une vue avec
un champ de saisie de texte et un bouton.
– View : pour la vue.
– TextInput : pour le champ de saisie de texte.
– Button : pour le bouton.
• Avant de pouvoir utiliser les components React
Native, il faut les importer de la librairie du
même nom
40
10. Components

Propriétés

onPress={() => {}} == onPress={function() {}}

Propriétés 41
11. Components
• En Javascript, on exporte les éléments pour
pouvoir les utiliser ailleurs. Rajouter à la fin du
fichier Search.js :

• On exporte toujours par défaut les components,

c'est une autre convention de codage.

• un component = un fichier = un export par

défaut.
42
12. Components
• Il faut à présent importer le component dans
le fichier App.js, le point d'entrée de
l’application, et l'afficher comme toute
première vue de l'application.

Chemin relatif
Pas besoin de Spécifier Search.js

43
13. Components
• Lancer!

44
14. Components
• Fonction composant
– Le moyen le plus simple de définir un composant
peut consister à écrire une fonction JavaScript :

– Cette fonction est un composant React valide car

elle accepte un seul argument « props » (qui
signifie « propriétés ») contenant des données, et
renvoie un élément React.

45
15. Components
• Fonction composant

– Equivalent à

On y revient plus loin

46
 16. Components
• Fonction composant

– Equivalent à

47
 17. Components
• Fonction composant

– Equivalent à

48
 18. Components
• Multi-Fonctions composants

49
19. Styles
• Important si
– On veut changer la couleur d'un élément, on doit
appliquer un style sur celui-ci.
– On veut aligner en bas dans une vue, on va
appliquer un style sur son élément parent.
• Tous les components React Native possèdent
une propriété style.

50
20.Styles
• Tous les components React Native possèdent
une propriété style.
– Changer une couleur
– Définir une taille
– Ajouter des marges
– Modifier l'alignement d'éléments entre eux
– Ajouter des bordures

51
21. Styles
• Cas d’application: Dans le component Search,
on va appliquer un style sur le TextInput pour
qu'il soit visible et accessible :
• Recharger!
Une marge en haut de 20: entre
l’écran et la vue (View)

52
22. Styles
• Cas d’application: D’autres styles
• Recharger!
• Liste des styles • marginLeft: Marge à gauche
• marginRight: Marge à droite
• borderWidth: largeur de bordure
• borderColor : couleur de bordure
• paddingLeft : Espace à gauche du texte

53
23. Styles
• Appliquons le style ci-dessous: couleur de
fond sur notre component custom Search
• Recharger!
– Quel est le changement? Aucun!
– On ne peut appliquer de style que sur les
components React Native et pas sur les
components custom!

54
24. Styles
• Il faut plutôt appliquer le style sur le
component React Native représentant la vue
de votre component, c'est-à-dire, ici, le
component View : Essayer et recharger!

55
25. Styles
• En vue de réutiliser le même style dans
plusieurs components sans réécrire
– Juste avant l'export de notre component custom

• Ensuite,

56
26. Styles
• Plusieurs vues externalisées

• Ensuite,

• StyleSheet: API React Native

57
27. Vues
• Flexbox: outil externe et non React Native
– Exploité pour gérer les vues sur le Web (dynamique)
– En React Native, tous les components utilisent
Flexbox et sont des « boîtes flexibles ».
• Flexbox est impliqué
– tout ce qui touche au positionnement d'éléments
– style de margin, un padding, un alignement, une taille
dynamique
– Styles avec FlexBox
• Adapter ses vues aux différentes tailles d'écran. 58
28. Vues
• Cas d’application: partitionner une vue en
deux parties égales.
– Avec des dimensions statiques: 02 smartphones
d’écrans différents

59
29. Vues
• Flexbox est utile pour ce problème
– Au lieu de définir des tailles statiques, nous
partitionnons la vue en plusieurs blocs
et indiquons quelle part de l'écran les blocs vont
prendre.

• Flex = 1
• Vue rouge: prendre une part
• Vue verte: prendre une part
• Elles ont des parts égales, elles vont se partager l'écran. 60
 30. Vues

• Flex = 1
• Vue rouge: prendre une part
• Vue verte: prendre une part
• Elles ont des parts égales, elles vont se partager l'écran.

61
31. Vues
• Par défaut,
– TOUS les components React Native ont
un style flex à 0;
– Par défaut, un component a un style flex à 0,
– il adapte sa taille en fonction de son
style height et,
– s'il n'a pas de style height, il adapte sa taille en
fonction de celle de ses components enfants.

62
32. Vues
• Exemple:
– On n'a pas défini de style flex. flex = 0 sur toutes
les vues;
• Il n y a pas de height sur la vue globale jaune.
• sa taille dépend entièrement de ses components
enfants : les vues rouge et verte.
• Ces deux components enfants hauteur : 335+335 = 670

63
 33. Vues
• Exemple:
• Ces deux components enfants hauteur :
335+335 = 670
• Observons le rendu sans background vert
• La vue globale jaune ne prend pas tout
l'écran actuellement !

64
 34. Vues
• Exemple:
– si on définit un style flex à 1 pour une vue
– Ainsi on lui dit:
• prends toute la place disponible offerte par ton component
parent et, s'il y a plusieurs components adjacents, partage la
place disponible avec eux
• Elle n'a pas de components adjacents et son component
parent, c'est l’écran. Elle va donc prendre toute la taille de
l'écran.
• La vue rouge va prendre toute la place disponible
– Elle a un component adjacent (la vue verte), donc elle va partager
la place disponible avec elle

65
 35. Vues
• Exemple:
– si on ne définit pas un style flex à 1 pour la vue
globale jaune: What happens?
– La vue jaune a un style flex: 0 et n’a pas de height
• sa taille dépend donc de celle de ses components enfants
• Cependant ses components enfants (vues rouge et verte) se
basent sur la place disponible offerte par le component
parent, la vue jaune
• L’application ne va rien afficher : écran blanc. Car pas
d’entente

66
 36. Vues
• Exemple:
– En pratique:
• Lorsqu’on crée une nouvelle vue, on lui applique tout de
suite un flex style =1

67
 37. Vues
• Exemple:
– En pratique:
• Flex peut prendre d’autres valeurs
– vue rouge prend 1/6 de l'écran ;
– vue verte prend 1/3 (2/6) de l'écran ;
– vue bleue prend 1/2 (3/6) de l'écran.
– N.B: on peut mixer les dimensions
statiques et dynamiques.

68
 38. Vues
• Alignement
– Par défaut: les components possèdent un
style flexDirection: 'column' qui aligne verticalement
les components entre eux.
– Pour modifier la direction de l'alignement entre des
components, il faut modifier le style flexDirection du
component parent.
– Le component parent indique aux components
enfants comment s'aligner.
– flexDirection a 02 valeurs:
• column : alignement vertical.
• row : alignement horizontal.
69
 39. Vues
• Alignement

70
 40. Vues
• Alignement justifié
– Style JustifyContent: définir comment sont distribués
les components enfants sur l'axe principal
– l'axe principal est fonction de l'alignement choisi avec
le style flexDirection :
• flexDirection: 'column‘ implique l'alignement est vertical et
l'axe principal est Y. L'axe secondaire est X.
• flexDirection: 'row‘ implique l'alignement est horizontal et
l'axe principal est X. L'axe secondaire est Y.

71
 41. Vues
• Alignement justifié
• Par défaut, l'alignement est vertical, l'axe principal est donc
Y et l'axe secondaire X.

• Alignement par défaut

de 3 components
50x50

72
 42. Vues
• Alignement justifié
• La valeur center va centrer nos components enfants sur
l'axe principal Y :

73
43. Vues
style justifyContent: 06 Valeurs possibles: ESSAYEZ LES …
center Aligner les éléments au centre
flex-start Aligner les éléments au début
flex-end Aligner les éléments à la fin
Les éléments s'affichent sur tout l'axe et
space-between
laissent de l'espace entre eux.
Pareil que space-between , sauf qu'ici, il y
a de l'espace entre eux et entre les
space-around extrémités de la vue. L'espace aux
extrémités est 2 fois inférieur à l'espace
entre les éléments.
Petit dernier arrivé récemment. Pareil
que space-around , à la différence que
space-evenly
l'espace aux extrémités est le même que
celui entre les éléments.
74
 44. Vues
• Style AlignItems
– AlignItems est équivalent de
justifyContent et il s’applique sur
l'axe secondaire.
– en remplaçant juste le
style justifyContent par
alignItems pour centrer les
éléments sur l'axe secondaire

Style alignItems : center sur

l'axe X
75
45. Vues
alignItems: 04 valeurs : ESSAYEZ LES !

center Aligner les éléments au centre

flex-start Aligner les éléments au début
flex-end Aligner les éléments à la fin
Les éléments s'étirent sur tout l'axe.
Attention, cette propriété fonctionne
uniquement si vous ne définissez pas de
stretch
dimension statique sur l'axe secondaire.
Ici, il ne faut pas définir de width sur les
components enfants.

76
46. Vues
• Cas hybride: justifyContent et AlignItems

Style justifyContent : center sur l'axe Y - alignItems : center sur l'axe X 77

 47. Props
• en React Native, ce sont les propriétés d'un component
• Exemple:

– Style, numberOfLines sont des props de Text

• Chaque component possède ses props qui
correspondent, en soi, à des variables que l'on peut
définir.
• E.g:
– Pour les Component react native:
style , numberOfLines , height , padding , onPress
– Exemple lien de props text
78
 48. Props
• en React Native, ce sont les propriétés d'un
component
• Autre Exemple:

79
49. Props
• On peut créer ses propres props
– Les ajouter à nos components customs
• l'ajout de props sur des components React Native est
certes possible, mais sans effet

• votre texte n'aura pas sa première lettre en rouge car

Text est un component React Native, géré par React
Native, et qui ne connaît pas la prop firstLetterColor

80
50. Props
• On peut créer ses propres props
– Les ajouter à nos components customs (comme
paramètres

Prop: name

Personnaliser le composant
Greeting, afin qu’on puisse
réutiliser ce composant pour
chacun de Greetings
81
51. State
• Props: arguments pour transmettre les valeurs
• State : stockage de données personnelles d'un
composant
– utile pour gérer les données qui changent au fil du
temps ou qui proviennent de l'interaction de
l'utilisateur.
– L'état donne de la mémoire aux composants !
• Règle générale:
– Utiliser props pour configurer un composant lors de
son rendu.
– Utiliser state pour garder une trace de toutes les
données de composantes qui changent au fil du
temps.
82
52. State
• Exemple: source
– L'exemple suivant se déroule dans un café pour
chats où deux chats affamés attendent d'être
nourris. Leur faim, que nous prévoyons de
changer avec le temps (contrairement à leurs
noms), est stockée en tant qu'état. Pour nourrir
les chats, appuyez sur leurs boutons, ce qui mettra
à jour leur état.

83
53. State
• Exemple: source

84
54. State
• Explications
– Dans une classe component, state est stocké dans
un objet state

– Comme pour accéder aux props avec this.props,

on accéde à cet objet dans le composant avec
this.state :

85
55. State
• Explications
– Et on définit des valeurs individuelles à l'intérieur
de l'objet state en passant un objet avec la paire
clé-valeur pour state et sa nouvelle valeur à
this.setState() :

86
56. State
• Explications
– Lorsque this.state.isHungry est false, la prop
disabled du Button est définie à false et son titre
change également :

87
57. State
• Explications
– Enfin, on place les chats dans un composant Café :

88
58. State
• Autres exemples
• Cf. Répertoire
./Codes_Présentation/State/PartieState.2 à 5
• Tester et interpréter les.

89
59. JSX
• JSX signifie JavaScript XML.
– C'est simplement une extension de syntaxe de JavaScript.
– Il permet d'écrire directement du HTML dans React (au
sein du code JavaScript).
– Il est facile de créer un modèle à l'aide de JSX dans React,
mais ce n'est pas un simple langage de modèle, même s’il
est livré avec toute la puissance de JavaScript.
– JS {width: 200, height: 200} = JSX {{width: 200, height:
200}}
– https://fr.reactjs.org/docs/introducing-jsx.html
– https://fr.reactjs.org/docs/jsx-in-depth.html

90
60. IDEs React Native
• Atom

• Visual Studio Code

91
61. IDEs React Native
• IntellJ

• Emacs/Spacemacs/Vim

92
62. IDEs React Native
• Sublime Text

• Deco IDE

93
63. IDEs React Native
• WebStorm

• TexMate Editor

94
64. IDEs React Native
• Nuclide

• TexMate Editor

95
65. React Native Online
• https://snack.expo.dev/. Tester y un exemple

96
VI. TRANSFORMER EN APK ET IOS

97
1.Liens pour APK
• En utilisant Expo
– https://www.youtube.com/watch?v=cws_eQ5LQU
k
– https://www.youtube.com/watch?v=jpvbAORAVw
0
• Autre process
– https://www.youtube.com/watch?v=7OOE4rQf7zI
– https://instabug.com/blog/react-native-app-ios-
android/
• A vous la main
98
2. Liens pour iOS
• En utilisant Expo & Xcode
– https://www.youtube.com/watch?v=O5K0c6_xSc
w
– https://www.youtube.com/watch?v=AqkVuWceCJ
0
– https://instabug.com/blog/react-native-app-ios-
android/
• A vous la main

99
VII.CONCLUSION

100
1. Le Point
• Concepts sur le développement cross-platf.
• Initiation à React Native

• A présent vous pouvez

• Perfectionnez-vous..

• Merci..

101