Desarrollo rápido de aplicaciones moviles

abril 19, 2014junio 8, 2014soloelectronicos1 comentario

Introducción a MIT App Inventor 2

App Inventor es una herramienta basada en la nube creada por el MIT para la creación rápida de apliaciones móviles en Android , lo que significa que usted puede construir aplicaciones directamente en su navegador web para su dispositivo Android sin tener que escribir una sola linea de código en Java .

El sitio web de MIT ofrece todo el apoyo que necesitará a medida que aprenda cómo construir sus propias aplicaciones. El software de App Inventor, o «servicio» es aai2.appinventor.mit.edu .

Instrucciones de instalación:

Puede configurar la aplicación Inventor y empezar a crear aplicaciones en cuestión de minutos. El Diseñador y Editor de bloques se ejecutan ahora por completo en el navegador (también conocido como la nube) . Para ver su aplicación en un dispositivo mientras lo construye (también llamada «Testing en vivo»), tendrá que seguir los siguientes pasos :

Usted tiene tres opciones para configurar las pruebas en vivo, mientras se construye aplicaciones:

Opción uno – RECOMENDADO
Construir aplicaciones con un dispositivo Android y conexión WiFi (de preferencia):Instrucciones

Si está utilizando un dispositivo Android y tiene una conexión inalámbrica a Internet, usted puede comenzar la creación de aplicaciones sin necesidad de descargar ningún software en su ordenador. Usted tendrá que instalar la aplicación Companion App Inventor para su dispositivo. Elij Esta opción se recomienda encarecidamente

Sin duda si usted tiene una computadora, un dispositivo Android, y una conexión Wi-Fi, esta es la manera más fácil de probar sus aplicaciones.

Opción dos
¿No tienes un dispositivo Android? Utilice el emulador: Instrucciones

Si usted no tiene un dispositivo Android, usted tendrá que instalar el software en su ordenador para que pueda utilizar el emulador de Android en la pantalla. Elija la opción dos abajo.Si usted no tiene un teléfono Android o tableta a mano, puede seguir utilizando la aplicación Inventor. Tener una clase de 30 alumnos? Haga que trabajen principalmente en emuladores y compartir unos pocos dispositivos.

Tercera opción
No WiFi? Construir aplicaciones con un dispositivo Android y Cable USB:Instrucciones

Si usted no tiene una conexión inalámbrica a Internet, usted tendrá que instalar el software en su computadora de modo que usted puede conectar a su dispositivo Android a través de USB. Elija la opción de tres a continuación. La opción de conexión USB puede ser complicado, especialmente en Windows Algunos servidores de seguridad dentro de las escuelas y las organizaciones no permiten el tipo de conexión Wi-Fi es necesario. Si WiFi no funciona para usted, trate de USB.

Requisitos del sistema

  Nota: Internet Explorer no es soportado todavía.  Recomendamos Chrome o Firefox.

Ordenador y el sistema operativo

Macintosh (con procesador Intel): Mac OS X 10.5 o superior
De Windows: Windows XP, Windows Vista, Windows 7
GNU / Linux: Ubuntu 8 o superior, Debian 5 o superior

Navegador

Mozilla Firefox 3.6 o superior
Nota: Si está utilizando Firefox con la extensión NoScript, usted necesita dar vuelta a la extensión fuera. Ver la nota en la página de solución de problemas .
Apple Safari 5.0 o superior
Google Chrome 4.0 o superior
Microsoft Internet Explorer no es soportado

Teléfono o la tableta (o utilizar el emulador en pantalla)

Sistema operativo Android 2.3 («Gingerbread») o superior

Fuente aqui

Ejemplo avanzado con MIT App Inventor

abril 19, 2014junio 17, 2014soloelectronicos4 comentarios

En este post se va a mostar cómo se puede desarrollar una aplicación que te permite grabar la lista de direcciones y ver la dirección en Google Maps. También le mostrará cómo ver su ubicación actual en el mapa de Google

Este post presenta los siguientes aspectos:

Enumere manipulación – listas creación, añadiendo elementos a listas
ListPicker – añadiendo elementos a listas, ahorrando lista de datos
LocationSensor – detectar la ubicación actual para mostrar en Google Maps
ActivityStarter – se utiliza para la puesta en marcha de Google Maps para la dirección actual o predefinido
Mensajes mostrando – Notifier
TinyDB – guardar los datos en una base de datos persistente
Varios. – Manipulación de texto, la validación básica

Vamos a trabajar hacia el diseño que se muestra en la figura :

La siguiente figura muestra cómo los componentes están dispuestos en el editor de diseño. También muestra los componentes no visibles (por ejemplo, TinyDB, ActivityStarter, LocationSensor, notificador) que se utilizan en la aplicación.

Bloques

Definimos 2 variables globales.

tagAddress – una variable que es una constante y se utilizará, como una etiqueta, para almacenar y recuperar datos de la base de datos.
listLocations – una variable que se puede utilizar para almacenar y manipular lista de direcciones.

