Anlisis

para
el desarrollo
Desarrollo de
aplicaciones
mviles
con APPcon
INVENTOR.
mvil
App Inventor.

Material
Actividad de aprendizaje 1

Primeros Pasos con

App Inventor

Material
Actividad de aprendizaje 1

Desarrollo de aplicaciones
mviles con APP INVENTOR.

Primeros Pasos con

App Inventor

Indice
Introduccin
1. Android.
2. Introduccin App Inventor.
3. Requisitos para la Configuracin.
4. Configuracin de App Inventor 2.
5. Cmo empezar a crear con App Inventor?
6. Cmo empezar a trabajar en APP Inventor?
7. Webgrafa:

Desarrollo de aplicaciones
mviles con APP INVENTOR.

Introduccin

App Inventor es una plataforma de desarrollo de

aplicaciones Android pensada para gente con poco o ningn
conocimiento sobre programacin. Para el desarrollo de
estas aplicaciones no hace falta escribir cdigo, slo
arrastrar y conectar piezas de puzzle (rompecabezas), y as
de esta manera comenzar los diseos y definir qu har
cada uno.
Sin embargo, App Inventor ofrece suficiente potencia como
para desarrollar aplicaciones simples y complejas.
La combinacin entre potencia y simplicidad convierten a la
plataforma en un sistema revolucionario de aprendizaje.
Con App Inventor se puede crear fcilmente cualquier tipo
de aplicacin que imagines, desde los juegos ms adictivos,
aplicaciones para empresas y hasta aplicaciones de dibujo o
aplicaciones que utilicen Mapas y GPS.

Material
Actividad de aprendizaje 1

Primeros Pasos con

App Inventor

Desarrollo de aplicaciones
mviles con APP INVENTOR.

1. Android

Android es un sistema operativo basado en Linux

diseado principalmente para dispositivos mviles con
pantalla tctil, como telfonos inteligentes o tabletas,
inicialmente desarrollado por Android, Inc. Google
respald econmicamente y ms tarde compr esta
empresa en 2005. Android fue presentado en 2007
junto la fundacin del Open Handset Alliance: un
consorcio de compaas de hardware, software y
telecomunicaciones para avanzar en los estndares
abiertos de los dispositivos mviles. El primer mvil con
el sistema operativo Android fue el HTC Dream y se
vendi en octubre de 2008.

Material
Actividad de aprendizaje 1

Primeros Pasos con

App Inventor

Desarrollo de aplicaciones
mviles con APP INVENTOR.

Material
Actividad de aprendizaje 1

Primeros Pasos con

App Inventor

2. Introduccin App Inventor

App inventor es un framework creado inicialmente por el MIT (Instituto tecnolgico de Massachusetts) y fue adoptado por google, para que
cualquier persona con inters pueda crear su propia aplicacin mvil, ya sea para su empresa, para su casa o por otros intereses.
Para crear una aplicacin con app inventor se deben realizan dos pasos:
1) El diseo de la aplicacin, en la que se seleccionan los componentes para su aplicacin.
El entorno de desarrollo est dividido en dos apartados principales, el diseador de las pantallas y el editor de bloques de cdigo.
2) El editor de bloques, donde se escogen los bloques que sean necesarios segn la aplicacin que se vaya a crear.
Los bloques son parecidos a piezas de un puzzle (rompecabezas), cada pieza tiene unos conectores que permitirn enlazar con otras piezas
para definir el comportamiento de la aplicacin.
La aplicacin aparecer paso a paso en la pantalla del telfono o Tablet a medida que se aadan piezas a la misma, para as ir probando el
trabajo. Cuando haya se haya terminado, se puede empaquetar la aplicacin y producir una aplicacin independiente para instalar.
El entorno de desarrollo de App Inventor es compatible con Mac OS X, GNU / Linux y sistemas operativos de Windows, y varios modelos de
telfonos y tablets Android populares. Las aplicaciones creadas con App Inventor se pueden instalar en cualquier Telfono o Tablet Android.
Antes de poder utilizar App Inventor, es necesario configurar el ordenador e instalar los archivos de instalacin de App Inventor en el equipo.

Desarrollo de aplicaciones
mviles con APP INVENTOR.

3. Requisitos para la Configuracin

Ordenador y sistema operativo.
Macintosh (con procesador Intel): Mac OS X 10.5, 10.6
Windows: Windows XP, Windows Vista, Windows 7
GNU / Linux: Ubuntu 8 +, Debian 5 +
Navegador.
Mozilla Firefox 3.6 o superior
Nota: Si est usando Firefox con el NoScript extensin, tendrs que girar la
extensin de. Vea la nota en la pgina de resolucin de problemas.
Apple Safari 5.0 o superior
Google Chrome 4.0 o superior
Microsoft Internet Explorer 7 o superior
Comprobar la configuracin de Java.
En este paso es necesario actualizar la mquina virtual de java del equipo
a la ltima versin, as que se recomiendo descargar el componente e
instalarlo. A continuacin se presenta el link de descarga.
http://java.com/es/download/

