Introduction

Dans le cadre d’un projet d’informatique, j’ai dû développer une API pour une application mobile. Celle-ci devait interagir avec un site internet, déjà fonctionnel, pour récupérer des informations présentes dans la base de données. Afin de pouvoir récupérer ces données, une API était nécessaire.

Afin de faciliter la compréhension du processus de mise en place, je donnerai des exemples d’un site web fictif. Disons que nous développons un site internet permettant de vendre des objets, type Amazon. Ce sera bien entendu une version très simplifiée de ce concept.

Dans cet article, l’API ne sera pas sécurisée, il faudra donc voir quelle utilisation vous voulez en faire et savoir si une sécurisation est nécessaire, mais je le recommande fortement.

La création de l’API est totalement indépendante de Ionic, vous pouvez très bien créer une API pour CodeIgniter avec ce tutoriel et l’utiliser avec n’importe quel autre moyen.

Qu’est-ce qu’une API ?

J’ai eu de la peine à commencer, puisque la notion d’API n’était pas claire pour moi. Après quelques recherches et le visionnage de quelques vidéos, je m’étais fait une bonne idée de la chose.

Une API est en fait un fichier, présent sur le serveur sur lequel se trouve la base de données, qui permet de récupérer des données envoyées par un service externe (dans mon cas une application mobile) ou de lui en envoyer. Tout ceci se fait, en général, en format JSON.

Différences entre GET et POST

Il existe plusieurs types de requêtes que l’on peut effectuer vers une API, nous nous intéresserons uniquement aux requêtes GET et POST dans cet article.

Une requête GET est utilisée lorsque l’on veut récupérer de l’information qui est dans la base de données. Une requête POST est utilisée lorsque l’on veut envoyer de nouvelles données dans la base de données.

Structure de l’url de la requête

Une requête à l’API s’effectue via une url. Pour ce faire, il faut que vous identifiez le chemin de votre fichier API (dans cet article, nommé Api.php). Par exemple, si vous l’avez mis directement dans votre dossier controllers, il vous suffira alors d’utiliser l’url suivante :

http://url_de_votre_site/api/action_a_effectuer/valeur_a_utiliser

La partie valeur_a_utiliser correspond par exemple à l’id de l’annonce que l’on veut afficher, tout ceci sera plus claire dans la partie Code.

Code

Fonction permettant d’afficher une annonce

Commençons par une simple fonction, permettant d’afficher une annonce d’un objet en vente sur le site. Pour ce faire, il faut tout d’abord créer un nouveau Controller dans le dossier « controllers ». Vous pouvez lui donner le nom que vous voulez, dans cet exemple, le nom sera Api.php.

Ensuite, il faut créer une fonction index_get, qui sera exécutée lorsqu’une requête GET sera envoyée à l’API. Ce nom n’est pas modifiable, il faut l’appeler ainsi.

    // La variable keyword permet de connaitre l'action a effectuer (affichage, ajout, etc.)
    // La variable requete contient la requete de la part de l'application (par exemple un id de produit)
    public function index_get($keyword, $requete){
        // Code permettant de faire fonctionner l'API
        //http://stackoverflow.com/questions/18382740/cors-not-working-php
        if (isset($_SERVER['HTTP_ORIGIN'])) {
            header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}");
            header('Access-Control-Allow-Credentials: true');
            header('Access-Control-Max-Age: 86400');    // cache for 1 day
        }
         
        // Access-Control headers are received during OPTIONS requests
        if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
         
            if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD']))
               header("Access-Control-Allow-Methods: GET, POST, OPTIONS");         
             
            if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']))
               header("Access-Control-Allow-Headers: {$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}");
             
            exit(0);
        }

        /* Partie permettant de definir l'action a effectuer par l'API
        * Il y aura donc une fonction d'affichage et une d'ajout
        */
        if($keyword == "showone"){
            $this->showOne($requete);
        }
    }

Une fois cette fonction créée, il reste encore à définir la fonction showOne et à la lier avec une action de récupération de données dans la base de données.

Voici donc le code de la fonction showOne :

public function showOne($requete){
        // Recherche dans la base de donnees avec la requete effectuee depuis l'application
        $data['advert'] = $this->nom_modele_databse->showInApp($requete);
        
        /* S'il n'y a pas de resultat dans la base de donnees, on retourne une erreur pour notifier l'utilisateur qu'il n'y a pas de resultat*/
        if($data == NULL){
            $message = [
                'message' => 'Erreur'
            ];
        }// Sinon, on definit un message JSON avec toutes les informations nécessaires
        else{
            $message = [
                // Message avec le retour des informations
                'Ad' => $data
            ];
        }
        
        // Envoi du message JSON
        $this->response($message);
}

