Avec la sortie de la nouvelle API Envato Marketplace, les développeurs tiers ont désormais accès à une mine d'informations pour créer toutes sortes d'applications utiles. Ce tutoriel vous apprendra comment créer votre propre application pour iPhone en utilisant les données de la nouvelle API. Même si vous n'avez pas d'iPhone, vous pouvez toujours apprendre les bases sur l'utilisation de PHP et JSON..
Avant que nous commencions
L'application que nous allons créer est basée sur mon application iPhone, Envato Marketplace Mobile. Bien que nous ne recréions pas l'intégralité de l'application, ce tutoriel vous donnera une idée générale de la création de celle-ci. Ce tutoriel est destiné aux débutants PHP et JSON et sert de base à la création d'applications PHP plus avancées..
Utiliser l'API
Avant de pouvoir récupérer des données à l’aide de l’API, nous devons savoir comment y accéder. L'API est divisé en 5 parties:
Version : détermine quelle version de l'API utiliser.
Nom d'utilisateur : l'utilisateur dont vous souhaitez accéder aux données.
Clé API : semblable à un mot de passe, unique à chaque utilisateur et donnant accès à ses données.
ensemble et format : déterminer les données auxquelles accéder et le format dans lequel les fournir.
Pour plus d'informations sur l'API, cliquez ici..
Étape 1 - Accéder à nos données
Maintenant que nous savons ce qu'il faut pour accéder à l'API, nous sommes prêts à le mettre en pratique. Puisque nous voulons que les autres utilisent notre application géniale, nous devons obtenir un nom d'utilisateur et une clé d'API à la volée; nous allons donc récupérer des variables PHP depuis le navigateur.
if (isset ($ _GET ['utilisateur']) && $ _GET ['utilisateur']! = "") $ nomutilisateur = $ _GET ['utilisateur']; if (isset ($ _GET ['clé']) && $ _GET ['clé']! = "") $ apiKey = $ _GET ['clé']; else echo 'La clé Api n'est pas définie!'; sortie; else echo 'Le nom d'utilisateur n'est pas défini!'; sortie;
Le code ci-dessus vérifie si les variables utilisateur et clé ont été définis - et quitte s'ils ne l'ont pas. Il vérifie également que la variable globale n'est pas vide.
Récupérer nos données
Maintenant que nous avons les informations requises, nous pouvons continuer et les utiliser pour récupérer nos données. Pour ce faire, nous allons simplement créer une URL en utilisant le format indiqué dans l'introduction..
// Crée une chaîne qui sera utilisée pour accéder à l'API $ json_url = "http://marketplace.envato.com/api/edge/".$userName."/".$apiKey."/vitals+recent-sales .json ";
Notez que nous utilisons la version "edge" et utilisons nos variables précédentes pour le nom d'utilisateur et la clé-api. Enfin, nous allons récupérer le les signes vitaux et ventes récentes ensembles de données au format JSON.
Maintenant que nous avons créé notre URL pour accéder à l'API, nous devons en lire le contenu afin de pouvoir le transmettre à la fonction json_decode, qui nécessite un ensemble de données JSON réel, et pas seulement une URL. Alors, allons-y et utilisons le file_get_contents () fonction pour lire le contenu de l'URL.
// Récupère le contenu de la chaîne $ json_url $ json_contents = fichier_get_contents ($ json_url); // Une petite erreur vérifie si (! $ Json_contents) echo "Erreur: Impossible de lire le fichier JSON. Veuillez vérifier votre nom d'utilisateur et votre clé api."; sortie;
Nous sommes enfin prêts à convertir les données JSON en un tableau afin de pouvoir l’utiliser dans notre application. Pour accomplir cette tâche, nous utiliserons le json_decode () fonction qui prendra les données de notre $ json_contents variable et sortie dans un tableau.
// Affiche nos données dans un tableau $ json_data = json_decode ($ json_contents, true);
Nous utilisons deux paramètres dans cette fonction, le premier est la chaîne que nous souhaitons décoder, et le second indique à la fonction de sortir les données sous forme de tableau. C'est tout! Nous sommes maintenant prêts à montrer nos données à l'utilisateur.
Étape 2 - Afficher nos résultats
Nous avons récupéré nos données et il est maintenant temps de les montrer à l'utilisateur. Par souci de simplicité, nous allons ajouter notre code HTML frontal dans le même fichier que notre code PHP. Alors allez-y et ajoutez le code de document HTML standard sous votre code PHP.
Application iPhone de mes Nettuts - <?php echo $userName; ?>
Application iPhone de mes Nettuts
Notez que dans le
balise, j'ai ajouté une simple déclaration "echo" en PHP qui affiche le nom de l'utilisateur dans la barre de titre du navigateur.</p> <h4>Obtenir le nom d'utilisateur et le solde</h4> <p>Continuons et ajoutons un simple div qui affiche le nom d'utilisateur extrait de l'API. Nous pourrions faire cela en utilisant la variable $ userName comme celle que nous avons utilisée dans le titre de la page, cependant, utiliser JSON est plus excitant.</p> <pre> <div><?php echo $json_data['vitals']['username']; ?></div></pre> <p>Ce que le code ci-dessus fait, c'est récupérer le <strong>Nom d'utilisateur</strong> du <strong>les signes vitaux</strong> tableau, qui est un tableau au sein de notre <strong>$ json_data</strong> tableau qui a été créé plus tôt. logique?</p> <p>Voici la structure du tableau utilisé dans l'exemple de l'API: Array ([vitals] => Array ([username] => ryan [balance] => 32.75))</p> <p>Ensuite, nous voulons montrer à l'utilisateur son solde. Ceci est fait de la même manière que nous avons affiché le nom d'utilisateur. Cette fois, cependant, nous passerons simplement de "nom d'utilisateur" à "solde". Le reste est simplement pour la mise en page et le style.</p> <pre> <div> <div><img src="//accentsconagua.com/img/images_27_6/make-an-iphone-app-using-the-envato-api.png" alt="Équilibre" />Solde: $<?php echo $json_data['vitals']['balance']; ?></div> <h3>Ventes récentes:</h3></pre> <h4>Liste des ventes récentes</h4> <p>La dernière chose à l'ordre du jour est d'afficher les ventes les plus récentes pour un utilisateur. Ceci est un peu plus compliqué que les exemples précédents, cependant, si vous avez déjà travaillé avec des tableaux, vous devriez pouvoir le gérer..</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="Vente" />Vendu ". $ Value ['item']." pour <strong>$ ". $ valeur ['montant']."</strong></div>"; $ count = $ count + 1; else pause;?> </div><!--End Content--></pre> <p>Il y a beaucoup à digérer ici, alors commençons par le <strong>pour chaque</strong> déclaration. Premièrement, nous créons un tableau $ salesArray à partir du tableau recent-sales dans $ json_data. Ce n'est pas nécessaire, mais je pense que cela a l'air plus propre. La déclaration foreach crée un <strong>$ valeur</strong> pour chaque rangée du <strong>$ salesArray</strong> tableau et nous permet d'extraire des informations de chaque ligne. Donc, en gros, vous utilisez $ value pour obtenir des données à partir de la ligne lorsque l'instruction foreach parcourt celle-ci..</p> <p>La prochaine étape est le code qui est exécuté chaque fois que l'instruction foreach passe par une ligne. Au lieu de montrer toutes les ventes récentes, je ne veux en énumérer que dix, ce qui explique pourquoi, si le nombre de lignes vérifiées dépasse dix, la boucle sera rompue. Pour changer le nombre de lignes que l’instruction parcourt, il suffit de changer dix par le nombre souhaité. En fait, afficher les lignes est assez simple, car il suffit de rappeler chaque ligne à l’intérieur d’une div avec une petite icône. Nous utilisons le <strong>$ valeur</strong> pour accéder aux informations de vente à partir du tableau. Nous tirons <strong>"article"</strong>, qui est le titre de l'article et <strong>"montant"</strong> quel est le montant que l'auteur a fait sur la vente. finalement <strong>"$ count + 1"</strong> augmente simplement le nombre de lignes que l'instruction a parcourues. Vous devriez maintenant être tous ensemble! Essayez de charger le fichier sur un serveur de test et voyez si cela fonctionne!</p> <p>Si vous ne possédez pas de compte Envato Marketplace, vous pouvez utiliser l'exemple de connexion:</p> <ul> <li> <strong>utilisateur</strong>: ryan</li> <li> <strong>clé</strong>: 26k6otse2s586e4hcbzjy3quq830t3o4</li> </ul> <img src="//accentsconagua.com/img/images_27_6/make-an-iphone-app-using-the-envato-api_2.jpg"> <h3>Étape 3 - Concevoir le frontend</h3> <h4>Ajout de CSS</h4> <img src="//accentsconagua.com/img/images_27_6/make-an-iphone-app-using-the-envato-api.jpg"> <p>Eh bien, notre nouvelle application fonctionne très bien, mais elle a l'air mal - ce qui signifie qu'il est temps de sortir un peu de CSS. Je suppose que vous en savez assez pour comprendre le code suivant, car je n'y entrerai pas, à part quelques petites choses.. <strong>#navigateur</strong> est utilisé par l'iPhone / Touch pour s'assurer que si la page est trop petite, elle remplira l'écran. <strong>body.lanscape #browser</strong> fait de même, cependant, est pour quand le navigateur est en mode paysage.</p> <pre> body background: #efefef; marge: 0px; remplissage: 0px; famille de polices: Helvetica; -webkit-touch-callout: aucun; -webkit-text-size-ajuster: aucun; largeur: 100%; couleur: # 2a2a2a; #browser / * assure que nous remplissons toujours tout l'écran * / 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; hauteur: 30px; couleur: #fff; taille de police: 22px; fond: url (header_bg.jpg) repeat-x; #nom_utilisateur font-size: 18px; poids de police: gras; text-transform: majuscule; rembourrage: 5px; / * WebKit supporte text-shadow… alors pourquoi ne pas le rendre joli * / text-shadow: 0 1px 0 rgba (0, 0, 0, 0.5); couleur: #fff; arrière-plan: # 498929; bordure supérieure: solide 1px # 85c952; fond de bordure: solide 1px # 34661c; #content padding: 5px; rembourrage en haut: 10px; .icon vertical-align: text-top; marge droite: 5px; .line padding-bottom: 5px; border-bottom: 1px solid #cccccc; margin-bottom: 5px;</pre> <h4>temps iPhone</h4> <p>Il est temps de rendre votre superbe application enfin compatible avec l'iPhone. C’est vraiment très facile et ne nécessite qu’une seule ligne de code.</p> <pre> <meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"></pre> <p>Ajoutez simplement le code ci-dessus juste en dessous de la <strong><title></strong> tag et il devrait être la bonne taille pour votre iPhone ou iPod Touch. Ce code redimensionne la page à la taille appropriée pour l'affichage sur l'iPhone. La dernière chose à faire est peut-être d’ajouter une icône de page d’accueil pour que votre application ait l’air cool lorsque quelqu'un ajoute votre application iPhone sous forme de clip Web. Pour ce faire, nous ajoutons une autre petite ligne de code semblable à un favicon..</p> <pre> <link rel="apple-touch-icon" href="apple-touch-icon.png"/></pre> <p>Eh bien… nous avons tous fini! Vous pouvez voir le produit fini ci-dessous.</p> <img src="//accentsconagua.com/img/images_27_6/make-an-iphone-app-using-the-envato-api.jpg"> <h3>Conclusion</h3> <p>Vous avez atteint la fin. J'espère que c'était une bonne introduction pour ceux qui en sont encore aux débuts de l'utilisation de PHP et JSON. Vous êtes maintenant prêt à créer votre propre application tueur à l'aide de l'API et de JSON en général..</p> <p>Maintenant, rappelez-vous, ce tutoriel est destiné aux débutants et à ceux qui ont besoin d'un démarrage rapide pour utiliser l'API..</p> <ul> <li>Abonnez-vous au flux RSS NETTUTS pour plus de commentaires et d'articles sur le développement Web au quotidien.</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">Créer un iPod Nano en utilisant les effets 3D d'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">Faire une affiche artistique inspirante avec des éléments dessinés</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="/">fr.accentsconagua.com</a><div class="h-block-a"></div></div>
<div class="footer-text">
Informations intéressantes et conseils utiles sur la programmation. Développement de sites Web, conception de sites Web et développement Web. Tutoriels Photoshop. Création de jeux informatiques et d'applications mobiles. Devenez un programmeur professionnel à partir de zéro.
</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="Chercher...">
<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