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?
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?
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.
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?
Ejemplo 3. ¿Cómo se dibuja un círculo donde los toques de usuario
Ejemplo 4. ¿Cómo se mueve una imagen en el centro del lienzo en App Inventor 2?
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?
Ejemplo 2. ¿Cómo saber lo lejos que se está de un punto dado?
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?
Ejemplo 2. ¿Cómo añadir una lista de números?
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?
Ejemplo 3. ¿Cómo se hace eso por lo que el pase de diapositivas es de nuevo al frente?
8-¿Cómo se puede grabar información en una lista?
Ejemplo 1. ¿Cómo se puede grabar notas de entrada por el usuario?
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?
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?
Ejemplo 2. ¿Cómo se pueden grabar notas introducidas por el usuario?
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?
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?)
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.
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.
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?
Ejemplo 2. ¿Cómo se define un procedimiento que puede mostrar cualquier lista?
Ejemplo 3. ¿Cómo se define un procedimiento que ayuda a mostrar cualquier lista en cualquier etiqueta?
Fuente aqui