CREAR NUESTRA PRIMERA APLICACIÓN. PARTE 2

LA PROGRAMACIÓN EN APP INVENTOR.

Bien, siguiendo con la creación de nuestra primera aplicación en App Inventor 2, nos meteremos de lleno en lo que sería la programación o lógica, para ello en la barra superior, pulsaremos en Bloques. Inmediatamente se nos cambiara la forma en que veremos la pantalla de edición, y que podremos dividir en tres partes, «1 Visor», «2 Bloques» y «3 Medios».

Dentro de bloques tendremos a modo de explorador una lista desplegable de las funciones, separadas por colores, de esta manera las funciones de control se encuentran agrupadas en el cuadro de color naranja, las de lógica, en verde, etc.

En este mismo árbol, abajo de los integrados, podemos ver que también tendremos el nombre de la pantalla en la que estemos en ese momento, si pulsamos sobre esta, podremos observar que se desplegará un montón de bloques con los que podremos manejar nuestra pantalla. Al igual que con la pantalla, ocurre lo mismo con los componentes que metiéramos en la misma, a si si tuviéramos una disposicionvertical o un botón, también aparecen en esta zona, y si pulsaremos sobre ellos, se desplegará los bloques correspondientes.
En el visor tendremos un lienzo en blanco, donde podrás poner todos los bloques. En la esquina superior derecha de la misma, una mochila,y en la esquina inferior derecha unos botones para hacer zoom, de estos dos últimos objetos del visor hablamos en anteriores capítulos de este tutorial, y por último en medios, podremos ver todos los archivos multimedia que tenemos subido para nuestra aplicación, por supuesto que también podremos subir nuevos archivos desde esta pantalla, pulsando en el botón Subir archivos.

Comenzamos entonces con la programación, para ello iremos a la barra superior y nos aseguramos que tenemos la pantalla de presentación (SCREEN1) seleccionada, ya que será está la que programaremos en primer lugar.
Despues en Bloques seleccionaremos Screen1 para que se despliegue la lista de bloques y arrastraremos al lienzo CuandoScreen1.inizializar, esto hará que todo lo que metamos dentro de este bloque se ejecute cuando arranque la pantalla, o en este caso la aplicación, ya que es la primera pantalla que muestra.

Seguido pulsaremos en Reloj, dentro de Bloques y de la lista que desplegara seleccionaremos PonerReloj1.TemporizadorHabilitado como y lo arrastraremos dentro del bloque anterior haciéndolo encajar como una ficha de puzzle en su interior.

Ahora en Bloques, seleccionaremos Lógica, y buscaremos el bloque cierto, que posicionaremos justo al lado del bloque anterior.

Todo este conjunto de bloques que acabamos de crear hará que cuando se inicie la pantalla comience a contar el reloj.

Volvemos a Bloques > reloj y arrastramos al lienzo el siguiente bloque Cuando reloj1.temporizador

, y dentro de el meteremos abrir otra pantalla Nombre de la pantalla que está situado dentro de Bloques > Control.

Ahora tenemos que poner el nombre de esa pantalla que tenemos que abrir, para ello nos dirigimos a Bloques > Texto y seleccionamos el bloque (“ “)

que situaremos a continuación del anterior, haciéndolo encajar. Este bloque tiene la peculiaridad de que podremos escribir dentro de él, poniendo el nombre de la pantalla que vamos abrir una vez el Reloj termine de contar el tiempo, y como ya le pusimos nombre a esa pantalla, solo tendremos que volver a escribir ese mismo nombre dentro del bloque.

Llegado a este punto, damos por concluido la programación de la pantalla de presentación y vamos a programar la pantalla principal, para ello nos dirigiremos a la barra superior y seleccionamos principal.

Cómo lo que queremos es que la aplicación lea en voz alta todo el texto que contenga dentro del campo de texto, vamos a programar en primer lugar el botón3, que es en el que pusimos el texto de leer. Para ello nos dirigiremos a bloques > botón3, si eres buen observador te habrás dado cuenta que está dentro de la DisposicionHorizontal1. Y en su lista de bloques seleccionamos cuando Botón3.clic

Ahora seleccionamos, TextoAVoz1 y de los bloques desplegados seleccionamos el bloque llamar textoAVoz1.Hablar

y lo hacemos encajar con el bloque que anteriormente colocamos en el visor.

Si te das cuenta, solo nos hace falta un nuevo bloque, y este es sin duda el que contenga el texto que quieres que hable nuestra aplicación cuando pulsemos en el botón de leer. Para hacer esto en bloques CampoDeTexto1 seleccionaremos y haremos encajar con el bloque anterior el bloque CampoDeTexto1.Texto.

Estas impaciente por saber si funciona, adelante, ve a la pantalla de conectar, selecciona tu método favorito y verás que después de unos segundos la pantalla de presentación de nuestra aplicación desaparece, mostrando nuestro campo de texto y los tres botones, si escribes algo en el campo de texto y después pulsas en leer nuestra aplicación leerá sin ningún problema.
Qué es asombroso ehh!!, Bueno seguimos con la programación de nuestra App, en esta ocasión vamos a programar el botón2, en el que escribimos dictar por Voz.
Bien como anteriormente hicimos nos dirigiremos a Bloques > Botón2 y seleccionamos el bloque cuando Botón2.clic.
Seguido seleccionamos el Bloque ReconocimientoDeVoz y el bloque de color morado llamar ReconocimientoDeVoz. ObtenerTexto ,
pero solo con esto, nuestra aplicación no mostrará el texto en pantalla, por así decirlo solo codifica el sonido en texto, para mostrar el texto en el campo de texto y después poder hacer que nuestra aplicación lo lea, tendremos que ir a bloques, pulsar en ReconocimientoDeVoz1 y seleccionar el bloque cuando ReconocimientoDeTexto1.DespuesDeObtenerTexto

Después seleccionar y encajar dentro del bloque anterior, el bloque poner CampoDeTexto1.Texto

del componente CampoDeTexto1, y dentro de este mismo, el bloque ReconocimientoDeVoz1.Resultado. que se encuentra dentro de ReconocimientoDeVoz1.

Ahora, sí probamos nuestra aplicación, si funcionará.

Nos queda un último botón, y no por ello el menos importante, este botón limpiara la pantalla de cualquier texto que se encuentre en ella, y podremos escribir dentro de la misma. Para ello en Bloques > Botón1 seleccionamos el bloque cuando Botón1.Clic

