El componente web en App Inventor

Las páginas webs utilizan para comunicarse con nuestros navegadores el protocolo HTTP ó HTTPS.

 

En nuestra app nos puede interesar en determinadas circunstancias usar HTTP para enviar/recibir datos a/desde un servidor web. Para conseguir esto con App Inventor podemos utilizar el visor web si sólo queremos obtener una página web, por ejemplo, el resultado de una búsqueda, o el componente Web si queremos, por ejemplo, enviar los datos de un formulario de acceso a un sitio web(login).


En Gallery os he dejado una aplicación en App Inventor que pretende ser una prueba de cómo utilizar tanto el visor web como el componente web.

 

Dicha aplicación presenta un par de simples botones y permite al usuario que busque algo en Google(método GET de HTTP, implementado por un simple visor web) o que mande unos datos de autenticación a un servidor web(método POST de HTTP, implementado por el componente web).

 

Me parece interesante ilustrar cómo realizar el envío de datos con el componente web ya que son muchas las personas que no tienen muy claro el tema de los bloques, construir las cabeceras HTTP que tienen que poner para mandar datos al servidor y que este los procese, etc.

¡Pero no sólo tenemos estas posibilidades con el componente web!

Además podemos realizar aplicaciones que:

  • Envíen/Reciban ficheros completos a un servidor
  • Procesen JSON, XML
  • Utilicen alguna API del algún tipo
  • Soporten cookies, etc.

Un saludo y espero sea útil ;-)

Jose Luis Núñez

@twajoseluis

Escribir comentario

