Con el lanzamiento de la nueva API de Envato Marketplace, los desarrolladores externos ahora tienen acceso a una gran cantidad de información para crear todo tipo de aplicaciones útiles. Este tutorial te enseñará cómo hacer tu propia aplicación para iPhone usando datos de la nueva API. Incluso si no tienes un iPhone, puedes aprender lo básico sobre el uso de PHP y JSON.
Antes de que comencemos
La aplicación que vamos a crear se basa en mi aplicación para iPhone, Envato Marketplace Mobile. Si bien no volveremos a crear la aplicación completa, este tutorial le dará una idea general de cómo se creó. Este tutorial está dirigido a principiantes en PHP y JSON y sirve como base para crear aplicaciones PHP más avanzadas.
Usando la API
Antes de que podamos comenzar a recuperar datos utilizando la API, debemos aprender cómo acceder a ella. La API se divide en 5 partes:
Versión : determina qué versión de la API usar.
Nombre de usuario : el usuario cuyos datos desea acceder.
Clave API : similar a una contraseña y es única para cada usuario y otorga acceso a sus datos.
conjunto y formato : determinar a qué datos acceder y qué formato proporcionarlos.
Para más información sobre la API, haga clic aquí..
Paso 1 - Accediendo a nuestros datos
Ahora que sabemos lo que se requiere para acceder a la API, estamos listos para ponerlo en práctica. Ya que queremos que otros usen nuestra increíble aplicación, necesitamos obtener un nombre de usuario y una clave de API sobre la marcha; Así que vamos a recuperar algunas variables de PHP desde el navegador.
if (isset ($ _ GET ['user']) && $ _GET ['user']! = "") $ userName = $ _GET ['user']; if (isset ($ _ GET ['key']) && $ _GET ['key']! = "") $ apiKey = $ _GET ['key']; else echo '¡Tecla Api no configurada!'; salida; else else echo '¡El nombre de usuario no está configurado!'; salida;
El código anterior verifica si las variables usuario y llave se han establecido - y sale si no lo han hecho. También verifica que la variable global no esté vacía.
Recuperando nuestros datos
Ahora que tenemos la información requerida, podemos seguir adelante y usarla para recuperar nuestros datos. Para hacer esto, simplemente crearemos una URL utilizando el formato descrito en la introducción..
// Crea una cadena que se utilizará para acceder a la API $ json_url = "http://marketplace.envato.com/api/edge/".$userName."/".$apiKey."/vitals+recent-sales .json ";
Observe que estamos usando la versión "perimetral" y estamos usando nuestras variables anteriores para el nombre de usuario y la clave api. Finalmente, vamos a recuperar el partes vitales y ventas recientes conjuntos de datos en el formato JSON.
Ahora que hemos creado nuestra url para acceder a la API, debemos leer su contenido para que puedan pasarse a la función json_decode, que requiere un conjunto de datos json real, no solo una url. Entonces, sigamos adelante y usemos el file_get_contents () Función para leer los contenidos de la url..
// Obtener el contenido de la cadena $ json_url $ json_contents = file_get_contents ($ json_url); // Un pequeño error al verificar si (! $ Json_contents) echo "Error: No se pudo leer el archivo JSON. Verifique su nombre de usuario y la clave api."; salida;
Finalmente estamos listos para convertir los datos JSON en una matriz para que podamos usarlos en nuestra aplicación. Para llevar a cabo esta tarea utilizaremos el json_decode () función que tomará los datos de nuestra $ json_contents variable y la salida a una matriz.
// Producir nuestros datos en una matriz $ json_data = json_decode ($ json_contents, true);
Estamos usando dos parámetros en esta función, el primero es la cadena que queremos decodificar, y el segundo le dice a la función que genere los datos como una matriz. ¡Eso es! Ahora estamos listos para mostrar nuestros datos al usuario..
Paso 2 - Viendo nuestros resultados
Hemos recuperado nuestros datos y ahora es el momento de mostrarlos al usuario. En aras de la simplicidad, agregaremos nuestro código HTML de frontend al mismo archivo que nuestro código PHP. Así que adelante, agregue el código de documento HTML estándar debajo de su código PHP.
Aplicación para iPhone My Nettuts - <?php echo $userName; ?>
Aplicación para iPhone My Nettuts
Note que en el
etiqueta, agregué una simple declaración "echo" de PHP que mostrará el nombre del usuario en la barra de título del navegador.</p> <h4>Obtención del nombre de usuario y el saldo</h4> <p>Continuemos y agreguemos un div simple que muestre el nombre de usuario recuperado de la API. Podríamos hacer esto usando la variable $ userName como usamos en el título de la página, sin embargo, usar JSON es más emocionante.</p> <pre> <div><?php echo $json_data['vitals']['username']; ?></div></pre> <p>Lo que hace el código anterior es recuperar el <strong>nombre de usuario</strong> desde el <strong>partes vitales</strong> matriz, que es una matriz dentro de nuestra <strong>$ json_data</strong> matriz que se creó anteriormente. Tiene sentido?</p> <p>Aquí está la estructura de la matriz utilizada en el ejemplo de API: Array ([vitals] => Array ([username] => ryan [balance] => 32.75))</p> <p>A continuación, queremos mostrar al usuario su saldo. Esto se hace de la misma manera que mostramos el nombre de usuario. Esta vez, sin embargo, simplemente cambiaremos de "nombre de usuario" a "saldo". El resto es simplemente para el diseño y el estilo..</p> <pre> <div> <div><img src="//accentsconagua.com/img/images_27_6/make-an-iphone-app-using-the-envato-api.png" alt="Equilibrar" />Saldo: $<?php echo $json_data['vitals']['balance']; ?></div> <h3>Ventas recientes:</h3></pre> <h4>Listado de ventas recientes</h4> <p>Lo último en nuestra agenda es mostrar las ventas más recientes para un usuario. Esto es un poco más complicado que en los ejemplos anteriores, sin embargo, si alguna vez ha trabajado con matrices, debería poder manejarlo.</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="Venta" />Vendido ". $ Valor ['item']." para <strong>$ ". $ valor ['cantidad']."</strong></div>"; $ count = $ count + 1; else break;?> </div><!--End Content--></pre> <p>Hay mucho que digerir aquí, así que comencemos con el <strong>para cada</strong> declaración. Primero creamos un $ salesArray desde la matriz de ventas recientes dentro de $ json_data. Esto no es necesario, pero creo que se ve más limpio. La sentencia foreach crea un <strong>$ valor</strong> para cada fila en el <strong>$ salesArray</strong> array y nos permite extraer información de cada fila. Así que, básicamente, usa $ valor para obtener datos de la fila a medida que la instrucción foreach se desplaza.</p> <p>El siguiente es el código que se ejecuta cada vez que la instrucción foreach pasa por una fila. En lugar de mostrar todas las ventas recientes, solo quiero enumerar diez, por lo que, si el número de filas marcadas supera las diez, se romperá el ciclo. Para cambiar el número de filas por las que pasa la declaración, simplemente cambie diez al número que desee. En realidad, mostrar las filas es bastante simple, ya que solo requiere hacer eco de cada fila dentro de un div con un pequeño icono. Usamos el <strong>$ valor</strong> para acceder a la información de venta de la matriz. Nosotros tiramos <strong>"ít"</strong>, cual es el titulo del articulo y <strong>"cantidad"</strong> que es la cantidad que el autor hizo en la venta. Finalmente <strong>"$ count + 1"</strong> solo aumenta el recuento de filas por las que ha pasado la instrucción. ¡Ahora deberías estar listo! Intente cargar el archivo en un servidor de prueba y ver si funciona!</p> <p>Si no tiene una cuenta de Envato Marketplace, puede usar el inicio de sesión de ejemplo:</p> <ul> <li> <strong>usuario</strong>: ryan</li> <li> <strong>llave</strong>: 26k6otse2s586e4hcbzjy3quq830t3o4</li> </ul> <img src="//accentsconagua.com/img/images_27_6/make-an-iphone-app-using-the-envato-api_2.jpg"> <h3>Paso 3 - Diseño de la interfaz</h3> <h4>Añadiendo CSS</h4> <img src="//accentsconagua.com/img/images_27_6/make-an-iphone-app-using-the-envato-api.jpg"> <p>Bueno, nuestra nueva aplicación funciona muy bien, pero se ve mal, lo que significa que es hora de romper un poco de CSS. Supongo que sabes lo suficiente como para entender el siguiente código, ya que no voy a entrar en él excepto por algunas cosas. <strong>#navegador</strong> es utilizado por el iPhone / Touch para asegurarse de que si la página es demasiado pequeña llenará la pantalla. <strong>body.lanscape #browser</strong> hace lo mismo, sin embargo, es para cuando el navegador está en modo horizontal.</p> <pre> cuerpo fondo: #efefef; margen: 0px; relleno: 0px; Familia tipográfica: Helvetica; -webkit-touch-callout: ninguno; -webkit-text-size-adjust: none; ancho: 100%; color: # 2a2a2a; #browser / * aseguramos que siempre llenemos toda la pantalla * / min-height: 416px; body.landscape #browser min-height: 268px; h3 margen inferior: 5px; p margen: 0 0 5px 0; / * Layout * / #header padding: 10px 5px 5px; altura: 30px; color: #fff; tamaño de letra: 22px; fondo: url (header_bg.jpg) repeat-x; # nombre de usuario font-size: 18px; font-weight: negrita; transformación de texto: mayúsculas; relleno: 5px; / * WebKit admite text-shadow ... así que, ¿por qué no hacer que se vea bonito? * / Text-shadow: 0 1px 0 rgba (0, 0, 0, 0.5); color: #fff; fondo: # 498929; borde superior: 1px sólido # 85c952; borde inferior: 1px sólido # 34661c; #content padding: 5px; relleno superior: 10px; .icon vertical-align: text-top; margen derecho: 5px; .line padding-bottom: 5px; borde inferior: 1px sólido #cccccc; margen inferior: 5px;</pre> <h4>Tiempo de iPhone</h4> <p>Es hora de que tu gran aplicación finalmente sea compatible con iPhone. Esto es realmente fácil e involucra solo una línea de código.</p> <pre> <meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"></pre> <p>Simplemente agregue el código anterior justo debajo de <strong><title></strong> etiqueta y debe ser del tamaño correcto para tu iPhone o iPod Touch. Ese código escala la página al tamaño correcto para verla en el iPhone. Lo último que debe hacer es agregar un ícono de página de inicio para que su aplicación se vea bien cuando alguien agrega su aplicación de iPhone como un clip web. Para hacer esto agregamos otra pequeña línea de código que es similar a un favicon.</p> <pre> <link rel="apple-touch-icon" href="apple-touch-icon.png"/></pre> <p>Bueno ... ¡ya hemos terminado! Puedes ver el producto terminado a continuación..</p> <img src="//accentsconagua.com/img/images_27_6/make-an-iphone-app-using-the-envato-api.jpg"> <h3>Conclusión</h3> <p>Has llegado hasta el final. Espero que esta sea una buena introducción para aquellos que aún están en las etapas iniciales de uso de PHP y JSON. Ahora estás listo para crear tu propia aplicación asesina utilizando la API y JSON en general..</p> <p>Ahora recuerde, este tutorial es para principiantes y para aquellos que necesitan un inicio rápido para usar la API.</p> <ul> <li>Suscríbase a la fuente RSS de NETTUTS para obtener más artículos y artículos de desarrollo web diarios..</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">Código</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">Haz un iPod Nano usando los efectos 3D de 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">Hacer un cartel artístico inspirador con elementos dibujados</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="/">es.accentsconagua.com</a><div class="h-block-a"></div></div>
<div class="footer-text">
Información interesante y consejos útiles sobre programación. Desarrollo de sitios web, diseño web y desarrollo web. Tutoriales de Photoshop. Creación de juegos de ordenador y aplicaciones móviles. Conviértete en un programador profesional desde cero.
</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="Buscar...">
<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