App Inventor Tutorial Programas

03/04/13 App inventor Tutorial programas

1/18www.iesromerovargas.net/android/

App inventorCómo programar los teléfonos móviles con Android mediante App

inventor.

Juan Antonio Villalpando IES Fco. Romero Vargasmi correo: [email protected]) I.E.S. Fco. Romero Vargas (Jerez de la Frontera Cádiz)

Puedes ver cómo ubicarse en los mapas de Googlemediante el GPS de Android

¿Qué es Android?

Android es un sistema operativo gratuito que utiliza muchos teléfonos móviles actuales (teléfonos inteligentes = smartphone), está basado en LINUX.Android pertenece a Google.

Cada cierto tiempo aparecen nuevas versiones: 1.5 (Cupcake), 1.6 (Donut), 2.0 (Eclair), 2.2 (Froyo), 2.3 (Gingerbread), 3.2 (Honeycomb), Ice CreamSandwich...

También existen otros sistemas operativos para teléfonos como el Symbian OS y el iOS, pero en España se está imponiendo el Android. (Ver gráficoestadístico de como en España se está imponiendo el Android)

El Android lo podemos programar fácilmente y realizar programas de fórmulas matemáticas, juegos, ubicación en los mapas de google, mover un robotmediante blutooth, contestación automática de sms,...



Saber más de Android en la Wikipedia.

Ver teléfonos con Android en la página de Orange.

¿Para aprender a programar el Android necesito tener un teléfono móvil con Android?

No. Solo necesitas un ordenador y conexión a Internet. En el ordenador puedes hacer los programas y probarlos en un emulador instalado en elmismo ordenador. Si tienes un teléfono móvil con Android puedes pasar los programas realizados al móvil para ver cómo funcionan.

¿Qué programa se utiliza para programar el Android?

Hay tres formas principales:

1. Con Android SDK y Eclipse . Se realizan los programas escribiendo códigos. Es la forma que utilizan los buenos programadores. Puedes verejemplos en este vídeo.

2. Mediante una aplicación de pago (50 € aproximadamente) llamada BASIC4Android, para realizar programas de manera parecida a comose hace con Visual Basic

IMPORTANTE: si te interesa esto de hacer programas sencillos para Android consulta este tutorial de aprendizaje einiciación que he realizado: pequeño tutorial BASIC4Android.

3. Mediante App inventor. Es una forma intuitiva de hacer programas situando convenientemente las instrucciones como si fueran piezas de unpuzzle. Utilizaremos App inventor para realizar nuestros programas. Lo que sí necesitas es estar conectado a Internet para poder utilizar el Appinventor.

App Inventor apareció el 12 de julio de 2010, y se abrió a todo el público en 15 de diciembre de 2010. A principo de agosto de 2011 Google anunció que ya no mantendría esta aplicación, pero que la haría código libre destinado a la educación. Una semana después el Instituto Tecnológico de Massachusetts (MIT), una institución de educación superior privada situada en Cambridge,Massachusetts (EE.UU.), anunció que se haría cargo del proyecto. Ver web. El 31 de dicembre de 2011 App Inventor de Google dejó de funcionar. El 4 de marzo de 2012, el Instituto Tecnológico de Massachusetts (MIT) volvió a poner el proyecto en Internet.

App inventorPara entrar es necesario tener una cuenta en Google.http://appinventor.mit.edu/

http://beta.appinventor.mit.edu



Los programas se realizan mediante bloques, que son una especie de piezas de puzzle. No tiene programa fuente escrito en texto.

¿De dónde me bajo el App inventor?El App inventor no es un programa que te tengas que bajar al ordenador. Funciona en cloud computing, el programa funciona mediante laconexión a Internet, tu trabajas con el programa conectado directamente al servidor de App inventor. Es como una página web y en ella realizas lasoperaciones.

Para que funcione necesitas tener instalado JAVA. También necesitas asociar tu correo a Google, esto se realiza inmediatamente sin dificultad.



Entras en la página...

http://appinventor.googlelabs.com

http://beta.appinventor.mit.edu

Te pedirá que te autentifique, si no tienes cuenta de Google, simplemente te registras con el correo que tengas, en mi caso con mi cuenta deyahoo.com.

