Crear una base de datos Web (Python 2.7)


Estas instrucciones son para la creación de una base de datos utilizando TinyWebDB Python2.7 y Google App Engine( este último el servicio PaaS de Google) .
Dado que  Python 2.5 está obsoleto en App Engine, estas instrucciones  que se basan en Python 2.7  y  el código de ejemplo son la mejor manera de empezar
TinyWebDB es un componente de App Inventor que le permite acceder a la web desde una aplicación para Android. Usted puede utilizar TinyWebDB para acceder a una fuente de datos (API) o para almacenar los datos de la aplicación de forma persistente en una base de datos web.
Estas notas le indican cómo hacer el último creado una base de datos web, y ponerlo en la nube utilizando el servicio App Engine gratuito de Google.
Con el código de ejemplo proporcionado aquí, usted puede configurar una base de datos web que se aloje  en los servidores de Google en cuestión de minutos, y usted no necesita ser un programador para hacerlo.
Tenga en cuenta que la aplicación App  Inventor también proporciona un componente TinyDB accediendo a datos directamente en el teléfono siendo fácil de usar. TinyWebDB sólo es necesario si los datos necesitan ser compartidos entre los teléfonos y aplicaciones (por ejemplo, aplicaciones sociales, juegos multi-jugador).
Por defecto, los TinyWebDB almacena componentes de datos en un servicio de prueba proporcionado por la aplicación Inventor, http://appinvtinywebdb.appspot.com/ . Este servicio es útil para las pruebas, pero es compartido por todos los usuarios de App Inventor, y tiene un límite de 1.000 entradas. Si usted utiliza, sus datos serán sobrescritos con el tiempo.
Para un ambiente realo, tendrá que crear un servicio web personalizado que no se comparta con otras aplicaciones y programadores de App Inventor. Usted no tiene que ser un programador para hacerlo, sólo tiene que seguir las instrucciones a continuación y usted tendrá su propio servicio en cuestión de minutos.

Para crear su propio servicio Web, siga estas instrucciones:

  • Descargue App Engine para Python en http://code.google.com/appengine/ .Asegúrese que descargue el SDK de App Engine para Python. Después de instalarlo, ejecute el GoogleAppEngineLauncher haciendo clic en su icono.
  • Descargue esta muestra de código de base de datos web . Se trata de un archivo zip que contiene el código fuente de su servicio de base de datos web a medida
  • Descomprimir el archivo zip descargado. Se creará una carpeta con el nombre appinventordb. Usted puede cambiar el nombre si lo desea.
  • En el GoogleAppEngineLauncher, seleccione Archivo | Agregar aplicación existente. Vaya a establecer la ruta a la carpeta appinventordb simplemente que  ha descomprimido. Luego haga clic en el botón Ejecutar. Esto lanzará un servicio web de prueba que se ejecuta en el equipo local.
  • Este código está configurado para funcionar con App Engine usando Python 2.7, así que tendrá que tener instalado  Python 2.7 en el equipo y asegúrarese de que App Engine está configurado para usarlo (en App Engine Lanzador, seleccione Preferencias y luego poner en el camino la ruta hacia Python2.7)
  • Puede probar el servicio abriendo un navegador e  ingresando  “localhost: 8080” como la dirección URL (el número de puerto puede ser algo diferente de 8080, comprobar los registros). Verá la interfaz de la página web para su servicio web.El objetivo final de este servicio es  comunicarse con una aplicación móvil creada con App Inventor. Pero el servicio proporciona una interfaz de página Web para el servicio para ayudar a los programadores con la depuración. Puede invocar las operaciones get y post a mano, ver las entradas existentes, así como eliminar entradas individuales
  • Su aplicación no está aún en la web, y por lo tanto aún no puede acceder a una aplicación App Inventor. Para llegar allí, tiene que subirlo a los servidores de Google App Engine.
  • En  GoogleAppEngineLauncher, seleccione Panel. Ingrese su información de cuenta de Google y usted será llevado a un panel de control de App Engine.
  • Elija Crear una aplicación. Tendrá que especificar  identificador único global para su aplicacion. Recuerde que el identificador de aplicación, ya que lo necesitará más adelante. Proporcione un nombre a su aplicación y haga clic en Crear solicitud a presentar. Si el identificador es único, ahora tendra una nueva aplicación, vacía en los servidores de Google.
  • Abra un editor de texto del equipo local y abra el archivo  app.yaml dentro de la carpeta appinventordb qeu ha descomprimido. Modifique la primera línea para que la aplicación coincide con el identificador de la aplicación se establece en Google.
  • En GoogleAppEngineLauncher, seleccione Desplegar y siga los pasos para implementar su aplicación.
  • Prueba para ver si su aplicación se está ejecutando en la web. En un explorador, introduzca myapp.appspot.com,  sustituyendo  logicamente  el identificador de la aplicación de “frontend”. La aplicación debe ser la misma que cuando se ejecutó en el servidor de prueba local.,sólo que ahora, está en la web y se puede acceder a él desde su App Inventor para aplicación Android.

Aplicaciones App Inventor Cliente

Una vez que usted tiene una “Inventor compatible App” base de datos web, puede crear aplicaciones Inventor de la aplicación que accedan al mismo. Para la muestra que acaba de crear, haga lo siguiente:

  • Arrastre en un componente TinyWebDB en el Diseñador de componentes.
  • Modifique la propiedad ServiceURL del predeterminadohttp://appinvtinywebdb.appspot.com/ a la URL de su servicio.
  • Cualquier operación StoreValue (bloques) almacenará los datos a su servicio, y cualquier operación GetValue recuperará de su servicio.

Aquí hay algunos bloques que almacenan y recuperan datos:

Fuente aqui

Como se programan apps moviles con MIT App Inventor (bloques lógicos)


App inventor es un framework creado inicialmente por el MIT (Instituto tecnológico de Massachusetts)  siendo adoptado por google, para que cualquier persona con interés pueda crearse su propia aplicación movil, ya sea para su empresa, para su casa o por otros interéses.

Para  crear una aplicación con app inventor hay que realizar tres pasos:

  • El diseño “estetico ” de la aplicación , en la que se seleccionan los componentes para su aplicación( botones,cajas de texto,imágenes,etc).
  • El editor de bloques  , donde se  escogen los bloques  lógico que  sean necesarios según la aplicación que tenga pensada de hacer.
  • Desplegar la app para su prueba en el terminal o en el emulador

Gracias al framework  App inventor, se pueden  crea  app moviles  sin conocimientos de programación  esplicitos pues  este hace la programación móvil sencilla y al alcance de cualquiera.

Casi cualquier tipo de aplicación se  puede crear con App Inventor (todo depende de las ganas y empeño que le pongas)  por ejemplo   puede crear una app android para su empresa o negocio   (App inventor es fenomenal para este tipo de aplicaciones)  y cuando este lista ,puede subirla  a Google Play como  con cualquier otro tipo de programación y ademas  obtener ingresos  si la pone  pago o incluye publicidad  usando los principales métodos de monetización como, Admob, leadbolt, mobpartner.

 

 

A continuación estos  son los principios de la programación  del MIT App Inventor  que vamos a tratar en este post:

