mission Game of Thrones 8

Créé en 2018 et modifié le 20 Feb 2020

Créé en 2018 et modifié le 20 Feb 2020

Déploiement du projet

  • Déployer le projet dans une instance PHP, Python et NodeJS (pas de localhost).
  • Déployer votre base de données en ligne (pas de localhost)

Documentation du projet

frebourg-ninja-swagger

 

Amélioration du projet

  • Améliorer l’application pour disposer d’une interface WEB avec Bootstrap des différentes routes
    • pour SLIM
    • pour NODEJS
    • pour FLASK

 

What else ?

  • Enregistrer les fichiers dans un répertoire got8  sous Gitlab.

 

mission Game of Thrones 7

Réaliser des graphiques dynamiques

 

On utilise Chartjs pour générer des graphiques dynamiques. Il existe d’autres bibliothèques.

 

frebourg-ninja-diagramme

 

 

  • Réaliser une page statistiques.html et afficher les deux charts suivants :
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" ></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>

<div class="container">
<div class="row justify-content-md-center">
<div class="col-10">
<canvas id="myChart" ></canvas>
<canvas id="myChart2" ></canvas>
</div>
</div>
</div>
<script>
var backgroundColor=[
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
[...]

mission Game of Thrones 6

Authentification avec jeton

JSON Web Token (JWT) est un standard ouvert défini dans la RFC 7519. Disponible dans la plupart des langages pour l’échange sécurisé de jeton. On pourra obtenir les extensions nécessaires sur le site jwt.io.

 

JWT avec SLIM

  • Ajouter JWT grâce à composer.
composer require firebase/php-jwt
  • Permettre à un utilisateur d’obtenir un jeton valable 30 minutes lors de la connexion au site grâce à l’URI /obtentionToken. On enregistrera ce jeton en session JavaScript.
  • En cas d’erreur à la connexion (login et mot de passe incorrect) le serveur renverra un code HTTP 401 Unauthorized . Codes de réponse HTTP : https://developer.mozilla.org/fr/docs/Web/HTTP/Status

Exemple de code client

 $( "#btn-valide").click(function(event) {
$.ajax({
type: "GET",
url: urlServeur+"/obtentionToken",
[...]

mission Game of Thrones 5

Réaliser son API avec put et delete

Réaliser les routes pour les API SLIM, NodeJS et Flask.

URI avec attribut – DELETE /user/{id}

  • Implémenter l’URI qui supprime un utilisateur spécifique.

URI avec paramètre – PUT /user

  • Implémenter l’URI qui modifie l’email d’un utilisateur.

URI – GET /personnages

  • Implémenter l’URI qui renvoie en JSON le nom et le titre et la culture des 100 premiers personnages.
  • Réaliser une page personnages.html qui affiche grâce au plugin Bootsrap Table les personnages.

Déploiement

  • Déployer le projet

Pour le déploiement coté serveur avec SLIM

dans un fichier .htaccess
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^ index.php [QSA,L]
Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept"
Header set Access-Control-Allow-Methods: "GET,POST,OPTIONS,DELETE,PUT"
dans un fichier composer.json
{
"require": {
"php": "7.*",
"ext-mbstring": "*",
"ext-mysqli": "*",
"ext-json": "*",
"ext-pdo": "*",
"ext-pdo_mysql": "*",
"slim/slim": "3.*",
"zircote/swagger-php": "^2.0",
[...]

mission Game of Thrones 4

Réaliser son API avec get et post

On souhaite maintenant faire correspondre nos classes avec la base de données suivante:
https://gitlab.com/cherryclass/got/blob/master/got.sql

  • Instancier la base de données avec AWS ou IBM Cloud.
  • Réaliser le diagramme physique de données correspondant.
  • Réaliser le diagramme de classe correspondant.
  • Ajouter un menu qui permet de choisir entre l’application PHP (mission 1 et 2), l’utilisation de l’API (3) et les API Slim, NodeJS et Flask.

 

API PHP avec SLIM

Slim est un micro Framework pour PHP.

 

Première URI – GET /bonjour

  • Installer composer, puis dans le répertoire “got/serveur” du serveur web en PHP7, grâce à une invite de commande, exécuter :
composer require slim/slim "3"
  • Réaliser une page firstSlim.html dans le répertoire “got/client” du serveur web qui appelle une URL  ‘bonjour’ sur le serveur SLIM grâce à Ajax avec la méthode GET. On pourra s’aider de l’extension RESTED pour tester l’URI.
  • Le serveur devra renvoyer bonjour qui sera affiché par la page d’appel.

Exemple de code client functionSlim.js

$( document ).ready(function() {

$('#btn-valide').click(function(){
$.ajax({
type: "GET",
contentType: 'application/json; charset=utf-8',
url: "http://localhost/got/serveur/bonjour",
[...]

mission Game of Thrones 3

Utiliser une API

  • Afficher les villes de l’API api.got.show au format JSON grâce à RESTED, extension de navigateur ou Postman. (API secours  :https://anapioficeandfire.com/)
  • Afficher les cultures et observer les données dans la console du navigateur.
  • Réaliser une page villes.html qui affiche toutes les villes. On utilisera le plugin Bootstrap Table avec un appel Ajax pour générer le tableau depuis du JSON.
$('#btn-get-gateaux').click(function () {
$('#table-gateau').bootstrapTable({
url: 'http://localhost/api-gateau/gateaux',
columns: [{
field: 'id',
title: 'Item ID'
}, {
field: 'nom',
title: 'Item Name'
},]
});
});
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <!--tables-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.js"></script>


<script src="js/index.js?v=1"></script>


<div class="col-md-8 col-lg-6">


<table
  id="table" 
  data-data-field="data">
  
</table>
</div>

Attention , prendre la dernière version, regarder la doc https://examples.bootstrap-table.com/#options/total-data-field.html

  • Tester grâce à IntelliJ une requête http qui permette d’afficher toutes les maisons.
  • Réaliser une page maisons.hml selon le même principe.
  • Réaliser un formulaire ville.html qui permette de saisir un nom de ville et d’afficher ces informations grâce à une requête Ajax.
  • Réaliser un formulaire personnage.html selon le meme principe.
  • Obtenir les informations de la maison du […]

API

– support thrones finder otelo

On désigne par interface de programmation applicative API un ensemble normalisé de code permettant de fournir des services à d’autres logiciels dans d’autres runtime d’exécution éventuellement. Elles sont très utilisées par les applications modernes. On utilise des fonctionnalités fournies par un tiers.

Les grands acteurs du web proposent leur API notamment Google, Amazon, Facebook, IBM. On peut citer Google Maps Android API, Social Plugins de Facebook par exemple.
Ces interactions entre application permettent une monétisation des échanges de manière automatique selon la fréquence et la charge d’utilisation. Les fournisseurs proposent une documentation pour utiliser leur application mais très rarement une documentation de la logique applicative, ceci pour éviter toute falsification.

Ces API proposent principalement un échange d’information dans un format standard, le JSON sur le protocole HTTP.

 

 

Open API

Les API ouvertes révolutionnent l’ensemble de l’écosystème applicatif. Elles donnent accès à une partie des données aux développeurs tiers (qui ne font pas partie de l’organisation). Ces développeurs peuvent ainsi tirer profit de ces services pour améliorer leur propre application moyennant rétribution au fournisseur. Il n’y a pas de lien commercial direct, la souscription de […]

Go to Top