En primer lugar, explicaré por encima qué es App Inventor:
App Inventor es una aplicación web que te permite programar de manera fácil y entretenida aplicaciones para android.
Aquí dejo el link, aunque si estáis leyendo este tutorial, puede que ya lo hayáis probado y no sepáis muy bien cómo funciona:
App Inventor 2
-PAINT:
[Importante: La aplicación está hecha con App Inventor 2, si utilizas su primera versión, quizás cambien algunas cosas.]
Voy a explicar cómo hacer una aplicación para poder dibujar con el dedo en la pantalla:
Índice:
-Aspecto visual de la App:
-Botones en horizontal
-Canvas
-Más botones en horizontal
-Agregar botones y modificarlos
-Agregar opciones de cámara y sonido
-Programación de la App:
-Programación por bloques:
-Colores
-Pintar en el canvas
-Limpiar la pantalla
-Cámara
-Por último, guardar
-Final
-EXTRAS
~¡Empezamos!~
-Aspecto visual de la App:
1º: Abrimos App Inventor 2 (evidentemente).
2º: Pinchamos en "Create" (Debes acceder con tu cuenta de gmail).
3º: Ya estamos listos para empezar. Pulsaremos en "New Project".
4º: Ingresamos el nombre del proyecto y clicamos en "OK".
5º: Ya estamos en la pantalla principal de App Inventor:
6º: Botones en horizontal:
Bueno, a continuación crearemos un espacio para colocar botones en horizontal.
Para ello, en la parte de la izquierda, pincharemos en "Layout" y arrastraremos "HorizontalArrangement" hasta el cuadro del centro que simula la pantalla de un móvil.
Ahora le daremos un tamaño. En la parte inferior derecha nos encontraremos con las opciones para darle ancho y alto. Estaría bien algo así (yo me rijo por el tamaño de pantalla de mi móvil, quizás debáis darle algo más de tamaño):
7º: Canvas:
A continuación agregaremos un "canvas" para poder dibujar y/o editar fotos hechas con la cámara.
Para ello, en las opciones de la izquierda, clicaremos en "Drawing and Animation" y después arrastraremos "canvas" hasta la pantalla. Le daremos tamaño de la misma manera que hemos hecho anteriormente. En mi caso:
8º: Más botones en horizontal:
Ahora crearemos otro "HorizontalArrangement" de la misma manera que hemos hecho antes con más o menos el mismo tamaño.
9º: Agregar botones y modificarlos:
Ahora llega el momento de agregar botones, yo lo he hecho con 9, que serán: 5 colores para dibujar, 1 para usar como goma de borrar, 1 para hacer una foto con la cámara, 1 para borrar todo lo que hayamos dibujado en la pantalla y el último para guardar nuestras creaciones.
Para ello pinchamos en "Button" y arrastraremos 6 de los botones al "HorizontalArrangement" de la parte superior y los otros 3 al de la parte inferior.
Los botones pueden tener el aspecto que queramos. Para ello tendremos que subir la imagen que queramos ponerle, o bien algún dibujo hecho por el Paint de Windows (como es mi caso).
Para ello, seleccionaremos uno de los botones y en las opciones de la derecha clicaremos en "Image". Después elegiremos la imagen y la subiremos.
Yo ya lo tengo, me quedó así:
Los rectángulos que están entre los botones de abajo, son "espacios" que he creado con "HorizontalArrangement".
A cada cosa que hemos agregado, se le puede asignar un nombre. Esto se hace en las opciones de la derecha de la pantalla. Solo hay que pinchar en uno de ellos y clicar en "Rename", que está justo debajo de la lista de elementos:
10: Agregar opciones de cámara y sonido:
Ya que estamos aquí, antes de ir a la pestaña de bloques, añadiremos sonidos y la opción que te permitirá utilizar la cámara para agregar una foto al "canvas".
Para ello, en las opciones de la izquierda, clicaremos en "Media" y arrastraremos "Camera" hasta la pantalla (no importa el sitio). Y tantos "Sound" como sonidos queremos que haya diferentes.
También podemos modificar los nombres.
Quedaría algo así:
(Esto está en la parte inferior de la pantalla)
Bueno, creo que no he pasado nada por alto. Podemos empezar a programar por bloques.
-Programación de la App:
11: Programación por bloques:
Para abrir el editor de bloques, en la parte superior derecha, pulsaremos un botón llamado "Blocks".
Saldrá esta pantalla:
[Para facilitar mi explicación y vuestra comprensión, pondré una imagen de cada bloque y explicaré cómo montarlo y a continuación para qué sirve.]
1: Colores:
La pieza "when" se encuentra clicando en "black" (o el nombre que le hayáis puesto al botón del color negro).
La pieza "call" se encuentra clicando en el sonido "pop_s" (o el nombre que le hayáis puesto al sonido al pulsar el botón del color negro).
La pieza "set" se encuentra clicando en "Canvas1" (o el nombre que le hayáis puesto al canvas).
La pieza de color negro, se encuentra clicando en "Colors".
¿Para qué sirve?:
Para cuando toquemos con el dedo el botón llamado "black" suene el sonido llamado "pop_s" y se establezca el color "negro" para pintar con él.
Haremos lo anterior con todos los colores que queramos, yo como solo tengo 5 colores, lo haré con 5.
Para hacer la goma, no sé si habrá alguna manera o alguna opción para que borre (si la hay: ¡que alguien me la diga!), pero yo lo he hecho de la manera anterior, solo que aplicándole al botón el color blanco.
2: Pintar en el canvas:
Pieza superior:
La pieza "when" se obtiene pulsando en "canvas1" (u otro nombre del canvas).
La pieza "call Canvas1 .DrawCircle" se obtiene pulsando en "canvas1" (u otro nombre del canvas).
Las piezas "get" se obtienen en "Variables".
La pieza con el número 5 se obtiene en "Math".
¿Para qué sirve?:
Para que al pulsar en la pantalla dibuje un punto en el color elegido.
El número indica el grosor del punto.
Pieza inferior:
La pieza "when" se obtiene pulsando en "canvas1" (u otro nombre del canvas).
La pieza "call Canvas1 .DrawLine" se obtiene pulsando en "canvas1" (u otro nombre del canvas).
Las piezas "get" se obtienen en "Variables".
¿Para qué sirve esta cosa?:
Pues para que al arrastrar el dedo por la pantalla dibuje una línea.
3º: Limpiar la pantalla:
La pieza "when" se consigue clicando en "clear" (o el nombre que se le haya puesto al botón para borrar la pantalla).
La pieza "call .Play" se consigue clicando en "clear_s" (o el nombre que se le haya puesto a ese sonido).
La pieza "call .Clear" se consigue clicando en "Canvas1" (o el nombre que se le haya puesto al canvas).
¿Para qué sirve?
Pues simplemente para borrar todo lo que haya en la pantalla (menos la imagen que tengamos en el canvas).
4º: Cámara:
La pieza "when" se consigue clicando en "camera" (o el nombre que se le haya puesto al botón de la cámara).
La pieza "call .Play" se consigue clicando en "camera_s" (o el nombre que se le haya puesto a ese sonido).
La pieza "call .TakePicture" se consigue clicando en "Camera1" (o el nombre que se le haya puesto a la opción de la cámara).
¿Para qué sirve?:
Para que cuando hagamos click en ese botón, se abra la cámara y podamos tomar una foto.
La pieza "when" se consigue clicando en "Camera1" (o el nombre que se le haya puesto a la opción de la cámara).
La pieza "set to" se consigue clicando en "Canvas1" (o el nombre que se le haya puesto al canvas).
La pieza "get" se consigue clicando en "Variables".
¿Qué es lo que hace esto?:
Hace que la foto tomada anteriormente podamos usarla como canvas y podamos dibujar sobre ella.
5º: Por último, guardar:
La pieza "when" se consigue clicando en "Save" (o el nombre que se le haya puesto al botón para guardar).
La pieza "call .Play" se consigue clicando en "Save_s" (o el nombre que se le haya puesto a ese sonido).
La pieza "set to" se consigue clicando en "Save" (o el nombre que se le haya puesto al botón de guardar).
La pieza "call .SaveAs fileName" se consigue clicando en "Canvas1" (o el nombre que se le haya puesto al canvas).
La pieza para escribir texto, se consigue clicando en "Text".
¿Qué es lo que hace este último bloque, por fin, después de dedicarle tanto tiempo a esto y deseando llegar ya al final del tutorial?:
Pues lo que hace es guardar lo que haya en la pantalla (más bien en el canvas). Lo hará por defecto en la raíz de la tarjeta SD. Y lo que indicamos con el texto, es el nombre con el que aparecerá la imagen guardada.
6: Final:
Más o menos así es como debería quedar todo:
_________________________________________________________________________________
Pues ya está, tampoco ha sido tan difícil, ¿no?
Para guardar la aplicación en App Inventor, clicaremos en la parte superior izquierda en "Project" y "Save project as" para indicar un nombre o simplemente en "Save Project" para que lo guarde con el nombre que ya tiene.
Para descargar el archivo ".apk" (que es el que pasaremos después al móvil para instalarlo) a nuestro PC, en la parte superior clicaremos en "Build" y en "App (save .apk to my computer").
Si tenéis alguna duda, no dudéis, comentad o escribidme un correo e intentaré ayudaros.
Pues ya está, gracias por leer :)
EXTRAS: -No se puede renombrar una aplicación en App Inventor (por lo menos hasta el momento 20/02/2014).
Para ello, lo que haremos será clicar en "Project" y "Save project as" y guardarlo con otro nombre.
Entonces solo tendríamos que borrar el antiguo.
-----------------------------------------------------------------------------------------------------------
-Se puede poner este bloque:
Para que la aplicación se cierre pulsando la tecla retroceso del móvil.
------------------------------------------------------------------------------------------------------------
-En este programa, al hacer la foto, ésta se guarda antes de poder ser editada. Se guardará en: "/Pictures"
------------------------------------------------------------------------------------------------------------
