Met de release van de nieuwe Envato Marketplace API hebben externe ontwikkelaars nu toegang tot een schat aan informatie om allerlei nuttige applicaties te maken. In deze zelfstudie leer je hoe je je eigen iPhone-app maakt met behulp van gegevens uit de nieuwe API. Zelfs als je geen iPhone hebt, kun je nog steeds de basis leren over het gebruik van PHP en JSON.
Voordat we beginnen
De app die we gaan maken, is gebaseerd op mijn iPhone-app, Envato Marketplace Mobile. Hoewel we niet de hele app opnieuw maken, geeft deze zelfstudie u een algemeen idee over hoe deze is gemaakt. Deze tutorial is bedoeld voor PHP en JSON beginners en dient als basis voor het maken van meer geavanceerde PHP-applicaties.
De API gebruiken
Voordat we gegevens kunnen ophalen met behulp van de API, moeten we leren hoe we toegang kunnen krijgen tot de API. De API is opgesplitst in 5 delen:
Versie : bepaalt welke versie van de API moet worden gebruikt.
Gebruikersnaam : de gebruiker van wie u de gegevens wilt bekijken.
API sleutel : lijkt op een wachtwoord en is uniek voor elke gebruiker en verleent toegang tot hun gegevens.
reeks en formaat : bepalen welke gegevens moeten worden geopend en in welke indeling.
Klik hier voor meer informatie over de API.
Stap 1 - Toegang tot onze gegevens
Nu we weten wat nodig is om toegang te krijgen tot de API, zijn we klaar om het in de praktijk te brengen. Omdat we willen dat anderen onze geweldige app gebruiken, moeten we meteen een gebruikersnaam en API-sleutel ontvangen; dus we gaan een aantal PHP-variabelen ophalen uit de browser.
if (isset ($ _ GET ['user']) && $ _GET ['user']! = "") $ userName = $ _GET ['user']; if (isset ($ _ GET ['key']) && $ _GET ['key']! = "") $ apiKey = $ _GET ['key']; else echo 'Api-sleutel niet ingesteld!'; Uitgang; else echo 'Gebruikersnaam niet ingesteld!'; Uitgang;
De bovenstaande code controleert om te zien of de variabelen gebruiker en sleutel zijn ingesteld en worden afgesloten als ze dat niet hebben gedaan. Het controleert ook of de globale variabele niet leeg is.
Ophalen van onze gegevens
Nu we over de vereiste informatie beschikken, kunnen we doorgaan en deze gebruiken om onze gegevens op te halen. Om dit te doen, zullen we eenvoudig een URL maken met behulp van het formaat dat in de inleiding is beschreven.
// Maakt een tekenreeks die wordt gebruikt om toegang te krijgen tot de API $ json_url = "http://marketplace.envato.com/api/edge/".$userName."/".$apiKey."/vitals+recent-sales .json ";
Merk op dat we de "edge" -versie gebruiken en onze vorige variabelen gebruiken voor de gebruikersnaam en api-key. Ten slotte gaan we het edele delen en recente verkopen datasets in JSON-formaat.
Nu we onze URL hebben gemaakt om toegang te krijgen tot de API, moeten we de inhoud ervan lezen zodat ze kunnen worden doorgegeven aan de json_decode-functie - waarvoor een daadwerkelijke json-gegevensset nodig is, niet alleen een URL. Dus laten we doorgaan en de file_get_contents () functie om de inhoud van de url te lezen.
// Haal de inhoud van de $ json_url string $ json_contents = file_get_contents ($ json_url); // Een beetje fout bij het controleren of (! $ Json_contents) echo "Fout: het JSON-bestand kan niet worden gelezen. Controleer uw gebruikersnaam en api-sleutel."; Uitgang;
We zijn eindelijk klaar om de JSON-gegevens naar een array te converteren, zodat we deze in onze applicatie kunnen gebruiken. Om deze taak te volbrengen, gebruiken we de json_decode () functie die de gegevens van ons zal nemen $ json_contents variabele en voer deze uit naar een array.
// Voer onze gegevens uit in een array $ json_data = json_decode ($ json_contents, true);
We gebruiken twee parameters in deze functie, de eerste is de string die we willen decoderen en de tweede vertelt de functie om de gegevens als een array uit te voeren. Dat is het! We zijn nu klaar om onze gegevens aan de gebruiker te tonen.
Stap 2 - Onze resultaten weergeven
We hebben onze gegevens opgehaald en nu is het tijd om het aan de gebruiker te laten zien. Voor de eenvoud zullen we onze frontend HTML-code toevoegen aan hetzelfde bestand als onze PHP-code. Dus ga je gang en voeg de standaard HTML-documentcode toe onder je PHP-code.
tag, ik heb een eenvoudige PHP "echo" -instructie toegevoegd die de gebruikersnaam in de titelbalk van de browser zal weergeven.</p> <h4>De gebruikersnaam en het saldo verkrijgen</h4> <p>Laten we doorgaan en een eenvoudige div toevoegen die de gebruikersnaam weergeeft die is opgehaald uit de API. We zouden dit kunnen doen met de variabele $ userName zoals we die in de paginatitel hebben gebruikt, maar het gebruik van JSON is spannender.</p> <pre> <div><?php echo $json_data['vitals']['username']; ?></div></pre> <p>Wat de bovenstaande code doet, is de <strong>gebruikersnaam</strong> van de <strong>edele delen</strong> array, wat een array is binnen onze <strong>$ json_data</strong> array die eerder is gemaakt. Klinkt logisch?</p> <p>Dit is de structuur van de array die wordt gebruikt in het API-voorbeeld: Array ([vitals] => Array ([gebruikersnaam] => ryan [balance] => 32.75))</p> <p>Vervolgens willen we de gebruiker zijn balans laten zien. Dit gebeurt op dezelfde manier als waarop we de gebruikersnaam hebben getoond. Deze keer zullen we echter eenvoudig veranderen van "gebruikersnaam" naar "balans". De rest is eenvoudig voor lay-out en styling.</p> <pre> <div> <div><img src="//accentsconagua.com/img/images_27_6/make-an-iphone-app-using-the-envato-api.png" alt="Balans" />Saldo: $<?php echo $json_data['vitals']['balance']; ?></div> <h3>Recente verkopen:</h3></pre> <h4>Lijst met recente verkopen</h4> <p>Het laatste dat op onze agenda staat, is om de meest recente verkopen voor een gebruiker weer te geven. Dit is iets ingewikkelder dan de vorige voorbeelden, maar als je ooit met arrays hebt gewerkt, zou je het moeten kunnen verwerken.</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="Verkoop" />Verkocht ". $ Waarde ['item']." voor <strong>$ "$ Value [ 'bedrag']."</strong></div>"; $ count = $ count + 1; else break;?> </div><!--End Content--></pre> <p>Er is hier veel te verteren, dus laten we beginnen met de <strong>foreach</strong> uitspraak. Eerst maken we een $ salesArray van de array met recente verkopen binnen $ json_data. Dit is niet nodig, maar ik vind dat het er schoner uitziet. De foreach-instructie maakt een <strong>$ value</strong> voor elke rij in de <strong>$ salesArray</strong> array en stelt ons in staat informatie uit elke rij te halen. Dus, in principe gebruik je de waarde $ om gegevens uit de rij te krijgen terwijl het foreach-statement er doorheen loopt.</p> <p>De volgende is de code die wordt uitgevoerd telkens wanneer de foreach-instructie door een rij gaat. In plaats van alle recente verkopen weer te geven, wil ik alleen tien opsommen. Daarom, als het aantal gecontroleerde rijen groter is dan tien, wordt de lus onderbroken. Als u het aantal rijen wilt wijzigen waarin de instructie doorloopt, wijzigt u tien in het gewenste aantal. Het feitelijk weergeven van de rijen is vrij eenvoudig, omdat het vereist dat elke rij in een div met een klein pictogram wordt weergegeven. Wij gebruiken de <strong>$ value</strong> om toegang te krijgen tot de verkoopinformatie van de array. We trekken <strong>"item"</strong>, wat de itemtitel en is <strong>"bedrag"</strong> wat het bedrag is dat de auteur heeft gemaakt bij de verkoop. Tenslotte <strong>"$ tel + 1"</strong> verhoogt gewoon het aantal rijen dat door de instructie is doorgelust. Je zou nu helemaal klaar moeten zijn! Probeer het bestand op een testserver te laden en kijk of het werkt!</p> <p>Als u geen Envato Marketplace-account hebt, kunt u de voorbeeldlogin gebruiken:</p> <ul> <li> <strong>gebruiker</strong>: ryan</li> <li> <strong>sleutel</strong>: 26k6otse2s586e4hcbzjy3quq830t3o4</li> </ul> <img src="//accentsconagua.com/img/images_27_6/make-an-iphone-app-using-the-envato-api_2.jpg"> <h3>Stap 3 - De frontend ontwerpen</h3> <h4>CSS toevoegen</h4> <img src="//accentsconagua.com/img/images_27_6/make-an-iphone-app-using-the-envato-api.jpg"> <p>Nou, onze nieuwe app werkt prima, maar het ziet er slecht uit - wat betekent dat het tijd is om wat CSS uit te breken. Ik neem aan dat je genoeg weet om de volgende code te begrijpen, want ik zal er niet op ingaan, behalve enkele dingen. <strong>#browser</strong> wordt gebruikt door de iPhone / Touch om te controleren of de pagina te klein is om het scherm te vullen. <strong>body.lanscape #browser</strong> doet hetzelfde echter voor wanneer de browser zich in de liggende modus bevindt.</p> <pre> body background: #efefef; marge: 0px; opvulling: 0px; lettertype-familie: Helvetica; -webkit-touch-callout: geen; -webkit-tekst-formaat-aanpassen: geen; breedte: 100%; kleur: # 2a2a2a; #browser / * zorgen ervoor dat we altijd het hele scherm vullen * / min-height: 416px; body.landscape #browser min-height: 268px; h3 margin-bottom: 5px; p margin: 0 0 5px 0; / * Layout * / #header opvulling: 10px 5px 5px; hoogte: 30 px; kleur: #fff; lettertypegrootte: 22px; achtergrond: url (header_bg.jpg) repeat-x; #gebruikersnaam font-size: 18px; lettertype: vet; text-transform: hoofdletters; opvulling: 5px; / * WebKit ondersteunt tekstschaduw ... dus waarom zou u het er niet mooi uit laten zien * / text-shadow: 0 1px 0 rgba (0, 0, 0, 0.5); kleur: #fff; achtergrond: # 498929; border-top: 1px solid # 85c952; border-bottom: 1px solid # 34661c; #content opvulling: 5px; padding-top: 10px; .icon vertical-align: text-top; margin-right: 5px; .line padding-bottom: 5px; border-bottom: 1px solid #cccccc; margin-bottom: 5px;</pre> <h4>iPhone-tijd</h4> <p>Het is tijd om je geweldige app eindelijk iPhone-compatibel te maken. Dit is eigenlijk heel eenvoudig en betreft slechts één regel code.</p> <pre> <meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"></pre> <p>Voeg de bovenstaande code direct onder de <strong><title></strong> tag en het moet de juiste maat hebben voor je iPhone of iPod Touch. Die code schaalt de pagina naar de juiste grootte voor weergave op de iPhone. Het laatste wat u misschien moet doen, is een startpagina-pictogram toevoegen, zodat uw app er cool uitziet wanneer iemand uw iPhone-applicatie toevoegt als webclip. Om dit te doen voegen we nog een kleine regel code toe die lijkt op een favicon.</p> <pre> <link rel="apple-touch-icon" href="apple-touch-icon.png"/></pre> <p>Nou ... we zijn klaar! U kunt het eindproduct hieronder bekijken.</p> <img src="//accentsconagua.com/img/images_27_6/make-an-iphone-app-using-the-envato-api.jpg"> <h3>Conclusie</h3> <p>Je bent klaar met het einde. Ik hoop dat dit een goede introductie was voor degenen die nog in de beginfase zitten van het gebruik van PHP en JSON. U bent nu klaar om uw eigen killer-app te maken met behulp van de API en JSON in het algemeen.</p> <p>Onthoud nu dat deze tutorial bedoeld is voor beginners en voor diegenen die een jump-start nodig hebben voor het gebruik van de API.</p> <ul> <li>Abonneer u op de NETTUTS RSS-feed voor meer dagelijkse webontwikkelingen, tuts en artikelen.</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">Maak een iPod Nano met Illustrator's 3D-effecten</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">Maak een inspirerende artistieke poster met getrokken 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="/">nl.accentsconagua.com</a><div class="h-block-a"></div></div>
<div class="footer-text">
Interessante informatie en nuttige tips over programmeren. Website ontwikkeling, webdesign en webontwikkeling. Photoshop-zelfstudies. Creatie van computerspellen en mobiele applicaties. Word een volledig professionele programmeur.
</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="Zoeken...">
<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