Galletas! Nos obligan a informar que utilizamos cookies (como casi todas las webs). Al continuar navegando aceptas su uso.

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

Tema en 'Desarrollo de Apps - App Inventor' iniciado por xabilaser, 13 Feb 2016.

  1. xabilaser

    xabilaser Simdualero de Platino

    • Veteran@
    610
    256
    20 Jun 2012
    Basque Country
    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.

    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.
    PARAMETROS DE SCREEN1 (abrir)

    • 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:

    TABLAS DE DISPOSICIÓN (abrir)

    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.


    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.


    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.
    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.
    AÑADIENDO UN BOTON (abrir)
    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.
    AÑADIENDO UN MODULO DE NAVEGADOR (abrir)
    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.
    Doogee Shoot 2 Aliexpress Ofertas
    Al registrarte dejarás de ver este anuncio. Anímate, es gratis, rápido y sin PUBLICIDAD!

    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.

    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 (abrir)
    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 Y PAPELERA (abrir)

    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 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.
    Con esto, ya tenemos lista nuestra primera app sencilla y funcional, y terminado nuestro segundo tutorial.

    ¡A probarla!
     
    Última edición: 14 Feb 2016
    • Me Gusta Me Gusta x 6
    • Gracias Gracias x 1
    • psanlu

      psanlu Simdualero de Diamante

      • Cocinero Android
      • Miembro de Honor
      • Veteran@
      6.010
      7.600
      5 Dic 2012
      Córdoba, España
      Bueno @xabilaser@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.
      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.
      Lo dicho muchas gracias por estos tutos y te animo a que sigas con ellos, que me interesan.
      Un saludo compañero
       
      • Me Gusta Me Gusta x 4
      • aldogar74

        aldogar74 VIP+

        • Cocinero Android
        • Veteran@
        9.850
        20.925
        18 Feb 2012
        • Me Gusta Me Gusta x 1
        • xabilaser

          xabilaser Simdualero de Platino

          • Veteran@
          610
          256
          20 Jun 2012
          Basque Country
          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
           
          • Me Gusta Me Gusta x 4
          • margal.r

            margal.r VIP+

            • Miembro de Honor
            • Veteran@
            12.355
            12.712
            17 Feb 2014
            Cerca de Barcelona
            Yo me veo pez total para estas cosas pero si necesitáis un "conejillo de indias" para probarla, contar conmigo.
            Un saludo
             
            • Me Gusta Me Gusta x 1
            • GregorioS

              GregorioS VIP+

              • Ayudante Noticias
              • Veteran@
              • Noticias MDS
              3.385
              7.545
              24 Jul 2013
              Justo aqui
              aqui disponeis de otro conejillo de indias por si os interesa
               
              • Me Gusta Me Gusta x 2