TUTORIAL APPINVENTOR2 Tu primera app - Introducción a los bloques

xabilaser

Platino
Mensajes
626
Puntos
2.531
Móvil
Letv Le1 Pro X800
Nos metemos ya de lleno en el desarrollo de apps, eso sí; sencillas.

La intención en este primer tuto es familiarizarnos con la programación en bloques y descubrir cómo funciona y para qué sirve cada pieza de éste ingenioso puzle.
Es muy importante tener en cuenta dos sencillas claves:
  • No es necesario tener conocimientos de programación, en absoluto, pero tampoco viene mal saber o conocer fundamentos básicos para entender cómo funciona.
  • La programación mediante bloques ofrece multitud de posibilidades de manera muy sencilla pero no por que encajen los bloques la respuesta de la app va a ser la deseada. Hay que tener muy en cuenta todos los aspectos de los comportamiento que queremos que de nuestra app, por lo que el sistema de prueba-error va a ser una constante necesaria.
Dicho esto y teniendo en cuenta que vamos a ciegas (yo soy un humilde iniciado, no os esperéis que sepa mucho más de lo que aquí escribo), vamos a empezar conociendo y repasando el entorno, basándonos en el anterior tuto.

CREANDO LA INTERFACE
Lo primero que vamos a hacer siempre es crear los elementos que componen la app desde la vista de diseño. No existe otra forma de empezar pues para dar acciones a los objetos, lo primero que vamos a tener que hacer es crear los objetos. Antes primero, elegir el idioma arriba a la izquierda.

Partimos de una pantalla que por defecto se llamará Screen1. Si vamos a crear más pantallas por comodidad o para una app multipantalla, arriba a la derecha encontramos un botón de selección de pantalla que por defecto nos muestra Screen1 y, junto a ese, otros dos para crear o eliminar más pantallas.
SCREEN1 Y PROPIEDADES DE LA APP:
Al ser Screen1 la pantalla por defecto, nuestra app siempre arrancará desde aquí, lo que le confiere un nivel jerárquico superior. Por eso mismo, las propiedades de Screen1 serán también las propiedades de la app en cuanto a datos de compilación, icono y parámetros generales se refiere.
Es por eso que antes de arrancar con el diseño, tendremos que tener en cuenta estos parámetros y configurarlos, aunque no sea de manera definitiva, pues los podremos ir cambiando más adelante.
  • Pantalla acerca de: espacio para escribir un comentario de autor o firma.
  • Disposición Horizontal: Como queremos que se muestre en relación horizontal. Normalmente, Centro.
  • Disposición Vertical: Como queremos que se muestre en relación vertical. Si queremos que nuestra app se muestre con scroll, elegiremos Arriba, para que muestre los elementos de arriba hacia abajo, como una página web. Si por el contrario queremos una pantalla fija sin scroll, elegiremos Centro o Abajo.
  • App Name: Nombre de la App tal y como se mostrará en los menús Android, etc.
  • Color de fondo
  • Imagen de fondo: seleccionaremos una imagen si queremos tenerla como fondo de la app en transiciones y cuando no muestre un elemento encima. Previamente la cargaremos en Media.
  • Animacion Cierre De Pantalla: diferentes opciones para transiciones y cierres.
  • Icono: icono de la App para mostrar en menús Android e instalación. La imagen deberá ser cargada previamente y en formatos típicos de imagen (JPG, PNG, GIF)
  • Animación Al Abrir Pantalla:lo mismo que la de cierre pero de apertura.
  • Orientación de la pantalla: muy importante si queremos que se muestre en toda clase de pantallas. Si sois ingeniosos a la hora de maquetar, elegiréis Sensor. En esta App, para no complicarnos la vida, he elegido Vertical.
  • Enrollable: si va a existir scrol, tilda que sí. Ojo, en apps como la que estamos creando, tildaremos que no porque vamos a tener fijos los botones abajo. El scrol dento del navegador (visor web) para ver la web de MDS es independiente. Esta opción afecta a la pantalla en global.
  • Show Status Bar: si queremos que se muestre o no. Hay que tener en cuenta si queremos que se muestre, sobre todo si la app utiliza sensores como posicionamiento, para poder controlar si se abren o si hay conexión. También contaremos con el +/-8% de espacio que ocupa para maquetar el resto de la pantalla. En nuestro caso, elegiremos que no para trabajar al 100% de pantalla y poder hacer un sencillo cálculo, sin complicarnos la vida.
  • Sizing: no controlo muy bien éste parámetro aunque sé que es para auto maquetar para diferentes formatos y tamaños de la pantalla. Fixed fija los elementos y Responsive los ordena de forma automática. El equivalente a Responsive en CSS sería Relative.
  • Título: esta es una opción que no tocaremos en Screen1 si queremos que siempre funcionen nuestras apps. Si trabajamos con más de una pantalla, sí cambiaremos el nombre sobre todo, para orientarnos. Arriba a la izquierda tenemos un desplegable para seleccionar con qué pantalla queremos trabajar. De cara a este desplegable,podemos identificar de una manera más reconocible cada pantalla. Eso sí; Screen1 siempre tiene que ser Screen1.
  • Title Visible:Si queremos que se haga visible el título de cada pantalla. Ocupa otro 6-7% de pantalla. Yo personalmente, prefiero utilizar etiquetas para titular cada pantalla y hacerlas visibles o invisibles según dónde esté. Así, ganamos entre otras cosas, uniformidad de imagen.
  • Código de versión: para los amantes de las versiones y como guía de actualizaciones. Empezamos por una versión 1.0.1, por ejemplo...
