Nuestra primera instrucción en App Inventor 2.

 

Hola, empezamos nuestro curso con con una sencilla instrucción que mostrará el mensaje  “hola mundo” en la pantalla de nuestro dispositivo móvil.

Una vez abierto App Inventor 2 en la pantalla de nuestro navegador, crearemos un nuevo proyecto, para ello haremos como siempre, pulsaremos en la pestaña de Proyectos y pulsaremos en Comenzar un proyecto nuevo…,

le daremos el nombre que queráis, yo en mi caso le daré Lección1, no olvides que el nombre del proyecto no puede contener caracteres extraños, seleccionamos nuestro nuevo proyecto y en el diseñador nos dirigiremos a Paleta -> Disposición y arrastramos el componente DisposicionVertical dentro de nuestra pantalla Screen1

manteniendo seleccionado este componente, nos dirigiremos a las propiedades situadas a la derecha de la pantalla de nuestro ordenador y y tanto el Alto como el Ancho seleccionaremos la opción, Ajustar al contenedor, esto hará que la disposición vertical siempre ocupe el total del alto y ancho de la pantalla del dispositivo, independientemente de cuál sea su tamaño.

Si eres nuevo en App Inventor 2 y lo tienes configurado en Inglés, te resulta difícil seguir este tutorial, no te preocupes es tan fácil como pulsar en la pestaña superior derecha donde pone Inglés, y seleccionar tu idioma de entre la lista de idiomas disponibles.

Dada esta pequeña explicación para que nadie tenga problemas seguimos con este primer capítulo de esta serie que te enseñará a programar en App Inventor 2. Sin salir de las propiedades de nuestra Disposición Vertical, pondremos tanto la DispHorizontal como la DispVertical en el centro 3,

con eso haremos que todo lo que metamos dentro de esta, este justamente centrada en la pantalla. Una vez hecho esto nos dirigiremos a paleta → Interfaz de usuario y arrastraremos el componente etiqueta al interior de nuestra Screen1

esta etiqueta nos servirá para mostrar los resultados de la codificación que hagamos, ahora y en adelante en este curso. Ahora en las propiedades de la etiqueta pondremos el tamaño de letra en 30 y  el tipo de letra elegiremos Serif, en el cuadro de texto pondremos “Hola Mundo” y en posición del texto lo dejaremos en el centro, las demás propiedades las dejaremos las que vienen por defecto

ahora haremos una comprobación en un dispositivo real, esto servirá para ver que todo funciona correctamente, yo elegiré mi método favorito que es conectarlo con Ai companion vosotros podéis elegir el que mas os guste.

Una vez visto que todo funciona correctamente iremos a la pantalla de bloques y tendremos a nuestra izquierda justo debajo de  bloques → integrados el nombre de nuestra primera pantalla Screen1, si pulsamos, se desplegaran una serie de bloques y escogeremos cuando Screen1 inicializar ejecutar,

ahora en bloque pulsaremos en la etiqueta1 y seleccionaremos el bloque poner etiqueta1 texto como que situaremos justo debajo de el anterior componente de la pantalla,

ahora en bloques integrados seleccionaremos texto, y de los bloques desplegados arrastraremos el bloque entrecomillado que no contiene texto “ ”,

y lo situaremos a continuación de bloque anterior, escribiendo dentro “Hola Android”, ahora elegimos nuestro método favorito para conectar con nuestro dispositivo android y esta vez veremos como en el centro de la pantalla aparece otro texto diferente “Hola Android” con esto vemos que los bloque anteriores están haciendo su trabajo y han cambiado el texto.

llegados a este punto pasaremos a explicar como comentar nuestros programas, esto es especialmente importante cuando nuestros programas son demasiados grandes y los compartimos con terceras personas, esto se hace de una manera muy sencilla, pulsaremos con el botón derecho del ratón sobre el bloque que queremos comentar y del desplegable de opciones que muestra, escogeremos añadir comentario.

Veremos que saldrá en la esquina superior izquierda del bloque un circulo azul con un signo de interrogación dentro.

Si pulsamos en el veremos qué se abrirá un globo en el que podremos escribir dentro el texto que queramos, bien para explicar la función de ese bloque, o para hacer un comentario a modo de ayuda, yo en mi caso voy a poner el siguiente texto explicando la función del bloque, “Al iniciar la pantalla cambio el texto”,  una vez escrito, si vuelvo a pulsar en el signo de interrogación, el globo quedará oculto.

Cuando nuestros programas crezcan en dificultad y utilicemos una gran cantidad de datos, tendremos a nuestra disposición una herramienta de depuración, que aunque muy básica nos facilitara a la hora de encontrar errores en la ejecución, si pulsamos con el botón derecho del ratón sobre algún bloque, al abrirse las opciones en la parte inferior podemos ver la opción “Do It”  traducido significa “hazlo o ejecuta”, si pulsamos en esta opción estando el programa en ejecución, tanto en el emulador como en el dispositivo, se nos devolverá el resultado de la expresión. Esta parte la trataremos en más profundidad en siguientes entregas de este curso.

Bien con esto se termina esta primera lección, en la siguiente veremos cómo definir una variable y tipos de variables.