Odată cu lansarea noului API Envato Marketplace, dezvoltatorii terță parte au acum acces la o multitudine de informații pentru a crea tot felul de aplicații utile. Acest tutorial vă va învăța cum să vă creați propria aplicație iPhone folosind datele din noul API. Chiar dacă nu aveți un iPhone, puteți afla în continuare elementele de bază despre utilizarea PHP și JSON.
Înainte de a începe
Aplicația pe care o vom crea se bazează pe aplicația iPhone, Envato Marketplace Mobile. În timp ce nu vom crea o recreație a întregii aplicații, acest tutorial vă va oferi o idee generală despre cum a fost creată. Acest tutorial vizează începătorii PHP și JSON și servește drept bază pentru crearea de aplicații PHP mai avansate.
Utilizarea API-ului
Înainte de a putea începe să preluăm date utilizând API, trebuie să învățăm cum să accesăm datele. API-ul este împărțit în 5 părți:
Versiune : determină ce versiune a API să folosească.
Nume de utilizator : utilizatorul ale cărui date doriți să le accesați.
API-cheie : similar cu o parolă și este unic pentru fiecare utilizator și permite accesul la datele sale.
a stabilit și format : determinați ce date să accesați și ce formate să le furnizeze.
Pentru mai multe informații despre API, faceți clic aici.
Pasul 1 - Accesarea datelor noastre
Acum, că știm ce este necesar pentru a accesa API, suntem gata să îl punem în practică. Deoarece vrem ca alții să folosească aplicația noastră minunată, trebuie să obținem în curând un nume de utilizator și o cheie API; așa că vom prelua câteva variabile PHP din browser.
dacă isset ($ _GET ['user']) && $ _GET ['user']! = "") $ userName = $ _GET ['user']; dacă isset ($ _GET ['cheie']) && $ _GET ['cheie']! = "") $ apiKey = $ _GET ['cheie']; altceva echo 'Cheia Api nu este setată!'; Ieșire; altceva echo 'Nume de utilizator nu a fost setat!'; Ieșire;
Codul de mai sus verifică dacă variabilele utilizator și cheie au fost setate - și ieșesc dacă nu au. De asemenea, verifică pentru a vă asigura că variabila globală nu este goală.
Recuperarea datelor noastre
Acum, că avem informațiile cerute, putem merge mai departe și o putem folosi pentru a prelua datele noastre. Pentru a face acest lucru, vom crea pur și simplu o adresă URL utilizând formatul prezentat în introducere.
// Creează un șir care va fi folosit pentru a accesa API-ul $ json_url = "http://marketplace.envato.com/api/edge/".$userName."/".$$apiKey."/vitals+recent-sales .json ";
Observați că folosim versiunea "margine" și folosim variabilele anterioare pentru numele de utilizator și api-cheie. În cele din urmă, vom recupera Semnele vitale și vânzările recente seturi de date în format JSON.
Acum că am creat adresa URL pentru a accesa API-ul, trebuie să citim conținutul acestuia astfel încât să poată fi transmis funcției json_decode - care necesită un set de date real json, nu doar un url. Deci, hai să mergem înainte și să folosim file_get_contents () pentru a citi conținutul adresei URL.
// Obțineți conținutul șirului $ json_url $ json_contents = file_get_contents ($ json_url); // Eroare de verificare dacă (! $ Json_contents) echo "Eroare: Fișierul JSON nu a putut fi citit. Verificați numele de utilizator și api."; Ieșire;
Suntem în sfârșit gata să transformăm datele JSON într-o matrice, astfel încât să o putem folosi în aplicația noastră. Pentru a îndeplini această sarcină vom folosi json_decode () care va lua datele de la noi $ json_contents variabilă și scoateți-o într-o matrice.
Folosim doi parametri în această funcție, primul este șirul pe care dorim să-l decodăm, iar al doilea îi spune funcției să emită datele ca o matrice. Asta e! Suntem gata să afișăm datele noastre utilizatorilor.
Pasul 2 - Afișarea rezultatelor noastre
Ne-am preluat datele și acum este momentul să le arătăm utilizatorilor. Din motive de simplitate, vom adăuga codul HTML frontend în același fișier ca și codul nostru PHP. Deci, mergeți mai departe și adăugați codul HTML standard sub codul dvs. PHP.
My Nettuts App pentru iPhone - <?php echo $userName; ?>
My Nettuts App pentru iPhone
Observați că în
tag, am adăugat o simplă declarație de "echo" din PHP care va afișa numele utilizatorului în bara de titlu a browserului.</p> <h4>Obținerea numelui de utilizator și a echilibrului</h4> <p>Să mergem mai departe și să adăugăm un div simplu care afișează numele de utilizator preluat din API. Am putea face acest lucru folosind variabila $ userName asa cum am folosit in titlul paginii, cu toate acestea, folosind JSON este mai incitant.</p> <pre> <div><?php echo $json_data['vitals']['username']; ?></div></pre> <p>Ceea ce face codul de mai sus este recuperarea <strong>nume de utilizator</strong> de la <strong>Semnele vitale</strong> array, care este o matrice în interiorul nostru <strong>$ json_data</strong> array care a fost creat mai devreme. Are sens?</p> <p>Aici este structura matricei folosită în exemplul API: Array ([vital] => Array ([username] => ryan [balance] => 32.75))</p> <p>Apoi, dorim să arătăm utilizatorului echilibrul său. Acest lucru se face în același mod în care am afișat numele de utilizator. De data aceasta, cu toate acestea, vom schimba pur și simplu de la "nume de utilizator" la "echilibru". Restul este pur și simplu pentru aspect și stil.</p> <pre> <div> <div><img src="//accentsconagua.com/img/images_27_6/make-an-iphone-app-using-the-envato-api.png" alt="Echilibru" />Sold: $<?php echo $json_data['vitals']['balance']; ?></div> <h3>Vânzări recente:</h3></pre> <h4>Afișarea vânzărilor recente</h4> <p>Ultimul lucru pe agenda noastră este să afișăm cele mai recente vânzări pentru un utilizator. Acest lucru este un pic mai complicat decât exemplele anterioare, cu toate acestea, dacă ați lucrat vreodată cu array-uri ar trebui să fie în măsură să se ocupe de ea.</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="Vânzare" />Vândut ". $ Value ['item']." pentru <strong>$ "$ Value [ 'suma']."</strong></div>"$ count = $ count + 1; altceva break;?> </div><!--End Content--></pre> <p>Există multe de digerat aici, deci vă permite să începeți cu <strong>pentru fiecare</strong> afirmație. Mai întâi vom crea un $ salesArray din matricea recentă de vânzări din $ json_data. Acest lucru nu este necesar, dar cred că pare mai curat. Instrucțiunea foreach creează o <strong>valoarea $</strong> pentru fiecare rând din <strong>$ salesArray</strong> și ne permite să tragem informații din fiecare rând. Deci, practic, folosiți valoarea $ pentru a obține date din rând, pe măsură ce instrucțiunea foreach trece prin ea.</p> <p>Următorul este codul care este executat de fiecare dată când instruciunea foreach trece printr-un rând. În loc să afișez toate vânzările recente, vreau doar să listați zece, motiv pentru care, dacă numărul de rânduri verificate depășește zece, va rupe buclele. Pentru a schimba numărul de rânduri pe care le trece buclele, modificați doar zece la numărul dorit. Afișarea efectivă a rândurilor este destul de simplă, deoarece este nevoie doar de ecourea fiecărui rând în interiorul divului cu o mică pictogramă. Noi folosim <strong>valoarea $</strong> pentru a accesa informațiile de vânzare din matrice. Tragem <strong>"articol"</strong>, care este titlul articolului și <strong>"Cantitate"</strong> care este suma pe care autorul a făcut-o pentru vânzare. In cele din urma <strong>"numărul de dolari + 1"</strong> doar mărește numărul de rânduri pe care declarația le-a străpuns. Acum ar trebui să fiți pregătiți! Încercați să încărcați fișierul pe un server de testare și să vedeți dacă acesta funcționează!</p> <p>Dacă nu aveți un cont Envato Marketplace, puteți utiliza exemplul de conectare:</p> <ul> <li> <strong>utilizator</strong>: Ryan</li> <li> <strong>cheie</strong>: 26k6otse2s586e4hcbzjy3quq830t3o4</li> </ul> <img src="//accentsconagua.com/img/images_27_6/make-an-iphone-app-using-the-envato-api_2.jpg"> <h3>Pasul 3 - Proiectarea Frontend</h3> <h4>Adăugarea de CSS</h4> <img src="//accentsconagua.com/img/images_27_6/make-an-iphone-app-using-the-envato-api.jpg"> <p>Ei bine, noua noastră aplicație funcționează excelent, dar pare rău - ceea ce înseamnă că este timpul să izbucnim niște CSS. Presupun că știi destul că ai înțeles următorul cod, pentru că nu voi intra în asta decât câteva lucruri. <strong>#browser</strong> este utilizat de iPhone / Touch pentru a vă asigura că, dacă pagina este prea mică, aceasta va umple ecranul. <strong>body.lanscape #browser</strong> același lucru se întâmplă însă când browserul este în modul peisaj.</p> <pre> corp background: #efefef; margine: 0px; padding: 0px; font-familie: Helvetica; -webkit-touch-callout: niciunul; -webkit-text-size-adjust: nici unul; lățime: 100%; culoare: # 2a2a2a; #browser / * asigurați-vă că întotdeauna vom completa întregul ecran * / min-height: 416px; body.landscape #browser min-height: 268px; h3 margin-bottom: 5px; p marja: 0 0 5px 0; / * Layout * / #header umplutură: 10px 5px 5px; înălțime: 30px; culoare: #fff; font-size: 22px; fundal: url (header_bg.jpg) repeat-x; #username font-size: 18px; font-weight: bold; text-transform: majuscule; padding: 5px; / * WebKit suporta text-shadow ... asa ca de ce sa nu arata frumos * / text-shadow: 0 1px 0 rgba (0, 0, 0, 0.5); culoare: #fff; fundal: # 498929; frontieră: 1px solid # 85c952; frontieră de fund: 1px solid # 34661c; #content padding: 5px; padding-top: 10px; .icon vertical-align: text-top; margin-dreapta: 5px; .line padding-bottom: 5px; frontieră de fund: 1px solid #cccccc; margin-bottom: 5px;</pre> <h4>iPhone Time</h4> <p>Este timpul să vă faceți aplicația excelentă în cele din urmă iPhone compatibilă. Aceasta este de fapt foarte ușoară și implică doar o singură linie de cod.</p> <pre> <meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"></pre> <p>Doar adăugați codul de mai sus chiar sub <strong><title></strong> tag și ar trebui să aibă dimensiunea potrivită pentru iPhone sau iPod Touch. Acest cod scade pagina la dimensiunea corectă pentru a fi vizualizată pe iPhone. Ultimul lucru pe care ar trebui să-l faceți este să adăugați o pictogramă de pagină principală, astfel încât aplicația dvs. să arate interesantă când cineva vă adaugă aplicația pentru iPhone ca un decupaj web. Pentru a face acest lucru adăugăm o altă linie mică de cod care este similar cu un favicon.</p> <pre> <link rel="apple-touch-icon" href="apple-touch-icon.png"/></pre> <p>Ei bine ... am terminat! Puteți vedea produsul finit de mai jos.</p> <img src="//accentsconagua.com/img/images_27_6/make-an-iphone-app-using-the-envato-api.jpg"> <h3>Concluzie</h3> <p>Ați reușit până la capăt. Sper că aceasta a fost o introducere bună pentru cei care sunt încă în stadiile de început ale utilizării PHP și JSON. Acum sunteți gata să faceți propria aplicație de criminal folosind API-ul și JSON-ul în general.</p> <p>Amintiți-vă acum, acest tutorial este pentru începători și pentru cei care au nevoie de un început de utilizare pentru utilizarea API-ului.</p> <ul> <li>Abonați-vă la fluxul RSS NETTUTS pentru mai multe tutori și articole zilnice de dezvoltare web.</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">Cod</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">Creați un iPod Nano utilizând efectele 3D ale Illustratorului</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">Creați un poster artistic inspirat cu elemente trase</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="/">ro.accentsconagua.com</a><div class="h-block-a"></div></div>
<div class="footer-text">
Informații interesante și sfaturi utile privind programarea. Dezvoltarea de site-uri, web design si dezvoltare web. Tutoriale Photoshop. Crearea de jocuri pe calculator și aplicații mobile. Deveniți un programator profesionist de la zero.
</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="Căutare...">
<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