03/04/13App inventor Tutorial programas App inventor Cómo programar los teléfonos móviles con Android mediante App inventor. Juan Antonio Villalpando IES Fco. Romero Vargas mi correo:
[email protected]) I.E.S. Fco. Romero Vargas (Jerez de la Frontera Cádiz) Puedes ver cómo ubicarse en los mapas de Google mediante 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 Cream Sandwich... 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áfico estadí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 robot mediante blutooth, contestación automática de sms,... www.iesromerovargas.net/android/ 1/18 03/04/13 App inventor Tutorial programas 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 el mismo 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 ver ejemplos en este vídeo. 2. Mediante una aplicación de pago (50 € aproximadamente) llamada BASIC4Android, para realizar programas de manera parecida a como se hace con Visual Basic IMPORTANTE: si te interesa esto de hacer programas sencillos para Android consulta este tutorial de aprendizaje e iniciació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 un puzzle. Utilizaremos App inventor para realizar nuestros programas. Lo que sí necesitas es estar conectado a Internet para poder utilizar el App inventor. 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 inventor Para entrar es necesario tener una cuenta en Google. http://appinventor.mit.edu/ http://beta.appinventor.mit.edu www.iesromerovargas.net/android/ 2/18 03/04/13 App inventor Tutorial programas 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 la conexió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 las operaciones. Para que funcione necesitas tener instalado JAVA. También necesitas asociar tu correo a Google, esto se realiza inmediatamente sin dificultad. www.iesromerovargas.net/android/ 3/18 03/04/13 App inventor Tutorial programas 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 de yahoo.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 que descomprimirlo 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 y pulsamos 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 hace falta 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 www.iesromerovargas.net/android/ 4/18 03/04/13 App inventor Tutorial programas 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) www.iesromerovargas.net/android/ 5/18 03/04/13 App inventor Tutorial programas 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 Editor Si 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 del programa, 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. www.iesromerovargas.net/android/ 6/18 03/04/13 App inventor Tutorial programas 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 que estamos haciendo al emulador (espera que cargue totalmente). Si no sale el programa en la pantalla, pulsa el botón de abajo donde pone MENÚ. www.iesromerovargas.net/android/ 7/18 03/04/13 App inventor Tutorial programas Si te sale una pantallita negra indicando emulator: warning: opening audio input failed, vas al Administrador de tareas (Ctrl + Alt + Supr) y termina la tarea 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 con números. Lo ponemos en el valor 1. www.iesromerovargas.net/android/ 8/18 03/04/13 App inventor Tutorial programas 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 de Pitá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 BuiltIn Los 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? www.iesromerovargas.net/android/ 9/18 03/04/13 App inventor Tutorial programas Como indiqué anteriormente pulsamos en Package for Phone y, o bien lo guardarmos en nuestro ordenador, será un archivo de la forma pitagoras.apk y 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 aleatorio comprendido 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... Así es como quedará el emulador... Nota: La Label3 no aparece porque en he desmarcado su Propiedad Visible. Pulsamos en Block Editor y montamos este puzzle de instrucciones... www.iesromerovargas.net/android/ 10/18 03/04/13 App inventor Tutorial programas 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 no sepamos 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 www.iesromerovargas.net/android/ 11/18 03/04/13 App inventor Tutorial programas Ruleta rusa Ruleta.zip Vamos a ver un programa basado en el juego de la Ruleta.zip rusa En 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 Así es como quedará el emulador... Debes de poner estos componentes... Nota: La Label3 no aparece porque en he desmarcado su Propiedad Visible. www.iesromerovargas.net/android/ 12/18 03/04/13 App inventor Tutorial programas 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 pone el 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 los cuadros (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 se comprueba 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. Debes de poner estos componentes... Así es como quedará el emulador... www.iesromerovargas.net/android/ 13/18 03/04/13 App inventor Tutorial programas www.iesromerovargas.net/android/ 14/18 03/04/13 App inventor Tutorial programas 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 y los 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 los muestra 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 de pago) www.iesromerovargas.net/android/ 15/18 03/04/13 App inventor Tutorial programas 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 como los siguientes, basados en el programa, AppToMarquet: http://amerkashi.wordpress.com/2011/02/14/automatingconversionofappinventorapkto googlemarket/ www.iesromerovargas.net/android/ 16/18 03/04/13 App inventor Tutorial programas 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 archivos aapt.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 www.iesromerovargas.net/android/ 17/18 03/04/13 App inventor Tutorial programas ¿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 . Mjoy tambíé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 pago mensual de 24 €. Puedes llamar 150 minutos al mes gratuitamentes (gratis establecimiento de llamada y tiempo de llamada). Tienes Internet gratuito y bajarte 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 Internet gratuito. 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 3 céntimos. Con esta tarifa cada establecimiento de llamada vale 18 céntimos y cada minuto 4 céntimos. Puedes navegar por Internet gratuito hasta un trá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éntimos establecimiento de llamada + 9 céntimos el minuto, además puedes navegar por internet a 4 céntimos el mega). De esta manera no tienes que preocuparte 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 con SIMYO 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éntimos de 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ás programas, escríbeme un correo a:
[email protected] 1.599.061 www.iesromerovargas.net/android/ 18/18