New: para crear un nuevo programa.

More Actions: Upload Source: para cargar un programa. Los programas están en formato comprimido.zip. Pero para cargarlos no tenemos quedescomprimirlo manualmente, sino que el App inventor se lo traga en zip.

More Actions: Download Source: si hemos realizado un programa como el Adivina y queremos guardarlo en nuestro ordenador, lo marcamos ypulsamos Download Source. Se guarda en formato .zip

Baja a tu ordenador el programa que vamos a realizar: Pitagoras.zip, y luego ve a More Actions: Download Source: para cargarlo (no hacefalta descomprimirlo, déjalo con el .zip)

Hay que tener en cuenta que el programa que realizamos se cargará en el servidor de App inventor en Internet.

NOTA: El Internet Explorer da a veces errores en la subida y bajada de archivos, es preferible utilizar el Chrome de Google.

NOTA: Si quieres instalarlo en tu ordenador, te bajas el instalador y sigue estos pasos...http://beta.appinventor.mit.edu/learn/setup/setupwindows.html

NOTA: Si se sale el error: "Please locate the command directory on your computer and enter the full path below", instala el App inventor:http://beta.appinventor.mit.edu/learn/setup/setupwindows.html

También es posible que salga este mensaje al abrir el "Block Editor"

Ejemplo: http://teach.appinventor.mit.edu/curriculum/hellopurr

Vamos a ver como he creado el programa desde el principio. Pitagoras.zip



En nuestro caso va a ser el teorema de Pitágoras. Introducimos los dos catetos y nos dará la hipotenusa.

Pulsamos New.

Screen1 es la pantalla de nuestro móvil.

En Palette están los elementos o componentes que podemos poner en la pantalla de nuestro móvil. Botones, casilleros, imagenes, etiquetas,...

Vamos a arrastrar a la pantalla Screen1:

Una etiqueta (Label1)

Un casillero (TexBox1)

Otra etiqueta (Label2)

Otro casillero (TexBox2)

Un botón (Button1)

Otra etiqueta (Label3)



Fíjate a la derecha están las Propiedades de cada elemento...

Si marcas Label1, en la derecha puedes ponerla negrita (Bold), tamaño (FontSize), el texto que quieres que aparezca en esa etiqueta (Text)

Cada cierto tiempo pulsa en botón Save, para guardar los cambios que vayas realizando...

¿Cómo va quedando esto? Open the Blocks EditorSi conectamos el móvil mediante USB al ordenador y pulsamos Download to Connect Phone pasaríamos el programa al móvil.

Pero nosotros queremos utilizar el emulador para ver como va quedando en nuestro ordenador, y además aún nos queda poner los códigos delprograma, para ello pulsamos Open the Blocks Editor.

Abrimos y permitimos que entre JAVA...

Si te salen estos mensajes pulsas en Descargar, luego Abrir el programa que has descargado y lo Ejecutas.



Saldrá una pantalla como la de abajo, pero sin el código.

Pulsamos en New emulator (espera un minuto que cargue totalmente) y luego en Connect to Device... emulator 5554, pasa pasar el programa queestamos haciendo al emulador (espera que cargue totalmente). Si no sale el programa en la pantalla, pulsa el botón de abajo donde pone MENÚ.



Si te sale una pantallita negra indicando emulator: warning: opening audio input failed, vas al Administrador de tareas (Ctrl + Alt + Supr) y termina latarea adb.exe.

Vamos a ver el código...Vamos a utilizar 3 variables numéricas: un cateto (x), otro cateto (y), la hipotenusa (z).

Esas variables tenemos que declararlas, para ello vamos a BuiltIn / Definition

(Declararlas significa presentarlas antes de que el programa comience)

Sacamos la pieza variable.

En variable ponemos x

Pulsamos donde pone as

luego en Math

y luego en 123 para indicarle que trabajamos connúmeros.

Lo ponemos en el valor 1.



Si te equivocas al poner una pieza, la puedes borrar echándola en la papelera que aparece en la parte inferior derecha.

Ya tenemos las tres variables numéricas con valor inicial 1.

En My Blocks están los elementos de los que disponemos en la pantalla y las variables que hemos creado.

