# Kata-API Speedrun
<br>
<center>— Réalisation du <a href="https://github.com/epfl-dojo/Kata-API">Kata-API</a> en version rapide —</center>
<br>
<br>
<small>EPFL/IDEV-FSD // Jérôme Cosandey // <a href="jerome.cosandey@epfl.ch">jerome.cosandey@epfl.ch</a> // 2021-02-19</small>
<!-- .slide: data-background="https://i.imgur.com/q3FyR0X.jpg" data-contrast="on" -->
<!-- credit photo: https://unsplash.com/photos/_R95VMWyn7A -->
----
## Déroulement
Le déroulement de la présentation du jour est le suivant :
- **~15 minutes** : Théorie - Placement du cadre de la présentation
- **temps restant** : Mise en pratique de la théorie (démo speedrun)
note:
Shhh, these are your private notes 📝
// 10 premières minutes : poser le cadre
//
* First use <kbd>s</kbd> for speaker view
* Use <kbd>ctrl</kbd>+<kbd>click</kbd> to zoom
* Use <kbd>b</kbd> and slide go black
* Use <kbd>esc</kbd> to view all slide
---
# Introduction : dojos et katas
<!-- .slide: data-background="https://i.imgur.com/Itvdk8G.jpg" data-contrast="on" -->
<!-- credit photo: https://unsplash.com/photos/vbxyFxlgpjM -->
----
## Principes des Dojo
* Tournus toutes les 5 min
* Pose d'objectifs
* Capacité d'adaptation
* Découvertes de nouvelles technos
* Partage de connaissances
----
## Principe d'un Kata
* Une personne cherche à atteindre un objectif en moins d'une heure et les autres regardent
note:
Les dojos ont pour but de faire des découvertes, échanger, et sortir de notre zone de confort. Cette présentation va se faire en deux étapes :
* Cette présentation
* La démonstration
---
# Kata-API ?
<!-- .slide: data-background="https://i.imgur.com/NYgTnVz.jpg" data-contrast="on" -->
<!-- credit photo: https://unsplash.com/photos/EUO7L470LXk -->
----
## C'est quoi ?
Création d'une simple API fonctionnelle avec CRUD sur les différentes tables d'une base de données MySQL contenant des bières, leurs styles et les brasseries.
<center><a href="https://github.com/epfl-dojo/Kata-API">https://github.com/epfl-dojo/Kata-API</a></center>
----
## Compétences et aspects sollicités
* <span>Intégration de Docker dans un projet<!-- .element: class="fragment" data-fragment-index="1" --></span>
* <span>Création et utilisation d'une API<!-- .element: class="fragment" data-fragment-index="2" --></span>
* <span>Utilisation des méthodes HTTP<!-- .element: class="fragment" data-fragment-index="3" --></span>
note:
Le but de ce kata est de pouvoir faire une simple API FONCTIONNELLE avec documentation des endpoints avec le language/framework de notre choix.
L'API est connectée à une base de données et peut effectuer les 4 principales opérations (CRUD).
---
## Introduction : speedrun
<!-- .slide: data-background="https://i.imgur.com/gKpC9v2.jpg" data-contrast="on" -->
<!-- credit photo: https://unsplash.com/photos/iRnUeA04kUY -->
----
### Qu'est-ce qu'un speedrun ?
>Le speedrun est une pratique liée aux jeux vidéo dans laquelle le but est d'atteindre le plus rapidement possible un objectif donné
<cite>https://fr.wikipedia.org/wiki/Speedrun</cite>
Qui a dit que le DEV n'est pas un jeu ? 😉<br>
Dans ce cas-ci, le but de ce speedrun est de faire une API en moins d'une heure avec Laravel.
note:
Le but de ce speedrun est de pouvoir faire une simple API FONCTIONNELLE avec documentation des endpoints en moins d'une heure sur Laravel à partir d'un repos qui contient une DB.
---
# Technologies
Les slides suivants expliquent les technologies utilisées.
<!-- .slide: data-background="https://i.imgur.com/8vMXg9z.jpg" data-contrast="on" -->
<!-- credit photo: https://unsplash.com/photos/bN5XdU-bap4 -->
----
## Technologie : Laravel
> Laravel est un framework web open-source écrit en PHP respectant le principe modèle-vue-contrôleur et entièrement développé en programmation orientée objet. Laravel est distribué sous licence MIT, avec ses sources hébergées sur GitHub.
<cite>https://fr.wikipedia.org/wiki/Laravel</cite>
<center><a href="https://laravel.com/">https://laravel.com/</a></center>
----
## Technologie : Laravel
* <span>[MVC](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller) : (Modèle - Vue - Controlleur)<!-- .element: class="fragment" data-fragment-index="1" --></span>
* <span>[Eloquent](https://laravel.com/docs/8.x/eloquent) : l'[ORM](https://fr.wikipedia.org/wiki/Mapping_objet-relationnel) de Laravel<!-- .element: class="fragment" data-fragment-index="2" --></span>
* <span>[Blade](https://laravel.com/docs/8.x/blade) : le moteur de template de Laravel<!-- .element: class="fragment" data-fragment-index="3" --></span>
----
## Technologie : artisan et composer
* <span>[Artisan](https://laravel.com/docs/8.x/artisan) : c'est l'interface en ligne de commande fournie avec Laravel<!-- .element: class="fragment" data-fragment-index="1" --></span>
* <span>Artisan permet de gérer l'application, ainsi que générer du code (classes, modèles) automatiquement. Le mécanisme est plus ou moins similaire au "scaffolding" de Ruby on Rails.<!-- .element: class="fragment" data-fragment-index="2" --></span>
* <span>[Composer](https://getcomposer.org/) : est à PHP ce que `npm` est à node.js<!-- .element: class="fragment" data-fragment-index="3" --></span>
----
## Technologie : docker
<center><a href="https://docker.com/">https://docker.com/</a></center>
Les différents services du `docker-compose.yml` qui seront utilisés sont :
* <span>[Nginx](https://www.nginx.com/) - Le serveur web. Envoie, reçoit et traite les requêtes HTTP<!-- .element: class="fragment" data-fragment-index="1" --></span>
* <span>[PHP-fpm](https://www.php.net/manual/en/install.fpm.php) - Interprète le PHP<!-- .element: class="fragment" data-fragment-index="2" --></span>
* <span>[MariaDB](https://mariadb.org/) - Système de gestion de base de données (DBMS)<!-- .element: class="fragment" data-fragment-index="3" --></span>
* <span>[Adminer](https://www.adminer.org/) - Interface web pour la gestion de la DB<!-- .element: class="fragment" data-fragment-index="4" --></span>
----
## Technologie : API REST / HTTP
>REST est un ensemble de principes architecturaux. Il ne s'agit ni d'un protocole, ni d'une norme (...)
<cite>https://www.redhat.com/fr/topics/api/what-is-a-rest-api</cite>
Il s'agit d'une API sans état (stateless), c'est à dire, entre autres, qui ne stock pas de données entre deux requêtes. ([#idempotence](https://fr.wikipedia.org/wiki/Idempotence))
----
## Technologie : API REST / HTTP
Les [méthodes HTTP](https://developer.mozilla.org/fr/docs/Web/HTTP/M%C3%A9thode) que l'on va utiliser :
* [POST](https://developer.mozilla.org/fr/docs/Web/HTTP/M%C3%A9thode/GET) - Pour le **C**REATE
* [GET](https://developer.mozilla.org/fr/docs/Web/HTTP/M%C3%A9thode/GET) - Pour le **R**EAD
* [PUT](https://developer.mozilla.org/fr/docs/Web/HTTP/M%C3%A9thode/PUT) - Pour le **U**PDATE
* [DELETE](https://developer.mozilla.org/fr/docs/Web/HTTP/M%C3%A9thode/DELETE) - Pour le **D**ELETE
* [PATCH](https://developer.mozilla.org/fr/docs/Web/HTTP/M%C3%A9thode/PATCH) - Pour une UPDATE partielle
----
## Technologie : swagger
<center><a href="https://swagger.io/">https://swagger.io/</a></center>
Swagger est un langage de description d'interface se basant sur les standards définis dans l'[OAS](https://www.openapis.org/) (Open API Specifications) qui permet rapidement et proprement de documenter les différents endpoints d'une API.
---
# Déroulement
Ce qu'on va faire, dans les grandes lignes...
<!-- .slide: data-background="https://i.imgur.com/lQsYmUB.jpg" data-contrast="on" -->
<!-- credit photo: https://unsplash.com/photos/PHyF2mCMei0 -->
----
## Déroulement
1. Clone du repo Kata-API
1. Création de l'environnement Docker
1. Installation de module laravel
1. Confirmer la connexion de la DB
1. Création des modèles depuis la DB
1. Création des routes de l'API
1. Création des controlleurs
1. Documentation Swagger
1. Test postman et démo finale
----
## Let's go
<!--
This style apply by default to all slides, unless .slide is used.
Note the use of the reveal class selector: this mean that only the presentation is affected by this style, and the makrdown preview or the book mode of hackmd.io is style intact.
If you want/need a resizable background image, add the background-size: cover; property and change background-position: 0px 0px;
-->
<style>
.reveal {
background-color: #e6e6e6;
background-image: url('https://epfl-si.github.io/elements/svg/epfl-logo.svg');
background-repeat: no-repeat;
background-position: 5px 5px;
}
.reveal {
color: #111;
}
.reveal h1, .reveal h2, .reveal h3,
.reveal h4, .reveal h5, .reveal h6 {
color: #212121;
}
.reveal a {
color: #f009;
}
.reveal a:hover {
color: #f00;
}
.reveal .more {
color: #339;
}
.reveal code {
padding-top: 0.2em;
padding-bottom: 0.2em;
margin: 0;
font-size: 85%;
background-color: rgba(255, 255, 255, 0.46);
border-radius: 3px;
}
[data-contrast="on"] > div {
background-color: #ffffff50;
}
[data-contrast="on+"] > div {
background-color: #ffffff99;
}
/* https://stackoverflow.com/a/39614958/960623 */
img[alt$=">"] {
float: right;
}
img[alt$="<"] {
float: left;
}
img[alt$="><"] {
display: block;
max-width: 100%;
height: auto;
margin: auto;
float: none!important;
}
.reveal section img[alt$="logo"] { border: 0 }
.reveal h1 { font-size: 2em; }
.reveal h2 { font-size: 1.6em; }
.reveal h3 { font-size: 1.4em; }
.reveal h4 { font-size: 1.2em; }
.reveal h5 { font-size: 1.1em; }
.border { border: 1px solid #555; }
.reveal blockquote { width: 100% }
.reveal blockquote:before {
display: block;
padding-left: 10px;
content: "\201C";
font-size: 80px;
position: absolute;
left: -20px;
top: -20px;
color: #7a7a7a;
}
.reveal cite:before { content: "\2009 \2015 \2009"; }
.reveal cite { font-size: 80%; }
.reveal code {
color: #fff;
background-color: #101010;
border-radius: 3px;
font-family: courier, monospace;
padding: 0 3px;
font-size: 0.8em;
}
.reveal .footer1 {
position: absolute;
bottom: 1em;
left: 1em;
font-size: 0.5em;
}
.footer2 {}
position: absolute;
bottom: 0%;
left: 0%;
}
</style>
{"metaMigratedAt":"2023-06-15T19:56:45.244Z","metaMigratedFrom":"YAML","title":"Kata-API sur Laravel \"speedrun\"","breaks":true,"description":"Présentation du Kata-API \"speedrun\" avec Laravel","slideOptions":"{\"transition\":\"slide\",\"theme\":\"simple\",\"spotlight\":{\"enabled\":false},\"progress\":true}","contributors":"[{\"id\":\"15e97034-fba0-4fd9-a32d-9c5eb1dd654d\",\"add\":4050,\"del\":932},{\"id\":\"98cf1d10-5049-49ca-9160-3f2e67fc1067\",\"add\":8664,\"del\":1094}]"}