AÑADIENDO ELEMENTOS DE DISEÑO:

El primer elemento que tendremos que añadir es una tabla de disposición.
Las TABLAS DE DISPOSICIÓN: funcionan como capas y hacen de contenedor de los elementos. Son anidables y muy útiles para maquetar pero no se recomienda hacerlo solo con ellas, sino utilizar también las propiedades de los elementos que metemos en ellas. Hay de tres tipos:
  • Disposición horizontal.
  • Disposición vertical.
  • Disposición en tablas o tabular; ordenan los elementos en filas y columnas.
Para ubicar las tablas de disposición, tan solo tenemos que arrastrarlas hasta la vista de diseño o interface, tal y como tendremos que hacer con todos los elementos.

Como he dicho antes, las tablas de disposición son anidables, por lo que, a menos que vayamos a diseñar una interface sencilla o con un orden muy marcado, siempre empezaremos con una tabla de Disposición Tabular.

A la izquierda de la pantalla de diseño se encuentra la PALETA. La paleta es un desplegable y en la segunda opción se encuentra Disposición con sus tres opciones de disposición. Seleccionaremos la primera, Disposición Tabular, y sin soltar el ratón, la arrastramos hasta el centro del visor.
Este mecanismo de ubicación de elementos es la acción que vamos a repetir con todos los elementos que queramos ubicar en la app desde la vista de diseño, sean visibles o no. A la derecha, en el area de componentes, se mostrará el elemento que hemos añadido.

Se recomienda en todos los casos dar nombre a todos los elementos en el área de componentes mediante los botones de debajo. Es muy importante hacerlo para poder identificar los elementos en la vista de bloques cuando vamos a asignarles acciones y/o comportamientos y nos ahorrará mucho trabajo.

En este caso, la vamos a nombrar como TBD_fondo. He elegido este nombre para poder identificarla como tabla de disposición (TBD) y para saber que es la de debajo (fondo).
i.imgur.com_5lepCMV.jpg

