tutorial app inventor

1. AppInventor
Los mejores tutoriales de appinventor en probbix

2. ¿Qué es app inventor?
Google App Inventor es una aplicación de Google Labs para crear aplicaciones de software para el sistema operativo Android. De forma visual y a partir de un conjunto de herramientas básicas, el usuario puede ir enlazando una serie de bloques para crear la aplicación

3. Creando paintpot
Con la PaintPot aplicación, nosotros podemos:
Sumerja el dedo en una olla virtual de pintura para dibujar en ese color.
Arrastre el dedo por la pantalla para dibujar una línea.
Toque la pantalla para hacer puntos.
Usa el botón de abajo para limpiar la pantalla limpia.
Incluir una imagen como fondo de dibujo.

4. Titulo de la pantalla
Para empezar, vaya al panel de propiedades de la derecha de Diseñador y cambiar la pantalla de título a "PaintPot". Usted debe ver este cambio en el teléfono, con el nuevo título que muestra en la barra de título.
Hay tres nombres en App Inventor, y es fácil confundirlos:
El nombre que elija para su proyecto a medida que trabaja en ella (en este caso, PaintPot ). Este también será el nombre de la aplicación si se empaqueta para el teléfono.
El nombre "Screen1", que es el nombre de la pantalla de componente. Verás que aparece en el panel Componentes en el Diseñador. No se puede cambiar el nombre del primer componente de la pantalla en la versión actual de la aplicación Inventor pero puede crear pantallas adicionales con los nombres de cualquier cosa que usted debe elegir.
El título de propiedad de la pantalla, que es lo que verás en la barra de título del teléfono. El título es una propiedad de la pantalla de componente. El título comienza siendo "Screen1", que es lo que utilizó en HelloPurr . Sin embargo, se puede cambiar, como lo estás haciendo para PaintPot . Para reiterar, el nombre y el título de Screen1 son inicialmente los mismos, pero se puede cambiar el título, si quieres.

5. Configurar los componentes
Vamos a usar estos componentes para hacer PaintPot :
Tres botones de selección de color rojo , azul o verde pintura, y otro botón para limpiar el dibujo.
Un lienzo , la superficie de dibujo. Este lienzo tiene un BackgroundImage , que es un gatito. También puede dibujar en un lienzo en blanco. Eso es sólo un lienzo una imagen sin fondo.
También hay un componente que no se ve: se utiliza un HorizontalArrangement para hacer los tres botones de colores alineados.
Eso hace cinco componentes en total. Vamos a conseguir y construir la aplicación.

6. Botones de color
Arrastre un botón de componente en el visor y el cambio del botón Texto atribuir a "Red" y crea su BackgroundColor rojo.
Haga clic en Button1 en la lista de componentes en el Visor para resaltarlo (que ya esté resaltado) y utilizar el Rename ... botón para cambiar su nombre a "Button1" para "ButtonRed".
Del mismo modo, hacer dos botones más de azul y verde, llamada «ButtonBlue" y "ButtonGreen", colocándolos verticalmente bajo el botón rojo.
Así es como esta debe mirar en el diseñador, con los nombres de los botones que aparecen en la lista de los componentes del proyecto. En este proyecto, se está cambiando los nombres de los componentes en lugar de dejarlos como los nombres predeterminados como lo hizo con HelloPurr . El uso de nombres significativos hace que sus proyectos más legible a sí mismo ya otros.

8. Orientación de la pantalla
Ahora debería tener tres botones, uno encima del otro. El siguiente paso es hacer que ellos se alinean horizontalmente. Esto se hace usando unHorizontalArrangement componente.
De categoría Diseño de la Paleta, arrastre un HorizontalArrangement componente y colocarlo debajo de los botones. Cambie el nombre del componente de "HorizontalArrangement1" a "ThreeButtons".
En el panel Propiedades, cambie el Ancho de ThreeButtons "Fill Padres ..." de forma que ocupe todo el ancho de la pantalla.
Mueva el lado tres botones al lado del otro en el HorizontalArrangement componente. Sugerencia : Usted verá una línea vertical azul que muestra donde la pieza que está arrastrando el tope.
Si nos fijamos en la lista de los componentes del proyecto, verá los tres botones sangría bajo los ThreeButtons para mostrar que ahora son sus subcomponentes. Observe que todos los componentes están sangrados bajo Screen1

10. Botones de limpiar y tamaño
Los dos componentes finales son el lienzo y el botón de limpiar.
A partir de la categoría de Dibujo y Animación de la paleta de arrastre un lienzo componente en el Visor. Cambia su nombre a "DrawingCanvas".Establezca su Ancho "Fill Padres" y defina su altura a 300 píxeles.
Añadir una imagen de fondo a las lienzo . Haga clic en el campo que contiene "Nada ..." junto a BackgroundImage en Propiedades del panel de la lona.Puede utilizar el mismo archivo kitty.png, si usted todavía tiene en su escritorio de un tutorial anterior. O puede utilizar otra imagen.
Desde la Paleta, arrastre el último botón en la pantalla, colocándola bajo la lona. Cambie su Identificación para "ButtonWipe" y cambiar su texto atribuye a "Limpie".