Ahora vamos a crear un procedimiento que se puede invocar cuando se inicia la aplicación (inicializado). El procedimiento establece el estado inicial de algunos de los componentes. Algunos de estos ajustes se podría haber hecho desde el editor de diseño, pero para fines de demostración y aclaración, estamos usando un procedimiento. En el procedimiento, también verificamos nuestra base de datos para averiguar si hay alguna direcciones almacenadas. Si no hay datos, a continuación, sólo tiene que utilizar una lista vacía.

Cómo agregar una nueva Direcciones

Utilizamos AddLocationButton añadir una nueva dirección, CancelButton para cancelar el proceso de agregar y LocationHelpButton que mostramos qué tipo de direcciones se pueden introducir. Los bloques de hacer estas acciones trabajan aquí:

Cuando se hace clic en AddLocationButton, hacemos nuestra entrada de datos de dirección visible (con arreglo pantalla), lo que permite al usuario introducir la dirección. Si el usuario hace clic en Cancelar, hacemos la disposición oculta de nuevo. Con este enfoque, mantenemos el simple pantalla y evitar el desorden.También proporcionamos el SubmitButton para permitir al usuario para indicar que quieren almacenar datos.

Cuando el usuario hace clic en SubmitButton, llevamos a cabo la validación básica para asegurar que los datos se ha presentado. Si la validación no pasa, se muestra un mensaje de error. De lo contrario, invocamos un procedimiento que anexa la nueva dirección a nuestra lista. También guardamos la lista actualizada en nuestra base de datos. Una vez que se agrega la dirección, nos escondemos nuestro acuerdo de nuevo. Los bloques siguientes muestran cómo se realiza esta lógica:

Selección de un Direcciones

Cuando el usuario hace clic en ListPicker1 ‘Seleccionar ubicación’ y selecciona una dirección, esta acción llama a los bloques a continuación:

Muestra la dirección en el dispositivo y permitir que el usuario pulse sobre ViewOnMapButton para ver los bloques de direcciones seleccionadas en el Google Map – ver la figura a continuación:

Cuando se hace clic en ViewOnMapButton, validamos para asegurar que una dirección que ya ha sido seleccionado. Si no es así, se muestra un mensaje de error. De lo contrario, se utiliza bloques de abajo para mostrar la dirección:

Los bloques anteriores se abrirán el mapa y la salida será como la imagen de abajo:

Viendo ubicación actual en el mapa

Hemos caído en un botón, MyLocationButton ‘Mi ubicación en el mapa «que se puede hacer clic para ver la propia ubicación actual. Se utilizará

Descargar Código Fuente

Si desea trabajar con este ejemplo en App Inventor, descargar el código fuente

External Links icon

de su equipo, a continuación, abra la aplicación Inventor, haga clic enProyectos, seleccione Importar proyecto (. aia) de mi computadora … y seleccione el código fuente que acaba de descargar.

 Agradecemos  a M. Hossein Amerkashi para el desarrollo del código prasentado . Visite el blog de Hossein para saber más sobre él y sus materiales de apoyo de la aplicación Inventor.

Ejemplo manejo request con App Inventor

abril 19, 2014junio 13, 2014soloelectronicosDeja un comentario

Al igual que usted puede acceder a páginas Web desde el teléfono – por ejemplo, para buscar un precio de las acciones – por lo que puede App Inventor. Esta aplicación permite al usuario introducir un símbolo de cotización, luego mira el precio de la acción en Yahoo! Finance y muestra el precio por teléfono.

En este post se supone que está familiarizado con los conceptos básicos de la aplicación Inventor – utilizando el Diseñador de componentes para construir una interfaz de usuario y utilizando el Editor de bloques para especificar controladores de eventos. Si usted no está familiarizado con los conceptos básicos, intente pasar a través de algunos de los tutoriales básicos antes de continuar.

En primer lugar ,conéctese al sitio Web App Inventor y empezar un nuevo proyecto. Nombre que StockQuotes, y también le da título a «Cotización de Acciones» de la pantalla.Abra el Editor de bloques y conectarlo al teléfono.

Para configurar los componentes,utilice el diseñador de componentes para crear la interfaz de usuario. Cuando haya terminado, debería parecerse a la siguiente imagen. Instrucciones adicionales están por debajo de la imagen.

Hecho esto ,cree los siguientes componentes arrastrándolos desde la paleta en el Visor.

Tipo de componente	Grupo de paletas	Lo que usted lo nombra	Propósito de componentes
TextBox	Interfaz de usuario	StockSymbolTextBox	Cuando el usuario entra en el símbolo de cotización
Botón	Interfaz de usuario	GetQuoteButton	Para solicitar la cotización de bolsa
Etiqueta	Interfaz de usuario	ValueLabel	Para mostrar la cotización de bolsa
Web	Conectividad	Web1	Solicitar y recibir la cotización de bolsa

Seguidamente con las propiedades predeterminadas a excepción de los siguientes cambios:

Componente	Acción
StockSymbolTextBox	Establezca su propiedad Hint «Introducir un símbolo de cotización».
GetQuoteButton	Establezca su propiedad Text en «Obtener Cotización».
ValueLabel	Desactive su propiedad Text.

El API Finanzas Yahoo!

Muchos de los servicios web ofrecen un interfaz del programador de aplicaciones (API) para los desarrolladores para que sus programas para acceder al servicio. Algunas maneras de descubrir las API son a través de la página web http://programmableweb.com o simplemente haciendo una búsqueda en Internet para el nombre de servicio y el «API».

La API de Yahoo! Finanzas está documentado en detalles sangrientos en http://www.gummy-stuff.org/Yahoo-data.htm . Los aspectos más destacados son que usted puede conseguir el último precio de la acción con el símbolo «GOOG», por ejemplo, con la URL http://finance.yahoo.com/d/quotes.csv?f=l1&s=GOOG

.La sección «f = l1» (letra minúscula L, seguido por el número 1) dice nos gustaría que el último precio, y la sección «s = GOOG», dice nos gustaría información acerca de las acciones cuyo símbolo es «GOOG» . El resultado se devuelve en valores separados por comas (CSV), que usted puede estar familiarizado con las hojas de cálculo. Dado que sólo un valor se devolverá a nuestra consulta, el resultado será un número viejo y simple, como «511.5», sin ninguna coma. (Las comas se utilizaría si lo solicitamos múltiples piezas de datos de Yahoo!, como el nombre de la empresa y el volumen de comercio diario.)

Añadir comportamientos a los Componentes

Los bloques para hacer la solicitud web se muestran aquí y se detallan a continuación:

Tipo de bloque	Cajón	Propósito
GetQuoteButton.Click	GetQuoteButton	Manejar un clic del botón «Get Quote».
establecer Web1.Url a	Web1	Especifique la dirección URL a la solicitud.
unirse	Texto	Concatenar las partes de la dirección URL.
«» ( http://finance.yahoo.com/d/quotes.csv?f=l1&s = External Links icon )	Texto	Especifique la primera parte inmutable de la URL.
StockSymbolTextBox.Text	StockSymbolTextBox	Obtener el símbolo de la acción en el cuadro de texto.
llamar Web1.Get	Web1	Hacer la solicitud Web.

El significado es: Cuando se hace clic en GetQuoteButton:

Construir URL del componente Web concatenando » http://finance.yahoo.com/d/quotes.csv?f=l1&s =
External Links icon

«(que debe copiar y pegar en el bloque de texto) y el símbolo que se introdujo por el usuario (StockSymbolTextBox . Texto).
Solicite la página especificada por el URL. (Esto es como pulsar retorno después de introducir una URL en su navegador web.)

Cuando la respuesta a la solicitud Web llega, el evento Web.GotText se eleva con cuatro parámetros (sólo algunos de los cuales vamos a utilizar en esta aplicación):

url: la URL de la solicitud original (lo cual es útil si las solicitudes se hacen con muchas URLs diferentes).
responseCode: el código de estado HTTP , que indica si la solicitud Web sucedió o cómo falló; por ejemplo, 200 significa que la solicitud se realizó correctamente, 404 que la página no se ha encontrado, etc
responseType: el tipo MIME de la respuesta, como por ejemplo «text / csv» en esta aplicación, «image / jpeg», etc
responseContent: los datos que se devuelven, como «511.5».

Aquí hay una imagen y la tabla de los bloques que necesita para crear:

Tipo de bloque	Cajón	Propósito
Web1.GotText	Web1	Especifique qué hacer cuando la respuesta vuelve de la web.
Si, pues,	Control	Proporcionar un comportamiento diferente dependiendo de si la solicitud se realizó correctamente. Utilice el mutador para agregar una sentencia else.
conseguir responseCode	Variables	Obtiene el código de respuesta devuelto por la solicitud web, que …
= (Igual) bloque	Lógica	… Está marcada por la igualdad con …
número (200)	Matemáticas	… 200, el código para las respuestas de web válidos.
establecer ValueLabel.Text a	ValueLabel	Mostrar el resultado en la pantalla.
unirse	Texto	Construir el resultado concatenando …
«» («Valor actual»)	Texto	… El texto «Valor actual:» y …
get responseContent	Variables	Obtiene el valor devuelto por la web.
establecer ValueLabel.Text a	ValueLabel	Mostrar un mensaje de error.
«» («Error al obtener Cotización»)	Texto	El mensaje de error

He aquí una descripción del comportamiento del bloque:

Si el código de respuesta indica que la solicitud Web sucedió (= 200), establece la etiqueta para la concatenación de «valor actual» y los datos devueltos (por ejemplo, 511.5).
De lo contrario, establecer la etiqueta de «Error al obtener cotización de bolsa».

Si desea trabajar con este ejemplo en App Inventor,pude descargar el código fuente (External Links icon de su equipo, a continuación, abra la aplicación Inventor, haga clic enProyectos, seleccione Importar proyecto (. aia) de mi computadora … y seleccione el código fuente que acaba de descargar.)