SlideShare una empresa de Scribd logo
1 de 12
Descargar para leer sin conexión
UNIDAD FORMATIVA
CREANDO
UNA APLICACIÓN
PARA
UN
CENTRO
ESCOLAR
CPR GIJÓN
MAYO 2015
Eladio Díaz Camblor
Creando una aplicación Android para un centro escolarpor
Eladio Díaz Camblor se distribuye bajo una
Licencia CreativeCommons
Atribución-NoComercial-CompartirIgual 4.0 Internacional.
Creando	
  una	
  aplicación	
  Android	
  para	
  un	
  Centro	
  escolar 	
  
Creando	
  una	
  aplicación	
  Android	
  para	
  un	
  Centro	
  escolar 	
  
En esta Unidad Formativa vamos a trabajar con la aplicación web App
Inventor2, creada y mantenida por el MIT, es decir, el Instituto de Tecnología
de Massachussets.
La que vamos a utilizar es la segunda versión de App Inventor. Hubo una
versión anterior, pero actualmente ha quedado descontinuada. No obstante,
aún se puede utilizar y se encuentran por Internet informaciones acerca de ella.
El funcionamiento de App Inventor2 es muy similar a un entorno de
programación que se llama Scratch-diseñado para ser utilizado por niños-
A diferencia de Scratch, que se instala en el ordenador en que se vaya a
utilizar, App Inventor lo podremos utilizar desde cualquier ordenador conectado
a Internet. Basta con llamar a un navegador.
A pesar de su aspecto inocente, App Inventor es un entorno de programación
potentísimo y bastante complejo. Así que os advierto de que no tengo todas las
respuestas. Ni siquiera muchas respuestas.
Pero quien seguramente las tiene todas es la amplísima comunidad de
usuarios de App Inventor que podréis encontrar en Internet, de modo que
cuando nos enfrentemos a un problema o queramos saber cómo se hace
alguna cosa casi siempre nos encontraremos con que alguien ya ha tenido el
mismo problema, lo ha resuelto y ha publicado su solución en la Red.
Y si no, siempre nos quedarán las amplísimas opciones de ayuda del propio
App Inventor.
Para entrar en App Inventor es imprescindible tener una cuenta de correo en
gmail. Damos por hecho que la tenéis.
Para lanzar esta aplicación web podemos utilizar cualquier navegador, aunque
quizá convenga usar Chrome, por aquello de que Google y el MIT están muy
cercanos entre sí.
Entraremos en App Inventor poniendo en la barra de direcciones del navegador
la dirección:
ai2.appinventor.mit.edu
Nos aparecerá un listado con la dirección o direcciones de correo de Gmail que
tengamos, si tenemos más de una y nos solicitará permiso para relacionar la
dirección de email con nuestro App Inventor. Una vez que hayamos concedido
el permiso, se lanzará la aplicación web. Veremos una pantalla de fondo y otra
pantalla emergente que se abre. Esta pantalla inicial no es estática, sino que
cambia en el tiempo y con frecuencia da cuenta de cambios que el MIT va
introduciendo en la aplicación para mejorarla.
En la pantalla emergente le damos al botón “Continue” y entramos en la
aplicación. Como todos los epígrafes aparecen e inglés, vamos a ponerlos en
español. Para ello pulsamos sobre la palabra “English” que hay arriba a la
derecha. Se despliega un menú donde aparece la palabra “Español”. Una vez
que hayamos pulsado sobre ella se repetirá el proceso de entrada, pero esta
vez en español.
Creando	
  una	
  aplicación	
  Android	
  para	
  un	
  Centro	
  escolar 	
  
Con la aplicación hablando ya nuestro idioma, vamos a situarnos: Cuando
entramos en la aplicación nos encontramos en la pantalla que se llama
“Diseñador”. En ella hay dos partes, una horizontal y otra vertical. En la parte
horizontal nos encontramos dos zonas, una gris y otra verde.
En la parte gris, de izquierda a derecha veremos una etiqueta que nos dice que
estamos en App Inventor, que es del MIT y que es una beta (una versión de
pruebas). Más a la derecha tenemos “Proyectos”. Si picamos ahí podremos
gestionar todos nuestros proyectos: Guardarlos, exportarlos, etc.
Más a la derecha, “Conectar” nos da opciones que nos permiten ver
funcionando en nuestro móvil la aplicación en la que estamos trabajando.
“Generar” nos proporciona, en distintos formatos, los archivos necesarios para
instalar la aplicación en nuestro dispositivo.
“Ayuda”… ¿Alguna duda respecto a lo que hace?
En otro grupo de etiquetas está “Mis proyectos”, que nos da acceso directo a
gestionar las aplicaciones que hayamos elaborado
“Gallery” es una novedad en App Inventor. Nos da acceso a una infinidad de
aplicaciones que otros usuarios han elaborado y han subido a los servidores de
App Inventor. La utilizaremos enseguida.
“Guía” es otra página de ayuda online de App Inventor.
“Informar de un problema” nos pone en contacto con Google Groups para dar a
conocer fallos que hayamos localizado en App Inventor
“Español” es un botón que ya hemos utilizado y que nos permite cambiar el
idioma en que queramos que se vea App Inventor. Se puede elegir entre
Español, Inglés, Italiano, y dos modalidades del idioma chino (creo…)
En la parte verde tenemos el nombre de la aplicación en la que estemos
trabajando.
Un grupo de tres botones nos permitirá gestionar las pantallas que formen
nuestra aplicación. Podremos añadir o eliminar pantallas (a las que la
traducción al español de App Inventor llama “ventanas”)
Más a la derecha, dos botones: “Diseñador” y “Bloques” nos esperan. Pronto
oiremos hablar de ellos…
En la parte inferior nos encontramos cinco zonas, que son:
- “Paleta”: Cuando entramos, aparece abierta “Interfaz de usuario”, una de las
muchas etiquetas que podemos elegir. Al desplegar las etiquetas se nos van
mostrando una enorme cantidad de componentes que vamos a poder utilizar
en nuestras aplicaciones, ordenadas por categorías.
Creando	
  una	
  aplicación	
  Android	
  para	
  un	
  Centro	
  escolar 	
  
- “Visor”: Tiene el aspecto de la pantalla de un móvil. Sin embargo, su
comportamiento no es exactamente el que va a tener la aplicación. Para ver
nuestra aplicación en funcionamiento vamos a necesitar un “emulador” o la
aplicación AI Companion, que se puede bajar desde la Play Store.
- “Componentes”: Los componentes son los elementos que van a aparecer en
nuestra pantalla, los “ladrillos” que forman nuestra aplicación. Hay
componentes que son visibles en la pantalla y otros que no lo son.
Para utilizar un componente sólo tenemos que picar sobre él y arrastrarlo a la
pantalla del “Visor”.
- “Propiedades”: de cada uno de los componentes. Determinan cómo empieza
el componente en la pantalla. Se pueden cambiar para modificar el aspecto que
el componente va a presentar en la pantalla. También se pueden cambiar
desde los “Bloques”
- “Medios”: Aquí van a aparecer los archivos (imágenes, audio, etc) que
hayamos subido para que formen parte de nuestra aplicación. Están
disponibles para utilizarlos desde cualquiera de las pantallas de la aplicación.
EMPEZAMOS A CONSTRUIRNUESTRA APLICACIÓN
Nuestro objetivo principal en esta Unidad Formativa será crear una sencilla
aplicación que pueda ser de utilidad para las familias de nuestros alumnos
proporcionando distintas informaciones relativas al Centro.
Lo que vamos a ver a continuación no sino una limitadísima muestra de las
capacidades de App Inventor. Vuestra imaginación y las necesidades de
vuestro Centro os dictarán sin duda una infinidad de mejoras.
Para facilitar nuestro trabajo, y sobre todo para ahorrar tiempo, he colgado en
la Galería una aplicación que vamos a buscar y a bajar a nuestro App Inventor.
La aplicación se llama: AppCPRGijon
Una vez que la hayamos bajado a nuestro App Inventor tendremos ya nuestra
aplicación “precocinada” y empezaremos a trabajar con ella.
Nuestra aplicación va a tener la siguiente estructura de pantallas:
* Una pantalla de presentación. (Screen1)
No es imprescindible y puede que ni siquiera sea recomendable establecer
una pantalla inicial, pero nos va a servir para ver algunos conceptos básicos de
App Inventor.
Esta primera pantalla será a modo de presentación del Centro conteniendo, por
ejemplo, una imagen inicial y sobre ella una etiqueta con una inscripción y un
botón que nos pasará a la ventana siguiente
Las propiedades de esta primera ventana son mucho más complejas que las
del resto de las ventanas de la aplicación, y muchas de ellas no vuelven a
Creando	
  una	
  aplicación	
  Android	
  para	
  un	
  Centro	
  escolar 	
  