11. Agregando los bloques (componentes)
En el Editor de bloques:
Abra el cajón para ButtonRed y arrastre el cuando ButtonRed.Click bloque.
Abra la DrawingCanvas cajón. Arrastra la DrawingCanvas.PaintColor conjunto para bloquear (recuerde que el bloque conjunto de componentes es un desplegable de modo PaintColor es una selección en el menú desplegable) y colocarlo en el hacer la sección de cuando ButtonRed.Click .

12. Abra el cajón Colores y arrastre el bloque para el color rojo y ponerlo en establecer DrawingCanvas.PaintColor a . (Al hacer clic en un bloque de color después de su colocación se mostrará una tabla de colores que usted puede elegir.)
Repita los pasos 2-4 para los botones azules y verdes.
El último botón de configurar es el botón Limpiar. Hacer un controlador de eventos click para ButtonWipe arrastrando cuando ButtonWipe.Click delButtonWipe cajón. Desde el DrawingCanvas cajón, arrastre llamar DrawingCanvas.Clear y colóquelo en el hacer de la zona cuando ButtonWipe.Clickbloque.

14. En el Editor de bloques, abra el cajón para el lienzo y arrastre el cuando DrawingCanvas.Touched bloque al área de trabajo. Tan pronto como se arrastra el bloque hacia fuera, usted puede notar tres nombres de argumentos (resaltada en color naranja) situado en la parte superior del bloque de x , y , ytouchedSprite . Estos argumentos también se conocen como variables locales y pueden obtener acceso mediante el get o set de bloques que se encuentra en el cajón de las variables y luego seleccionar la variable adecuada en el menú desplegable se ahogan. También puede acceder a estas variables al mover el cursor sobre el nombre resaltado y seleccionando la variable que desea utilizar.
Ya has visto los eventos clic de botón. Clics son simples, porque no hay nada que saber sobre el clic aparte de eso sucedió. Otros controladores de eventos, como cuando ... Touched necesita información sobre el evento. En App Inventor, esta información se expresa como el valor de los argumentos relacionados con el controlador de eventos. Para el cuando ... Tocado caso, los dos primeros argumentos representan la coordenadas X e Y de donde ocurrió el contacto.Ahorraremos touchedSprite para un tutorial más tarde.
Para este evento táctil, hacen que el lienzo dibujar un pequeño círculo en el punto de coordenadas (x, y). Arrastre una llamada DrawingCanvas.DrawCirclecomando desde el cajón de la lona y colocarlo en el do de sección cuando DrawingCanvas.Touched .
En el lado derecho de la llamada DrawingCanvas.DrawCircle bloque de tres tomas en el que debe especificar los valores de las coordenadas X e Y, donde debía establecerse el círculo, y r , que es el radio del círculo. Para x e y , utilizará los valores de los argumentos que fueron suministrados al controlador Tocado:
Mueva el cursor sobre la variable x (resaltada en color naranja). Encuentra la x get bloque y arrastrarlo a la toma correspondiente de x en elcuando DrawingCanvas.Touched bloque.
Haga lo mismo para la variable y.
Usted también necesitará especificar el radio del círculo para dibujar. Cinco (píxeles) es un buen valor para esta aplicación. Haga clic en un área vacía de la pantalla y escriba el número 5 seguido de retorno para crear un bloque de números con un valor de 5. El pulsar en el área en blanco de la pantalla se llama typeblocking y es un atajo útil saber. Esto se puede hacer para cualquier bloque, no sólo números. Enchufe el bloque de 5 en la ranura de radio.

16. Por último, agregar el controlador de evento de arrastre. Aquí está la diferencia entre un contacto y un lastre:
Un toque es cuando usted pone su dedo en el lienzo y lo levanta sin moverlo.
Una fricción es cuando usted pone su dedo en el lienzo y mueva el dedo mientras se mantiene en contacto.
Al arrastrar el dedo por la pantalla, parece dibujar un gigante, línea curva que ha movido un dedo. Lo que en realidad estás haciendo es dibujar cientos de pequeñas líneas rectas: cada vez que se mueve el dedo, aunque sea un poco, a ampliar la línea de inmediato última posición de su dedo a su nueva posición.
Un evento de arrastre viene con 6 argumentos. Se trata de tres pares de coordenadas X e Y que muestran:
La posición de su dedo hacia atrás donde se inició el arrastre.
La posición actual de su dedo.
La posición inmediatamente anterior de su dedo.
También hay un sprite, que vamos a ignorar para este tutorial.
Ahora hacen arrastrando trazar una línea entre la posición anterior y la posición actual mediante la creación de un manejador de arrastrar:
Desde el DrawingCanvas cajón, arrastre el cuando DrawingCanvas.Dragged bloque al área de trabajo.
También desde el DrawingCanvas cajón, arrastre la llamada DrawingCanvas.DrawLine bloque en el do ranura del cuando DrawingCanvas.Draggedbloque.
Arrastre un Prevx get bloque al abierto x1 ranura en cuando DrawingCanvas.DrawLine . Haga lo mismo con los otros espacios: y1 deben llegar prevY ,x2 debe ser conseguir CurrentX y y2 debe obtener CurrentY .