y lo metemos dentro del Visor, seguido seleccionamos el bloque CampoDeTexto1.Texto como

que está dentro de Bloques > CampoDeTexto1 y por último dentro de Bloques > Integrados > Texto seleccionamos el bloque que está vacío, y solo contiene dos comilla “ ” .

Esto hará que cuando pulsemos el botón1, todo el texto se borre, dándonos la oportunidad de volver a escribir.

Bueno, ahora si vamos a la aplicación, y la conectamos con nuestro método preferido a nuestro dispositivo, veremos que todos los botones tienen su funcionalidad.
Si pulsamos en escribir, podremos rellenar el campo de texto con nuestro teclado al pulsar en el.
Si pulsamos en leer texto, después de haber escrito, una voz nos dirá exactamente lo que hayamos escrito.
Y por último, si le damos a dictar por voz, nos saldrá un micrófono en en pantalla que al hablar, mostrará lo hablado en el campo de texto.
Bueno, espero que con esta sencilla aplicación, podáis ver todo el potencial que tiene App Inventor. En cuestión de unos minutos habéis creado una aplicación, que es capaz de leer un texto, escribir por voz, con una codificación bastante sencilla.

Os dejo unos enlaces en donde podéis descargaros la aplicación, y el código fuente de de la misma, para que podáis probar.

CREAR NUESTRA PRIMERA APLICACIÓN. PARTE 1

EL DISEÑO EN APP INVENTOR.

Lo primero antes de nada,  será descargar los archivos que contiene todo el material multimedia para seguir este tutorial. Después comenzaremos a construir nuestra aplicación comenzando por el diseño de la misma, para eso iremos a PROYECTOS > COMENZAR UN PROYECTO NUEVO, y le daremos el nombre que queramos, en mi caso yo le daré el nombre de LEEME_TEXTO.

Una vez hecho esto, tendremos en el visor, nuestra pantalla vacía, a la que vamos a poner un logotipo con el nombre de nuestra aplicación a modo de pantalla de presentación. Para ello iremos a MEDIOS > SUBIR ARCHIVO,

y nos saldrá una ventana emergente a la que pulsaremos en el botón SELECCIONAR ARCHIVO,

una vez hecho esto se nos abrirá el explorador  y seleccionaremos los archivos BOCA.png y icono.png  que anteriormente descomprimimos en nuestro ordendor, una vez seleccionado pulsaremos el botón aceptar de la ventana emergente. Ahora en MEDIOS se podrá visualizar el texto del archivo subido.

Una vez subida la imagen nos dirigiremos a PALETA  y pulsaremos en DISPOSICIÓN, seguido arrastraremos el componente DISPOSICIONVERTICAL dentro de Screen1.

 

Inmediatamente veremos un cuadro gris en la equina superior izquierda del Screen1 del visor.

 

Si lo seleccionamos, a nuestra derecha en PROPIEDADES tendremos una serie de opciones, nosotros modificaremos tanto el ancho como el alto que le pondremos como: ajustar al contenedor.

Ahora toca colocar la imagen anteriormente descargada dentro del componente DISPOSICIONVERTICAL  para ello en PALETA > INTERFAZ DE USUARIO arrastraremos el componente imagen a la DISPOSICIÓNVERTICAL, al hacerlo veremos como en el árbol jerárquico de COMPONENTES la imagen esta dentro de la DISPOSICIONVERTICAL

esto hará que cualquier modificación en la DISPOSICIONVERTICAL afecte a la imagen o cualquier componente dentro del mismo, esto es muy útil si queremos que nuestra aplicación se adapte a cualquier tamaño de pantalla, ya que al marcar ajustar al contenedor la DISPOSICIONVERTICAL tomará el ancho y al alto del dispositivo que está ejecutando nuestra aplicación. Seguido pulsaremos en el componente IMAGEN y en PROPIEDADAES  modificaremos tanto el ancho como el alto que le pondremos como ajustar al contenedor, y en foto seleccionaremos el archivo BOCA.png.

Ahora agregaremos un componente no visible, que será un reloj, que controlará el tiempo en el que permanecerá la pantalla de presentación abierta, para ello iremos a PALETA > SENSORES y arrastraremos el componente reloj dentro de Screen1.

Inmediatamente veremos que el componente no aparece dentro de la misma si no abajo, esto es porque es un componente que no es visto por el usuario, pero que si tendrá interacción con el mismo.

En sus propiedades desmarcamos Temporizadorhabilitado y pondremos en IntervaloDelTemporizador 5000.

Bien con esto ya tendremos nuestra pantalla de presentación y ahora nos toca crear la pantalla donde el usuario, pulsando los correspondientes botones, interactúe con la aplicación.

Crearemos una nueva pantalla, para ello pulsaremos en la barra superior añadir ventana.

Se abrirá una ventana emergente en la que nos pedirá que introduzcas el nombre, yo le pondré pantalla PRINCIPAL, vosotros le podéis poner el nombre que queráis.

Seguido iremos a PALETA, disposición y arrastrarnos el componente DISPOSICIONVERTICAL dentro de la nueva pantalla que hemos creado. En las propiedades el alto le daremos el 50% y el ancho le pondremos ajustar al contenedor, esto hará que independientemente del tamaño de la pantalla del dispositivo, siempre ocupe la mitad del alto, y el ancho total de la pantalla.

Ahora iremos de nuevo a paleta, disposición y arrastrarnos el componente DISPOSICIONHORIZONTAL a la pantalla del visor, justo debajo de la DISPOSICIONVERTICAL que colocamos anteriormente, en sus propiedades le pondremos el alto en automático, esto ara que se ajuste automáticamente al alto de lo que metamos dentro y en ancho le pondremos ajustar al contenedor.

Ahora arrastrarnos del panel paleta interfaz de usuario una etiqueta dentro de la DISPOSIVIONVERTICAL y en las propiedades seleccionamos el cuadro de la opción negrita, el tamaño de letra a 30, el tipo de letra sans serif, marcamos el cuadro de HasMagirns, el alto lo ponemos como automático, el ancho seleccionamos ajustar al contenedor, el texto le cambiamos el que viene por defecto como LEEME TEXTO, o el nombre que quieras y ponemos la posición del texto en el centro con el color en negro.

