Planen Sie die Arbeit an einer neuen Webanwendung? In diesem Lernprogramm wird erläutert, wie eine API-basierte Webanwendung erstellt wird, und erläutert, warum dies in der heutigen Welt mit mehreren Plattformen unerlässlich ist.
Wenn Sie eine schnelle Lösung wünschen, checken Sie eines der API-Elemente von Envato Market aus, z. B. das API-Framework, mit dem Sie in kürzester Zeit Ihre eigene API erstellen können. Das Framework ist sehr einfach zu verwenden und zu erweitern, wenn Sie über PHP- und OOP-Kenntnisse verfügen.
API FrameworkOder Sie könnten den Any API to HTML-Dienst mit Envato Studio ausprobieren. Wenn Sie diesen Service bestellen, können Sie jede API von Websites von Drittanbietern parsen und die Ergebnisse auf Ihrer eigenen Website mit Ihrem Layout und Ihren Funktionen anzeigen.
Für diejenigen, die mit dem Begriff nicht vertraut sind, steht API für Programmierschnittstelle. Laut Wikipedia:
Eine Anwendungsprogrammierschnittstelle (API) ist eine auf einem Quellcode basierende Spezifikation, die von Softwarekomponenten als Schnittstelle für die Kommunikation untereinander verwendet werden soll. Eine API kann Spezifikationen für Routinen, Datenstrukturen, Objektklassen und Variablen enthalten.
Einfacher ausgedrückt, bezieht sich eine API auf eine Reihe von Funktionen, die in eine Anwendung integriert sind, die von anderen Anwendungen (oder von selbst, wie wir später sehen werden) zur Interaktion mit der Anwendung verwendet werden kann. Eine API ist eine hervorragende Möglichkeit, um die Funktionalität einer Anwendung für externe Anwendungen sicher und sicher bereitzustellen, da alle Funktionen, die diese externen Anwendungen ausführen können, auf die Funktionalität der API beschränkt sind.
Eine API-zentrierte Webanwendung ist eine Webanwendung, die im Wesentlichen die meisten, wenn nicht alle Funktionen über API-Aufrufe ausführt.
Ein API-zentrierte Webanwendung ist eine Webanwendung, die im Wesentlichen die meisten, wenn nicht alle Funktionen über API-Aufrufe ausführt. Wenn Sie sich beispielsweise bei einem Benutzer anmelden, senden Sie seine Anmeldeinformationen an die API, und die API gibt Ihnen ein Ergebnis zurück, in dem Sie darauf hingewiesen werden, wenn der Benutzer die richtige Kombination aus Benutzer und Kennwort angegeben hat.
Ein weiteres Merkmal einer API-zentrierten Webanwendung besteht darin, dass die API immer zustandslos ist, dh, sie kann API-Aufrufe nicht nach Sitzung erkennen. Da API-Aufrufe normalerweise über den Backend-Code erfolgen, ist es schwierig, die Sitzungsbehandlung zu implementieren, da normalerweise keine Cookies verwendet werden. Diese Einschränkung ist eigentlich gut - dies „zwingt“ einen Entwickler, eine API zu erstellen, die nicht auf dem Status des aktuellen Benutzers, sondern auf der Funktionalität basiert, was wiederum das Testen des aktuellen Status eines Benutzers erleichtert muss nicht neu erstellt werden.
Als Webentwickler haben wir gesehen, wie sich Technologie aus erster Hand entwickelt. Es ist allgemein bekannt, dass Menschen heutzutage nicht nur Anwendungen über einen Browser verwenden, sondern auch über andere Geräte wie Mobiltelefone und Tablets. In diesem Artikel zu Mashable mit dem Titel „Verbraucher verbringen jetzt mehr Zeit für mobile Apps als für das Web“:
Die Verbraucher verbringen zum ersten Mal mehr Zeit mit mobilen Apps als im Internet, heißt es in einem neuen Bericht.
Flurry verglich seine mobilen Daten mit Statistiken von comScore und Alexa und fand heraus, dass die Verbraucher im Juni 81 Minuten pro Tag mit mobilen Apps verbrachten, verglichen mit 74 Minuten beim Surfen im Internet.
Hier ist ein neuerer Artikel von ReadWriteWeb mit dem Titel "Mehr Personen auf Mobilgeräten surfen als IE6 und IE7 kombinieren:
Die neuesten Daten zu Browsertrends von Sitepoint zeigen, dass mehr Personen auf Smartphones im Internet surfen als Internet Explorer 6 und 7 zusammen. Diese beiden alten Clunker sind seit Jahren die Schreckgespenster der Webentwickler, die dazu führen, dass sich die Websites so gut wie möglich auf den kleinsten gemeinsamen Nenner von Browsern reduzieren. Aber es ist jetzt eine neue Welt. 6,95% der Webaktivitäten im November 2011 waren für mobile Browser und nur 6,49% für IE 6 oder 7.
Wie wir deutlich erkennen können, erhalten immer mehr Menschen ihre Nachrichten von alternativen Orten, insbesondere mobilen Geräten.
Dies würde zwangsläufig zu einer stärkeren Nutzung unserer Anwendung führen, da sie überall dort eingesetzt werden kann, wo eine Person dies wünscht.
Einer der Hauptvorteile beim Erstellen einer API-basierten Anwendung besteht darin, dass Sie Funktionen erstellen, die von verwendet werden können IRGENDEIN Gerät, sei es ein Browser, ein Mobiltelefon, ein Tablet oder sogar eine Desktop-App. Alles was Sie tun müssen, ist die API so zu erstellen, dass alle diese Geräte damit kommunizieren können und voila! Sie haben eine zentralisierte Anwendung erstellt, die die Eingabe und Ausführung von Funktionen von jedem Gerät einer Person ermöglicht!
Durch die Erstellung einer Anwendung auf diese Weise können wir leicht die verschiedenen Medien nutzen, die von verschiedenen Personen verwendet werden. Dies würde unweigerlich zu mehr Nutzung einer Anwendung führen, da sie überall verwendet werden kann, wo eine Person dies wünscht.
Um den Punkt nach Hause zu bringen, hier ein Artikel über die neue, neu gestaltete Website von Twitter, die uns darüber informiert, wie sie jetzt ihre API für Twitter.com verwenden und sie auf die API konzentrieren:
Eine der wichtigsten architektonischen Änderungen ist, dass Twitter.com jetzt ein Kunde unserer eigenen API ist. Es ruft Daten von denselben Endpunkten ab, die die mobile Website, unsere Apps für iPhone, iPad, Android und alle Anwendungen von Drittanbietern verwenden. Dank dieser Verschiebung konnten wir dem API-Team mehr Ressourcen zuweisen und über 40 Patches generieren. Beim ersten Laden der Seite und bei jedem Aufruf vom Client werden nun alle Daten aus einem stark optimierten JSON-Fragment-Cache abgerufen.
In diesem Lernprogramm erstellen wir eine einfache TODO-Listenanwendung, die API-Centric ist, und erstellen einen Front-End-Client im Browser, der mit unserer TODO-Listenanwendung interagiert. Am Ende kennen Sie die wesentlichen Bestandteile einer API-Centric-Anwendung und wissen gleichzeitig, wie Sie eine sichere Kommunikation zwischen den beiden Anwendungen ermöglichen. Beginnen wir mit diesem Gedanken!
Die TODO-Anwendung, die wir in diesem Lernprogramm erstellen werden, enthält die grundlegenden CRUD-Funktionen:
Jeder TODO-Artikel hat:
Lassen Sie uns auch die Anwendung nachahmen, so dass wir eine Anleitung haben, wie sie danach aussehen sollte:
Da wir eine API-Centric-Anwendung entwickeln, erstellen wir zwei "Projekte": das API-Server, und das Frontend-Client. Beginnen wir mit dem Erstellen des API-Servers.
Erstellen Sie im Ordner Ihres Webservers einen Ordner mit dem Namen simpletodo_api
, und ein erstellen index.php
Datei. Diese index.php
Datei wird als Frontcontroller Für die API werden also alle Anforderungen an den API-Server über diese Datei gestellt. Öffnen Sie es und geben Sie den folgenden Code ein:
$ action (); $ result ['success'] = wahr; catch (Ausnahme $ e) // fange alle Ausnahmen ab und melde das Problem $ result = array (); $ result ['success'] = false; $ result ['errormsg'] = $ e-> getMessage (); // Echo des Ergebnisses des API-Aufrufs Echo json_encode ($ result); Ausfahrt();
Was wir hier im Wesentlichen gebaut haben, ist ein einfacher Frontcontroller, der Folgendes ausführt:
Regler
und Aktion
für den API-AufrufRegler
und Aktion
existierenneben dem index.php
Datei, erstellen Sie drei Ordner: a Steuerungen, Modelle und Daten Mappe.
Gehen Sie in den Controller-Ordner und erstellen Sie eine Datei mit dem Namen Todo.php
. Dies ist unser Controller für alle Aufgaben im Zusammenhang mit der TODO-Liste. Erstellen Sie mit den Funktionen, die wir für unsere TODO-Anwendung benötigen, die erforderlichen Methoden für den Todo-Controller:
_params = $ params; public function createAction () // neues ToDo-Element erstellen public function readAction () // alle ToDo-Elemente lesen public function updateAction () // ein ToDo-Element aktualisieren public function deleteAction () // ein Aufgabenobjekt löschen
Fügen Sie nun die jeweils erforderliche Funktionalität hinzu Aktion
. Ich werde den Code für die createAction
Methode und ich überlasse es Ihnen, den Code für die anderen Methoden zu erstellen. Wenn Sie nicht in der Stimmung sind, können Sie einfach den Quellcode für die Demo herunterladen und von dort kopieren.
public function createAction () // ein neues Aufgabenobjekt erstellen $ todo = new TodoItem (); $ todo-> title = $ this -> _ params ['title']; $ todo-> description = $ this -> _ params ['description']; $ todo-> due_date = $ this -> _ params ['due_date']; $ todo-> is_done = 'false'; // den Benutzernamen und das Kennwort des Benutzers übergeben, um den Benutzer zu authentifizieren $ todo-> save ($ this -> _ params ['username'], $ this -> _ params ['userpass']); // das todo-Element im Array-Format zurückgeben return $ todo-> toArray ();
Erstellen TodoItem.php
in der Modelle
Ordner, damit wir den Code für die Artikelerstellung erstellen können. Beachten Sie, dass ich keine Verbindung zu einer Datenbank herstellen kann, sondern die Informationen in Dateien speichern. Es sollte jedoch relativ einfach sein, dies mit jeder Datenbank funktionieren zu lassen.
todo_id) || ! is_numeric ($ this-> todo_id)) // Die todo-ID ist die aktuelle Uhrzeit. $ this-> todo_id = time (); // Holen Sie sich die Array-Version dieses ToDo-Elements $ todo_item_array = $ this-> toArray (); // speichere die serialisierte Array-Version in einer Datei $ success = file_put_contents (DATA_PATH. "/ $ userhash / $ this-> todo_id .txt", serialize ($ todo_item_array)); // Wenn das Speichern nicht erfolgreich war, wirft eine Ausnahme, wenn ($ success === false) neue Ausnahmebedingung auslösen ('Fehler beim Speichern des ToDo-Elements'); // die Array-Version zurückgeben return $ todo_item_array; public function toArray () // gibt eine Array-Version des zurückgegebenen Arrays des ToDo-Elements zurück ('todo_id' => $ this-> todo_id, 'title' => $ this-> title, 'description' => $ this- > Beschreibung, 'due_date' => $ this-> due_date, 'is_done' => $ this-> is_done);
Das createAction
Methode ruft zwei Funktionen auf TodoItem
Modell:
TodoItem
in eine Datei sowie als todo_id
für die TodoItem
wenn erforderlichTodoItem
, wobei die Variablen die Indizes des Arrays sindDa die API über HTTP-Anforderungen aufgerufen wird, testen Sie diesen API-Aufruf, indem Sie ihn über den Browser aufrufen:
http: // localhost / simpletodo_api /? controller = todo & action = erstellen & title = test% 20titel & description = test% 20description & due_date = 12/08/2011 & username = nikko & userpass = test1234
Wenn alles funktioniert hat, sollten Sie einen neuen Ordner im Ordner sehen Daten
In diesem Ordner sollte eine Datei mit folgendem Inhalt angezeigt werden:
createAction ()
Ergebnis Herzliche Glückwünsche! Sie haben erfolgreich einen API-Server erstellt und einen API-Aufruf durchgeführt!
APP-ID
und APP SECRET
Derzeit ist der API-Server so eingestellt, dass er akzeptiert wird ALLES API-Anforderungen Wir müssen es nur auf unsere eigenen Anwendungen beschränken, um sicherzustellen, dass nur unsere eigenen Front-End-Clients API-Anforderungen stellen können. Alternativ können Sie tatsächlich ein System erstellen, in dem Benutzer eigene Anwendungen erstellen können, die Zugriff auf Ihren API-Server haben, ähnlich wie bei Facebook- und Twitter-Anwendungen.
Beginnen Sie mit dem Erstellen eines Satzes von ID-Schlüssel-Paaren für die Clients, die den API-Server verwenden. Da dies nur eine Demo ist, können wir beliebige 32-stellige Zeichenfolgen verwenden. Für die APP-ID
, Sagen wir, es ist die Anwendung APP001.
Öffnen Sie die Datei index.php erneut und aktualisieren Sie sie mit folgendem Code:
'28e336ac6c9423d946ba02d19c6a2632', // zufällig generierter Anwendungsschlüssel); // unsere Modelle einschließen include_once 'models / TodoItem.php'; // Das Ganze in einen Try-Catch-Block packen, um eventuelle Ausnahmen zu erkennen! try // * UPDATED * // Die verschlüsselte Anforderung erhalten $ enc_request = $ _REQUEST ['enc_request']; // Die angegebene App-ID abrufen $ app_id = $ _REQUEST ['app_id']; // Zuerst prüfen, ob die App-ID in der Liste der Anwendungen vorhanden ist if (! isset ($ applications [$ app_id])) Neue Ausnahme auslösen ('Anwendung existiert nicht!'); // entschlüsseln Sie die Anfrage $ params = json_decode (trim (mcryptT_RIJNDAEL_256, $ applications [$ app_id], base64_decode ($ enc_request), MCRYPT_MODE_ECB)); // Überprüfen Sie, ob die Anforderung gültig ist. Überprüfen Sie, ob es sich um ein Array handelt, und suchen Sie nach dem Controller und der Aktion if ($ params == false || isset ($ params-> controller) == false || isset ($ params-> action) ) == false) Neue Ausnahme auslösen ('Anforderung ist ungültig'); // in ein Array umwandeln $ params = (array) $ params;…
Was wir hier getan haben, ist die Implementierung einer sehr einfachen Methode zur Authentifizierung unserer Front-End-Clients mithilfe eines Systems, das der Authentifizierung mit öffentlichen und privaten Schlüsseln ähnelt. Im Folgenden wird die Authentifizierung Schritt für Schritt beschrieben:
APP-Schlüssel
. Das APP-Schlüssel
ist NOCH NIE an den Server gesendet, dient er nur zum Hashing der Anfrage. Außerdem kann die Anfrage nur mit dem entschlüsselt werden APP-Schlüssel
.APP-ID
unter der VoraussetzungAPP-ID
geschicktNun, da der API-Server mit einem Server gesichert ist APP-ID
und APP SECRET
, Wir können mit der Programmierung eines Front-End-Clients beginnen, um den API-Server zu verwenden.
Wir beginnen mit dem Einrichten eines neuen Ordners für den Front-End-Client. Erstellen Sie einen Ordner mit dem Namen simpletodo_client_browser
im Ordner Ihres Webservers. Wenn dies erledigt ist, erstellen Sie eine index.php-Datei und geben Sie diesen Code ein:
SimpleTODO SimpleTODO
Das sollte ungefähr so aussehen:
Beachten Sie, dass hier 2 JavaScript-Dateien und 2 CSS-Dateien enthalten sind:
Als nächstes erstellen wir die login.php
Datei, so dass wir den Benutzernamen und das Passwort in einer Sitzung auf dem Client speichern.
Hier starten wir einfach eine Sitzung für den Benutzer, basierend auf der Kombination aus Benutzername und Kennwort, die der Benutzer bereitstellt. Dies fungiert als einfacher Kombinationsschlüssel, mit dem ein Benutzer auf gespeicherte TODO-Elemente für eine bestimmte Kombination aus Benutzername und Kennwort zugreifen kann. Wir leiten dann zu
todo.php
, wo wir anfangen mit dem API-Server zu interagieren. Bevor wir mit der Codierung beginnentodo.php
Datei aber erst erstellen wir eine ApiCaller Klasse, die alle API-Aufrufmethoden enthält, die wir benötigen, einschließlich der Verschlüsselung der Anforderungen.Erstellen
apicaller.php
und füge das Folgende hinein:_app_id = $ app_id; $ this -> _ app_key = $ app_key; $ this -> _ api_url = $ api_url; // Sende die Anfrage an den API-Server // verschlüsselt die Anfrage und prüft dann //, ob die Ergebnisse gültig sind this -> _ app_key, json_encode ($ request_params), MCRYPT_MODE_ECB)); // Das Array params erstellen, das // die POST-Parameter sein wird. $ params = array (); $ params ['enc_request'] = $ enc_request; $ params ['app_id'] = $ this -> _ app_id; // den Curl-Handler initialisieren und einrichten $ ch = curl_init (); curl_setopt ($ ch, CURLOPT_URL, $ this -> _ api_url); curl_setopt ($ ch, CURLOPT_RETURNTRANSFER, 1); curl_setopt ($ ch, CURLOPT_POST, count ($ params)); curl_setopt ($ ch, CURLOPT_POSTFIELDS, $ params); // führe die Anfrage aus $ result = curl_exec ($ ch); // json_decode das Ergebnis $ result = @json_decode ($ result); // Überprüfen Sie, ob wir das Ergebnis richtig json_decodieren können, wenn ($ result == false || isset ($ result ['success'])) == false) Neue Ausnahmebedingung auslösen ('Anforderung war nicht korrekt'); // Wenn bei der Anforderung ein Fehler aufgetreten ist, wird eine Ausnahme ausgelöst, wenn ($ result ['success'] == false) neue Ausnahmebedingung auslösen ($ result ['errormsg']); // Wenn alles gut gelaufen ist, geben Sie die Daten zurück. $ result ['data'];Wir werden die verwenden
ApiCaller
Klasse, um Anforderungen an unseren API-Server zu senden. Auf diese Weise befinden sich alle erforderlichen Verschlüsselungs- und cURL-Initialisierungscodes an einer Stelle, und wir müssen unseren Code nicht wiederholen.
__konstruieren
Funktion hat drei Parameter: APP-ID
für den Kunden (was ist APP001 für den Browser-Client)APP-Schlüssel
für den Kunden (was ist 28e336ac6c9423d946ba02d19c6a2632 für den Browser-Client)http: // localhost / simpletodo_api /
Anfrage senden()
Funktion: mcrypt
Bibliothek auf dieselbe Weise wie der API-Server sie entschlüsselt$ _POST
Parameter, die an den API-Server gesendet werden sollenBeginnen wir mit dem todo.php
Seite. Lassen Sie uns zunächst Code erstellen, um die aktuelle Liste der ToDo-Elemente für den Benutzer abzurufen Nikko
mit dem Passwort test1234
(Dies ist die Benutzer / Passwort-Kombination, die wir zuvor zum Testen des API-Servers verwendet haben.).
sendRequest (array ('controller' => 'todo', 'action' => 'read', 'username' => $ _SESSION ['username'], 'userpass' => $ _SESSION ['userpass']))); echo "; var_dump ($ todo_items);
Gehe zum index.php
Seite, einloggen als Nikko / Test1234, und du solltest ein sehen var_dump ()
des TODO-Elements, das wir zuvor erstellt haben.
Glückwunsch, Sie haben erfolgreich einen API-Aufruf an den API-Server durchgeführt! In diesem Code haben wir:
Nutzername
und Benutzerpass
in dem $ _SESSION
ApiCaller
Klasse, die das geben APP-ID
, APP-Schlüssel
und die URL des API-ServersAnfrage senden()
MethodeLassen Sie uns nun die Daten neu formatieren, damit sie besser aussehen. Fügen Sie das folgende HTML hinzu todo.php
Code. Vergessen Sie nicht, das zu entfernen var_dump ()
!
SimpleTODO SimpleTODOErstellen Sie ein neues TODO-ElementTitel; ?>
Es sollte jetzt ungefähr so aussehen:
Ziemlich cool, nicht wahr? Das macht aber momentan nichts, also fügen wir einige Funktionen hinzu. Ich gebe den Code für new_todo.php
, was wird das nennen todo / erstellen
API-Aufruf zum Erstellen eines neuen TODO-Elements. Erstellen der anderen Seiten (update_todo.php
und delete_todo.php
) sollte diesem sehr ähnlich sein, also überlasse ich es Ihnen, diese zu erstellen. Aufmachen new_todo.php
und fügen Sie den folgenden Code hinzu:
sendRequest (array ('controller' => 'todo', 'action' => 'create', 'title' => $ _POST ['title']), 'due_date' => $ _POST ['due_date'], 'description '=> $ _POST [' description '],' username '=> $ _SESSION [' username '],' userpass '=> $ _SESSION [' userpass ']))); header ('Location: todo.php'); Ausfahrt(); ?>
Wie Sie sehen können, die new_todo.php
Seite verwendet die ApiCaller
um das Senden zu erleichtern todo / erstellen Anfrage an den API-Server. Das macht im Grunde dasselbe wie zuvor:
$ Benutzername
und $ userpass
in der gespeichert $ _SESSION
ApiCaller
Klasse, die das geben APP-ID
, APP-Schlüssel
und die URL des API-ServersAnfrage senden()
Methodetodo.php
Glückwunsch, es funktioniert! Sie haben erfolgreich eine API-basierte Anwendung erstellt!
Die Entwicklung einer Anwendung, die auf einer API basiert, bietet so viele Vorteile. Möchten Sie eine Android-Anwendungsversion von SimpleTODO erstellen? Die gesamte Funktionalität, die Sie benötigen, ist bereits auf dem API-Server vorhanden. Sie müssen also lediglich den Client erstellen. Möchten Sie einige der Klassen umgestalten oder optimieren? Kein Problem - stellen Sie sicher, dass die Ausgabe gleich ist. Müssen Sie weitere Funktionen hinzufügen? Sie können dies tun, ohne den Code des Clients zu beeinflussen!
Obwohl es einige Nachteile gibt, wie längere Entwicklungszeiten oder höhere Komplexität, überwiegen die Vorteile der Entwicklung einer Webanwendung auf diese Weise die Nachteile. Es liegt an uns, heute auf diese Art von Entwicklung Einfluss zu