Desarrollo rápido de aplicaciones moviles

App Inventor es una herramienta basada en la nube creada por el MIT para la creación rápida de aplicaciones 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 software de App Inventor, o “servicio” es aai2.appinventor.mit.edu .


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

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


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

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.


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:

  1. 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).

  2. 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):

  1. url: la URL de la solicitud original (lo cual es útil si las solicitudes se hacen con muchas URLs diferentes).
  2. 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
  3. responseType: el tipo MIME de la respuesta, como por ejemplo “text / csv” en esta aplicación, “image / jpeg”, etc
  4. 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:

  1. 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).
  2. 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.)