Seguido arrastramos el componente campo de texto situado en paleta, interface de usuario a la DISPOSICIONVERTICAL justo debajo de la etiqueta. En sus propiedades tanto el ancho como el alto seleccionaremos ajustar al contenedor y en pista pondremos un texto que describa al usuario la acción que tiene que hacer, yo pondré el texto»Introduzca un texto».

Ahora comenzaremos con la DISPOSICIONHORZONTAL que anteriormente colocamos en nuestra segunda pantalla, iremos a paleta, interface de usuario y arrastrarnos tres botones a esta DISPOSICIONHORIZONTAL, un al lado del otro quedando como muestra la imagen.

Entrando en las propiedades de cada uno colocaremos el alto en automático y el ancho en ajustar al contenedor, al poner la propiedad ancho ajustada al contenedor  todos los botones se re-dimensionaran  quedando dentro del ancho de la DISPOSICIONHORIZONTAL. En el botón situado más a la izquierda, en el campo texto le pondremos «ESCRIBIR» en el del centro «DICTAR POR VOZ» y en el que queda más a la derecha «LEER», y en los tres el tamaño de letra le dejaremos en 10.

Vamos a agregar dos componentes no visibles, que será, TextoAVoz y ReconocimientoDeVoz, que controlará dos aspectos importantes como son la escritura por voz y convertir el texto en audio, y permanecerán en la pantalla de Principal, para ello, iremos a PALETA > MEDIOS y arrastraremos el componente TextoAVoz y ReconocimientoDeVoz dentro de la pantalla con nombre Principal. Inmediatamente veremos que los componentes aparecen abajo.

Ahora que ya tenemos Todos los elementos dentro de nuestras pantallas pasaremos a hacer la comprobación que nuestro dispositivo móvil para ello iremos a la pestaña conectar y seleccionaremos la opción que más se ajuste a nuestras necesidades, ya sabes que son tres las opciones de conexión AI COMPANION Emulador o Usb.

Con esto hemos terminado en el siguiente capítulo programaremos la lógica de nuestra aplicación para que al pulsar un botón nuestro dispositivo  haga la acción qué  queramos.

APP INVENTOR ENTORNO DE TRABAJO.

[toc]

LAYOUT DE TRABAJO.

Si seleccionamos un proyecto o creamos uno nuevo, se cargará una nueva ventana que podremos dividir en cinco partes. Lo primero a destacar es que la barra verde a cambiado y ahora donde antes podíamos abrir un proyecto tenemos el nombre del proyecto y más a la derecha una serie de botones que pasamos a describir.

BARRA DE OPCIONES.

SCREEN1: Este es el nombre que recibe por defecto la primera pantalla de nuestro proyecto, si pulsamos nos aparecerá una lista de todas las pantallas creadas, en nuestro caso solo tendremos la primera pantalla, que se crea automáticamente al crear el nuevo proyecto. Resaltar que la primera pantalla no se puede borrar ya que va ligada a la creación del proyecto y será la pantalla que una vez que esté terminada nuestra aplicación, inicie siempre en primer lugar. Añadir que tampoco se le puede cambiar el nombre a esta primera pantalla, pero si a las sucesivas pantallas que creemos.

AÑADIR VENTANA: Si pulsamos este botón, se nos abrirá una ventana donde se nos pedirá el nombre que queremos darle a la nueva pantalla, este nombre podrá ser modificado después, y no debería de contener caracteres extraños como espacios y símbolos como el # o @

ELIMINAR VENTANA: Al pulsar se eliminará la ventana que esté seleccionada en ese momento, también se eliminará todos sus componentes y bloques que pudiera contener esa pantalla.

PANTALLA DE DISEÑADOR.

DISEÑADOR: Al pulsar este botón nos mostrará un conjunto de secciones en donde podremos diseñar el aspecto de nuestra aplicación. Se trata de la sección paleta el visor componentes, de la que haremos una breve descripción.

La sección de Paleta, donde habrá una serie de componentes que se dividen en:componentes visibles, que son todos los que el usuario pueda interactuar, como botones, selectores de fecha o campos de texto, y los componentes no visibles, como relojes temporizadores, sonidos o bases de datos.

EL VISOR, este se asemeja a la pantalla de nuestro dispositivo y será donde tendremos que arrastrar y soltar los componentes de la sección paleta para ir creando el aspecto visual de nuestra aplicación. Justo por encima del visor tendremos dos opciones: Mostrar en el visor los componentes ocultos, que hará que se muestran los componentes no visibles de la sección paleta, y Marcar para previsualizar el tamaño de una tablet: está opción viene por defecto desactivada y no se puede utilizar a menos que en las propiedades de la SCREEN1 cambiemos la opción fixed a responsive. Una vez activada, podremos previsualizar en el visor nuestra aplicación a tamaño de pantalla de una tablet.

COMPONENTES: Aquí a medida que vayamos arrastrando los componentes visibles al visor, aparecerá una especie de árbol jerárquico en el que podremos ver ordenados todos los componentes arrastrado. A si por ejemplo si arrastramos un componente de alineación vertical y dentro le colocamos un componente botón, en el árbol aparecerá el botón como hijo de la alineación vertical. esto es así ya que el botón se adaptará y adoptará la forma en relación a las medidas dadas por el componente alineación vertical, es decir, todo lo que suceda al componentes alineación vertical, repercutirá en cierta medida al componente que metamos dentro.

PROPIEDADES: aquí podremos modificar las propiedades de cada componente que metamos en nuestra aplicación por ejemplo en un botón podremos cambiar el texto la fuente de la letra e incluso el color. Estas propiedades se verán con más detalle en siguientes tutoriales.

PANTALLA DE BLOQUES.

BLOQUES: si pulsamos el botón de bloques que está situado a la derecha del botón diseñador, se nos cargará una pantalla en la que estará dividida en tres partes, bloques, medios y visor, y que pasamos a describir a continuación.

