TUTORIAL APPINVENTOR2 Primeros pasos: instalación y complementos

Tema en 'Desarrollo de Apps - App Inventor' iniciado por xabilaser, 27 Nov 2015.

  1. xabilaser

    xabilaser Simdualero de Platino

    • Veteran@
    610
    256
    20 Jun 2012
    Basque Country
    Appinventor es un sistema de desarrollo de aplicaciones Android creado por Google, por lo que será imprescindible tener una cuenta de Google para acceder.

    Se puede trabajar desde la web Sign in - Google Accounts o descargarse el instalador para cualquier plataforma UNIX.

    Además, para previsualizar y probar, se podrá utilizar emuladores o dispositivos móviles, por lo que, en algunos casos, puede ser de utilidad el emulador de Google, para lo cual será necesario instalar el entorno de desarrollo de Android (SDK).

    En mi caso la elección ha sido la plataforma web, pues me permite desarrollar mis proyectos con movilidad y casi desde cualquier equipo que pueda correr Chrome, por antiguo que sea el equipo.
    Para esta guía, me centraré exclusivamente en esta plataforma y mostraré cómo previsualizar en el propio dispositivo Android, que es lo que la mayoría de simdualeros tendremos entre manos.

    Dicho esto, la secuencia que he seguido en mi caso ha sido la siguiente:
    - Seguir el enlace y acceder con mi cuenta de Google
    - Aceptar las condiciones del servicio
    - Voilá...

    inicio.PNG

    Como podréis ver, la interfaz se compone de varios bloques:
    1. Un menú superior donde encontraremos:
    - Opciones de la cuenta
    - Idioma
    - Opciones de previsualización
    - Opciones de publicación
    - Administrador de pantallas y de vistas
    2. Una paleta lateral con todos los objetos estáticos y dinámicos para la vista de diseño.
    3. Una vista de diseño a la que tendremos que arrastrar aquellos objetos dinámicos y estáticos que queramos añadir a cada pantalla de nuestra app.
    4. Un explorador de los objetos que habremos añadido
    5. Un explorador de medios que habremos cargado (imágenes, video, audio, etc)
    6. Una barra lateral con las propiedades de cada objeto seleccionado.

    La forma de trabajar, aunque se simplifica, no es tan sencilla de explicar sin entrar al detalle, pero lo voy a intentar pues es la mejor manera de entender la interfaz:

    Toda aplicación parte de una pantalla que, por defecto, se denomina Screen1. A partir de esta, podremos enlazar pantallas o desarrollar las apps completamente en una sola mediante capas habilitando y deshabilitando la propiedad "Visible". Si trabajamos con las dos opciones, podemos desarrollar apps sobre esquemas muy organizados, aunque no está de más esbozar el desarrollo con papel y lápiz para estructurar de la mejor manera posible tanto la navegación por la app como el manejo de la misma.

    El selector de pantalla se encuentra a la izquierda del segundo menú desde arriba, con fondo verde, y se compone de un desplegable donde seleccionar la pantalla que mostrará la vista previa y otro para crear nuevas pantallas.

    A la derecha de este mismo menu, se encuentran dos botones Diseñador y Bloques, donde obtendremos las vistas del diseño y la de los bloques de programación.
    Esta última, la de los Bloques, es la clave para que el desarrollador no tenga necesidad de conocer nada del código ni de aprenderlo, pues el manejo de scripts a modo de bloques como si de un puzle se tratara, origina la escritura automática del código por parte de la plataforma.

    bloques.PNG

    En esta parte de la plataforma, cambia algo la disposición. En ella cabe destacar dos partes:

    1- La pantalla derecha, de escroll infinito, donde podemos apreciar una mochila arriba a la derecha, para guardar una copia de los bloques de código que nos interese conservar o que vayamos a repetir en la app que estemos desarrollando o en futuros proyectos; una papelera abajo, donde destruir los bloques de código que nos sobren o que no hayamos ensamblado bien y un amplio espacio donde colocar los bloques de código. En este caso, hay dos acciones básicas nada más, pero conforme vayáis conociendo el funcionamiento de este ingenioso framework llenaréis este espacio hasta límites insospechados. El espacio de trabajo para los bloques, aunque es ilimitado, da la opción de superponer los bloques en infinitas capas para aquellos que gustan de verlo todo de un vistazo, aunque es recomendable tener los bloques ordenados para poder localizarlos manejándonos con las barras de escroll.

    2. A la izquierda, hay una barra de elementos de programación, de dónde saldrán las piezas de este mágico puzle. En la parte superior se encuentran las piezas comunes como los bloques de texto, variables, colores, etc; y en la parte inferior aparecen todos los objetos de la pantalla en la que estamos trabajando, ordenados en árbol, según la jerarquía de capas que les hayamos otorgado, en función del momento y el lugar en el que los hayamos colocado en la pantalla.

    Una vez pulsas un elemento del árbol o una pieza común, se despliega a la derecha (la parte izquierda de la vista de bloques) sobre transparencia el submenú con las opciones que nos da cada tipo de elemento. En este caso, están desplegadas las opciones de variables, en naranja.

    Cada tipo de opción presenta un color diferente, así, el inicio de la acción o las acciones globales se muestran en ocre, las ejecuciones en verde, los elementos web en morado, las variables en naranja, los cuadros de texto en rosa, las funciones lógicas en verde, las matemáticas en azul... etc.

    Una buena muestra para entender cómo funciona el sistema de bloques sería esta:
    bloqueSIM.PNG
    Mediante este bloque, pongo en marcha una aplicación muy simple de una pantalla en la que he insertado cuatro elementos en vista de diseño, tres visibles y uno invisible. Lo quie la acción expresa es que, cuando aprieto el Botón1, pongo el único elemento invisible que hay, el Activity Starter o iniciador de actividad, como cierto, para que lance el visor web que hay encima y muestre la página web que muestra el cuadro de texto que hay acoplado, la de movilesdualsim.com.

    Es un ejemplo muy sencillo para el que no voy a mostrar la vista de diseño, porque sólo pretendo que veáis cómo funciona esta maravilla.

    Una vez completados los bloques de código y la vista de diseño, comprobaremos si hay errores y sugerencias en la parte inferior izquierda de la vista de bloques y procederemos a probar la app conectándonos por wifi a nuestro dispositivo. Una vez que comprobamos que funciona, podremos exportar la app compilada o el proyecto extendido en su formato (.aia). Esta última opción, permite que los desarrolladores podamos compartir desarrollos, aumentando la capacidad colaborativa de este sistema. Así, podremos compartir ejemplos, bloques de programación, partes de aplicaciones, etc. Lo que permite a comunidades como esta (por ejemplo), el crecimiento de cada miembro en una dirección diferente, para poder compartir después partes de proyectos e, incluso, poder construir un macroproyecto entre todos de manera muy sencilla y organizada.

    En el siguiente tuto, explicaré más a fondo todo desarrollando una aplicación un poquito más compleja donde manejemos más elementos y algún que otro concepto, aunque si le dais una vuelta a Youtube o Google encontraréis mucho material para empezar y conocer mejor este sistema.

    ¡Nos vemos en la siguiente pantalla!
     
    Última edición: 27 Nov 2015
    • Me Gusta Me Gusta x 6
    • Útil Útil x 1
    • margal.r

      margal.r Super Moderador

        11.769
        11.952
        17 Feb 2014
        Cerca de Barcelona
        Muchísimas gracias por el tuto. Yo me perdí a mitad de pagina :laughing::laughing::laughing: Es que no llego, que le voy a hacer...:sweat:
        seguro que habrá mucha gente que le de un buen uso.
        Enhorabuena :wink:
         
        • Me Gusta Me Gusta x 2
        • xabilaser

          xabilaser Simdualero de Platino

          • Veteran@
          610
          256
          20 Jun 2012
          Basque Country
          @margal.r@margal.r seguro que sí te pones con un buen vídeo, lo entiendes a la primera. Todo es empezar.

          Enviado desde mi THL 5000 mediante Tapatalk
           
          • Me Gusta Me Gusta x 2
          • 0Jos0

            0Jos0 Ya es de día? Colaborador

              4.905
              6.011
              8 Jul 2014
              Gracias por tu trabajo y explicarnos como va el tema.
               
              • Me Gusta Me Gusta x 2
              • sorrilla

                sorrilla Lobo solitario VIP

                • Miembro de Honor
                • Veteran@
                El programa consiste en que cada tipo de bloque representa un codigo de programacion escrita, representada de esa manera para que a la gente que no sepa como escribirlo, le entre por los ojos.
                Desarrollando el ejemplo que puso xabilaser en segmentos mas simples y exponiendolos como en un entorno de ventanas de PC.
                La pieza ocre que contiene a las demas, representa en este caso a un boton de aceptar y como reacciona cuando alguien hace click.
                La verde oscuro es como un interruptor para activar algo (la representacion del click de raton), y la verde claro, que señalice ese interruptor como encendido (cambiar el dibujo del boton sin pulsar por el del boton mientras el raton lo pulsa).
                La morada un programa que interactua para abrir en el navegador (doble click sobre un navegador) la pagina de la fucsia (acceso directo).

                Todo esto, escrito en codigo puede sonar a chino si se ve y ocupar mucho espacio, lo cual puede desanimar a la gente que no sepa del tema, asi que es una manera facil de que uno haga programas sencillos y utiles sin necesidad de que se estrese aprendiendo a programar, aunque tenga que romperse algo la cabeza para entender que piezas necesitara :sweatsmile:

                Es mas de trastearlo que de intentar profundizar en lo que hace de fondo :up:
                 
                • Me Gusta Me Gusta x 2
                • 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
                  Muchas gracias por esta iniciativa @xabilaser@xabilaser me interesa este proyecto
                   
                  • 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.