Queremos que cuando hagamos Click en el Button1, se realice la fórmula del teorema dePitágoras.

Vamos a My Blocks / Button1 / y sacamos Button1.Click

Dentro de Button1.Click

Tomamos el contenido del TextBox1.Text y lo asignamos a la variable x Tomamos el contenido del TextBox2.Text y lo asignamos a la variable y

Hacemos la raiz cuadrada (sqrt) de x elevado a 2 más y elevado a dos y ese resultado lo asignamos a z

Ponemos en el Label3.Text la unión (join) de "La hiponenusa vale..." y el valor de z.

Las piezas de las operaciones matemáticas las tomamos de BuiltInLos TextBox, Label, Button y las variables establecidas las tomamos de My Blocks

Ya lo tenemos. Pruébalo para ver cómo funciona.

Me funciona en el emulador, ahora ¿cómo lo paso al móvil?



Como indiqué anteriormente pulsamos en Package for Phone y, o bien lo guardarmos en nuestro ordenador, será un archivo de la forma pitagoras.apky luego este archivo por cable USB, bluetooth,... lo pasamos al móvil. O bien lo pasamos directamente al móvil mediante Dowload to Connected Phone. También se puede pasar mediante código de barra.

________________________________________________________________

Otro Programa

Adivina el número. Adivina.zip

Ahora se trata de hacer un programa llamado Adivina.zip donde pulsamos un botón, en ese momento el móvil crea un número aleatoriocomprendido entre el 1 y el 100 que debemos adivinar.

Luego introducimos un número en el casillero y pulsamos el botón ¿Es este?

El programa nos responderá si el número creado es igual, mayor o menor que el que hemos introducido.

Metemos en la pantalla Screen1 los siguientes elementos: Button1, Label1, TextBox1, TableArrangement1, Label2 y Label3

Debes de poner estos componentes...

Nota: La Label3 no aparece porque en he desmarcado su PropiedadVisible.

Así es como quedará el emulador...

Pulsamos en Block Editor y montamos este puzzle de instrucciones...



Explicación:

Definimos la variable ordenador como numérica

Definimos la variable mio como numérica.

Cuando hacemos Click en el Button1:

Se asigna a la variable ordenador un número aleatorio comprendido entre el 1 y el 100

En la Label3.Text aparece el número creado (Estas dos piezas del puzzle, Label3.Text = ordenador, las borraremos luego para que nosepamos el número del ordenador)

Cuando hacemos Click en el Button2:

Se le asigna a la variable mio el valor que el usuario del juego ponga en el Text1.Text

Si el número del ordenador es mayor que el mio, aparece en el Label2.Text la frase Mi número es mayor

Si el número del ordenador es menor que el mio, aparece en el Label2.Text la frase Mi número es menor.

Si el número del ordenador es igual que el mio, aparece en el Label2.Text la frase HAS ACERTADO.

________________________________________________________________

Otro Programa



Ruleta rusa Ruleta.zip

Vamos a ver un programa basado en el juego de la Ruleta.zip rusaEn este caso tenemos una pistola para 6 balas.

Primero Rearmamos la pistola poniendo una sola bala y girando el tambor. La bala se ubicará aleatoriamente en uno de los 6 sitios.

Luego vamos pulsando de manera desordenada los distintos botones.

Si el número de lugar de la bala coincide con el número del Botón pulsado, la pantalla se tiñe de rojo

En caso contrario se deshabilita (Button.Enabled = False ) el botón pulsado


Nota: La Label3 no aparece porque en he desmarcado su PropiedadVisible.




Cuando pulsamos el botón de Rearmar, Button7.Click, se crea un número aleatorio del 1 al 6, se habilitan (Enabled = True) todos los botones y se poneel fondo de la pantalla en blanco.

Cuando pulsamos cualquier botón:

Si el valor x generado aleatoriamente en el rearme coincide con el número del botón, se pone la pantalla roja.

En caso contrario, se deshabilita el botón pulsado.

Otro Programa

Tres iguales Tresiguales.zip