Dans votre modèle de base de données, il vous suffira alors de retourner les informations à l’aide de la fonction

row_array();

La fonction d’affichage est désormais prête ! Passons à la fonction d’ajout.

Fonction permettant d’ajouter une annonce

Dans ce cas, il faut récupérer les informations qui sont envoyées au format JSON vers le site. Admettons que le site ne requiert pas d’inscription pour faciliter le traitement des informations. Une annonce contiendra donc :

Un titre
Une description
Un prix

Cette fois-ci, il faudra créer une fonction avec le nom index_post() pour traiter ces informations. Voici la récupération des informations, il vous suffit de créer une fonction dans votre modèle de base de données pour ajouter les données dans votre base de données.

// Fonction permettant de recuperer les requetes POST depuis l'application
public function index_post($requete){  
    // Recuperation des donnees envoyees par l'application
    $entityBody = file_get_contents('php://input');
    // Decodage des informations envoyees par l'application
    $results = json_decode($entityBody);
    // Cherche l'action a effectuer (dans notre cas il y aura seulement l'ajout)
    $action = $results->{'data'}->{'action'};
    
    if($action == "add"){
        // Recuperation des donnees envoyees par l'application
        $data['Title'] = $results->{'data'}->{'title'};
        $data['Description'] = $results->{'data'}->{'description'};
        $data['Price'] = $results->{'data'}->{'price'};
        
        $this->nom_modele_database->addOne($data);
    }
}

Pour l’insertion dans la base de données, il vous suffit d’effectuer ceci dans votre modèle, puisque toutes les informations sont enregistrées dans le tableau data :

$this->db->insert('nom_table', $data);

Votre fichier API est désormais prêt, vous pouvez passer au test de ce fichier.

Tester l’API

Pour tester l’API, il existe différents moyens, j’ai personnellement utilisé l’application Chrome Advanced REST client. Nous ne testerons que la partie GET pour plus de simplicité, la partie POST sera testée dans l’application.

Vous devez donc prendre l’url de votre site comme présenté dans la partie sur les requêtes plus haut et sélectionner la méthode GET.

http://super-site.com/api/showone/id_annonce

Cette requête devrait donc vous retourner des données sous cette forme :

{
   "data": {
      "ad": {
         "id": "1",
         "Title": "Raspberry PI",
         "Description": "Je vends mon Raspberry PI",
         "Price": "20",
      }
   }
}

Si vous obtenez une erreur, c’est qu’il y a peut-être un problème de permission sur votre site ou alors qu’il y a une erreur dans vos fichiers.

Intégration Ionic

Introduction

Ionic est un framework permettant de développer des applications mobile à l’aide de JavaScript, HTML et CSS. Même si le développement est plutôt facile, je déconseille fortement l’utilisation de ce framework pour différentes raisons.

Avantages de Ionic

Le développement avec Ionic se fait de manière assez rapide si vous êtes à l’aise avec le JavaScript, HTML et CSS. Le résultat est testable directement dans votre navigateur, donc vous n’avez pas besoin d’utiliser à chaque fois votre smartphone (sauf pour les fonctionnalités impliquant la caméra par exemple). Ce framework permet de développer des applications qui sont fonctionnelles sur Android et iOS, sans avoir à ajuster le code en fonction des plateformes.

Désavantages de Ionic

Malheureusement, Ionic comporte de nombreux désavantages assez embêtants. Tout d’abord, la documentation n’est pas toujours très claire et les questions sur StackOverflow renvoient souvent sur la documentation Angular.js (Ionic est basé sur Angular.js) qui n’est guère plus claire. Ensuite, le fait que cela soit fait en langage web se ressent à l’utilisation de l’application, les transitions sont un peu lentes, les boutons ne sont pas toujours réactifs (il faut parfois appuyer deux fois avant que cela fonctionne). Contrairement aux langages natifs, Ionic est un peu lent, même pour une application simple. J’ai également rencontré des problèmes avec des choses qui ne fonctionnaient plus, sans aucune modification du code. J’avais par exemple fait un petit système de recommandations qui affichait 3 produits similaires en-dessous d’un produit consulté, puis, sans modification de code ni sur Ionic, ni sur le serveur, cela n’affichait plus rien.