Bloques: dentro de los bloques, ordenados por funciones y colores, encontramos distintos componentes para la lógica de nuestro programa, desde funciones matemáticas, variables, funciones para crear bucles o incluso para crear colores. Más abajo en la misma sección de bloques, encontraremos un árbol jerárquico que corresponderá con los componentes de la pantalla que tengamos en ese momento cargada o seleccionada. Si pulsamos con el ratón en uno de los componentes, podremos sacar el bloque correspondiente para la programación. Así por ejemplo para un botón, tendremos un bloque que controla cuando pulsamos o mantenemos pulsado dicho botón.
Un poco más abajo del árbol jerárquico, encontramos dos botones, Cambiar nombre y borrar el primero cambiara el nombre de cualquier componente situado en el árbol jerárquico y el segundo borrara cualquiera de los componentes del mismo árbol jerárquico.
Algo a destacar, es que al cambiar el nombre a cualquiera de los componentes del árbol jerárquico, si ya teníamos algún bloque que hacía uso de ese nombre, automáticamente se cambiará por sí solo.

Medios. La columna de medios, está situada más abajo de la columna de bloques, nos mostrará todos los archivos multimedia que tengamos cargados en nuestra pantalla actual se podrá borrar o subir nuevos archivos, pulsando en el botón de más abajo.

Visor. El visor es el que ocupa gran parte de la pantalla, es como un lienzo en blanco, aquí es dónde iremos arrastrando los componentes o bloques de programación a modo de un puzzle para hacer la lógica de nuestro programa.

tenemos en la esquina superior derecha una mochila, esta mochila sirve para copiar dentro grupos de bloques que hacen una función, y poder trasladarlos a distintas pantallas de la aplicación, o incluso a distintas aplicaciones, a modo de copiar y pegar. Abajo en la esquina inferior derecha, y de un color más atenuado, tenemos tres botones y una papelera, la papelera sirve para arrastrar los bloques y eliminarlos del lienzo, el botón más y menos será hacer zoom para ver más grandes los bloques, y el botón que parece un punto de mira será para centrar la pantalla con el centro de los bloques. En la esquina inferior izquierda tenemos unas signos de advertencia que serán para mostrarnos los avisos o errores estos avisos son correspondientes a zonas del programa que entran en conflicto los bloques. Ya sean bloques que aunque encajen uno dentro de otro, no es posible utilizar.
Si pulsamos en el centro de la pantalla con el botón derecho del ratón, aparecerá una serie de opciones que se pasarán a describir ahora:

1.- Deshacer. Eliminarás los últimos cambios en el en el Editor de bloques. ya sea borrar el último bloque insertado o eliminar el último movimiento de bloques

2.- Rehacer. Volverás a colocar en el Editor de bloques los últimos cambios realizados.

3.- Limpiar los bloques. En ocasiones cuando carguemos un proyecto,los bloques pueden aparecer descolocados y superpuestos, si pulsamos esta opción, nos facilitara la tarea tediosa de ordenarlos, ya que se ordenarán automáticamente.

4.- Exportar como imagen. Guardar a una imagen en formato PNG de todos los bloques de nuestro programa, de esta manera podremos compartir nuestro trabajo.

5.- Ocultar bloques. Minimizará todos los bloques de nuestro programa. Si solo queremos un grupo de bloques, tendremos que pulsar con el botón derecho del ratón encima del grupo de bloques correspondiente.

6.- Mostrar bloques. Mostrar a los bloques anteriormente ocultados.

7.- Borrar bloques. Borrará todos los bloques. Si solo queremos un grupo de bloques, tendremos que pulsar con el botón derecho del ratón encima del grupo de bloques correspondiente.

8.- Ordenar bloques horizontalmente. Ordenada de una forma horizontal en los bloques de nuestro programa

9.- Ordenar bloques verticalmente. Coordenada de una forma vertical los bloques de nuestro programa.

10.- Ordenar bloques por categoría. Esto no es ordenar a todos los bloques por categoría así podemos tener en un grupo todos los condicionales y en otro todas las variables.

11.-Paste all blocks from backpack. Se pegara en el lienzo todos los bloques que contenga la mochila.

12.-Copy all blocks from backpack. Copiar a a la mochila todos los bloques que contengan lienzo.

13.-Empty the backpack. Dejará vacía nuestra mochila de componentes.

14.-Disable workspace grid Rejilla en la pantalla: Pulsando con el botón derecho del ratón sobre la pantalla de bloques y luego «Enable Workspace Grid» («Habilitar rejilla de área de trabajo»). Pondrás una rejilla a modo de guía para situar los bloques y dejar el mismo espacio entre ellos.

15.- «Enable Snap to Grid» («Activar ajuste a cuadrícula»). Al habilitar esta opción, la esquina superior izquierda de los bloques se ajustará al punto de cuadrícula más cercano.

16.- “Disable snap to grid” (“Desactivar ajuste a cuadrícula”). Al deshabilitar esta opción, la esquina superior izquierda de los bloques no se ajustara al punto de cuadrícula más cercano.

17.-Ayuda. Si pulsamos con el botón derecho del ratón encima de un bloque y luego seleccionamos la opción ayuda del desplegable se nos abrirá una nueva ventana en el navegador con información del bloque en el que hayamos pulsado.

Con esto, este capítulo queda concluido, en el próximo capítulo construiremos nuestra primera aplicación, en la que podremos introducir un texto de dos maneras posibles, tanto hablando a nuestro dispositivo utilizando el componente ReconocimientodeVoz, que convierte nuestra voz a texto, como pulsando en el Campo de texto y utilizando la entrada del teclado. Después pulsando en el botón leer, hará que nuestro dispositivo lea el texto en voz alta. De momento y para ir viendo como sera nuestra aplicación podremos ver un adelanto pulsando en esta dirección  en la que nos direccionara a la página de Google play para descargarnos la aplicación, es totalmente gratis.

APP INVENTOR PRIMEROS PASOS.

 

