Diseño

 de  apps  con  MIT  App  Inventor  2  

2015.  FPP.  Uso  educativo  de  las  tabletas  
 
1.  ¿Qué  es  App  Inventor  2?  
 
App   Inventor   2   (AI2)   es     la   versión   mejorada   de   una   herramienta   de   programación  
creada   por   el   MIT   (Instituto   Tecnológico   de   Massachusetts)   y   que   fue   adoptada   por  
Google  para  sus  usuarios  como  solución  para  crear  de  una  forma  sencilla  aplicaciones  
para  dispositivos  Android.  
 
El  proceso  de  creación  consta  de  3  pasos:  
 
1. Diseñador.   Muestra   el   display   de   un   móvil   y   se   utiliza   para   el   diseño   de   las  
pantallas  de  la  aplicación  donde  se  situarán  los  distintos  componentes:  imágenes,  
botones   audios,   textos,   etc     configurando   sus   propiedades   (aspecto   gráfico,  
comportamiento,  etc).  
2. Editor   de   bloques.   Permite  programar  de  una  forma  visual  e  intuitiva  el    flujo  de  
funcionamiento  del  programa  utilizando  bloques.  
3. Generador   de   la   aplicación.   Una  vez  terminada  la  aplicación  se  puede  generar  el  
instalador  APK  obteniéndose  un  código  QR  para  su  descarga  desde  el  móvil  o  bien  
el  propio  archivo  APK  para  descargar  y  enviar.  
 
2.  Requisitos  para  utilizar  AI2  
 
AI2  proporciona  una  herramienta  en  línea  accesible  a  través  de  un  navegador  web  si  
se   dispone   de   una   cuenta   de   usuario   en   Google.   El   equipo   recomendado   es   un  
ordenador  PC  (Windows,  Mac  o  Linux)  –  no  una  tableta  -­‐  y  el  navegador  recomendado  
es   la   última   versión   de   Google   Chrome   o   Mozilla   Firefox   (Internet   Explorer   no   está  
soportado).   No   es   necesario   tener   instalado   en   el   equipo   Java   ni   ningún   otro  
programa.    
 
1. Abre  el  navegador  Google  Chrome.  
2. Accede  a  la  dirección  de  AI2:  [Link]    
3. Introduce  tus  credenciales  de  Google:  usuario  y  contraseña.  
4. Se  muestra  el  cuadro  de  diálogo  Welcome  to  App  Inventor!  (Bienvenido  a  App  
Inventor).    
5. Clic  en  el  botón  Continue.  
 

Página  2  de  28  

Diseño  de  apps  con  MIT  App  Inventor  2  
2015.  FPP.  Uso  educativo  de  las  tabletas  
 
 
6. Para  cambiar   el   idioma  de  la  interfaz,  en  la  barra  de  menús  superior  derecha  
pulsa  en  English  para  desplegar  el  combo  y  elegir  el  idioma  Español.  
 

 
 
7. Al   principio   te   situarás   en   la   página   Mis   proyectos   desde   donde   es   posible  
gestionar  tus  proyectos  de  aplicaciones.  
 

 
 
3.  Sistemas  para  testear  en  directo  las  aplicaciones  
 
AI2   proporciona   básicamente   3   posibilidades   para   ver   la   aplicación   creada   en   un  
dispositivo   mientras   se   está   construyendo.   Es   lo   que   se   denomina   “Testeo   en   directo”.  
No  es  algo  imprescindible  pero  es  muy  recomendable.    
 
3.1Dispositivo  Android  +  wifi  en  ordenador  PC  
 

 
Es   la   opción   recomendada.   Consiste   en   instalar   la   aplicación   MIT  AI2  Companion  en   la  
tableta  para  establecer  conexión  con  la  web  [Link]    y  poder  
testear   las   aplicaciones   creadas   en   esta   aplicación.   El   requisito   previo   es   que   la   tableta  
y  el  ordenador  que  accede  a  la  interfaz  web  deben  estar  conectados  a  la  misma  wifi.  
 

Página  3  de  28  

Diseño  de  apps  con  MIT  App  Inventor  2  
2015.  FPP.  Uso  educativo  de  las  tabletas  
 
