Création d'une application Web centrée sur l'API

Vous envisagez de commencer à travailler sur une nouvelle application Web? Dans ce didacticiel, nous verrons comment créer une application Web axée sur les API et expliquerons pourquoi cela est essentiel dans le monde multiplate-forme actuel..

À la recherche d'un raccourci?

Si vous souhaitez une solution rapide, recherchez l’un des éléments de l’API sur Envato Market, tel que API Framework, qui vous permet de créer votre propre API en un rien de temps. Le framework est très facile à utiliser et à étendre si vous avez des connaissances en PHP et en POO.

Framework d'API

Vous pouvez également essayer l’application Any API to HTML avec le service PHP sur Envato Studio. Si vous commandez ce service, vous pouvez analyser n'importe quelle API de sites Web tiers et afficher les résultats sur votre propre site Web, avec votre présentation et vos fonctionnalités..

introduction

API?

Pour ceux qui ne connaissent pas le terme, API est l'abréviation de Interface de programmation d'applications. Selon Wikipedia:

Une interface de programmation d'application (API) est une spécification basée sur un code source destinée à être utilisée comme interface par les composants logiciels pour communiquer les uns avec les autres. Une API peut inclure des spécifications pour des routines, des structures de données, des classes d'objets et des variables.

Visualisation API
Image reproduite avec l'aimable autorisation de http://blog.zoho.com

En termes plus simples, une API fait référence à un ensemble de fonctions intégrées dans une application, qui peuvent être utilisées par d'autres applications (ou par elles-mêmes, comme nous le verrons plus tard) pour interagir avec l'application. Une API est un excellent moyen d'exposer les fonctionnalités d'une application à des applications externes en toute sécurité, car toutes les fonctionnalités que ces applications externes peuvent effectuer sont limitées à la fonctionnalité exposée dans l'API..

Qu'est-ce qu'une application Web «centrée sur les API»??

Une application Web centrée sur les API est une application Web qui exécute la plupart, sinon toutes les fonctionnalités, par le biais d'appels d'API..

Un Application Web centrée sur les API est une application Web qui exécute la plupart, sinon toutes les fonctionnalités, par le biais d'appels d'API. Par exemple, si vous vous connectiez à un utilisateur, vous enverriez ses informations d'identification à l'API, laquelle vous renverrait un résultat indiquant si l'utilisateur fournissait la bonne combinaison utilisateur / mot de passe..

Une autre caractéristique d'une application Web centrée sur l'API est que l'API sera toujours sans état, ce qui signifie qu'elle ne peut pas reconnaître les appels d'API par session. Étant donné que les appels d'API seront généralement effectués via le code du backend, il sera difficile d'implémenter le traitement de session, car aucun cookie n'est impliqué dans cette opération. Cette limitation est en fait bonne - cela "oblige" un développeur à créer une API qui fonctionne non pas en fonction de l'état de l'utilisateur actuel, mais plutôt en fonction de ses fonctionnalités, ce qui facilite le test car l'état actuel de l'utilisateur n'a pas besoin d'être recréé.

Pourquoi traverser tous ces problèmes?

En tant que développeurs Web, nous avons vu la technologie évoluer. Il est de notoriété publique qu'aujourd'hui, les utilisateurs n'utilisent pas uniquement des applications via un navigateur, mais également via d'autres gadgets, tels que les téléphones mobiles et les tablettes. Par exemple, cet article sur Mashable, intitulé «Les consommateurs consacrent désormais plus de temps aux applications mobiles qu'au Web»:

Les consommateurs passent plus de temps sur les applications mobiles que sur le Web pour la première fois, selon un nouveau rapport.

Flurry a comparé ses données mobiles aux statistiques de comScore et Alexa et a constaté qu'en juin, les consommateurs passaient 81 minutes par jour à utiliser des applications mobiles, contre 74 minutes de navigation sur le Web..

Voici un article plus récent de ReadWriteWeb, intitulé «Plus de personnes naviguent sur mobile que d’utiliser IE6 et IE7 combinés:

