diff --git a/_posts/fr/2018-04-05-api-platform.md b/_posts/fr/2018-04-05-api-platform.md new file mode 100644 index 000000000..b3da64e48 --- /dev/null +++ b/_posts/fr/2018-04-05-api-platform.md @@ -0,0 +1,279 @@ +--- +layout: post +title: Ta liste des courses avec API Platform +lang: fr +excerpt: "API Plateform se veut être un framework complet permettant de créer des projets web se basant sur des APIs orientées ressource" +authors: + - vdelpeyroux +permalink: /fr/ta-liste-des-courses-avec-api-plateform/ +categories: + - framework + - api + - php + - symfony + - graphql + - javascript + - react + - redux + +tags: + - api platform +cover: /assets/2018-04-05-api-platform/cover.jpg +--- +Dans la continuité de l'article de notre très cher confrère Romain Pierlot sur [Api Platfrom](https://blog.eleven-labs.com/fr/creer-une-api-avec-api-platform/), nous allons essayer de faire le tour des nouvelles fonctionnalités de ce framework, et par la même occasion, mettre en place une application web, comportant une api `REST Hydra` / `Graphql` avec un backend et un client full Javascript. + +Pour les présentations, [API Platform](https://api-platform.com/) se veut être un framework complet permettant de créer des projets web se basant sur des APIs orientées ressource, ce qui est un peu le standard d'architecture des besoins contemporains de notre domaine. + +## Installation d'API Platform + +Commençons par installer ce framework en local. + +Clonons donc ce projet dans notre workspace préféré : + +```shell +git clone git@github.com:api-platform/api-platform.git +cd api-platform +``` +et ensuite mettons-nous sur la dernière version taguée. Au moment où j'écris cet article, la dernière version est la v2.2.5 + +```shell +git checkout tags/v2.2.5 +``` +Ce fichier docker-compose.yml à la racine du projet, ne nous laisse pas indifférent, +allons donc poper ces conteneurs docker de ce pas. +(mes versions : [docker](https://docs.docker.com/install/) :17.05.0-ce [docker-compose](https://docs.docker.com/compose/install/) : 1.18.0) + +```shell +docker-compose up -d +``` + +Passons rapidement en vue les images créées : + +```shell +docker-compose ps +``` + +Il y a donc 6 conteneurs docker : + + - un conteneur php, pour l'api avec PHP 7.2 et php-fpm + - un conteneur db, pour la base de donnée [PostgreSQL](https://www.postgresql.org/) + - un conteneur cache-proxy Varnish + - un conteneur admin pour le backend en [React](https://reactjs.org/) + - un conteneur api, pour le serveur http de l'api [Nginx](https://nginx.org/en/) + - un conteneur client, contenant un client React/[Redux](https://redux.js.org/) + - et un conteneur h2-proxy pour orchestrer toutes ces images en local + +Autant vous dire qu'au niveau des technos, ils ont dépensé sans compter... + +Ouvrons notre navigateur pour aller à l'url [https://localhost](https://localhost) + +Vous allez devoir accepter d'ajouter une exception de sécurité dans votre navigateur par rapport au certificat TLS qui a été généré au moment de l'installation. + +Si vous voyez cette belle page d'accueil, c'est que tout s'est bien passé ! + +![homepage]({{ site.baseurl }}/assets/2018-04-05-api-platform/ready.png) + +## Création de modèle de données + +Pour pouvoir créer notre api, il va falloir décrire nos ressources en codant de simples objets PHP avec leurs propriétés. +Créons pour l'exemple une simple liste de courses, parce que niveau mémoire c'est plus trop ça. +Pour des questions de simplicité on va juste créer une classe shoppingItem et utiliser la vue List que propose le client API Platform que nous verrons plus tard (mais sachez que toutes les relations entre entités sont très bien gérées). + + +```php +id; + } + + public function getIsCheck(): ?string + { + return $this->isCheck ? "yes" : "no"; + } +} +``` + +On va en profiter pour supprimer la classe php de démo api/src/Entity/Greeting.php : + +```shell +rm ./api/src/Entity/Greeting.php +``` + +et exécuter la commande doctrine pour synchroniser la base de données avec notre nouveau model : + +```shell +docker-compose exec php bin/console doctrine:schema:update --force --complete +``` + +Le `--complete` effacera la table `gretting` de la base de données, ce que la commande ne fait pas par défaut. + +Maintenant, ajoutons l'annotation magique d'API Platform à notre entité pour que le framework puisse détecter les propriétés à exposer par l'api et autoriser les opérations CRUD liées à l'objet. + +```php + + + + + {shoppingitemRoutes} +

