forked from hakimel/reveal.js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
tp1.html
244 lines (223 loc) · 9.76 KB
/
tp1.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>TP1</title>
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/night.css">
<!-- Theme used for syntax highlighting of code -->
<link rel="stylesheet" href="lib/css/zenburn.css">
<!-- Printing and PDF exports -->
<script>
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match(/print-pdf/gi) ? 'css/print/pdf.css'
: 'css/print/paper.css';
document.getElementsByTagName('head')[0].appendChild(link);
</script>
</head>
<body>
<div class="reveal">
<div class="slides">
<section>
<h2>Compléments d'informatique : Quelques notions pour le TP1</h2>
</section>
<section data-background="images/noun_Book_1181934">
<h1 > Cours </h1>
</section>
<section>
<section>
<h3>Un grand principe : separation of concern</h3>
<a
href="https://docs.microsoft.com/en-us/dotnet/architecture/modern-web-apps-azure/common-web-application-architectures">
<img class="plain"
src="https://docs.microsoft.com/en-us/dotnet/architecture/modern-web-apps-azure/media/image5-2.png"
alt="3 layers">
</a>
<aside class="notes">Version macro en 3 couches.
<ul>
<li>Présentation : tout ce qui se charge de l'affichage</li>
<li>Business : c'est le métier de votre application, sa plu value</li>
<li>Data : gère le stokage. Plus de détails dans quelques minutes</li>
</ul>
Chaque couche communique avec celles adjacentes. Une couche à juste à savoir comment elle
doit demander une information et ce qu'on lui retourne
</aside>
</section>
<section><h2>User Interface</h2><ul>
<li class="fragment">Interface-Homme-Machine qui sera ici la console / Main de votre application</li>
<li class="fragment">Dans la vraie vie : Une application mobile / une page web / l'interface graphique d'un jeu</li>
</ul></section>
<section><h2>Business Logic</h2>
<ul>
<li class="fragment">Couche métier de l'application dans laquelle l'on définit les différents objets qui interagiront et qui seront sauvegardés par ailleurs</li>
<li class="fragment">Dans la vraie vie : Une application mobile / une page web / l'interface graphique d'un jeu</li>
<li class="fragment"> Elle sera ici également utilisée pour l'appel aux services que nous verrons dans de futurs tps !</li>
</ul>
</section>
<section><h2>Data Access</h2><ul>
<li class="fragment">Couche interagissant avec la base de données de l'application</li>
<li class="fragment">C'est ici que sera réalisée la persistance de nos données métier (Avengers ici)</li>
<li class="fragment">Expose classiquement les méthodes CRUD : Create Read Update Delete</li>
</ul></section>
<section>
<h3>Separation of concern : bilan</h3>
<ul>
<li class="fragment">Décomposition d'un programme en modules simples <span class="important">cohérents</span></li>
<li class="fragment">Les modules <span class="important">exposent</span> des méthodes utilisables par d'autres
modules
</li>
<li class="fragment" >Chaque module doit être une <span class="important">boîte noire</span> pour les autres (ce qui
importe c'est les
entrées/sorties)
</li>
<li class="fragment">Si on garde les mêmes <span class="important">entrées/sorties</span> on peut changer un module
sans risque
</li>
</ul>
<aside class="notes">
Module archi != module python
Couche c'est quand on a des modules empilés (beaucoup de voc à assimiler d'un coup)
<br>
Faire un dessin avec et sans. Expliquer que c'est le boulot d'un objet métier
de dire comme il s'affiche et comment on le stock. Pareil c'est pa le boulot d'une vue de
faire un calcul. Par contre une vue peut demander.
<br>
Bien insiter sur "l'indépendance des couches". Théoriquement si deux personnes travaillent sur 2
couches et se sont mise d'accord sur comment elles communiquent le travail peut se faire en
parallèle.
</aside>
</section>
</section>
<section>
<section>
<h2>Comment récupérer le tp? </h2>
</section>
<section data-background="https://hackernoon.com/hn-images/1*zm5NLjdhGd3VVTA2u-xEPg.gif" data-background-size="contain" ></section>
<section>Bon du coup comme vous l'avez bien deviné, on va récupérer ça sur github ici : <a href="https://github.com/Ragatzino/2019Ensai_complement-info_TP1">https://github.com/Ragatzino/2019Ensai_complement-info_TP1</a></section>
</section>
</section>
<section>
<section data-background="image/git_logo.png"
data-background-repeat="repeat" data-background-size="100px">
<h1>Git</h1>
</section>
<section>
<h2>Introduction a Git 1/2</h2>
<ul>
<li class="fragment">Git: Logiciel de version décentralisé
</li>
<li class="fragment">Permet un partage efficace et sécurisé du code entre différents utilisateurs </li>
<li class="fragment">Permet une parallélisation des taches de travail en utilisant des branches </li>
<li class="fragment">Versionning pour l'équipe projet</li>
<li class="fragment">Gestions des conflits lors du travail sur les mêmes bouts de code </li>
</ul>
</section>
<section>
<h2>Introduction a Git 2/2</h2>
<ul>
<li class="fragment">Création facilitées de dépots pour les projet
</li>
<li class="fragment">Relecture facilitée du code avec outils d'observation devOps: GitHub/ GitLab </li>
<li class="fragment">Historique du code disponible sur les espaces ou Repository aux travers des commits (messages)</li>
<li class="fragment">Versionning pour l'équipe projet</li>
</ul>
</section>
<section>
<h3>Récupérer le TP via git bash</h3>
<ul>
<li class="fragment">Cloner un répertoire <b>distant</b> dans un dossier <b>local</b>
<pre><code>git clone url-github nom-de-dossier-pour-cloner</code></pre>
</li>
<li class="fragment">Ajoute tous les fichiers du répertoire à l'index Git
<pre><code>git add .</code></pre>
</li>
<li class="fragment">Envoie l'ensemble des fichiers de l'index sur le repository local
<pre><code>git commit -m "message de commit"</code></pre>
</li>
</ul>
</section>
</section>
</section>
<section>
<section data-background="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/217d5ea0-623d-40b1-9b31-027b904a5f15/dccudp7-221d1133-f3c3-48eb-a72c-c511828a1ff4.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzIxN2Q1ZWEwLTYyM2QtNDBiMS05YjMxLTAyN2I5MDRhNWYxNVwvZGNjdWRwNy0yMjFkMTEzMy1mM2MzLTQ4ZWItYTcyYy1jNTExODI4YTFmZjQucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.S3JJltb4zsHM7mjDs1sVLVZ-wvzkhEn_GfflenFMc6I"
data-background-repeat="repeat" data-background-size="100px">
<h1>Pour le tp</h1>
</section>
<section
>
<h1>Pycharm</h1>
<ul>
<li class="fragment">Plus adapté que spyder pour le développement d'application
</li>
<li class="fragment">VSCode est également très bon dernièrement
</li>
</section>
<section>
<h1>Psycopg2</h1>
<ul>
<li class="fragment">Librairie la plus populaire pour faire de la DAO en python
</li>
<li class="fragment">Permet de traiter l'injection SQL en filtrant certains caractères spéciaux
</li>
</ul>
</section>
<section>
<h2>Injection SQL </h2>
<ul>
<li class="fragment">
<pre>SELECT * from admins WHERE login='admin' AND password='$password'</pre>
</li>
<li class="fragment">Imaginons qu'on envoie, pour password la valeur : " 'OR 1=1 -- "</li>
<li class="fragment">
<pre>SELECT * from admins WHERE login='admin' AND password='' OR 1=1</pre>
</li>
<li class="fragment">L'utilisateur arrive alors à s'authentifier et accéder à l'application !
</li>
</ul>
<li class="fragment"><a href="https://www.youtube.com/watch?v=ciNHn38EyRcé">Petite vidéo classique et simpa sur le sujet </a>
</li>
</ul>
</section>
</section>
<section>
<h1>Maintenant TP !</h1>
</section>
</div>
</div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.js"></script>
<script>
// More info about config & dependencies:
// - https://github.com/hakimel/reveal.js#configuration
// - https://github.com/hakimel/reveal.js#dependencies
Reveal.initialize({
dependencies: [{
src: 'plugin/markdown/marked.js'
}, {
src: 'plugin/markdown/markdown.js'
}, {
src: 'plugin/notes/notes.js',
async: true
}, {
src: 'plugin/highlight/highlight.js',
async: true,
callback: function () {
hljs.initHighlightingOnLoad();
}
}],
// Display the page number of the current slide
slideNumber: true,
// Push each slide change to the browser history
history: true,
// Enable slide navigation via mouse wheel
mouseWheel: true,
// width : "80%",
// height : "80%"
});
Reveal.configure({ slideNumber: 'c/t' });
</script>
</body>
</html>