Share
Was Sie erstellen werdenDie Schnittstelle zu einer API ist heutzutage ein großer Teil der Webentwicklung und des Designs. APIs sorgen für ein reichhaltiges, dynamisches Erlebnis im Browser. Anstelle statischer Markierungen und Bilder können Sie Daten dynamisch von einem Server pushen und abrufen und im Browser basierend auf der gewünschten Erfahrung für den Benutzer rendern.
In diesem Lernprogramm erstellen wir ein grundlegendes Beispiel für eine API-basierte Anwendung. Mit der iTunes-API nehmen wir die URL jeder iOS- oder Mac-App und rendern das Symbol für die volle Auflösung direkt im Browser. Diese spezifische App ist möglicherweise nicht sofort für Sie nützlich, aber das, was Sie auf diesem Weg lernen, kann auf alle möglichen Szenarien angewendet werden.
Die meisten ordnungsgemäß entworfenen iOS- und OSX-Apps bieten hochauflösende Elemente für ihre Symbolgrafik. Sicher, diese Symbole scheinen auf Ihrem iPhone-Sprungbrett oder Ihrem OSX-Dock nur eine Größe von 150 × 150 Pixeln zu haben. Um den Retina-Bildschirmen und den unterschiedlichen Größenanforderungen des Betriebssystems Rechnung zu tragen, bittet Apple darum, dass App-Hersteller ein Symbol mit hoher Auflösung bereitstellen Vermögenswerte, so groß wie 1024 × 1024 Pixel! Auf der linken Seite sehen Sie beispielsweise das Tweetbot für Mac-Symbol, wie es ungefähr in Ihrem OSX-Dock erscheinen würde. Während auf der rechten Seite ist das Bild in voller Auflösung:
Apple macht diese Assets über die iTunes-API zugänglich. Wenn Sie also das hochauflösende Bild in voller Größe erhalten möchten, können Sie das! Alles, was Sie brauchen, ist die Kennung der App. Wenn Sie eine Anfrage an die API stellen, erhalten Sie eine Reihe von Informationen über die App, einschließlich eines Links zu dem Bildmaterial mit der höchsten Auflösung, das der Store zur Verfügung hat.
In diesem Lernprogramm geht es nicht so sehr darum, die iTunes-API zu erlernen, sondern um einige der grundlegenden Konzepte für das Erstellen einer dynamischen Web-App zu erlernen, die den von einer API zurückgegebenen Inhalt darstellt. Wenn Sie sich mit den Grundlagen der Schnittstelle zu einer API vertraut gemacht haben, können Sie Ihre eigenen personalisierten Websites mit APIs von Drittanbietern wie Dribbble oder Twitter erstellen.
Um einen schnellen Überblick zu erhalten, sind hier die Konzepte, die wir in diesem Tutorial behandeln werden, um das Endprodukt zu erreichen:
Um zu verstehen, was wir bauen werden, beginnen wir damit, die grundlegenden Erfahrungen unserer kleinen App zu beschreiben. Sobald dies abgeschlossen ist, können wir durch die Auflistung der einzelnen Komponenten etwas genauer werden.
Um mit dem Wireframing der Komponententeile der App zu beginnen, benötigen wir eine Liste der grundlegenden Funktionen und Erfahrungen der App:
Nun, da wir ein grundlegendes Verständnis dafür haben, was die App erreichen soll, können wir mit dem Wireframe ihrer verschiedenen Teile beginnen. Denken Sie daran, dass wir möchten, dass dies eine responsive Web-App ist. Wir werden daher sicherstellen, dass unsere Teile so gestaltet werden, dass sie sich anpassbar nach oben und unten richten.
Header: Oben auf der Seite finden Sie einen stilisierten Text, der den Namen der App darstellt, zusammen mit einer kurzen Beschreibung der Funktion. "Gimmie Dat iCon" ist der dumme Name, den ich für unsere App gefunden habe.
Eingang: Wir müssen dem Benutzer die Möglichkeit geben, einen Link zu der App einzugeben, deren Symbolgrafik er möchte. Dazu fügen wir ein einfaches Eingabefeld und eine Schaltfläche zum Senden direkt unter der Kopfzeile ein.
Ausgabe: Sobald ein gültiger Link vom Benutzer abgerufen wurde, benötigen wir ein Leerzeichen, um die von iTunes abgerufenen Symbolgrafiken anzuzeigen. Also erstellen wir einen Platz dafür direkt unter dem Eingabefeld.
Das ist alles. Wir haben jetzt alle grundlegenden Komponenten, die wir benötigen, um einen Link vom Benutzer abzurufen und Informationen anzuzeigen, die von der iTunes-API zurückgegeben werden.
Es gibt noch einen weiteren wichtigen Faktor, den wir in unserer Drahtmodellphase berücksichtigen müssen: die verschiedenen Zustände unserer Komponenten. Unsere kleine App wird sich zu unterschiedlichen Zeiten in verschiedenen Zuständen befinden. Wir wissen zum Beispiel, dass wir die von der iTunes API zurückgegebenen Symbolgrafiken anzeigen müssen. Wir haben dies bereits berücksichtigt. Was aber, wenn die API einen Fehler zurückgibt, was machen wir dann? Oder was ist, wenn der Benutzer einen fehlerhaften Link eingibt? Wir müssen die unterschiedlichen Zustände berücksichtigen, in denen sich unsere App befindet, abhängig vom Ausführungsstatus. Da unsere App ziemlich einfach ist, haben wir nur diese wenigen Anwendungsfälle, die wir behandeln müssen:
Nullzustand: Was passiert, wenn der Benutzer zum ersten Mal auf unsere Webseite kommt? Es wird kein Symbol angezeigt, da noch keine URL eingegeben wurde. Wir brauchen also eine Art freundlicher „Null-Status“, der besagt, dass Sie noch keinen Link eingegeben haben. Gehen Sie voran und geben Sie eins ein, dann wird das Symbol hier angezeigt. "
Fehler: Es kann durchaus vorkommen, dass bei der Ausführung unserer App einige Fehler auftreten. Zum Beispiel kann der Benutzer eine ungültige URL eingeben. Oder die iTunes-API gibt möglicherweise schlechte oder überhaupt keine Daten zurück. Wir sollten diese Fälle im Design unserer App berücksichtigen, damit der Benutzer sich nicht wundert, was schief gelaufen ist. Also entwerfen wir eine Möglichkeit, eine Fehlermeldung anzuzeigen (deren Text sich je nach Fehler ändert)..
Wird geladen: Da wir mit einer API arbeiten, wird nicht alles sofort geschehen. Der Computer des Benutzers muss eine Anfrage an einen Drittanbieter-Server richten, der die Anfrage berechnen und die Informationen zurücksenden muss. Dies kann einige Sekunden dauern. So stellen wir sicher, dass das Design unserer App eine Möglichkeit bietet, zu kommunizieren, dass der Inhalt geladen wird. Auf diese Weise wird der Benutzer nicht durch einen statischen Bildschirm, auf dem nichts passiert, frustriert und verwirrt (obwohl Inhalte im Hintergrund geladen werden)..
Das ist es! Wir haben alle unsere verschiedenen Komponenten und ihre verschiedenen Zustände behandelt. Im nächsten Lernprogramm werden wir die App mit detaillierteren Wireframes visuell gestalten.
Accentsconagua