Los  pasos  para  realizar  este  proceso  son:  
 
Paso  1.  Instalar  MIT  AI2  Companion  
 
1. Accede  a  Play  Store  e  introduce  MIT  AI2  Companion  como  expresión  de  
búsqueda  para  localizar  esta  aplicación.  
[Link]  
2. Instala  esta  app  en  tu  tableta.  
 

 
 
Paso  2.  Conectar  tu  ordenador  y  la  tableta  en  la  misma  wifi.  
 
1. Desde   la   interfaz   web   de   App   Inventor,   mientras   estás   editando   un   proyecto,  
selecciona  Connect  >  AI  Companion.  
 

 
 
2. Se   mostrará   un   cuadro   de   diálogo   que   contiene   un   código   QR   en   la   pantalla   de  
tu  ordenador  PC.    
3. En  tu  tableta  inicia  la  app  MIT  AI  Companion  como  cualquier  otro  programa.    
4. Pulsa  en  el  botón  Scan  QR  Code  y  escanea  el  código  que  aparece  en  la  ventana  
de  App  Inventor.    

Página  4  de  28  

Diseño  de  apps  con  MIT  App  Inventor  2  
2015.  FPP.  Uso  educativo  de  las  tabletas  
 

 
 
5. Otra   posibilidad   es   introducir   el   código   mostrado   en   pantalla   en   el   cuadro  
solicitado  de  la  app  MIT  AI  Companion  y  pulsar  en  el  botón  connect  with  code  
(conectar  con  código).    
6. En  cualquier  caso  en  unos  segundos  se  mostrará  en  tu  tableta  la  aplicación  que  
se  está  diseñando  sin  necesidad  de  instalarla  previamente.    
7. Los   cambios   en   el   diseñador   y   en   los   bloques   se   transmitirán   automáticamente  
a  la  aplicación  permitiendo  el  testeo  directo.  
 
3.2  Sin  wifi  ordenador  PC  +  conexión  USB  con  dispositivo  Android  
 

 
En  ocasiones  existen  wifis  que  no  permiten  por  razones  de  seguridad  la  comunicación  
entre   dos   dispositivos   inalámbricos   conectados   o   bien   el   ordenador   donde   se   está  
creando  la  aplicación  usando  AI2  no  dispone  de  conexión  wifi.    
 
Paso  1.  Instalar  el  software  de  App  Inventor  en  el  ordenador  Windows.  
 
1. Descarga   el   instalador   de   MIT   App   Inventor   Tools:  
[Link]    
2. Ejecuta  este  instalador  y  sigue  sus  pasos  por  defecto.  
3. Para   comprobar   si   has   instalado   la   última   versión   del   software   puedes   visitar   la  

Página  5  de  28  

Diseño  de  apps  con  MIT  App  Inventor  2  
2015.  FPP.  Uso  educativo  de  las  tabletas  
 
página  del  test  de  conexión:  [Link]    
 
Paso  2.  Descargar  e  instalar  la  app    MIT  AI2  Companion  en  tu  tableta  
 
1. Accede  a  Play  Store  e  introduce  MIT  AI2  Companion  como  expresión  de  
búsqueda  para  localizar  esta  aplicación.  
[Link]  
2. Instala  esta  app  en  tu  tableta.  
 
Paso  3.  Ejecuta  el  programa  aiStarter  en  el  ordenador  
 
1. Para   utilizar   el   cable   USB   es   necesario   utilizar   un   programa   llamado   aiStarter.  
Este   programa   permitirá   al   navegador   comunicarse   con   el   cable   USB.   Este  
programa  ya  se  instaló  en  el  paso  1.    
2. En   un   equipo   Windows   para   ejecutarlo   basta   con   hacer   clic   en   su   icono   en   el  
Escritorio.  
 

 
 
3. Se   abrirá   una   ventana   de   fondo   negro   que   será   necesario   tener   abierta  
mientras  el  programa  funciona.  
 
Paso  4.  Configurar  el  dispositivo  en  modo  depuración  USB  
 