Se trata de pulsar el botón Comienzo, en ese momentos tres imagenes fresa.gif, limon.gif y pera.gif, se van reproduciendo aleatoriamente en loscuadros (Image1, Image2 y Image3). Cuando pulsamos el botòn Para, las imagenes quedan estáticas, se incrementa en uno el número de intentos y secomprueba si las tres imagenes son iguales, en este caso se incrementa en uno el número de aciertos.

Fijate que en el temporizador Clock1 hemos puesto un TimeInterval de 200

Que las imágenes que vamos a utilizar ( fresa.gif, limon.gif y pera.gif) la hemos Añadido en el apartado Media. Aquí tienes los dibujos de las frutas.







Declaramos las variables numéricas.

Cada vez que se active el temporizador Clock1.Timer...

Creamos tres números aleatorios x, y y z del 1 al 3

Dependiendo del número que salga y de la variable insertamos un dibujo

En botón Button1.Click es de parada, cada vez que lo pulsamos deshabilita el temporizador Clock1.Timer= false, incrementamos en uno los intentos ylos mostramos en el Text1.Text, además comprobamos si los números aleatorios x, y, z son iguales, en este caso incrementa en uno los aciertos y losmuestra en el Text2.Text.

El Button2.Click vuelve a habilitar el temporizador Clock1.Enabled=true

El Button3.Click establece los valores iniciales y arranca el temporizador.

Subir la aplicación al Play Store de Google(antes se llamaba Android Market (marzo 2012)).

Un vez construida nuestra aplicación, la podemos subir al Play Store de Google, para que cualquier persona la pueda bajar. (Gratuitamente o depago)



Pero......para subir aplicaciones al Play de Google, debemos tener una cuenta de Desarrollador, para tener esta cuenta debemos abonar 25 $ (aproximadamente 20 €).

Entramos en esta página y nos damos de alta abonando 25 $ de cuota de registro. https://play.google.com/apps/publish/signup

Además debemos "adaptar" nuestra aplicación.apk al Play de Google, para ello podemos encontrar en Internet varios tutoriales comolos siguientes, basados en el programa, AppToMarquet: http://amerkashi.wordpress.com/2011/02/14/automatingconversionofappinventorapktogooglemarket/



http://www.tuappinvetorandroid.com/publicarnuestraaplicaci%C3%B3nenelandroidmarket/

http://www.crucialthought.com/2011/05/15/publishinganappinventorapptotheandroidmarket/

http://www.wikihow.com/PublishanAppInventorApplicationtotheAndroidMarket

(También consultar Marketizer)

Herramienta para descompilar los archivos apk

http://code.google.com/p/androidapktool/

En pantalla completa

In the AndroidManifest.xml[1], add supportsscreens[2]. That will allow the app to fill the screen as expected, and if you want to also get rid of the title bar, then the activity element should have attribute android:theme set to "@android:style/Theme. NoTitleBar.Fullscreen"[3]

1 You can access the AndroidManifest.xml file in the APK with android apktool using command `./apktool v d ../AccelerometerBall.apk`

2 http://developer.android.com/ guide/topics/manifest/ supportsscreenselement.html

3 http://www.vogella.de/blog/ 2011/02/28/androidhidding thestatusandtitlebar

Para quitar la barra de notificación y de título:1. Bajamos apktool http://code.google.com/p/androidapktool/ (bajamos apktool y apktoolinstallwindows, lo descomprimimos y los tres archivosaapt.exe, aptool.jar y aptool.bat lo copiamos en nuestra carpeta C:\Windows)(Vamos al símbolo de sistema)2. Bajamos nuestra aplicación en paquete .apk desde: Download to this Computer (arribaderecha del appinventor)3. Descompilamos .apk mediante apktool d programa.apk 4. Cambiamos el archivo AndroidManifiest.xml

añadimos la línea android:theme="@android:style/Theme.NoTitleBar.Fullscreen"

<?xml version="1.0" encoding="utf8"?><manifest android:versionCode="1" android:versionName="1.0" package="appinventor.ai_juana1991.Pantalla_completa"xmlns:android="http://schemas.android.com/apk/res/android"><usespermission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /><usespermission android:name="android.permission.INTERNET" /><application android:label="Pantalla_completa" android:icon="@drawable/ya" android:debuggable="false"><activity android:name=".Screen1" android:configChanges="keyboardHidden|orientation" android:windowSoftInputMode="stateHidden"android:theme="@android:style/Theme.NoTitleBar.Fullscreen" >