1-Comportamiento de eventos

 ¿Cómo se programa el comportamiento evento de respuesta de una aplicación?Para aclararlo o se verán los siguientes ejemplos: 

  •  ¿Cómo convertir un botón rojo cuando un usuario hace clic en él?
  • ¿Cómo hablar cuando el usuario agita el teléfono?

2-Condicional (if) 

¿Cómo se programa una aplicación para tomar decisiones?Para aclararlo o se verán los siguientes ejemplos:

  • ¿Cómo iniciar y pausar un archivo de sonido cuando el usuario hace clic en un botón?
  • ¿Cómo se auto-responde a una “WHERE” texto de una persona en particular?

3-Incrementar un Valor:

¿Cómo añadir una a algo en la memoria de la computadora? Para aclararlo o se verán los siguientes ejemplos:

  • ¿Cómo se cuenta el número de veces que un botón se ha hecho clic?
  • ¿Cómo se cuenta atrás desde 10?

4-Dibujo:

¿Cómo dibujar formas e imágenes?Para aclararlo o se verán los siguientes ejemplos:

  • ¿Cómo se crea un lienzo de dibujo?
  • ¿Cómo se dibuja un círculo en 10,10?
  • ¿Cómo se muestra una imagen en el centro del lienzo?

5-Variables :

¿Cuándo se necesita :definir una variable y cómo hacerlo?Para aclararlo o se verán los siguientes ejemplos:

  • ¿Cómo se hace para que cada vez que el usuario hace clic en un círculo más grande se dibuja?
  • ¿Cómo se hace una bola para ir y venir?

6-Localizacion y Ubicación : 

¿Cómo sabes dónde estás?Para aclararlo o se verán los siguientes ejemplos:

  • ¿Cómo se puede determinar la latitud, longitud y dirección de la calle?
  • ¿Cómo se determina lo lejos que están de otro lugar?

7-Procesamiento de la lista (por lotes) :

¿Cómo se hace algo para todos los elementos de una lista?Para aclararlo o se verán los siguientes ejemplos:

  • ¿Cómo se envía un texto a una lista de tus amigos?
  • ¿Cómo añadir una lista de números?

8-Lista Transversal (dirigido por el usuario) :

¿Cómo paso a través de una lista basada en eventos iniciados por el usuario?Para aclararlo o se verán los siguientes ejemplos:

  • ¿Cómo crear un pase de diapositivas de modo que el usuario hace clic para ir a la siguiente imagen?
  • ¿Cómo agregar un botón anterior para hacer la presentación de diapositivas ir hacia atrás?
  • ¿Cómo se hace eso por lo que el pase de diapositivas es de nuevo al frente?

9-Agregar elementos a una lista :

¿Cómo se puede grabar información en una lista?Para aclararlo o se verán los siguientes ejemplos:

  • ¿Cómo se puede grabar notas de entrada por el usuario?
  • ¿Cómo grabar los números de teléfono de los textos entrantes?

10-Persistencia :

¿Cómo grabar datos de forma constante?Para aclararlo o se verán los siguientes ejemplos:

  • ¿Cómo se graba un mensaje de forma persistente-a salir un texto auto-respuesta?
  • ¿Cómo persistentemente grabar notas ingresadas por un usuario?

11-Actividad temporizado :

¿Cómo se puede repetir una acción, haciendo una pausa entre cada iteración?Para aclararlo o se verán los siguientes ejemplos:

  • ¿Cómo se juega un sonido cada segundo?
  • ¿Cómo se mueve una nave espacial facilidad por la pantalla?

¿Cómo iniciar y detener una actividad programada?Para aclararlo o se verán los siguientes ejemplos: 

  • ¿Cómo iniciar y detener la reproducción repetida de un sonido?
  • ¿Cómo se inicia una nave espacial cuando el usuario habla, y lo detenga cuando el usuario agita el teléfono?

12-Listas temporizadas :

¿Cómo se procesa cada elemento de una lista, haciendo una pausa en el medio?Para aclararlo o se verán los siguientes ejemplos:

  • ¿Cómo se juega una lista de las notas musicales?
  • ¿Cómo se inscribe la palabra “código” usando lenguaje de señas americano?

13-Procedimientos :

¿Cómo y por qué debería definir un procedimiento?Para aclararlo o se verán los siguientes ejemplos:

  • ¿Cómo codificar un procedimiento para visualizar una lista?
  • ¿Cómo codificar un procedimiento para visualizar cualquier lista?
  • ¿Cómo codificar un procedimiento para visualizar cualquier lista en cualquier etiqueta?

1-EVENTOS

Cómo se programa el comportamiento evento de respuesta de una aplicación?

Piense en una aplicación como una máquina de respuesta a eventos. El usuario hace clic en un botón, la aplicación responde. Un texto entra, la aplicación envía una respuesta automática. Un platillo volante golpea un asteroide, que explota. Su trabajo como programador es programar dichos eventos-respuestas. En App Inventor, lo hace directamente  el código es esencialmente un conjunto de eventos-respuestas, de los bloques cuando-do. Echa un vistazo a las siguientes muestras:

Ejemplo 1. ¿Cómo convertir un botón rojo cuando el usuario hace clic en él?

OK, esto es una aplicación muy tonto, pero no nos llevará a empezar. La aplicación aparece y hay un botón gris. Cuando los toques de usuario (clics) el botón, los cambios de color del botón a rojo. El clic del botón, Button1.Click, es un acontecimiento, algo que le puede pasar a la aplicación. El oro al bloqueButton1.Click se denomina-controlador de eventos. Los bloques dentro de él son la respuesta al evento.conjunto significa cambiar algo, en este caso, cambie BackgroundColor del botón en rojo. Los bloques, en su conjunto, se especifica que cuando el usuario hace clic en el botón que debe ponerse en rojo

 

Ejemplo 2¿Cómo se dice “estoy temblando” cuando el usuario agita el teléfono?

 

Esta aplicación tiene dos componentes, una AccelerometerSensor y una TextToSpeech. Cuando el usuario se sacude el teléfono o la tableta, el AccelerometerSensor detecta el evento y el controlador de eventos cuando AccelerometerSensor1.Shaking se dispara. El componente TextToSpeech está llamada a llevar a cabo la respuesta de hablar las palabras “estoy temblando”.

 

2-BUCLES  

Condicionales: ¿Cómo se programa una aplicación para tomar decisiones?

Con App Inventor, se pueden programar controladores de eventos ( como una aplicación debe responder a algo así como el usuario hace clic en un botó)n. Pero a veces una aplicación no debe responder a un evento al mismo tiempo todos. Aquí es donde si los bloques, conocidos como “condicionales”, llegada a tierra permiten la aplicación para tomar decisiones y forman la base de la inteligencia artificial.

 

Ejemplo 1. ¿Cómo iniciar y pausar un archivo de sonido cuando el usuario hace clic en un botón?

Este comportamiento de la Tengo una aplicación Sueño ilustra la forma fundamental de que una aplicación toma decisiones. Hay un botón con la imagen de Martin Luther King en él. La acción tomada cuando se hace clic en el botón no siempre es el mismo. Si el archivo de sonido (el discurso de Martin Luther King) está jugando, debe ser pausado. Si no está jugando, debe ser iniciado. El bloque if-else se utiliza para ramificar basado en la situación. Se comprueba la propiedad isPlaying del componente Player.Si bien es cierto, detiene la voz. Si es falsa (lo demás), el discurso es (re) inicia.

 

