Finder 0

Utiliser une API

On souhaite réaliser un moteur de recherche d’hôtel. Le moteur de recherche proposera d’indiquer une date de début, une date de fin et une catégorie de chambre. En fonction de ces informations, le moteur affichera une liste de chambres disponibles avec un prix pour les dates sélectionnées et la catégorie choisie. Les valeurs seront obtenues grâce aux API fournies par les hôtels Amor, Byzance, et Caraïbes. On améliorera par la suite les données en sélectionnant d’autres options. On pourra ensuite réaliser une réservation sur l’un des hôtels.

 

Intro

• réaliser un diagramme de séquence pour visualiser la recherche. On pourra utiliser https://app.diagrams.net/

Partie 1 – utiliser une API

Livrable gitlab : finder/mission0/…

• accéder à l’url https://frebourg.es/api/index.php/chambres et observer les données.
• observer les données dans la console du navigateur.

 

 

• afficher les chambres de l’API https://frebourg.es/api/index.php grâce à la route chambres, URI  /chambres et la méthode GET. On utilisera ici Postman. Ce logiciel permettra d’appeler d’autres méthodes HTTP que GET.

 

Partie 2 – réaliser un client d’une API

Livrable gitlab : finder/mission0/…

 

• afficher Bonjour grâce à VueJS

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>



<div id="app">
{{message}}
</div>


<script>   
        var app =new Vue({
          el: '#app',
          data () {
            return {
             message: 'Hello Vue !',
              info: null
            }
          }
        })
  </script>

 

• réaliser une page chambres.html qui affiche toutes les chambres. On utilisera VueJS avec un appel Ajax pour générer le tableau depuis du JSON.
• En cas d’erreur CORS, installer l’API et la bd HotelA
  https://gitlab.com/cherryclass/finder2

 

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

 

<div id="app">
<template>
    <div class="table-responsive">
        <table class="table-hover" v-if="info">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Status</th>
                    <th>Title</th>
                    <th>Summary</th>
                
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in info">
                    <td>{{ item.id }}</td>
                    <td>{{ item.status }}</td>
                    <td>{{ item.title }}</td>
                    <td>{{ item.summary }}</td>
                 
                </tr>
            </tbody>
        </table>
    </div>
</template>
</div>

<script>
new Vue({
  el: '#app',
  data () {
    return {
      info: null
    }
  },
  mounted () {
        axios({
      method: 'get',
       // a changer
      url: 'https://zaza',
      responseType: 'json',
     /* data: {
        firstName: 'Fred',
        lastName: 'Flintstone'
      }*/
    })
       .then(async res => { 
         if(res.status === 200) { 
               alert('Ok!');
              // a changer pour obtneir le tableau de data
               this.info=res;
          } else if(res.status === 400) { 
              let errorResponse = await res.json(); this.errors.push(errorResponse.error); }
       });
  }
})
</script>

 

• réaliser une page disponibilites.hml grâce à la route disponibilites, uri /disponibilites méthode GET selon le même principe. Cette uri nécessite trois variables http cat, dated et datef. Exemple d’appel :

  https://frebourg.es/api/index.php/disponibilites?cat=standard&dated=2020-12-12&datef=2020-12-13

• réaliser un formulaire chambre.html grâce à la route chambre, uri /chambre/{id}, méthode GET qui permet de saisir l’identifiant d’une chambre et d’afficher ces informations grâce à une requête Ajax. Exemple d’appel :

  https://frebourg.es/api/index.php/chambre/6

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<div id="app">
  <button v-on:click="ajax(idc)">valider</button>
  <input v-model="idc" placeholder="numéro de chambre"/>
<p>Le message est : {{ idc }}</p>
<template>
    <div class="table-responsive">
        <table class="table-hover" v-if="info">
            <thead>
                <tr>
                    <th>id</th>
                    <th>nbCouchage</th>
                    <th>porte</th>
                    <th>etage</th>
                    <th>idCategorie</th>
                    <th>baignoire</th>
                    <th>prixBase</th>                  
                </tr>
            </thead>
            <tbody>              
                <tr v-for="item in info">
                    <td>{{ item.id }}</td>
                    <td>{{ item.nbCouchage }}</td>
                    <td>{{ item.porte }}</td>
                    <td>{{ item.etage }}</td>
                    <td>{{ item.idCategorie }}</td>
                    <td>{{ item.baignoire }}</td>
                    <td>{{ item.prixBase }}</td>                  
                </tr>
            </tbody>
        </table>
    </div>
</template>
</div>


<script>
        var app =new Vue({
          el: '#app',
          data () {
            return {
              info: null,
              idc: 0,
              message:''    
            }
          },
          methods: {
            ajax: function (idc, event) {
            axios({
              method: 'get',
              url: 'http://help.frebourg.es/api/index.php/chambre/'+idc,
              responseType: 'json',    
            })
               .then(async res => { 
                 if(res.status === 200) { 
                       alert('Ok!');
                       this.info=res.data;                     
                  } else if(res.status === 400) { 
                      let errorResponse = await res.json(); this.errors.push(errorResponse.error); }
               })  
            }
            }
        })
        </script>