A la derecha del todo se nos muestran las propiedades de la tabla en el panel de propiedades. En las disposiciones podremos configurar el número de columnas y registros, aunque, si no tenemos claro cuántos van a ir, se irá actualizando automáticamente conforme vayamos añadiendo objetos.
El resto de parámetros (alto, ancho y visible) los configuraremos ajustando al contenedor en el caso de las dimensiones, pues vamos a considerar esta capa como el fondo a pantalla completa y, visible. Esta última propiedad veremos si es necesario cambiarla en función de cómo queramos que se comporte la aplicación, pues podremos hacer que una tabla o cualquier otro elemento de visibilidad, como un Sprite, se muestre visible o invisible desde el panel de bloques en función de cómo queramos que se comporte cada cosa en cada situación.

** NOTA EN LA PRUEBA DE LA APP: No sé si por capricho del emulador o por qué, me ha mostrado la mitad de la pantalla vacía, así que he anidado una tabla vertical en la que he colocado el navegador y,debajo de éste, he anidado otra tabla horizontal (dentro de la vertical) para los botones. **
Una vez añadida la tabla o tablas de disposición para comenzar el maquetado, comenzaremos a añadir los elementos. Como no nos vamos a complicar la vida con esta app, vamos a hacer algo sencillo como un botón que abra un navegador en el que se muestre la primera página del foro.
De la Paleta (panel izquierdo), la primera opción que encontramos es botón. Seleccionamos y arrastramos hasta la parte del la tabla de disposición que queramos colocarlo. Por defecto, arriba a la izquierda pero advertiréis que AI2 os muestra las posibles posiciones con un atenuado de marco azul. Como en este caso os la va a colocar arriba a la izquierda, para comprobarlo podéis intentar situarla debajo, fuera de la tabla de disposición.Un vez colocado, configuramos parámetros:
  • Primero y como siempre, cambiamos nombre en el panel componentes. Yo he elegido BOT_abrirwebMDS.
  • En propiedades empezamos a cambiar a gusto de diseñador, color de fondo, de texto; tamaño de letra, negrita/cursiva, etc. Yo he elegido un alto de 8% y un ajuste al contenedor del ancho, además de redondeado.
  • Si en lugar de un botón estándar (las opciones de AI2 son un tanto limitadas) queremos utilizar una imagen, primero debemos subirla desde el panel Media y luego seleccionarla aquí, en propiedades. Una vez elegida, no obviaremos los colores y pondremos ninguno tanto en texto como en fondo. Además, si el botón no necesita texto, dejaremos este campo en blanco.
  • Tenemos la opción MostrarPulsación para dar un efecto dinámico al botón. En el caso de las imágenes, es una opción a tener en cuenta ya que AI2 no nos permite rollovers (yo no los he encontrado al menos)
Con estos sencillos pasos, ya tenemos creado el botón que abrirá la web.
He añadido otro botón con las mismas características para cerrar la aplicación, lo he situado junto a este y lo he llamado BOT_cerrarapp.
He añadido a ambos botones un ancho de 50% para que se repartan el ancho de pantalla, pero para darle un aire de diseño más aligerado, también podría darles un ancho menor y abrir un espacio entre ellos insertando una etiqueta en blanco, por ejemplo.
Ahora, añadiremos un navegador donde mostrar la página.
Para añadir el navegador, seguiremos los mismos pasos que para los botones y para cualquier objeto que vayamos a añadir, por lo tanto, tan solo mencionaré las propiedades y el nombre, que será NAV_principal. Propiedades:
  • Añadiremos un ancho ajustado al contenedor y un alto con el 92% de pantalla restante, teniendo en cuenta que hemos usado un 8% para los botones.
  • Dejaremos en blanco la UrlInicial porque queremos que nuestro botón llame a la URL deseada (MDS), aunque podríamos poner una URL inicial como un motor de búsqueda. Ésto último no lo aconsejo por una razón de navegabilidad, ya que cuantas más direcciones añadamos, más carga de navegación vamos a añadir y eso, no va a hacer que la app sea ligera cuando no tengamos la mejor conexión.
  • El resto de opciones, las dejamos por defecto, a menos que queramos navegar por un sitio con seguridad SSL; en ese caso, podremos tildar IgnoreSSlerrors para evitar que la app inunde de mensajes de error la navegación.
Por último, vamos a añadir un componente oculto que se va a encargar de dar acción a los elementos dinámicos: Activity Starter o iniciador de actividad, que se encargará de una forma un tanto subjetiva, de lanzar las acciones de los elementos dinámicos, como si se tratara de la llave de contacto de un vehículo, por ejemplo.
Éste elemento tan solo lo arrastraremos a cualquier lugar del área de diseño, pues es un componente invisible.

Ya tenemos los elementos de diseño necesarios. Ahora, nos vamos a los bloques, a dar vida a nuestra primera app...

PROGRAMANDO CON BLOQUES

Como comentaba al principio del tutorial, los bloques son piezas de un rompecabezas confeccionadas con fragmentos de código que, juntándolas adecuadamente, asignarán un comportamiento determinado a cada objeto en cada momento determinado o evento.

Si tienes conocimientos de programación, te sonarán y te vendrán bien conceptos como evento, array o variables, que también nos aparecerán en forma de bloques.

La pantalla del editor de bloques es más sencilla que la interfaz de diseño, a pesar de que aquí se cueza todo lo que sucede en la app. Para acceder a ella solo tenemos que irnos al botón superior izquierda de nombre Bloques. A la izquierda encontramos una lista en forma de árbol con los bloques integrados o fragmentos de código y los objetos que hemos añadido a la interface. El resto de pantalla la ocupa un espacio en blanco con una mochila, una papelera y una minúscula área dónde se nos notificarán los posibles errores o incongruencias y nos dará más información sobre ellas.

Pulsando en cada tipo de bloque, se nos desplegarán las opciones o piezas de cada tipo, con diferentes formas que encajan de una forma o de otra si son declaraciones, eventos, etc.

Para ver en crudo cómo funcionan, comenzaremos con la acción más sencilla de nuestra pequeña app: cerrarla. Para ello, seleccionaremos el botón que se encarga de cerrarla (BOT_cerrarapp) y pulsaremos sobre el para que se nos desplieguen todas las posibilidades en forma de piezas.
Vamos a crear una acción de tipo cuando hagamos click en el botón, se cierra la app. Para ello, arrastraremos el bloque cuando BOT_Cerrarapp.Click... y encajaremos dentro de él la orden Cerrar aplicación, que encontraremos desplegando los bloques de control integrados (recuadro marrón).

Quedará algo como esto:
i.imgur.com_98fNncW.jpg


Hay que tener en cuenta que, como es obvio, lo que no encaja geométricamente, no funciona. Así, cuando controlemos un poco más el editor, probaremos muchas posibilidades que se nos irán ocurriendo dentro de una lógica, claro; y probablemente, muchas de ellas funcionarán.

Ahora que ya tenemos nuestro primer fragmento de bloques, vamos a hacer un paréntesis para probar la app y contextualizar el resto de posibilidades que nos da el editor:

PROBAR APP
Arriba de la pantalla, por la izquierda, encontramos un menú cuyo segundo desplegable es Conectar. De las tres posibilidades que nos muestra, por rapidez y fiabilidad os recomiendo la primera, AI Companion:
  • AI Companion: Esta forma de probar la app funciona como un servidor-cliente, por poner un ejemplo. Como cliente vamos a tener que descargar AI Companion en nuestro DualSim desde Google Play, por ejemplo. Una vez instalada, tenemos dos formas de sincronizar; por QR o mediante clave de 6 dígitos. una vez conectada, probaremos la app, aunque si lo hacemos ahora, no funcionará (jejeje) pues ésta (cerrar la app) es una de las pocas acciones que no se van a poder emular en AI Companion.
  • Emulador: AI2 nos da la opción de probar la app en el emulador que tengamos instalado (os aconsejo Blue Stacks, de aconsejar alguno para Windows). De no tenerlo, nos proporciona un enlace de descarga al emulador AI Starter, que tampoco está mal. En todo caso, esta opción es lenta y desesperante.
  • USB: Ni lo intentéis. Emula un Android 2.2 en todo su esplendor y, cuando digo en todo su esplendor, me refiero también a la velocidad. No apto para impacientes.