aparecer en otros lugares de la aplicación, por lo que deberemos prestar
especial atención a definirlas con mucho cuidado.
Si tuviéramos más tiempo, podríamos trastear con ellas, pero vamos a ceñirnos
a las propiedades más importantes:
El cuadro “Acerca de” recoge información relativa a nuestra aplicación que
vamos a poder ver desde la propia aplicación, una vez instalada en el móvil.
Cuando creamos la ventana (con el botón “Añadir ventana”) fijamos el nombre
de esa ventana, que luego no se podrá cambiar. Sí podremos cambiar su título
(que es lo que ve el usuario). El nombre sirve para trabajar con las ventanas
internamente.
Código y nombre de Versión. Al principio no tienen mayor importancia pero sí
que son críticos para subir actualizaciones. La Play Store no nos permitirá subir
una actualización si no cambiamos el código y nombre de la versión
Icono de la aplicación. Es el icono con el que la aplicación aparecerá en el
móvil, una vez instalada. Debería ser cuadrado y no muy grande. Si no
definimos el icono, aparecerá por defecto un icono genérico con el robot de
Android.
Empezamos a trabajar en nuestra primera pantalla. Lo primero que vamos a
hacer es poner una imagen de fondo.
En el apartado “Medios” de nuestra aplicación vemos un archivo que se llama
EDUCASTUR.png. Es el que vamos a poner como imagen de fondo. La
imagen se va a ajustar automáticamente al tamaño de la pantalla del teléfono.
Es conveniente que la imagen que elijamos como fondo no sea muy diferente
en cuanto a proporciones a la propia pantalla del móvil, para evitar que se
produzcan distorsiones fuertes.
También hay que prestar atención al “peso” de las imágenes, si no queremos
que el peso de nuestra aplicación se dispare (los usuarios tienden a no instalar
aplicaciones muy “pesadas”) Podemos jugar con la calidad de la imagen,
teniendo en cuenta que al reducir tamaño de las imágenes, por ejemplo en la
pantalla del móvil, vamos a “ganar” calidad.
Vamos a poner una etiqueta sobre nuestro fondo. Para ello, en la zona “Interfaz
de usuario” picaremos sobre “Etiqueta” y arrastraremos una a la zona “Visor”
Veremos que la etiqueta aparece también en la zona “Componentes” y en la
zona “Propiedades” veremos las propiedades de la etiqueta. Podemos
cacharrear un poquito con las propiedades hasta que consideremos que nos
queda guapa.
Ahora haremos lo mismo con un “Botón”, arrastrándolo desde la “Interfaz de
usuario hasta el “Visor” El botón tiene sus “Propiedades”, que aparecen a la
derecha. Son bastante intuitivas, por lo que es fácil hacerse con ellas sólo con
cacharrear un poco.
Hay una propiedad importante, que es la que aparece como “Imagen”. En la
práctica nos permite convertir cualquier imagen en un botón activo o crear
nuestros propios botones fuera del App Inventor y utilizarlos luego en nuestra
aplicación.
Creando	
  una	
  aplicación	
  Android	
  para	
  un	
  Centro	
  escolar 	
  
Vamos a poner a nuestro botón el aspecto que queramos y una leyenda que
diga “ENTRAR” o cualquier cosa parecida.
Hasta ahora, todo bien. Hemos puesto un fondo y dos componentes cuyo
aspecto pudimos modificar desde “Propiedades” pero… ¿Cómo se comportan
esos componentes? ¿Cómo puedo decirles qué es lo que deben hacer?
Para eso picaremos en botón “Bloques” que hay arriba, a la derecha. La parte
de debajo de la pantalla cambia por completo y queda ahora dividida en tres
zonas: “Bloques”, “Visor” y “Medios”. En los “Medios” volveremos a ver todos
los archivos que hemos subido para que formen parte de nuestra aplicación.
En la zona “Bloques” hay dos partes. Arriba vemos el epígrafe “Integrados” y
una serie de categorías. Contienen bloques que van a estar presentes en todas
las pantallas de la aplicación.
En la parte de abajo están los componentes que hemos utilizado en nuestra
pantalla trabajando en la zona “Diseñador”
Cuando pulsamos sobre una de las categorías se despliegan una serie de
bloques que vamos a poder utilizar pulsando sobre ellos y arrastrándolos al
“Visor”
Exactamente lo mismo sucede cuando pulsamos sobre cualquiera de los
componentes que forman parte de nuestra pantalla.
Cada uno de los componentes tiene sus propios bloques, que son los que van
a determinar su comportamiento, lo que cada uno de ellos va a hacer en
nuestra aplicación.
Para empezar, vamos a trabajar con el botón “Entrar” que hemos creado. Si
pulsamos sobre él veremos que se despliegan una serie de bloques que son
los que determinan el comportamiento del botón.
Elegiremos el bloque
Con esto estaremos diciéndole a App Inventor que cuando se haga clic en el
Botón1, haga algo. Qué debe hacer se lo decimos eligiendo otro bloque y
haciéndolo encajar con el anterior. En este caso elegimos un bloque que
pertenece al grupo de los “Integrados” y que está bajo la etiqueta “Control”
Le hemos dicho a App Inventor que cuando se haga clic en el Botón1deberá
abrir otra pantalla. Nos falta darle el nombre de la pantalla que queremos que
abra. Eso lo hacemos eligiendo un bloque del epígrafe “Texto”, que en principio
aparecerá vacío y en cuyo interior escribiremos el nombre de la pantalla que
queramos abrir.
Creando	
  una	
  aplicación	
  Android	
  para	
  un	
  Centro	
  escolar 	
  
y la pantalla que queremos que abra es la que se llama “Distribuidor”
Queda definido, por tanto, el comportamiento de nuestro botón: Al hacer clic
(pulsación corta) sobre él, se va a abrir la pantalla que se llama “Distribuidor”.
Es importante observar que si hubiéramos cambiado el nombre a nuestro botón
en lugar de aparecer “Botón1”, aparecería el nombre que le hubiéramos dado
al botón.
Como seguramente querremos ver si ha funcionado, vamos a ver nuestra
aplicación en funcionamiento.
Si hemos bajado e instalado la aplicación MIT AI2 Companion podremos
conectar el móvil al App Inventor que está corriendo en nuestro ordenador.
Para ello pulsamos sobre el botón “Conectar” que hay en la parte de arriba
En el menú que se despliega elegimos “AI Companion”, aplicación que
deberemos abrir en nuestro móvil.
Con nuestro AI Companion podemos escanear este QR o bien escribir el
código de seis letras que nos da. Si todo va bien (que no siempre va…)
veremos nuestra aplicación corriendo en el móvil.
Si nuestro AI Companion tiene problemas para conectarse podemos pulsar en
la etiqueta “Generar” y, en el menú que se despliega, elegiremos App (generar
código QR para el archivo .apk)
Creando	
  una	
  aplicación	
  Android	
  para	
  un	
  Centro	
  escolar 	
  
