Con il rilascio della nuova API di Envato Marketplace, gli sviluppatori di terze parti ora hanno accesso a una vasta gamma di informazioni per creare tutti i tipi di applicazioni utili. Questo tutorial ti insegnerà come creare la tua app per iPhone utilizzando i dati della nuova API. Anche se non hai un iPhone, puoi ancora imparare le nozioni di base sull'utilizzo di PHP e JSON.
Prima di iniziare
L'app che creeremo si basa sulla mia app per iPhone, Envato Marketplace Mobile. Mentre non verrà ricreata l'intera app, questo tutorial ti darà un'idea generale di come è stata creata. Questo tutorial è rivolto ai principianti di PHP e JSON e serve come base per la creazione di applicazioni PHP più avanzate.
Utilizzando l'API
Prima di poter iniziare a recuperare i dati utilizzando l'API, dobbiamo imparare come procedere per accedervi. L'API è divisa in 5 parti:
Versione : determina quale versione dell'API utilizzare.
Nome utente : l'utente di cui desideri accedere ai dati.
API-chiave : simile a una password ed è univoco per ciascun utente e garantisce l'accesso ai propri dati.
impostato e formato : determina a quali dati accedere e in quale formato fornirli.
Per maggiori informazioni sull'API, clicca qui.
Passaggio 1: accesso ai nostri dati
Ora che sappiamo cosa è richiesto per accedere all'API, siamo pronti a metterlo in pratica. Dal momento che vogliamo che gli altri usino la nostra fantastica app, dobbiamo ottenere un nome utente e una chiave API al volo; quindi recupereremo alcune variabili PHP dal browser.
if (isset ($ _ GET ['utente']) && $ _GET ['utente']! = "") $ userName = $ _GET ['utente']; if (isset ($ _ GET ['key']) && $ _GET ['key']! = "") $ apiKey = $ _GET ['chiave']; else echo 'Tasto Api non impostato!'; Uscita; else echo 'Nome utente non impostato!'; Uscita;
Il codice sopra controlla per vedere se le variabili utente e chiave sono stati impostati - ed esce se non l'hanno fatto. Controlla inoltre che la variabile globale non sia vuota.
Recupero dei nostri dati
Ora che abbiamo le informazioni richieste, possiamo andare avanti e usarlo per recuperare i nostri dati. Per fare ciò creeremo semplicemente un url usando il formato descritto nell'introduzione.
// Crea una stringa che verrà utilizzata per accedere all'API $ json_url = "http://marketplace.envato.com/api/edge/".$userName."/".$apiKey."/vitals+recent-sales .json ";
Si noti che stiamo usando la versione "edge" e stiamo usando le nostre variabili precedenti per username e api-key. Alla fine, recupereremo il organi vitali e vendite recenti set di dati nel formato JSON.
Ora che abbiamo creato il nostro url per accedere all'API, dobbiamo leggerne il contenuto in modo che possano essere passati alla funzione json_decode, che richiede un vero set di dati JSON, non solo un URL. Quindi, andiamo avanti e usiamo il file_get_contents () funzione per leggere il contenuto dell'URL.
// Ottieni il contenuto della stringa $ json_url $ json_contents = file_get_contents ($ json_url); // Un piccolo errore che verifica se (! $ Json_contents) echo "Errore: impossibile leggere il file JSON. Controlla il tuo nome utente e la chiave API."; Uscita;
Siamo finalmente pronti per convertire i dati JSON in un array in modo da poterli utilizzare nella nostra applicazione. Per realizzare questo compito useremo il json_decode () funzione che prenderà i dati dal nostro $ json_contents variabile e inviarlo a un array.
// Esporta i nostri dati in una matrice $ json_data = json_decode ($ json_contents, true);
Stiamo usando due parametri in questa funzione, il primo è la stringa che vogliamo decodificare, e il secondo indica alla funzione di generare i dati come una matrice. Questo è tutto! Ora siamo pronti a mostrare i nostri dati all'utente.
Passaggio 2: Visualizzazione dei nostri risultati
Abbiamo recuperato i nostri dati e ora è il momento di mostrarli all'utente. Per semplicità, aggiungeremo il nostro codice HTML di frontend nello stesso file del nostro codice PHP. Quindi vai avanti e aggiungi il codice del documento HTML standard sotto il tuo codice PHP.
App di My Nettuts per iPhone - <?php echo $userName; ?>
App di My Nettuts per iPhone
Notare che nel
tag, ho aggiunto una semplice istruzione PHP "echo" che mostrerà il nome dell'utente nella barra del titolo del browser.</p> <h4>Ottenere il nome utente e l'equilibrio</h4> <p>Andiamo avanti e aggiungiamo un semplice div che mostra il nome utente recuperato dall'API. Potremmo farlo usando la variabile $ userName come abbiamo usato nel titolo della pagina, tuttavia, usare JSON è più eccitante.</p> <pre> <div><?php echo $json_data['vitals']['username']; ?></div></pre> <p>Che cosa fa il codice sopra è recuperare il <strong>nome utente</strong> dal <strong>organi vitali</strong> array, che è una matrice all'interno del nostro <strong>$ json_data</strong> array che è stato creato in precedenza. Ha senso?</p> <p>Ecco la struttura della matrice utilizzata nell'esempio API: Array ([vitals] => Array ([username] => ryan [balance] => 32.75))</p> <p>Successivamente, vogliamo mostrare all'utente il suo equilibrio. Questo è fatto allo stesso modo in cui abbiamo mostrato il nome utente. Questa volta, tuttavia, cambieremo semplicemente da "nome utente" a "saldo". Il resto è semplicemente per il layout e lo stile.</p> <pre> <div> <div><img src="//accentsconagua.com/img/images_27_6/make-an-iphone-app-using-the-envato-api.png" alt="Equilibrio" />Saldo: $<?php echo $json_data['vitals']['balance']; ?></div> <h3>Vendite recenti:</h3></pre> <h4>Elenco vendite recenti</h4> <p>L'ultima cosa alla nostra agenda è mostrare le vendite più recenti per un utente. Questo è un po 'più complicato rispetto agli esempi precedenti, tuttavia, se hai mai lavorato con gli array dovresti essere in grado di gestirlo.</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="saldi" />Venduto ". $ Valore ['articolo']." per <strong>$ "$ Value [ 'importo']."</strong></div>"; $ count = $ count + 1; else break;?> </div><!--End Content--></pre> <p>C'è molto da digerire qui, quindi iniziamo con <strong>per ciascuno</strong> dichiarazione. Per prima cosa creiamo un $ salesArray dall'array delle vendite recenti all'interno di $ json_data. Questo non è necessario, ma penso che sia più pulito. L'istruzione foreach crea a <strong>$ value</strong> per ogni riga nel <strong>$ salesArray</strong> array e ci consente di estrarre informazioni da ogni riga. Quindi, in pratica si usa $ valore per ottenere i dati dalla riga mentre l'istruzione foreach scorre attraverso di essa.</p> <p>Il prossimo è il codice che viene eseguito ogni volta che l'istruzione foreach passa attraverso una riga. Invece di mostrare tutte le vendite recenti, desidero solo elencare dieci, motivo per cui, se il numero di righe selezionate supera 10, interromperà il ciclo. Per cambiare il numero di righe che l'istruzione scorre, basta cambiare dieci al numero desiderato. In realtà la visualizzazione delle righe è abbastanza semplice, in quanto richiede solo l'eco di ogni riga all'interno di un div con una piccola icona. Noi usiamo il <strong>$ value</strong> per accedere alle informazioni di vendita dalla matrice. Tiriamo <strong>"articolo"</strong>, che è il titolo dell'articolo e <strong>"quantità"</strong> che è l'importo che l'autore ha fatto sulla vendita. Finalmente <strong>"$ count + 1"</strong> aumenta solo il numero di righe che l'istruzione ha attraversato. Ora dovresti essere tutto pronto! Prova a caricare il file su un server di prova e verifica se funziona!</p> <p>Se non si dispone di un account Envato Marketplace, è possibile utilizzare l'accesso di esempio:</p> <ul> <li> <strong>utente</strong>: Ryan</li> <li> <strong>chiave</strong>: 26k6otse2s586e4hcbzjy3quq830t3o4</li> </ul> <img src="//accentsconagua.com/img/images_27_6/make-an-iphone-app-using-the-envato-api_2.jpg"> <h3>Passaggio 3: progettazione del frontend</h3> <h4>Aggiunta di CSS</h4> <img src="//accentsconagua.com/img/images_27_6/make-an-iphone-app-using-the-envato-api.jpg"> <p>Bene, la nostra nuova app funziona alla grande, ma sembra male - il che significa che è ora di tirare fuori alcuni CSS. Immagino che tu sappia abbastanza per capire il seguente codice, dato che non ci andrò dentro tranne alcune cose. <strong>#browser</strong> viene utilizzato da iPhone / Touch per assicurarsi che, se la pagina è troppo piccola, riempia lo schermo. <strong>body.lanscape #browser</strong> fa lo stesso, tuttavia, è per quando il browser è in modalità orizzontale.</p> <pre> body background: #efefef; margine: 0px; imbottitura: 0px; font-family: Helvetica; -webkit-touch-callout: none; -webkit-text-size-adjust: nessuno; larghezza: 100%; colore: # 2a2a2a; #browser / * assicurati di riempire sempre l'intero schermo * / min-height: 416px; body.landscape #browser min-height: 268px; h3 margin-bottom: 5px; p margin: 0 0 5px 0; / * Layout * / #header padding: 10px 5px 5px; altezza: 30 px; colore: #fff; font-size: 22px; background: url (header_bg.jpg) repeat-x; #username font-size: 18px; font-weight: bold; text-transform: maiuscolo; imbottitura: 5px; / * WebKit supporta text-shadow ... quindi perché non farlo sembrare carino * / text-shadow: 0 1px 0 rgba (0, 0, 0, 0.5); colore: #fff; sfondo: # 498929; border-top: 1px solid # 85c952; border-bottom: 1px solid # 34661c; #content padding: 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 Time</h4> <p>È ora di rendere la tua fantastica app finalmente compatibile con l'iPhone. Questo è veramente facile e comporta solo una riga di codice.</p> <pre> <meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"></pre> <p>Basta aggiungere il codice sopra proprio sotto il <strong><title></strong> tag e dovrebbe essere la giusta dimensione per il tuo iPhone o iPod Touch. Quel codice ridimensiona la pagina alla dimensione corretta per la visualizzazione su iPhone. L'ultima cosa che devi fare è aggiungere un'icona della home page in modo che la tua app sia interessante quando qualcuno aggiunge la tua applicazione iPhone come webclip. Per fare ciò aggiungiamo un'altra piccola riga di codice simile a una favicon.</p> <pre> <link rel="apple-touch-icon" href="apple-touch-icon.png"/></pre> <p>Bene ... abbiamo finito! Puoi vedere il prodotto finito qui sotto.</p> <img src="//accentsconagua.com/img/images_27_6/make-an-iphone-app-using-the-envato-api.jpg"> <h3>Conclusione</h3> <p>Sei arrivato alla fine. Spero che questa sia stata una buona introduzione per coloro che sono ancora nelle fasi iniziali dell'uso di PHP e JSON. Ora sei pronto per creare la tua app killer utilizzando l'API e JSON in generale.</p> <p>Ora ricorda che questo tutorial è per principianti e per chi ha bisogno di un jump-start per l'utilizzo dell'API.</p> <ul> <li>Iscriviti al feed RSS di NETTUTS per ulteriori tuts e articoli di sviluppo web giornalieri.</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">Codice</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 un iPod Nano usando gli effetti 3D di 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">Crea un poster artistico ispiratore con elementi disegnati</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="/">it.accentsconagua.com</a><div class="h-block-a"></div></div>
<div class="footer-text">
Informazioni interessanti e consigli utili sulla programmazione. Sviluppo di siti web, web design e sviluppo web. Tutorial di Photoshop. Creazione di giochi per computer e applicazioni mobili. Diventa un programmatore professionista da 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="Ricerca...">
<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