Otra opción que me parece más completa por eso de que probamos la app tal cual es, es compilarla e instalarla en nuestro DualSim. Para ello, seleccionamos Generar del mismo menú y generamos QR - se compilará y se almacenará por un periodo de una a dos horas en el servidor de Google- o descargamos la app ya compilada. Yo uso ésta última y la guardo e una carpeta local de Dropbox. Así, desde el móvil tan solo tengo que acceder a esa carpeta una vez sincronizada, descargar e instalar.

MOCHILA: ésta es una herramienta muy útil para los que estamos aprendiendo pues sirve para guardar todos los bloques que nos funcionan y que podamos reutilizar en otras apps con alguna o ninguna modificación. El funcionamiento es muy sencillo: arrastramos el fragmento a la mochila y la abrimos para usarla como si de una carpeta de archivos se tratara.

PAPELERA: sirve para eliminar los archivos, como una papelera del sistema. Funciona igual que la mochila pero sin sincronía entre diferentes proyectos.

Cerramos el paréntesis y vamos a dar funcionalidad al botón que nos queda para terminar con nuestra primera app:

Al botón de abrir la web, tenemos que decirle eso mismo: que abra la URL. Para ello tenemos que darle varias órdenes dentro del contenedor cuando BOT_abrirwebMDS.Click:
  • Tenemos que decirle a ActivityStarter que inicie una acción: que arranque la función VIEW del navegador para mostrar la página. Para ello utilizaremos una de las pocas sentencias que vamos a tener que usar en AI2: android.intent.action.VIEW. Esta sentencia la añadiremos dentro de un campo de texto vacío que arrastramos desde el panel de bloques / Texto.
Para no tener que aprender estas sentencias, podemos guardar los fragmentos de código en la mochila.
  • Para que el navegador o Visor Web muestre la página deseada, seleccionamos desde el panel el objeto VisorWeb y arrastraremos el bloque LlamarVisorWeb1.IrALaUrl. Otra vez, usando un campo de texto vacío, añadiremos la URL.
Quedará algo así:
i.imgur.com_ELoCX3K.jpg

Con esto, ya tenemos lista nuestra primera app sencilla y funcional, y terminado nuestro segundo tutorial.

¡A probarla!
 
Última edición:
Bueno @xabilaser primero agradecerte este tutorial, porque tiene merito.
Te cuento me ha ido bien a medias,sino me he equivocado, que seguro que sí, he hecho la apk con exito pero me salia así.

S60215-095023.jpg

Lo que he hecho es volver a rehacerlo todo pero he cambiado disposición tabular por horizontal, he tenido que poner 3 en la misma pantalla, una para poner un espacio entre el titulo y los botones, otro para los botones y otro para el navegador.
Creo que no me ha quedado mal
S60215-103645.jpg

Lo dicho muchas gracias por estos tutos y te animo a que sigas con ellos, que me interesan.
Un saludo compañero
 
A ver si la semana próxima tengo tiempo y hacemos una app para guardar la posición del coche, encontrarlo con el GPS y gestionar el Bluetooth cuando entramos y salimos del coche.
No sé si me estoy viniendo arriba, pero lo intentaremos!!!

Enviado desde mi thl 5000 mediante Tapatalk
Yo me veo pez total para estas cosas pero si necesitáis un "conejillo de indias" para probarla, contar conmigo.
Un saludo
 

Del blog

Es tendencia

¿Ha terminado la locura de añadir tantas cámaras a los móviles?

  • Si

  • No

  • No lo se

  • Ya me gustaría...

  • Ya te gustaría...


Los resultados solo son visibles tras votar.
Atrás
Arriba