Antes de nada abriremos la página de app inventor 2 (http://ai2.appinventor.mit.edu) se nos abrirá en el navegador una ventana como la siguiente:

Será para dar permiso de acceso con nuestra cuenta de Google, añadiremos nuestra cuenta de correo de gmail y nuestra contraseña y le pulsaremos al botón de “PERMITIR” . Seguido se nos redirigirá a la página de inicio de App inventor 2.

 

Lo primero que veremos, es la pantalla de proyectos, que sí es la primera vez que accedemos veremos que está vacía.

 

Antes de nada, cambiaremos el idioma, ya que app inventor está por defecto configurado en inglés. No te preocupes si no sabes ingles, APP inventor ha sido traducido a varios idiomas entre ellos el español, para ello iremos a la pestaña de la parte superior donde dice English y  a continuación seleccionaremos el idioma Español, inmediatamente la página se recargará, pero esta vez en el idioma seleccionado.

PESTAÑA PROYECTOS.

Continuando en la misma barra superior y empezando de izquierda a derecha tenemos la pestaña de proyectos, si pulsamos se desplegará un menú de opciones que pasaremos a describir:

Mis proyectos: Al pulsar esta opción se abrirá la pantalla de proyectos, donde podremos ver o elegir todos los proyectos que tuviéramos guardados.

 

Comenzar un proyecto nuevo: Si pulsamos se abrirá un cuadro donde podremos darle el nombre a un nuevo proyecto, al rellenar el campo de texto con un nombre y pulsar en aceptar se nos creará un proyecto nuevo que aparecerá en la pantalla de proyectos.

 

Importar proyecto (.aia) desde mi ordenador…: Podremos cargar una plantilla (fragmento de un programa) o un proyecto anteriormente guardado en este formato desde nuestro ordenador, de esta manera se nos da la opción de compartir programas o fragmentos de estos mismos que fueran creados por un tercero y abrirlos en nuestra cuenta.

Al pulsar se abrirá una ventana donde deberemos pulsar en “seleccionar archivo”,se abrirá el explorador de archivos donde buscaremos el nuestro, una vez seleccionado pulsaremos en aceptar.

 

Importar proyecto (.aia) desde mi repositorio…: En esta opción podremos cargar proyectos desde el repositorio o añadir la dirección url de una nueva librería de plantillas que otras personas han creado y que están  disponibles en la Web.

Al pulsar en esta opción se abrirá una nueva ventana que en su parte superior derecha tendremos un desplegable en la que se nos dará dos opciones a escoger, Built-in Templates o Añadir la dirección url de una nueva librería de plantillas, si eliges la primera opción podrás seleccionar la plantilla que se adapte a tus necesidades de proyectos, y haga clic en «Aceptar», si por el contrario optas por la segunda opción, se abrirá una nueva ventana en la que se nos pedirá que introduzcas la dirección de URL de donde queremos descargar los proyectos. Puedes introducir la siguiente direccion a modo de ejemplo:  http://appinventor.cs.trincoll.edu/csp/week1/

 

Borrar proyecto: Si seleccionamos un proyecto de la ventana de proyectos pulsando en el cuadro situado a la izquierda del mismo y seguido pulsamos esta opción: Proyectos > Borrar proyectos, se abrirá una nueva ventana para que confirmamos si realmente queremos borrar, si pulsamos en aceptar el proyecto se borrara definitivamente de la pantalla de proyectos.

 

Guardar proyecto: (esta opción solo está disponible si un proyecto está abierto). Si se pulsa esta opción quedará guardado nuestro trabajo, por defecto se guardará con el nombre que se le dio al iniciar el proyecto.

 

Guardar proyecto como: Si se elige esta opción se abrirá una nueva ventana en la que se nos pedirá rellenar un campo de texto con el nuevo nombre que se le dará al proyecto una vez pulsado en aceptar se guardará el proyecto con el nuevo nombre.

 

Punto de control: Esta opción ara una copia de nuestro proyecto y podremos continuar trabajando con el mismo, si por algún motivo nuestro proyecto se da al traste, podremos rescatar el último punto de control a modo de copia de seguridad.

 

Exportar a mi ordenador el proyecto (.aia) seleccionando: como bien indica el nombre de este título, si seleccionamos un proyecto guardado y pulsamos esta opción, el proyecto se guardará en nuestro ordenador en formato aia, para que posteriormente se pueda descargar en otro ordenador.

 

Exportar todos los proyectos: esta opción es exactamente la misma que la anterior, pero con la salvedad de que serán todos los proyectos que tengamos guardados. El tiempo de descarga dependerá del número de proyectos que tengamos guardados.

 

Importar keystore: antes de explicar esta opción es muy importante saber qué es un keystore. La keystore es una especie de firma digital que sirve para poder publicar y actualizar las aplicaciones que subamos a Google Play, es muy importante que si tienes aplicaciones ya subidas al Google Play no modifiques esta keystore ya que nunca más podrás actualizar las aplicaciones que subiste antes de la modificación. Por lo tanto si elegimos está opción Import haremos una nueva keystore eliminando la anterior que tuviéramos.

 

Exportar keystore: si pulsas en esta opción el archivo con la keystore se guardará en nuestro ordenador, esto puede servir para importar después está keystore en otras cuentas de app inventor y así poder subir aplicaciones con la misma keystore. También puede servir  para hacer una copia de seguridad de la misma.

 

Borrar keystore: esta opción Borrar a nuestra keystore, no está de más que leas el primer punto sobre la keystore, en la que te explico lo importante que es la modificación o borrado de este archivo.

PESTAÑA CONECTAR.

Siguiendo en la misma dirección, nos encontramos con el botón de conectar, al pulsar en esta opción se abrirá un desplegable en la que encontraremos las siguientes opciones.

AI companion: Esta opción nos abrirá una ventana con un código alfanumérico de seis caracteres y un código bidi, si tenemos instalada en nuestra tablet o teléfono la aplicación MIT AI2 Companion, podremos escanear este codigo o introducir los caracteres para poder ver nuestra aplicación en la pantalla de nuestro dispositivo.Para más informacion consulta este artículo “ANTES DE COMENZAR” en el que te hablo con más detalles de esta opción.

 

Emulador: Si tenemos instalado en nuestro PC el programa  aiStarter, al pulsar en esta opcion este nos abrirá un emulador que simula el funcionamiento de un teléfono android en la pantalla de nuestro ordenador.Para más informacion consulta este artículo “ANTES DE COMENZAR” en el que te hablo con más detalles de esta opción.

 

USB: Esta opción te permitirá conectar tu dispositivo android a tu ordenador mediante un cable usb, para poder ver el funcionamiento de tu aplicación en tus dispositivos..Para más informacion consulta este artículo “ANTES DE COMENZAR” en el que te hablo con más detalles de esta opción.

 

Reiniciar conexión: En ocasiones puede pasar que tengamos problemas a la hora de conectar nuestro dispositivo con alguna de las opciones anteriormente citadas, en ese caso deberemos de optar por esta opción para reiniciar las conexiones, y solucionar posibles problemas.

 

Reiniciar completamente: Esta opción hace exactamente lo mismo que la anterior, pero con el añadido de que hará que nuestra aplicación sea restaurada con los datos de fábrica, borrando o iniciando todos los valores.

PESTAÑA GENERAR.

Continuando con la siguiente pestaña tenemos el desplegable generar, veamos con más  detalle sus opciones.

App (Generar código QR para el archivo. APK). Si pulsamos en esta opción, no aparece en la pantalla de nuestro ordenador una ventana que en su interior tendrá un código QR, que si podemos leer con la cámara de nuestro dispositivo, se descargara nuestra aplicación empaquetada en un archivo APK, que podremos instalar en nuestro dispositivo.

 

App (Guardar archivo .APK en mi ordenador). Esta opción guardará en nuestro ordenador nuestra aplicación empaquetada en un archivo APK, que después podremos pasarla a nuestro dispositivo android, compartirla con otras personas o incluso subirla a google play.

PESTAÑA AYUDA.

La pestaña de ayuda, no entraremos en mucho detalle, simplemente saber que tenemos una serie de opciones como pequeños tutoriales, ayuda, acceso a foros, para ayudarnos a conocer y aprender esta fantástica herramienta

Mis proyectos: Al pulsar en esta pestaña se nos abrirá la ventana de proyectos donde podremos ver, cargar o borrar todos los proyectos guardados con anterioridad.

 

Gallery: Esta opción es muy interesante, si la seleccionamos se abrirá una ventana con proyectos guardados por otros usuarios de app inventor, que podremos descargar y ver su código fuente, es una muy buena manera de compartir conocimiento y aprender cómo otros usuarios dan solución a diversos problemas.

Guía: Al pulsar en esta pantalla, se abrirá una nueva ventana en nuestro navegador, donde se abrirá una página con documentación y asistencia a modo de tutorial, con el que podremos conocer más a fondo esta herramienta.

 

Informar de un problema: Al pulsar en esta opción se abrirá una nueva ventana en nuestro navegador, que nos redirigirá a la página de reporte de problemas, donde podremos consultar incidencias de otros usuarios que ya fueron resueltas, o denunciar un problema que tengamos con app inventor.

 

Español: Si has seguido este curso desde el principio  en esta pestaña tendrás seleccionando el idioma español, por el contrario por defecto tendrás el idioma inglés, para cambiar el idioma pulsa en la pestaña y selecciona el idioma en el que esté configurado.

PESTAÑA DE USUARIO.

En la siguiente y última pestaña aparecerá la cuenta de correo  con la que accedimos a app inventor, si pulsamos podremos cerrar sesión.

BARRA DE PROYECTOS.

Continuando con la pantalla de proyectos, nos encontraremos una barra verde que separa las opciones antes citadas, que contiene tres botones que vamos a ver a continuación.

Comenzar un proyecto nuevo:  Si pulsamos se abrirá un cuadro donde podremos darle el nombre a un nuevo proyecto, al rellenar el campo de texto con un nombre y pulsar en aceptar se nos creará un proyecto nuevo que aparecerá en la pantalla de proyectos.

 

Borrar proyecto: Si seleccionamos un proyecto de la ventana de proyectos pulsando en el cuadro situado a la izquierda del mismo y seguido pulsamos esta opción, se abrirá una nueva ventana para que confirmamos si realmente queremos borrar, si pulsamos en aceptar el proyecto se borrara definitivamente de la pantalla de proyectos.

 

Publish to Gallery:  Si seleccionamos un proyecto de la ventana de proyectos pulsando en el cuadro situado a la izquierda del mismo, y seguido pulsamos esta opción, se abrirá una página en la que se nos pedirá que rellenemos una serie de campos como la dirección URL de un video o tutorial e incluso introducir una breve descripción de la app. Después si pulsamos en el botón Publish de esa misma pagina se publicara, o por el contrario podremos cancelar el proceso pulsando el botón Cancel.

Después de publicar nuestra app, todo usuario de app inventor podrá descargarla y tenerla como un proyecto propio, para aprender como la realizaste tu, ten encuenta que una de las filosofías del MIT es la de compartir el conocimiento.

 

APP INVENTOR COMENZANDO

Lo primero que tendremos que tener, y que es indispensable, es una cuenta de correo de Google, ya que nos pedirá una para poder registrarnos y utilizar App Inventor. Si no tienes una o no sabes cómo crearla te dejo un tutorial muy bueno que te explica paso a paso el proceso para crear una cuenta de Google.

Seguido abriremos nuestro navegador predeterminado, uno de los requerimientos para que funcione sin ningún problema es que nuestro navegador, esté en la lista de navegadores soportados.

 

	NAVEGADORES SOPORTADOS
Mozilla Firefox 3.6 o superior	Si utiliza Firefox con la extensión NoScript, deberá desactivar la extensión.
Apple Safari 5.0 o superior
Google Chrome 4.0 o superior
Microsoft Internet Explorer	Internet Explorer no es compatible

 

CÓMO CONECTAR CON NUESTRO DISPOSITIVO

 

La opción que recomienda el MIT a la hora de hacer nuestras pruebas, es utilizar un teléfono o tablet que tenga instalado la aplicación “MIT App Inventor Companion”. Con esta aplicación y una conexión de internet inalámbrica podrás probar tus aplicaciones a medida que las creas. Veamos paso a paso cómo se hace.

 

OPCIÓN 1: CONECTAR CON LA APLICACIÓN COMPANION

 

PASO1: Instalación de la aplicación MIT AI2 Companion en tu dispositivo.

 

Lo primero que tenemos que hacer es instalar la aplicación en nuestro teléfono o tablet desde google play, puedes hacerlo directamente pinchando en este enlace.

 

https://play.google.com/store/apps/details?id=edu.mit.appinventor.aicompanion3

 

Puede ser que tu teléfono no disponga de google play, para ello el MIT nos ofrece descargarnos la aplicación directamente a nuestro teléfono sin necesidad de ir a la tienda de google, para ello puedes hacerlo pulsando en el siguiente enlace.

http://appinv.us/companion

 

Si te decides por esta última opción, debes habilitar la opción en tu telefono para poder instalar aplicaciones de orígenes desconocidos, si no sabes como se hace, te dejo un enlace donde te explica paso a paso como instalar aplicaciones de «fuentes desconocidas».

 

PASO 2: CONECTAR EL ORDENADOR Y TU DISPOSITIVO AL MISMO WIFI

Pues como dice el titulo de este paso tendremos que conectar tanto el teléfono o tablet Android a la misma red wifi que tengamos el ordenador. De esta manera podremos probar nuestros proyectos.

 

Paso 3: CONECTAR “COMPANION” CON UN NUEVO PROYECTO.

Ahora toca probar si todo va bien, para eso iremos a App Inventor y abriremos un nuevo proyecto Project> Start New Project al que daremos el nombre de “PruebaConexion”.

 

A continuación, seleccione «Conectar» y «Companion AI» en el menú superior del AI2:

 

Aparecerá una ventana con un código QR en la pantalla. En tu teléfono o tablet, inicia la aplicación “MIT App Companion”. Seguido pulsaremos el botón “Scan QR Code» (Escanear código QR) nos abrirá la cámara y seguido leeremos el código QR.

Nos aparecerá una barra de progreso mientras carga nuestra aplicación, después de terminar tendrías que ver la aplicación en la pantalla de tu dispositivo.

Podemos encontrarnos en la situación de que nuestro dispositivo no tenga cámara o está esté estropeada, para esta situación podemos escribir el código que aparece más arriba donde dice “Su código es” y que está compuesto por 6 caracteres.Después pulse el

botón naranja.

 

OPCIÓN 2: CONEXIÓN SIN WIFI

 

En ocasiones teniendo un teléfono o tablet Android y un PC puede ser que no tengamos una conexión Wi-Fi o quizá está no funciona correctamente, el MIT nos da una oportunidad más con un cable USB, esta manera de conectar nuestro dispositivo al ordenador no es una de las mejores opciones, sobre todo en Windows donde en ocasiones tendremos que instalar nosotros mismos el controlador para poder hacer posible la comunicación con nuestro dispositivo. Veamos paso a paso cómo se haría de esta manera.

 

PASO 1: INSTALACIÓN DEL SOFTWARE DE CONFIGURACIÓN

 

Lo primero que tendremos que hacer es instalar un pequeño software de configuración en tu ordenador. A continuación te dejo los enlaces para que descargues este software para los distintos sistemas operativos.

 

Instalación en sistema Mac OS X

 

• Descargue el instalador .

 

• Haga doble clic en el archivo descargado para iniciar el instalador. (Es posible que necesite buscar en la carpeta de descargas de su navegador El archivo se llama AppInventor_Setup_v_X.X.dmg (donde el XX es el número de versión)
  Haga clic en Continuar.

 

• Lea y acepte el acuerdo de licencia del software.
  En la pantalla Instalación estándar, haga clic en Instalar. No cambie la ubicación de instalación

 

• Si se le solicita, ingrese su contraseña para confirmar que realmente desea instalar el software. Haga clic en Aceptar.
  El instalador confirma que el paquete de instalación de App Inventor se ha instalado.

 

 

 

Instalación en Windows

 

Debes realizar la instalación desde una cuenta que tenga privilegios de administrador . Actualmente no se admite la instalación a través de una cuenta que no sea de administrador.

Si has instalado una versión anterior de las herramientas de configuración de App Inventor 2, deberás desinstalar antes de instalar la última versión.
Sigue las instrucciones en Cómo actualizar el software de configuración de App Inventor .

 

• Descarga el instalador.

 

• Busca el archivo MIT_Appinventor_Tools_2.3.0 (~ 80 MB) en tus archivos de descargas o en tu escritorio. La ubicación de la descarga en tu computadora dependerá de cómo esté configurado tu navegador.

 

• Abre el archivo.

 

• Haz clic en los pasos del instalador. No cambies la ubicación de la instalación, sino que registra el directorio de instalación, ya que podrías necesitarlo para comprobar los controladores más adelante. El directorio diferirá dependiendo de tu versión de Windows y si está conectado o no como administrador.
  Es posible que se te pregunte si deseas permitir que un programa de un editor desconocido realice cambios en este equipo. Haga clic en Sí

 

• Localización del software de configuración
  
  En la mayoría de los casos, App Inventor debe poder localizar el software de instalación por sí solo. Pero si pide la ubicación del software, la ruta de acceso es C: \ Archivos de programa \ Appinventor \ commands-for-Appinventor . Si estás utilizando una máquina de 64 bits  (Cómo saber si está en Windows de 64 bits) , debes escribir Program Files (x86) en lugar de Archivos de programa También, si no has instalado el software como administrador , se instaló en su directorio local en lugar de en C: \ Archivos de programa. Tendrás que buscarlo para encontrar la ruta correcta.

 

Instalación GNU Linux.

Utiliza estas instrucciones para sistemas que pueden instalar paquetes Debian
(por ejemplo, Debian o Ubuntu):

Nota: Si instalaste previamente un paquete de instalación de App Inventor Classic, debe quitarlo, ya que puede interferir.

Con la nueva instalación. Elimina el paquete con sudo apt-get remove appinventor-setup.

• Descargue el paquete Debian del instalador de Appinventor Setup . Este es un archivo llamado appinventor2-setup_2.3_all.deb. Es un archivo de instalación de paquetes Debian. El lugar en el que terminará en tu ordenador dependerá de cómo configuraste tu navegador. Normalmente, entrará en su carpeta de descargas.

 

• Si tu sistema puede instalar paquetes simplemente haciendo clic en el archivo de paquete, haz eso.

 

• Si tu sistema no admite los instaladores de paquetes que se pueden hacer clic,
  vaya al directorio donde se encuentra el archivo y ejecute
  el comando sudo dpkg –install appinventor2-setup_2.3_all.deb

 

• Con cualquiera de los métodos, es posible que debas asegurarte de que el archivo deb, así como el directorio en el que se encuentran son legibles mundialmente y ejecutables a nivel mundial . En algunos sistemas, sudo no tiene los privilegios por defecto para leer y ejecutar todos los archivos.

 

• El software se instalará en / usr / google / appinventor .

 

 

 

INSTRUCCIONES PARA OTROS SISTEMAS  GNU / Linux

Descargue el archivo tar del instalador de Appinventor Setup . Este es un archivo llamado appinventor2-setup_2.3.tar.gz. Se trata de un archivo Gzip comprimido tar.
Instale los archivos utilizando un método apropiado para su sistema operativo. Deberás comprobar que el directorio de comandos para Appinventor termina en / usr / google / appinventor .

Arrancando un arranque

El programa aiStarter gestiona la comunicación entre el navegador Web y el dispositivo Android. Debe estar funcionando siempre que la gente use el emulador o el cable USB; no necesita estar en ejecución cuando la gente está utilizando el compañero inalámbrico. Cada vez que alguien inicia sesión para usar App Inventor con el emulador o USB, necesitarán iniciar aiStarter. Esto se puede hacer con el comando
/ usr / google / appinventor / commands-for-Appinventor / aiStarter &
Por conveniencia, puede que desee organizar que este comando se ejecute automáticamente cada vez que alguien inicie sesión o cuando se inicie el sistema. La forma precisa de hacerlo depende de la distribución GNU / Linux que esté utilizando. Consulte la documentación de su distribución.
Localización del directorio de configuración

En la mayoría de los casos, App Inventor debe poder localizar el software de instalación instalado por sí solo. Si te pregunta dónde está ubicado el software, la ruta del directorio que debes ingresar es
/ usr / google / appinventor / commands-for-Appinventor.

 

Paso 1: Configurar el dispositivo para USB (Activar la depuración USB)

En tu dispositivo, entra en la  Configuración del sistema, Opciones de desarrollador, activarlo y asegúrate de que se permite la  «Depuración USB».

En la mayoría de los dispositivos con Android 3.2 o versiones anteriores, puedes encontrar esta opción en Configuración> Aplicaciones> Desarrollo.

En Android 4.0 y versiones más recientes, está en Configuración> Opciones de desarrollador.

Nota: En Android 4.2 y versiones más recientes, las opciones de desarrollador se ocultan de forma predeterminada. Para que esté disponible, vaya a Ajustes> Acerca del teléfono y pulse Crear número siete veces. Vuelva a la pantalla anterior para encontrar opciones de desarrollador, incluyendo «Depuración USB».

Paso 2: Conecte su computadora y dispositivo, y autentique si es necesario.

Conecta tu dispositivo al ordenador mediante el cable USB – asegúrese de que el dispositivo se conecta como un «dispositivo de almacenamiento masivo» (no «dispositivo multimedia») y que no está montado como una unidad en tu ordenador. Esto puede significar que debe ir al Finder (en un Mac) o a Mi PC (en Windows) y desconectar cualquier unidad que haya montado cuando conectó su dispositivo Android.

En Android 4.2.2 y versiones posteriores, su dispositivo mostrará una pantalla con el mensaje Permitir depuración USB? la primera vez que lo conecte a una computadora nueva. Presiona OK». Esto autentifica el ordenador al dispositivo, permitiendo que el ordenador se comunique con el dispositivo. Tendrá que hacer esto para cada equipo que desee conectar al dispositivo, pero sólo una vez por computadora.

Paso 3: Pruebe la conexión.

Vaya a esta página de prueba de conexión

http://appinventor.mit.edu/test/

(abre en una nueva pestaña en su navegador)

y ver si obtiene una confirmación de que su computadora puede detectar el dispositivo. Si la prueba falla, vaya a la Ayuda de Conexión General y observe la ayuda USB para su computadora (Windows o Mac). No podrá utilizar App Inventor con el cable USB hasta que resuelva los problemas de conexión.

Paso 4: CONECTAR “aiStarter” CON UN NUEVO PROYECTO.

Iremos a App Inventor y abriremos un nuevo proyecto Project> Start New Project al que daremos el nombre de “PruebaConexion”.

 

A continuación, seleccione «Conectar» y «USB» en el menú superior del AI2: Si todo va bien tendríamos que ver nuestra aplicación en la pantalla de nuestro teléfono, si no repite los pasos desde el paso 1.

 

OPCIÓN 3; Instalación y ejecución del emulador en AI2

Si no tienes un teléfono o tableta Android, puedes crear aplicaciones con App Inventor. App Inventor proporciona un emulador de Android, que funciona igual que un teléfono Android pero que aparece en la pantalla del ordenador. Así que puedes probar tus aplicaciones en un emulador y seguir distribuyendo la aplicación a otros, incluso a través de Play Store.

Para usar el emulador, primero debes instalar un software en tu ordenador

 

Paso 1. Inicie aiStarter (sólo en Windows y GNU / Linux)

 

El uso del emulador  requiere la instalación de un programa llamado aiStarter . Este programa es el ayudante que permite al navegador comunicarse con el emulador.

En un Mac, aiStarter se iniciará automáticamente cuando inicie sesión en su cuenta y se ejecutará de forma invisible en segundo plano.

En Windows, habrá accesos directos a aiStarter desde tu escritorio, desde el menú Inicio, desde Todos los programas y desde la carpeta de inicio. Si desea usar el emulador con App Inventor, tendrá que iniciar manualmente aiStarter en su computadora cuando inicie sesión. Puede iniciar este comando haciendo clic en el icono en su escritorio o utilizando la entrada en su menú de inicio.

El icono de aiStarter en Windows  

Para iniciar aiStarter en Windows, haga doble clic en el icono (mostrado arriba). Sabrá que ha iniciado con éxito aiStarter cuando ve una ventana como la siguiente:


En GNU / Linux, aiStarter estará en la carpeta / usr / google / appinventor / commands-for-Appinventor y tendrá que iniciarlo manualmente. Puede iniciarlo desde la línea de comandos con
/ usr / google / appinventor / commands-for-appinventor / aiStarter &
Para obtener ayuda con aiStarter, consulte la Ayuda de conexión.

Paso 2. Abra un proyecto de App Inventor y conéctelo al emulador.

Primero, vaya a App Inventor y abra un proyecto (o cree uno nuevo: use Project> Start New Project y dé un nombre a su proyecto).

Luego, desde el menú de App Inventor,  vaya al menú Conectar y haga clic en la opción Emulador .

Obtendrá un aviso diciendo que el emulador se está conectando. Iniciar el emulador puede tomar un par de minutos. Puede ver pantallas de actualización como las siguientes a medida que se inicia el emulador:

El emulador aparecerá inicialmente con una pantalla negra vacía. Espere hasta que el emulador esté listo, con un fondo de pantalla de color. Incluso después de que aparezca el fondo, debe esperar hasta que el teléfono emulado haya terminado de preparar su tarjeta SD: habrá un aviso en la parte superior de la pantalla del teléfono mientras se está preparando la tarjeta. Cuando se conecte, el emulador se iniciará y mostrará la aplicación que ha abierto en App Inventor.