Material
Actividad de aprendizaje 1

Primeros Pasos con

App Inventor

Desarrollo de aplicaciones
mviles con APP INVENTOR.

3. Requisitos para la Configuracin

Configurar su dispositivo mvil Android.

En esta seccin, se debe asegurar de que el dispositivo mvil est
listo para su uso con la aplicacin de App Inventor. Esto implica la
verificacin de algunas opciones en la configuracin. A continuacin,
conectar el dispositivo mvil al ordenador con un cable USB. Si se
tiene sistema operativo Windows, se requiere instalar el controlador
del respectivo dispositivo mvil.
Compruebe la configuracin de su dispositivo mvil.
Para que el dispositivo mvil est listo para trabajar con la aplicacin
de App Inventor, siga estos pasos:
1. Pulsar el botn Inicio para ir a la pantalla de su telfono principal.
2. Pulsar el botn Men, luego Configuracin y, a continuacin
aplicaciones.
3. Si el dispositivo tiene un lugar desconocido de fuentes, se debe
comprobar que est activada.

Material
Actividad de aprendizaje 1

Primeros Pasos con

App Inventor

Desarrollo de aplicaciones
mviles con APP INVENTOR.

Material
Actividad de aprendizaje 1

Primeros Pasos con

App Inventor

4. Configuracin de App Inventor 2.

Direccin Web.
En este programa de formacin virtual, se utilizar la versin 2.0 de App inventor, ya que esta versin permite la posibilidad de trabajar 100%
en la web y proporciona diversas formas de probar las aplicaciones. Para conocer mayores detalles de esta versin, se puede consultar en el
siguiente link: http://ai2.appinventor.mit.edu/
NOTA: es necesario contar con una cuenta gmail o misena, para comenzar a programar.
Una vez configurada la aplicacin App Inventor, se puede empezar a crear aplicaciones en cuestin de minutos.
El Diseador y Editor de bloques se ejecutan ahora por completo en el navegador. (en la nube) Para ver la aplicacin en un dispositivo mientras
se construye (tambin llamada "Probando en vivo"), se deben seguir los pasos que se muestran a continuacin.
1.- Si se est utilizando un dispositivo Android y se tiene una conexin inalmbrica a Internet (WiFi), se puede comenzar la creacin de
aplicaciones sin necesidad de descargar ningn software en su ordenador. Para esto se requiere instalar la aplicacin Companion App Inventor
en tu dispositivo. Se elige la opcin uno. Es muy importante instalar esta aplicacin.
2.- Si no se tiene un dispositivo Android, se tendr que instalar el software en su ordenador para que pueda utilizar el emulador de Android
en la pantalla del mismo. Aqu Elija la opcin dos.

Desarrollo de aplicaciones
mviles con APP INVENTOR.

4. Configuracin de App Inventor 2.

3.- Si no se tiene una conexin inalmbrica a Internet (WiFi), se debe instalar el
software en la computadora, de modo que se pueda conectar al dispositivo mvil Android a
travs de conexin USB. Se elige la opcin tres. La opcin de conexin USB puede algunas
veces ser complicada, especialmente en Windows. Se debe usar este tipo de conexin
como un ltimo recurso.
1. Toque en el Desarrollo.
2. Hay que asegurarse que la USB debugging y stay awake esten activadas.
Si el dispositivo mvil est en la pantalla de bloqueo, lo debo desbloquear como se hara en
el modo de listo para ejecutar una aplicacin. Ahora el cable USB se conecta en el
dispositivo mvil y la computadora. Dos mensajes de estado aparecern en el dispositivo,
en el rea de notificaciones en la parte superior de la pantalla:
USB conectado significa que el dispositivo est conectado a la computadora.
Depuracin USB conectado permite que App Inventor controle el dispositivo.

Material
Actividad de aprendizaje 1

Primeros Pasos con

App Inventor

Desarrollo de aplicaciones
mviles con APP INVENTOR.

Material
Actividad de aprendizaje 1

Primeros Pasos con

App Inventor

5. Cmo empezar a crear con App Inventor?

Se empieza creando un nuevo proyecto, para ello se selecciona Start New Project desde el men Project, el entorno le pedir el nombre
del proyecto, se puede introducir Hola_mundo. Si as lo estiman utilizar otro nombre, se debe tener en cuenta comenzar por una letra,
seguido de sta se pueden utilizar ms letras, nmeros o el guin bajo.
Ahora con la pantalla vaca, en la seccin de propiedades se cambia Title y le colocan Mi primera aplicacin con App Inventor. No tener
encuenta si no se le habla de todas las propiedades an, se irn conociendo durante el desarrollo del programa virtual.
De la paleta de componentes se arrastra un botn de la seccin User interface hasta la pantalla y se deja que se posicione automticamente.
El botn quedar seleccionado, utilizar el botn Rename de la lista de componentes de la pantalla para cambiar el nombre del botn.

