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.
    Regístrate para ver este contenido. Es gratis!

    AÑADIENDO ELEMENTOS DE DISEÑO:

    Regístrate para ver este contenido. Es gratis!

    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.
    Regístrate para ver este contenido. Es gratis!

    Ahora, añadiremos un navegador donde mostrar la página.
    Regístrate para ver este contenido. Es gratis!

    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:
    [​IMG]

    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:

    Regístrate para ver este contenido. Es gratis!


    Regístrate para ver este contenido. Es gratis!


    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í:
    [​IMG]
    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
      • MDS Team
      • Miembro de Honor
      • Veteran@
      6.007
      7.595
      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.906
        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 Super Moderador

              11.811
              11.977
              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
              • aqui disponeis de otro conejillo de indias por si os interesa
                 
                • Me Gusta Me Gusta x 2
                Verificación:
                Borrador guardado Borrador eliminado

                Compartir esta página

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