<intentfilter><action android:name="android.intent.action.MAIN" /><category android:name="android.intent.category.LAUNCHER" /></intentfilter></activity><activity android:name="com.google.appinventor.components.runtime.ListPickerActivity" android:screenOrientation="behind"android:configChanges="keyboardHidden|orientation" /><activity android:name="com.google.appinventor.components.runtime.WebViewActivity" android:screenOrientation="behind"android:configChanges="keyboardHidden|orientation"><intentfilter><action android:name="android.intent.action.MAIN" /></intentfilter></activity></application></manifest>

5. Volvemos a compilar el proyecto

apktool b <Directorio_donde_se_encuentar_el_proyecto> <otro_directorio\programa.apk>

Puedes ver cómo ubicarse en los mapas de Google mediante el GPS de Android



¿Cómo enviar sms gratis?

Esto se hace con mjoy. Te vas con tu móvil a una zona que tenga wifi y te das de alta en mjoy, podrás enviar sms gratis a cualquier teléfono móvil . Mjoytambíén lo puedes instalar en el ordenador.

Con un precio de unos 2,5 céntimos está Cherry SMS (Puedes enviar SMS desde el móvil o desde el ordenador)

Me quiero comprar un móvil con Android, ¿cuál me compro?En estos momentos, agosto 2011, (con el tiempo cambian las características de los móviles y las ofertas) te pongo dos ejemplos...

Si tienes un móvil antiguo con tarjeta de prepago, puedes hacer la migracion gratuita a Vodafone, el móvil Samsumg Galaxy ACE te sale 39 €. El pagomensual de 24 €. Puedes llamar 150 minutos al mes gratuitamentes (gratis establecimiento de llamada y tiempo de llamada). Tienes Internet gratuito ybajarte todo lo que quieras, los primeros 150 MB que bajes serán de bajada rápida y a partir de ahí será bajada más lenta, pero siempre tendrás Internetgratuito. 18 meses de permanencia. (En Orange tienes 100 minutos gratuitos de 18h a 6 h.)

Otra manera es comprate un móvil libre, por ejemplo el Samsung Galaxy ACE cuesta unos 240 €. Luego te das de alta en SIMYO con la tarifa 3céntimos. Con esta tarifa cada establecimiento de llamada vale 18 céntimos y cada minuto 4 céntimos. Puedes navegar por Internet gratuito hasta untráfico subida/bajada de 500 MB. Y el pago mensual es de 8,20 €. Puedes darte de baja cuando quieras, no hay permanencia. Otra buena opción es pepephone. En agosto de 2012 Yoigo, tiene la famosa Tarifa del dos, que por 10,60 € al mes tienes 1 G de tráfico de internet,aunque todas las llamadas de voz son de pago.Si tienes un teléfono libre las mejores opciones son primero pepephone, segundo simyo y tercero yoigo tarifa del dos.

¿Hay algún plan en el que no tenga que pagar mensualidad? Consulta la web de SIMYO. Hay un plan llamado 0/8 en donde no tienes que pagar cuota menual, solo pagas lo que llames (18 céntimosestablecimiento de llamada + 9 céntimos el minuto, además puedes navegar por internet a 4 céntimos el mega). De esta manera no tienes quepreocuparte de que tu móvil de prepago no tenga saldo. El pago se hace mediante tu número de cuenta bancaria. Además si llamas de un teléfono conSIMYO a otro también con SIMYO, ¡¡¡los primeros 10 minutos son gratis!!!

Sería una buena opción tener un teléfono sencillo con la tarifa 0/8 de SIMYO y otro teléfono de los inteligentes (smart) con Android con la tarifa 3 céntimosde SIMYO, de esta manera por 8,20 € mensuales, os podéis "jatar" de hablar entre los dos y navegar con el de Android.

NOTA: las opciones de compañías y tarifas anteriores solo son referencias, ya que cambian periódicamente.

Si quieres que este tutorial se mantenga y lo actualice con másprogramas, escríbeme un correo a: [email protected]

1.599.061

Documents

App Inventor Tutorial Programas