Créer une RESTful API avec CodeIgniter et l’utiliser avec Ionic

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!");
         }

       );
        
    }
}

Et voilà, vous avez normalement une application qui peut récupérer des informations de votre base de données et en ajouter.

Si ce tutoriel contient des erreurs, n’hésitez pas à me le dire, j’espère en tout cas que cela pourra vous aider !

Share This:

La collapsologie, qu’est-ce que c’est ?

Introduction

La collapsologie est un terme qui désigne l’effondrement de notre société telle que nous la connaissons. L’idée d’un dysfonctionnement mondial, tant au niveau politique que social et économique, est plus que jamais d’actualité. Les réserves de matières premières baissent grandement, tandis que nos besoins augmentent également énormément. Les tensions politiques entre les pays engendrent des guerres interminables dans le monde entier. Les plus riches sont de plus en plus riches alors qu’il se passe l’inverse pour les pauvres.

Cependant, tout ceci ne fait pas du bien à la Terre et à l’Humanité. Je vous propose donc un petit article sur le sujet, basé en partie sur une conférence que je suis allé voir en décembre dernier s’intitulant « Comment penser l’effondrement de notre civilisation » avec P. Servigne et R. Stevens.

(suite…)

Share This:

Mon année 2014

Il s’est passé plusieurs choses cette année pour moi. Tout d’abord, j’ai eu le plaisir de faire mon premier thème pour iOS, c’était une expérience très enrichissante, j’ai pu voir une partie des choses qu’il y a à faire pour que cela donne un thème complet, j’ai eu l’aide de plusieurs personnes et j’ai pu me rendre compte de la masse de travail que cela représente. Je ne pense pas retenter l’expérience car je préfère la programmation, mais qui sait.

J’ai ensuite découvert le site Medium. J’y ai écrit quelques articles (disponibles ici) mais j’ai vite perdu le rythme et l’envie.

Par la suite, j’ai un peu aidé Andrew Berhin (Sh3n) à réalisé son application Swaly, je l’aide encore aujourd’hui même si c’est lui qui fournit quasiment l’entier du travail.

Pour finir, au mois de juin, j’ai retrouvé un poste de rédacteur chez @Byothe, j’y ai écrit quelques articles puis les études ont repris et là, je n’ai plus eu de temps.

J’ai quelques idées de projet, mais malheureusement le temps me manque cruellement. Je suis toujours disponible pour vous aider dans quoi que ce soit comme projet.

Lors de ces prochains mois, je vais avoir un projet de programmation (création de site web), je ne sais pas encore ce que je vais faire et si cela sera intéressant à partager mais je verrai au moment venu.

J’aimerais remercier toutes les personnes qui m’ont soutenu, c’est grâce à vous tous que j’en suis là 🙂 . Je vous souhaite également de bonnes fêtes de fin d’année et à bientôt 😉 .

Share This:

Swaly, une application de partage de position

Bonjour à tous,

Je vous présente l’application Swaly de @andrewsh3n.

Swaly AppStore

Elle va vous permettre de partager votre position avec une photo de l’endroit sur Twitter, Facebook, par message ou encore par email (dans les screenshots il n’y a pas de position car je n’ai pas activé la localisation).

Photo 29.05.14 11 58 37

Photo 29.05.14 11 58 59

Photo 29.05.14 11 59 10

Le développeur travaille sur un bon nombre de nouvelles fonctionnalités qui seront disponibles prochainement. En attendant, allez la télécharger ici.

Share This:

Mes articles sur Medium

Bonjour à tous,

J’ai découvert il y a quelques mois le site Medium. Il appartient à Twitter et vous permet d’écrire et de publier des histoires sous forme d’articles. J’en ai posté deux hier, vous pouvez lire le premier ici : https://medium.com/p/79308f473f20 et le deuxième ici : https://medium.com/p/1d4f71b728a9.

J’espère qu’ils vous plairont et je pense continuer à publier des articles sur Medium, en parallèle avec ce blog. J’utiliserai ce dernier pour vous informer sur mes projets et vous donner de plus amples informations sur ce que je fais. J’utiliserai Medium pour raconter des histoires qui se sont passées sur internet.

Bonne soirée à tous :).

Share This:

Speed drawing, « Skore » en collaboration avec DJ Kepta77

Bonsoir à tous,

Voici un nouveau speed drawing que j’ai réalisé en collaboration avec DJ Kepta77. Je vous laisse regarder la vidéo et mettre un pouce vert si vous aimez 😉 .

Share This:

Speed drawing « Urban » en collaboration avec DJ Kepta77

Bonsoir à tous,

Voici un nouveau speed drawing que j’ai réalisé en collaboration avec @DJ Kepta77. Je vous laisse regarder la vidéo, un petit pouce vert fait toujours plaisir 😉 .

Share This:

[Java] Changer l’UI des boutons et autres

Bonjour à tous,

Voici un petit article pour ceux qui font de la programmation Java.

Lorsque vous faites des programmes et que vous y ajoutez des boutons, JTextField, JComboBox et autres, ceux-ci ont le « style Java », c’est-à-dire qu’ils ressemblent à ça :

Java_Buttons

Voici un petit bout de code à ajouter dans votre méthode main pour qu’ils prennent l’apparence du système d’exploitation sur lequel vous exécutez le programme.


public static void main (String args[]){
try {
// Set System L&F
UIManager.setLookAndFeel(
UIManager.getSystemLookAndFeelClassName());
}
catch (UnsupportedLookAndFeelException e) {
// handle exception
}
catch (ClassNotFoundException e) {
// handle exception
}
catch (InstantiationException e) {
// handle exception
}
catch (IllegalAccessException e) {
// handle exception
}
}

Voilà, c’est tout pour cet article, à bientôt pour un nouvel article.

Share This:

OneDay OneGraff

Bonjour à tous,

Voici un petit article pour vous montrer mes créations en speed drawing, en collaboration avec DJ Kepta77.

(suite…)

Share This:

L’utilisation d’iOS 7 après 2 semaines

Bonjour à tous, cela fait maintenant un peu plus de deux semaines que j’utilise iOS 7 sur mon iPhone 5 et je fais cet article pour vous donner mon avis. J’ai pu tester les 3 betas sorties jusqu’à maintenant et je peux dire que l’on voit les améliorations.

Tout d’abord, vous pouvez regarder cette vidéo de présentation d’iOS 7 car je ne vais pas forcément parler de toutes les fonctionnalités.


(suite…)

Share This: