En este pot, vamos a echar un vistazo más amplio a las aplicaciones que la información del origen de la Web.Vamos a empezar por la creación de una aplicación que le pide a un sitio web para generar un gráfico de barras (imagen) de las puntuaciones de un jugador del juego de la pantalla. Luego hablaremos de cómo TinyWebDB se puede utilizar para acceder a cualquier tipo de datos (no sólo imágenes) desde la Web, y le proporcionaremos una muestra que tiene acceso a los datos del stock de Yahoo! Finanzas. Por último, vamos a discutir cómo se puede crear sus propias fuentes de información web que pueden ser utilizados por la aplicación Inventor apps.
La web y el mundo de los móviles hay diferentes: sitios web y aplicaciones de contenido el remix de varias fuentes de datos, y la mayoría de los sitios están diseñados con la interoperabilidad en mente. Un ejemplo ilustrativo de un mashup web es Housing Maps ( http://www.housingmaps.com ), en la foto , que toma información de alquiler de apartamentos de Craigslist ( http://www.craigslist.org ) y los trata con la API de Google Maps.
Mashups como Housing Maps son posibles porque los servicios como Google Maps proporcionan tanto un sitio web y una correspondiente API de servicios web . Nosotros, los humanos visitamos http://maps. google.com / en un navegador, pero aplicaciones como Mapas Viviendas comunicamos máquina a máquina con la API de Google Maps. Mashups procesan los datos, se combinan con los datos de otros sitios (por ejemplo, Craigslist), y luego lo presentan de maneras nuevas e interesantes.
Casi todos los sitios web popular ahora ofrece esta alternativa, el acceso de máquina a máquina. El programa proporciona los datos se denomina un servicio web y el protocolo de cómo un cliente de aplicación debe comunicarse con el servicio se denomina interfaz de programación de aplicaciones o API. En la práctica, el término API se utiliza para hacer referencia al servicio web también.
El servicio Web de Amazon (AWS) fue uno de los primeros servicios de Internet, como Amazon se dio cuenta de que la apertura de sus datos para su uso por parte de entidades de terceros eventualmente conducir a más libros a la venta.Cuando Facebook lanzó su API en el 2007, muchas personas alzaron sus cejas. Datos de Facebook no es el libro de los anuncios, por lo que ¿por qué debería dejar que otras aplicaciones «robar» los datos y potencialmente atraer a muchos usuarios fuera del sitio de Facebook (y su publicidad!). Pero su apertura condujo Facebook para convertirse en una plataforma en lugar de sólo un sitio-lo que significa que otros programas, como FarmVille, podrían aprovechar y explotar Facebook de funcionalidad-y nadie puede discutir con su éxito en la actualidad. En el momento en Twitter puso en marcha en 2009, el acceso de la API era una expectativa, no una novedad, y Twitter actuó en consecuencia. Ahora bien, como se muestra abajo, la mayoría de los sitios web ofrecen tanto una API y una interfaz humano.
Así que la Web es una cosa que nosotros los seres humanos-un promedio de colección de sitios para visitar. Para los programadores, es la base de datos más grande y más diversa del mundo de la información. La comunicación de máquina a máquina ahora está lista para superar a la comunicación hombre-máquina en la Web!
Hablando con APIs web que generan Imágenes
Nota: La API de gráficos de Google ahora esta obsoleto. Usted todavía puede utilizarlo y este ejemplo, pero puede que no estar ahí para siempre. Sin embargo, esta muestra sigue siendo instructivo para su explicación de las URL y los parámetros
La mayoría de las API aceptan solicitudes en la forma de una URL y devolver los datos,(normalmente en formatos estándar como XML o Extensible Markup Language, y JSON, JavaScript Object Notation(para estas API, debe utilizar el TinyWebDB componente para comunicarse)
Algunas API, sin embargo, no devuelven datos; devuelven una imagen. En esta sección, vamos a discutir cómo se puede comunicar con estas API de generación de imágenes con el fin de ampliar las capacidades de la interfaz de usuario de App Inventor.
La API de gráficos de Google es un servicio de este tipo. Su aplicación puede enviar algunos datos dentro de una URL, y enviará de vuelta una carta que se puede mostrar en su aplicación. El servicio crea muchos tipos de gráficos, incluyendo gráficos de barras, gráficos circulares, mapas y diagramas de Venn. El API Chart es un gran ejemplo de un servicio web interoperables cuyo propósito es mejorar las capacidades de los otros sitios. Desde App Inventor no ofrece mucho en términos de componentes de visualización, la posibilidad de aprovechar un servicio como el API gráfico es crucial.
Lo primero que debe hacer es entender el formato de la URL debe enviar a la API. Si usted va al sitio del API Gráfico de Google ( http://code.google.com/apis/ ), podrás ver la información general se muestra mas abajo.
El sitio incluye una documentación completa y un asistente para crear gráficos de forma interactiva y explorar cómo construir las URLs. El asistente es especialmente útil, ya que se puede utilizar un formulario para especificar el tipo de gráfico que desee y luego examinar la dirección URL que genera el asistente de ingeniería inversa lo que usted desea enviarlo a sus datos específicos.
Seguir adelante y jugar con el sitio web y el asistente y crear algunas cartas, y luego echar un vistazo a los detalles de las direcciones URL utilizadas para construirlas.
Por ejemplo, si se introduce la dirección URL siguiente en un navegador:
obtendrá el gráfico que se muestra a continuacion.
Para entender la URL bastante complicado de aspecto especificada anteriormente, es necesario entender cómo funcionan las direcciones URL. En su experiencia de navegación, te habrás dado cuenta URLs con signos de interrogación (?) Y los símbolos de unión (&). El? carácter especifica que el primer parámetro de la petición de URL está llegando. El carácter y luego separa cada parámetro siguiente. Cada parámetro tiene un nombre, un signo igual y un valor. Así que la URL de ejemplo está llamando a la API gráfico ( http://chart.apis.google.com/chart ) con los parámetros indicados en la siguiente tabla.
Al modificar los parámetros, puede generar varios gráficos. Para obtener más información sobre los tipos de gráficos que se pueden crear, revisar la documentación de la API en https://developers.google.com/chart/
Ajuste de la image.picture propiedad a un API Gráfico
Ahora usted sabe cómo escribir la muestra Gráfico URL de la API en un navegador web para ver la tabla que se genera. Para obtener una tabla para aparecer en una aplicación, usted tendrá que ajustar la imagen característica de una imagen componente a la misma URL. Para explorar esto, haga lo siguiente:
- Crear una nueva aplicación con un título de la pantalla de «Gráfico Muestra App».
- Añadir una imagen componente con un ancho de «padre de relleno» y la altura de 300.
- Ajuste el image.picture propiedad a la URL de la muestra ( .? http://chart.apis.google com / carta cht = bvg y chxt = y & = a & chs = 300×225 y CHCO = A2C180 y CHTT = Vert ical + bar + gráfica y chd = t: 10,50, 60,80,40,60,30 ).No se puede establecer la propiedad en el Diseñador de componentes, ya que sólo le permite cargar un archivo. Pero se puede establecer en el Editor de bloques, como se muestra en la Figura 24-5, por lo que añadir unScreen.Initialize controlador de eventos y establecer el image.picture propiedad hay (tenga en cuenta que no se puede copiar y pegar en algunas máquinas, por lo que ‘ll tiene que escribir la URL completa).
Cuando se inicia la aplicación, se establece la imagen a un gráfico de regresar de la URL Chart API
Usted debe ver la imagen anterior en su teléfono o emulador.
La construcción de una URL Chart API dinámicamente
El ejemplo anterior muestra cómo se puede obtener un gráfico generado en su aplicación, sino que utiliza una dirección URL con datos fijos (10,50,60,80,40,60,30). Generalmente, usted mostrará dinámicas datos en el gráfico-es decir, los datos almacenados en las variables. Por ejemplo, en una aplicación de juego, es posible mostrar las puntuaciones anteriores del usuario, que se almacenan en una variable Partituras .
Para crear un gráfico de tal dinámica, debe construir la URL de la API para gráficos y cargar los datos variables en ella. En el URL de la muestra, los datos del gráfico se fija y se especifican en el parámetro chd ( chd representa los datos del gráfico):
chd = t: 10,50,60,80,40,60,30
Para construir su puntuación de tabla de forma dinámica, usted comenzará con la parte fija, chd = t :, y luego paso a través de la lista de puntuaciones, la concatenación de cada puntuación en el texto (junto con una coma). La imagen de abajo muestra una solución completa.
Vamos a examinar los bloques más de cerca, porque hay mucho que hacer aquí, muchos de los cuales hemos cubierto en los capítulos anteriores. Para entender este tipo de código, es importante prever algunos datos reales. Así que vamos a suponer que el usuario ha jugado tres partidos en esta aplicación y que las variables Partituras tiene tres artículos: 11, 22 y 15.
Los bloquesdefinir una variable chdParam para almacenar la parte de la URL que contendrá los chd datos. La primera fila de bloques inicializa el texto de la chdParam de la lista de marcadores .
Después se llevan a cabo estos bloques, chdParam contendrá chd = t: 11 , 11 como es el primer valor de la Partituras lista.
El siguiente conjunto de bloques, que se muestra abajo, añade el resto de las puntuaciones a la chdParam .
Utilizamos un tiempo global en este ejemplo, en lugar de un foreach debido foreach sólo le permite hacer lo mismo a cada elemento. Aquí, queremos insertar comas antes de que el segundo elemento y todos los elementos que vienen después de ella (pero no el primero). Con tiempo , podemos poner el primer elementoy luego de bucle a partir del segundo artículo, siempre insertando una coma antes de la partida (asegúrese de no colocar un espacio después).
Un índice se utiliza para realizar un seguimiento de dónde estamos en el Partituras lista. En cada iteración, hacer el texto agrega una coma y el siguiente elemento de Partituras . Después de realizar estos bloques, el chdParamcontendrá chd = t: 11,22,15 . Hemos construido el parámetro chd dinámicamente! (Y también hemos construido de manera que si se añaden más puntos más allá de estos primeros tres, seguirá siendo el trabajo.)
Último trabajo Los bloques «es concatenar el chd parámetro con el resto de la URL Chart API, como se muestra a continuación:
Los bloques de establecer el ScoreChartImage.Picture propiedad a esta dirección URL completa: ? http://chart .apis.google.com / carta cht = bvg y chxt = y & CHBH = a & chs = 300×225 y CHCO = A2C180 y CHTT = Juego + Resultados & chd = t: 11,22,15 . S
Se podría añadir una pantalla como a cualquier juego o aplicación mediante la adición de bloques similares a este ejemplo. También puede hablar con otras API que generan las imágenes y llevar a los en su aplicación también. La clave es que App Inventor proporciona una conexión útil a la Web a través de la imagen de los componentes.
Hablando con las API de datos Web
Nota: App Inventor ahora tiene un componente web que facilita el acceso a los datos de las API más fácil. Puede seguir utilizando el esquema TinyWebDB se describe a continuación, pero también echa un vistazo a esta muestra que utiliza el componente Web.
La API de gráficos de Google es una API web que responde a las solicitudes de devolución de una imagen. Más comúnmente, las API devolverán datos que una aplicación puede procesar y utilizar sin embargo que quiere. El «Amazonas en la Librería» de la aplicación en el capítulo 13, por ejemplo, devuelve los datos en forma de una lista de libros, con cada libro que incluye un título, actual precio más bajo, y el ISBN.
Para hablar con una API desde una aplicación App Inventor, que no es necesario para construir una URL, como lo hicimos con el ejemplo Chart AP:en su lugar, se consulta la API al igual que lo haría una base de datos web sólo enviar su solicitud como la etiqueta a la TinyWebDB.GetValue bloque. El TinyWebDB componente se encarga de generar realmente el URL que usted envía a la API.
TinyWebDB no proporciona acceso a todas las API, incluso aquellos que devuelven un formato de datos estándar como RSS. TinyWebDB sólo puede hablar con los servicios web para la que un inventor «contenedor» servicio App, con un protocolo en particular, se ha creado. Afortunadamente, algunos de estos servicios se han creado ya, y más tardará en llegar. Usted puede encontrar algunos de estos en http://appinventorapi.com .
Exploración de la interfaz web de una API
En esta sección, usted aprenderá cómo utilizar TinyWebDB para traer los datos de precios de acciones desde el Inventor compatible API App en http://yahoostocks.appspot.com . Si usted va al sitio, verá la interfaz web (humana) del servicio representado a continuación.
Pruebe a escribir «IBM» o algún otro símbolo de la acción en la casilla Tag. La página web devuelve información actual como una lista, con cada elemento que representa una parte diferente de la información, como se describe en la lista numérica más abajo en la página.
Tenga en cuenta que esta interfaz web no se entiende como una nueva e interesante manera de encontrar información; su único objetivo es permitir a los programadores para explorar la API para comunicarse con el servicio Web subyacente de máquina a máquina.
Acceso a la API a través de TinyWebDB
El primer paso para crear una aplicación que se comunica con el servicio web anterior es arrastrar un TinyWebDB componente en el Diseñador de componentes. Sólo hay una propiedad asociada con TinyWebDB , su ServiceURL , que se muestra abajo Por defecto, está ajustado a una base de datos web por defecto, http://appinvtinywebdb.appspot.com . Dado que queremos acceder a su lugar el Yahoo! Stocks API, establezca esta propiedad enhttp://yahoostocks.appspot.com , el mismo URL que ha introducido en la barra de direcciones del navegador antes de ver la interfaz de la página web.
El siguiente paso es hacer una TinyWebDB.GetValue llamada a datos de la solicitud desde el sitio. Usted puede hacer esto en respuesta al usuario entrar en un símbolo de valor y haciendo clic en el botón Enviar en la interfaz de usuario de su aplicación, o usted puede hacerlo en el Screen.Initialize evento para traer a la información sobre una acción correcta en particular cuando se abre la aplicación. En cualquier caso, cuando se llama a GetValue , debe establecer la etiqueta a un símbolo de la acción, como se ilustra abajo, tal como lo hizo en la página web http:// yahoostocks.appspot.com .
TinyWebDB asume una comunicación asíncrona : su aplicación solicita los datos con TinyWebDB.GetValue y luego va sobre su negocio. Usted debe proporcionar un controlador de eventos por separado, TinyWebDB.GotValue , para programar los pasos que la aplicación debe tomar cuando los datos realmente regresa desde el servicio web. De nuestro examen de la interfaz humana de http://yahoostocks.appspot.com , nos enteramos de que los datos devueltos desde GetValue es una lista, con particulares elementos de la lista que representan diferentes datos sobre la población.
Una aplicación cliente puede utilizar algunos o todos los datos que el servicio ofrece. Por ejemplo, si sólo quería mostrar el precio actual y su cambio desde la apertura de la jornada, es posible configurar los bloques como se muestra ahora:.
Si marca la especificación de la API en http://yahoostocks.appspot.com , verás que el segundo elemento de la lista devuelta es de hecho el precio actual y el quinto punto es el cambio ya que las reservas comenzaron a cotizar ese día.Esta aplicación simplemente extrae los elementos de lo que es devuelto por la API, y los muestra en la etiqueta PriceLabel y ChangeLabel . La imagen siguinte ofrece una instantánea de la aplicación en acción.
Creación de sus propias APIs-Compliant Inventor de la aplicación
TinyWebDB es el puente de un Inventor aplicación App para la Web. Permite que en la aplicación Inventor los programadores hablen con los servicios web con el simple protocolo de etiqueta-valor inherente al GetValue función. Usted envía una etiqueta en particular como el parámetro, así como una lista o un objeto de texto se devuelve como el valor. De esta manera, el Inventor programador App está protegido de la programación difícil requerida para analizar (comprender y extraer los datos de) formatos de datos estándar como XML o JSON.
La desventaja es que la aplicación de Inventor aplicaciones pueden hablar sólo a los servicios web que siguen el protocolo esperado por TinyWebDB que espera que los datos se devuelvan en una forma muy específica, y la API tiene para ofrecer a sus datos en consecuencia. App Inventor no tiene un componente de acceso a un servicio web que devuelve arbitraria formatos de datos estándar, como XML o JSON. Si no hay una-Inventor compatible API App ya disponible, una persona con la capacidad de escribir un programa web debe crearlo.
En el pasado, las API de construcción fue difícil, ya que no sólo necesita entender los protocolos de programación y web, pero también se necesitan para configurar un servidor para alojar su servicio web y una base de datos para almacenar los datos. Ahora es mucho más fácil, ya que puede aprovechar las herramientas de computación en la nube como Google App Engine y Elastic Compute Cloud de Amazon para implementar de inmediato el servicio que usted cree. Estas plataformas no sólo alojar su servicio web, pero que también va a permitir que miles de usuarios acceder a él antes de cobrar un solo centavo. Como se puede imaginar, estos sitios son una gran bendición para la innovación.
Personalización de Código Plantilla
Escribir su propio API puede parecer desalentador, pero la buena noticia es que usted no tiene que empezar de cero. Usted puede aprovechar algo de código de plantilla siempre que lo hace especialmente fácil crear APIs-Inventor de la aplicación compatible. El código está escrito en el lenguaje de programación Python y utiliza App Engine de Google. La plantilla proporciona código repetitivo para obtener los datos en la forma que las necesidades de App Inventor, y una función, obtiene_valor , que se puede personalizar.
Puede descargar el código de la plantilla y las instrucciones para implementarlo en los servidores de Google App Engine en http://appinventorapi.com/using-tinywebdb-to-talk-to-an-api/ . Usted puede notar que el enlace te lleva a la misma appinventorapi. com sitio que se puede utilizar para crear una base de datos web a medida. La construcción de una API es similar, sólo que en lugar de simplemente almacenar y recuperar datos, se le llama a otro servicio para acceder a los datos que necesita.
Para crear su propia API web, podrás descargar la plantilla, modificar unos pocos lugares clave en el código, y luego subirlo a App Engine. En cuestión de minutos, usted tendrá su propia API que se puede llamar utilizando TinyWebDB en una App Inventor App.
Aquí está el código particular de la plantilla que tendrá que personalizar (no se preocupe por el texto que viene después del símbolo #, al igual que los comentarios en App Inventor, sólo describe lo que el código se está haciendo):
def get_Value (auto, etiqueta):
# Para este ejemplo sencillo, apenas volvemos hola: tag, que se envía en la etiqueta por el cliente
value = "hola" + tag
value = "\" "+ valor +" \ ""
# Añade comillas si el valor es tiene varias palabras
si self.request.get ('fmt') == "html":
WriteToWeb (auto, etiqueta, valor)
más:
WriteToPhone (auto, etiqueta, valor)
Este código es para una función (mismo que un procedimiento en el App Inventor) llamado obtiene_valor , y es de hecho el código que se invoca cuando su aplicación llama a una API con la TinyWebDB.GetValue función. tag es unparámetro de la función y corresponde a la etiquetar envía en el GetValue llamada.
El código en negrita es la parte que va a cambiar. Por defecto, simplemente toma la etiqueta enviado con la solicitud y la envía de vuelta «hola etiqueta.» (En otras palabras, si se llama a este código con la etiqueta «joe», devuelve «hola joe»).Lo hace mediante la variable de valor , que se envía a la WriteToWeb función si la solicitud proviene de la Web, o WriteToPhone si la solicitud proviene de un teléfono.
Nota. Incluso si nunca has mirado Python u otro código de programación, usted puede encontrar el ejemplo anterior poco legible de su experiencia con App Inventor. La línea «def obtiene_valor …» define un procedimiento, las líneas «value =» … están preparando el «valor» variable para algo, y el «si ..» declaraciones debería parecer familiar. Los conceptos fundamentales son los mismos, es sólo de texto en lugar de los bloques.
Para personalizar la plantilla, reemplace el código en negrita con cualquier cálculo que desee, siempre y cuando ese código coloca algo en la variable valor . A menudo, su API hará una llamada a otra API (esto se llama «ajuste» de una llamada, más específicamente, su obtiene_valor función hará que la llamada a otra API).
Muchas API son complicados, con cientos de funciones y los regímenes de autorización de usuario complejas. Otros, sin embargo, son bastante simples, y usted puede incluso encontrar ejemplos de código para acceder a ellos en la Web, como se verá en la siguiente sección.
Invocar la API de Finanzas Yahoo!
El Yahoo! Stocks API para App Inventor puede utilizarse mediante la modificación del código de la plantilla anterior con código que se encuentra a través de una simple búsqueda en Internet. Puesto que el objetivo estaba terminando el Yahoo! Stocks API para el uso de la aplicación Inventor, el desarrollador (Wolber) hizo una búsqueda en Internet de «Stocks Python API de Yahoo». Desde el .gummy-stuff.org/Yahoo-data.htm http://www sitio, se encontró con que una URL en el formulario :http://download.finance.yahoo.com/d/quotes.csv?f=sl1d1t1c1ohgv&e=.cs v & s = IBM
Estpo eberia devolve un archivo de texto con una sola cadena separada por comas de los datos. La URL anterior devuelve la cadena de texto:
«IBM», 140.85 «10/15/2010», «15:00», -0.65,142.10,142.10,140.60,4974553
Luego encontró algo de código Python para acceder a la API de Yahoo! Acciones en http://www .goldb.org / ystockquote.html. Con un poco de corte rápido y pegar y un poco de edición, el App Inventor wrapper API fue creado mediante la modificación de la plantilla de la siguiente manera:
def get_Value (auto, etiqueta):
# Necesidad de generar una cadena o una lista y enviarla a WriteToPhone / WriteToWeb
# Cuerdas varias palabras deben tener comillas delante y detrás
# Por ejemplo,
# Value = "\" "+ valor +" \ ""
# Llamar a la API de Yahoo Finance y obtener un identificador para el archivo que se devuelve
quoteFile=urllib.urlopen("http://download.finance.yahoo.com/d/quotes.csv?f=sl1d1t1c1ohgv&e=.csv&s="+tag)
line = quoteFile.readline () # sólo hay una línea de
splitlist = linea.split (",") # divide los datos en una lista
# Los datos tiene comillas alrededor de los objetos, por lo que los elimina
i = 0
mientras i <len (splitlist):
item = splitlist [i]
splitlist [i] = item.strip ('"') # elimina" en torno a las cadenas
i = i 1
valor = splitlist
si self.request.get ('fmt') == "html":
WriteToWeb (auto, etiqueta, valor)
más:
WriteToPhone (auto, etiqueta, valor)
El código en negrita llama a la API de Yahoo! dentro del urllib.urlopen llamada a la función (esto es una manera de llamar a las API del lenguaje Python). La URL tiene un parámetro, f , que especifica el tipo de datos de almacenamiento que desea (este parámetro es algo así como los parámetros crípticos requeridos por el API de gráficos de Google). Los datos devueltos por Yahoo! se pone entonces en la variable de la línea . El resto del código se divide los elementos a una lista, quita las comillas alrededor de cada artículo, y envía el resultado al solicitante (ya sea la interfaz web o una aplicación Inventor App).
Fuente aqui
Soloelectronicos.com 
Debe estar conectado para enviar un comentario.