Anlisis para el desarrollo

mvil con App Inventor.

6. Cmo empezar a trabajar en APP Inventor?

6.1. Consultar la siguiente direccin URL: http://appinventor.mit.edu/
6.2. Luego presiona click en la opcin de Color Verde Get Started

Material
Actividad de aprendizaje 1

Primeros Pasos con

App Inventor

Desarrollo de aplicaciones
mviles con APP INVENTOR.

Material
Actividad de aprendizaje 1

Primeros Pasos con

App Inventor

6. Cmo empezar a trabajar en APP Inventor?

6.3. Dar Click en el botn superior derecho de color naranja CREATE

3. CREATE!

Desarrollo de aplicaciones
mviles con APP INVENTOR.

6. Cmo empezar a trabajar en APP Inventor?

6.4. Si es la primera vez que se ingresa, se pedir autorizacin para trabajar con

4. Cuenta google

Material
Actividad de aprendizaje 1

Primeros Pasos con

App Inventor

Desarrollo de aplicaciones
mviles con APP INVENTOR.

Material
Actividad de aprendizaje 1

Primeros Pasos con

App Inventor

6. Cmo empezar a trabajar en APP Inventor?

6.4. Si es la primera vez que se ingresa, se pedir autorizacin para trabajar con una cuenta google o en su defecto autenticacin
para la misma.

4. Cuenta google

Material
Actividad de aprendizaje 1

Desarrollo de aplicaciones
mviles con APP INVENTOR.

Primeros Pasos con

App Inventor

6. Cmo empezar a trabajar en APP Inventor?

6.5. En el siguiente paso se hace necesario aceptar los trminos de uso para trabajar con App Inventor 2

5. Aceptar los
trminos de uso!

Material
Actividad de aprendizaje 1

Desarrollo de aplicaciones
mviles con APP INVENTOR.

Primeros Pasos con

App Inventor

6. Cmo empezar a trabajar en APP Inventor?

6.6. Si se realizan los pasos anteriores se tendr acceso a APP Inventor

6. Con los pasos anteriores se tendr

acceso a app inventor.
!

Material
Actividad de aprendizaje 1

Desarrollo de aplicaciones
mviles con APP INVENTOR.

Primeros Pasos con

App Inventor

6. Cmo empezar a trabajar en APP Inventor?

6.7. Dar click en el men superior Projects y luego dar click en Start New Project al cual se da el nombre: HolaSENA.
Se empieza creando un nuevo proyecto, para ello se selecciona Start New Project desde el men Project, el entorno pedir el nombre del
proyecto, se puede introducir Hola mundo. Si se desea utilizar otro nombre se debe tener en cuenta comenzar por una letra, seguido de sta
se pueden utilizar ms letras, nmeros o el guin bajo.

7. b) Hola mundo
7. a) Start New Proyect

Desarrollo de aplicaciones
mviles con APP INVENTOR.

Material
Actividad de aprendizaje 1

Primeros Pasos con

App Inventor

6. Cmo empezar a trabajar en APP Inventor?

Ahora se tienes la pantalla vaca, en la seccin de propiedades se cambia Title y se le escribe Mi primera aplicacin
con App Inventor . Hay otras propiedades an, se irn conociendo a medida que avance el curso.
6.8. Al crearse un nuevo proyecto en App Inventor se muestra toda el rea de trabajo

Desarrollo de aplicaciones
mviles con APP INVENTOR.

Material
Actividad de aprendizaje 1

Primeros Pasos con

App Inventor

6. Cmo empezar a trabajar en APP Inventor?

b)

Se agrega un segundo label y se modifica su propiedad text por Bienvenidos adems se aplica el color en la

propiedad TextColor.
c)

Se agrega el componente webViewer y se modifica la propiedad URL del

objeto por www.sena.edu.co

d)

En el rea de components, dar click sobre el objeto screen1, y se modifica su propiedad BackgroundColor por

Naranja o el color de que se prefiera, adems se puede cambiar el encabezado en la propiedad Title.

Desarrollo de aplicaciones
mviles con APP INVENTOR.

Material
Actividad de aprendizaje 1

Primeros Pasos con

App Inventor

7. Webgrafa
MIT App Inventor (2013). Consultado el 3 de Agosto de 2014, en
http://appinventor.mit.edu/explore/
Tu App Inventor (2013). Consultado el 5 de Agosto de 2014, en
http://www.tuappinvetorandroid.com/
Tu App Inventor (2013). Consultado el 7 de Agosto de 2014, en
http://www.mibqyyo.com/articulos/2014/05/13/app-inventor-2-crea-aplicaciones-android-sin-escribir-una-sola-linea-de-codigo/