Si vous avez le temps d’apprendre un langage natif, je vous conseille vivement de le faire plutôt que de vous lancer avec Ionic.

Code

Requête GET

Afin de récupérer des informations de votre base de données pour les afficher dans votre application, voilà le code à mettre dans votre fichier *.ts.

// Definition de l'id de l'annonce a afficher
this.idAd = "1";

// Creation de l'url en ajoutant l'id a la fin de l'url
this.url = 'http://url_de_votre_site/api/showone/'+this.idAd;

// Effectue la requete
this.http.get(this.url).map(res => res.json()).subscribe(

         data => {
            // Recuperation des données dans la variable
            this.adInfo = data.ad;
         },

         err => {console.log("Oops!");
         }
);

Ensuite, dans la page d’affichage, entrez le code suivant :

<ion-item><h1>Annonce de vente</h1></ion-item>
<h2>{{ad.Title}}</h2>
<p>{{ad.Description}}</p>
<p>{{ad.Price}}€</p>
<button ion-button clear (click)="contact(ad.data.id)">Contacter le vendeur</button>

Pour que cela fonctionne, assurez vous d’utiliser la fonction suivante dans votre fichier de communication avec votre base de données pour retourner les informations de l’annonce (avec $query étant le nom de la variable effectuant la requête) :

return $query->row_array();

Requête POST

Voilà la dernière partie de ce tutoriel, à savoir publier une annonce depuis l’application et donc ajouter les informations dans la base de données.

Pour ce faire, il faudra commencer par créer un formulaire à remplir. Il faut alors importer FormBuilder, Validators et FormGroup comme ceci :

import { FormBuilder, Validators, FormGroup } from '@angular/forms';

Ensuite, il faut créer le formulaire et les différents champs ainsi que les contraintes de ces champs dans le fichier .ts.

formAd: FormGroup;
 
submitAttempt: boolean = false;

constructor(public http: Http, public formBuilder: FormBuilder)
  {
      // Mise en place du formulaire avec les differentes informations concernant la longueur maximale de chanque champ en caracteres, ainsi que si ce champ est requis ou non
        this.formAd= formBuilder.group({
        title: ['', Validators.compose([Validators.maxLength(200), Validators.required])],
        description: ['', Validators.compose([Validators.maxLength(300), Validators.required])],
        price: ['', Validators.compose([Validators.maxLength(4), Validators.required])],
           
    });

Maintenant que ceci est mis en place, vous pouvez créer votre formulaire en HTML :

<ion-header>

  <ion-navbar>
    <ion-title>Nouvelle annonce</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
    <ion-list>
        <form [formGroup]="formAd">
        <h2>Caractéristiques du produit :</h2>
    <ion-item>
            <ion-label color="primary" stacked>Titre</ion-label>
            <ion-input type="text" placeholder="Raspberry Pi" formControlName="title"></ion-input>
        </ion-item>
    <ion-item>
            <ion-label color="primary" stacked>Description</ion-label>
            <ion-input type="text" placeholder="Je vends mon Raspberry Pi" formControlName="description"></ion-input>
        </ion-item>
<ion-item>
            <ion-label color="primary" stacked>Prix</ion-label>
            <ion-input type="number" placeholder="20" formControlName="price"></ion-input>
        </ion-item>
     <button ion-button type="submit" (click)="send()" [disabled]="!formAd.valid">Envoyer</button>
   </form>
</ion-list>
</ion-content>

Il ne reste qu’une chose à mettre en place, la fonction d’envoi des informations vers votre base de données, via l’API.

// Fonction permettant d'envoyer les donnees du formulaire sur le serveur
send(){ 
    // Verification de la validite du formulaire (normalement le bouton de submission est desactive tant que le formulaire n'est pas rempli correctement)
    if(!this.formAd.valid){
        console.log("not valid!");
    }
    else {
        console.log("success!");
        console.log(this.formAd.value);
        
        // Mise en place de l'url pour envoyer les informations a l'API
        this.url = 'http://votre_url_du_site';
        
        // Recuperation des donnees du formulaire pour les envoyer a l'API
        let body = {
            data: this.formAd.value
        } 
        
        // Requete effectuee a l'API et reception du message de confirmation concernant l'enregistrement du livre dans la base de donnees
        this.http.post(this.url, JSON.stringify(body)).map(res => res.json())
       .subscribe(

         data => {
            // Recuperation du message renvoye par l'API
           this.response = data.message;
           console.log(this.response);
         },

         err => {console.log("Oops!");
         }

       );
        
    }
}