Comentarios: 23
  • #1

    mauricio (jueves, 28 abril 2016 04:31)

    Hola hay algún video de este tema

  • #2

    Jose Luis Núñez (jueves, 28 abril 2016 07:55)

    Hola Mauricio,
    no hay ningún vídeo pero en Gallery(fíjate en el enlace) tienes el código completo de la app ;-)

  • #3

    Christian (viernes, 29 abril 2016 11:24)

    Hola Jose Luis, con este método podría loguearme, por ejemplo en la pagina de facebook? O que necesitaría para poder crear una app que pueda hacer login en paginas web desde la app? Un saludo y gracias

  • #4

    Jose Luis Núñez (viernes, 29 abril 2016 11:38)

    Hola Christian,
    hasta donde yo sé Facebook proporciona su propio código para integrarlo con tu app pero hay que hacerlo desde Java en Eclipse o Android Studio... Si lo quieres hacer desde App Inventor lo más sencillo, desde mi punto de vista, es integrar esa autenticación en un formulario incrustrado en un fichero HTML que cargues en tu app a través de un visor web...
    Puedes echarle un ojo a https://developers.facebook.com/docs/facebook-login/web donde verás toda la info que te hace falta.
    Lo que me preguntas de hacer login a cualquier web es lo que hace la app WebComponent comentada en el artículo...lo único que tienes que tener claro es cómo construir el envío de datos con POST y eso lo puedes averiguar fácilmente si sabes el código del formulario de login...como es el caso de mi app que yo sé el código HTML del login(http://cursoappinventor.net84.net/login.html) y sé lo que tengo que enviar.

    Espero sea de utilidad ;-)

  • #5

    ivan (lunes, 09 mayo 2016 00:42)

    Hola, cuando tomo una foto y la comparto este tiene un nombre asignado por el cel....hay forma de asignar yo el nombre que tendra el archivo en este caso la foto?

  • #6

    Best SEO training in hyderabad (viernes, 27 mayo 2016)


    Best seo training in hyderabad.Here professionals are giving training with fee of low cost and Experience of 12years in the field of digital marketing.Train by the experts and get more knowledge about Digital marketing.
    <a href="http://seosaisantosh.com">Best seo training in hyderabad</a>

  • #7

    Josue quinteros (sábado, 22 octubre 2016 00:57)

    Hola tengo una app que muestra una pagina a travez del componente pagina.. pero al hacerla querer funcionar con una pagina responsive me indica que tengo que habilitar el almacenamiento MOD. Me puedes ayudar?

  • #8

    jose (domingo, 23 octubre 2016 17:51)

    hola como logro consumir un servicio para realizar un login en una aplicacion

  • #9

    Andres Valencia (viernes, 28 octubre 2016 07:54)

    Hola, permíteme preguntarte...
    ¿Cómo hago para que mi App cargue imágenes en la aplicación desde un servidor destinado por mi?

    Gracias, Espero respuesta.

  • #10

    Jose Luis (viernes, 28 octubre 2016 12:05)

    Andrés tienes que tener la URL(la dirección) de tu imagen en el servidor, algo del tipo http://... y en el componente correspondiente de App Inventor cargarlo ponerlo en la propiedad Foto o ImagenDeFondo según sea uno u otro.

    Un saludo!

  • #11

    Antonio (lunes, 20 febrero 2017 03:36)

    Saludos, disculpa necesito hacer una aplicación que me genere un archivo pdf al final, encontré un de como hacerlo pero no logro hacer que la pagina web que me convertirá mi archivo txt lo reciba, ¿Habría una forma de que pudieras ayudarme?

  • #12

    Iñaki (domingo, 05 marzo 2017 14:46)

    Hola buenas, lo primero gracias por sus tutoriales y gran trabajo, estoy en un proyecto con arduino, php, mysql y app inventor, todo funciona correcto pero no encuentro ningun tutorial para poder visualizar los registros que hay en la BD MySql con App Inventor, le agradeceria infinitamente su ayuda, un saludo! y gracias de antemano

  • #13

    Iñaki (viernes, 10 marzo 2017 04:57)

    Hola buenas, gracias por el aporte y el tutorial, lo he seguido al pie de la letra pero me da error 1109: the specified URL is not valid,

  • #14

    Gustavo Arango (domingo, 12 marzo 2017 21:41)

    Hola me gustaría saber como puedo subir una foto a Firebase storage o Usando Google Cluod Storage o Google Cloud storage JSON API?

  • #15

    Carlos Tamayo (martes, 21 marzo 2017 13:51)

    Esto tratando de guardar en un pantalla datos de EMPRESA, en la otra Datos de PERSONAS de esa empresa y en otra datos del EDIFICIO de la EMPRESA.
    Seguí el procedimiento y lo hace bien para screen1 (EMPRESA) pero en las otras pantallas dice "ERROR 1113 Unable tu build request data: Element 1 doesn't contain two elements".
    Y entonces en conclusión solo me manda datos desde screen1

  • #16

    kevin (jueves, 06 abril 2017 01:58)

    Hola muy bueno este post, tengo una pregunta, estoy leyendo los datos tomados por tres sensores, humedad, temperatura y frecuencia cardiaca, los cuales envia la info al modulo wifi ESP8266, y este envia la info a un dispositivo android por medio de una app elaborada en APP INVENTOR, pero esto leyendo una cadena JSON y me gustaria saber como puedo organizar dicha informacionen una lista, gracias.

  • #17

    Yunior (martes, 16 mayo 2017 16:29)

    buenos días, tengo una extensión de App inventor (aix) que envía y recibe correos pero solo la hace con los puerto 995 y 465, puede usted modificarle para que envíe y reciba con los puerto 25 y 110 sin SSL?. Gracias que tenga buen día.

  • #18

    Gesell (miércoles, 24 mayo 2017 19:13)

    Tengo una app que me muestra una tabla con Fusion Tables en un visor web, pero necesito capturar lo que selecciono en esa tabla para poder modificar solo la que selecciono, ¿como capturo lo que selecciono en el visor web?

  • #19

    David (domingo, 28 mayo 2017 17:34)

    Hola, necesito leer una variable que tengo guardada en ubidots pero no he podido porcesar el JSON que me envía luego de haber realizado un GET Request . Sabes algo del tema?

  • #20

    alexander (viernes, 16 junio 2017 14:32)

    hola Jose Luis, te escribo para que por favor me ayudes con lo siguiente:
    hice una aplicacion con appinventor2.
    Quiero que los datos que ella recoge y almacena en la memoria del telefono en un archivo .csv
    automaticamente los envie a un servidor gratuito para que las personas que tengan la app puedan consultarlos o descargarlos.
    me ayudas porfa muchas gracias.

  • #21

    Jesus Ponce (sábado, 17 junio 2017 17:34)

    Hola disculpa queria saber si con el app inventor podes enviar y traer datos desde un webserver , sabes donde puedo conseguir informacion de esto por q nosotros estamos programando un algoritmo genético en java y queremos comunicarlo con un app de app inventor mi main es fiberbusen@gmail.com cualquier cosita te agradeceria la ayuda saludos buen post.

  • #22

    Ricardo Castro (jueves, 28 septiembre 2017 22:10)

    Hola estimado, soy Nuevo en este campo de desarrollo, estoy realizando una interfaz de logeo y de registro de usuario, la base de dato es local, utilizo xampp, como servidor web, y estoy utilizando el componente web en appinventor para recibir y enviar datos, su ayuda guiando como asigno el servidor web local que tengo, para almacenar y extraer datos de mi base de datos, a la espera de una pronta respuesta le quedo muy agradecido mi correo ricajav777@gmail.com.

  • #23

    jose luis (miércoles, 11 octubre 2017 23:48)

    buenas tardes tengo un problema quiero crear un aplicacion que llame un archivo .php guardado en mi computadora la conexion al servidor osea mi computadora ya esta echo el archivo .php estabn ya lo cheque el detalle es saber con el componente WEB.GotText de appinventor no esta recibiendo nada, este es mi archivo php
    <?php

    error_reporting (E_ALL ^ E_NOTICE ^ E_DEPRECATED);

    $conexion = mysql_connect("localhost", "root", "");

    if(!$conexion)
    {
    echo "No se ha podido conectar con el servidor" . mysql_error();
    }
    else
    {
    echo "Hemos conectado al servidor <br />";
    }

    $db_seleccionada = mysql_select_db("ComandApp", $conexion);


    if(!$db_seleccionada)
    {
    echo "Hay un problema al seleccionar la base de datos" . mysql_error();
    }
    else
    {
    echo "Conectado correctamente a la base de datos <br />";
    }


    $llegan=$_GET;
    $peticion=$llegan['orden'];
    //$peticion="SELECT * FROM comida";
    // echo $peticion;

    $hacer = mysql_query($peticion);

    ///////////////////////////////////////////////////////////////////////////////
    // En los casos que hay SELECT y se debe enviar una respuesta actúa este código

    if (substr($peticion, 0, 6) == 'SELECT') {

    $resultado = mysql_query("SHOW COLUMNS FROM comida");
    $numerodefilas = mysql_num_rows($resultado);
    if ($numerodefilas > 0) {

    while ($rowr = mysql_fetch_row($hacer)) {
    for ($j=0;$j<$numerodefilas;$j++) {
    $en_csv .= $rowr[$j].";";
    }
    $en_csv .= "\n"."<br>";
    }

    }

    print_r($en_csv);
    return $en_csv;
    }
    mysql_close($conexion);
    ?>

    al final debo mandar el valor encontrado a la aplicacion pero no se si este bien