Mit der Veröffentlichung der neuen Envato Marketplace-API können Entwickler von Drittanbietern auf eine Fülle von Informationen zugreifen, um alle möglichen nützlichen Anwendungen zu erstellen. In diesem Lernprogramm erfahren Sie, wie Sie Ihre eigene iPhone-App mit den Daten der neuen API erstellen. Auch wenn Sie kein iPhone besitzen, können Sie die Grundlagen zur Verwendung von PHP und JSON erlernen.
Bevor wir anfangen
Die App, die wir erstellen werden, basiert auf meiner iPhone-App, Envato Marketplace Mobile. Während wir nicht die gesamte App neu erstellen, erhalten Sie in diesem Tutorial eine allgemeine Vorstellung davon, wie sie erstellt wurde. Dieses Tutorial richtet sich an PHP- und JSON-Anfänger und dient als Grundlage für die Erstellung fortschrittlicherer PHP-Anwendungen.
Verwendung der API
Bevor mit dem Abrufen von Daten mithilfe der API begonnen werden kann, müssen wir lernen, wie auf sie zugegriffen werden kann. Die API ist in 5 Teile aufgeteilt:
Ausführung : bestimmt, welche Version der API verwendet werden soll.
Nutzername : der Benutzer, auf dessen Daten Sie zugreifen möchten.
API-Schlüssel : Ähnlich wie ein Passwort und ist für jeden Benutzer eindeutig und gewährt Zugriff auf seine Daten.
einstellen und Format : Festlegen, auf welche Daten zugegriffen werden soll und in welchem Format sie bereitgestellt werden sollen.
Weitere Informationen zur API finden Sie hier.
Schritt 1 - Zugriff auf unsere Daten
Nun, da wir wissen, was für den Zugriff auf die API erforderlich ist, können wir sie in die Praxis umsetzen. Da wir möchten, dass andere unsere großartige App verwenden, müssen wir sofort einen Benutzernamen und einen API-Schlüssel erhalten. Wir werden also einige PHP-Variablen vom Browser abrufen.
if (isset ($ _ GET ['user']) && $ _GET ['user']! = "") $ userName = $ _GET ['user']; if (isset ($ _ GET ['key']) && $ _GET ['key']! = "") $ apiKey = $ _GET ['key']; else echo 'Die API-Taste ist nicht festgelegt!'; Ausfahrt; else echo 'Benutzername nicht festgelegt!'; Ausfahrt;
Der obige Code prüft, ob die Variablen vorhanden sind Nutzer und Schlüssel wurden gesetzt - und beendet, wenn nicht. Außerdem wird geprüft, ob die globale Variable nicht leer ist.
Daten abrufen
Nun, da wir die erforderlichen Informationen haben, können wir sie nutzen, um unsere Daten abzurufen. Dazu erstellen wir einfach eine URL mit dem in der Einleitung beschriebenen Format.
// Erstellt einen String, der für den Zugriff auf die API verwendet wird. $ Json_url = "http://marketplace.envato.com/api/edge/".$userName."/".$apiKey."/vitals+recent-sales .json ";
Beachten Sie, dass wir die Edge-Version verwenden und unsere vorherigen Variablen für den Benutzernamen und den API-Schlüssel verwenden. Zum Schluss holen wir das ab Vitals und die letzten Verkäufe Datensätze im JSON-Format.
Nachdem wir unsere URL für den Zugriff auf die API erstellt haben, müssen wir deren Inhalt lesen, damit sie an die json_decode-Funktion übergeben werden können. Dies erfordert eine tatsächliche Json-Datei und nicht nur eine URL. Also, lasst uns fortfahren und die file_get_contents () Funktion zum Lesen des Inhalts der URL.
// Den Inhalt der $ json_url-Zeichenfolge abrufen $ json_contents = file_get_contents ($ json_url); // Ein kleiner Fehler beim Überprüfen von if (! $ Json_contents) echo "Fehler: Die JSON-Datei konnte nicht gelesen werden. Bitte überprüfen Sie Ihren Benutzernamen und den API-Schlüssel."; Ausfahrt;
Wir sind endlich bereit, die JSON-Daten in ein Array umzuwandeln, damit wir sie in unserer Anwendung verwenden können. Um diese Aufgabe zu erfüllen, verwenden wir die json_decode () Funktion, die die Daten aus unserer $ json_contents Variable und geben sie in ein Array aus.
// Unsere Daten in ein Array ausgeben $ json_data = json_decode ($ json_contents, true);
Wir verwenden zwei Parameter in dieser Funktion, der erste ist der String, den wir decodieren möchten, und der zweite teilt der Funktion mit, die Daten als Array auszugeben. Das ist es! Wir sind jetzt bereit, unsere Daten dem Benutzer anzuzeigen.
Schritt 2 - Anzeigen unserer Ergebnisse
Wir haben unsere Daten abgerufen und jetzt ist es Zeit, sie dem Benutzer zu zeigen. Der Einfachheit halber fügen wir unseren Frontend-HTML-Code in dieselbe Datei wie unser PHP-Code ein. Fügen Sie also den Standard-HTML-Dokumentcode unter Ihrem PHP-Code hinzu.
An diesem Tag habe ich eine einfache PHP-Anweisung "echo" hinzugefügt, die den Namen des Benutzers in der Titelleiste des Browsers anzeigt.</p> <h4>Den Benutzernamen und das Guthaben abrufen</h4> <p>Fügen Sie ein einfaches div hinzu, das den aus der API abgerufenen Benutzernamen anzeigt. Wir könnten dies mit der $ userName -Variable tun, wie wir sie im Seitentitel verwendet haben. Die Verwendung von JSON ist jedoch aufregender.</p> <pre> <div><?php echo $json_data['vitals']['username']; ?></div></pre> <p>Was der obige Code tut, ist die <strong>Nutzername</strong> von dem <strong>Vitals</strong> Array, das ist ein Array in unserem <strong>$ json_data</strong> Array, das zuvor erstellt wurde. Macht Sinn?</p> <p>Hier ist die Struktur des Arrays, das im API-Beispiel verwendet wird: Array ([vitals] => Array ([Benutzername] => ryan [balance] => 32.75))</p> <p>Als Nächstes möchten wir dem Benutzer sein Guthaben anzeigen. Dies geschieht auf dieselbe Weise, wie wir den Benutzernamen angezeigt haben. Dieses Mal werden wir jedoch einfach von "Benutzername" zu "Guthaben" wechseln. Der Rest ist einfach für Layout und Styling.</p> <pre> <div> <div><img src="//accentsconagua.com/img/images_27_6/make-an-iphone-app-using-the-envato-api.png" alt="Balance" />Guthaben: $<?php echo $json_data['vitals']['balance']; ?></div> <h3>Letzte Verkäufe:</h3></pre> <h4>Aktuelle Verkäufe auflisten</h4> <p>Das letzte, was auf unserer Agenda steht, ist die Anzeige der letzten Verkäufe für einen Benutzer. Dies ist etwas komplizierter als in den vorherigen Beispielen. Wenn Sie jedoch schon einmal mit Arrays gearbeitet haben, sollten Sie damit umgehen können.</p> <pre> <?php // List Recent Sales $count = 1; $salesArray = $json_data['recent-sales']; foreach($salesArray as $value) if($count <= 10) echo "<div><img src="//accentsconagua.com/img/images_27_6/make-an-iphone-app-using-the-envato-api.png" alt="Verkauf" />Verkauft ". $ Value ['item']." zum <strong>$ ". $ value ['Betrag']."</strong></div>"; $ count = $ count + 1; else break;?> </div><!--End Content--></pre> <p>Hier gibt es viel zu verdauen, also fangen wir mit dem an <strong>für jeden</strong> Aussage. Zuerst erstellen wir einen $ salesArray aus dem kürzlich verkauften Array innerhalb von $ json_data. Das ist nicht notwendig, aber ich denke es sieht sauberer aus. Die foreach-Anweisung erstellt eine <strong>$ wert</strong> für jede Zeile in der <strong>$ salesArray</strong> Array und ermöglicht es uns, Informationen aus jeder Zeile abzurufen. Im Grunde verwenden Sie $ value, um Daten aus der Zeile abzurufen, während die foreach-Anweisung diese Schleife durchläuft.</p> <p>Als nächstes folgt der Code, der jedes Mal ausgeführt wird, wenn die foreach-Anweisung eine Zeile durchläuft. Anstatt alle letzten Verkäufe anzuzeigen, möchte ich nur zehn auflisten. Wenn also die Anzahl der geprüften Zeilen zehn überschreitet, wird die Schleife unterbrochen. Um die Anzahl der Zeilen zu ändern, die die Anweisung durchläuft, ändern Sie einfach zehn in die gewünschte Anzahl. Das Anzeigen der Zeilen ist eigentlich ganz einfach, da es notwendig ist, jede Zeile innerhalb eines Div mit einem kleinen Symbol auszuspielen. Wir nehmen das <strong>$ wert</strong> um auf die Verkaufsinformationen aus dem Array zuzugreifen. Wir ziehen <strong>"Artikel"</strong>, Welches ist der Titel und <strong>"Menge"</strong> Dies ist der Betrag, den der Autor beim Verkauf getätigt hat. Endlich <strong>"$ count + 1"</strong> Erhöht nur die Anzahl der Zeilen, die die Anweisung durchlaufen hat. Du solltest jetzt fertig sein! Laden Sie die Datei auf einen Testserver und prüfen Sie, ob sie funktioniert!</p> <p>Wenn Sie noch kein Envato Marketplace-Konto haben, können Sie das Beispiel-Login verwenden:</p> <ul> <li> <strong>Nutzer</strong>: Ryan</li> <li> <strong>Schlüssel</strong>: 26k6otse2s586e4hcbzjy3quq830t3o4</li> </ul> <img src="//accentsconagua.com/img/images_27_6/make-an-iphone-app-using-the-envato-api_2.jpg"> <h3>Schritt 3 - Frontend entwerfen</h3> <h4>CSS hinzufügen</h4> <img src="//accentsconagua.com/img/images_27_6/make-an-iphone-app-using-the-envato-api.jpg"> <p>Nun, unsere neue App funktioniert gut, aber sie sieht schlecht aus - was bedeutet, dass es an der Zeit ist, ein paar CSS herauszuholen. Ich nehme an, Sie wissen genug, um den folgenden Code zu verstehen, da ich bis auf ein paar Dinge nicht weiter darauf eingehen werde. <strong>#Browser</strong> wird vom iPhone / Touch verwendet, um sicherzustellen, dass die Seite, wenn sie zu klein ist, den Bildschirm ausfüllt. <strong>body.lanscape #browser</strong> Das Gleiche gilt jedoch, wenn sich der Browser im Querformat befindet.</p> <pre> body background: #efefef; Marge: 0px; Polsterung: 0px; Schriftfamilie: Helvetica; -webkit-touch-callout: keine; -webkit-Textgröße anpassen: keine; Breite: 100%; Farbe: # 2a2a2a; #browser / * sorgt dafür, dass wir immer den gesamten Bildschirm ausfüllen * / min-height: 416px; body.landscape #browser min-height: 268px; h3 Rand unten: 5px; p Marge: 0 0 5px 0; / * Layout * / #header Auffüllen: 10px 5px 5px; Höhe: 30px; Farbe: #fff; Schriftgröße: 22px; Hintergrund: URL (header_bg.jpg) repeat-x; #username font-size: 18px; Schriftdicke: fett; Text-Transformation: Großbuchstaben; Polsterung: 5px; / * WebKit unterstützt Text-Shadow… Warum also nicht hübsch aussehen? * / Text-Shadow: 0 1px 0 rgba (0, 0, 0, 0.5); Farbe: #fff; Hintergrund: # 498929; Border-Top: 1px fest # 85c952; Rahmen unten: 1px fest # 34661c; #content padding: 5px; Polsterauflage: 10px; .icon vertikal-align: text-top; Rand rechts: 5px; .line padding-bottom: 5px; Rahmen unten: 1px fest #cccccc; Rand unten: 5px;</pre> <h4>iPhone-Zeit</h4> <p>Es ist an der Zeit, dass Ihre großartige App endlich iPhone-kompatibel wird. Das ist eigentlich ganz einfach und beinhaltet nur eine Codezeile.</p> <pre> <meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"></pre> <p>Fügen Sie einfach den obigen Code direkt unter dem ein <strong><title></strong> Tag und es sollte die richtige Größe für Ihr iPhone oder Ihren iPod Touch haben. Durch diesen Code wird die Seite auf die richtige Größe für die Anzeige auf dem iPhone skaliert. Das letzte, was Sie möglicherweise tun müssen, ist das Hinzufügen eines Homepage-Symbols, damit Ihre App cool aussieht, wenn jemand Ihre iPhone-Anwendung als Webclip hinzufügt. Dazu fügen wir eine weitere kleine Codezeile hinzu, die einem Favicon ähnelt.</p> <pre> <link rel="apple-touch-icon" href="apple-touch-icon.png"/></pre> <p>Nun ja, wir sind fertig! Sie können das fertige Produkt unten sehen.</p> <img src="//accentsconagua.com/img/images_27_6/make-an-iphone-app-using-the-envato-api.jpg"> <h3>Fazit</h3> <p>Du hast es bis zum Ende geschafft. Ich hoffe, dass dies eine gute Einführung für diejenigen war, die sich noch in den Anfängen der Verwendung von PHP und JSON befinden. Sie können jetzt Ihre eigene Killer-App mithilfe der API und JSON generell erstellen.</p> <p>Denken Sie daran, dieses Tutorial richtet sich an Anfänger und alle, die einen Starthilfe für die Verwendung der API benötigen.</p> <ul> <li>Abonnieren Sie den NETTUTS-RSS-Feed für mehr tägliche Webentwicklungsberichte und -artikel.</li> </ul> <p> <br> </p>
<div class="rek-block">
<center>
<ins class="adsbygoogle"
style="display:inline-block;width:580px;height:400px"
data-ad-client="ca-pub-3810161443300697"
data-ad-slot="9434875811"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</center>
</div>
<div class="h-alltags">
<a href="articles/code">Code</a>
</div>
</div>
</div>
</div>
</div>
<div class="next_posts clearfix">
<div class="n_post">
<div class="next_posts-h1 left_nh1"><a href="/articles/design/make-an-ipod-nano-using-illustrators-3d-effects.html">Erstellen Sie einen iPod Nano mit den 3D-Effekten von Illustrator</a></div>
<div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_27/make-an-ipod-nano-using-illustrators-3d-effects_2.jpg');"></div>
</div>
<div class="n_post">
<div class="next_posts-h1 right_nh1"><a href="/articles/design/make-an-inspiring-artistic-poster-with-drawn-elements.html">Machen Sie ein inspirierendes künstlerisches Poster mit gezeichneten Elementen</a></div>
<div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_27_8/make-an-inspiring-artistic-poster-with-drawn-elements_34.jpg');"></div>
</div>
</div>
<footer>
<div class="container">
<div class="footer-langs">
<ul class="site-langs-list">
<li><a href="https://www.accentsconagua.com"><i class="flag flag-DE"></i>Deutsch</a></li>
<li><a href="https://fr.accentsconagua.com"><i class="flag flag-FR"></i>Français</a></li>
<li><a href="https://nl.accentsconagua.com"><i class="flag flag-NL"></i>Nederlands</a></li>
<li><a href="https://no.accentsconagua.com"><i class="flag flag-NO"></i>Norsk</a></li>
<li><a href="https://sv.accentsconagua.com"><i class="flag flag-SE"></i>Svenska</a></li>
<li><a href="https://it.accentsconagua.com"><i class="flag flag-IT"></i>Italiano</a></li>
<li><a href="https://es.accentsconagua.com"><i class="flag flag-ES"></i>Español</a></li>
<li><a href="https://ro.accentsconagua.com"><i class="flag flag-RO"></i>Românesc</a></li>
</ul>
</div>
<div class="h-block"><a href="/">accentsconagua.com</a><div class="h-block-a"></div></div>
<div class="footer-text">
Interessante Informationen und nützliche Tipps zur Programmierung. Website-Entwicklung, Webdesign und Webentwicklung. Photoshop-Tutorials. Erstellung von Computerspielen und mobilen Anwendungen. Werden Sie von Grund auf professioneller Programmierer.
</div>
</div>
</footer>
<div class="search">
<img class="searchico" src="//accentsconagua.com/img/search.svg" alt="">
</div>
<div class="modal">
<div class="modal-content">
<span class="close-button">×</span>
<input class="searchmain" type="text" id="search-input" placeholder="Suche...">
<ul class="searchli" id="results-container"></ul>
</div>
</div>
<link rel="stylesheet" href="css/flags.css">
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script>
<script>
window.addEventListener("load", function(){
window.cookieconsent.initialise({
"palette": {
"popup": {
"background": "#edeff5",
"text": "#838391"
},
"button": {
"background": "#4b81e8"
}
},
"theme": "classic",
"position": "bottom-right"
})});
</script>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script src="js/scripts.min.js"></script>
<script src="js/common.js"></script>
<link rel="stylesheet" href="css/fontawesome-all.min.css">
<script>
var modal = document.querySelector(".modal");
var trigger = document.querySelector(".search");
var closeButton = document.querySelector(".close-button");
function toggleModal() {
modal.classList.toggle("show-modal");
}
function windowOnClick(event) {
if (event.target === modal) {
toggleModal();
}
}
trigger.addEventListener("click", toggleModal);
closeButton.addEventListener("click", toggleModal);
window.addEventListener("click", windowOnClick);
</script>
<script src="https://unpkg.com/simple-jekyll-search@1.5.0/dest/simple-jekyll-search.min.js"></script>
<script>
SimpleJekyllSearch({
searchInput: document.getElementById('search-input'),
resultsContainer: document.getElementById('results-container'),
json: '/search.json',
searchResultTemplate: '<li><a href="{url}">{title}</a></li>'
})
</script>
<script src="jquery.unveil2.min.js"></script>
<script>
$('img').unveil();
</script>
</body>
</html>
Share
Accentsconagua