|     Inicio    |   |         |  |   FOROS      |  |      |      
   Elastix - VoIP B4A (Basic4Android) App inventor 2 PHP - MySQL
  Estación meteorológica B4J (Basic4Java) ADB Shell - Android Arduino
  Raspberry Pi Visual Basic Script (VBS) FireBase (BD autoactualizable) NodeMCU como Arduino
  AutoIt (Programación) Visual Basic Cosas de Windows Webs interesantes
Translate:
Búsqueda en este sitio:


.

App inventor 2 en español
Cómo programar los teléfonos móviles con Android.
Curso de App inventor 2 en español - Juan Antonio Villalpando

-- Tutorial de iniciación de App Inventor 2 en español --

Volver al índice del tutorial

___________________________

169Z.- JavaScript. Obtener valor de MySQL en tiempo real.

p169Z_javascript_mysql.aia

- Para trabajar con datos en tiempo real podemos utilizar:

- CloudDB.
- FirebaseDB (realtime).
- MQTT.

- En este tutorial vamos a ver cómo podemos obtener datos en tiempo real (con un pequeño retardo) de una base de datos MySQL.

- Tenemos la siguiente base de datos.

- Nombre de la base de datos: web

- Nombre de la tabla: sensores

- Queremos consultar la celda temperatura de la fila id = 2

- El valor de la temperatura irá cambiando, lo queremos consultar automáticamente en tiempo real (con un pequeño retardo).

- Tenemos varias posibilidades:

- Crear una página HTML con PHP y refrescarla cada cierto tiempo con el código HTML:

<meta http-equiv ="refresh" content ="8" >

- Refrescarla mediante JavaScript:

window.location.reload(true);

- Con esos dos métodos refrescaríamos toda la página.

- Con los bloques de App Inventor, podemos consultar el valor mediante un Reloj actuando como temporizador (con un Intervalo de 8000, por ejemplo)

- En nuestro caso vamos a realizarlo con temporizador, pero éste se encontrará en el código de JavaScript. Utilizaremos ajax.

________________________________________________________________________________________

- Código para insertar temperatura en MySQL.

- Mediante este código podemos insertar un valor de temperatura en la fila id = 2.

post_tempe.php 

<?php
$link = new mysqli("localhost", "name_user", "password_user", "name_database");
if ($link->connect_error) {
    die('Connect Error: ' . $mysqli->connect_error);
}
//  ESTABLECER TEMPERATURA.
		$tempera=$_POST['tempera'];
        mysqli_query ($link, "UPDATE sensores SET temperatura='$tempera' WHERE id=2"); 
        echo "Saved: ".$tempera;
$link -> close(); 	
 ?>

________________________________________________________________________________________

- Código para obtener el valor de la temperatura en MySQL.

- Mediante este código podemos obtener el valor de temperatura de la fila id = 2.

get_tempe.php 

<?php
$link = new mysqli("localhost", "name_user", "password_user", "name_database");
if ($link->connect_error) {
    die('Connect Error: ' . $mysqli->connect_error);
}
//  OBTENER TEMPERATURA.
$result = mysqli_query ($link, "SELECT temperatura FROM sensores WHERE id=2 ");
if (mysqli_num_rows($result) > 0) {
  while($row = mysqli_fetch_assoc($result)) {
	 $temp = $row["temperatura"];
  }
 // echo $temp;
  echo json_encode($temp);
} else {
  echo "-";
}	
$link -> close(); 	
 ?>

_________________
- Diseño.

_________________
- Bloques.

_________________
- Comentarios.

- Cuando pulsamos btn_send, enviamos el valor de la temperatura a MySQL y recibimos respuesta.

- Cuando pulsamos btn_get, obtenemos el valor de la temperatura de MySQL.

- He utilizado dos componentes Web para facilitar el código.

- Ahora veamos la obtención automática de la temperatura, se realizará cada 8 segundos.

- Pulsamos solamente una vez en el btn_automatic, entrará en funcionamiento el temporizador de JavaScript y obtendremos la temperatura cada 8 segundos.

- Mediante .ajax, establecemos un tiempo de 8000 y consultamos el código de get_tempe.php

- Obtenemos el valor en el <div> de la página web y en el bloque WebViewStringChange de App Inventor.

automatico.htm
 

<html>
 <head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var auto_refresh = setInterval(function(){
    $.ajax({ 
      type: "POST",
      url: "get_tempe.php",  
      success: function(temper){    // temper is return value.
        $('#hereTemper').text(temper); 
		window.AppInventor.setWebViewString("" + temper);
      },
    });
}, 8000); 	

});
</script>
</head>

<body>
<div id="hereTemper"></div>
</body>
</html>

- Los tres archivos utilizados se encontrarán en el servidor web.

________________________________________________________________

- Encriptar un código HTML.

- Podemos encriptar un código HTML para convertirlo en valores ASCII hexadecimales mediante esta web:

https://www.webtoolhub.com/tn561359-html-encrypter.aspx

- Sustituimos el código obtenido por los códigos de automatico.htm

- El código obtenido es muy fácil de desencriptar.

__________________________________

 
- Mi correo:
juana1991@yahoo.com
- KIO4.COM - Política de cookies. Textos e imágenes propiedad del autor:
© Juan A. Villalpando
No se permite la copia de información ni imágenes.
Usamos cookies propias y de terceros que entre otras cosas recogen datos sobre sus hábitos de navegación y realizan análisis de uso de nuestro sitio.
Si continúa navegando consideramos que acepta su uso. Acepto    Más información