Not Found

}/> +
+
+ , + document.getElementById('root') +); + +registerServiceWorker(); + +``` + +Concernant le choix des librairies, nous remarquerons que React Router est utilisé pour la navigation, +Redux Form pour gérer les formulaires et Redux Thunk pour gérer les requêtes ou autres traitements asynchrones (désolé pour les redux-saga users), avec une gestion des Services Workers. + + +Nous pouvons maintenant aller à l'url de la vue `list` de notre ressource `shoppingItem`: [https://localhost/shopping_items/](https://localhost/shopping_items/) +Parfait, vous avez votre liste de courses en react/redux qui va bien : + +![listecourse]({{ site.baseurl }}/assets/2018-04-05-api-platform/listcourse.png) + + +## Pour conclure + +Ce framework est vraiment des plus complets. Ce que l'on vient d'aborder ne couvre même pas le quart de ce que propose API Platform dans sa globalité, et toutes ces possibilités se basent sur de bonnes pratiques. + +Le seul point négatif que l'on peut lui trouver c'est son architecture qui est orientée événement, se basant sur le système des events kernel de Symfony. L'avantage est que cela donne une grande liberté pour développer de nouvelles fonctionnalités. + +Cela devient un inconvénient sur de gros projet où l'historique du code produit par moult développeurs, sûrement très bien attentionnés, devient un peu trop conséquent. Cela peut très vite partir dans tout les sens, et au final être un enfer à débugger. + +## À venir + +J'aurais aimé vous parler de l'intégration de FOSuser bundle avec l'autentification JWT, des tests en Behat, PHPUnit, déployer son projet API Platform sur un Kubernites cluster en quelques lignes de commande mais le temps me manque, je vous réserve donc cela pour la prochaine fois. diff --git a/assets/2018-04-05-api-platform/apidoc.png b/assets/2018-04-05-api-platform/apidoc.png new file mode 100644 index 000000000..21642c242 Binary files /dev/null and b/assets/2018-04-05-api-platform/apidoc.png differ diff --git a/assets/2018-04-05-api-platform/backend.png b/assets/2018-04-05-api-platform/backend.png new file mode 100644 index 000000000..aa6d2589a Binary files /dev/null and b/assets/2018-04-05-api-platform/backend.png differ diff --git a/assets/2018-04-05-api-platform/consolegen.png b/assets/2018-04-05-api-platform/consolegen.png new file mode 100644 index 000000000..876ad362f Binary files /dev/null and b/assets/2018-04-05-api-platform/consolegen.png differ diff --git a/assets/2018-04-05-api-platform/cover.jpg b/assets/2018-04-05-api-platform/cover.jpg new file mode 100644 index 000000000..03b249499 Binary files /dev/null and b/assets/2018-04-05-api-platform/cover.jpg differ diff --git a/assets/2018-04-05-api-platform/graphql.png b/assets/2018-04-05-api-platform/graphql.png new file mode 100644 index 000000000..02ed5b0a4 Binary files /dev/null and b/assets/2018-04-05-api-platform/graphql.png differ diff --git a/assets/2018-04-05-api-platform/listcourse.png b/assets/2018-04-05-api-platform/listcourse.png new file mode 100644 index 000000000..e2c078f17 Binary files /dev/null and b/assets/2018-04-05-api-platform/listcourse.png differ diff --git a/assets/2018-04-05-api-platform/ready.png b/assets/2018-04-05-api-platform/ready.png new file mode 100644 index 000000000..11864ddbb Binary files /dev/null and b/assets/2018-04-05-api-platform/ready.png differ