|
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
___________________________
170E.- Web SQL Database. HTML5.
 p170E_SQLDatabase.aia
- Vamos a utilizar una base de datos SQL en nuestro navegador web mediante JavaScript.
- No necesitamos añadir librerías.
- Podemos utilizar los comando de SQL: https://www.w3schools.com/sql/default.asp
- Utilizaremos Web SQL Database, actualmente (desde 2010) W3C no mantiene este desarrollo, pero funciona y lo podemos utilizar sin problemas.
https://www.w3.org/TR/webdatabase/
- IndexedDB es más moderno y algo más complicado de utilizar https://es.javascript.info/indexeddb - https://caniuse.com/indexeddb
- Utilizaremos estos archivos:
1create.htm |
<script>
var db = openDatabase('database', '1.0', 'My DataBase', 3 * 1024 * 1024);
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS usuarios (id unique, name, age)');
window.AppInventor.setWebViewString("Table created.");
});
</script>
|
2insert.htm |
<script>
var db = openDatabase('database', '1.0', 'My DataBase', 3 * 1024 * 1024);
var datos = window.AppInventor.getWebViewString().split(":"); // Entrada de datos.
id_in = datos[0];
name_in = datos[1];
age_in = datos[2];
db.transaction(function (tx) {
tx.executeSql('INSERT INTO usuarios (id, name, age) VALUES (' + id_in + ',"' + name_in + '","' + age_in + '")');
window.AppInventor.setWebViewString("Inserted: " + name_in);
});
</script>
|
3update.htm |
<script>
var db = openDatabase('database', '1.0', 'My DataBase', 3 * 1024 * 1024);
var datos = window.AppInventor.getWebViewString().split(":"); // Entrada de datos.
id_in = datos[0];
name_in = datos[1];
age_in = datos[2];
db.transaction(function (tx) {
tx.executeSql('UPDATE usuarios SET name = ' + '"' + name_in + '"' + ', age = "' + age_in + '"' + ' WHERE id =' + id_in + '');
window.AppInventor.setWebViewString("Updated: " + id_in);
});
</script>
|
4select.htm |
<script>
var db = openDatabase('database', '1.0', 'My DataBase', 3 * 1024 * 1024);
var toApp = "";
db.transaction(function (tx) {
tx.executeSql('SELECT * FROM usuarios', [], function (tx, results) {
var len = results.rows.length, i;
for (i = 0; i < len; i++) {
toApp = toApp + results.rows.item(i).id + "," + results.rows.item(i).name + "," + results.rows.item(i).age + "\n";
}
window.AppInventor.setWebViewString("" + toApp);
}, null);
});
</script>
|
5deletetable.htm |
<script>
var db = openDatabase('database', '1.0', 'My DataBase', 3 * 1024 * 1024); ;
db.transaction(function (tx) {
tx.executeSql('DROP TABLE usuarios');
window.AppInventor.setWebViewString("Deleted Table usuarios");
});
</script>
|
6deleteId.htm |
<script>
var db = openDatabase('database', '1.0', 'My DataBase', 3 * 1024 * 1024);
var datos = window.AppInventor.getWebViewString(); // Entrada de datos.
db.transaction(function (tx) {
tx.executeSql('DELETE FROM usuarios WHERE id=' + datos + ' ');
window.AppInventor.setWebViewString("Deleted: " + datos);
});
</script>
|
OBSERVACIONES:
- Cada vez que modifiques un archivo .htm reinicia el MIT Companion para actualizar los cambios.
- Cuidado con las comillas simples (') y las comillas dobles (")
tx.executeSql('UPDATE usuarios SET name = ' + '"' + name_in + '"' + ', age = "' + age_in + '"' + ' WHERE id =' + id_in + '');
_________________
- Diseño.
_________________
- Bloques.
__________________________________
|