Ejemplo 2. ¿Cómo se auto-responde a una “WHERE” texto de una persona en particular?

Si su hijo o amigo deja esta aplicación en ejecución, siempre se puede saber dónde están enviando una “WHERE” texto a ellos. Este código ilustra una compleja si-test, uno con una “y” cláusula, ya que debe probar que tanto el remitente es un número de teléfono particular y el texto enviado fue “WHERE”. Si ambos son verdaderos, un texto de respuesta automática y se envía de nuevo al número de teléfono.

 

 

 

 

3-VARIABLES

¿Cómo se puede incrementar una propiedad de variable o componente?

Propiedades de los componentes y variables se denominan células de memoria, algo así como las celdas de una hoja de cálculo. Vamos a usar este tipo de células de memoria para hacer cosas como mantener el marcador de un juego o grabar la ubicación de un ImageSprite.

A menudo, es necesario cambiar el valor almacenado en una celda de memoria. Su sencillo pensar en el establecimiento de la puntuación de un juego de 5, o algún otro número fijo, pero ¿cómo se establece la puntuación en relación a su valor actual, por ejemplo, cómo se realiza la programación de manera que la puntuación se convierte en uno más? La siguiente ejemplos demostrarán esta actividad fundamental deincrementar una variable.

Ejemplo 1. ¿Cómo se cuenta el número de veces que un botón se ha hecho clic?

En este juego muy tonto, las puntuaciones de los usuarios un punto haciendo clic en un botón. Cuando el botón etiquetado como “Marca un punto” se hace clic, el ScoreLabel (mostrando 0 arriba) cambia a 1. Si se vuelve a hacer clic, se cambia a 2, y así sucesivamente. Estos son los bloques para este comportamiento:

Los bloques pueden ser confusas, en un principio, pero la comprensión de ellos es una clave para entender cómo funciona la computación. En pocas palabras, los bloques pueden leerse como: “cuando se hace clic en el botón, cambiar ScoreLabel.Text a su valor anterior + 1

Pero vamos a examinar más de cerca los bloques para que realmente entienda lo que está pasando. “Set” significa “cambio”, por lo que los medios de bloque, de color verde oscuro a la izquierda, “cambiar el texto de la ScoreLabel”.

El bloque verde más claro con la etiqueta “ScoreLabel.Text” es un bloque de “obtener”. “Get” quiere decir que ir a buscar en una celda de memoria y ver lo que hay. La primera vez que se hace clic en el botón, el “get” devuelve el valor inital de 0, por lo que 0 +1 = 1 se establece en ScoreLabel.Text (y 1 aparece en la interfaz de usuario). La segunda vez que se hace clic en el botón, el valor actual de ScoreLabel.Text es 1, por lo que 1 +1 = 2 se coloca en ScoreLabel.Text.

Puede ayudar a darse cuenta de que los bloques son realmente ejecutados de derecha a izquierda. La aplicación evalúa primero la derecha del lado “+” de “conseguir” el valor actual en la etiqueta y añadir 1 a la misma. El de la izquierda es entonces realizado y el resultado de la “+” es “set” en la etiqueta.

 

 

Ejemplo 2. ¿Cómo se cuenta-atrás desde 10 y reproducir un sonido a 0.

Con la aplicación de cuenta regresiva, una etiqueta de muestra 10 para comenzar y luego comienza la cuenta atrás, 9,8,7 … hasta 0. Cuando se llega a 0, se reproduce un sonido. Estos son los bloques:LLa “cuando Clock.Timer” se activa periódicamente. La fila superior de bloques disminuyeCountLabel.Text -. El texto se ajusta a sí mismo menos 1 Así que la primera vez que los factores desencadenantes del temporizador, el texto se ajusta a 10-1 = 9, la segunda vez para 9-1 = 8, y así on.On cada iteración, la aplicación utiliza un bloque if para comprobar si la cuenta ha llegado a 0. Si es así, se reproduce el sonido y el temporizador de reloj está desactivado para detener la actividad.

 

4-GRAFICOS

¿Cómo se dibujan formas e imágenes en un lienzo?

 Ejemplo 1. ¿Cómo se crea un lienzo de dibujo?

El componente Canvas es un sub-panel dentro de su aplicación. Las lonas se utilizan para el dibujo y la animación – que su aplicación puede dibujar objetos, y le puede dar al usuario la capacidad de dibujar objetos.

Por lo general, usted quiere que su lienzo para llenar todo el ancho de la pantalla de la aplicación, por lo que establecer el ancho para llenar los Padres “, como en los bloques anteriores. Generalmente usted quiere tener otros componentes encima o por debajo, por lo que establece el Altura a un número fijo.

Una ubicación de un objeto en el lienzo se define con una X, Y valor en relación con la esquina superior izquierda del lienzo. X es la ubicación horizontal del objeto, siendo 0 la izquierda de las fronteras y X cada vez más grande como un objeto se mueve a de la derecha. Y es la posición vertical con 0 en el borde superior e Y cada vez más grande como un objeto se mueve hacia abajo.

Ejemplo 2. ¿Cómo se dibuja un círculo en 10,10?

Canvas tiene bloques de función para dibujar un círculo o una línea. El drawCircle tiene tres parámetros,x, y, y el radio. X es la ubicación horizontal, Y es la posición vertical, y r es el radio del círculo que se elaborará. Un valor x de 10 significa que el círculo se encuentra a 10 píxeles a la derecha del borde izquierdo del lienzo. A y-valor de 10 significa que el círculo se encuentra a 10 píxeles hacia abajo desde la parte superior del lienzo

Ejemplo 3. ¿Cómo se dibuja un círculo donde los toques de usuario

El evento Canvas.Touched se activa cuando los toques de usuario (clics) el lienzo. Tiene parámetros x e y que especifican la ubicación del contacto. El touchedSprite parámetro especifica si el contacto se produjo en una ImageSprite – no es importante para este comportamiento.Usted quiere dibujar el círculo en el lugar del contacto, de modo ratón sobre los parámetros x y y, agarrar obtener bloques para ellos, y conectarlos a las ranuras para x una y en el bloque drawCircle. Es un poco confuso porque los parámetros de evento Touched se nombran los mismos que los parámetros (slots) para la función drawCircle.


Ejemplo 4. ¿Cómo se mueve una imagen en el centro del lienzo en App Inventor 2?

