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

TUTORIAL Creando una App MDS. Primeros pasos y desarrollo

Tema en 'Desarrollo de Apps - App Inventor' iniciado por xabilaser, 6 Jun 2016.

  1. xabilaser

    xabilaser Simdualero de Platino

    • Veteran@
    20 Jun 2012
    Basque Country
    Calificaciones:
    +329
    ¡Ya estamos en marcha!

    La idea principal es hacer una especie de Tapatalk para Movilesdualsim. No vamos a crear una mega-app desde el minuto 1, sino que empezaremos con algo sencillo que vaya creciendo hasta donde nos lleve. Voy a ir creando un esquema con Visio para empezar de forma ordenada pero creo que la mejor forma de empezar es con una plataforma de logueo que nos lleve hasta un navegador en el que se cargará directamente el foro. Luego, ya veremos...

    La mecánica de éste hilo supongo que os será familiar: comentamos todo lo que se nos ocurra dentro del hilo y lo que salga, se añade en este primer post donde irá cogiendo forma hasta convertirse en un tutorial hecho por todos.
    [Los pasos que ya se han mencionado en los anteriores tutoriales, los obviaremos.]

    Creamos el proyecto en ai2.appinventor.mit.edu y le damos nombre
    1- Animación de incio (abrir)

    Recordaremos que todas las apps arrancan en screen1. Independientemente de que trabajemos con capas o lo hagamos con más pantallas, ésta será nuestro punto de partida por lo que colocaremos aquí el primer elemento de nuestra app.
    Para trabajar un poco el cambio de pantallas, cargaremos una pequeña animación al principio y dará paso a nuestra segunda pantalla donde ya sí, mostraremos el formulario de login.
    Crearemos primero la segunda pantalla para tener un objetivo dónde apuntar y la llamaremos login. Volvemos a Screen1 y colocamos los elementos que necesitamos para hacer funcionar la animación de entrada:
    - Configuramos Screen1 para que netre y salga con fundidos y, para no complicarnos mucho al principio, le daremos formato vertical, ya que nuestra animación va a ser una imagen que entra y sale en fundidos. Como no, el logo de MDS que habremos cargado antes en el adminbistrador de medios, en la vista de diseñador.
    - Una tabla de disposición tabular
    - Una etiqueta para hacer de separador con un valor de alto del 20%, ya que nuestro logo tiene un formato apaisado.
    - La imagen, logo.png en mi caso.
    - Un reloj que servirá para temporizar la secuencia.​

    Para crear una animación de entrada, lo más sencillo es crear una capa temporizada que se haga invisible al terminar el tiempo de la animación, dejado visible la capa de logueo, de ahí que añadamos un reloj, para temporalizar.
    Los valores del reloj, serán la duración (3000ms en mi caso) y las dos casillas destildadas, así aprovechamos para aprender a manejar el reloj desde la vista de bloques.
    Quedará algo así:

    lh3.googleusercontent.com__6GKv5nWYQ78_V2QgPptw8zI_AAAAAAAAFOce4dc4b2af1bfbe72588f75c95da49c69.

    Ahora nos vamos a los bloques.
    Aquí, tendremos que decirle que, cuando se abra Screen1, se ejecute el temporizador. Al estar configurada la entrada y la salida con un fundido, se mostrará al principio el fundido dejando visible el logo durante algo menos de 3 segundos.
    Añadimos después una instrucción que se lance cuando termine el temporizador y que llevará a la pantalla login.

    lh3.googleusercontent.com__gilZygk4QhU_V2QgPjbLivI_AAAAAAAAFOYb96f8d6513e6e5bc6585b2fe1feba397.

    ¿De dónde sale todo esto?
    - De Screen1 el bloque marrón "Cuando Screen1...Ejecutar". Recordad que pulsando en cada elemento del árbol de la izquierda, se muestra un desplegable con opciones en escroll, de dónde las arrastraremos al espacio de trabajo.
    - Del componente CLK_tempo (nuestro reloj) sacaremos la orden en verde de poner temporizador habilitado como y le añadiremos la propiedad lógica (booleano) Cierto que sacaremos de Integrados / Lógica.
    - La segunda instrucción de control Cuando Temporizador, la sacamos nuevamente del reloj.
    - De Instrucciones / Control sacamos abrir otra pantalla y le enganchamos el nombre que tendremos que teclear nosotros en un campo de texto vacío de Instrucciones / Texto.​

    Ya tenemos la animación montada.

    2- Creando la capa de Logueo en la nueva pantalla (login) (abrir)

    Para hacerlo sencillo, vamos a insertar una tabla de disposición donde colocaremos los tres elementos que la van a conformar: el cuadro de texto para el usuario, el campo de contraseña y el botón de enviar:
    lh3.googleusercontent.com__Yc89s3IYzJ8_V343mAKbYmI_AAAAAAAAFQ4be684f67fbd36852a7169b38117ec98b.

    En éste caso, he añadido un logo a la parte superior de la tabla de disposición principal y la he configurado con 7 filas añadiendo un 7 al número de celdas (Rows).

    Los campos de usuario y contraseña que van titulados cada uno por su respectiva etiqueta y una tercera etiqueta con el texto sin color que actúa como separador del botón Enviar.
    Además, de Almacenamiento he añadido un TinyDB para almacenar las credenciales de manera que dé persistencia a la app (que no haya que insertar los datos cada vez que se ejecuta).
    [NOTA: se me ocurre poner una casilla para recordar las credenciales y que las guarde en la base de datos que acabamos de añadir, pero como no estoy seguro al 100% de cómo hay que hacerlo, lo añadiremos más adelante .]

    Los componentes de Conectividad los he añadido para iniciar la actividad ActivityStarter y para manejar el contenido dinámico Web1. Con éste último pretendo almacenar la cookie y gestionar los códigos de respuesta para seguir adelante o reiniciar el logueo en caso de error, para lo que también añadiremos más adelante un notificador.



    SEGUIREMOS POCO A POCO...:blush:
    Doogee Mix Ofertas
    Al registrarte dejarás de ver este anuncio. Anímate, es gratis, rápido y sin PUBLICIDAD!
     
    Última edición: 7 Jul 2016
    • Me Gusta Me Gusta x 6
    • FeyoMx

      FeyoMx Build bridges, Not Walls!!! Colaborador

      • Cocinero Android
      • MDSdev
      • LTT
      11 Mar 2015
      Pachuca,Hgo,México.
      Calificaciones:
      +13.185
      Te sigo desde tus hilos pasados y estoy muy interesado en tus enseñanzas. Estaré atento

      Enviado desde mi Lenovo A7010a48 mediante Tapatalk
       
      • Me Gusta Me Gusta x 1
      • JDesing

        JDesing Cuando arrivo a casa... Moderador

        • Cocinero Android
        • MDSdev
        • LTT
        31 Mar 2016
        Dentro del Móvil
        Calificaciones:
        +9.906
        Me parece una idea genial!

        Si necesitas aporte gráfico, HTML5, CCS3 te puedo hacer algo a ratos.

        Enviado desde mi Lenovo K50-t5 mediante Tapatalk
         
        • Me Gusta Me Gusta x 1
        • xabilaser

          xabilaser Simdualero de Platino

          • Veteran@
          20 Jun 2012
          Basque Country
          Calificaciones:
          +329
          Ese es precisamente mi fuerte, pero si como yo, estás abierto a aprender PHP, creo que estás en el sitio adecuado porque creo que la forma más sencilla de conectar una app a través de php es incrustando un script en html.
          Ahí tienes un puto de partida.
          ¿Te animas a enredar por ese camino?

          Enviado desde mi THL 5000 mediante Tapatalk
           
          • Me Gusta Me Gusta x 1
          • JDesing

            JDesing Cuando arrivo a casa... Moderador

            • Cocinero Android
            • MDSdev
            • LTT
            31 Mar 2016
            Dentro del Móvil
            Calificaciones:
            +9.906
            Estaré atento por si me viene bien cuando decidáis empezar.

            Saludos.

            Enviado desde mi Lenovo K50-t5 mediante Tapatalk
             
          • xabilaser

            xabilaser Simdualero de Platino

            • Veteran@
            20 Jun 2012
            Basque Country
            Calificaciones:
            +329
            Esto ya ha empezado

            Enviado desde mi THL 5000 mediante Tapatalk
             
            • Me Gusta Me Gusta x 1
            • xabilaser

              xabilaser Simdualero de Platino

              • Veteran@
              20 Jun 2012
              Basque Country
              Calificaciones:
              +329
              ¡Atención gurús del PHP!
              yo os invoco...


              Llegados al formulario de logueo, necesitamos una página (supongo que en html) para llamar al formulario de logueo de MDS y enviarle los datos mediante GET. Creo que ésto es lo más sencillo que podemos hacer. A partir de la respuesta del servidor (200) intentaremos guardar la cookie y pasar a navegar por la app.
              Dejo un enlace a un vídeo en el que se explica algo parecido:
               
              Última edición: 12 Jul 2016
            • JDesing

              JDesing Cuando arrivo a casa... Moderador

              • Cocinero Android
              • MDSdev
              • LTT
              31 Mar 2016
              Dentro del Móvil
              Calificaciones:
              +9.906
              Hola compañero,

              Que necesitas exactamente un formulario de login en html?

              Enviado desde uno de los ocho núcleos de mi Lenovo K3 Note mediante Tapatalk.
               
            • xabilaser

              xabilaser Simdualero de Platino

              • Veteran@
              20 Jun 2012
              Basque Country
              Calificaciones:
              +329
              Hola compañero!
              Necesitamos una respuesta 200 del servidor. No se si la solución es un formulario html o enviar los datos mediante get. Tenemos que comprobar credenciales y generar una Cookie sin usar las credenciales de la base de datos. Algo así como una api de acceso.

              Enviado desde mi Le 1 Pro mediante Tapatalk
               
            • JDesing

              JDesing Cuando arrivo a casa... Moderador

              • Cocinero Android
              • MDSdev
              • LTT
              31 Mar 2016
              Dentro del Móvil
              Calificaciones:
              +9.906
              De comunicaciones entre servidor y bases de datos se encargaba mi antiguo compañero en Master-web. Si necesitas un formulario html si te lo puedo hacer, pero de lo otro siento no poder ayudar.

              Creo que deberías buscar por los foros de programación o hablar con cualquier youtuber que entienda del tema y a ver si se presta a hacer el favor.

              Enviado desde uno de los ocho núcleos de mi Lenovo K3 Note mediante Tapatalk.