Les dernières données de Sitepoint sur les tendances des navigateurs montrent que davantage de personnes naviguent sur le Web avec un smartphone qu’Internet Explorer 6 et 7 combinés. Ces deux vieux clunkers sont depuis des années le berceau des développeurs Web, obligeant les sites à se dégrader le mieux possible en dénominateur commun des navigateurs. Mais c'est un nouveau monde maintenant; En novembre 2011, 6,95% de l'activité Web concernait les navigateurs mobiles, et 6,49% seulement fonctionnait sur Internet IE 6 ou 7..

Comme on peut le voir clairement, de plus en plus de gens tirent leurs nouvelles de sites alternatifs, en particulier des appareils mobiles..

Qu'est-ce que cela a à voir avec la création d'une application Web centrée sur l'API??

Cela conduirait inévitablement à une utilisation accrue de notre application, car elle peut être utilisée partout où une personne le souhaite..

Un des principaux avantages de la création d’une application centrée sur l’API est qu’elle vous aide à créer des fonctionnalités utilisables par TOUT appareil, que ce soit un navigateur, un téléphone mobile, une tablette ou même une application de bureau. Tout ce que vous avez à faire est de créer l’API de manière à ce que tous ces appareils puissent communiquer avec elle, et le tour est joué! Vous aurez construit une application centralisée capable de saisir et d'exécuter des fonctionnalités à partir de n'importe quel appareil qu'une personne possède.!

Diagramme d'application centrée sur l'API

En créant une application de cette manière, nous pouvons facilement tirer parti des différents supports utilisés par différentes personnes. Cela conduirait inévitablement à plus d'utilisation d'une application, car elle peut être utilisée n'importe où.

Pour faire comprendre le point, voici un article sur le nouveau site Web de Twitter, qui explique comment ils utilisent désormais leur API pour propulser Twitter.com, en le rendant essentiellement centré sur l'API:

L'un des changements architecturaux les plus importants est que Twitter.com est maintenant un client de notre propre API. Il récupère les données des mêmes points d'extrémité que le site mobile, nos applications pour iPhone, iPad, Android et toutes les applications tierces utilisées. Ce changement nous a permis d'allouer plus de ressources à l'équipe API, générant plus de 40 correctifs. Lors du chargement initial de la page et de chaque appel du client, toutes les données sont maintenant extraites d’un cache de fragments JSON hautement optimisé..

Dans ce didacticiel, nous allons créer une application de liste TODO simple centrée sur l'API et créer un client frontal sur le navigateur qui interagit avec notre application de liste TODO. À la fin, vous connaîtrez les éléments essentiels d’une application centrée sur l’API et, en même temps, la manière de faciliter la communication sécurisée entre les deux. Dans cet esprit, commençons!

Étape 1: planifier les fonctions de l'application

L'application TODO que nous allons construire dans ce tutoriel aura les fonctions de base de CRUD:

Créer Articles TODO
Lis Articles TODO
Mettre à jour TODO Items (renommer, marquer comme terminé, marquer comme annulé)
Effacer Articles TODO

Chaque article TODO aura:

une Titre
une Date d'échéance
une La description
un drapeau pour indiquer si l'élément TODO Est fait

Faisons-nous également une maquette de l'application pour que nous puissions avoir un guide sur ce à quoi elle devrait ressembler par la suite:

Étape 2: Créer le serveur API

Puisque nous développons une application centrée sur l’API, nous allons créer deux «projets»: le Serveur API, et le Client frontal. Commençons par créer le serveur API en premier.

Sur le dossier de votre serveur Web, créez un dossier nommé simpletodo_api, et créer un index.php fichier. Ce index.php fichier agira comme un contrôleur frontal pour l'API, toutes les demandes au serveur d'API seront effectuées via ce fichier. Ouvrez-le et mettez le code suivant à l'intérieur:

$ action (); $ result ['success'] = true;  catch (Exception $ e) // attrape toutes les exceptions et signale le problème $ result = array (); $ result ['success'] = false; $ result ['errormsg'] = $ e-> getMessage ();  // renvoie le résultat de l'appel d'API echo json_encode ($ result); sortie();

Ce que nous avons essentiellement construit ici est un simple contrôleur frontal qui effectue les tâches suivantes:

Accepter un appel API avec un nombre quelconque de paramètres
Extraire le Manette et action pour l'appel API
Effectuer les vérifications nécessaires pour s’assurer que le Manette et action exister
Exécuter l'appel API
Erreurs de capture, le cas échéant
Renvoyer un résultat à l'appelant

Outre le index.php fichier, créer trois dossiers: a contrôleurs, des modèles et Les données dossier.

le contrôleurs Le dossier contiendra tous les contrôleurs que nous utiliserons pour le serveur API. Nous allons le construire en utilisant l’architecture MVC pour rendre la structure du serveur API plus propre et plus organisée..
le des modèles dossier contiendra tous les modèles de données pour le serveur API.
le Les données dossier sera où le serveur API enregistre toutes les données

Allez dans le dossier des contrôleurs et créez un fichier appelé Todo.php. Ce sera notre contrôleur pour toutes les tâches liées à la liste TODO. En gardant à l'esprit les fonctions dont nous aurons besoin pour notre application TODO, créez les méthodes nécessaires pour le contrôleur Todo:

_params = $ params;  fonction publique createAction () // créer un nouvel élément à supprimer fonction publique readAction () // lire tous les éléments à modifier fonction publique updateAction () // mettre à jour un élément à modifier fonction publique deleteAction () // supprimer une tâche

Maintenant, ajoutez les fonctionnalités nécessaires à chaque action. Je vais fournir le code pour le createAction méthode et je vous laisse le soin de créer le code pour les autres méthodes. Si vous n'êtes pas d'humeur cependant, vous pouvez simplement télécharger le code source de la démo et le copier à partir de là..

fonction publique createAction () // crée un nouvel élément de tâche $ todo = new TodoItem (); $ todo-> title = $ this -> _ params ['title']; $ todo-> description = $ this -> _ params ['description']; $ todo-> due_date = $ this -> _ params ['due_date']; $ todo-> is_done = 'false'; // passe le nom d'utilisateur et le mot de passe de l'utilisateur pour authentifier l'utilisateur $ todo-> save ($ this -> _ params ['username'], $ this -> _ params ['userpass']); // retourne la tâche à effectuer au format tableau return $ todo-> toArray ();

Créer TodoItem.php à l'intérieur de des modèles dossier afin que nous puissions créer le code de «création d’articles». Prenez note que je ne vais pas me connecter à une base de données, je vais plutôt sauvegarder les informations dans des fichiers. Il devrait être relativement facile de faire fonctionner cela avec n’importe quelle base de données.

todo_id) || ! is_numeric ($ this-> todo_id)) // l'identifiant de tâche est l'heure actuelle $ this-> todo_id = time ();  // récupère la version du tableau de cette tâche à exécuter $ todo_item_array = $ this-> toArray (); // sauvegarde la version du tableau sérialisé dans un fichier $ success = contenu_fichier_de_données (DATA_PATH. "/ $ userhash / $ this-> id_dodo .txt", serialize ($ todo_item_array)); // si la sauvegarde échouait, lançait une exception si ($ success === false) levait une nouvelle exception ('Échec de l'enregistrement de la tâche à exécuter');  // retourne la version du tableau return $ todo_item_array;  public function toArray () // retourne une version de tableau de l'élément à retourner retour tableau ('todo_id' => $ this-> todo_id, 'title' => $ this-> titre, 'description' => $ this- > description, 'due_date' => $ this-> due_date, 'is_done' => $ this-> is_done);

le createAction méthode appelle deux fonctions sur le TodoItem modèle:

enregistrer() - cela sauve la TodoItem dans un fichier, ainsi que définir la todo_id pour le TodoItem si nécessaire
toArray () - cela retourne une version de tableau du TodoItem, où les variables sont les index du tableau

Puisque l'API est appelée via des requêtes HTTP, testons cet appel d'API en l'appelant via le navigateur:

http: // localhost / simpletodo_api /? controller = action & créer = & titre = test% 20title & description = test% 20description & due_date = 12/08/2011 & username = nikko & userpass = test1234

Si tout a fonctionné, vous devriez voir un nouveau dossier dans le dossier. Les données dossier, et à l'intérieur de ce dossier, vous devriez voir un fichier avec le contenu suivant:

createAction () résultat

Toutes nos félicitations! Vous avez créé avec succès un serveur API et passé un appel API!

Étape 3: Sécurisez le serveur API avec un `ID APP` et `APP SECRET`

Actuellement, le serveur API est configuré pour accepter TOUT Demandes d'API. Nous devrons le limiter à nos propres applications afin de nous assurer que seuls nos propres clients frontaux sont en mesure de faire des demandes d'API. Vous pouvez également créer un système dans lequel les utilisateurs peuvent créer leurs propres applications ayant accès à votre serveur API, de la même manière que fonctionnent les applications Facebook et Twitter..

Commencez par créer un ensemble de paires id-key pour les clients qui utiliseront le serveur API. Comme il ne s’agit que d’une démonstration, nous pouvons utiliser n’importe quelle chaîne aléatoire de 32 caractères. Pour le ID APP, Disons que c'est l'application APP001.

Ouvrez à nouveau le fichier index.php, puis mettez-le à jour avec le code suivant:

 '28e336ac6c9423d946ba02d19c6a2632', // clé d'application générée aléatoirement); // include nos modèles include_once 'models / TodoItem.php'; // encapsule le tout dans un bloc try-catch pour attraper toute exception capricieuse! try // * UPDATED * // récupère la requête chiffrée $ enc_request = $ _REQUEST ['enc_request']; // récupère l'identifiant d'application fourni $ app_id = $ _REQUEST ['app_id']; // vérifie d'abord si l'ID d'application existe dans la liste des applications if (! isset ($ applications [$ app_id])) throw new Exception ('L'application n'existe pas!');  // déchiffrer la demande $ params = json_decode (trim (mcrypt_decrypt (MCRYPT_RIJNDAEL_256, $ applications [$ app_id], base64) ()); // vérifie si la requête est valide en vérifiant s'il s'agit d'un tableau et en recherchant le contrôleur et l'action if ($ params == false || isset ($ params-> controller) == false || isset ($ params-> action ) == false) lance une nouvelle exception ('Request is not valid');  // le transforme en un tableau $ params = (array) $ params;…

Ce que nous avons fait ici est en réalité de mettre en œuvre un moyen très simple d’authentifier nos clients frontaux en utilisant un système similaire à l’authentification par clé publique-privée. En gros, voici la répartition pas à pas de la procédure d’authentification:

Cryptage à clé publique

un appel API est fait, dans ce $ app_id et $ enc_request est fourni.
la $ enc_request valeur correspond aux paramètres d’appel de l’API, chiffrés à l’aide de Clé de l'application. le Clé de l'application est JAMAIS envoyé au serveur, il n’est utilisé que pour hacher la requête. De plus, la demande ne peut être déchiffrée qu’en utilisant le Clé de l'application.
une fois que l'appel d'API arrive sur le serveur d'API, il vérifie sa propre liste d'applications pour le ID APP à condition de
lorsqu’il est trouvé, le serveur d’API tente de déchiffrer la demande en utilisant la clé correspondant à la ID APP envoyé
s'il a réussi à le déchiffrer, continuez ensuite avec le programme

Maintenant que le serveur API est sécurisé avec un ID APP et APP SECRET, nous pouvons commencer à programmer un client frontal pour utiliser le serveur API.

Étape 4: Créez le client frontal du navigateur