Los bloques de la muestra localizar x ImageSprite1 en medio del lienzo con la x propiedades x Anchura y Altura. Tales referencias abstractas significan el código funcionará incluso si el lienzo cambia de tamaño.Como alternativa, puede colocar los números fijos en la X e Y de la MoveTo (de manera similar a cómo se utilizó 10,10 en el ejemplo anterior. ¿Sabes por qué medio se resta el ancho y la altura del sprite?Tenga en cuenta que no hay ningún bloque “DrawImage” como x drawCircle. En cambio, con el diseñador arrastra componentes ImageSprite x en un x lienzo y especificar el archivo de imagen (foto), que define su apariencia. No hay forma para crear dinámicamente sprites con los bloques, sólo se puede hacer de ellos (in) visible y localizarlos como en este ejemplo.

 

 

5-POSICIONAMIENTO

¿Cómo saber dónde estás?

El LocationSensor comunica con los satélites GPS y otros mecanismos para determinar la ubicación de su teléfono / tablet.

Ejemplo 1. ¿Cómo se puede mostrar su latitud, longitud y dirección?

El evento se desencadena LocationSensor.LocationChanged 1) cuando la aplicación se pone primero una lectura de los satélites GPS u otros mecanismos, y 2) cuando el teléfono o los cambios de ubicación de la tableta. Si usted está caminando alrededor, podría desencadenar muchas veces. Puedes controlar la frecuencia con LocationChanged se activa con las propiedades LocationSensor.TimeInterval yLocationSensor.DistanceInterval. El TimeInterval se establece en 60.000 ms, o 1 minuto, de manera predeterminada. Esto significa que LocationChanged sólo se activa de nuevo después de un minuto.En esta muestra, las lecturas de ubicación se muestran en las etiquetas. Latitud y longitud son los números, mientras que la propiedad currentAddress proporciona una dirección de calle de su ubicación actual. Al caminar alrededor, verá los números y cambio de dirección.

Ejemplo 2. ¿Cómo saber lo lejos que se está de un punto dado?

App Inventor no proporciona un bloque de “distancia” para calcular la distancia entre dos coordenadas GPS. Pero hay fórmulas matemáticas conocidas para aproximar una distancia tal entre dos puntos. La solución es crear su propio bloque – procedimiento – y enchufe en una de las fórmulas conocidas. La “distancia” procedimiento anterior se utiliza una fórmula de http://geokoder.com/distances . Una vez que tenga un procedimiento distancia, se puede llamar así, como en la fila inferior del controlador de eventosLocationChanged. Este ejemplo calcula la distancia desde su ubicación actual y el campus de la Universidad de San Francisco.

 

LISTAS

6-¿Cómo se hace algo para todos los elementos de una lista?

Listas de datos se encuentran en muchas de las aplicaciones. Cuando utiliza Facebook, por ejemplo, hay una lista de sus amigos, una lista de sus actualizaciones de estado, etc En su aplicación, usted puede realizar un seguimiento de sus amigos los números de teléfono, una lista de sus cuentas del pasado en un juego, o el número de millas que ejecutó cada día la semana pasada. Con casi cualquier software, es probable que haya listas de datos implicados.

App Inventor, como la mayoría de los idiomas, ofrece una manera de procesar los elementos de una lista, para realizar la misma operación en cada artículo. Con App Inventor, normalmente se utiliza una para cadabloque en la lista. Echa un vistazo a los siguientes ejemplos:

Ejemplo 1. ¿Cómo se envía un texto a una lista de tus amigos?

La lista phoneNumberList se define en la parte superior. Tiene datos “concretos” (por ejemplo, los tres números de teléfono ficticios). La mayoría de aplicaciones almacenan dinámica, los datos generados por los usuarios, pero para este ejemplo vamos a centrar en el procesamiento una vez que tenga una lista.Los bloques dentro de la de cada bloque se repiten para cada elemento de la lista phoneNumberListdado. En este caso, hay tres elementos, por lo que los tres bloques interiores se repitieron tres veces.Nueve bloques totales serán ejecutados (“ejecutado” es el término de la informática para la realización de la operación que los define en bloque. No se preocupe, nadie está siendo asesinado!). El texto “que le falta” será enviado a los tres números. La de cada uno en la lista se llama un “bucle”, porque la aplicación de bucles hasta la parte superior de la de cada uno después de ejecutar el bloque interior inferior. En la terminología de ciencias de la computación, decimos las iteraciones de aplicaciones a través de los artículos.El ítem parámetro definido en la de cada uno es un marcador de posición y siempre mantiene el elemento actual que se está procesando. La primera vez en el ciclo es “111-1111”. La segunda vez que a través de ella es “222-2222”, y la tercera vez que es “333-3333”. Así, todos los números se envían el mensaje.


 Ejemplo 2. ¿Cómo añadir una lista de números?

La lista de los números de este ejemplo es fijo, pero en general la lista sería de datos dinámicas, generadas por los usuarios, por ejemplo, en una aplicación de entrenamiento el usuario introduciría las millas que corrían cada día y los datos se almacenan en una lista.El para cada bloque en la lista se utiliza para recorrer los números. elemento es la variable de marcador de posición – posee el número actual cada vez que la fila de bloques en el que se ejecuta For cada uno. El primer elemento tiempo es 7, luego 3, luego 11, luego 5. El total variable se define para almacenar la suma en ejecución. En la primera iteración, total se establece en su valor anterior (0) más artículo, que es 7, por lo que se convierte en 0 7 = 7. En la segunda iteración, el total se establece en su valor anterior (7), además de elemento, que es 3, por lo que se convierte en 7 +3 = 10. Después de que el tercer total más iteración tiene 21 años y después de que el cuarto total de iteración es 26 y el foreach completa. Después de la de cada bucle, se muestra el total en una etiqueta (por lo que alguien va a ver los frutos del trabajo apps!).

 

 

 

7-Lista de usuarios de navegación: ¿Cómo paso a través de una lista de la información?

App Inventor proporciona una para cada bloque para procesar una lista de información de una sola vez. Pero lo que si usted tiene una aplicación, como una presentación de diapositivas, en la que el usuario controla el movimiento a través de la lista? Para programar este comportamiento, va a utilizar una variable índice para realizar un seguimiento de su posición en la lista. Echa un vistazo a los siguientes ejemplos:

Ejemplo 1. ¿Cómo se crea una presentación de diapositivas de modo que el usuario hace clic para ir a la siguiente imagen?

En este ejemplo, el usuario hace clic en un botón para ordenar a través de una presentación de diapositivas de fotos. Las fotos son en el pic1.jpg archivos multimedia, pic2.jpg y pic2.jpg, todos los cuales han sido cargados en la aplicación. El índice variable se define para realizar un seguimiento de la fotografía actual el usuario está viendo. Cuando el usuario hace clic en “Siguiente”, el índice se revisa para ver si el usuario ha ido demasiado lejos. Si el índice es menor que la longitud de la lista (3 en este caso), entonces el índice se incrementa y el siguiente archivo de imagen se coloca en Image1.Picture.Vamos a caminar a través de este ejemplo. Supongamos que pic1.jpg está mostrando para empezar.Cuando el usuario hace clic en “Siguiente”, el índice se revisa y es menor que la longitud de la lista (1 <3).Así índice se incrementa desde su valor inicial, 1, a 2, y se selecciona pic2.jpg y se muestra.La próxima vez que el usuario hace clic en “Siguiente”, el índice es del 2 por lo que sigue siendo inferior a 3, por lo que el índice se incrementa a 3 y el tercer cuadro, “pic3.jpg”, se muestra.Cuando “Next” se hace clic de nuevo, el índice es 3 por lo que el caso de prueba falla. Los bloques dentro del si no se ejecutan, así que no pasa nada. De hecho, el usuario puede seguir haciendo clic en “Siguiente” para siempre sin efecto.Una nota musical necesita tiempo para jugar.