1. En   el   ordenador   PC   Windows   quizás   sea   necesario   instalar   los   drivers   de  
conexión   USB   con   la   tableta   o   dispositivo   móvil   que   conectes.   Es   necesario  
consultar  la  web  del  fabricante  de  la  tableta  para  descargar  estos  drivers.  
2. En  la  tableta  es  necesario  activar  el  modo  depuración  USB.  Para  ello  accede  a  
Ajustes  >  Opciones  de  desarrollo  >  Depuración  USB.    
 
Paso  5.  Conexión  del  ordenador  y  la  tableta  
 
1. Conectar  ambos  dispositivos  usando  un  cable  USB.  
2. Asegurarse  que  en  el  ordenador  el  dispositivo  se  conecta  como  dispositivo  de  
almacenamiento  masivo.    
3. En  la  tableta  pulsar  en  el  botón  Aceptar  en  el  cuadro  Permitir  depuración  USB?  
 
 
Paso  6.  Probar  la  conexión.    
1. Desde   el   ordenador   visita   la   página   de   prueba   en   el   navegador   web:  
[Link]    
2. Observa  si  se  confirma  que  el  ordenador  detecta  la  tableta.  En  caso  contrario  
habrá  que  consultar  las  incidencias  más  frecuentes.  
 

Página  6  de  28  

Diseño  de  apps  con  MIT  App  Inventor  2  
2015.  FPP.  Uso  educativo  de  las  tabletas  
 
Una  vez  configurada  la  solución  de  comunicación  para  probar  en  directo  una  aplicación  
que  se  está  diseñando  con  AI2  en  el  navegador  del  ordenador  se  selecciona  Connect  >  
USB.  La  aplicación  se  mostrará  en  la  app  MIT  AI2  Companion  de  la  tableta.  
 

 
 
3.3  Sin  dispositivo  Android:  uso  del  emulador.  
 
Es  el  caso  de  que  no  dispongamos  de  tabletas  o  móviles  en  el  aula.    
 

 
Paso  1.  Instalar  el  software  de  App  Inventor  en  el  ordenador  Windows.  
 
1. Descarga   el   instalador   de   MIT   App   Inventor   Tools:  
[Link]    
2. Ejecuta  este  instalador  y  sigue  sus  pasos  por  defecto.  
3. Para   comprobar   si   has   instalado   la   última   versión   del   software   puedes   visitar   la  
página  del  test  de  conexión:  [Link]    
 
Paso  2.  Ejecuta  el  programa  aiStarter  en  el  ordenador  
 
1. Para  activar  el  emulador  será  necesario  utilizar  un  programa  llamado  aiStarter.  
Este   programa   permitirá   al   navegador   comunicarse   con   el   cable   USB.   Este  
programa  ya  se  instaló  en  el  paso  1.    
2. En   un   equipo   Windows   para   ejecutarlo   basta   con   hacer   clic   en   su   icono   en   el  
Escritorio.  
 

Página  7  de  28  

Diseño  de  apps  con  MIT  App  Inventor  2  
2015.  FPP.  Uso  educativo  de  las  tabletas  
 

 
 
3. Se   abrirá   una   ventana   de   fondo   negro   que   será   necesario   tener   abierta  
mientras  el  programa  funciona.  
 
Paso  3.  Conectar  con  el  emulador  
 
1. Cuando   se   está   editando   una   aplicación   en   la   barra   de   menús   selecciona  
Conexión  >  Emulador.  
 

 
 
2. El  emulador  suele  tardar  unos  segundos  en  arrancar.  
3. Al  final  mostrará  la  aplicación  que  está  abierta  con  App  Inventor.  
 
 
4.  Mi  primera  aplicación  con  AI2  
 
En   este   apartado   vamos   a   crear   una   aplicación   para   móviles   que   consiste   en   una  
página/ventana   principal   y   3   páginas/ventanas   secundarias.   En   la   página   principal  
aparecerá   un   título,   una   imagen   y   3   botones   de   acceso   a   cada   una   de   las   páginas  
secundarias.   Cada   página   secundaria   mostrará   un   título,   imagen,   texto   y   3   botones:  
escuchar  audio,  enlace  a  Wikipedia  y  Volver  a  página  principal.    
 

Página  8  de  28