De cualquiera de las maneras… ¡Oh, sorpresa!
Lo primero que vemos al correr nuestra app en el móvil es que las cosas no
son como nosotros creíamos. Ni siquiera tal como aparecen en la pantalla del
Visor. Resulta que donde nuestro Visor nos muestra una imagen, en nuestro
móvil hay un fondo blanco.
Esto puede ser muy peligroso para nuestra integridad mental, pero tiene una
explicación: Si nos fijamos en el Diseñador de la pantalla Screen1, resulta que
le hemos dicho que pusiera una imagen de fondo (EDUCASTUR.png) pero… le
hemos dicho (en realidad estaba así por defecto) que el fondo debía ser de
color blanco. Y esa propiedad de la pantalla ha prevalecido sobre la imagen de
fondo que le habíamos dicho que pusiera. Si modificamos la propiedad y, en
lugar de ColorDeFondo“Blanco” ponemos “Ninguno”, nuestra imagen
aparecerá.
* Una pantalla que permita a nuestros usuarios moverse por las distintas
pantallas que formarán nuestra aplicación (Distribuidor)
Hemos creado un botón que nos lleva a una pantalla nueva. Yo le he llamado
“Distribuidor”. La idea es que esta sea la pantalla desde la que nos movamos
hacia otras pantallas y a la que regresemos cuando hayamos terminado.
La pantalla “Distribuidor” va a estar formada por varios botones que nos
permiten ir a distintas pantallas.
En nuestra aplicación de base ya están colocados los botones en el diseñador,
y sólo tendremos que trabajar con los bloques. También tendremos que fijar el
fondo, para lo cual utilizaremos el archivo: Fondodistribuidor.png
En los bloques tenemos establecido que el botón “Atrás” (típico de Android)
nos saca de la aplicación y la cierra.
* El Calendario Escolar del curso actual (Calendario).
Esta pantalla mostrará en una imagen estática el Calendario Escolar del curso
2014-2015. La imagen (Calendario1415.png) ha sido obtenida de una captura
de pantalla y rebajada en calidad para disminuir el peso de la aplicación.
No funciona (por ahora) el gesto de los dos dedos en App Inventor. Se
siente...
El botón “Atrás” de Android nos va a llevar a la pantalla “Distribuidor”
* Horarios de grupos(Horarios_Grupos)
En esta pantalla no habrá fondo.
Vamos a poner en el Visor dos imágenes. Utilizaremos los archivos
HorarioPrimero.png y HorarioSegundo.png
Crearemos dos botones (Primero y Segundo)Utilizando la Disposición
horizontal de los botones haremos que los dos botones se presenten uno al
lado del otro horizontalmente.
En los bloques jugaremos con la propiedad “Visible” / “Invisible” de las
imágenes, de forma que al pulsar uno u otro, se haga visible una de las dos
imágenes.
Es importante utilizar la propiedad “Ajustar al contenedor en la pantalla
“Diseñador” para que, aunque se produzca alguna distorsión, las imágenes se
ajusten a la pantalla del móvil
Creando	
  una	
  aplicación	
  Android	
  para	
  un	
  Centro	
  escolar 	
  
También cabría la posibilidad de declarar esta pantalla como “Horizontal” en
sus propiedades, para hacer que el ajuste de las imágenes a la pantalla del
móvil sea mejor
* Enlace a un calendario de gmail que muestre los menús del comedor
escolar (Menus_comedor)
Una de las aplicaciones a las que tenemos acceso cuando nos hacemos una
cuenta de correo de Gmail es un calendario donde podemos anotar los eventos
que queramos.
Nosotros lo vamos a utilizar para que las familias tengan acceso a los menús
del comedor escolar.
El componente que utilizaremos es el “VisorWeb”, que se encuentra en la
pestaña “Interfaz de Usuario”. Este componente será el único que pondremos
en la pantalla “Menus_comedor
En las propiedades del componente fijaremos la URL de nuestro calendario
La única dificultad que presenta es precisamente buscar la dirección que hay
que poner en el App Inventor.
Para ello tendremos que ir a Configuración del calendario>Dirección del
calendario>HTML
https://www.google.com/calendar/embed?src=d8tquupi23cgaonn6oc7hkrsdc%4
0group.calendar.google.com&ctz=Europe/Madrid
De la misma forma podríamos poner un enlace a la página web del Centro,
pero no nos vamos a parar en ello, que tenemos mucho trabajo… Sólo
tendríamos que sustituir la URL actual por la de la página de nuestro Centro
* Un botón para llamar directamente a nuestro Centro.
Este botón no nos va a llevar a una nueva pantalla.
Vamos a usar el componente “LlamadaDeTfno” (que se encuentra bajo la
pestaña “Social”) para realizar directamente una llamada de teléfono al Centro.
Arrastraremos el componente a la pantalla del “Visor” y, en sus propiedades,
estableceremos el número de teléfono al que vamos a llamar. Luego, en los
bloques, haremos que al pulsar el botón “BotLlama” se lance el componente
que realiza la llamada.
Hay un truquito interesante que nos puede permitir llamar directamente a los
teléfonos de cinco cifras del Principado. Desde cualquier teléfono móvil (que yo
sepa no funciona con los fijos…) podemos llamar directamente a un teléfono de
la red del Principado. Para ello sólo tenemos que anteponer al número de cinco
cifras un número de nueve cifras, que es el 662991569
Con esto vamos a dar nuestra aplicación por terminada. Seguramente
quedarán detalles, pero podremos ir puliéndola poco a poco..
Una vez que tenemos nuestra aplicación elaborada querremos compartirla con
otras personas.
Puede que solamente queramos hacerles llegar nuestra aplicación para que la
usen, pero sin que tengan opción a modificarla.
O tal vez queramos compartir nuestra aplicación con alguien a quien le
queramos dar la capacidad de modificar nuestra aplicación.
En el primer caso deberemos genera un archivo con extensión .apk Esto lo
haremos desde la etiqueta “Generar” que se encuentra en la parte de arriba,
más o menos hacia el centro. Pulsando sobre ella se despliega un menú que
nos ofrece dos opciones:
Creando	
  una	
  aplicación	
  Android	
  para	
  un	
  Centro	
  escolar 	
  