Ejemplo 2. ¿Cómo agregar un botón anterior para hacer la presentación de diapositivas ir hacia atrás?

Esta muestra es similar a la “siguiente” código del botón anterior pero ahora los índices disminuciones variables y la presentación de diapositivas va hacia atrás. Los controles si-prueba si el índice es mayor que 1, porque si ya es 1, la primera imagen se muestra y no podemos ir más atrás.

Ejemplo 3. ¿Cómo se hace eso por lo que el pase de diapositivas es de nuevo al frente?

En este ejemplo, cuando el usuario hace clic en “Siguiente” y el último objeto ya está mostrando, el índice se vuelve a 1 y el primer elemento, “pic1.jpg”, se muestra de nuevo. Los bloques de conjunto Image1.Picture están fuera del bloque if-else, por lo que una imagen diferente siempre se muestra cuando “Next” se hace clic.

 

 

8-¿Cómo se puede grabar información en una lista?

Ejemplo 1. ¿Cómo se puede grabar notas de entrada por el usuario?

Este comportamiento ilustra los conceptos básicos de una toma de notas o Twitter como aplicación. En primer lugar, define una NoteList variable y inicializarlo al bloque de crear una lista vacía. Esto marca elNoteList variable como una lista de lo que puede poner los elementos en ella.Cuando el usuario entra en una nota en el NoteTextBox y hace clic en “Enviar”, agregar elementos a la lista que se llama para añadir la entrada del usuario hasta el final de la lista. NoteList se fija entonces enListLabel.Text para mostrarla al usuario, y la entrada del usuario en NoteTextBox se queda en blanco para prepararlo para la siguiente entrada.Nota: estos datos en esta muestra no es persistente, es decir, las notas introducidas por el usuario sólo se grabarán para la ejecución actual de la aplicación. Si ha detenido la aplicación y volver a abrirla, la lista de notas estaría vacía. Para aprender cómo grabar datos continuamente, consulte estas notas

Ejemplo 2. ¿Cómo se puede grabar los números de teléfono de mensajes SMS entrantes y luego llamar a uno al azar para decirles que han ganado un premio?

Esta aplicación es ideal para los concursos. Usted le pide a su audiencia en un texto que, a continuación, hacer clic en un botón para elegir un ganador y suena el teléfono de los ganadores!En primer lugar, definir un incomingTexts variables e inicializar al bloque de crear una lista vacía. Esto marca la variable como una lista para que pueda poner los artículos en ella.Cuando un texto se presenta en, Texting.MessageReceived se dispara. La aplicación comprueba en primer lugar para asegurarse de que el número no está ya en la lista. Si no lo es, se añade el número de la lista.Cuando esté listo, el usuario puede hacer clic en el botón PickWinnerButton.Click. En este controlador de eventos, elegir un artículo al azar está llamada a tomar un afortunado ganador y un componentePhoneCall se utiliza para llamar al número.

9-PERSISTENCIA

¿Cómo grabar datos de forma constante?

Al ingresar información en su página de Facebook o de otra aplicación, y que la información se guarda por lo que es allí la próxima vez que usted visita, se trata de datos persistentes. Lo contrario – los datos que “muere” cuando se cierra la aplicación – se llama datos transitorios. Los datos persistentes se almacenan en un sistema de base de datos o archivo, y no sólo en la memoria a corto plazo de la aplicación. App Inventor proporciona el componente TinyDB para el almacenamiento de datos en el teléfono o el almacenamiento persistente de la tableta. Echa un vistazo a estos ejemplos del uso de TinyDB para almacenar datos de forma constante:

Ejemplo 1. ¿Cómo se graba un mensaje de forma persistente-de salir para un SMS de texto auto-respuesta?

Esta muestra es de una aplicación “contestador texto máquina” que le permite grabar un mensaje para ser enviado en respuesta automática a los textos enviados a su teléfono. Cuando el usuario introduce un mensaje, hay que recordar constantemente lo que el usuario no tenga que escribirla de nuevo cuando la aplicación se cierra y re-lanzado (a menos que el usuario desea cambiar el mensaje de bienvenida).Cuando el usuario introduce un mensaje nuevo y haga clic en “Enviar”, el mensaje que se escriba se copia de OutgoingMessageTextBox en el OutgoingMessageLabel, que muestra el mensaje actual.Entonces TinyDB.StoreValue está llamado a recordar la entrada persistentemente – para grabar el mensaje que acaba de introducir en la base de datos. Los nombres de las etiquetas “mensaje” de la entrada en la base de datos y el valor almacenado es lo que introduce el usuario. La última fila de bloques dentro SubmitButton.Click sólo en blanco el OutgoingMessageTextBox lo que está listo para una nueva entrada.El almacenamiento de los datos es sólo parte de la ecuación – también es necesario para recuperar los datos, para llevarlo de la base de datos en la aplicación. En esta aplicación, los datos se recuperan en caso Screen.Initialize, que se activa cuando se abre la aplicación. La llamada TinyDB.GetValue pide la base de datos para devolver los datos con etiqueta “mensaje”. Si el usuario ha enviado algo que antes, se devolverá la entrada. Si no hay nada aún en la base de datos, TinyDB.GetValue devuelve el texto envalueIfNotThere (un mensaje por defecto).

Ejemplo 2. ¿Cómo se pueden  grabar notas introducidas por el usuario?

El usuario introduce una nota y haga clic en “Enviar”. En SubmitButton.Click, el elemento se agrega a la NoteList variable y entonces la lista, en su conjunto, se almacena en la base de datos con las “notas” de la etiqueta. La nueva lista se muestra en el cuadro de texto ListLabel y se queda en blanco.Cuando la aplicación se cierra y vuelve a abrir sus puertas, Screen.Initialize se dispara. TinyDB.GetValuese llama para recuperar la lista previamente almacenada en la base de datos. El resultado se coloca en la variable NoteList. Si no hay notas en la base de datos, por ejemplo, la primera vez que se utiliza la aplicación, a continuación, devuelve el valor TinyDB.GetValue valueIfTagNotThere, que se especifica como una lista vacía.

Información relacionada

Para estas muestras, los datos se almacenan directamente en el dispositivo por lo que es “local” en el dispositivo y en realidad para un solo usuario (por ejemplo, la toma de notas aplicación es para notas privadas). Cuando los datos está destinado a ser compartido entre múltiples dispositivos y usuarios, se requiere una base de datos de web.

Las muestras sólo proporcionan visualización de la lista rudimentaria – las listas se vierten en una etiqueta y por defecto que aparece en la forma: (item1 elemento2).

 

 

10-Actividad Programada

¿Cómo repetir una acción, haciendo una pausa entre cada iteración?

¿Cómo se programa el tiempo? ¿Cómo se programa la animación? Con muchos lenguajes de programación, conceptos como animación son empujados hacia atrás en el plan de estudios – que no podría llegar hasta un año o dos de los cursos. Con el enfoque basado en eventos de App Inventor, se puede explorar la actividad programada y la animación como un principiante. El componente de reloj de alto nivel sirve como un despertador, y utiliza su evento Timer para desencadenar la actividad programada. Echa un vistazo a los siguientes ejemplos:

Ejemplo 1. ¿Cómo se reproduce un sonido cada segundo?

El evento Clock.Timer cuando se activa repetidamente. Piense en ello como un reloj despertador. La propiedad Clock.TimerInterval, determina con qué frecuencia se reproducirá el sonido. Por defecto es 1000 milisegundos (1 segundo), así que si no lo cambia el sonido por encima jugará cada segundo.Puede establecer esta propiedad en el diseñador o con bloques.

Ejemplo 2.  ¿Cómo se puede reproducir un sonido cada cinco segundos en lugar de cada segundo? (¿Cómo se mueve una nave espacial facilidad por la pantalla?)

X de la nave espacial de coordenadas define su ubicación horizontal. En cada evento de temporizador, la coordenada X se incrementa y la nave espacial parece más a la derecha. Si la propiedadClock.TimerInterval se establece en el valor predeterminado de 1000 ms, entonces el barco se moverá cada segundo, un movimiento muy agitado. Normalmente, para este tipo de animación, deberá definir el intervalo del temporizador a algo así como 40 ms.Pregunta: Una “imagen en movimiento” es en realidad una secuencia de imágenes mostradas muy rápido. La velocidad de fotogramas de una imagen en movimiento es el número de imágenes (frames) se muestra cada segundo. Si establece el intervalo del temporizador de la nave espacial de 40 m, ¿cuál será la velocidad de fotogramas para su “película”? ¿Cuál es la velocidad de cuadro típico de una película que se ve en el teatro? respuesta


Nota: para el movimiento de sprites, puede utilizar el reloj interno del sprite en lugar de un componente de reloj separada (ver detalles)

¿Cómo iniciar y detener una animación?

Así como usted puede dar vuelta a un reloj de alarma y se apaga, puede activar el temporizador de la componente de reloj y se apaga. Echa un vistazo a los siguientes ejemplos:

Ejemplo 1. Cuando el usuario hace clic en un botón de inicio, comience a reproducir un sonido cada segundo. Al hacer clic en un botón de parada, pare la reproducción del sonido.

El reloj tiene una propiedad Clock.TimerEnabled. Cuando es verdadera, la alarma del reloj está en lo que el temporizador se activará. Cuando Clock.TimerEnabled se establece en false el cronómetro está inactivo.

Cuando el usuario hace clic en el botón de inicio, TimerEnabled se establece en true para desbloquear la situación. Un segundo más tarde, y cada segundo después, el evento cuando Clock.Timer disparará y el sonido se reproducirá. Cuando el usuario hace clic en “Stop”, el temporizador se desactiva y el sonido deja de reproducirse.

Ejemplo 2. Cuando el usuario habla, empezar a mover la nave espacial.Cuando el usuario se sacude el teléfono, detener la nave se mueva.

Usted necesita dos componentes adicionales, un SpeechRecognizer que puede reconocer cuando el usuario está hablando, y un AccelerometerSensor que detecta cuando el dispositivo está siendo sacudió.El controlador de eventos Screen.Initialize se activa cuando se inicia la aplicación. El bloqueSpeechRecognizer.GetText abre el reconocedor de voz por lo que está esperando a que el usuario diga algo. Cuando el usuario habla, se activa el controlador de eventos SpeechRecognizer.AfterGettingText.Aquí, usted establece Clock.TimerEnabled en true para el temporizador reloj comenzará el desencadenamiento y el sprite comenzará a moverse. Cuando el usuario sacude el teléfono,AccelerometerSensor.Shaking se activa, el temporizador se desactiva para el sprite se detiene, y laSpeechRecognizer.GetText se llama a la espera de la próxima vez que el usuario habla.1. ¿Cómo se puede reproducir un sonido cada cinco segundos en lugar de cada segundo?

NOTA  :La propiedad Clock.TimerInterval determina la frecuencia desencadena el evento Clock.Timer. De forma predeterminada, el intervalo del temporizador se establece en 1.000 ms, o 1 segundo. Si lo establece en 5000, el evento Clock.Timer activará cada 5 segundos.

11-PROCEDIMIENTOS

 

¿Cómo y por qué debería definir un procedimiento?

Un procedimiento es una secuencia con nombre de instrucciones (bloques). En la vida real, cuando le digo a mi hijo a “cepillarse los dientes”, lo digo en serio para él para llevar a cabo un montón de pasos detallados, como el acaparamiento de su cepillo de dientes, abrir la pasta de dientes, poniéndolo sobre el cepillo de dientes, etc “cepillarse los dientes” es un procedimiento, un nombre para una secuencia de instrucciones. En App Inventor, puede definir un procedimiento, colocar bloques en él, y luego se puede llamar desde cualquier parte de la aplicación.

Considere el código a la derecha. Ambos controladores de eventos tienen código para mostrar una lista.Cuando un usuario envía una nueva entrada (cuando SubmitButton.Click), el elemento se agrega a la lista y la lista se muestra. Cuando se inicia la aplicación (cuando Screen.Initialize), los datos se recuperan de la base de datos en la lista, y se muestra la lista. Los bloques para mostrar una lista son los mismos en los dos controladores de eventos.

Este código está maduro para la refactorización. Refactoring significa modificar el código para que sea más legible y fácil de mantener, desde la perspectiva de un programador – refactorización no cambia el comportamiento de la aplicación en todos.

Extracción de código duplicado es una forma común de refactorizar. La idea básica es que el software cambia mucho: los insectos se encuentran que tienen que ser fijo, especificaciones de cómo el software se debe comportar el cambio, y el código, sobre todo un buen código, a menudo reutilizados. Cuando se realizan cambios en el software, usted no quiere tener que encontrar y también cambiar un montón de “dependencias”, por ejemplo, otro código que hace lo mismo. Es mejor tener código que hace una cosa en particular en un lugar, un procedimiento, y llame a ese procedimiento de todos los lugares que más lo necesitan. Entonces, si el procedimiento tiene que ser cambiado, se cambia en un solo lugar.

En los bloques de la derecha, el código para mostrar una lista aparece en dos controladores de eventos.Podemos refactorizar definiendo un DisplayList procedimiento, moviendo los bloques comunes en él, a continuación, llamarlo desde los dos controladores de eventos:

Ejemplo 1. ¿Cómo se define un procedimiento que muestra los elementos de una lista?