Nous allons commencer par configurer un nouveau dossier pour le client frontal. Créez un dossier appelé simpletodo_client_browser sur le dossier de votre serveur Web. Ceci fait, créez un fichier index.php et mettez ce code à l'intérieur:

   SimpleTODO           SimpleTODO 
 
 
     Nom d'utilisateur:  Mot de passe:

Cela devrait ressembler à ceci:

Page de connexion SimpleTODO

Notez que j'ai inclus 2 fichiers JavaScript et 2 fichiers CSS ici:

reset.css est votre script de réinitialisation CSS standard. J'utilise la réinitialisation css de meyerweb.com.
bootstrap.min.css est le Twitter Bootstrap
jquery.min.js est la dernière bibliothèque jQuery
jquery-ui-1.8.16.custom.min.js est la dernière bibliothèque d'interface utilisateur jQuery

Ensuite, créons le login.php fichier afin que nous stockions le nom d'utilisateur et mot de passe à l'intérieur d'une session sur le client.

 Ici, nous commençons simplement une session pour l'utilisateur, en fonction du nom d'utilisateur et du mot de passe que l'utilisateur fournira. Cela agit comme une simple clé de combinaison, qui permettra à un utilisateur d'accéder aux éléments TODO stockés pour une combinaison spécifique du nom d'utilisateur et du mot de passe. Nous redirigeons ensuite vers todo.php, où nous commençons à interagir avec le serveur API. Avant de commencer à coder le todo.php déposer si, créons d'abord un ApiCaller classe, qui encapsulera toutes les méthodes d'appel d'API dont nous aurons besoin, y compris le chiffrement des demandes.
 Créer apicaller.php et mettez ce qui suit à l'intérieur:
 _app_id = $ app_id; $ this -> _ app_key = $ app_key; $ this -> _ api_url = $ api_url;  // envoie la demande au serveur d'API // chiffre également la demande, puis vérifie // si les résultats sont publics valides this -> _ app_key, json_encode ($ request_params), MCRYPT_MODE_ECB)); // crée le tableau params, qui sera // les paramètres POST $ params = array (); $ params ['enc_request'] = $ enc_request; $ params ['app_id'] = $ this -> _ app_id; // initialise et configure le gestionnaire curl $ ch = curl_init (); curl_setopt ($ ch, CURLOPT_URL, $ this -> _ api_url); curl_setopt ($ ch, CURLOPT_RETURNTRANSFER, 1); curl_setopt ($ ch, CURLOPT_POST, compte ($ params)); curl_setopt ($ ch, CURLOPT_POSTFIELDS, $ params); // exécuter la demande $ result = curl_exec ($ ch); // json_decode le résultat $ result = @json_decode ($ result); // vérifie si nous sommes en mesure de json_decoder correctement le résultat si ($ result == false || isset ($ result ['success']) == false) jette une nouvelle exception ('La requête n'était pas correcte');  // s'il y avait une erreur dans la demande, lève une exception if ($ result ['success'] == false) lance une nouvelle exception ($ result ['errormsg']);  // si tout s'est bien passé, renvoyer les données return $ result ['data']; 
 Nous allons utiliser le ApiCaller classe pour envoyer des demandes à notre serveur API. De cette façon, tout le code nécessaire pour le cryptage et l’initialisation de cURL sera au même endroit, et nous n’aurons pas à répéter notre code.
   la __construction fonction prend trois paramètres:   $ app_id - la ID APP pour le client (qui est APP001 pour le client du navigateur)
  $ app_key - la Clé de l'application pour le client (qui est 28e336ac6c9423d946ba02d19c6a2632 pour le client du navigateur)
  $ api_url - l'URL du serveur d'API, qui est http: // localhost / simpletodo_api / 
 
 
  la envoyer une demande() une fonction:  chiffre les paramètres de la requête en utilisant le mcrypt bibliothèque de la même manière que le serveur d’API le déchiffre
 génère le $ _POST paramètres à envoyer au serveur API
 exécute l'appel API via boucle 
 vérifie si le résultat de l'appel de l'API a réussi ou non
 renvoie les données lorsque tout s'est déroulé comme prévu
 
 
 
 Maintenant, commençons par le todo.php page. Tout d'abord, créons du code pour récupérer la liste actuelle des tâches à faire pour l'utilisateur Nikko avec le mot de passe test1234 (Il s'agit de la combinaison utilisateur / mot de passe utilisée précédemment pour tester le serveur API)..
 sendRequest (array ('controller' => 'todo', 'action' => 'read', 'username' => $ _SESSION ['username'], 'userpass' => $ _SESSION ['userpass'])); echo "; var_dump ($ todo_items);
 Aller au index.php page, identifiez-vous en tant que nikko / test1234, et vous devriez voir un var_dump () de l'article TODO que nous avons créé précédemment.
    Félicitations, vous avez passé avec succès un appel d’API au serveur d’API! Dans ce code, nous avons:
  a commencé la session afin que nous ayons accès à la Nom d'utilisateur et passe d'utilisateur dans le $ _SESSION 
 instancié un nouveau ApiCaller classe, en lui donnant la ID APP, Clé de l'application et l'URL du serveur API
 envoyer une demande via le envoyer une demande() méthode
 
 Maintenant, reformulons les données pour qu'elles aient l'air mieux. Ajoutez le code HTML suivant au todo.php code. N'oubliez pas d'enlever le var_dump ()!
    SimpleTODO             SimpleTODO 
 
 
   Créer un nouvel élément TODO   Titre:
 Date d'échéance:
 La description:
   
 
 
 
   Titre; ?>
    todo_id; ?> "> Supprimer 
  Date d'échéance:
 La description:
<?php echo $todo->la description; ?>
 
  is_done == 'false'):?>          
 
 
  
 
  
 Cela devrait maintenant ressembler à quelque chose comme ça:
    Assez cool hein? Mais cela ne fait actuellement rien, alors commençons à ajouter des fonctionnalités. Je vais fournir le code pour new_todo.php, qui appellera le faire / créer Appel API pour créer un nouvel élément TODO. Création des autres pages (update_todo.php et delete_todo.php) devrait être très semblable à celui-ci, je vous laisse donc le soin de les créer. S'ouvrir new_todo.php et ajoutez le code suivant:
 sendRequest (array ('controller' => 'todo', 'action' => 'create', 'title' => $ _POST ['title'], 'due_date' => $ _POST ['due_date'], 'description '=> $ _POST [' description '],' nom d'utilisateur '=> $ _SESSION [' nom d'utilisateur '],' userpass '=> $ _SESSION [' userpass '])); en-tête ('Location: todo.php'); sortie(); ?>
 Comme vous pouvez le voir, le new_todo.php la page utilise le ApiCaller à nouveau pour faciliter l'envoi du faire / créer demande au serveur API. Cela fait fondamentalement la même chose qu'avant:
  démarrer une session afin qu'il ait accès à la $ nom d'utilisateur et $ userpass enregistré dans le $ _SESSION 
 instancier un nouveau ApiCaller classe, en lui donnant la ID APP, Clé de l'application et l'URL du serveur API
 envoyer la demande via le envoyer une demande() méthode
 rediriger vers todo.php 
 
    Félicitations, ça marche! Vous avez créé avec succès une application centrée sur l'API!
 
 Conclusion
 Le développement d'une application construite autour d'une API présente de nombreux avantages. Vous voulez créer une version d'application Android de SimpleTODO? Toutes les fonctionnalités dont vous avez besoin se trouvent déjà dans le serveur API. Il vous suffit donc de créer le client! Voulez-vous refactoriser ou optimiser certaines classes? Pas de problème - assurez-vous que le résultat est le même. Besoin d'ajouter plus de fonctionnalités? Vous pouvez le faire sans affecter le c



		
			
	   
	




Code