Si elegimos la primera, tras unos segundos (bastantes segundos a veces) nos
aparecerá en la pantalla un código QR. Si lo escaneamos con AI Companion
nos bajará la aplicación y nos ofrecerá instalarla en nuestro dispositivo.
La segunda nos generará un archivo apk que automáticamente se bajará y
aparecerá en las Descargas de nuestro ordenador. Este archivo es un
ejecutable de Android. No es un ejecutable de Windows, por lo cual se puede
enviar por Gmail, por ejemplo. Gmail no admite ejecutables de Windows.
El archivo .apk lo podemos compartir como queramos: Podemos subirlo a
Dropbox o enviarlo por correo electrónico o por cualquier otro medio que nos
permita enviar archivos
Si lo que queremos es que otro usuario tenga la posibilidad de editar nuestra
aplicación e incluir sus propios cambios, podemos compartir con él un archivo
con extensión .aia
Podemos obtener el archivo aia pulsando en la etiqueta “Proyectos”, que está
arriba a la izquierda. En el menú que se desplegará elegiremos
En la última versión de App Inventor ha aparecido una nueva opción para
compartir nuestras aplicaciones: La Galería. Como recordaréis ya la hemos
utilizado al comenzar nuestro trabajo. Es importante tener en cuenta que las
aplicaciones que se bajan de la galería son editables. Es decir, que si subimos
nuestra aplicación a la Galería la estaremos poniendo por completo a
disposición de otros usuarios
También es posible que queramos poner nuestra aplicación a disposición de
toda la comunidad educativa del Centro. La primera opción será, sin duda
publicarla en la Play Store de Android. Este repositorio (almacén de software)
tiene algunas ventajas y algunos inconvenientes. Entre las ventajas está el que
es el repositorio más conocido y las descargas se hacen muy rápidamente.
Pero no deja de tener sus inconvenientes. El principal de ellos es que para
convertirse en “desarrollador” (lo cual es imprescindible para poder subir
aplicaciones) hay que pagar. No sé exactamente lo que cuesta ahora, pero
cuando yo me hice desarrollador costaba 25 $ (que en aquel momento eran 20
€.
Existen repositorios libres, donde se pueden subir las aplicaciones sin tener
que pagar por ello. Su problema principal: Que los usuarios desconfían de
ellos, sobre todo porque cuando van a descargar algo desde allí su teléfono les
avisa de que son “fuentes desconocidas”, lo cual hace que se retraigan de
instalar desde allí unos usuarios que habitualmente aceptan darles a las
aplicaciones todos los permisos que pidan, sin preocuparse por ello…
Un ejemplo de uno de estos repositorios libres sería F-Droid. Hay otros.
Para comenzar a subir nuestras aplicaciones deberemos entrar en la dirección
https://play.google.com/apps/publish/signup/
Creando	
  una	
  aplicación	
  Android	
  para	
  un	
  Centro	
  escolar 	
  
A partir de ahí iniciaremos el proceso que nos llevará a convertir nuestro
archivo de extensión .apk en una hermosa aplicación publicada en la Play
Store.
El proceso es algo complejo y no es este el lugar más indicado para abordarlo
en todos sus detalles.
Baste decir que los requisitos para publicar la aplicación son MUY rigurosos y
que deberemos tener preparados los siguientes elementos:
- Varias capturas de pantalla del teléfono y/o de la tablet en la que
estemos corriendo la aplicación
- Un icono de 512 por 512 píxeles. Tiene que ser exactamente de ese
tamaño. No acepta otras medidas.
- Una imagen de 1024 por 500 píxeles Tiene que ser exactamente de ese
tamaño. No acepta otras medidas.
Luego hay que rellenar todos los apartados que nos pida. Cuando hayamos
terminado todo el proceso, nuestro apk podrá subir a la Play Store, pero…
nuestra aplicación no aparecerá publicada inmediatamente, sino que tardará
unas horas en estar disponible para su descarga.
Esto mismo sucederá cuando queramos subir actualizaciones de nuestra
aplicación. No aparecerán inmediatamente, sino que se demorarán unas horas
hasta aparecer publicadas.
En este apartado es importante señalar que cuando subamos una versión
nueva de nuestra aplicación deberemos cambiar la propiedad
“CódigoDeVersión” y/o “NúmeroDeVersión” (yo, la verdad, para curarme en
salud cambio los dos números a la vez)
Una vez que hayamos subido nuestras aplicaciones tendremos acceso a la
“Consola del desarrollador”. La dirección para entrar en ella es:
https://play.google.com/apps/publish/
Desde la consola podremos, sobre todo, saber cómo evoluciona la utilización
de todas nuestras aplicaciones. Cuántos usuarios la han bajado y cuántos la
tienen instalada en sus dispositivos. También tendremos acceso a los
comentarios que hagan los usuarios y, MUY IMPORTANTE… podremos
responder a los comentarios. Tanto los comentarios de los usuarios como los
nuestros aparecerán, junto con la aplicación en la Play Store.
Y, por ahora, nada más. Espero que estos apuntes te hayan sido de utilidad o
que, al menos, sirvan para que tu curiosidad te lleve a aprender App Inventor.
Si quieres hacerme alguna pregunta o comentario, yo estaré a la escucha en la
dirección de correo electrónico
nntt@matajove.es

Más contenido relacionado

La actualidad más candente (16)

App inventor
App inventorApp inventor
App inventor
 
Basicos app inventor-manual-de-introduccion
Basicos app inventor-manual-de-introduccionBasicos app inventor-manual-de-introduccion
Basicos app inventor-manual-de-introduccion
 
Hola mundo
Hola mundoHola mundo
Hola mundo
 
Controles y Objetos Android Studio (Actualizada 2016)
Controles y Objetos Android Studio (Actualizada 2016)Controles y Objetos Android Studio (Actualizada 2016)
Controles y Objetos Android Studio (Actualizada 2016)
 
App inventor primeros pasos i
App inventor   primeros pasos iApp inventor   primeros pasos i
App inventor primeros pasos i
 
App inventor
App inventorApp inventor
App inventor
 
Breve introducción a Android Apps
Breve introducción a Android AppsBreve introducción a Android Apps
Breve introducción a Android Apps
 
MIT App Inventor 2 "Aplicacion"
MIT App Inventor 2 "Aplicacion"MIT App Inventor 2 "Aplicacion"
MIT App Inventor 2 "Aplicacion"
 
Desarrollo de aplicaciones adroid
Desarrollo de aplicaciones adroidDesarrollo de aplicaciones adroid
Desarrollo de aplicaciones adroid
 
App inventor
App inventorApp inventor
App inventor
 
Android
AndroidAndroid
Android
 
Android
AndroidAndroid
Android
 
Cetis 109(2)
Cetis 109(2)Cetis 109(2)
Cetis 109(2)
 
Gadget review
Gadget reviewGadget review
Gadget review
 
Aplicacion sencilla en AppInventor
Aplicacion sencilla en AppInventorAplicacion sencilla en AppInventor
Aplicacion sencilla en AppInventor
 
Tutorial app inventor
Tutorial app inventorTutorial app inventor
Tutorial app inventor
 

Similar a 266521557 apuntes-unidad-formativa-app-inventor

Guia de iniciación en App Inventor
Guia de iniciación en App InventorGuia de iniciación en App Inventor
Guia de iniciación en App InventorCristina Chandoha
 
Guia iniciacion-app-inventor
Guia iniciacion-app-inventorGuia iniciacion-app-inventor
Guia iniciacion-app-inventorluis miguel LEÓN
 
Guia iniciacion-app-inventor
Guia iniciacion-app-inventorGuia iniciacion-app-inventor
Guia iniciacion-app-inventorRalAgundezGuantes
 
Google app inventor a
Google app inventor aGoogle app inventor a
Google app inventor aAndres CM
 
Google app inventor
Google app inventorGoogle app inventor
Google app inventorJorge Taipe
 
Crear aplicaciones para Android en Google
Crear aplicaciones para Android en GoogleCrear aplicaciones para Android en Google
Crear aplicaciones para Android en GoogleSanti Yaguargos
 
programacion.en android.joseluis.yama.may.isc.j4
programacion.en android.joseluis.yama.may.isc.j4programacion.en android.joseluis.yama.may.isc.j4
programacion.en android.joseluis.yama.may.isc.j4LuiS YmAY
 
Control de proyectos app arduino I
Control de proyectos app arduino IControl de proyectos app arduino I
Control de proyectos app arduino Itoni
 
Google App inventor
Google App inventorGoogle App inventor
Google App inventorTefa Yánez
 
Ejercicios_Basicos_de_netbeans (1).doc
Ejercicios_Basicos_de_netbeans (1).docEjercicios_Basicos_de_netbeans (1).doc
Ejercicios_Basicos_de_netbeans (1).docAnaLpez275
 
Ejercicios_Basicos_de_netbeans.doc
Ejercicios_Basicos_de_netbeans.docEjercicios_Basicos_de_netbeans.doc
Ejercicios_Basicos_de_netbeans.docAnaLpez275
 
Ejercicios_Basicos_de_netbeans (2).doc
Ejercicios_Basicos_de_netbeans (2).docEjercicios_Basicos_de_netbeans (2).doc
Ejercicios_Basicos_de_netbeans (2).docAnaLpez275
 

Similar a 266521557 apuntes-unidad-formativa-app-inventor (20)

Guia iniciacion-app-inventor
Guia iniciacion-app-inventorGuia iniciacion-app-inventor
Guia iniciacion-app-inventor
 
Guia iniciacion-app-inventor
Guia iniciacion-app-inventorGuia iniciacion-app-inventor
Guia iniciacion-app-inventor
 
Guia de iniciación en App Inventor
Guia de iniciación en App InventorGuia de iniciación en App Inventor
Guia de iniciación en App Inventor
 
Guia iniciacion-app-inventor
Guia iniciacion-app-inventorGuia iniciacion-app-inventor
Guia iniciacion-app-inventor
 
Guia iniciacion-app-inventor
Guia iniciacion-app-inventorGuia iniciacion-app-inventor
Guia iniciacion-app-inventor
 
Trabajo de ntics ii
Trabajo de ntics iiTrabajo de ntics ii
Trabajo de ntics ii
 
Google app inventor a
Google app inventor aGoogle app inventor a
Google app inventor a
 
Google app inventor
Google app inventorGoogle app inventor
Google app inventor
 
Android studio
Android studioAndroid studio
Android studio
 
Aplicacion
AplicacionAplicacion
Aplicacion
 
Imperial math -_expo
Imperial math -_expoImperial math -_expo
Imperial math -_expo
 
Imperial math- Presentacion
Imperial math- PresentacionImperial math- Presentacion
Imperial math- Presentacion
 
Crear aplicaciones para Android en Google
Crear aplicaciones para Android en GoogleCrear aplicaciones para Android en Google
Crear aplicaciones para Android en Google
 
programacion.en android.joseluis.yama.may.isc.j4
programacion.en android.joseluis.yama.may.isc.j4programacion.en android.joseluis.yama.may.isc.j4
programacion.en android.joseluis.yama.may.isc.j4
 
Introduccion a app inventor
Introduccion a app inventorIntroduccion a app inventor
Introduccion a app inventor
 
Control de proyectos app arduino I
Control de proyectos app arduino IControl de proyectos app arduino I
Control de proyectos app arduino I
 
Google App inventor
Google App inventorGoogle App inventor
Google App inventor
 
Ejercicios_Basicos_de_netbeans (1).doc
Ejercicios_Basicos_de_netbeans (1).docEjercicios_Basicos_de_netbeans (1).doc
Ejercicios_Basicos_de_netbeans (1).doc
 
Ejercicios_Basicos_de_netbeans.doc
Ejercicios_Basicos_de_netbeans.docEjercicios_Basicos_de_netbeans.doc
Ejercicios_Basicos_de_netbeans.doc
 
Ejercicios_Basicos_de_netbeans (2).doc
Ejercicios_Basicos_de_netbeans (2).docEjercicios_Basicos_de_netbeans (2).doc
Ejercicios_Basicos_de_netbeans (2).doc
 

Más de xavazque2

258939538 dumping
258939538 dumping258939538 dumping
258939538 dumpingxavazque2
 
380914324 poo-kotlin
380914324 poo-kotlin380914324 poo-kotlin
380914324 poo-kotlinxavazque2
 
146817358 android
146817358 android146817358 android
146817358 androidxavazque2
 
Curso profesional-de-desarrollo-de-aplicaciones-android-con-kotlin
Curso profesional-de-desarrollo-de-aplicaciones-android-con-kotlinCurso profesional-de-desarrollo-de-aplicaciones-android-con-kotlin
Curso profesional-de-desarrollo-de-aplicaciones-android-con-kotlinxavazque2
 
364196144 hogan-pensamiento-no-verbal-comunicacion-y-juego
364196144 hogan-pensamiento-no-verbal-comunicacion-y-juego364196144 hogan-pensamiento-no-verbal-comunicacion-y-juego
364196144 hogan-pensamiento-no-verbal-comunicacion-y-juegoxavazque2
 
325940441 motion-ui
325940441 motion-ui325940441 motion-ui
325940441 motion-uixavazque2
 
371081023 curso-desarrollo-android
371081023 curso-desarrollo-android371081023 curso-desarrollo-android
371081023 curso-desarrollo-androidxavazque2
 
4.1. validaciones-y-excepciones
4.1. validaciones-y-excepciones4.1. validaciones-y-excepciones
4.1. validaciones-y-excepcionesxavazque2
 
3.1 mvc-mvvm-app model-binding
3.1 mvc-mvvm-app model-binding3.1 mvc-mvvm-app model-binding
3.1 mvc-mvvm-app model-bindingxavazque2
 
5.1. stateles stateful-protocolo_http
5.1. stateles stateful-protocolo_http5.1. stateles stateful-protocolo_http
5.1. stateles stateful-protocolo_httpxavazque2
 
435338801 programacion-mobile-android
435338801 programacion-mobile-android435338801 programacion-mobile-android
435338801 programacion-mobile-androidxavazque2
 
457126889 android-pdf
457126889 android-pdf457126889 android-pdf
457126889 android-pdfxavazque2
 
7. react js-1
7. react js-17. react js-1
7. react js-1xavazque2
 
484719815 pidiendo-ayuda-a-los-angeles-pdf
484719815 pidiendo-ayuda-a-los-angeles-pdf484719815 pidiendo-ayuda-a-los-angeles-pdf
484719815 pidiendo-ayuda-a-los-angeles-pdfxavazque2
 
484717855 transmutacion-de-energias-pdf
484717855 transmutacion-de-energias-pdf484717855 transmutacion-de-energias-pdf
484717855 transmutacion-de-energias-pdfxavazque2
 
2.1. arena-y-binding
2.1. arena-y-binding2.1. arena-y-binding
2.1. arena-y-bindingxavazque2
 
411958729 curso-de-delphi-pdf
411958729 curso-de-delphi-pdf411958729 curso-de-delphi-pdf
411958729 curso-de-delphi-pdfxavazque2
 

Más de xavazque2 (20)

258939538 dumping
258939538 dumping258939538 dumping
258939538 dumping
 
380914324 poo-kotlin
380914324 poo-kotlin380914324 poo-kotlin
380914324 poo-kotlin
 
146817358 android
146817358 android146817358 android
146817358 android
 
Curso profesional-de-desarrollo-de-aplicaciones-android-con-kotlin
Curso profesional-de-desarrollo-de-aplicaciones-android-con-kotlinCurso profesional-de-desarrollo-de-aplicaciones-android-con-kotlin
Curso profesional-de-desarrollo-de-aplicaciones-android-con-kotlin
 
364196144 hogan-pensamiento-no-verbal-comunicacion-y-juego
364196144 hogan-pensamiento-no-verbal-comunicacion-y-juego364196144 hogan-pensamiento-no-verbal-comunicacion-y-juego
364196144 hogan-pensamiento-no-verbal-comunicacion-y-juego
 
325940441 motion-ui
325940441 motion-ui325940441 motion-ui
325940441 motion-ui
 
371081023 curso-desarrollo-android
371081023 curso-desarrollo-android371081023 curso-desarrollo-android
371081023 curso-desarrollo-android
 
4.1. validaciones-y-excepciones
4.1. validaciones-y-excepciones4.1. validaciones-y-excepciones
4.1. validaciones-y-excepciones
 
3.1 mvc-mvvm-app model-binding
3.1 mvc-mvvm-app model-binding3.1 mvc-mvvm-app model-binding
3.1 mvc-mvvm-app model-binding
 
5.1. stateles stateful-protocolo_http
5.1. stateles stateful-protocolo_http5.1. stateles stateful-protocolo_http
5.1. stateles stateful-protocolo_http
 
435338801 programacion-mobile-android
435338801 programacion-mobile-android435338801 programacion-mobile-android
435338801 programacion-mobile-android
 
457126889 android-pdf
457126889 android-pdf457126889 android-pdf
457126889 android-pdf
 
7. react js-1
7. react js-17. react js-1
7. react js-1
 
Tp1
Tp1Tp1
Tp1
 
484719815 pidiendo-ayuda-a-los-angeles-pdf
484719815 pidiendo-ayuda-a-los-angeles-pdf484719815 pidiendo-ayuda-a-los-angeles-pdf
484719815 pidiendo-ayuda-a-los-angeles-pdf
 
484717855 transmutacion-de-energias-pdf
484717855 transmutacion-de-energias-pdf484717855 transmutacion-de-energias-pdf
484717855 transmutacion-de-energias-pdf
 
5.layouts
5.layouts5.layouts
5.layouts
 
6.2. js
6.2. js6.2. js
6.2. js
 
2.1. arena-y-binding
2.1. arena-y-binding2.1. arena-y-binding
2.1. arena-y-binding
 
411958729 curso-de-delphi-pdf
411958729 curso-de-delphi-pdf411958729 curso-de-delphi-pdf
411958729 curso-de-delphi-pdf
 

Último

Avances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estosAvances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estossgonzalezp1
 
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptxEVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptxJorgeParada26
 
pruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNITpruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNITMaricarmen Sánchez Ruiz
 
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptxEL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptxMiguelAtencio10
 
Avances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvanaAvances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvanamcerpam
 
How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.FlorenciaCattelani
 
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptxPROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptxAlan779941
 
Modulo-Mini Cargador.................pdf
Modulo-Mini Cargador.................pdfModulo-Mini Cargador.................pdf
Modulo-Mini Cargador.................pdfAnnimoUno1
 
Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21mariacbr99
 
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...JohnRamos830530
 
Refrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdf
Refrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdfRefrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdf
Refrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdfvladimiroflores1
 

Último (11)

Avances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estosAvances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estos
 
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptxEVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
 
pruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNITpruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNIT
 
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptxEL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
 
Avances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvanaAvances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvana
 
How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.
 
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptxPROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
 
Modulo-Mini Cargador.................pdf
Modulo-Mini Cargador.................pdfModulo-Mini Cargador.................pdf
Modulo-Mini Cargador.................pdf
 
Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21
 
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
 
Refrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdf
Refrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdfRefrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdf
Refrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdf
 

266521557 apuntes-unidad-formativa-app-inventor

  • 1. UNIDAD FORMATIVA CREANDO UNA APLICACIÓN PARA UN CENTRO ESCOLAR CPR GIJÓN MAYO 2015 Eladio Díaz Camblor Creando una aplicación Android para un centro escolarpor Eladio Díaz Camblor se distribuye bajo una Licencia CreativeCommons Atribución-NoComercial-CompartirIgual 4.0 Internacional.
  • 2. Creando  una  aplicación  Android  para  un  Centro  escolar  
  • 3. Creando  una  aplicación  Android  para  un  Centro  escolar   En esta Unidad Formativa vamos a trabajar con la aplicación web App Inventor2, creada y mantenida por el MIT, es decir, el Instituto de Tecnología de Massachussets. La que vamos a utilizar es la segunda versión de App Inventor. Hubo una versión anterior, pero actualmente ha quedado descontinuada. No obstante, aún se puede utilizar y se encuentran por Internet informaciones acerca de ella. El funcionamiento de App Inventor2 es muy similar a un entorno de programación que se llama Scratch-diseñado para ser utilizado por niños- A diferencia de Scratch, que se instala en el ordenador en que se vaya a utilizar, App Inventor lo podremos utilizar desde cualquier ordenador conectado a Internet. Basta con llamar a un navegador. A pesar de su aspecto inocente, App Inventor es un entorno de programación potentísimo y bastante complejo. Así que os advierto de que no tengo todas las respuestas. Ni siquiera muchas respuestas. Pero quien seguramente las tiene todas es la amplísima comunidad de usuarios de App Inventor que podréis encontrar en Internet, de modo que cuando nos enfrentemos a un problema o queramos saber cómo se hace alguna cosa casi siempre nos encontraremos con que alguien ya ha tenido el mismo problema, lo ha resuelto y ha publicado su solución en la Red. Y si no, siempre nos quedarán las amplísimas opciones de ayuda del propio App Inventor. Para entrar en App Inventor es imprescindible tener una cuenta de correo en gmail. Damos por hecho que la tenéis. Para lanzar esta aplicación web podemos utilizar cualquier navegador, aunque quizá convenga usar Chrome, por aquello de que Google y el MIT están muy cercanos entre sí. Entraremos en App Inventor poniendo en la barra de direcciones del navegador la dirección: ai2.appinventor.mit.edu Nos aparecerá un listado con la dirección o direcciones de correo de Gmail que tengamos, si tenemos más de una y nos solicitará permiso para relacionar la dirección de email con nuestro App Inventor. Una vez que hayamos concedido el permiso, se lanzará la aplicación web. Veremos una pantalla de fondo y otra pantalla emergente que se abre. Esta pantalla inicial no es estática, sino que cambia en el tiempo y con frecuencia da cuenta de cambios que el MIT va introduciendo en la aplicación para mejorarla. En la pantalla emergente le damos al botón “Continue” y entramos en la aplicación. Como todos los epígrafes aparecen e inglés, vamos a ponerlos en español. Para ello pulsamos sobre la palabra “English” que hay arriba a la derecha. Se despliega un menú donde aparece la palabra “Español”. Una vez que hayamos pulsado sobre ella se repetirá el proceso de entrada, pero esta vez en español.
  • 4. Creando  una  aplicación  Android  para  un  Centro  escolar   Con la aplicación hablando ya nuestro idioma, vamos a situarnos: Cuando entramos en la aplicación nos encontramos en la pantalla que se llama “Diseñador”. En ella hay dos partes, una horizontal y otra vertical. En la parte horizontal nos encontramos dos zonas, una gris y otra verde. En la parte gris, de izquierda a derecha veremos una etiqueta que nos dice que estamos en App Inventor, que es del MIT y que es una beta (una versión de pruebas). Más a la derecha tenemos “Proyectos”. Si picamos ahí podremos gestionar todos nuestros proyectos: Guardarlos, exportarlos, etc. Más a la derecha, “Conectar” nos da opciones que nos permiten ver funcionando en nuestro móvil la aplicación en la que estamos trabajando. “Generar” nos proporciona, en distintos formatos, los archivos necesarios para instalar la aplicación en nuestro dispositivo. “Ayuda”… ¿Alguna duda respecto a lo que hace? En otro grupo de etiquetas está “Mis proyectos”, que nos da acceso directo a gestionar las aplicaciones que hayamos elaborado “Gallery” es una novedad en App Inventor. Nos da acceso a una infinidad de aplicaciones que otros usuarios han elaborado y han subido a los servidores de App Inventor. La utilizaremos enseguida. “Guía” es otra página de ayuda online de App Inventor. “Informar de un problema” nos pone en contacto con Google Groups para dar a conocer fallos que hayamos localizado en App Inventor “Español” es un botón que ya hemos utilizado y que nos permite cambiar el idioma en que queramos que se vea App Inventor. Se puede elegir entre Español, Inglés, Italiano, y dos modalidades del idioma chino (creo…) En la parte verde tenemos el nombre de la aplicación en la que estemos trabajando. Un grupo de tres botones nos permitirá gestionar las pantallas que formen nuestra aplicación. Podremos añadir o eliminar pantallas (a las que la traducción al español de App Inventor llama “ventanas”) Más a la derecha, dos botones: “Diseñador” y “Bloques” nos esperan. Pronto oiremos hablar de ellos… En la parte inferior nos encontramos cinco zonas, que son: - “Paleta”: Cuando entramos, aparece abierta “Interfaz de usuario”, una de las muchas etiquetas que podemos elegir. Al desplegar las etiquetas se nos van mostrando una enorme cantidad de componentes que vamos a poder utilizar en nuestras aplicaciones, ordenadas por categorías.
  • 5. Creando  una  aplicación  Android  para  un  Centro  escolar   - “Visor”: Tiene el aspecto de la pantalla de un móvil. Sin embargo, su comportamiento no es exactamente el que va a tener la aplicación. Para ver nuestra aplicación en funcionamiento vamos a necesitar un “emulador” o la aplicación AI Companion, que se puede bajar desde la Play Store. - “Componentes”: Los componentes son los elementos que van a aparecer en nuestra pantalla, los “ladrillos” que forman nuestra aplicación. Hay componentes que son visibles en la pantalla y otros que no lo son. Para utilizar un componente sólo tenemos que picar sobre él y arrastrarlo a la pantalla del “Visor”. - “Propiedades”: de cada uno de los componentes. Determinan cómo empieza el componente en la pantalla. Se pueden cambiar para modificar el aspecto que el componente va a presentar en la pantalla. También se pueden cambiar desde los “Bloques” - “Medios”: Aquí van a aparecer los archivos (imágenes, audio, etc) que hayamos subido para que formen parte de nuestra aplicación. Están disponibles para utilizarlos desde cualquiera de las pantallas de la aplicación. EMPEZAMOS A CONSTRUIRNUESTRA APLICACIÓN Nuestro objetivo principal en esta Unidad Formativa será crear una sencilla aplicación que pueda ser de utilidad para las familias de nuestros alumnos proporcionando distintas informaciones relativas al Centro. Lo que vamos a ver a continuación no sino una limitadísima muestra de las capacidades de App Inventor. Vuestra imaginación y las necesidades de vuestro Centro os dictarán sin duda una infinidad de mejoras. Para facilitar nuestro trabajo, y sobre todo para ahorrar tiempo, he colgado en la Galería una aplicación que vamos a buscar y a bajar a nuestro App Inventor. La aplicación se llama: AppCPRGijon Una vez que la hayamos bajado a nuestro App Inventor tendremos ya nuestra aplicación “precocinada” y empezaremos a trabajar con ella. Nuestra aplicación va a tener la siguiente estructura de pantallas: * Una pantalla de presentación. (Screen1) No es imprescindible y puede que ni siquiera sea recomendable establecer una pantalla inicial, pero nos va a servir para ver algunos conceptos básicos de App Inventor. Esta primera pantalla será a modo de presentación del Centro conteniendo, por ejemplo, una imagen inicial y sobre ella una etiqueta con una inscripción y un botón que nos pasará a la ventana siguiente Las propiedades de esta primera ventana son mucho más complejas que las del resto de las ventanas de la aplicación, y muchas de ellas no vuelven a
  • 6. Creando  una  aplicación  Android  para  un  Centro  escolar   aparecer en otros lugares de la aplicación, por lo que deberemos prestar especial atención a definirlas con mucho cuidado. Si tuviéramos más tiempo, podríamos trastear con ellas, pero vamos a ceñirnos a las propiedades más importantes: El cuadro “Acerca de” recoge información relativa a nuestra aplicación que vamos a poder ver desde la propia aplicación, una vez instalada en el móvil. Cuando creamos la ventana (con el botón “Añadir ventana”) fijamos el nombre de esa ventana, que luego no se podrá cambiar. Sí podremos cambiar su título (que es lo que ve el usuario). El nombre sirve para trabajar con las ventanas internamente. Código y nombre de Versión. Al principio no tienen mayor importancia pero sí que son críticos para subir actualizaciones. La Play Store no nos permitirá subir una actualización si no cambiamos el código y nombre de la versión Icono de la aplicación. Es el icono con el que la aplicación aparecerá en el móvil, una vez instalada. Debería ser cuadrado y no muy grande. Si no definimos el icono, aparecerá por defecto un icono genérico con el robot de Android. Empezamos a trabajar en nuestra primera pantalla. Lo primero que vamos a hacer es poner una imagen de fondo. En el apartado “Medios” de nuestra aplicación vemos un archivo que se llama EDUCASTUR.png. Es el que vamos a poner como imagen de fondo. La imagen se va a ajustar automáticamente al tamaño de la pantalla del teléfono. Es conveniente que la imagen que elijamos como fondo no sea muy diferente en cuanto a proporciones a la propia pantalla del móvil, para evitar que se produzcan distorsiones fuertes. También hay que prestar atención al “peso” de las imágenes, si no queremos que el peso de nuestra aplicación se dispare (los usuarios tienden a no instalar aplicaciones muy “pesadas”) Podemos jugar con la calidad de la imagen, teniendo en cuenta que al reducir tamaño de las imágenes, por ejemplo en la pantalla del móvil, vamos a “ganar” calidad. Vamos a poner una etiqueta sobre nuestro fondo. Para ello, en la zona “Interfaz de usuario” picaremos sobre “Etiqueta” y arrastraremos una a la zona “Visor” Veremos que la etiqueta aparece también en la zona “Componentes” y en la zona “Propiedades” veremos las propiedades de la etiqueta. Podemos cacharrear un poquito con las propiedades hasta que consideremos que nos queda guapa. Ahora haremos lo mismo con un “Botón”, arrastrándolo desde la “Interfaz de usuario hasta el “Visor” El botón tiene sus “Propiedades”, que aparecen a la derecha. Son bastante intuitivas, por lo que es fácil hacerse con ellas sólo con cacharrear un poco. Hay una propiedad importante, que es la que aparece como “Imagen”. En la práctica nos permite convertir cualquier imagen en un botón activo o crear nuestros propios botones fuera del App Inventor y utilizarlos luego en nuestra aplicación.
  • 7. Creando  una  aplicación  Android  para  un  Centro  escolar   Vamos a poner a nuestro botón el aspecto que queramos y una leyenda que diga “ENTRAR” o cualquier cosa parecida. Hasta ahora, todo bien. Hemos puesto un fondo y dos componentes cuyo aspecto pudimos modificar desde “Propiedades” pero… ¿Cómo se comportan esos componentes? ¿Cómo puedo decirles qué es lo que deben hacer? Para eso picaremos en botón “Bloques” que hay arriba, a la derecha. La parte de debajo de la pantalla cambia por completo y queda ahora dividida en tres zonas: “Bloques”, “Visor” y “Medios”. En los “Medios” volveremos a ver todos los archivos que hemos subido para que formen parte de nuestra aplicación. En la zona “Bloques” hay dos partes. Arriba vemos el epígrafe “Integrados” y una serie de categorías. Contienen bloques que van a estar presentes en todas las pantallas de la aplicación. En la parte de abajo están los componentes que hemos utilizado en nuestra pantalla trabajando en la zona “Diseñador” Cuando pulsamos sobre una de las categorías se despliegan una serie de bloques que vamos a poder utilizar pulsando sobre ellos y arrastrándolos al “Visor” Exactamente lo mismo sucede cuando pulsamos sobre cualquiera de los componentes que forman parte de nuestra pantalla. Cada uno de los componentes tiene sus propios bloques, que son los que van a determinar su comportamiento, lo que cada uno de ellos va a hacer en nuestra aplicación. Para empezar, vamos a trabajar con el botón “Entrar” que hemos creado. Si pulsamos sobre él veremos que se despliegan una serie de bloques que son los que determinan el comportamiento del botón. Elegiremos el bloque Con esto estaremos diciéndole a App Inventor que cuando se haga clic en el Botón1, haga algo. Qué debe hacer se lo decimos eligiendo otro bloque y haciéndolo encajar con el anterior. En este caso elegimos un bloque que pertenece al grupo de los “Integrados” y que está bajo la etiqueta “Control” Le hemos dicho a App Inventor que cuando se haga clic en el Botón1deberá abrir otra pantalla. Nos falta darle el nombre de la pantalla que queremos que abra. Eso lo hacemos eligiendo un bloque del epígrafe “Texto”, que en principio aparecerá vacío y en cuyo interior escribiremos el nombre de la pantalla que queramos abrir.
  • 8. Creando  una  aplicación  Android  para  un  Centro  escolar   y la pantalla que queremos que abra es la que se llama “Distribuidor” Queda definido, por tanto, el comportamiento de nuestro botón: Al hacer clic (pulsación corta) sobre él, se va a abrir la pantalla que se llama “Distribuidor”. Es importante observar que si hubiéramos cambiado el nombre a nuestro botón en lugar de aparecer “Botón1”, aparecería el nombre que le hubiéramos dado al botón. Como seguramente querremos ver si ha funcionado, vamos a ver nuestra aplicación en funcionamiento. Si hemos bajado e instalado la aplicación MIT AI2 Companion podremos conectar el móvil al App Inventor que está corriendo en nuestro ordenador. Para ello pulsamos sobre el botón “Conectar” que hay en la parte de arriba En el menú que se despliega elegimos “AI Companion”, aplicación que deberemos abrir en nuestro móvil. Con nuestro AI Companion podemos escanear este QR o bien escribir el código de seis letras que nos da. Si todo va bien (que no siempre va…) veremos nuestra aplicación corriendo en el móvil. Si nuestro AI Companion tiene problemas para conectarse podemos pulsar en la etiqueta “Generar” y, en el menú que se despliega, elegiremos App (generar código QR para el archivo .apk)
  • 9. Creando  una  aplicación  Android  para  un  Centro  escolar   De cualquiera de las maneras… ¡Oh, sorpresa! Lo primero que vemos al correr nuestra app en el móvil es que las cosas no son como nosotros creíamos. Ni siquiera tal como aparecen en la pantalla del Visor. Resulta que donde nuestro Visor nos muestra una imagen, en nuestro móvil hay un fondo blanco. Esto puede ser muy peligroso para nuestra integridad mental, pero tiene una explicación: Si nos fijamos en el Diseñador de la pantalla Screen1, resulta que le hemos dicho que pusiera una imagen de fondo (EDUCASTUR.png) pero… le hemos dicho (en realidad estaba así por defecto) que el fondo debía ser de color blanco. Y esa propiedad de la pantalla ha prevalecido sobre la imagen de fondo que le habíamos dicho que pusiera. Si modificamos la propiedad y, en lugar de ColorDeFondo“Blanco” ponemos “Ninguno”, nuestra imagen aparecerá. * Una pantalla que permita a nuestros usuarios moverse por las distintas pantallas que formarán nuestra aplicación (Distribuidor) Hemos creado un botón que nos lleva a una pantalla nueva. Yo le he llamado “Distribuidor”. La idea es que esta sea la pantalla desde la que nos movamos hacia otras pantallas y a la que regresemos cuando hayamos terminado. La pantalla “Distribuidor” va a estar formada por varios botones que nos permiten ir a distintas pantallas. En nuestra aplicación de base ya están colocados los botones en el diseñador, y sólo tendremos que trabajar con los bloques. También tendremos que fijar el fondo, para lo cual utilizaremos el archivo: Fondodistribuidor.png En los bloques tenemos establecido que el botón “Atrás” (típico de Android) nos saca de la aplicación y la cierra. * El Calendario Escolar del curso actual (Calendario). Esta pantalla mostrará en una imagen estática el Calendario Escolar del curso 2014-2015. La imagen (Calendario1415.png) ha sido obtenida de una captura de pantalla y rebajada en calidad para disminuir el peso de la aplicación. No funciona (por ahora) el gesto de los dos dedos en App Inventor. Se siente... El botón “Atrás” de Android nos va a llevar a la pantalla “Distribuidor” * Horarios de grupos(Horarios_Grupos) En esta pantalla no habrá fondo. Vamos a poner en el Visor dos imágenes. Utilizaremos los archivos HorarioPrimero.png y HorarioSegundo.png Crearemos dos botones (Primero y Segundo)Utilizando la Disposición horizontal de los botones haremos que los dos botones se presenten uno al lado del otro horizontalmente. En los bloques jugaremos con la propiedad “Visible” / “Invisible” de las imágenes, de forma que al pulsar uno u otro, se haga visible una de las dos imágenes. Es importante utilizar la propiedad “Ajustar al contenedor en la pantalla “Diseñador” para que, aunque se produzca alguna distorsión, las imágenes se ajusten a la pantalla del móvil
  • 10. Creando  una  aplicación  Android  para  un  Centro  escolar   También cabría la posibilidad de declarar esta pantalla como “Horizontal” en sus propiedades, para hacer que el ajuste de las imágenes a la pantalla del móvil sea mejor * Enlace a un calendario de gmail que muestre los menús del comedor escolar (Menus_comedor) Una de las aplicaciones a las que tenemos acceso cuando nos hacemos una cuenta de correo de Gmail es un calendario donde podemos anotar los eventos que queramos. Nosotros lo vamos a utilizar para que las familias tengan acceso a los menús del comedor escolar. El componente que utilizaremos es el “VisorWeb”, que se encuentra en la pestaña “Interfaz de Usuario”. Este componente será el único que pondremos en la pantalla “Menus_comedor En las propiedades del componente fijaremos la URL de nuestro calendario La única dificultad que presenta es precisamente buscar la dirección que hay que poner en el App Inventor. Para ello tendremos que ir a Configuración del calendario>Dirección del calendario>HTML https://www.google.com/calendar/embed?src=d8tquupi23cgaonn6oc7hkrsdc%4 0group.calendar.google.com&ctz=Europe/Madrid De la misma forma podríamos poner un enlace a la página web del Centro, pero no nos vamos a parar en ello, que tenemos mucho trabajo… Sólo tendríamos que sustituir la URL actual por la de la página de nuestro Centro * Un botón para llamar directamente a nuestro Centro. Este botón no nos va a llevar a una nueva pantalla. Vamos a usar el componente “LlamadaDeTfno” (que se encuentra bajo la pestaña “Social”) para realizar directamente una llamada de teléfono al Centro. Arrastraremos el componente a la pantalla del “Visor” y, en sus propiedades, estableceremos el número de teléfono al que vamos a llamar. Luego, en los bloques, haremos que al pulsar el botón “BotLlama” se lance el componente que realiza la llamada. Hay un truquito interesante que nos puede permitir llamar directamente a los teléfonos de cinco cifras del Principado. Desde cualquier teléfono móvil (que yo sepa no funciona con los fijos…) podemos llamar directamente a un teléfono de la red del Principado. Para ello sólo tenemos que anteponer al número de cinco cifras un número de nueve cifras, que es el 662991569 Con esto vamos a dar nuestra aplicación por terminada. Seguramente quedarán detalles, pero podremos ir puliéndola poco a poco.. Una vez que tenemos nuestra aplicación elaborada querremos compartirla con otras personas. Puede que solamente queramos hacerles llegar nuestra aplicación para que la usen, pero sin que tengan opción a modificarla. O tal vez queramos compartir nuestra aplicación con alguien a quien le queramos dar la capacidad de modificar nuestra aplicación. En el primer caso deberemos genera un archivo con extensión .apk Esto lo haremos desde la etiqueta “Generar” que se encuentra en la parte de arriba, más o menos hacia el centro. Pulsando sobre ella se despliega un menú que nos ofrece dos opciones:
  • 11. Creando  una  aplicación  Android  para  un  Centro  escolar   Si elegimos la primera, tras unos segundos (bastantes segundos a veces) nos aparecerá en la pantalla un código QR. Si lo escaneamos con AI Companion nos bajará la aplicación y nos ofrecerá instalarla en nuestro dispositivo. La segunda nos generará un archivo apk que automáticamente se bajará y aparecerá en las Descargas de nuestro ordenador. Este archivo es un ejecutable de Android. No es un ejecutable de Windows, por lo cual se puede enviar por Gmail, por ejemplo. Gmail no admite ejecutables de Windows. El archivo .apk lo podemos compartir como queramos: Podemos subirlo a Dropbox o enviarlo por correo electrónico o por cualquier otro medio que nos permita enviar archivos Si lo que queremos es que otro usuario tenga la posibilidad de editar nuestra aplicación e incluir sus propios cambios, podemos compartir con él un archivo con extensión .aia Podemos obtener el archivo aia pulsando en la etiqueta “Proyectos”, que está arriba a la izquierda. En el menú que se desplegará elegiremos En la última versión de App Inventor ha aparecido una nueva opción para compartir nuestras aplicaciones: La Galería. Como recordaréis ya la hemos utilizado al comenzar nuestro trabajo. Es importante tener en cuenta que las aplicaciones que se bajan de la galería son editables. Es decir, que si subimos nuestra aplicación a la Galería la estaremos poniendo por completo a disposición de otros usuarios También es posible que queramos poner nuestra aplicación a disposición de toda la comunidad educativa del Centro. La primera opción será, sin duda publicarla en la Play Store de Android. Este repositorio (almacén de software) tiene algunas ventajas y algunos inconvenientes. Entre las ventajas está el que es el repositorio más conocido y las descargas se hacen muy rápidamente. Pero no deja de tener sus inconvenientes. El principal de ellos es que para convertirse en “desarrollador” (lo cual es imprescindible para poder subir aplicaciones) hay que pagar. No sé exactamente lo que cuesta ahora, pero cuando yo me hice desarrollador costaba 25 $ (que en aquel momento eran 20 €. Existen repositorios libres, donde se pueden subir las aplicaciones sin tener que pagar por ello. Su problema principal: Que los usuarios desconfían de ellos, sobre todo porque cuando van a descargar algo desde allí su teléfono les avisa de que son “fuentes desconocidas”, lo cual hace que se retraigan de instalar desde allí unos usuarios que habitualmente aceptan darles a las aplicaciones todos los permisos que pidan, sin preocuparse por ello… Un ejemplo de uno de estos repositorios libres sería F-Droid. Hay otros. Para comenzar a subir nuestras aplicaciones deberemos entrar en la dirección https://play.google.com/apps/publish/signup/
  • 12. Creando  una  aplicación  Android  para  un  Centro  escolar   A partir de ahí iniciaremos el proceso que nos llevará a convertir nuestro archivo de extensión .apk en una hermosa aplicación publicada en la Play Store. El proceso es algo complejo y no es este el lugar más indicado para abordarlo en todos sus detalles. Baste decir que los requisitos para publicar la aplicación son MUY rigurosos y que deberemos tener preparados los siguientes elementos: - Varias capturas de pantalla del teléfono y/o de la tablet en la que estemos corriendo la aplicación - Un icono de 512 por 512 píxeles. Tiene que ser exactamente de ese tamaño. No acepta otras medidas. - Una imagen de 1024 por 500 píxeles Tiene que ser exactamente de ese tamaño. No acepta otras medidas. Luego hay que rellenar todos los apartados que nos pida. Cuando hayamos terminado todo el proceso, nuestro apk podrá subir a la Play Store, pero… nuestra aplicación no aparecerá publicada inmediatamente, sino que tardará unas horas en estar disponible para su descarga. Esto mismo sucederá cuando queramos subir actualizaciones de nuestra aplicación. No aparecerán inmediatamente, sino que se demorarán unas horas hasta aparecer publicadas. En este apartado es importante señalar que cuando subamos una versión nueva de nuestra aplicación deberemos cambiar la propiedad “CódigoDeVersión” y/o “NúmeroDeVersión” (yo, la verdad, para curarme en salud cambio los dos números a la vez) Una vez que hayamos subido nuestras aplicaciones tendremos acceso a la “Consola del desarrollador”. La dirección para entrar en ella es: https://play.google.com/apps/publish/ Desde la consola podremos, sobre todo, saber cómo evoluciona la utilización de todas nuestras aplicaciones. Cuántos usuarios la han bajado y cuántos la tienen instalada en sus dispositivos. También tendremos acceso a los comentarios que hagan los usuarios y, MUY IMPORTANTE… podremos responder a los comentarios. Tanto los comentarios de los usuarios como los nuestros aparecerán, junto con la aplicación en la Play Store. Y, por ahora, nada más. Espero que estos apuntes te hayan sido de utilidad o que, al menos, sirvan para que tu curiosidad te lleve a aprender App Inventor. Si quieres hacerme alguna pregunta o comentario, yo estaré a la escucha en la dirección de correo electrónico nntt@matajove.es