El código para mostrar la lista se encuentra ahora en el procedimiento DisplayList, y ambosSubmitButton.Click y Screen1.Initialize llamar al procedimiento. El bloqueo de llamadas representa todos los bloques dentro de la definición del procedimiento. Llamar a un procedimiento significa saltar en los bloques dentro del procedimiento y ejecutarlas. Una vez que se ejecutan todos los bloques, el control del programa retrocede al bloque por debajo de la llamada. Cuando se hace clic en el SubmitButton, agregar elementos a la lista se llama y luego se hace la llamada a DisplayList. El control del programa salta al procedimiento donde ListLabel.Text se establece en la cadena vacía y la de cada bloque se ejecuta.Cuando el de cada uno termina, el control del programa retrocede hasta debajo de la llamada DisplayListdentro del controlador de eventos cuando SubmitButton.Click – TextBox1.Text se establece en la cadena vacía y TinyDB.StoreValue se llama.El comportamiento, desde la perspectiva del usuario es el mismo, pero el código es mejor desde la perspectiva de un programador en términos de mantenimiento. Con este código refactorizado, si se encuentra un error en el código de visualización de la lista, o si se decide la lista se debe mostrar de una manera diferente (por ejemplo, las comas en entre elementos en lugar de nuevas líneas), el código sólo tiene que ser cambiado en un solo lugar.El diseño de su aplicación con los procedimientos del ejemplo anterior refactors código existente. A medida que se familiarice con los procedimientos, usted comenzará a incluirlos desde el principio de su diseño process.You ‘ll empezar a pensar en términos de una arquitectura de software más grande que consta de controladores de eventos, los procedimientos y las llamadas entre ellos. Como usted está diseñando una aplicación, antes de arrastrar en un solo bloque, usted pensará de los bloques de construcción – los procedimientos – que usted necesita.

Ejemplo 2. ¿Cómo se define un procedimiento que puede mostrar cualquier lista?

Un parámetro es un procedimiento de información necesita para hacer su trabajo. Se define parámetros para un procedimiento de modo que se puede reutilizar más general. Esta versión de DisplayList se le ha dado una lista de parámetros de modo que se puede utilizar para mostrar cualquier lista enviada a él. En este caso, el NoteList variable se envía como parámetro, pero usted podría llamarlo de algún otro lugar en su aplicación con una lista diferente. Tenga en cuenta que el procedimiento DisplayList original específico para el NoteList variables – no se podía utilizar para mostrar otras listas.Hay una cuestión más con este procedimiento que hace que sea menos que óptimo para su reutilización.Este procedimiento muestra la lista que lo envió en una etiqueta específica, ListLabel. Si su aplicación tiene varias listas y etiquetas, usted quiere que su procedimiento DisplayList para trabajar de manera más general. Los bloques siguientes muestran cómo hacerlo:

Ejemplo 3. ¿Cómo se define un procedimiento que ayuda a mostrar cualquier lista en cualquier etiqueta?

En lugar de realidad que muestra una lista, el procedimiento hace el trabajo de conversión de una variable de lista en texto que se puede poner en cualquier etiqueta. El procedimiento es genérico – que toma cualquier lista y devuelve el texto, y no se refiere a ninguno de los componentes específicos. Cualquier código que llama a este procedimiento, por ejemplo, Screen1.Initialize, proporcionará la lista específica como un parámetro para listToText, y colocará el texto resultante en una etiqueta específica.

 

 

Fuente  aqui

Uso de MIT App Inventor a través de WIFI


 Gracias a la fantástica herramienta MIt app inventor es posible desarrollar apps para Android en la  nube sin sin necesidad de descargar nada a su ordenador  si su  teléfono o la tableta estan conectados por WiFi gracias al sitio  web:ai2.appinventor.mit.edu .

Para hacer pruebas en vivo en su dispositivo Android sólo tiene que instalar el Companion App Inventor MIT App en su teléfono o tableta Android. A continuación, abra el proyecto en App Inventor en la web , abra su dispositivo, y usted puede  empezar tanto a probar sus aplicaciones como a construirlas:

Los siguientes pasos le guiarán a través del proceso.


Paso 1: Descargar e instalar el Compañero MIT EA2 App en el teléfono.

Abra QR escáner de código de su dispositivo y escane el código QR en la parte inferior izquierda para descargar la Companion App desde Play Store. Si no puede utilizar la Play Store, utilice el código QR de la derecha para descargar el Companion App directamente a su teléfono.

Play Store

Recomendadas: Las actualizaciones automáticas

<APK archivo

Actualizaciones manuales requeridos

Lea este código QR ​​( o haga clic en este enlace ) para obtener la aplicación desde Play Store

Lea este código QR ​​( o haga clic en este enlace ) para descargar directamente la aplicación

Si usted necesita un escáner de código QR, puede obtener uno en la Play Store (por ejemplo, ZXing).

Después de la descarga, paso de que los las instrucciones para instalar la aplicación Companion a su device.You necesitan instalar el Compañero MIT EA2 sólo una vez, y luego dejarlo en su teléfono o tableta para cada vez que utilice la aplicación Inventor. Nota: Si decide no ir a través de la tienda Play y en lugar cargar la aplicación directamente (también conocido como “carga lateral), tendrá que habilitar una opción en la configuración de su dispositivo para permitir la instalación de aplicaciones de” fuentes desconocidas “Para saber esto. establecer en las versiones de Android anteriores a la 4.0, vaya a “Ajustes> Aplicaciones” y luego seleccione la casilla junto a “Fuentes desconocidas”. Para los dispositivos con Android 4.0 o superior, vaya a “Ajustes> Seguridad” o “Pantalla Configuración> Seguridad y Lock “y luego seleccione la casilla junto a” Desconocidos “y confirme su elección.


Paso 2: Conecte el ordenador y el dispositivo a la red WiFi 

App Inventor le mostrará automáticamente la aplicación que está construyendo, pero sólo si su equipo (que se ejecuta la aplicación Inventor) y su dispositivo Android (que se ejecuta el Compañero) están conectados a la misma red WiFi. 


Paso 3: Abrir un proyecto de App Inventor y conéctelo a su dispositivo

Ir a App Inventor y abrir un proyecto (o crear uno nuevo). A continuación, seleccione “Conectar” y “Companion AI” en el menú superior:

Aparecerá un cuadro de diálogo con un código QR. En el dispositivo, inicie la aplicación Companion MIT App justo como lo haría cualquier aplicación. Luego haga clic en el botón “Escanear código QR” y escanear el código en la ventana de la aplicación Inventor:

A los pocos segundos, debería ver la aplicación que está construyendo en su dispositivo. Se actualizará a medida que realiza cambios en su diseño y bloques, una característica llamada “prueba viva”. Si tiene problemas para escanear el código QR, escriba el código que se muestra en el equipo en el área de texto en el compañero y elegir la opción “Conectar con el código”.


Solución de problemas:

Si su aplicación no aparece en el dispositivo, los problemas más probables son:

  • Es posible que tenga una versión obsoleta del Inventor Companion App. Descargue la ultima Companion App para App Inventor 2 de arriba.
  • El dispositivo no se puede conectar a wifi. Asegúrese de ver una dirección IP en la parte inferior de la pantalla AICompanion App en su teléfono o tableta.
  • El dispositivo no puede estar conectado a la misma red wifi que el ordenador. Asegúrese de que ambos dispositivos están conectados al mismo nombre de red wifi.
  • Tu escuela u organización puede tener protocolos de red en lugar de tal manera que la conexión wifi no está permitido. Si este es el caso, aún puede utilizar el emulador o puede utilizar un cable USB para conectar el dispositivo.  .

Desarrollo rápido de aplicaciones moviles


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

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.

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

Usando el 16×4 LCD: μLiquidCrystal


ET MF incluye soporte mejorado para interfaces gráficas. Hay algunas placas  con lcd integrado como el Tahoe II , ChipworkX o FEZ Cobra que tiene pantalla gráfica y puede ser manejado por las clases implementadas. .

