jueves, 11 de enero de 2018

VACIAR MOCHILA EN APP INVENTOR 2

COMO USAR LA MOCHILA EN APP INVENTOR 2.

Mochila App Inventor 2

Una de las preguntas con las que más frecuentemente me encuentro, es cómo podemos vaciar la mochila de App Inventor 2. La mochila para los que no sepan usarla, sirve para copiar y pegar bloques entre distintas pantallas y diferentes proyectos, a si, si tenemos un conjunto de bloques que queremos repetir en otra pantalla de nuestro proyecto, o llevarlos a otro proyecto distinto, solo tendríamos que hacer uso de esta herramienta.

La mochila se encuentra en la esquina superior derecha y es muy fácil de usar, solo tenemos que arrastrar el bloque o conjunto de bloques dentro de esta, después, iremos a la pantalla o al proyecto en el que queramos poner los bloques anteriormente introducidos en la mochila y pulsaremos en la misma para desplegar un listado de bloques que podemos volver a arrastrar dentro del área de trabajo.

Existe otra forma de hacer esto, si pulsamos con el botón derecho del ratón sobre un bloque se  desplegará una serie de opciones, dónde podremos encontrar la opción Add to Backpack o (añadir a la mochila), el bloque en el que pulsamos y los bloques que estén junto a él pasarán a la mochila. Si en vez de pulsar con el botón derecho del ratón en un bloque, pulsamos en una parte vacía de nuestro espacio de trabajo, se desplegará otras opciones, y si pulsamos en copy all blocks to Backpack (copiar todos los bloques a la mochila), se pasarán todos los bloques que contenga el espacio de trabajo, y no sólo uno como en el anterior caso.

Una curiosidad es que si cierras sesión  y vuelves a iniciar sesión en App Inventor 2, la mochila seguirá conteniendo los bloques. Si deseas borrarlos de la mochila, solo tendrás que pulsar con el botón derecho del ratón en el espacio de trabajo de nuestro proyecto, y pulsar en la opción Empty Backpack (vaciar mochila).

Además del uso de la mochila podemos hacer uso de una combinación de teclas en App Inventor 2. Si seleccionamos con el botón izquierda de nuestro ratón un bloque, y seguido hacemos uso de la combinación de teclas Ctrl + C y Ctrl + V veremos qué ocurre exactamente igual que si fuera un texto, lo copiaremos y pegaremos. También se puede utilizar Ctrl + X, para borrar o cortar el bloque, este método solo sirve, o puede ser utilizado en la pantalla actual de trabajo, y no sirve para pasar un bloque o conjuntos de bloques de un pantalla a otra o de un proyecto a otro.

Espero que sea de mucha utilidad para ti, ya que será una manera muy rápida de copiar y pegar bloques en nuestro proyecto.

martes, 2 de enero de 2018

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».
Bloques

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, 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 PonerReloj1.TemporizadorHabilitado 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. cierto

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

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

Ahora tenemos que poner el nombre de esa pantalla que tenemos que abrir, para ello nos dirigimos a Bloques > Texto y seleccionamos el bloque (“ “)
TextoVacio
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.
TextoVacio

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.
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
Botón3.Clic

Ahora seleccionamos, TextoAVoz1 y de los bloques desplegados seleccionamos el bloque llamar textoAVoz1.Hablar
TextoAVoz
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.
CampoDeTexto1

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.Botón2.Click
Seguido seleccionamos el Bloque ReconocimientoDeVoz y el bloque de color morado llamar ReconocimientoDeVoz. ObtenerTexto , Botón2.Click
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
DespuesDeObtenerTexto
Después seleccionar y encajar dentro del bloque anterior, el bloque poner CampoDeTexto1.Texto
CampoDeTexto1.Texto
del componente CampoDeTexto1, y dentro de este mismo, el bloque ReconocimientoDeVoz1.Resultado. que se encuentra dentro de ReconocimientoDeVoz1.
CampoDeTexto1.Texto
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
CampoDeTexto1.Texto
y lo metemos dentro del Visor, seguido seleccionamos el bloque CampoDeTexto1.Texto como
CampoDeTexto1.Texto
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 “ ” .
CampoDeTexto1.Texto

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.

viernes, 22 de diciembre de 2017

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. Nombre Nuevo Proyecto App Inventor

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,
Medios multimedia
y nos saldrá una ventana emergente a la que pulsaremos en el botón SELECCIONAR ARCHIVO,
Ventana Emergente
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.

Ventana Emergente

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

 

DisposicionVertical

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

DisposicionVerticalEnPantalla

 

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.

AnchoAlto

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
Componentes
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.
Componentes

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.
Reloj
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.
RelojNoVisible
En sus propiedades desmarcamos Temporizadorhabilitado y pondremos en IntervaloDelTemporizador 5000.
PropiedadesReloj1
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.
Componentes
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.
Componentes
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.

Componentes
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.
Componentes

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.
Componentes
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.

Componentes

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.
ComponentesNoVisibles

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.

Componentes

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.

lunes, 27 de noviembre de 2017

APP INVENTOR ENTORNO DE TRABAJO.

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

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.

 

Compartir archivos y texto con Sharing

En alguna ocasión, tendrás que crear una aplicación en app inventor en la que quieras mandar fotos y videos a otras aplicaciones instaladas ...