Sin embargo, el más común entre los aficionados  son el display alfanumérico tradicional, especialmente de 16 caracteres por dos líneas “16×2”.

 Los LCDs de  16×2 son muy populares debido a que la forma de comunicarse es a través de un bus paralelo se puede utilizar con los viejos puertos LPT1 ( impresoras), que popularizó su uso muy bien permitir que un ‘emulación manual “del mensaje, o puede contener una gran cantidad de llaves y completamente repetir la introducción de datos para mostrar el mensaje en la pantalla LCD, hace un par de años
Una desventaja de la comunicación en paralelo es la cantidad de lineas de IO necesarias  ( ocho para ser exactos), y que es un problema cuando sólo tiene a su disposición (desafortunado Netduino usando un chip con 50 IO y sólo está disponible en el adaptador de 14 pines) de 14IO.
Otra desventaja importante es lo engorroso  que puede resultar el  quitar el panel de control LCD, por ser necesario pasar a la placa un cable de 5 pares (10 hilos) a la pantalla LCD.
Sin embargo en este artículo se he buscado una solución que satisficiera forma más general y con un menor costo en términos de aplicaciones de software. La mejor solución fue presentada por Pavel Bansky en su blog. Estos son dos artículos en los que el primer artículo se realizó señal de multiplexación análisis de la pantalla LCD para el uso en 3-hilos  y de acuerdo con un artículo asociado ha construido una aplicación que implica el hardware I ² C microcontrolador para reducir el costo del software.
Además de trabajo Pavel también tiene una excelente referencia en el Internet que es el diseño μLiquidCrystal Lo que comenzó como un proyecto de Szymon Kobalczyk de  y luego concretarse y ahora es un paquete completo de clases para los dispositivos tales como LCD y pantalla de la manipulación.

Prácticamentetodos los s LCDs populares sebasan  en elfamoso chip de Hitachi  HD44780 queademas conestecontroladorpermite lacomunicaciónparalela. El 16-pinconectorestándar en lalínea en la parte inferiorderecha de laesquinatablero LCDtambién esmuytípico ypuedeutilizar unacombinación deinformaciónparalela 8 de bits o 4 bits (pseudoserie), esdecir, el 16-pin 8 son parainformar de un feed lalógica, dos pines paraalimentar la luz defondo, elpoder y la terminal detierra de lapantalla ensí y de lacomunicación enserie de doscontactosascendió a 16 pins.

Las instrucciones para la escritura y la lectura es un estándar que Pavel Bansky demostró que es sencillo para multiplexar con registro de desplazamiento y poner el código en el Netduino.

Pavel utilizó el CMOS 4094 es el mismo que 74HC595 TTL que sólo se acepta como un archivo de valores de alto nivel por encima de 2,5 V que significa que usted puede colgar un 5V LCD directamente con Netduino de la IO y sin un circuito adicional sólo el registro de desplazamiento 74HC595.

Por otra parte, si desea utilizar una pantalla LCD de 3,3 V Restivo sólo hay que poner un separador hecho con un rango de 1.68 kOhms y 3,3 kOhm que el nivel de salida es de 3,3 V.

Pavel implementó el tratamiento en dos LCD papeles gemelos uno debajo del otro. La clase que en realidad está incluida en los códigos es LiquidCrystal y en un segundo nivel requerido ILiquidCrystalTransferProvider tratar con la interfaz de hardware para poder utilizar la misma clase de nuevo con los manipuladores de hardware diferente, ambos implementados por Pavel esGpioLiquidCrystalTransferProvider y HC4094 Szymon que en su mayor parte, procedió a llamar Shifter74Hc595LiquidCrystalTransferProvider, Szymon porque estaba usando el 74595 para conectar la pantalla LCD. tiene otras cosas implementas relacionas con algunas tarjetas de expansión para LCD equipado con un chip de comunicación, ya que estamos en Brasil, el más es la comunicación en serie se hace con una tarjeta de expansión con PIC16F628 o algo así. Las implementaciones realizadas por Pavel y por Szymon incluyen chips de soporte MCP23008 yPCF8574P una clase llamada BaseShifterLiquidCrystalTransferProvicer. ‘s Szymon en su blog mencionó la comunicación SPI a hablar como LCD, una alternativa si se carga el bus I ² C a pesar de que no he visto manera en que el tratamiento se produce la comunicación SPI.

El SPI se encuentra disponible a través de los pins Netduino 11 (MOSI), 12 (MOSO) y 13 (SPCK) y cualquier otro pasador para seleccionar el esclavo deseado. Esta implementación de Szymon parte de μLiquidCrystal, en realidad no lo probó, pero vale la pena echar  un vistazo.

 

 

Con respecto al circuito, vale la pena una cierta consideración. La Primera refiere a un transistor NPN (BC548  pero se he usado el 2N2222 es el equivalente americano) que por lo general surge para controlar la luz de fondo de la pantalla LCD a través de un registro de desplazamiento de salida para que pueda encender y apagar la pantalla LCD en el Código si desea guardar energia.

A otra es controlar la luminosidad de la pantalla LCD se puede hacer mediante la colocación de una olla de 47Kohms la 2Kohms, o no quieren simplemente configurar y listo para poner un divisor resistivo. ‘s Pavel creado una biblioteca (que como tava viejo tuvo que . recrearlo en NETMF 4.2) llamado Bansky.SPOT.LCD donde existen métodos y ITransferProvider SendByte . capa utilizada para interactuar con otros El código de prueba es la siguiente:

 

> / / Crear instancia de registro de desplazamiento
/ / (Compatible con los 74.595!)
Shifter HC4094 = nueva HC4094 (Pins.GPIO_PIN_D0,    
                                Pins.GPIO_PIN_D2,
                                Pins.GPIO_PIN_D1,
                                false );         
/ / Crear una nueva instancia LCD
LCD4Bit lcd = nueva LCD4Bit (shifter);
/ / Activar la visualización, gire de nuevo la luz en,
Gran espectáculo cursor / / Ocultar cursor pequeño, parpadeando
lcd.Display ( verdadero , verdadero , falso , verdadero );
/ / Borrar la ventana
lcd.Clear (); 
/ / Escribir el mensaje en primera línea
lcd.Write ( "Victor M. >>>>>>>>" );
/ / Mueve el cursor a 2 ª línea
lcd.SetPosition (40);         
/ / Escribir en el segundo Line
lcd.Write ( "Q2 NETMF." );
Thread.Sleep (Timeout.Infinite);

Tenga en cuenta que el flujo del proceso es muy simple:

  1. Crear la clase de la primera capa de informar a los pasadores del hardware que se utiliza para esa función;
  2. Cree el manejo de la pantalla LCD a partir del hardware de clase;
  3. Ajuste que desea mostrar en la pantalla LCD (si el parpadeo caja);
  4. Limpieza del LCD;
  5. Escriba el mensaje.

Hay mucho más que decir sobre el LCD, es muy sencillo, más que mi trabajo era para montar el circuito en el tablero para entender la operación. Y entonces la imagen que muestra el resultado final:

Fuente aqui